Web Design Weekly #39


A Baseline for Front-End Developers

Once upon a time, editing files, testing them locally (as best as we could, anyway), and then FTPing them to the server was the essential workflow of a front-end dev. ‘Times are a changin’. Rebecca Murphey gives a comprehensive overview of the new set of baseline skills required in order to be successful as a front-end developer. (rmurphey.com)

Responsive Viewport Units

With all this new fangled talk of responsive web design, it’s about time that we had a poster child CSS unit to go with it. So move over ’em’, CSS3 Values and Units introduces a bunch of new viewport units that are getting ready for their time in the limelight. (generatedcontent.org)

CSS Variables published as First Public Working Draft! (w3.org)

Extending CSS (with SASS) (viljamis.com)

Silly list scroll effects (lab.hakim.se)


What’s Going On In The WordPress Economy?

It’s an economy that thousands of people, the world over, are benefiting from. It is an economy built on free, open source software. In this Smashing Magazine article Siobhan McKeown talks to people who are active in the WordPress economy, people from all over the globe. (smashingmagazine.com)

Refactoring >14,000 lines of CSS into Sass

Eugene Fedorenko talks about how Beanstalk refactored the whole app to use SASS. Some really great insights into the process and I am sure if you are about to refactor your CSS, you could learn a thing or two. (wildbit.com)

A New Front-End Methodology: BEM

BEM stands for “Block”, “Element”, “Modifier”. It is a front-end methodology: a new way of thinking when developing Web interfaces. The article elaborates on the theory as well as the practice of building websites. (smashingmagazine.com)

Let’s Talk about Semantics

Mike Robinson gives you the low down about HTML semantics. This post will hopefully give you a good understanding and help your markup shine. (html5doctor.com)

Making the Most of Personal Projects: A Designer’s Secret Weapon (designfestival.com)

Learn all about Breakpoints in Chrome Developer Tools (developers.google.com)

World’s Best Designed (news) website (snd.org)

Semi-colons (christianheilmann.com)

Tools / Resources

Creating A Mobile-First Responsive Web Design

Brad Frost walks you through how to create an adaptive web experience that’s designed mobile-first. (html5rocks.com)

IcoMoon App

Pretty sweet resource by the Keyamoon team. Browse and select icons to download them or make a font. You can import SVG images or fonts too.(keyamoon.com)

Breakpoint: a Sass powered responsive layout builder (github.com)

Backbone.js Patterns: a tutorial/presentation (backbone-patterns.heroku.com)

Responsive CSS3 Slider Without Javascript (csscience.com)

Free beautiful UI elements for developers (creativemarket.com)

35 Great Resources for Compass and Sass (fuelyourcoding.com)


Teehan + Lax Demo Reel

This show reel of work by Teehan + Lax is sure to leave you inspired. (vimeo.com)

Showcase of Cool Hand Drawn, Doodle & Sketch Logos (spoongraphics.co.uk)

The CSS3 Experience – Dan Cederholm (vimeo.com)

Anatomy Of A Startup Video (blog.bugherd.com)

Last But Not Least…

Fred Boyle’s Code Challenge

Between now and the end of May 2012, code a small project using a language or environment that’s new to you or that you’ve only casually messed around with. (fredboyle.com)

Pure CSS3 Classic Train (developer.mozilla.org)