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...
Landmarks, or what I call structural elements, help define the structure of a document and help accessibility tools like screen readers describe the content to users. The following table shows the HTML elements used to describe document landmarks, the associated ARIA roles and a description of what the landmark accomplishes. | HTML element | Implicit ARIA Role | Description | | --- | --- | --- | | aside | complementary | Shows complementary content to the main subject of the page | | footer | contentinfo | Displays information about a page. Typically that's things like copyright info, related...
When you use libraries like jQuery from CDN, you will see code like when you get the CDN link: html I've always been curious as to what is the integrity attribute, why is it there and why do we need the crossorigin attribute. This post will look at crossorigin integrity and how it can help secure web applications. Crossorigin integrity According to the Subresource Integrity Specificationhttps://w3c.github.io/webappsec-subresource-integrity/: > Sites and applications on the web are rarely composed of resources from only a single origin. For example, authors pull scripts and styles from a wide variety of services and content delivery networks,...
This post outlines my early thoughts on certifications as they relate to WordPress. I'm coming into the conversation as an instructional designer and curriculum developer and someone who has worked building curricula for certifications. I don't believe it matters if the product we're building a certification program for is open source or not. While there may be some idiosyncracies to open source products the certification should be the same as it is for commercial software in terms of rigor and how it is built. Overview: Why do we need certification In most situations, being certified means that you've mastered a...
