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 are currently available for web delivery and some upcoming codecs An encoding ladder example Examples of one-pass and multi-pass encodings with the codecs we discuss in the post This post is heavily influenced by the work of Jan Ozer. Unlike Jan's posts, it will not go into deep details of compressing each with each codec. If you're interested in those areas of compression I suggest you look at...
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 DOM. The syntax is simple. Any attribute on any element whose attribute name starts with data- is a data attribute. Say you have an article and you want to store some extra information that doesn't have any visual representation. html Article Title Article Content JavaScript access Reading the values of these attributes out in JavaScript is also very simple. You can use getAttribute with their full HTML name to read them,...
!Who gets the job?https://i0.wp.com/css-tricks.com/wp-content/uploads/2019/01/jobbs.png?ssl=1 In 2019, Chris Coyier wrote The Great Dividehttps://css-tricks.com/the-great-divide/ where he discusses the differences between different types of front end developers. This post will explore the great divide: what is it, are we still experiencing it, what makes the issue more complicated than what we think and where to go from where we're at right now. What is the great divide? In this context the divide refers to people who have the same job title, front end developer but with very different skill sets. Paraphrasing Chris' articlehttps://css-tricks.com/the-great-divide/: On one hand, we have a group of developers whose...
In episode 629 of Shoptalkhttps://shoptalkshow.com/629/ Davehttps://x.com/davatron5000 and Chrishttps://x.com/chriscoyier had an interesting discussion about Design ain’t a democracyhttps://robinrendle.com/notes/design-aint-a-democracy/ an article by Robin Rendle, published in July 2024 and Miriam Suzanne's We don’t need a boss, we need a processhttps://www.miriamsuzanne.com/2024/08/08/vision repsponse. Whenever I think of the concept of a dictator in a software development community I think about Guido van Rossum, the BDFLhttps://en.wikipedia.org/wiki/Benevolentdictatorforlife Benevolent Dictator For Life in the Python world the fact that Guido stepped down from his BDFL positionhttps://lwn.net/Articles/759654/ is only partially relevant for the purpose of this post since a steering council took over the jobs of the position....
In macOS we have a few disadvantages when it comes to software version management. The good thing is that macOS developer tools do come with versions of Python and other software bundled as part of the X-Code comand line tools. The bad part is that those versions are not updated often and we can't update them manually. If you want to update Python, for example, you must do it manually, or use a package manager like Homebrewhttps://brew.sh/. However, Homebrew presents a different set of problems. The specific case is this: I installed Jupyterhttps://jupyter.org/ via Homebrew. That worked without problems. I...
Javascript has access to the conditional CSS tools that we have to work when working directly with CSS. This post will cover matchMedia script support for media queries and CSS.Supports programmatic access to CSS' @supports at-rule. We will also discuss some reasons why would you want to use these Javascript functions rather than doing it straight in CSS. When working with CSS in JS, you can leverage these methods as one-time events or inside a changehttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/changeevent event listeners to trigger new tests if the media query matches or not when building interactive web content or we're not certain of what...
The PageVisibility API lets your application know when a page is visible to the user. While this information may seem irrelevant it enables the creation of Web pages that behave differently when they are not being viewed. For example: You can throttle or pause data-intensive activities like data updates when the page is not visible You can pause video/audio content until the user displays the page again You can choose to have your application display notifications to the user only when the tab/window is hidden from view You can choose to pause animations and automatic actions like carrousel navigations until...
What browsers should we support? This is an interesting question: What browsers should we support? This is a deceptively simple question to ask and even harder to answer. This post will try to address this question along with different ways to address browser support issues. Why browser versions don't work We used to say that supporting the last two versions of major browsers was enough to cover our bases. But that is not enough. Unlike the times of monolithic, month-long development cycles, browsers are updated monthly and may or may not contain all the latest CSS and Javascript features. The...
Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to have this post as a reference. Explicit positioning With the following HTML: html 01 02 03 04 05 06 07 08 09 10 This CSS lays out the grid with six equal columns; it repeats the 1frhttps://css-tricks.com/introduction-fr-css-unit/ value 6 times when defining the columns with grid-template-columns. css .container { width: 60vw; inline-size: 60vw; display: grid; grid-template-columns: repeat6, 1fr;...
We can control the color schemes for light and dark modes through CSS using the prefers-color-scheme media query. These media queries will match the system's color scheme and will allow us to select what colors to use when on each mode. The two possible values for prefers-color-scheme are: light and dark. In the first example below, the default is the light color scheme so we define a dark color scheme inside the media query. css { background: oklch85.05% 0.049 84.53; color: oklch40.9% 0.105 43.91; } @media prefers-color-scheme: dark { { background: oklch47.78% 0.067 65.07; color: oklch85.46% 0.03 67.41; outline: 5px...
