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

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.

BEMIT: Taking the BEM Naming Convention a Step Further 

Harry Roberts takes a look back at his previous post on abstracting classes and expands on the idea by using the @ symbol:

The @ is a human readable and logical way of denoting conditional states. It allows developers to learn about any potential permutations or appearances that the piece of UI in question might have, just at a glance.

For instance, instead of making a class such as .is-hidden--large (where an element is only hidden on large breakpoints) we'd write .is-hidden@large instead. It might look a little strange but I think this could be very useful for scanning a lot of markup and quickly getting an idea as to what styles will always be applied and those that will only be applied in certain circumstances.

Tight Fitting SVG Shapes, the Present and Future

The following is a guest post by Ana Tudor. Ana tackles an interesting problem here: what happens when the stroke of an element grows it such that it appears cut off? Getting it to fit tightly again may seem like an exercise in guessing, checking, and magic numbers. But if you know Ana's work, you'll know she is uniquely qualified to teach us the math behind getting to the correct solution. She approaches it a number of different ways,

Read Article →

Bootstrap 4 Alpha 

Major changes in Version 4. Some highlights:

  • Moved to Sass from LESS
  • This version of box-sizing as part of their new reset.
  • Opt-in (single variable toggle) to use flexbox on the grids/components.
  • Type set mostly in rems
  • All JavaScript in ES6

And another big move for them: monitization through purchasable themes designed by the Bootstrap team themselves.

Zoomable UIs 

Joni Korpi on the redesign of his personal website, where he describes all the issues involving "zoomable user interfaces", or ZUIs. For example, clicking on a link will zoom into that particular element rather than cause a full page refresh.

There is no home page or navigation menu. These two elements are usually among the hardest to design, so I'm glad to be rid of them. In this design, they're both replaced by the same thing: a zoomable view of the site's contents. The content itself is the navigation.

Another good example of this design pattern is Work & Co.'s portfolio.

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