Web Design Weekly #68


Blue Beanie Day

In this rapidly unfolding age of multiple device platforms and web access experiences, standards are more important than ever, even as they come under renewed pressure. There will always be those who proclaim that standards are a failed process, an obstruction, an anachronism. The desire to go faster and be shinier will always tempt developers to run down proprietary box canyons. Come November 30th, thousands of us will don our blue beanies. I hope you’ll be among us. – Eric Meyer. (meyerweb.com)

Proposal for Touch-Based Animation Scrubbing (lists.w3.org)

“Bad Code”, Dogmatism, etc. (css-tricks.com)


CSS Architecture

To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don’t use tables, and you pride yourself on using as few images as possible. If you’re really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there’s an entirely separate side to CSS that rarely gets mentioned when assessing one’s skill. (engineering.appfolio.com)

Making 100,000 stars

Michael Chang, who works with the Data Arts Team at Google recently helped develop 100,000 Stars, a Chrome Experiment visualising nearby stars. The project was built with Three.js and CSS3. In this case study he outlines the discovery process, shares some programming techniques and finishes with some thoughts on future improvement. (html5rocks.com)

Taking Web Audio Offline

Playing cached audio for offline use on iOS Safari has long been a challenge that has proved to be mission impossible. But with the advent of the (WebKit-only) Web Audio API, it is now finally achievable – although you still need to jump through a few hoops. (html5doctor.com)

5 APIs that will transform the Web in 2013

It’s incredibly exciting to see how the Web is evolving, and 2013 has a lot more in store. Over the next year, there are a number of technologies coming down the pipeline that have the potential to radically transform how we use and develop for the Web. (alexmaccaw.com)

Why Not to Use Left Nav Flyouts

Good navigation should do at least three things well. Firstly, it should allow the user to navigate. Secondly, it should serve as wayfinding, letting the user know where they are. Thirdly, it should help the user understand what the product is capable of. If your navigation is not doing these three things, something’s wrong. (jxnblk.tumblr.com)

The Obama campaign used Jekyll to raise over $250M (kylerush.net)

An Autopsy of a Bad User Experience (taitems.tumblr.com)

Responsive Column Layouts (webdesignerwall.com)

Adaptive Maps (bradfrostweb.com)

Tools / Resources

The ultimate “target retina screens” media query

There now is an abundance of devices with some sort of high-density display. All of these devices have one thing in common – in web browsers (that support the high-density screen correctly) one CSS pixel is not equal to a physical screen pixel. (mir.aculo.us)

Boilerplate for Chrome extensions

Extensionizr is a simple way to jump start your chrome extension development. Just select the type of extension you want, choose permissions and you’re off. (extensionizr.com)


Telescope is an open-source social news app (think Hacker News or Reddit) built with Meteor, which is a real-time JavaScript framework. (telesc.pe)

The Big Badass List of Twitter Bootstrap Resources (bootstraphero.com)

A Brand New Iteration of the Web Directions Tools (webdirections.org)

Chrome Devtools Cheatsheet (anti-code.com)


Hypnos: An infinite hypnotic animation from Hakim El Hattab (lab.hakim.se)

A bunch of shapes you can make with “One Div” (one-div.com)


Senior Front End Engineer at SurveyMonkey

SurveyMonkey is the world’s leading provider of web-based survey solutions, but there’s really much more to us than that. We’re a smart, passionate group of people who work hard to deliver the best survey experience on the planet, period. (surveymonkey.com)

Front End Web Developer at Evernote

Responsibilities include – working closely with designers and product managers, prototyping, design, and developing HTML5, CSS and JavaScript applications. (evernote.com)

Last But Not Least…

Digital Creativity Guide Book

A gorgeous new site from Google that showcases their various services, and takes the form of an interactive pop-up book. (creativesandbox.com)