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

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.

Modern CSS Layout, power and responsibility 

Rachel Andrew reminds us that the power new CSS layout methods gives us could be used to form new anti-patterns:

With this power comes great responsibility. For just as it will be possible for a developer to start out with a beautifully semantic, well structured document and use Grid and Flexbox to meet the design requirements, it will be possible for them to stop caring about the document structure at all. Worse, I believe there will be a strong temptation, especially with Grid, to flatten out document structure in order that all elements become a child of the element with the Grid declared. Making layout simple, but at what cost?

Thinking Ahead: CSS Scroll Snap Points 

Guil Hernandez introduces how easy sliders (with nice UX) will be with very simple HTML and CSS' brand new scroll-snap-* properties. CSS is moving fairly fast these days, with features like this moving from "never heard of it" to:

... browser support for CSS scroll snap points is limited to IE10+ and Firefox 39+. But it looks like Safari 9 will include support, and you can enable scroll snap points in Chrome Canary.

before you know it. The Chrome support means it will trickle to Opera and Android, and the Safari support means it will trickle to iOS, so pretty solid support across the board soon.

The Difference Between Minification and Gzipping

These are both things that you do to assets on your website (things like .css files and .js files). They are both things that reduce the size of the file, making it more efficient in crossing the network between servers and browsers. As in, good for performance. The network is the speed bottleneck of the web and reducing file size helps.

But these two things are distinctly different. If you didn't already know that, it's worth understanding.…

Read Article →

Front End Development is Development

There is some sentiment out there that front end development isn't real development. It's a swaggering, trollish sentiment. Still, it's fun to puff our chests back sometimes. Let's try to put a point on why front end development is every bit as difficult and worthy of the title as any other subset.…

Read Article →

Sponsor: FullStory 

See your site through your users' eyes.

FullStory records each customer session exactly as it rendered in their browser – unlocking pixel-perfect playback, DOM and console inspection, searchability on any page element or interaction, and more.

Watch and understand how real users are interacting with your site. Go beyond analytics to see why customers aren't taking the expected actions, or troubleshoot problem sessions exactly as they occurred without needing to re-create the bug after the fact. See what it's like to get the full story with a free 14-day trial.

#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 →