Bi-Weekly Frontend News

Collective #40

Inspirational Website of the Week

Collective40_27

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

Collective40_09

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

Collective40_25

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

Collective40_12

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
Advertisement

5 APIs that will transform the Web in 2013

Collective40_08

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

Collective40_10

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

Collective40_15

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

Collective40_01

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

Check it out

Sidebar: The 5 best design links, every day

Collective40_02

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

Check it out

The WebGL Podcast

Collective40_14

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

Collective40_03

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

Collective40_05

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

Collective40_06

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

Scrubby

Collective40_07

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?

Collective40_11

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

Collective40_16

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

Character-Code.com

Collective40_17

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

Collective40_18

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

Collective40_13

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

Collective40_19

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

Get it

tabIndent.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 out

HTML5 Game: Pappu Pakia

Collective40_20

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

Collective40_21

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

Collective40_22

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

Check it out

Fun with face detection, canvas and webcam video

Collective40_23

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

Collective40_24

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

Hypnos

Collective40_26

Hakim El Hattab created another magical experiment called Hypnos.

Get hypnotized

Free Font: Bourbon

Collective40_28

A sweet, retro sans serif typeface by William Suckling.

Get it

Clean Portfolio One Page PSD Template

Collective40_30

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

Collective40_04

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