Quick Note: Using Viewport Units
These little darling units allow for some really nice effects and typographical work. We'll explore what they are and a couple effects we can use them on. vh and vw # The two basic units for viewport...
Inspecting your variable fonts
One of the most frustrating things of working with Variable Fonts is that we have no real way (short of bugging the font creator to provide them for you) to detect what values work for each scale, how...
CSS Shapes: Once more, with feeling
CSS Shapes are an awesome way to make our designs look less like boxes inside boxes inside boxes. It let us wrap text around an image regardless of its shape. I've written before about shapes. The...
Web Performance Improvement: The Client Side Of The Equation
We've looked at a lot of server-side tricks to reduce the page load and improve users' experience when accessing our content. Now we'll look at client-side client hints and tools to optimize our...
Web Performance Improvement
One thing we as developers tend to forget is that not all web experiences are equal. One of the positive things I've found about AMP is that it reduces the fat of your web content by reducing the...
Codec Comparison: 2-pass encoding
We've set up 1-pass encoding for all our target codecs and we have the resulting videos to compare. Do a 2-pass encoding changes file size and video quality? Hardware Specs # Model Name: MacBook...
Codec Testing and Comparison
Warning # Message Date: 04/12/2018 The alliance for Open Media froze bitstream format on March 28, 2018 and announced version 1.0 of the codec on the same day. It is not clear if the bitstream work...
Quick Note: Using details to create no-script accordions
Hat Tip to : CSS Tricks. An accordion is a UX element to group related items like Frequently asked questions. Most libraries give you a way to create accordions. But there is an easier way to...
How many people actually browse your site without Javascript?
In reading Measuring the Hard-to-Measure I found his idea to track how many people are actually browsing your site without Javascript. It's this little image inside a noscript element. <noscript> ...
CSS Logical Properties
If you've been following the CSS specifications you will see that several of the more recent ones have adopted start and end as values for the properties and I wondered why was this, wasn't it enough...