Nicholas Zakas posted today a very very interesting post about one of the most interesting and useful features in HTML5 – localStorage. What’s really impressing is that everybody’s using it, including me, with no fear of security. But security is never strong enough, so it’s quite interesting to listen up the guru!
I recently posted a localStorage wrapper for jQuery in form of a simple plugin. What I miss there is the security.
Definitely I’ve to change it a bit!
In my last post I was talking about the short way to access the id attribute:
this.id; this.attr('id'); // this is the same but slower |
Beside the most important thing that this is the slower notation, you get also larger notation, which in JavaScript is really pain.
What’s interesting is that you can access almost every attribute of an element with that notation. Take a look at the following example:
<img src="image.jpg" title="test" /> |
and than
$('element').title |
This is much faster and quite nice in place of
$('element').attr('title'); |
I know this is really for beginners, but have you ever asked yourself what are the differences between == and === when comparing in JavaScript, and when to use it? Here’s an example:
var a = false; alert(a === 0); // prints false |
That’s false. Even when both the zero and the variable are faulty the entire operation is false. Because the 0 is a number and the variable a is boolean, therefore their different types give us the answer. If there was a comparision only with == the result would be true:
var a = false; alert(a == 0); // prints true |
It’s good when you expect some variable to match certain type to compare with ===. So the correct code is:
var a = false; alert(a === false); // prints true |
Here the type of a compares with boolean. See the complete demo.
The way OpenLayers puts markers on the stage is fine when they are not so much, but once you need more than 100, the library’s solution is not good. The question is is there a way to put all the markers faster than the built in method.
I once wrote about how to speed up markers on OpenLayers, it is clear that my decision was to concatenate the DOM elements like a string after I’ve generated all the markers as markup with innerHTML as it’s faster than appendChild. The only question left is how to convert Longitude/Latitude pair in pixels.
There is a method called getLayerPxFromLonLat() which do the job. Let me show you a snippet:
ll = map.getLayerPxFromLonLat(new OpenLayers.LonLat(lon,lat)); console.log(ll); |
You can see what’s inside the ll object. You can now reference the pixel as ll.y and ll.x.
You know you can manage to redraw an element with single browser reflow. Instead of using .style.property … you can simply add all CSS properties you’d like to change with simply appending to style.cssText property.
var csstxt = $('#selector').css('cssText') + ';top:100;left:100;border:1px solid red;color:#f00;'; $('#selector').css('cssText', csstxt); |
That code is a replacement for
$('#selector').css({ left : '100px', top : '100px', border : '1px solid red', color : '#f00' }); |
enjoy!