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...
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,...
