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.
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.
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?