JSON.stringify then JSON.parse

I realized we keep doing JSON stringify then eventually parsing it back again and again to copy over objects. This does a dump “clone”, it ignores references and functions but is really fast. I wrote a Underscore.js or Lodash mixin just to do this.

[code lang=”javascript”]
/**
* This is the shortcut for JSON.stringify then parsing it back.
* Quick access to simple object copying.
* It does not copy functions!
*
* @author KahWee Teng
* @return {Object} Lodash mixin object.
*/
_.mixin((function() {
"use strict";
return {
copy: function(object) {
return JSON.parse(JSON.stringify(object));
}
};
}()));
[/code]

There’s just so many ways to doing a clone but this is by far the fastest but then again it depends on your needs. Dump clone I call this.

Retina-ready images using SCSS mixins

Saw it on 37signals website, an easy way to do Retina-ready images through CSS if you have SCSS installed.

[code language=”css”]@mixin image-2x($image, $width, $height) {
@media (min–moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
/* on retina, use image that’s scaled by 2 */
background-image: url($image);
background-size: $width $height;
}
}[/code]

Usage:

[code language=”css”]div.logo {
background: url("logo.png") no-repeat;
@include image-2x("logo2x.png", 100px, 25px);
}[/code]

It has also been modified to include Google Nexus 7 with it’s 1.3 pixel ratio as a retina-capable device.