Web Design Weekly #4

p { padding: 0; margin: 0; }
h1, h2, h3, p, li { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; }
td { vertical-align:top;}
ul, ol { margin: 0; padding: 0;}
.heading {
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-icab-border-radius: 3px;
@media only screen and (max-device-width: 480px) {
p {font-size: 18px !important;}

Issue #4, 22nd day of July 2011

A big welcome to all the new comers that discovered us via Smashing Magazine.
Without further ado, let’s get into it because that’s what it’s all about.


WebGL Light Box
This is the second version of Jaume Sánchez Elias’s WebGL light box. This new version uses straight WebGL, and the handy sylvester.js, glUtils.js, sole’s tween.js and Paul Irish’s RequestAnimationFrame.js. Crazy Cool!

HTML5 Update Stream
The stream will include new tutorials from HTML5Rocks, demos, and Chromium updates. Posts in the stream will contain more content than a Tweet but less than a blog post. Look out for useful code snippets, screenshots, demo links, and more!

The Future of Firebug
John J Barton has announced a new chapter in his life as he joins Google to work on next gen web developer tools for the Chrome team.


Convert a Menu to a Dropdown for Small Screens
Chris Coyier from CSS-Tricks explains the process through a nice tutorial.

A detailed look at CSS3 Radial Gradients
John Allsop looks deeply into what is really going on with radial gradients. He also has an updated tool for creating radial gradients, which supports the current syntax and works across all modern browsers.

CSS3 @Font-Face Design Guide
Nick La from the Web Designer Wall explains the common issues with using custom fonts, picking matching fallback web safe fonts and how to create a perfect fallback font style with Modernizr.

A deeper look at Appcelerator and Phonegap
Tony Lukasavage explains the key aspects to a great cross platform mobile framework and how Appcelerator and PhoneGap stack up.

Super Awesome Rotating Image Slider with jQuery

Cowboy Coding and the Pink Sombrero


Paper.js is vector graphics scripting framework that runs on top of the HTML5 Canvas
It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

Edit CSS live against your production site with WebPutty
WebPutty gives you a syntax-highlighting CSS editor, the power of SCSS and Compass, a side-by-side preview pane and instant publishing with minification, compression and automatic cache control.

Best Resources to Learn JavaScript
If you get overwhelmed on where to start learning and are interested in learning JavaScript, these answers on Stack Overflow will defiantly point you in the right direction.

HTML5 – A Technical Specification for Web Developers
The focus of this specification is readability and ease of access. Unlike the full HTML specification, this “web developer edition” removes information that only browser vendors need know.

See at a glance which of the latest HTML5 and CSS3 features are supported in your browser

Chosen is a JavaScript plugin that makes select boxes more user-friendly

Loads of small WordPress snippets, ready to enhance your WordPress site

The Best Free Fonts for Designers


Kinect, CSS3 & Animatable.com
A small CSS3 animation project done by Mircea Piţurcă for Mozilla DevDerby competition. 14 body joints are tracked with XBox Kinect, the data is brought into the browser using Node.js, recorded and converted into CSS animations with Animatable.com.

User Interface Galleries
This page contains informal galleries or showcases of interface design solutions primarily captured by observing and screen-capturing solutions in the wild.

Media Queries –
A beautiful collection of sites using CSS3 media queries

A Practical Guide to Designing the Invisible

Last but not least

Make sure you view the nice source code by Dan Rubin on www.makephotoshopfaster.com

To be continued…

Thanks again for supporting! Cheers, @jake_bresnehan