Posts Tagged ‘ JavaScript ’
Remember a few weeks back I announced resisto.rs, 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.
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.
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:
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.
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>
<html>
<head>
<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:
$('#mythingy').contextPopup({
title: 'My Popup Menu',
items: [
{ label:'Some Item',
icon:'icons/shopping-basket.png',
action:function() { alert('clicked 1') } },
{ label:'Another Thing',
icon:'icons/receipt-text.png',
action:function() { alert('clicked 2') } },
// null can be used to add a separator to the menu items
null,
{ label:'Blah Blah',
icon:'icons/book-open-list.png',
action:function() { alert('clicked 3') } }
]});The icons should be 16×16 pixels. I recommend the Fugue icon set (shadowless).
It’s over on GitHub:
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…
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.
<!DOCTYPE HTML> <html> <head> <title>My slides</title> </head> <body> <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> </body> </html>
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
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).
<style>
section { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
</style>
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.
<script>
var currentSection = $('section').first().fadeIn();
</script>
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
Now make it look how you want. Here’s the CSS I used:
<style>
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%; }
</style>
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)
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 libldap.so
// 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], ffi.int),
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.
ldap.open('somehost', 389,
function(err, ldap) {
if (!err) {
ldap.simpleBind(ldap, someUserName, somePassword,
function(err, result) {
if (!err) {
print('Authentication result = ' + result);
ldap.unbind(ldap);
}
}
});
}
});
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?
There’s tons of great JavaScript charting libraries out there. Too many to choose from. I’ve just made it worse by adding yet another to the mix.
Before I go on, I want to balance karma a little – if you’re looking for a JavaScript charting library, just use Flot. I don’t know anything about your requirements, but I like my chances – everyone loves Flot (including me). It’s small, simple, great looking and flexible.
So why another library? Well, I had a very specific problem… I want to show real time streaming data pushed over a WebSocket. Although many of the charting libraries allow you to dynamically update data, none have really been optimized for a constant stream of data. I tried many (seriously, at least 40 libraries) and the constant updates just looked too jerky.
So Smoothie Charts was born. It’s not big, and it’s not clever. And it only works on Chrome and Safari. And it doesn’t support legends. Or pie-charts. In fact, it’s inferior in virtually every way to a library like Flot. But, it’s very good at displaying streaming data.
I use it for building web dashboards monitoring active system load (that look something like this).
Use it, hack on it, and contribute back.
Last week, Adam Connors and I presented “Does my button look big in this? Building testable AJAX applications.” at the Google London Test Automation Conference.
Unfortunately the code is unclear on the video, so you can also download the slides separately (13mb!).
Me, Elsewhere
Joe Walnes 