Publishing NPM modules has become progessively more complex over time go figure. We now have to contend with ESM versus Common JS, Typescript versus Javascript, setting a default module type, and other considerations. The first decision is to use Typescript as my development language to ensure type safety. There is additional items that need to be added to package.json in order for it to work with common.js and ESM. Finally, we'll discuss different tools available to make the process easier. Setting Up And Writing The Code The first step is to initialize an empty package.json file: bash npm init --yes...
One of the biggest issues I have when using CSS background images, is that we can't add alt text to images used as background image sets. a new feature has become newly available in Baselinehttps://webstatus.dev/features/alt-text-generated-content that fixes this problem, enabling alt text for images used in CSS. For example, all external links that contain the string "wikipedia" are considered external links pointing to Wikipedia content in whatever language the content is created in so we append a Wikipedia icon to all these links. css ahref="archive"::after { content: ""; inline-size: 20px; block-size: 20px; margin-inline-start: 10px; background-image: url"https://assets.codepen.io/32795/ia-logo.svg" / "Internet Archive"; display:...
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 languages. It will also adress pontential alternatives and enhancements. The Code I've broken the code into three sections. We define the international strings in an external JSON file languages.json. For each of the languages that we want to use, we define each string that we want to translate. The names must be the same in all the languages since we'll use them in the script below. json { "en":...
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 values found on the array. js const myArray = "blue", "red", "rebeccapurple", ; const firstElement = myArray0; const secondElement = myArray1; const thirdElement = myArray2; Using destructuring, we can assign values from an array directly into a variable. We can also assign more than one value at a time. This example is equivalent to the previous one but uses destructuring assignments to assign all three properties at the...
Most of the time I create a pen in Codepenhttps://codepen.io 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 to errors. Codepen allows you to create template pens that you can then use to create new pens based on it. This post will cover how to create a template pen, what to put in it and how to create new pens based on the template. Setting Default Styles The first section we'll deal with is CSS. This post takes the reset...
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...
