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 inspiredOne 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 it24 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 itResponsive 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 it5 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 itSocialCount, 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 itHeyoffline.js
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 outCreative 404 Page
Adem Ilter created a super-creative 404 page for his blog.
Check it outSidebar: The 5 best design links, every day
Sidebar by Sacha Greif gives you a daily dose of qualitative and fresh design links.
Check it outThe 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 itWalkabout.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 itCSS Architecture
A wonderful, in-depth article by Philip Walton about good CSS architecture. A must-read that will teach you a lot.
Read itjStat: 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 outHTML5 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 itScrubby
With Scrubby by Jeremy Apthorp you can tweak values in JavaScript without having to recompile it.
Try itAdapting 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 itShould 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 outCharacter-Code.com
A nicely organized resource of HTML codes and names for ASCII characters. Super-useful.
Check it outStyle 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 itFooTable: 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 outResponsive Email Templates
A fantastic set of free, responsive email templates by ZURB with many different layouts.
Get ittabIndent.js
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 outHTML5 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.
Play!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 itThe Big Badass List of 205 Useful Twitter Bootstrap Resources
A huge list of useful Twitter Bootstrap resources by Bootstrap Hero.
Check it outFun with face detection, canvas and webcam video
Paul Hayes shows us how we can play around with webcam video data in the browser using getUserMedia API, a video element, a canvas element and a face detection algorithm.
Check it outMaking 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 itHypnos
Hakim El Hattab created another magical experiment called Hypnos.
Get hypnotizedFree Font: Bourbon
A sweet, retro sans serif typeface by William Suckling.
Get itClean Portfolio One Page PSD Template
A free PSD template for a clean portfolio website with a light and dark version by WeGraphics.
Get itRespond 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 itHow 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 itEmmet 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