Grow your CSS skills. Land your dream job.

Sponsor: statico.io – front end optimization made easy 

statico.io offers front end optimization as a service for web designers and developers. The service optimizes HTML, CSS, JavaScript, fonts, and images, with simple annotations like <link href="home.less?sio-css-embed=enabled&sio-css-uncss=enabled" rel="stylesheet">. It can also integrate with a CDN to deliver the optimized static assets.

It's free for sites up to 10,000 monthly unique visits. Get started today - no signup required.

What I like about statico is that it's a local stand-alone build tool. You configure it to do what you want, and the output is a website optimized for speed. It helps with the classics, like concatenation and minification, but also does trickier things like critical path optimization, sprite generation, and data URI inlining.

Sublime Text for Front End Developers

The following is a guest post by Wes Bos. Wes has been writing about Sublime Text and all the great stuff it brings to code editing for a while now. He has a new book and video package out now: Sublime Text Power User. I met him at a conference recently and saw his talk on Sublime Text. The conference was buzzing about it. Newbie's jaws were dropped and old pro's learned new tricks. Here, Wes is going

Read Article →

Sponsor: Frontend Masters – Expert Web Development Training 

Frontend Masters produces quality video training by industry leaders like Kyle Simpson, Douglas Crockford and Estelle Weyl. These are super in-depth courses designed for intermediate and advanced developers.

They have two fantastic workshops coming up:

You can attend these workshops in person in Burnsville, Minnesota, or live and online (no travel!) with full HD streaming and chat.

The State Of Animation 2014 

Rachel Nabors:

I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.

Perf.Rocks 

> Find resources that help you build lightning fast websites

by Daniel Guillan

Performance Budget Metrics 

Tim Kadlec groups all the things you could measure in a performance budget into four groups:

  1. Milestone timings (Example: time to visually complete)
  2. SpeedIndex (WebPageTest's well-loved but isolated score)
  3. Quantity based metrics (Example: number of requests)
  4. Rule based metrics (Example: getting a "B" in "Use cookie-free domains")

#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More

Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code.


A "build process" is all the stuff that happens between the code you write and code that goes out to a live website. We've talked before about using Grunt for this. Sass is processed, assets are combined, minification and optimization happens, etc. There are endless things that a build process can …

Watch Video →

More Blog Posts →

*May or may not contain any actual "CSS" or "Tricks".