Radiac's Blog: javascript

A Tiny Web Font Loader

Mon, 21 Sep 2015 09:51:12 +0000

Today I'm releasing TinyWFL, my tiny web font loader which is about 95% smaller than other popular loaders.

When web fonts started to gain adoption around 2010, the problem people had was FOUT - the flash of unstyled text while you waited for the browser to download the font. I think most people would agree that this has since been solved very comprehensively by webfontloader from Google and Typekit, and that it's now the de-facto standard loader - but back in 2010 or 2011 FOUT was still an issue, which is why I wrote my own.

To be accurate, my loader doesn't actually load anything - it's more of a anti-FOUT aid. The idea behind avoiding FOUT is simple enough: characters are very rarely exactly the same size in different fonts, so if we put a few of them together in an HTML element and then measure its width we should get different values depending on which font it's using. If we measure the width for a font we know they'll have (ie a default font like serif), we can then compare that to the width of the web font we want to use; if they match, the web font hasn't loaded, so we use setTimeout to wait a bit, then we check again. Once we know they're loaded we can either fire off JavaScript functions, or set a CSS class somewhere which can be used by CSS rules to only show the font once it has loaded.

This weekend I wanted to add a 2KB reduced character set font to a site, and thought about replacing my 5 year old code with webfontloader - but that's when I looked at the file sizes. The minified version of webfontloader that's currently on their git master is 11.5KB, and the version on Google's CDN is 16.6KB. Of course those sizes aren't huge, but a loader here and a polyfill there is how you end up with big slow pages. Besides, it seems silly to use a library that is 8x larger than the font it's trying to help show - at best it'll still be 50-100% of your average web font.

By comparison TinyWFL is just 852 bytes. The reason it manages such a big difference is that it leaves out a bunch of features you won't need in most circumstances - and if you do need them, we've already got webfontloader.

You can find TinyWFL on github

As a reward for reading this far, have a couple of useful web font-related links:

Font Squirrel web font generator - upload a font and they'll generate an excellent optimised web font for you to use with TinyWFL.
IcoMoon app - upload vector images (or pick from their selection) to generate an icon font. It probably doesn't make much sense to use TinyWFL for icon fonts, but it's still a great service.

Canvas bezier curves

Mon, 09 Dec 2013 11:42:11 +0000

The new Christmas design for this site uses bezier curves on canvas elements to generate random snowdrifts behind the header. Drawing a bezier curve is pretty simple, so seems like a reasonable place to start my new blog. First you need a canvas and a context:

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext("2d");
;
</script>

Think Turtles

A quick aside for those who haven't used the canvas before: a canvas element has a context property, which is what you draw on. Context methods to draw lines take destination coordinates, and draw them from the current position - think of pen up in Logo's turtle graphics, only with absolute positioning.

The canvas equivalent of pen up is context.moveTo(x, y), so to draw a line from (50, 50) to (150, 50), you would say:

context.beginPath();
context.moveTo(50, 50);
context.lineTo(150, 50);
c.strokeStyle = '#000';
c.stroke();

You'll notice I added some extra bits there - beginPath() says we're starting a new path, and stroke() draws it using the current style. Call beginPath() whenever you're about to change the style.

The canvas bezier curve takes 6 arguments; two sets of control points, and an end point:

context.bezierCurveTo(c1x, c1y, c2x, c2y, ex, ey);

Here's an example:

context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(50, 150, 250, 150, 350, 50);
context.strokeStyle = '#00d';
context.stroke();

I've added some grey lines and red markers to show what's going on. First we moveTo(50, 50), then call bezierCurveTo with the two control points (50, 150) and (250, 150), and the end point (350, 50). The result is a line from the current position to the end point, pulled out of place by the control points.

Once you've got that far, building a randomly-generated snowdrift is trivial - a bit of Math.random(), and instead of context.stroke() use context.fillStyle and context.fill().

To finish the effect, I'm drawing two background snowdrifts on one canvas element, and a foreground snowdrift on a second, with snowflakes falling in between - although I cheated there and used an animated gif which I had rendered earlier. Your CPU thanks me.

TCMI 2.0

Tue, 03 Dec 2013 13:19:05 +0000

I am very proud to announce my finest work to date - the Tacky Christmas Music Interface 2.0!

The old TCMI played midi files, but most browsers seem to struggle with those these days, and even when it did work, modern soundfonts made the experience quite variable. To get around this, the new version of TCMI now uses HTML5 audio to play MP3 or OGG files (depending on browser support).

This also means that if you've got the relevant PPL/PRS license, you can now play non-tacky music to your visitors! Although I'm not quite sure what the point of that would be.

The old version also ran in an iframe, which made front page SEO and deep-linking difficult for 1/12th of the year. This version therefore has the option to use AJAX loads and history.pushState, with the controls in a styleable <div> overlay.

There's also a new cleaner design, but those who want a tacky UI to go with the tacky music can opt to use the classic design.

You can find out more on the TCMI project page, where you can also download some of the old TCMI midis which I've converted into MP3s and OGGs. Improvements welcome on github.