CSS logical property shorthand attributes
CSS logical properties provide a way to style elements based on the direction the language is written in (left to right, right to left or top to bottom). Defining terms # To better understand logical...
What YouTube does with the videos
Uploading videos to YouTube in a given format doesn't mean that's the format that will play for all users. Most of the time we don't notice but YouTube will re-encode the video we upload into multiple...
Encoding video for YouTube and web delivery
When preparing a video for uploading to YouTube, it's tempting to go to the top of the line and choose to upload the biggest or the smallest file possible and see what YouTube does with it. If you're...
Toggles in CSS
Google is prototyping an unofficial CSS Toggles specification. The specification defines a way to associate a toggleable value with an element which developers can use to select an element and...
Creating custom buttons (2): Toggle Buttons
In a previous post, we discussed what it takes to create action buttons that execute a specific action. In this post, we'll discuss toggle buttons, a special type of button that changes based on the...
Creating custom buttons (1): Action Buttons
We take a lot of what HTML does for granted and assume that whatever we throw at the browser will do the same thing. One of the earliest examples I remember is creating our own custom buttons. We will...
Color Fonts (again, with feeling)
I first saw information about color fonts in 2013 in Color fonts. Overview of the proposals for color extensions of the OpenType font format. but they haven't taken off despite Safari supporting one...
Detecting user's color preferences
There are multiple ways to handle theming an app or a site. The first one depends on whether the user has enabled light or dark mode at the operating system level. We can use prefers-color-scheme`...
Templates on web pages
Using templates in Web pages has always been complicated and always required third-party libraries like Handlebars and Moustache HTML templates, part of the web components family of specifications,...
Sanitizing HTML content
One of the biggest security issues with web applications is Cross Site Scripting (XSS). In an XSS attack, malicious code is added to HTML that we expect the browser to parse, thus rendering and...