Posts Tagged: web

A vision for our Sass

Felicity Evans writes a “manifesto” for well written Sass in A List Apart:

Yet alongside the wide-scale adoption of Sass (which I applaud), I’ve observed a steady decline in the quality of outputted CSS (which I bemoan). It makes sense: Sass introduces a layer of abstraction between the author and the stylesheets. But we need a way to translate the web standards—that we fought so hard for—into this new environment. The problem is, the Sass specification is expanding so much that any set of standards would require constant revision. Instead, what we need is a charter—one that sits outside Sass, yet informs the way we code.

The web’s grain

Frank Chimero, writing in one of the smartest pieces on responsive and future web design I’ve read in quite a while:

The web is forcing our hands. And this is fine! Many sites will share design solutions, because we’re using the same materials. The consistencies establish best practices; they are proof of design patterns that play off of the needs of a common medium, and not evidence of a visual monoculture.

Shade

A simple web tool to create linear CSS-based gradients. It’s fast and just as effective (if not more) as almost any desktop graphical tool. Just enter a base and shift a few sliders.

Juice

A small collection of Sass mixins, helpers, and functions for common styling on elements. Many if not most I probably wouldn’t use, but a few here, like clearfix, a pseudo triangle, and centering with transforms I rely on all the time for my day job. Worth a look.

The ten most popular web fonts of 2014

Avenir and Proxima Nova still rank incredibly well.

Sublime Text for front end developers

Some universally excellent bundles to add on to Sublime Text as a front end developer on CSS Tricks. It’s a short article but touches on importance of extra syntax highlighting along with Emmet for shortcuts, and that’s a great set of tools to kick work off.

A brief history of web design for designers

The Froont blog strikes again with a wonderful set of animated gifs that explain where web design started way back in the early 90s and where it’s going. The responsive web design animation is especially gorgeous.

The state of animation 2014

Fascinating look into the Web Animation API over at Smashing Magazine. Unfortunate to see we’re at very early stages:

It will be some time before this API is supported across the board. With half of browser makers waiting to see how developers will use it and most developers refusing to use a tool that isn’t widely supported, the API faces a chicken-and-egg scenario. However, in an on-stage conversation with Google’s Paul Kinlan at Fronteers, I suggested that, were the API to be fully supported in a closed and monetizable system for web apps, such as Google Play, developers would be able to safely use it in a walled garden until it reaches maturity and fuller support.

Measure, optimize, automate

The smart slate of this post by Nicolas Bevacqua is how many different ways – YSlow, Webpagetest, Google PageSpeed – he tackles the same common problem: how do we automate our web performance measurements? Nicolas provides Gulp and Grunt plugins along with command line tools. The point here is simplification. Just start automating baseline performance in any way possible, as soon as possible. You’ll see a noticeable benefit for your web projects going forward.

Responsive images in practice

I’ve linked to many RWD articles here, but this recent piece by Eric Portis in A List Apart is much more than another well written introduction to the subject. His logic and discussion around the new sizes attribute, an otherwise often confusing topic, is masterful.