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 gives web developers low-level access to the individual frames of a video stream and chunks of audio. Many Web APIs, like the WebAudio and WebRTC, use media codecs internally. However they don't allow developers to work with individual frames of a video stream and unmixed chunks of encoded audio or video. Web developers have typically gotten around this limitation using WebAssembly in order to get around this...
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 complex processes, I realized that streams are a great way to handle files without knowing the size of the file in advance. Readable Streams The most basic readable stream example in Node does the following 1. Import createReadStream from the fs module 2. Capture the name of the file as the second CLI argument 3. If we didn't pass a parameter log...
The attrhttps://developer.mozilla.org/en-US/docs/Web/CSS/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 customize the page's content. Like data attributes these are stored in the HTML document itself. Unlike custom properties defined with the @property at-rule, the value cannot be customized. With this HTML html Mozilla makes browsers, apps, code and tools that put people before profit. css blockquote::after { display: block; content: ' source: ' attrcite ' '; color: hotpink; } As it currently works, the functionality...
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 bottom. On the web, this also means that the content will be displayed in the order it appears in the DOM. This is how most assitive technology also works. For example: screen readers will "speak" the content in document order. However when we work with Flexbox and Grid layouts, we can change the order of part or parts of the document without changing the...
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 the history of embedded content on the web, the video element in detail and some tricks and possible drawbacks using the same codecs that we used in the previous post. The Early Days In the early days of the web we depended on plugins to encode the video and the embedhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed and objecthttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/object elements to actually embed the content on web pages. While...
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...
