Paul Irish and Paul Lewis describe a way for us to think about web performance: RAIL (Response, Animation, Idle and Load). It's designed to break up each moment of a user’s experience into actions which can then be specifically optimized.
Very few of us have unlimited time to throw at optimization work, far from it, and we need criteria that help us decide what’s important to optimize (and what’s not!). When all is said is done, we want and need clear guidance on what “performant” means to our users, because that’s who we’re building for.
Working on web performance is a combination of obvious best practices (optimize assets), very tricky decisions (what can I defer loading on and what can't I?), and nuanced choices (which animation technique is the most appropriate?).
Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then:
Children of a stacking context are painted from bottom to top in the following order.
- Elements with a negative stack level, typically elements with
- Elements with a
- Elements with a stack level of 0, typically positioned elements with a
- Elements with positive stack levels, e.g. a positioned element with a
A bonafide CSS trick by Franklin Ta. Position the images on top of each other at 50% opacity and inverted colors. Or, as Bennett Feely pointed out, use
background-blend-mode: difference; if they are background images.
It all started with this question Keith Clark recently asked on twitter.
CSS repeating-linear-gradients, do we need these? Can't the same thing be achieved with a linear-gradient and background-size?
That's a good question.
The strange thing about using CSS to style SVG elements is that only certain properties can be used, depending on the element. For instance, you can set the
fill on a
<polygon>, but not the
The W3C has a list of properties that outlines which SVG properties can be manipulated by CSS.
A handy guide to fixing common mistakes with Git from Joshua Wehner:
One of the most useful features of any version control system is the ability to "undo" your mistakes. In Git, "undo" can mean many slightly different things.
When you make a new commit, Git stores a snapshot of your repository at that specific moment in time; later, you can use Git to go back to an earlier version of your project.
The CSS equivalent: CSS Triggers.
It's a 2,000 line behemoth. It's hard to browse or easily find what you are looking in there. What can be done? This article isn't about actually dismantling the file (although that would be a good one), it's mostly about what to do when you need to leave the file that way.
It's interesting to see how many people over time have come to the conclusion that certain seemingly-harmless words can be problematic while communicating:
A good message to keep spreading.
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 →