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

The Gray Gray Ghost That I Call Home

There is a great scene in Cold Mountain where Inman, who is AWOL from the army in The Civil War, is walking through the woods on a horse opposite Bosie, the deputy charged with catching people like Inman. The two are at a gunpoint standoff:

Bosie: Tell you what I got on my side.
Inman: What have you got on your side?
Bosie: The confidence of youth.

Bosie is absolute in his convictions. Inman had done wrong and for that …

Read Article →

Sponsor: Frontend Masters 

Frontend Masters is known for some of the highest-quality video training courses in the industry. Their teachers are experts in their field—like the creator of AngularJS, multiple jQuery team members, and the founder of JSON.

Right now, get your choice of a full-week in-depth video lesson. All of which include:

  • 5 full days of in-depth instruction by experts who use these skills every day
  • Worksheets, exercises and challenges to help you test your knowledge
  • Drilled-down, actionable lessons that you can start using right now

Get a full week's worth of training from the masters for free, starting today.

Debugging CSS Keyframe Animations

Creating CSS animations may be about learning the syntax, but mastering a beautiful and intuitive-feeling animation requires a bit more nuance. Since animations command so much attention, it's important to refine our code to get the timing right and debug things when they go wrong. After tackling this problem myself, I thought I'd collect some of the tools that exist to aid in this process.…

Read Article →

Understanding Proxy Browsers 

A new series of posts by Tim Kadlec on proxy browsers and why some people need them:

I'd venture to say that most developers and designers are not big fans of proxy browsers—assuming they pay attention to them at all. They don't behave in ways a typical browser does, which leads to frustration as we see our carefully created sites fall apart for seemingly no reason at all. And frankly, most of us don't really need to use them on a day-to-day basis. Through the lens we view the web, proxy browsers are merely troublesome relics of a time before the idea of a "smartphone" was anything other than a pipe dream.

But our view of the web is not the only view of the web. People all over the world face challenges getting online—everything from the cost of data and poor connectivity to religious and political obstacles. In these environments proxy browsers are far from troublesome; they are essential.

Motion along path in CSS 

From the "I barely knew this was a thing and you can already play with it in browsers" files:

Motion paths allow authors to animate any graphical object along an author-specified path.

I suspect Chrome jumped on this because it's something that was only otherwise doable in SMIL, which they are ditching. I believe this is the first time the full path syntax has made it into CSS? (e.g. motion-path: path('M100,250 C 100,50 400,50 400,250');).

There are some demos on CodePen.

On The Verge 

A fun bit of #hotdrama around mobile web performance.

Apparently it's possible to be of the opinion that slow, sucky websites are the fault of browsers and not the fact that the websites are jam packed with garbage assets.

Scroll-to-top-then-fixed 

Chrome yanked position: sticky;, but Firefox and Safari still have it. Dudley Storey shows how to do the common sidebar pattern where a chunk follows you as you scroll down, but only when there is room for it. He does it in CSS, and the demo polyfills support with stickyfill.

#141: Getting the Images and Numbers for Responsive Images

You know about responsive images. It's about the image syntax in HTML. If you give it the right information in the right syntax, you can get the browser to download just exactly the right image it needs, without giving it too much or too little image data. It's fantastic for performance.

You know that to get the most out of responsive images you should polyfill it with Picturefill. You download it, you include it on your page.

You have …

Watch Video →

More Blog Posts →