Sponsor: Treehouse 

I'd like to specially thank Treehouse today for being such an awesome long-time sponsor of CSS-Tricks. Just imagine how many people they have helped over the years learn web and mobile design and development. It's damn impressive. I've watched Treehouse evolve over the years and you can see how their experience with students guides how they teach and how the site works. For instance, I love how there are different ways to learn: take a track toward a goal like becoming a front end web developer, tackle a project like building a Swift weather app, or dig into a topic like JavaScript.

Prefetching, preloading, prebrowsing

When we talk about front end performance we think things like concatenation, minification, caching, or gzipping assets on the server so that the page loads faster and users can complete their goals as quickly as possible.

Resource prefetching is another performance enhancing technique. We can use it to tell the browser which assets the user might need in the future—before they even need them.…

Read Article →

DIY Priority+ Navigation

We've written a bit about the Priority+ pattern here before. Here's a bunch of real world examples. I needed to use it recently. I found Gijs Rogé's priority-navigation. It's pretty nice: no dependencies, clean code, fairly configurable and designable. It's not particularly small though, and there is a good amount of it defining helper functions. I was in an environment that had all that stuff available and so I figured I'd take a crack at a version. …

Read Article →

Six Tips for Chrome DevTools

The following is a guest post by Umar Hansa. Umar has a newsletter I'm a fan of and graciously offered to write this guest post in that style. I'll let him introduce himself.

Hey, I'm Umar. I like to share web development related tips on Twitter (@umaar) and also through Dev Tips which is a newsletter of developer tips in the form of gifs. Right now, it's all primarily Chrome DevTools related. Before we get started, thank you …

Read Article →

Sponsor: imgix — Real-time Image Resizing as a Service 

Looking to take advantage of the srcset attribute or <picture> element, but don't want to store the different versions of each image? Looking to apply blurs to images that don't peg the browser? imgix can help.

imgix is a real-time image resizing service and CDN. Resize, crop, and process images simply by changing their URLs. Mix and match over 90 URL parameters for unlimited different ways to process images.

It's free to sign up, and every new account gets $10 in credit. Don't let engineering constraints affect your design decisions.

Responsive Images 101 

Jason Grigsby just wrapped up a 10-part series masterclass on responsive images. There is a table of contents at the bottom of each post for jumping around.

“probably doesn’t do what you think it does” 

An interesting post about the odd behaviour of querySelectorAll where it'll match elements that you might not expect at first glance:

I think this API is surprising, and the front end engineers I've asked seem to agree with me. This is, however, not a bug; it's definitely how the spec claims it should work, and how it works in Firefox, Chrome and Safari.

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