Recent ramblings... on JavaScript

 
 
 

Change the default Google Map colours with custom styles

Last year I wrote an article about how to change the default Google Map colours using CSS filters, it was very basic and unsupported in some browsers but it was the best you could do at the time. Google have now introduced version 3 of the Google Maps API which finally gives you control of each element, it allows you to define the exact colours, hue, saturation and much more.

Although it is slightly harder to get up and running with over the embedded iframe I would advise anyone looking to customise their maps to use this method instead of CSS filters.

 
 

Respringboard.js jQuery Plugin

Recently I had the need to recreate the clever content reveal layout used in the new iTunes 11 and the Google images design, there didn't appear to be anything in the jQuery community that could do the job and the approaches used by Google and iTunes were too heavyweight for what I was looking for. It was time to hit the drawing board and build a plugin for myself.

The result is Respringboard.js which is up on Github right now, named after one of the first appearance of this kind of design on the iOS app Springboard with one huge difference, it's completely responsive and adjusts to the size of the browser window making it prefect for desktops or mobile devices alike.

 
 

Automatically clear browser cached files when you upload a new version

If you are regularly making changes to your CSS or JavaScript you will probably have run into caching issues with browsers, maybe changes you have made and uploaded are not showing up on the live server or perhaps you can see changes but your clients or colleagues can’t see them. This usually comes down to the browser caching the files locally and not refreshing the changes when you’ve uploaded a new file.

Thankfully theres a cool way to force the browser to refresh the file when you have made a change, we can do this by appending some query string to the end of the file name, this query string doesn’t need to actually do anything its just a neat little trick to make the browser think it is a different file and load the new version.

 
 

Get personal with browsers using Modernizr.js

In the past few years we have had an explosion of different devices, browsers and platforms with varying capabilities along with a vast array of new & experimental CSS3 and HTML5 tools and effects. This has given most web developers a huge headache, either we try the new effects and spend days targeting and debugging in every browser and device or choose not get involved in the new tools altogether and miss out.

Thankfully there is a solution, instead of targeting each browser which really isn’t an option anymore we can use Modernizr.js. This simple file will detect the device and browsers capabilities and allow you to take control of what features are enabled depending on what the browser and device can handle. As a real world example I’ve used Modernizr a number of times on this site to detect if a device has touch abilities and disable hover effects and allow swipe/touch events in the sliders.

 
 

Spam safe email addresses with jQuery

Email address links in your footer or on your contact page makes it really easy for visitors to get in contact with you. Unfortunately it also makes it easy for spammers to harvest your email address and inundate you with pointless offers or worse still leave you open to viruses.

Thankfully there’s some great ideas ways to protect your email address from spiders and robots. A lot of them use PHP or some other server side technology to detects piders and hide your address. But what if we want to do this with good old fashion HTML and jQuery?