nooshu » Interesting Archives

A visualisation experiment using SoundCloud, Backbone.js, three.js and node.js

Matt — Sun, 15 Apr 2012 13:42:21 +0000

Client work, as always, has been busy over the past month or so; so it’s always refreshing to have a play with something a little different. It’s even better when you can actually combine the two! Visual Jazz Isobar decided to have a little code competition open to all the developers in the company. The brief was very simple: build something cool using an external API (bonus points for multiple API’s). Very open brief don’t you think? You only have to have a look at the list of API’s available on programmable web to see that.

As I’ve recently been looking at Backbone.js I decided to put what I’ve learned good use. The experiment evolved over a couple of weeks. I originally planned to use d3.js and last.fm but eventually settled on three.js and SoundCloud. My final submission looked like this:

My little experiment using the SoundCloud API and three.js (with a sprinkling of node.js)

To be honest I could have built the experiment easily without using Backbone, but where is the challenge in that! I love the whole Model, View, Router set up. You do seem to be writing a lot of code a first for very little functionality, but once you are over the initial set up you can add features very quickly. I’ll definitely be using it again for future projects.

The visualisation itself makes use of the Web Audio API. The API is still being developed and standardized, because of that it only runs in Chrome at the moment. Three.js itself runs fine in Firefox, but no audio visualisation.

During development I stumbled across an issue with Chrome and the way the audio buffer works; for the data to load, the music files need to be on the same server as the application. This was a bit of a problem as I was using the SoundCloud API for music streaming. That’s where node.js and Nodester came to the rescue. With a little bit of node.js magic it’s fairly simple to create a proxy server and ‘bounce’ the stream from SoundCloud via the server to the visualisation. A big downside to this method is the music stream (mp3) has to be fully downloaded before the visualisation starts. For this reason only tracks under 6 minutes are returned as search results from SoundCloud. It’s not ideal but it work!

When the competition results came in I was placed second; not first but hey I learnt a lot in the process! You can take a look at my little experiment here.

Writing efficient CSS selectors

Matt — Thu, 08 Dec 2011 06:43:59 +0000

With modern browsers getting quicker with every new version number it’s easy to fall into the trap of writing inefficient code. A page will run super quick on the latest version on Chrome or Firefox, but you also have to consider older browsers and mobile devices. That shiny new web application that uses some super fancy CSS selectors may be unusable on certain devices due to its limited hardware. That’s not to say you shouldn’t be using super fancy selectors; you just have to be careful to consider your target audience, and use them in the most efficient way possible.

The first thing to note about CSS selectors is they don’t work in the way you’d expect. In the west we read a page from left to right. Reading a CSS selector, you’d expect that’s what the browser does as well. Wrong! The browser actually reads a selector from right to left (in Mozilla’s case anyway, and most likely in others too). So take the following CSS as an example:

1
2
3
4
5

body #wrapper .article ul.meta li a {
font-weight: 700;
text-decoration: none;
font-family: Arial;
}

The browser first looks for all the anchor tags (called the “key” as it’s the rightmost selector), then looks at the list items, it evaluates those and throws away the results that don’t match. Next the browser moves onto elements with a class of “meta”, throwing out results that don’t match and so on… you get the idea! There’s so much redundancy in the above selector, it could easily be cut down to:

1
2
3
4
5

.meta a {
font-weight: 700;
text-decoration: none;
font-family: Arial;
}

This example is much more efficient. There are less rules for the browser to evaluate, it’s much easier to read and if you apply minimal selectors across your whole stylesheet you will notice a big difference in file size. The key to writing efficient selectors is to be as specific as possible. Whatever you do don’t write this:

1
2
3
4

body * {
margin: 0;
padding: 0;
}

The universal selector(*) is bad (even body isn’t needed)! You are targeting every single element in the DOM and setting it’s padding and margin to zero. For a large page that could easily be thousands of elements!

I actually inspected the stylesheet for this website and went over it with a fine tooth comb. I found many additional selectors that just weren’t needed. The size of my stylesheet went from 18.3kB down to 16.5kB, a saving of 1.8kB. It doesn’t sound a lot in terms of file size, but that’s a whole lot of selectors the browser no longer has to evaluate to render the page.

Luckily there are tools available that can help you make your CSS more efficient, as well as many other areas of your website too. The first tool I’d recommend is called Page Speed, created by Google. The Page Speed extension is available on both Chrome and Firefox. Once installed you have the option to run it on any page; it will give you an overall score for that page and recommendations on how to improve it.

Page Speed results for this site. Note the "Use efficient CSS selectors" drop down.

The second tool I’d recommend is Opera’s Dragonfly. Dragonfly (similar to Firebug, in name at least) is Opera’s developer toolkit, much like Web Inspector for Chrome. An awesome feature that Dragonfly has, that other toolkits don’t is “style recalculation”. Style recalculation gives you a breakdown of all the selectors that were run on the page, how long they took to evaluate and how many elements they hit along the way (hits).

Dragonfly gives you an extremely useful breakdown of what selectors were used and how long they took to evaluate.

If you look closely at the results in the image above, you will see that the selectors with the most number of hits are the ones involving the universal selector(*), as you would expect. You may also notice that most of the timings say 0.0ms which isn’t very helpful. This is due to the fact that the size of the DOM being tested is very small, and timing to 1 decimal place isn’t accurate enough to show the actual time it took to evaluate. If you were to run this test on a huge page, say the HTML5 Specification for example, you would really be able see the difference in CSS selector efficiency.

This feature of Dragonfly is very new and is still in testing. There are a few issues still to be ironed out in future releases but it’s definitely a tool to keep in your bookmarks.

A word of warning when it comes to writing efficient selectors. I found myself trying to make the selectors so efficient it was becoming quite hard to pin-point where exactly on the site they were being used. If you have a very specific area of a site you are trying to target, it is easier to read if you have the selectors starting with an ID reflecting that area. You then know for certain that the changes you make won’t affect other parts of the site. Also remember that removing “unused” selectors will affect the specificity of the rule. You could end up breaking something, as what you thought was an unused selector was actually used in overriding another rule.

Having too many descendent selectors is something that Page Speed frowns upon, but as with all things in life it’s a case of finding that happy medium. In this case it’s between efficient selectors and CSS that is easy to read and maintain (for you and other developers).

Design for Developers

Matt — Wed, 30 Nov 2011 03:10:11 +0000

As a developer I must admit I find design hard! Open up a blank PSD in Photoshop and I come out in a cold sweat. More often than not a developer will quickly construct an application, get it working and dump everything on a page. The application works, but it’s horrible to look at and is very unintuitive to use. Thankfully, a designer by the name of Johan Ronsse has put together a presentation aimed at developers who are looking to improve their design skills.

The presentation has some excellent content on what you should (and shouldn’t) do with an interface design. Basics on fonts, colours, shadows and icons are all explained in a clear and concise way. For those wishing to continue with their new-found design skills, slide number 179 has a long list of links and books to read. My personal favourite is the simple, yet effective Grid Calculator tool. I’ve read many articles on the grid system, but have never used it. This handy website does all the mundane maths for you, allowing you to get back to making your application look pretty!

Big thank you to Johan for the presentation, every developer should read it at least once (or bookmark it to read later)!

Embracing Git for version control

Matt — Tue, 29 Nov 2011 07:25:05 +0000

For many years I’ve been using Subversion (SVN) as my version control of choice. It’s been a part of my deployment process, all of my work is in Subversion, even the small demos I’ve created are in a repository. It’s a good feeling to know that if your laptop dies (or is stolen), all your work is backed up on a remote server.

Recently I’ve heard many developers raving about Git, and I’ve looked at libraries and code snippets that are using it, so I thought I’d check it out and see what all the fuss is about. After a couple of hours reading up and watching a few tutorials I’m genuinely excited about using it in future projects. It really is that good! So, what’s so good about it then you may ask? Well here are a few points that stood out for me:

Easy to install and start using (Windows has a simple installer)
Distributed version control, so no need for a central server
Runs on your local machine, no need to connected to the internet to commit(!)
Very clean, it only creates one git directory for the whole repository (no hidden .svn’s everywhere)
Incredibly easy to branch and merge your code (this is a big plus!)
It’s simple to use Git with SVN, no need to abandon your SVN repositories. Git can pull & push directly into an existing SVN repository!

I’d heard developers saying how easy it was to branch and merge your code using Git, I assumed they were exaggerating. But no, it really is simple:

1
2
3
4
5
6
7
8

#create a new branch in my repository
git branch my_new_branch

#move to the new branch for commits etc
git checkout my_new_branch

#finished with the branch, so lets merge it back into master
git merge my_new_branch

One of the most amazing parts of Git that blew me away: when you jump between branches it automatically updates your file structure accordingly! So lets say you have a new set of files in a new branch, and you need to jump back to master (trunk) to make some changes. Simply run ‘git checkout master’, the new branch files will be ‘removed’ and stored away until you are back on the new branch where they were added. Amazing!

The feature that really sold Git to me was the stash command. So many times I’ve been working on a project and got half way through some changes, only to have to fix a bug in the original version. So you copy the modified files somewhere, undo all your changes, fix the bug, copy the files over and start where you left off. Not fun! Git and the stash command come to the rescue:

1
2
3
4
5
6

#store your current changes in a 'clipboard' so they can be seen again later
git stash

#you are now working on the unmodified version of the branch
#after you've fixed the issue, start from where you left off by applying the stash
git stash apply

Another huge advantage Git has is how simple it is to share code between developers. It only takes a couple of commands to clone another repository. Once you have a local copy (clone), you can change whatever you like. Make the project better (or break it horribly, it’s up to you). For an example of how powerful social coding is take a look at Github. The 3D JavaScript library three.js for example has over 4000 people watching and 400+ people have forked (cloned) the repository. If your version adds a cool new feature or fixes a bug, it can easily be merged back into the original project!

If you are interested in learning how to use Git there are some superb resources available. For people who like screencasts I highly recommend watching the one created by Peepcode. It’s only $9 (US), 1 hour-long and will get you up and running with Git in no time at all! Here are some other resources I found useful:

Right, I’m off to start committing to a repository while travelling on a train to work when I don’t have an internet connection (warm fuzzy feeling enabled)!

dat.gui – controller library for JavaScript

Matt — Wed, 16 Nov 2011 02:14:45 +0000

Very recently I’ve been looking at some awesome JavaScript experiments and have noticed they are all using the same GUI. Now I fully admit I had a little ‘blonde’ moment as I assumed it was just a style everyone had adopted; developers being ‘one of the cool kids’, that type of thing. It turns out I was wrong, and it finally clicked. All the experiments have started using a little controller library called dat.gui.

After it appeared on Google’s workshop (along with three.js), I thought it was about time I had a play with this neat little library. Luckily there’s an excellent set of documentation and working examples available so you can dive right in. Here’s a code example of how to get started:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//Define the controller function
var FresnelControls = function() {
this.movingParticles = 5000;
this.seedColor = "#ff0098";
};

//Create the Dat.gui controls
var fc = new FresnelControls();

//Create the GUI
var gui = new dat.GUI();

//Add 2 folders
var f1 = gui.addFolder('Particle Dynamics');
var f2 = gui.addFolder('Particle Colours');

//Add the moving particles controller to folder 1
f1.add(fc, 'movingParticles', 0, 5000).step(1);

//Add the colour controller, store in a var to attach events
var seedColor = f2.addColor(fc, 'seedColor');

//Colour change event
seedColor.onChange(function(value) {
//Do something on color change...
});

I decided to dig out an old demo I created last year and adapt it to use dat.gui. Originally I used jQuery + jQuery UI to control the JavaScript variables. It worked well, but it really added page weight (jQuery + UI came to over 90Kb); not great when you are only using it for the sliders.

Following the documentation you start off simple and progressively add more of the dat.gui functionality. You can see my adapted demo here. The dat.gui code is highlighted if you want to see how it was set up.

You can see dat.gui in action on my modified Euler Spiral demo.

Dat.gui really has some excellent features available. I was able to make use of the colour picker, presets and folder functionality; but there’s a whole host of others I didn’t, such as the custom placement and updating the display automatically. Personally I love the presets functionality; supply the GUI with a little bit of JSON and away you go!

As always, a big thank you goes out to the Data Arts Team in Google’s Creative Lab for creating such a useful little library! One I will be using in every demo I create from now on.

Back to my desk (down under)

Matt — Sun, 13 Nov 2011 05:50:05 +0000

Well that was a quick three months! Travelling around south-east Asia was incredible! So many memories and stories to take away from the experience. Unfortunately all good things have to come to an end, so back to work it is. Actually I’ve been looking forward to getting back to work for a couple of weeks, itching to start using the latest technologies the web has to offer.

A lot can change on the web in three months; so in order to get my head around what’s new, I’ve compiled a list of exciting developments and changes in the Web Developer community (in no particular order).

Browsers

Thankfully the browser war has started again (this time for the better) and it certainly hasn’t slowed down in the last three months!

Some amazing news first; Has Internet Explorers browser market share finally dropped below 50%? Well according to Statcounter it has (oh please let it be true!). As with all statistics you have to be careful how you interpret the data. A more important statistic would be how that 50% is broken down. How many users are still using IE6? If corporations are still sticking with IE6 due to internal tools and upgrade cost, that value won’t be changing any time soon (boo!).

WebGL is the big thing on the web at the moment. Incredible graphics rendered directly in the browser (no Flash required!). Of course Microsoft being Microsoft, they aren’t going to support it. To be fair they do give a good excuse; the specification isn’t 100% set, so they aren’t going to implement it (but when has that ever stopped them before?). Luckily for developers a small team in Russia have decided to add it themselves by creating a plug-in for IE (for non-commercial use) called IEWebGL. It’s not ideal but it’s better than nothing!

There’s been big changes at Firefox over the past three months. The Firefox team have now adopted a six week release schedule just like Chrome. So while I’ve been away we’ve had version 6,7 and 8. There’s even talk of Aurora 10 (a.k.a. Firefox 10) on the horizon. Mozilla also seem to have adopted the ‘channel’ route for deployment, where by you can join the stable, beta or nightly channel depending on how brave you are. You can receive a new version of Firefox every few days (or sometimes a broken version) if you so wish. I’m hoping they also adopt the ‘delta’ update strategy that Chrome uses; no need to download the whole installer every time, only the parts that have changed. On a side note, Firefox now gets 100% on the Acid3 test, so well done to Mozilla for achieving that (if that type of browser comparison floats your boat).

I love this little addition; in the latest nightly versions of Firefox, Mozilla has added support for the draft JoystickAPI. What an incredibly simple idea, it never even occurred to me! The API allows a browser to communicate directly with a joystick / gamepad, meaning you can control that snazzy HTML5 game you’ve written just like you would on a games console. There’s a breakdown of what is supported on the API page including handy code examples. All you need is a joystick that’s supported by your PC or Mac. It looks like a standard Xbox360 controller will work, and they’re fairly cheap to buy. I May just have to add that to my Christmas list this year and give it a whirl!

With the IE browser market share (apparently) going below 50%, it looks like Chrome could be set to take number 2 spot from Firefox very soon. I must admit, I’m not too bothered about who’s in second place; as long as all browser vendors keep improving their products I’m a very happy developer. More competition equals better browsers for all. When one of the ‘good’ browsers gets to number one, then I will celebrate.

At the start of October Google unveiled their new Dart programming language which is supposed to replace JavaScript as the working language on open web platforms. Dart will compile to ECMAScript 3 on the fly for non-Dart compatible browsers. There’s even a simple IDE so you can start playing around with a bit of Dart right now. Will it catch on? Who knows, only time will tell.

Last but not least the browser that everyone forgets about (but it’s actually an excellent browser), Opera. At the start of October they released Opera 12 alpha, which finally supports WebGL! Great news for Opera and WebGL. As it looks like WebGL is here to stay, maybe it’s time the IE team reconsidered its position? Let’s hope they do.

Will Chrome overtake Firefox for browser market share in November?

JavaScript

The big event (in Europe at least) that happened while I was away was JSConf.eu, a 2 day conference dedicated to the JavaScript programming language. This year it was held in Berlin, Germany, somewhere I’ve never been (but have heard many great things about). I wish I could have been there, a couple of the talks I’d loved to have seen include “Magic Wand for surface generation – Voxels with JS” and “Connecting the real world to node“. Luckily for those of us who couldn’t be there videos of most of the talks are available online.

Talking of Node, the development team has been bug fixing and adding lots of lovely new features to the code base, and it is now up to version 0.6.0. A point that really caught my attention was the work regarding Windows support. Being a Windows user myself it’s always nice to know the Windows platform is being considered in future development. Looking at the performance statistics in the 0.6.0 blog post, the team have made huge improvements by supporting native APIs (rather than through Cygwin).

Note: As I was writing this blog post Node 0.6.1 was released and it now comes with a Windows installer (MSI).

Lots of lovely JavaScript geeking out at this years JSConf.eu.

jQuery

For users of jQuery (myself included) it’s been a very busy three months. There have been three new versions released (not including betas and RC’s), 1.6.3, 1.6.4 and 1.7. Here are some of the key features that caught my eye in each version:

1.6.3: requestAnimationFrame API has been removed for animations due to strange goings on when animated tabs are hidden from view. The team plans to re-implement it in a later version.
1.6.4: Minor bug fix release.
1.7: Big changes in the way events are bound (and unbound) to elements. There’s a whole new .on(), .off() event API which aims to unify all the ways of attaching events in jQuery. Also, as mentioned on the jQuery blog they are shorter to type!

For version 1.8 the jQuery team is planning on slimming down the library to reduce it’s overall gzipped file size. They are asking for feedback from the community as to what should be removed and offloaded into a separate plug-in, or maybe even removed all together. There are now so many methods available to a developer, a lot of which are probably never used; I can see why they are looking to slim it down. Maintaining rarely used code is never fun.

I personally would like to see the animations offloaded to a separate plug-in, as for most projects I never use them. I’d happily add the animation plug-in back in if and when needed. Maybe this could be the start of a more modular version of jQuery; by that I mean something along the lines of the MooTools core builder. Creating a custom jQuery build, with only the parts you need really would be a great option. I’m sure lots of other jQuery developers would be against it, but each to their own.

Last in the jQuery news is the announcement that there will be a jQuery conference in Oxford, UK in 2012. It’s the first jQuery conference in the UK, and of course I’m now in Australia. Typical! Oh well, maybe next time.

The first jQuery conference in the UK while I'm in Australia. Damn!

Three.js

The three.js community has been busy beavering away with lots of cool new demos. It’s incredible how this superb JavaScript library has taken off since mr.doob unleashed it on the web.

I’ve noticed from the Git repository for three.js that the number of updates has really slowed down. Maybe there are things in the pipe line that have yet to be rolled into the Git repository; or maybe it’s a sign of the three.js API stabilising.

One of the major problems I found while working on a few personal projects was the lack of documentation. It really was a case of diving into the library and examples and having a play (fun, but not ideal). Stability will allow the documentation to catch up with the current release, and in turn allow the wider community to develop lots more interesting 3D demos.

Speaking of interesting demos, here’s one that’s been released by HelloEnjoy called Lights – An interactive music experience. I can’t say I’ve heard of Ellie Goulding (I know, I’m old), but it’s a catchy tune and kudos to her record company for pushing the music video envelope. Is interactivity the future of music videos? I hope so!

Music video using the power of three.js.

Demos

One thing I really missed while I was away was how all this new technology is being applied on the web. It’s always interesting to see how other developers apply technology to problems they encounter. Creating demos is a fun way to learn something new.

First on the list is a bit of face detection using HTML5 and JavaScript. This technique is used in various webcam applications, where you can add things like glasses and masks to your face in real-time. Hours of fun for kids (and developers too). The demo makes use of the CCV JavaScript Face Detection library and HTML5 canvas element. Awesome stuff by @wesbos, and as a bonus there’s a whole blog post with commented code on how he did it.

What do you get when you combine Google maps and WebGL? That’s right, you get MapsGL! Google has enabled the option to view its maps complete with 3D buildings, in the browser, no plug-ins required! Superb news for WebGL as there is no bigger name you want behind you to push the technology into the mainstream. It’s still a little rough around the edges but it looks very promising! You can enable and view a demo here.

Mozilla developer Michael Bebenita has created and released a JavaScript-based H.264 decoder that will run natively in the browser… wow! Nicknamed Broadway, it is based on the open-source decoder that Google uses in the Android OS. Yet another example of how powerful the JavaScript programming language is. To test it you will need a nightly version of Firefox, or you can always view a video from Brendan Eich’s talk at ACM’s annual OOPSLA conference, where he shows it in action. Amazing!

Do you want to help a computer beat a Grandmaster at chess using JavaScript? Well now you can thanks to the Chess@home project. Developers at Joshfire created a project prototype at this years 48 hour Node Knockout contest. It utilises lots of cutting edge technologies. Starting with the Web Workers API in the browser, to Socket.io for communication and a Node.js – MongoDB combination for storing the results. It works by using the spare CPU cycles of browsing users to calculate the best next move. By adding a small Chess@home widget to your website you can help the project defeat a Grandmaster. By making use of the Web Worker API, visitors to your website won’t even notice the difference (users can disable the widget via a check box if they so wish).

Google maps goes 3D with MapsGL - Virtual Westminster Abbey

As you can see the Web Development community has been busy over the past few months! Hopefully I picked out most of the important changes. If you think there’s anything I’ve missed that’s a worthy addition, please leave a comment, I’d love to hear about it.

There ain’t no party like a DemoJS party

Matt — Wed, 06 Jul 2011 10:15:00 +0000

Another day, another website that makes my jaw drop to my desk. This time it’s the results from the latest Mozilla Labs DemoJS party. Hosted in Paris, France over the weekend, it had many coders and artists attending hoping to win big prizes by creating interesting demo’s using the latest web technologies. I may not understand French but I’d have still attended just to see all the demos on show; some extremely inspiring coding going on.

The competition was split into two sections; 1k and freestyle. I find both interesting but as I’ve mentioned before in previous blog posts I’m always amazed at what can be done with 1k of code.

The video above is of a demo created by Silexars that came in second place. A live demo can be viewed here. All created with less than 1k of code! WebGL really is starting to come of age. As with any of these demo’s it’s so easy to copy / paste, modify and learn from them. View source is a wonderful tool.

Another demo that caught my eye was by p01 (who I’ve blogged about before). This time he created Quaternion Julia Fractal in only 550 bytes of JavaScript and GLSL! It came in third place.

All this possible in less that 1k of code.

From the freestyle section the Particles.js by basecode has completely killed my productivity today!

Nice work guys and gals! If you have a spare few minutes (hours) check out the rest of the DemoJS results, you won’t be disappointed.

A little bit of MicroJS

Matt — Sun, 29 May 2011 18:12:10 +0000

Recently there was a flurry of talk around a little something called MicroJS, mainly thanks to a website of the same name created by Thomas Fuchs, author of the script.aculo.us user interface library. I’m not sure if Thomas coined the term “MicroJS” or if it’s been in use for a while, but it describes the micro-framework methodology perfectly. So what is a micro-framework? The best way to answer that is to first ask what is a JavaScript framework?

JavaScript frameworks have been around since around 2005 (looking at the Prototype and jQuery history); their purpose is to allow developers to easily add interactivity to a page by creating a JavaScript abstraction layer to build from. The library takes care of any cross browser issues and quirks, allowing developers to focus on the “cool” stuff, building websites. As a developer I can’t thank all the library authors enough; without them my working life would be so much more stressful (and my hair would be even grayer than it is now!).

Once you know what a JavaScript framework is, it doesn’t take a genius to guess what a micro-framework is. Where as a full framework will have many tools (methods) a developer can use, a micro-framework only focuses on a very specific set of functions. I like the knife analogy: a full-framework like Dojo would be a Swiss Army knife where as a micro-framework could be considered a small pen knife. So which do you use in a project? This completely depends on the project in hand. I’ve put together a small list of pros and cons for each (let me know if you have any others):

Full Framework

Pros
Extensive set of features to cater for most eventualities.
Consistent API across features.
Large user base with lots of community support.
Huge number of working examples available.
Many developers to fix bugs and add additional functionality.
Single point of reference of documentation.

Cons
Large code base could be very daunting to new users.
Large page footprint.
Many features of the library may not be needed.

Micro-Framework

Pros
Small page weight, usually less than 5K.
Small set of features so very quick to pick up and use.
Main focus on a very specific set of functionality.
No feature creep or excess code.
Use the right tool for the right job.

Cons
Small number of developers, bugs and issues may take a while to be fixed.
Development of the framework may stop completely.
May be very little support from the author and the community.
Fellow developers in your team may not be familiar with the framework.
Mixing micro-frameworks could conflict if badly coded.
Multiple frameworks could mean multiple HTTP requests.
Multiple points of reference for API docs.
Multiple frameworks could lead to an overlap in functionality.

Many of the cons for micro-frameworks stem from using more than one at a time, but if you only plan on using one then they can be ignored.

Micro-frameworks caught my eye recently due to a couple of small projects I’d been working on. The projects all used vanilla JavaScript as there was no need for a helper library. I later realised I needed to attach a few events and manipulate the DOM but I wanted to avoid including jQuery in the project as I only needed a small fraction of its functionality. Luckily the MicroJS website came to the rescue.

The examples below are taken from Query, Bonzo, Events.js and Bean. As you can see the usage for each is pretty self-explanatory with lots more functionality is available from each library’s website. If you’re a jQuery user the syntax will look very familiar.

CSS selector and DOM utility

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
Query - Dustin Diaz
https://github.com/ded/qwery
CSS selector engine
*/
query("#myid");
query(".myclass");
query("#myid .myclass div a");
query("a, div, strong");

/*
Query Paired with Bonzo - Dustin Diaz
https://github.com/ded/bonzo
DOM utility
*/
query("#myid").show();
query(".myclass").offset(50, 100);
query("#myid .myclass div a").addClass("anchorClass");
query("a, div, strong").remove();

Events

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/*
Events.js - James Brumond
https://github.com/kbjr/Events.js
Event handler library
*/
Events.bind(window, 'load', function(e) {
//Page loaded, do something
});
//Invoke the page load event
Events.invoke(window, 'load');
//Mouse click event
Events.bind(selectedElements, 'click', function(e) {
//Mouse has been clicked
});
//Very handy keystroke event
Events.bind(document, 'keystroke.Ctrl+Shift+Alt+S', function(e) {
saveMySlices();
});

/*
Bean - Dustin Diaz
https://github.com/fat/bean
Event handler library
*/
bean.add(selectedElements, 'click', function (e) {
//Mouse has been clicked
});
//DOM has loaded
bean.add(document, 'DOMContentLoaded', function(e){
//Page loaded, do something
});
//Invoke an event on an element
bean.fire(selectedElement, 'click');
//Remove the event from an element
bean.remove(selectedElement, 'click');

I’ll be trying out a few more of these micro-frameworks for my personal projects in the future as the ability to select only the functionality you need really appeals to me. Are there any other micro-frameworks you’ve used that you’d recommend? Leave me a comment and I’ll check them out.

Update: It just so happens that a handy library website has emerged inspired by the MicroJS website called EveryJS. The website lists all library’s rather than just micro versions. Not all are listed but I’m sure they will be added soon so it’s one to keep your eye on.

Chrome Developer Tools at Google IO 2011

Matt — Wed, 18 May 2011 10:31:05 +0000

I’ve been a long time user of Firefox’s magnificent Firebug extension; I honestly cannot remember how I used to develop websites without it (can you?). Changing web pages on the fly and debugging issues in seconds rather than minutes, we really are spoiled. I thought it would be hard for any other debugging tool to come close to Firebug in terms of ease of use and available tool set. Oh how I was wrong!

Paul Irish and Pavel Feldman hosted a talk at this years Google I/O about Chrome Dev Tools and what’s new in the world of debugging in Chrome. I must admit, there were a number of jaw dropping moments in the video where it dawned on me how powerful the tools actually are. Here are a few of my favourite points:

7:11: Chrome monitoring the changes to the style sheets and letting you know what has changed.
7:55: Ability to revert back to different CSS versions. The Dev Tools automatically creates a new version as you change code.
21:02: A whole host of JavaScript debugging tools. Edit the script in the browser (with code colouring.. nice) rather than edit in IDE, upload, test, repeat…
30:31: My favourite part, the remote debugging feature. Chrome can act as a server meaning you can connect too and edit pages remotely. At first you may think “well, what’s the point?”. As this is being done at the WebKit level it will soon be available for all WebKit browsers including mobile devices. Debug mobiles browser directly from your desktop. Wow!

I’m definitely going to have to wean myself off Firebug and give the Chrome Dev Tools a blast. As mentioned in the video, the tools are being developed all the time with new features landing daily (on dev channel). Looks like Firebug has some serious competition! If you’re a developer with 43 minutes to spare, watch the video, you won’t regret it.

A few helpful links mentioned in the video:

The Sieve of Eratosthenes

Matt — Thu, 12 May 2011 15:19:05 +0000

I recently read Prime Obsession by John Derbyshire; a book all about prime numbers and one of the worlds greatest Mathematicians: Bernhard Riemann. The books main focus is on the Riemann Hypothesis which states that:

The real part of any non-trivial zero of the Riemann zeta function is 1/2.

I’d love to say that after reading the book I understand the Maths behind it but alas I do not. That’s not surprising though as it’s a problem that has yet to be solved, 159 years after Riemann paper on “On the Number of Primes Less Than a Given Magnitude”. It doesn’t look like it’s going to be solved any time soon either! If you’re interested it’s one of the Clay Mathematics Institutes Millennium Prize Problems in which you can earn yourself US$1,000,000.

While reading Prime Obsession it mentioned an interesting method for finding prime numbers called “Sieve of Eratosthenes” (pronounced air-a-TAWS-the-nEEss). Eratosthenes was a librarian at the great library of Alexandria around 230 B.C.E. It’s quite obvious how the method works once you know it, and easy to see why it’s called a sieve. The method goes like this:

Write a list of numbers in which you wish to identify the primes, say 2 – 100 (exclude 1 as it isn’t required)
Take the first number 2. Leaving 2 intact, remove every second number.
Move onto the next number 3. Leave 3 intact and remove every third number
Take the next number 5. Leave 5 intact and take away every fifth number
Repeat until you get to the end of your list

The end result is the set of prime numbers up to your given number. Essentially all you are doing is removing any number that is divisible by the 1st, 2nd… Nth number. Clever stuff!

As a little side project I decided to implement this method using JavaScript, displaying the result in the browser. You can view the demo here. For fun I created two implementations, one relying heavily on the DOM, the other only using arrays. As you’d expect the DOM method is slow; looping through large tables multiple times doesn’t make for a quick execution time. The second method using a single JavaScript array is much quicker. I’ve added a stats panel to the right hand side of the page so it’s possible to compare results from both methods over different input values.

I’ve added a limit to the number you can enter into the input box (5000), I don’t want anyone blaming me for crashing their browser by entering 10 million! :) Feel free to copy the demo if you want to see what happens at higher values.

The sieve in action showing prime numbers up to 500.

Thanks goes to John Resig for his very handy Array Remove method.It made removing non-primes from the numbers array very simple indeed.

Prime Obsession is a superb book but a word of warning, it contains a lot of higher level Mathematics, so may not be to everyone’s taste. It certainly made my brain hurt at times; not always what you need on that 8am commute to work! View the demo.