Web Design Weekly #135

Headlines

A New Firefox

Firefox 29 released with CSS variables and (un-prefixed) box-sizing. Also the Internationalization API has been implemented and is now enabled by default! (developer.mozilla.org)

CSS Shapes 101

The new CSS Shapes specification was introduced by Adobe in mid-2012 and in this post Sara Soueidan walks through how Shapes work, and how you can start using them today. (alistapart.com)

Articles

Inline SVG vs Icon Fonts

Not sure if you should use SVG images or Icon Fonts? This post by Chris Coyier puts all the data in one place which should help you quickly decide which path to take. (css-tricks.com)

An Introduction to the Web Notifications API

Aurelio De Rosa gives a great overview of what the Web Notifications API is and dives deeper into the description of its methods, properties and events. (sitepoint.com)

DRY-ing Out Your Sass Mixins

Far too often, mixins are written in such a way that duplicates properties, creating multiple points of failure in our output CSS and bloating the size of the file. In this post Sam Richard walks through how to take your Sass mixins and make sure they are helping not destroying your CSS. (alistapart.com)

12 Little-Known CSS Facts

In this article Louis Lazaris uncovers some little gems about CSS. Even if you’ve been writing CSS for many years, you might find something you never knew about. (sitepoint.com)

JavaScript Promises … In Wicked Detail (mattgreer.org)

Tools / Resources

Web Components Can Do That?! by Addy Osmani

A super high quality slide deck by Addy Osmani about Web Components. Going through the slides should give you an overview of where Web Components are today and what is achievable. (addyosmani.github.io)

Whirlwind Tour of Scalable Vector Graphics

Marc Grabanski walks through the essential building blocks of SVG and dives into transforms, matrices and how to manage the transform stack. He also touches on how to script against SVG. (youtube.com)

The CSS Animations Pocket Guide

Val Head’s publisher closed so now she is giving you the option to pay what you’d like or download it for free! The book is designed to help you jump into using CSS animations. (valhead.com)

The Style Guide Guide

Find a style guide generator that fits your flow. (vinspee.me)

Sidebar Transitions

Some inspiration for transition effects for off-canvas navigations. (tympanus.net)

CSS Vocabulary

A small app that helps you understand what is what in CSS. (pumpula.net)

CSS3 Gradients

A handy selection of CSS3 gradients that are perfect for backgrounds, buttons and more. (designskilz.com)

A nice collection of customisable generative SVG-patterns (svgeneration.com)

HTML5UP – Responsive HTML5 and CSS3 site templates (html5up.net)

Web Fundamentals — A handbook for best practices (developers.google.com)

CSSConf Australia videos are now online (cssconf.com.au)

Gulp + Browserify: The Everything Post (viget.com)

Inspiration

Do it once. Do it right.

Ryan Clark, who is the Product Manager & Creative Director at Virb, talks about the pitfalls of the ship & iterate mentality that can fail your work, team and product. (medium.com)

Differentiate or Die?

Greg Hoy gives an honest view about why the first quarter of this year sucked for most web design agencies. (the-pastry-box-project.net)

Building the Carousel website with Dropbox (destroytoday.com)

Jobs

Public Broadcasting Service (PBS) Front-End Web Developer

Front-End Web Developer is responsible for developing/maintaining code for the presentation layer of PBSi products. Responsibilities also include ensuring that the HTML, CSS, JavaScript performs efficiently, robustly, solidly and adheres to industry standards. (pbs.org)

Advertise your job in next week’s newsletter →

Last But Not Least…

Programming Sucks

A super entertaining read by Peter Welch. (stilldrinking.org)

Incomplete List of Mistakes in the Design of CSS (csswg.org)

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 *