Multilingual Bundles
Working with international websites can be challenging since there are many aspects that we need to address. This post will cover a simple way to add internationalized messages available in multiple...
Destructuring in Javascript
Destructuring is an alternative way to assign properties from an objecct or array. The traditional way to assign items to an array is using bracker [] notation. This example sets constatn to specific...
Creating A Default Pen for Codepen
Most of the time I create a pen in Codepen to validate the code I'm working with. I've found myself constantly repeating the same CSS and the same HTML multiple times. It gets tiresome and it can lead...
Webcodecs API
WebCodecs is an interesting API. It enhances existing video codecs and allows for video-based applications. This post will cover the API and how it works. What is the WebCodecs API # The WebCodecs API...
Revisiting Streams (again)
I've looked at streams in the context of Node and the browser, but I haven't really done anything with them because I couldn't figure out what the best use for them was. As I started working with more...
Using the attr() css function
The attr allows developers to pull data from HTML attributes into CSS. The idea is that, like data attributes and custom properties, you can use these bits of custom data to provide limited ways to...
Be Mindful Of The Reading Order
When we work with content for the web, we usually don't worry about the reading flow of a document, based on writing mode and writing direction. In Latin languages, we're used to right to left, to...
Getting The Codec Attribute For html video
In the last post we discussed encoding video using the FFmpeg command line tool as a way to compress video and test the results. We used h.264 (AVC), h.265 (HEVC), VP9 and AV1. This post will explore...
Compressing video is more than taking bits out
I've always been interested in video compression, particularly on how it works for the web. This post will cover these areas: Terminology necessary to understand the commands we will use What codecs...
Data attributes
Semantic HTML has an extensibility mechanism that allows adding extra data on elements using the data-* syntax. This replaces older hacks such as non-standard attributes, or extra properties on...