Javascript Posts

12 posts tagged with javascript

Fuzzy Matching video on Webucator

Nat Dunn of Webucator has created the following video based on my post about Sublime Text Fuzzy Matching with Javascript:

There's a lot more interesting content on his Webucator channel. I recommend checking it out!

Sublime Text like fuzzy matching in Javascript

I recently implemented a Sublime Text like fuzzy matching for my encrypted notes app. Fuzzy matching is a really nice feature that I haven't seen used outside of code editors.

If you haven't used Sublime Text, the fuzzy matching is used to quickly open files. Rather than navigate directories in the UI – which can laborious – the open file dialogue uses the characters you type to filter a list of paths. Each character you type must match a character in the file path exactly once and and in the same order as they appear in the path. For instance the search “abgvi” would match “/application/blog/views”, as would “blgview”. The basic idea should work with any text, not just paths. continue reading…

New Encrypted Notes Web Application

The last two weekends I scratched a web development itch. I've been using KeepNote to store notes for years now. It's a nice simple desktop app, which I use to store details such as past addresses, account numbers, phone numbers etc. And more sensitive information like PIN numbers and passwords.

I configured KeepNote to store notes in Dropbox so that I don't risk losing anything. This has worked quite well, but I've always been frustrated that (a) I can't access my notes on my mobiles devices, and (b) I'm relying on a third party to keep my secrets. continue reading…

Ken Burns effect with Javascript and Canvas

I recently decided to look into working with the Canvas element to prototype a game idea I had. Since the easiest way to learn a technology is to use it, I set myself the goal of implementing the Ken Burns Effect.

There are a few JS slideshow scripts that do the Ken Burns effect, but I haven't seen any implemented in Canvas.

Without further ado, here is my implementation of the effect:

Your browser doesn't support canvas! Try Chrome, Firefox or Opera

If you see the effect, above, you are probably viewing this in one of the good browsers. I think it can be made to run on IE with excanvas, although I have yet to test that. continue reading…

Spatial Bookmarking Service goes Open Source

Locidesktop was my coffee shop coding project of last year. I was quite pleased with the results. has been happily serving link desktops to some loyal visitors for months now – with no maintenance required on my part (a good thing because I've been busy with other projects). continue reading…

Javascript Snippets

Since I've been hacking away with Javascript lately, I thought I'd share a few snippets that I have found invaluable.

Some of these snippets use JQuery, but could easily be modified to use plain JS or another toolkit.

Some of these snippets are likely available in other libraries and plugins, but I prefer not to introduce too many dependencies when working with Javascript. Better to keep the code lean – if possible!

Building strings with Javascript can be a pain if it consists of a number of parts, and it isn't too flexible if you want to modify later. Here's a snippet that adds simple template substitution to strings.

It adds a method, f, which takes an object and replaces parts of the string between double braces with values from that object, similar to Django templates. Here's an example: continue reading…

When did I become the Javascript guy?

I have been busy working on lately. One popular feature request from the beta testing was to use website favicons, so that links become more readily identifiable – which I have implemented after several late nights, and abusing my quad core.

A few of the 3D Favicons used in

I built a pipeline that downloads favicons, extracts PNGs which are then processed in to a 3D scene and rendered for missing resolutions (.ICO files can contain multiple resolutions). I've tweaked the way that the 3D icons are produced, and they are significantly better than my first attempt – although some do come out better than others. continue reading…

Evolution of an Auto-Complete

My latests hobby-project has been pushed live, in invite-only beta form. Previously known as Links Desktop, I have now dubbed it Loci Desktop, after the Loci Method.

Auto-complete in Loci Desktop

One feature of Loci Desktop is that it will auto-complete URLs when you add new icons to your ‘desktop’. Auto-complete is one of those features that users expect these days. They want the app to figure out what they want with as few key-presses as possible – and quite rightly so, typing is such a chore!

The auto-complete system for Loci Desktop, in its initial state, was straight-forward to implement. The javascript and front-end was the most time-consuming part of the job, but the back-end Python code was trivial. continue reading…

Links Desktop Teaser Screencast

In past blogs I've hinted on the fact that I'm working on a Javascript application in my spare time. It's not quite done yet, and wont be live for a few more weeks, but I do have something that I can show off.

This project is best explained in the form of a screencast. This is the first screencast I have ever made and I'm not sure if I have done it right, or if my humble server will cope with serving FLV files. If the server doesn't manage to keep up, I'll probably Youtube it.

Update: If for any reason the above player doesn't work, you can view the screencast on Youtube. continue reading…

A 3D Texture-Mapped Globe Rendered with Javascript and HTML

I've been working on a large-ish Javascript project lately (still in stealth mode). One that could be described as a Javascript application. And since I've been up to my elbows in Javascript, I have found my contempt for the language waning. Not entirely, of course – I'm still a Python fan-boy. But enough for me to knock out a 3D(ish) spinning texture-mapped globe, using nothing but Javascript and HTML, as a way of honing my JS skills.

Without further ado, I present you with a 3D Javascript Globe.

This effect is off course a hack in the sense that it produces a novel result, but it still only makes use of standard browser capabilities.

One of the few geometry formulas that I have committed to memory is the relationship of the points on a circle and the radius: x^2 + y^2 = r^2 continue reading…