Subversion for web development: Part 1

In this three part series of articles I will explain my approach to using Subversion, the open-source version control software, for web development.

For a long time I steered clear of version control, dismissing it as too complex, or something that was only useful for large development teams. I took Subversion for a test drive, but didn’t really “get it”, and decided version control wasn’t for me.

I changed my tune earlier this year when I was employed to work on a project that was already under version control. I had no choice but to get up to speed with Subversion, and once I got the hang of it I was excited to discover that version control streamlined my entire workflow. I now use Subversion for all of my web projects and consider it an integral part of my development process.

Font Squirrel’s @font-face kit generator

If you want to create your own @font-face kits, you absolutely must check out Font Squirrel’s new @font-face generator tool. All you have to do is upload a TrueType or OpenType format font, and the generator spits out a zip file containing:

The original typeface for Safari and Firefox 3.5
A WOFF font for Firefox 3.6+
An SVG font for Opera, Chrome, and iPhone
An EOT font for Internet Explorer
A sample HTML page
A sample CSS stylesheet

The generator also features options to reduce file size by subsetting the font, cleanup font outlines, and auto-hint glyphs to improve rendering.

Font Squirrel Generator

Sweet!

Typekit and the future of web fonts

Now that all major web browsers finally support the CSS @font-face declaration, embedding fonts in a web page is possible with just a few lines of CSS. In theory this means that web designers no longer need to limit their font choices to a handful of system fonts, and are free to use any typeface they please. In practice that freedom comes with a caveat: we are only allowed to use fonts with a license agreement that allows web embedding.

The trouble is that digital fonts have no provision for DRM, and pirating a copy of an embedded web font is a trivial exercise for anyone with the mind to do so. That’s obviously not a prospect type foundries are too keen on, and consequently no major foundry offers a licensing option for embedding their fonts in a web page. If you link to a commercial font from your CSS stylesheet the chances are that you are breaking your license agreement. Even the number of free fonts with an EULA that condones @font-face embedding is pitifully small.

That’s where Typekit comes into the picture. Typekit is a new font delivery service devised by Jeffrey Veen that promises to take the pain out of licensing fonts for web embedding. In their own words:

We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.

Scaffold: A CSS framework with a difference

I have always been slightly wary of CSS frameworks, put off by non-semantic class names, and a nagging feeling that CSS simply isn’t complex enough to require the hand-holding a framework offers.

But today I came across Scaffold, a CSS framework that made me rethink my position.

Scaffold logo

Reconsidering Arial

My friend John Gillespie recently wrote about the inauspicious origins of the Arial typeface, namely that it is a blatant copy of Helvetica. While I agree with the general thrust of John’s argument (I’m a self confessed Helvetica fanboy) I do think that Arial has one redeeming feature that deserves mention, especially in the context of web design: Arial renders better at small point sizes on Windows systems than Helvetica does.

The Email Standards Project’s message to Microsoft: Outlook’s broken – Let’s fix it.

Microsoft have announced that Outlook 2010 will use the crippled Word rendering engine to display HTML emails (as does Outlook 2007). In response The Email Standards Project have launched a campaign to send a clear message to Microsoft: Outlook’s broken – Lets fix it.

fixit

Aligning an element to the bottom of its container

Here is a little CSS trick that allows you to align content to the bottom of its container, in a similar fashion to how vertical-align="bottom" works in table-based layouts.

Let’s say we want to display an image with a title aligned to its top right corner, and a caption aligned to its bottom right corner:

Bottom Aligned Element

Flash video bufferTime gotcha

I have recently been working on a website that contains a lot of video content, including some fairly short videos – less than 20 seconds in length. To ensure uninterrupted playback of these short clips I thought it would be smart to buffer the entire video stream before beginning playback.

In AS3 this can be achieved using the bufferTime property, which I set to 20 seconds:

var nc:NetConnection = new NetConnection();
nc.connect(null);

var ns:NetStream = new NetStream(this.introVideoConnection);
ns.bufferTime = 20;

var video:Video = new Video(320, 240);
this.addChild(video);
video.attachNetStream(ns);

ns.play("myvideo.flv");

But when I tested the results on a remote server I discovered that Flash was waiting the entire 20 second duration before starting the video stream, despite the fact that the flv had fully downloaded in just a few seconds.

Erase an image using your mouse in AS3

I recently had to create a simple Flash application that allowed the user to ‘erase’ an image using their mouse. I couldn’t find any examples of the exact effect I wanted, so I cobbled together my own. The effect I came up with is similar to using the eraser tool in Photoshop.

Demo

Click and drag your mouse on the image below to erase it. Press the reset button to start over.

IE7, first-child and HTML comments

Perhaps it is common knowledge, but until today I was unaware that the CSS first-child pseudo-class fails in IE7 when the child element is immediately preceeded by an HTML comment.