I finally bit the bullet, sat down to do some writing again, and had a go at self publishing. The result is The Little Book of JavaScript, a short book containing a few odds and ends which I believe are useful for a novice or intermediate scripter.
Canvas Animation using interpolation
While drawing things on the canvas and scooting around them is nice, it gets old very fast. Instantaneously, if you’re an end user (unless you’re on a page for looking at things, in which case, no foul). On the other hand, there are far more efficient ways of rendering porn and/or amusing pictures of cats, so I’m going to go ahead and assume that we want to liven things up with some animation.
Reading Tiled maps for Canvas
In my previous post, I showed an example of a tile map in a viewport, but didn’t go into the details of explaining how the map was generated or loaded. In this post, we’re going to have a look at that.
The map file itself was created using an open source application called Tiled. It’s a neat application, and definitely beats writing out tile maps by hand. If you’re planning to do much work with tile maps, it’s worth checking out.
A 2d Viewport for Canvas
While I was tweaking the pathfinder from last time, the view started to look a bit cramped – the canvas had to show all the available information, regardless of scale or size. This got me thinking about viewports.
A Rough Path Finder in CoffeeScript
I’ve recently been playing with CoffeeScript, a neat little language that compiles to JavaScript. It’s a lot more concise than plain old javascript and can be organised much more tightly, so I’m really having a blast with it. That said, its conventions are a bit different to what I’m used to working with, so more bit of practice is in order.
One of the practice scripts I wrote is a very basic 2d pathfinder, hooked up to an html5 canvas element. The original idea was to get a good feel for the CoffeeScript syntax and then write a bit about it, but a screenshot of the finder on Facebook generated a bit of curiosity among some friends, so this post will be about the pathfinding algorithm instead; the CoffeeScript post will just have to wait a bit longer.
Templating in Javascript
In the last few weeks I was doing some work with client side templates. Since most of the webbies seemed to be unfamiliar with the concept and had a wee bit of bother wrapping their heads around it, here’s a short explanation of the whole idea. Continue reading “Templating in Javascript”
Visualizing data with Google Maps
A few weeks ago, a club I’m a member of was updating its membership information. Since the data was being collected in a Google spread sheet, I thought it would be interesting to create a map visualization to show where the members come from. In this post, we’ll write a map overlay which will generate a display like the one in the following image using data drawn from a Google spread sheet. Basically, we’re going to give a map a nasty rash.
You can also see the map here, or download the files here. Note that the size of each location has been fudged and bears no relation to the values originally collected in the membership survey.
Because we can
A few days ago, my next desk neighbour, Joe, put together a neat little Chrome extension which adds keyboard shortcuts for use in NeoGAF. It looked like fun, so I wanted to make one too, and, over the course of a smoking break, decided that it should tell me how many days are left until next St. Patrick’s day. Because hey, beer.
Version 0.1 of the plugin can be installed from its own page in the Chrome extensions repository. Enjoy!
The icons used in the plugin are from the Windows Beer Set from iconka.com.
Build even less (or incredibly more) useful stuff. Check out The Little Book of JavaScript!
Revisiting the JavaScript Calendar Control – Part 3
Be the JavaScript. Check out The Little Book of JavaScript!
It’s been some time since I started writing this three part series, and it certainly took a while longer to get done than I expected. A busy work schedule does tend to do that, but if it makes anyone feel better, having left the third part hanging did give my conscience a field trip. So let’s do a quick recap and get on with it 🙂
- In part 1, we created a jQuery plugin which displays a simple static calendar.
- In part 2, we added the facility to pick a date, and to switch the month on display.
- In part 3 (this post), we will add some sanity checks, and the ability to display events on given days.
Continue reading “Revisiting the JavaScript Calendar Control – Part 3”
Revisiting the JavaScript Calendar Control – Part 2
Show your scripts who’s the boss! Check out The Little Book of JavaScript!
Following last week’s implementation of the basic shape of the calendar, this week we will add behaviours so that we can pick a date on it.
This post is part of a series of three posts:
- In part 1 we created a jQuery plugin which displays a simple static calendar.
- In part 2 (this post), we will add the facility to pick a date, and to switch the month on display.
- In part 3, we will add some sanity checks, and the ability to display events on given days. Continue reading “Revisiting the JavaScript Calendar Control – Part 2”