CSS clipping and masking
Both Clipping and masking hide some parts of the elements and show other parts. But there are, of course, differences between the two. Differences in what they can do, differences in syntaxes,...
Layering and compositing content with CSS
One of the things you can do with CSS is to layer content and have the layers perform different tasks. Some of these techniques are inherited from and used together with, SVG and others are specific...
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...
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...