Bookmarklets are the handiest little things. In case you don't know (which I'm sure you do), they're small chunks of JS that you store in your browser's Bookmarks or Favourites section which you can launch while looking at any web page. I write bookmarklets for all kinds of different tasks – navigating quickly around the build monitor at work, filling in tricky forms that my browser autocomplete doesn't handle, etc.

Here are a few of bookmarklets I find extremely useful for web development. To add them to your browser, simply drag the link on the title into your bookmark bar, hold shift down and drag or right-click and 'Add to Favourites', depending on what browser you're in.

Add JS to the page by URL

This will allow you to add any script you like to the current page. This can be particularly useful if you want to add a certain library or plugin to a page to investigate it further.

javascript:(function(){document.body.appendChild(document.createElement('script')).src=prompt('Script to add');})();

Add the latest CDN jQuery to the page

A variation on the above bookmarklet, this simply adds the latest version of jQuery. If you want to be able to play with a page and are familiar with jQuery, this will ensure that it is loaded and attached.

javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://code.jquery.com/jquery-latest.min.js'})();

Add CSS to the page by URL

Add any stylesheet to the current page with a particular URL. This is handy if you want to demo variations to clients, I find. particularly if you predefine the CSS URL.

javascript:(function(d){if(d.createStyleSheet)%20{d.createStyleSheet(%20u%20);}%20else%20{var%20css=d.createElement(%27style%27),u=prompt(%27CSS%20to%20add%27);css.setAttribute(%22type%22,%22text/css%22);css.appendChild(document.createTextNode(%22@import%20url(%22+u+%22)%22));d.getElementsByTagName(%22head%22)[0].appendChild(css);}}(document))

Submit this page to the webdev subreddit

This isn't so much a web dev helper, more a general helper. I use this (or a variation thereof) to submit posts to specific reddits with fields prefilled. This bookmarklet defaults to the webdev subreddit.

javascript:window.location=%22http://www.reddit.com/r/webdev/submit?url=%22+encodeURIComponent(window.location)+'&title='+encodeURIComponent(document.title);void(0);

Add a CSS rule to the page

I can't remember whether I wrote this one or if I found it somewhere. The 'x<style>' is something from the middle of jQuery, though. Anyhow.

This allows you to add a style block directly into the page. This is useful for small CSS injections where the browser's web inspector is unavailable or incapable. Even though it's a single prompt that pops up, there's no reason why you can't past an entire stylesheet in there. I sometimes find myself doing that when I'm previewing designs on a production server.

javascript:(function(){var div = document.createElement('div'); div.innerHTML ='x<style>' +prompt('Style to add')+ '</style>';document.body.appendChild(div.lastChild);})();

A couple of weeks ago, I started digging into the Web Audio API. Initially, I was just looking to find out what it was and see if any ideas for toys presented themselves but, kinda predictably, I ended up getting elbow-deep in a bucketful of audio routing graphs, gain nodes and impulse responses.

I'll write up a more detailed post about the API shortly but Max and I used it quite heavily in the 5apps hackathon we attended last week and I wanted to share the outcome of our hacking.

SoundScape

“A Nokia Map mashed together with a bunch of APIs and positional audio to create an immersive map experience.”

For a better explanation of how SoundScape works, check out Max's slides:

• http://mmarcon.github.com/slides/soundscape/

In essence, we use a Nokia Map as the base, add on a Flying Hamster, make a call to Freesound.org for geotagged audio samples, male a call to LastFM for upcoming concerts, make a call to Deezer for the most popular track by the artist playing the event reported by LastFM and put them all together in the browser using 3D positional audio. Basically.

The source is available on GitHub

The Actual Demo

SoundScape (Web Audio API-capable browser required)

I don't find myself using screensavers that much these days. Sure, they made sense when you needed to avoid burning a ghost of the windows start bar into your CRT monitor but with TFTs, LEDs, projectors, OLEDs and whatever else, it's rare you'll find hardware that actually needs protecting like that any more. On top of that, in my case, I'm either at my desk coding or at the coffee machine refilling. There aren't that many opportunities for me to appreciate a warp-speed starfield or some infinite pipes.

What I'm saying is: I miss screensavers.

Since I started writing for CreativeJS, I've seen a lot more examples of clever, cool, pretty and downright creative demos and toys written in JS than I ever had before. You can probably figure out where I'm heading with this: these would make cool screensavers.

A quick bit of googling later and I found a couple of applications that let you set a web-page fullscreen as your screensaver. Of course, you can't just set any old demo as your screensaver, many of them rely on user interaction which kinda defeats the purpose.

Downloads

OS X

WebSaver

Unfortunately, this uses plain-old standard WebKit so no WebGL demos. Maybe someone can fork Chromium to make it do this.

Windows

web-page-screensaver

This one seems to be based on IE so it probably won't work with the canvas-based demos below. If you can point me to a WebKit-based one, I'll include that instead.

Old-school screensavers

Flying Windows

http://dl.dropbox.com/u/16145652/flying/flying.html

Starfield by Chiptune

http://www.chiptune.com/starfield/starfield.html

Non-canvas

Insta-Art by me

http://thelab.thingsinjars.com/insta-art.html

Newsola by Nick Nicholaou

http://www.newsola.com/#/uk

Canvas

Falling blocks by Lionel Tardy

http://experiments.lionel.me/blocs

MMOSteroids by Seb Lee-Delisle

http://seb.ly/demos/MMOsteroids.html

Origami by Hakim El Hattab

http://hakim.se/experiments/html5/origami/

The Single Lane Superhighway by Aaron Koblin and Mr.doob

http://www.thesinglelanesuperhighway.com/

Ablaze by Patrick Gunderson

http://theorigin.net/ablazejs/

Visual Random by Dimitrii Pokrovskii

http://voxelrain.appspot.com/

Circle Worm by Ilari

http://style.purkki.ilric.org/projects/js_wave/

Boids by Jason Sundram

http://viz.runningwithdata.com/boids/

3D Globe by Peter Nederlof

http://peterned.home.xs4all.nl/demooo/

Moonlander by Seb Lee-Delisle

http://moonlander.seb.ly/viewer/

WebGL Needed

Just in case someone in the comments finds a WebGL-capable screensaver, here are the demos I liked that require WebGL.

Clouds by Mr.doob

http://mrdoob.com/lab/javascript/webgl/clouds/

WaterStretch by Edouard Coulon

http://waterstretch.ecoulon.com/

Further Development

The ideal screensaver would allow you to enter several different URLs to allow you to easily save them. There should also be a checkbox to mark demos as 'works offline'. That way, when the screensaver starts, it checks for connectivity then displays a screensaver that doesn't require a connection.

Add your suggestions below.

Exciting news! The Nokia Web Dev Blog is finally live!

You might remember it was one of my 2012 ToDos and I can now move the To-Do to Done.

So far, I've put two posts up, one on using background-size: cover and one on quick prototyping using python SimpleHTTPServer.

I'm not convinced a URL with '.../Blogs/blog/...' is necessarily the most memorable so maybe the next task would be to get something catchier. Any suggestions?