Posts Tagged ‘ JavaScript ’

Resistor color codes – now in DuckDuckGo search results

Remember a few weeks back I announced, a no-frills resistor color code calculator?

Welllll, if you happen to be a user of DuckDuckGo, it’s now even easier. See the resistor colors directly in your search results!



Try it out at DuckDuckGo.

And thanks to DuckDuckGo for making it so easy to extend your search engine.
Here’s the code.

I never have a resistor color chart handy when I need one. So I built a little web-app. Fast loading, simple, mobile friendly, and to the point.

Updated website for Smoothie Charts

Smoothie Charts has a new website. Rather than add to it, I ended up taking stuff out. It’s simple and to the point. It also works well on mobile / tablets.


A 3D WebGL GCode viewer, for understanding 3D printers

Towards the end of 2011, I built a 3D printer (RepRap Prusa Mendel). It took 6 weeks of evenings and weekends.

Here it is, printing an Octocat I found on Thingiverse:




To help understand the model better, I created a WebGL based tool that can view GCode (the set of movement instructions sent to the printer).


It’s built on MrDoob’s (excellent) three.js library, which brings 3D programming to mortals.

If you work with .gcode files, try it out:

Code is over on GitHub:

And here’s a full set of photos journaling the building of the printer, and some things I’ve printed with it:

A Simple Good Looking Context Menu, for jQuery

Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good.

This one is easy to use, small, and looks good.



  • Tiny library. Only dependency is jQuery.
  • Simple API.
  • Looks good out of the box, with no additional tweaking.
  • Designed to look and behave like a standard Windows context menu.
  • There’s so little code, it should be easy to add your own custom features.

The menu looks like this:


Include the files jquery.contextmenu.css and jquery.contextmenu.js in your page <head>. You also need jQuery. It is recommended that you use the HTML 5 DOCTYPE to ensure rendering consistency.

<!DOCTYPE html>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="jquery.contextmenu.js"></script>
    <link rel="stylesheet" href="jquery.contextmenu.css">
    ... rest of your stuff ...

You can get the files from here:


The plugin introduces a contextPopup() method to the jQuery object.

Assuming you have an element that you’d like to bind a context menu to:

<div id="mythingy">hello</div> 

You can wire up a context menu like this:

  title: 'My Popup Menu', 
  items: [ 
    { label:'Some Item',
      action:function() { alert('clicked 1') } }, 
    { label:'Another Thing', 
      action:function() { alert('clicked 2') } },
    // null can be used to add a separator to the menu items
    { label:'Blah Blah', 
      action:function() { alert('clicked 3') } }


The icons should be 16×16 pixels. I recommend the Fugue icon set (shadowless).

Go get it

It’s over on GitHub:

A slide-show in 2 lines of JavaScript

A while back, I needed to create a quick slide-show. I decided to hack it up in HTML – mostly to make it easier to track the diffs in version control and make it easy to distribute. There are many frameworks out there to build sexy HTML based slideshows, but I only had 10 mins to prepare and didn’t want to take the chance of hitting a road block – so I did it myself from scratch. Here’s how…

Step 1: Content (HTML)

Firstly, let’s get some content on the page. In my case, I just had a list of sentences – one per slide. But you could of course do whatever you like here – embed images, bullet lists, etc.

    <title>My slides</title>
    <section>This is the <em>first</em> slide</section>
    <section>This is the <em>second</em> slide</section>
    <section>This is the <em>third</em> slide</section>
    <section>This is the <em>penultimate</em> slide</section>
    <section>And this is the <em>final</em> slide</section>

I used the HTML 5 section element, as that is the most semantically relevant tag. And because I’m using HTML 5 tags, I added the HTML 5 DOCTYPE.

Here’s how it looks: Example 1

Step 2: Transitions (JavaScript)

Firstly, a bit of CSS to make each <section> cover the entire page, and hidden when the page loads (imagine a deck of cards, but you can’t see the first one yet).

  section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

Next, a bit of JavaScript at the bottom of the page to find the first section and fade it in when the page loads. I used jQuery because it makes it really easy to express this stuff.

  var currentSection = $('section').first().fadeIn();

This is assigned to a the variable “currentSection” as we want to keep track of which slide we’re on for the transitions.

Now the transition. What I want to say is… “whenever the body is clicked or a key is pressed, fade out the current section, find the next section (which will now be referred to as currentSection), and fade that in”.

With jQuery, that’s:

$('body').bind('click keypress', function() { currentSection = currentSection.fadeOut().next('section').fadeIn(); });

So now we have transitions (click or keypress).

Here’s how it looks: Example 2

Step 3: Prettify (CSS)

Now make it look how you want. Here’s the CSS I used:

  body    { color: #ffffff; background-color: #000000; font-family: arial; font-size: 40px; -webkit-user-select: none; }
  section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding-top: 200px; }
  em      { color: #ffff00; font-family: serif; font-size: 150%; }

That’s all.

See the final result: Example 3

An advantage of building it yourself is you’re in complete control, and can make it do, well, anything.

Oh, and here’s the original slideshow I hacked this up for: 10 reasons why I’m not a cool Java developer (a 5 minute lightning talk at the Google Open Source Jam)

Node.JS would really benefit from LibFFI

Having recently built a simple LDAP library that required a bit of C++, I think Node would really benefit from LibFFI bindings.

LibFFI allows C functions to be called dynamically at runtime from another language. There are LibFFI bindings for Python (ctypes), Ruby (Ruby-FFI) and Java (JNA), amongst others.

If FFI bindings existing for Node, you’d be able to call native C functions without ever leaving the comfort of JavaScript. Apart from making the code a lot simpler, it also avoids the need for a build step (nothing to compile), and hide the complexities of working with threads in C++.

Here’s how it would work…

Step 1: Write some JavaScript that bindings to a native library and exports C functions as JavaScript.

var ffi = require('ffi'); //
var ldap = ffi.createLibrary('ldap', { // load
  // exporting these functions
  // (C function name, [C arg types], C return type)
  open: ffi.exportAsync('ldap_open',
    [ffi.string, ffi.string], ffi.pointer),
  simpleBind: ffi.exportAsync('ldap_simple_bind_s',
    [ffi.pointer, ffi.string, ffi.password],,
  unbind: ffi.exportAsync('ldap_unbind',
    [ffi.pointer], ffi.integer)

Yes, this looks messy, but it’s a lot less painful than doing it in C++.

Step 2: Call your native libraries through the JavaScript bindings.'somehost', 389,
  function(err, ldap) {
    if (!err) {
      ldap.simpleBind(ldap, someUserName, somePassword, 
        function(err, result) {
          if (!err) {
            print('Authentication result = ' + result);

The native functions would still execute asynchronously in a background thread, so as not to tie up the main Node event loop. The usage pattern is the same as the rest of Node.

Writing the code still involves a basic knowledge of C, in that you need to read the documentation for native libraries and understand what it means. But you’d write all your code in JavaScript and avoid the hassle of the build system and platform specific linking.

There’s a lot of native libraries out there – this would open up a lot of doors.

Who’s going to take a crack at it?