Tag Archives: html

HTML5 Boilerplate Build Script: no manifest.appcache generated!

Posted on by

The HTML5 Boilerplate build script can auto generate your manifest.appcache file but it doesn’t out of the box.

Slightly hidden away in the docs:

To enable the appcache, just uncomment the file.manifest line in the project.properties file. It’ll create a manifest.appcache file and wire it all up.

You’ll find the project.properties file in build/project.

Now just do ant build and your HTML5 manifest file will be created and automatically referenced in your HTML file.

Quickly Creating an HTML Link in JavaScript

Posted on by

A cool and little known JavaScript function is .link() available to all string objects. Calling string.link(url) returns an HTML string for an anchor tag with the URL in it. For example:

var text = 'the best website ever';
var html = text.link('http://bencollier.net/'); 
html === "the best website ever" //true

A great way to quickly make links without having to do:

var text = "the best website ever";
var url = "http://bencollier.net/";
var html = "" + text +"" ;
html === "the best website ever" //true

Things That Give Me Usability Cramps – Web Forms

Posted on by

Usability Cramps

[yoo-zuh-bill-ity kramps]

  1. n. are unpleasant, often painful sensations caused by unbearable unusable user experience mistakes
  2. v. usability cramping, usability cramped, why the hell did they do this?

Form Labels That Don’t Select the Fields

This one mega-stresses me out; when the text label next to checkbox or a label doesn’t select it when you click it:

Bad Form Field:

To fix this, just give the input field an ID, and the label a for=’inputID’:

This is particularly annoying when there’s lots of checkboxes or really small radio buttons.

tip: add the following CSS to force the browser to show a pointer on clickable labels and buttons:

label, input[type="button"], input[type="submit"] {  cursor: pointer; }

Mobile Sites That Don’t Use the Right HTML(5) Input Types

If you use the correct types for your inputs then touchscreen devices adapt the keyboard to fit the need, and browsers can adjust the UI accordingly.
iOS Screenshot of email keyboard

Using input type='email' brings up an email specific keyboard on iOS

Browsers that don’t understand these new input types default to text, so you’ve got nothing to lose.

Forms That Need to Reload to Validate

It’s so easy to check your forms with a bit of JavaScript, instead of having to refresh the whole page; and generally require any password or captcha fields to be re-enter.

Oh, and if you have a username field, check it’s available before I click submit:

Twitter showing a username's available

Twitter Signup

I’m purposely not linking to any validation scripts; there’s not a universal drop in one I’d want to recommend, however, keep an eye on the native browser support for validation.

Katamari Hack

Posted on by


The winner of the 2011 Yahoo HackU contest at University of Washington, this is so cool.

Click here to activate the Katamari Damacy effect.

You can also install it as a bookmarklet by dragging: Katamari to your bookmarks bar.

It uses CSS3 transforms and html5 canvas to do this awesome effect.

Hats off to the developers, this works seamlessly. Checkout the javascript source code to see how they’re doing it or find out more on kathack.com

Designing For TV – Google TV

Posted on by

Google:

There are several noteworthy changes:

  • The sizes of all the fonts and buttons were increased
  • The “selected” item or item with the mouse over it is clearly highlighted
  • The user can navigate intuitively around the page using D-pad up/down/left/right motions
  • Additional padding has been added between all elements on the page
  • Darker or slightly muted colors have been chosen to suit TVs that are generally tuned to be brighter

More on Google’s Designing / tweaking your website for TV guide.

Youtube on Macbook on the Big Screen

Youtube on Macbook on the Big Screen