Treehouse: Grow your CSS skills. Land your dream job.

Loading CSS without blocking render 

Typically you do want CSS to block rendering. Pages would load in a very awkward manner if you saw the page load with no CSS first, then shift around as the CSS is parsed and applied to the page.

But there are some situations where you want to defer loading of CSS - for instance a stylesheet of custom fonts you don't mind downloading late. Or even your main stylesheet if you're doing critical CSS.

Keith Clark presents a really simple way to do this in this article (no dependencies). Scott Jehl chimed in saying onload has spotty support though. His little async CSS loader is likely the best way to go for the best possible browser support.

Another way to defer loading of CSS is just to put it at the bottom of the document, like we often do with scripts. But bear in mind the advantage to doing it in the head is that the download gets triggered right away so it's ultimately a bit faster. We put scripts in the footer because it's not only the downloading of the script that can be blocking, but the execution as well (doubly whammy). I'm not sure if CSS has blocking execution (if you can call it that), but I don't think so (?).

FOUT, FOIT, FOFT

A (very) brief look at custom font loading. How browsers handle that, how we can exert control over it, and the acronyms invented to describe it. Read Article →

WordPress Functionality Plugins

The following is a guest post by Jason Witt. I've known for quite a while that I should port a lot of the stuff from my `functions.php` in my WordPress theme into a functionality plugin. But you know, hours in the day and all that. I recently had Jason work on this project for me, and he did a bang up job. If you have no idea what I'm talking about, read on.

Adding new functionality to a WordPress …

Read Article →

Server Side Mustard Cut

In this article we'll look at how useful client-side "mustard cutting" is and look at a technique where saving that information to a cookie so it can be used server-side can be useful. Read Article →

Choose a Random Option based on a Range

I have three options and I need to randomly pick one (in JavaScript). But not equally random. I want there to be a 10% chance of the first option, 20% chance of the second one, and 70% chance of the third.

Here are some ways to do that.…

Read Article →

Numeric Inputs – A Comparison of Browser Defaults

The spec, purposefully, stops short of telling implementations (browsers) how to handle UI. In this article we're looking specifically at <input type="number"/>, and you might be surprised to learn that the spec specifically says:

This specification does not define what user interface user agents are to use.

It goes on to explain that different languages, cultures, and regions might have good reason to handle numeric inputs differently. So browsers are on their own here, and perhaps this time …

Read Article →

Introduction to WordPress Front End Security: Escaping the Things

If you're a WordPress developer that writes HTML/CSS/JS (which is 100% of theme developers and 99% of plugin developers), you need to know the basics of front end security for WordPress. WordPress gives you all the tools you need to make your theme or plugin secure. You just need to know how and when to use each tool.

For example, one huge responsibility you have as a front-end developer is to prevent unescaped content from being printed to the page

Read Article →

#137: SVG is for Everybody

Rather than a typical screencast, this is a video taken of my talk SVG is for Everybody recorded by the Treehouse gang at BlendConf. Of course there is far too much about SVG to cover in just one talk, so it's mostly me trying to convince you that SVG is very cool, where to get it, how to use it, and that kind of thing. Also a whole part about using SVG as an icon system and how that …

Watch Video →

More Blog Posts →