Coding

HTML5: Up and Running is the book version of Mark Pilgrim’s comprehensive introduction to HTML5 at DiveIntoHTML5.org. Whether you buy the book or read it online, it’s the best introduction to the topic you’ll find.

Mark begins with the history of HTML5 (using email archaeology, as he calls it). You’d never guess that many of the problems we have with XHTML, MIME types, etc. have roots in discussions over 20 years ago. From then on, he moves into feature detection (which uses the Modernizr library), new tags, canvas, video, geo-location, storage, offline web apps, new form features and microdata. Each chapter can be read independently – so if you’re planning to use this as a reference, you may be better of reading the links kept up-to-date at DiveIntoHTML5.org. If you’re interesting in learning about the features, it’s a very readable book, terse, simple, and above all, delightfully intelligent.

Incidentally, if you’re starting off on a new HTML5 project, you’re probably best off using HTML5BoilerPlate.com. It’s very actively maintained, and contains some really nifty tricks you can learn like the protocol-relative URL.

Disclosure: I’m writing this post as part of O’Reilly’s blogger review program. While I’m not getting paid to review books, I sure am getting to read them for free.

A fair number of the CSS frameworks I’ve seen – Blueprint, Tripoli, YUI, SenCSS – are monolithic. What I’d like is to be able to mix and match specific components of these.

For example, 960.gs has a simple grid system that I’d love to combine with the vertical rhythm that SenCSS offers. (Vertical rhythm ensures that sentences align vertically.) I’d love to have a CSS framework that just sets the fonts, for example, and touches nothing else. Or something that defines the colour schemes, and lets you change the theme like Microsoft Office does.

LessCSS

Less CSS has been invaluable in helping with this. It extends the CSS language without deviating significantly from it. Compared to SASS and CleverCSS, I’d say it has a better chance of getting incorporated as into, say, CSS4.

LessCSS offers variables. I can define a variable:

@foreground: #112233

and use it like this:

h1 { color: @foreground; }
a:hover { background-color: @foreground; }

When I change @foreground, it’s replaced everywhere.

LessCSS offers multiple inheritance.

.highlight { color: red; }
.button { border-radius: 10px; }
.action {
  .highlight;
  .button;
}

This assigns the properties of the highlight and the button classes to the action class. Any changes made to the parents automatically get inherited.

LessCSS has a Javascript pre-processor. So I can include it directly in the HTML, and add the pre-processor, which converts it into CSS.

<link rel="stylesheet/less" href="style.less">
<script src="less.js"></script>

I now use LessCSS as the basis of all new projects.

CSS libraries

My first attempt to consolidate modular CSS libraries is at bitbucket.org/sanand0/csslibs. As far as possible, I’ve tried to avoid creating new libraries, or even tweaking existing ones. Over time, I hope to completely eliminate any new code.

There are two types 2 types of libraries. Some just have variable definitions. Others actually define styles. For example, I’ve got three libraries that just define variables:

color_themes.less

Defines a standard set of color themes (based on the Office 2007 color themes)

font_stacks.less

Defines Web-safe font stacks (based on Sitepoint’s article)

backgrounds.less

Transparent background patterns (randomly useful images)

Including the above libraries will have no effect. You need to explicitly use them. For example:

@import "font_stacks.less";         // Does nothing
h1 { font-family: .font[@serif]; }  // Makes H1 a serif font

The following libraries define styles. Including them will define new classes or change the style of tags / classes.

reset.less

Resets default styles consistently across browsers. I chose YUI3 CSS Reset arbitrarily. I think HTML5boilerplate’s CSS reset may be a better choice, though.

grids.less

Defines classes for fixed and fluid grids. I choose YUI3 CSS Grids over 960.gs (which I’ve used for some years) because of its ability to offer fixed as well as fluid layouts, and the sheer brilliance of its minimality.

lineheight.less

Sets font sizes, ensuring that lines have a vertical rhythm. This is a stripped-down version of SenCSS, but over time, I’ll phase this out and use some standard framework someone comes up with.

Between these, I think the base infrastructure for most applications is in place. What’s required next are widgets. Specifically, I’d like:

• Buttons. A really good, cross-browser, non-image-based button that offers rounded corners, gradients and borders.
• Forms. Consistent form styling, without forcing me to use a specific form layout.
• Icons. A standard icon library with replaceable CSS sprite-sets.

I’ll try keep the code updated as I find these. Do pass me any suggestions you may have.

A cool thing about Google Spreadsheets is that you can scrape websites using external data functions like importHtml. It’s really easy to use. The formula:

=importHtml("http://www.imdb.com/chart/top", "table", 1)

imports the Internet Movie Database top 250 table on to Google Spreadsheets.

Since you can publish these as RSS feeds, it ought to, in theory, be a great way of generating RSS feeds out of arbitrary content.

There’s just one problem: it doesn’t auto update.

There are claims that it does every hour. Maybe it does when the sheet is open. I don’t know. But it definitely does not when the sheet is closed. I wrote a simple script that logs the time at which the script was accessed, and prints the log every time it is accessed.

#!/usr/bin/env python
 
import datetime, os.path
 
print 'Content-Type: text/plain; charset=utf-8'
print ''
 
logfile = 'timenow.log'
try:    timelog = open(logfile).readlines()
except: timelog = []
timelog.append(str(datetime.datetime.now()) + '\n')
open(logfile, 'w').writelines(timelog)
print ''.join(timelog)

Then I importHtml’ed it into Google spreadsheets, and left it on for the night. Result: absolutely no hits when the document is closed.

Pity. Guess YQL is still the best option.

A List Apart’s article on Inline Validation is one of the most informative I’ve read in a while — and it’s backed by solid data.

Some useful lessons:

1. Inline validation can reduce form completion time by 40%
2. Use inline validations where the user doesn’t know if they’ll get it wrong (e.g. is a username available?). Don’t use them if user knows the answer (e.g. their name)
3. Validate on blur, not on keypress (it’s distracting, and users can’t multitask)

After much hunting, I finally settled on Hedger Wang’s simple round CSS links as the most acceptable cross-browser round button implementation. The minified CSS is about 2.5KB, and the syntax is very simple. To make an input button into a round button, just wrap it within a <span class="button">:

<span class="button"><input type="submit"></span>

… and it’s just as easy to convert a link into a rounded button:

<a class="button" href=”/”><span>Home</span></a>

It works by using a transparent PNG / GIF that looks like this:

The first button is the default button. The second appears on hover. The bottom two are for disabled buttons.

Can we easily create buttons in different colours?

That’s what this post is about: creating that image with round buttons and gradients.

When I tried creating these rounded buttons myself (and trying to do it in an automated was as usual), I saw 3 possible approaches:

1. Create it using PowerPoint via Python and export as a PNG.
   So we make a curved box, put in the appropriate gradients and borders, and export it as a PNG. But the problem is I couldn’t figure out how to get transparent PNGs.
2. Create it in GIMP using script-fu plugin.
   The problem is, I don’t know scheme or GIMP’s API. So I gave up on this as well.
3. Create it using Python Image Library.
   This was inspired by Nadia’s PIL Tutorial: How to Create a Button Generator. Let me explain how this works.

The first step is to create a ‘button-mask.png’ like this one:

1. Create a transparent 300 x 120 image in GIMP
2. Selecting a box from (0,0) to (300,30)
3. Shrink it by 2 pixels
4. Convert it to a rounded rectangle with a radius of 80%
5. Fill this in white
6. Copy it to 60 pixels below

Now, we need code to create a gradient:

start, end = (192, 192, 224), (255, 255, 255)
grad = Image.new('RGBA', (300, 120))
draw = ImageDraw.Draw(grad)
for y in range(0, 30):
    draw.line(((0,y),(300,y)), fill=rgb(start, end, y/30.0))
    draw.line(((0,y+60),(300,y+60)), fill=rgb(start, end, 1.0-y/30.0))

Now that the gradient is created, convert that into a round button by loading button-mask.png’s alpha layer onto the gradient:

mask = Image.open('button-mask.png').convert('RGBA').split()[3]
border = Image.open('button-border.png').convert('RGBA')
grad.putalpha(mask)
grad.save('button.png')

There it is: a simple round button generator. You can see a sample of these buttons at my Dilbert search site.