Listing all unicode characters with Node

and how it would look like

localStorage in iOS5 Private Browsing mode

Attempting to use localStorage.setItem in iOS5 Private Browsing mode will throw the exception

QUOTA_EXCEEDED_ERRROR DOM Exception 22.

But getItem and removeItem calls do not throw.

You can see some details about that in the jStorage discussion

Loading CDN hosted jQuery with local fallback

I found this piece of art in html5boilerplate.
It tries to load jQuery from a CDN and if it fails for whatever reason it tries a local one.

Creating a custom google maps marker with canvas

Generating a custom marker with canvas is handy when you want to change the marker size/color dynamically.

The following code snippet contains a 'createMarker' function that creates a canvas, draws the marker graphics and returns back the Data URL encoded version of that canvas which can be used as an input at the marker creation.

See the example below.

String trimming in Javascript

Here is a simple trim function to remove leading and trailing whitespaces.

function trim(s) {
  return s.replace(/^\s*|\s*$/g, '');
}

and in CoffeeScript

trim = (s) ->
  s.replace /^\s*|\s*$/g, ''

You can check Steven Levithan's collection of trim functions.

Tapping on <label> in Mobile Safari

Tapping on <label> does not auto-focus linked in Mobile Safari but If we add an empty function as clickhandler it works fine.

<input type="checkbox" id="test" name="test">
<label for="test" id="test_label">This is the label</label>
<script>
  document.getElementById("test_label").onclick = function () {};
</script>

This is the releated Stackoverflow discussion.

Customized google maps

You change the look and feel of google maps easily.

Here is a simple example that turns off all labels on the map

map = new google.maps.Map(mapContainer, {}));

var noLabelStyle = new google.maps.StyledMapType([ {
        featureType: "all",
        elementType: "labels",
        stylers: [
            { visibility: "off" }
        ]
    }], {
        name: "no_labels_style"
    });

map.mapTypes.set('stylename', noLabelStyle);
map.setMapTypeId('stylename');

The most important part is the google.maps.StyledMapType class.
Its constructor expects an array, and that describes which element should be visible and how.

You can find the details documentation in the API reference.

Creating a NPM package

NPM is a package manager for node.

Creating packages with NPM is not difficult so here are the steps.

1. Creating the package.json

Here is an example
{
"name": "packagename",
"version": "0.0.1",
"description": "Package description",
"main": "package.js",
"keywords": [
"foursquare",
"4sq"
],
"repository" : {
"type" : "git",
"url" : "https://yikulju@github.com/yikulju/Foursquare-on-node.git"
}
}

2. Linking it with NPM

npm link

3. Publishing the package

First, you have to create a user in the repo.
npm adduser

Then you can publishing the package
npm publish


This is a good resource (Introduction to npm) but for some strange reason it was difficult to read, maybe the writing style.

EJS default escaping

In EJS (Embedded JavaScript) escaping is a default behaviour.

// escape by default
<%= VARIABLE_NAME %>

This can easily mess up a couple of things (including JSON, HTML rendering), luckily you can turn it off by using

// render out string
<%- VARIABLE_NAME %>


Zoom to fit all markers with Google Maps V3

// creating the map
var map = new google.maps.Map(document.getElementById("map_canvas"), {
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

// latitude, longitude values
var latLons = [ { lat: 35.6453962, lon: 139.7117893 }, 
                           { lat: 35.645076, lon: 139.709183 }  ];

// this is the bounding box container
var bounds = new google.maps.LatLngBounds();

// iterating through the points
latLons.forEach( function (element, index, array) {

  var point = new google.maps.LatLng(element.lat,element.lon);
  
  // extending the bounding box
  bounds.extend(point);

  // creating the marker on the map
  var marker = new google.maps.Marker({
        position: point,
        map: map
    });
});

// zooming on the map
map.fitBounds(bounds);

Infinite blinking effect with jQuery

I'm not sure this is the shortest way to do this but it works.

setInterval( function () {

// this is the element you want to blink
var box = $(".blinking_thing");

if (box.data("fade") === 1) {
box.fadeIn().data("fade", 2);
} else {
box.fadeOut().data("fade", 1);
}
}, 800)


SVG JavaScript Libraries

SVG has been in development since 1999 and in 2010 we can say that all major modern web browsers except Microsoft Internet Explorer, support and render SVG markup directly. The Internet Explorer 9 beta supports SVG.

But dealing with SVG documents remained painful, don't despair there are JavaScript libraries to help.


Protovis
Great for data visualization.
It only works in browsers that have native SVG support.


Raphael
It's a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation.

But note that there are ways of expressing things in SVG that are not possible in Raphael. There are no "groups". This implies that you can't implement layers of Coordinate Transfomations. Instead there is only one coordinate transform available.
If your design depends on nested coordinate transforms, Raphael is not for you.

It supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.


jQuery SVG
Well written and documented. Lots of examples and demos. Supports most SVG elements, allows native access to elements easily.

It only works in browsers that have native SVG support.


SVG Web
It uses flash to render in non-SVG compliant browsers.

HTML Comments as strings

Reading HTML comments from a DOM tree with JavaScript is easy.

var nodes = document.body.childNodes,
    comments = [];

for (var i = 0; i < nodes.length; i++) {

    // if the nodeType is 8
    if (nodes[i].nodeType == 8) {
          
          // this is a comment
          comments.push(nodes[i]);
    }
}

Let's say that the comments array is not empty, so the type of comments[0] is a Comment. That's great but how can you read its content?

This is what the W3C DOM-Level-1 spec says. It implements the Comment interface.

interface Comment : CharacterData {
};

This does not really help us but don't despair. It also implements the Node interface.

  ...
  readonly attribute  DOMString            nodeName;
           attribute  DOMString            nodeValue;
  ...

Yes, it's read-only but you can get the comment as a string by using its nodeValue.

comments[0].nodeValue

W3C DOM-Level 3 specifies something called textContent. This can also do the job, you can read about them here, textContent vs. innerText