Drawing with SVG: The Basics
Since SVG is a drawing format, it makes sense to cover drawing commands first. The container # <svg> Wraps and defines the entire graphic. is to a scalable vector graphic what the <html>...
Home
Finally Understanding SVG (I think)
SVG is a powerful vector graphics format that works particularly well for icons and other line artwork in web pages. This is my attempt at documenting what I understand of SVG and its component...
Extracting JSON into another JSON file
As part of a larger project, I had to figure out how to use node to scrape the content of a page to build a JSON file from the components using Node. Rather than scrape the page I discovered a REST...
Replacing Images with WebP equivalents on the server
WebP provides smaller files and better quality than equivalent JPG or PNG files. The problem is that not all browser support the WebP format, only Chromium-based browsers like Chrome, Opera, plus Edge...
Serving the right language via content negotiation
The problem Statement: I want the server to deliver the right document (variant) based on the browser's language preferences. Browsers send an Accept-Language header which lists their preferred...
WP-CLI: Posting content from the command line
One thing that has always bugged me about WordPress is that it has a GUI only administrator interface and it made it more cumbersome than it needs to be, even for simple publishing workflows like mine...
Streams and service workers
Streams are a very interesting concept and a new set of tools for the web. The idea is that we can read and write, depending on the type of stream we're using, chunks of content... either write them...
Responsive Images Deep Dive
Responsive images seek to answer the following question: How can we incorporate images in responsive layouts that are appropriate for a device and its resolution without loading unnecessarily large...
Style Interaction
I've been working on a project where I want to convey the idea of pages spread out on a table or post-it notes pasted randomly against a wall or another surface. It took me a while to reason through...
Lazy loading images using intersection observers
Lazy loading allows you to delay loading images until the user actually scrolls the page to where the image or video is visible to the user. This post will describe why lazy loading is important, one...