Collective #40

View All

HTML5 Goodness * JavaScript Sweetness * All Responsive: Email, Tables, Layout * CSS Icons * Creative 404 Page * HTML5 Game

Collective 40

Inspirational Website of the Week


Get Going Today from Drexel University is a great example for successfully and beautifully integrating video as the main medium in a website.

Get inspired

One div: The single element HTML/CSS icon database


One div shows us the power of CSS with a library of single element graphic. All icons displayed on the website are created without images, just pure CSS using only one division.

Read it

24 Pull Requests


24 Pull Requests is a yearly initiative to encourage developers around the world to send a pull request every day in December up to Christmas.

Read it

Responsive Column Layouts


Nick La shares a nice responsive column layout trick, also used in Themify's WordPress themes, which employs the nth-of-type pseudo-class.

Read it

5 APIs that will transform the Web in 2013


CSS Custom Filters, Autocomplete API, Google Chrome Apps, ECMAScript 6 and Web Components are the APIs that will change the web in the coming year. Read what they are and why they rock in this overview by Alex McCaw.

Read it

SocialCount, a jQuery Plugin for Lighter & Faster Social Networking Widgets


SocialCount is a wonderful contribution by the Filament Group: finally a social plugin that tackles the most concerning issues of including social network buttons and widgets into your site. SocialCount can be easily customized, it works with mouse, touchscreen, or keyboard, it lazy-loads, it's super-small and more.

Get it



Heyoffline.js by Oskar Krawczyk warns your users when their network goes down. It will help you make sure they don't lose anything.

Check it out

Creative 404 Page


Adem Ilter created a super-creative 404 page for his blog.

Check it out

Sidebar: The 5 best design links, every day


Sidebar by Sacha Greif gives you a daily dose of qualitative and fresh design links.

Check it out

The WebGL Podcast


Learn about the latest news and libraries, as well as tips and tricks to help you get the most out of your WebGL project listening to this awesome podcast hosted by Paul Lewis.

Listen to it

Walkabout.js: An automatic jQuery app tester

If you want to test your jQuery app, you'll definitely find this helpful: walkabout.js figures out what your application is paying attention to, and does it. It fills in fields with random values, finds events you listen for and fires those events. It also finds internal links and clicks them.

Try it

CSS Architecture


A wonderful, in-depth article by Philip Walton about good CSS architecture. A must-read that will teach you a lot.

Read it

jStat: A JavaScript statistical library


jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language like MATLAB or R.

Check it out

HTML5 Video Bumpers


Day 1 of this year's 24Ways articles starts out with Drew McLellan's tutorials about HTML5 video bumpers, short introduction clips that can help brand a video and make it look more professional.

Read it



With Scrubby by Jeremy Apthorp you can tweak values in JavaScript without having to recompile it.

Try it

Adapting your WebKit-optimized site for Internet Explorer 10

Learn how you can adapt a WebKit-optimized site to also support IE10 so that it works on Windows Phone 8.

Read it

Should You Use Inline-Blocks As A Substitute For Floats?


Steven Bradley explains why sometimes inline-blocks are a good alternative to float, especially if your goal is to lay out blocks in rows, like a grid of images or a horizontal list of links.

Read it

"Do you know this guy?" by Internet Explorer


However your relationship with Internet Explorer is, you might find this video funny ...or sad, or hilarious, or desperate, or super-cool, or... just watch for yourself.

Check it out


A nicely organized resource of HTML codes and names for ASCII characters. Super-useful.

Check it out

Style Manual: A reference document by Andy Taylor


Although Andy Taylor calls it "an absolutely incomplete, personal reference", you will definitely learn some interesting things about punctuation, style and HTML shortcuts from this great resource.

Read it

FooTable: jQuery Plugin for Responsive Tables


FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome, no matter how many columns of data you may have in them.

Check it out

Responsive Email Templates


A fantastic set of free, responsive email templates by ZURB with many different layouts.

Get it


A Javascript object by Julian Lam that allows you to enhance a plain old textbox with "tab" behavior. It disables the default browser behavior (moving to the next input box), and enhances the existing textbox to capture the "tab" key and replicate behavior similar to that found in editors (inserting a tab character, indentation).

Check it out

HTML5 Game: Pappu Pakia


A fun HTML5 game that has been made for the GitHub Game Off 2012. Some tricks and tips that the developers learnt while making this game have been shared on the blog CodeTheory and on CSSDeck.


Dropbox File Uploader With Twitter Bootstrap


A great tutorial by Martin Angelov on how to use the new DropBox feature, the Dropbox Chooser, in order to create an app that lets users attach a photo from their Dropbox account, crop an area with the Jcrop plugin, and download the result.

Read it

The Big Badass List of 205 Useful Twitter Bootstrap Resources


A huge list of useful Twitter Bootstrap resources by Bootstrap Hero.

Check it out

Fun with face detection, canvas and webcam video


Paul Hayes shows us how we can play around with web­cam video data in the browser using getUser­Me­dia API, a video element, a canvas element and a face detection algorithm.

Check it out

Making 100,000 Stars


Remember 100,000 Stars, the Chrome experiment that is an interactive visualization of the stellar neighborhood and that we featured in Collective #38? Now you can dive into the making-of by Michael Chang on HTML5 Rocks. The project was built with THREE.js and CSS3D and you can learn about the discovery process and some great programming techniques.

Read it



Hakim El Hattab created another magical experiment called Hypnos.

Get hypnotized

Free Font: Bourbon


A sweet, retro sans serif typeface by William Suckling.

Get it

Clean Portfolio One Page PSD Template


A free PSD template for a clean portfolio website with a light and dark version by WeGraphics.

Get it

Respond to change with Object.observe


Alex Danilo shows you how you can experiment with a new method called Object.observe() that has been proposed to TC39, the standards body overseeing development of ECMAScript (JavaScript). It aims to improve the performance of web applications and you can try it out now in Chrome Canary version 25.

Read it

How to record audio in Chrome with native HTML5 APIs

Learn about the possibilities and problems when capturing audio with HTML5 in Chrome from this article by Code Artists.

Read it

Emmet CSS snippets for Sublime Text 2

If you are writing you code with Sublime Text 2 and use Emmet but have trouble remembering all the property aliases, you'll love these ST2 snippets that will allow you to use Emmet CSS through autocomplete hints. It can also work with CSS, LESS, SCSS and Sass.

Try it

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

Do you want to share some interesting news here?

The Collective features the latest news and resources from the web design & web development community. If you have spotted something that you'd like to appear in the next issue, just submit it here