Using figures and Flex-box to align captions
As I learn how to be more flexible in working with art direction for web content, I'm documenting some of the cool things I've learned. Because I'm using flexbox, I'm relying on CSS Trick's A Complete...
Home
Adding icons to links based on the type of resource
For a long time I've seen icons attached to links to help users figure out what type of links they are. This was particularly important in the days of plugins because users haad to have the right...
Chrome DevTools Network Tab
The idea is that using this tab we can check how our page loading and troubleshoot loading issues as they happen with a visual representation of the loading process Make sure that you are running in...
Using material design for typography work
Material Design is Google's Design System. It started as a Google-only system that you bought into the wholesale design system with little to no chance of customizing it. The new iteration of Material...
Variable Fonts from Google Fonts
Developers who, like me, like Google Fonts have been frustrated by their not having Variable Fonts available. That has changed in the last few weeks. Google has released an experimental API, available...
Understanding and Using Web Workers
Javascript does a lot of things decently enough but one of its biggest drawbacks is that it's single-threaded. All scripts that run on a page or application run in the same execution context. Web...
How To Use Responsive Images
Based on Andreas Bovens' article Responsive Images: Use Cases and Documented Code Snippets to Get You Started we will look at four use cases for responsive images: Change image sizes based on...
Concepts and examples of responsive images
In working through automating image compression and responsive image generation I wanted to add more areas to the conversation about responsive images without cluttering the post about automation. How...
Automating image work
Since we are unlikely to compress images and less likely to create the individual images necessary to do a good job with responsive images, we have to leverage technologies to do it for us. I use Gulp...
Loading scripts the right way for everyone
Differential loading is the technique where you load different content for different browsers that support different sets of Javascript features and APIs. <script type="module"...