One of the first things that caught my attention when ES2015 was first released in 2015 were promises. They provide a nice alternative to callbacks and made the code easier for me to reason through. In 2017 TC39 the group in charge of Javascript standardization added async/await, a way to make promise code easier to read and reason through, to the ECMA262 specification, essentially writing promise-based asynchronous code as it was synchronous blocks of code that, as developers, we're already familiar with. The idea sounds simple enough but I always trip on the execution. This post is my attempt at...
The Wakelock API presents a way to prevent devices from dimming or locking the screen when an application needs to keep running. For example: Applications like Art Space Tokyohttps://read.artspacetokyo.com/ would benefit from the browser not going to sleep while using maps to reach the different art spaces and museums discussed in the book. Recipe applications would benefit from the screen not going to sleep while you work on the recipe with dirty hands. Looking at the code We first create a variable to hold the status of the wakeLock request. we default it to null since the request hasn't been...
In previous posts we've looked at the theoryhttps://publishing-project.rivendellweb.net/video-on-the-web-part-1-the-theory/ behind the different formats and codecs you can use for your videos and how to encode videohttps://publishing-project.rivendellweb.net/video-on-the-web-part-2-encoding-video/ for use on the web. This post will cover the HTML necessary to embed a set of theoretical videos that we encoded for the project. 1. MP4 container, AV1 video, and Opus audio 2. WebM container, VP9 video, and Opus audio 3. MP4 container, x264 video, and AAC audio 4. OGG container, OGG video, and Vorbis audio Building the element The basic element embeds and plays video a single version of the video. It also...
In Video on the web part 1: The theoryhttps://publishing-project.rivendellweb.net/video-on-the-web-part-1-the-theory/ we discussed the theory of video on the web, what containers, audio and video codecs are available and what browsers support them. This post will discuss more practical aspects of creating and using video on the web. A follow up post will discuss using the element to embed videos on web pages. This post will not cover DASH or HLS videos. Encoding the video Once we've decided what container and codecs to use, the next step is to create the video or videos that we will use. To encode the video...
When working with video on the web using the <video> element there is an important detail that many developers and people writing web content forget. MP4, WebM, and AV1 are containers and they can have many different audio and video codecs inside; browsers may not and most likely will not support all audio and video combinations for all containers. I first became aware of this when working with MP4 files. An MP4 container can contain many different codecs for audio and video and browsers may or may not support all those different combinations. WebM containers have the same issue. There...
Intersection observers are native Javascript API that allows developers to trigger events or behaviors when content comes into or goes out of the viewport. I find it particularly interesting as a starting point to do more complex work where we want to wait until the item we're working with becomes visible on screen. For example, if we want all the images on a page to slowly appear as the page is loaded with animations then it makes sense to wait for the individual images to appear in the browser's viewport before we trigger the animation. The process has two components,...
The previous post on why we still need custom CSS in WordPress was getting a little long so I made a second post to cover some additional features that are not available in the Gutenberg editor as of the time this post was written December 2022. It is also good to reiterate that these features are meant for bespoke designs or designs where the features are relevant to the design. Not all sites need alternate character sets with swatches or table numbers. If you find yourself reaching out for these tools for every project, perhaps it's time to rethink whether...
Since the release of Gutenberg as the content editor, and now full site experiences, WordPress has moved to using default styles and the theme.json configuration to manage styles for your theme. There are times when this is not enough since there are things that you can't do in the editor. If you're working on bespoke sites or sites using animations and specific font features you will need finer control than what the editor provides. The post will cover some of these areas and why using CSS or Javascript is the better solution. OpenType Features OpenType fonts provide a series of...
With flexbox and grid supported in all major browsers, I see variations of these questions asked a lot: what should I use, flexbox or grid? or which one is better flexbox or grid? The question is deceptively simple, the answer is anything but. The answer is: It depends. Grid and flexbox serve different purposes. Flexbox Flexbox works on one axis, either rows or columns but not on both axes at the same time. Whether it's a row flexbox layout css .wrap { display: flex; flex-flow: row wrap; } Or a column flexbox layout css .wrap { display: flex; flex-flow: column...
I've finally given in to working with TypeScript despite some of my misgivings about the technology. My misgivings include: The need to set up a transpiler toolchain You can't run the code directly in the browser You have to decide on what version of Javascript to transpile the code to. This decision will be hardcoded in the Typescript configuration file We'll look at the setup and configuration of a Typescript project, along with some gotchas I've learned along the way. These instructions assume you've initialized a package.json file. Installing Typescript You have two options to configure Typescript. You can install...
