Web Design Weekly #36

Headlines

Why I love working on the web

Matt Wilcox absolutely nailed it…. (mattwilcox.net)

About HTML semantics front-end architecture

Nicolas Gallagher’s collection of thoughts, experiences, ideas that he likes, and ideas that he has been experimenting with over the last year. He covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. (nicolasgallagher.com)

Introduction to JavaScript Source Maps (html5rocks.com)

Polyfilling picture without the overhead (w3.org)

GitHub styleguide (github.com)

Articles

CSS Style States using “Infinite” Transition Delays

Early this week Joel Besada discovered an interesting way to keep (store) a CSS style on an element using CSS transitions. His demo and post went a bit viral. So if you haven’t seen this great post then you should definately check it out. (joelb.me)

CSS Preprocessors & “View Source”

Jeff Croft blogs about the readability of the output from using preprocessors. What do you think? Should the formatting of the rendered output of your CSS matter? Is it important for your CSS code to be readable by those who might stumble across your site and “view source?” Or is the rendered output there simply to be read well and fast by a browser (which means condensing and compressing it)? (jeffcroft.com)

New exciting web technologies

Bruce Lawson, open web standards evangelist for Opera, looks at some nifty new browser technologies that are not part of HTML5, including WebGL and SVG. (netmagazine.com)

Scrolling Meets Compositor

Hajime Morrita (WebKit engineer) explains scrolling in Mobile Safari and the internals to make it fast, including an upcoming change to upstream some of that scrolling magic. (tale.wkb.ug)

iOS Lock Screen

Ever since the release of iOS 5.1, there’s been something bugging Brye Kobayashi. The lock screen. So he decided to do something about it. (kurocha.blogspot.ca)

Open-Sourcing Mobitest (blaze.io)

Web Design Trends (smashingmagazine.com)

Tools / Resources

Gridpak: The Responsive Grid Generator

I have linked to this tool before but didn’t really give it the recognition that the guys at Smashing Magazine have. Well worth investigating if you are into responsive design + grids. (smashingmagazine.com)

Create a Responsive Web Design

If you haven’t had the chance or have felt overwhelmed by responsive design, I would highly recommended checking this post out by Chris Spooner on the line25 blog. Take some time to learn what is becoming a core skill in front-end development. (line25.com)

Quick (beginner-level screencast) overview of CSS position values (css-tricks.com)

“Frontend-webapps” bundle created by Paul Irish (google.com/reader)

Parallax content slider with CSS3 and jQuery (tympanus.net)

WordPress Query Comprehensive Reference (github.com)

40 Useful PSDs From Dribbble (designm.ag)

Inspiration

Andy Hume’s SXSW ‘CSS for grownups’ talk

Audio of Andy Hume’s great SXSW CSS talk. The slides can also be found here. (audio.sxsw.com)

The Industry Podcast #4

Adam Stacoviak is joined by Drew Wilson and Jared Erodu along with special guest Dan Cederholm of Dribbble. Topics include being disorganised, Kevin Rose and the Milk team getting “aqui-hired”, awesome shots on Dribbble, Dan on writing CSS the Sass way and so much more! (theindustry.cc)

The Box – An animated cardboard and paper 3D scene. (developer.mozilla.org)

20 Examples of Landscape Themed Web Designs (line25.com)

Nicholas Zakas: Progressive Enhancement 2.0 (youtu.be)

Marco Rosella’s personal site (marcorosella.com)

Last But Not Least…

Compass CSS Sprites

This kinda blows my mind becaue it’s so rad! Ryan Bates has a great quick RailsCast about using Compass to generate image sprites. Even if you are not into Rails, it is worth checking out to see the power of Compass. (railscast.com)

A detailed look at Photoshop CS6 Beta’s improvements (bjango.com)

This post currently has no responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *