Web Design Weekly #47


WordPress 3.4 “Green”

WordPress 3.4 is here and out the door. This release includes significant improvements to theme customisation, custom headers, Twitter embeds, image captions and lots more. (wordpress.org)

What iOS 6 Mobile Safari Offers Front End Devs (taitems.tumblr.com)

CSS variables just landed in WebKit (trac.webkit.org)

Hello Opera 12 (my.opera.com)


Responsive images: what’s the problem, and how do we fix it?

Responsive images is a surprisingly complicated topic, and one that’s been steadily gaining attention over the last year as more developers discover they need them and then discover there’s no good solution yet. This article aims to give an overview of the problem itself, and show the different proposals in the works to address it. (dev.opera.com)

Rubik’s cube with HTML5 (CSS3 + JavaScript)

Holy smokes! Diego Ferreiro Val kinda loves the Rubik’s cube. Epic post about the making and the technical aspects. After reading the post, be sure to check out the finished demo. (html5rubik.com)

Building The Next SoundCloud

How SoundCloud built its new single-page main website using Backbone.js. (backstage.soundcloud.com)

CSS3 Filters: Altering HTML and Images with just CSS (inserthtml.com)

Seven handy text manipulation tricks in Sublime Text 2 (whiletruecode.com)

Why software engineers are grumpy (nczonline.net)

Popularity of CSS Preprocessors (css-tricks.com)

HTML5 Accessibility Chops (paciellogroup.com)

Tools / Resources

Idiomatic CSS

Principles of writing consistent, idiomatic CSS by the awesome Nicolas Gallagher. The days of a simple web page seem to be long gone. Reading documents like this and adopting the best practices seem to be a must if you want to stay alive in this fast-paced industry. This document is in its early days and will no doubt evolve and become a “go-to” source. (github.com)

Pictos 4 & Pictos Outlines

Early this week, Drew Wilson shipped 2 new sets to his famous Pictos icons. Pictos 4 contains 162 icons and the Outliners contain 180 outlined goodies from the classic Pictos packs. (pictos.cc)

HTML5 Audio

A site dedicated to making the web and mobile applications sound good. (html5audio.org)

eCSSential – An experiment in optimised loading of mobile-first responsive CSS (github.com)

Useful collection of responsive web design resources (onextrapixel.com)

Hot CSS Buttons (css-tricks.com)


Flexible Media in Responsive Web Design

This slide deck from Dave Rupert’s Refresh Austin talk is “ALL TIME”. It went a little viral on Wednesday. So if you haven’t already checked it out, grab some whisky and go on a very informative responsive web design journey with Dave. (dl.dropbox.com)

Slick responsive table by the Boston Globe crew (bostonglobe.com)

Funky Scrolling Header (getcirulis.com)

Twitter Logo in CSS (labs.upperdog.se)

Shiny Demos (shinydemos.com)

Last But Not Least…

Paul Irish tears down Pointer Pointer

He explains how the very cool pointerpointer.com was built in a short YouTube clip. (youtu.be)

BIGFUCKINGDEMOBUTTON (bigfuckingdemobutton.com)