Mozilla posted a notehttps://developer.mozilla.org/en-US/blog/h1-element-styles/ about upocoming changes to how the h1 elements are displayed in browsers. The changes are intended to improve accessibility and consistency across different platforms. The post will cover the issue, the proposed change and how it may affect your web pages. The issue The HTML spec used to define an outline algorithm that gave h1 elements an implicit semantic heading level based on how many sectioning elements section, aside, nav, and article it was nested inside. The code in the browsers' default stylesheets looked like this. I've removed the :is pseudo-class repetition for clarity css /...
Pub/Sub is a messaging pattern that allows for asynchronous communication between different parts of a system. This post will explore PubSub, what it is, how it works, potential use cases, and how to implement it in a simple web application using WebSockets. What is Pub/Sub? Pub/Sub is an asynchronous and scalable messaging service that decouples services producing messages from services processing those messages. Pub/Sub lets you create systems of event producers and consumers, called publishers and subscribers. Publishers communicate with subscribers asynchronously by broadcasting events, rather than by synchronous remote procedure calls RPCs. Publishers send events to the Pub/Sub service,...
Adaptive video streaming is a technique used to deliver video content over the internet in a way that adapts to the viewer's network conditions and device capabilities. This approach ensures a smooth playback experience by dynamically adjusting the video quality based on the available bandwidth and processing power. This post will discuss what is DASH, how it works and how to use DASH on your pages with Shaka Player and how to generate DASH content with Shaka Packager. DASH Overview Dynamic Adaptive Streaming over HTTP DASH is a protocol that specified how adaptive content should be fetched. It is effectively...
A few years ago I wrote a post about how to add speech to form interactions. Inspired by a blog posthttps://blog.pamelafox.org/2024/12/add-browser-speech-inputoutput-to-your.html by Pamela Fox, I want to revisit this strategy and enhance it with additional techniques and technologies. What is the problem? Additional forms of feedback can help improve usability and accessibility. For example, we can use audio feebdack when a form field is left empty or when fields are too short. This is especially useful for users with disabilities, such as visual impairments, who may not be able to see the error messages. We can also use speech recognition...
The User Timinghttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceAPI/Usertiming API allows you to measure the performance of your web application. It provides a simple way to create custom metrics that you can use to measure the performance of your application. In this post, we'll look at what is the User Timing API, how you can use it to instrument your code, how you can and measure the performance of your web application. What is the User Timing API? The browser adds information performance entries to the browser's performance timeline including entries provided by the Resource Timing APIhttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceAPI/Resourcetiming that determine the time it takes to fetch a...
I first started playing with web content in 1994 while in college. Over the years I've see most major changes in web development. From the early days of HTML-only sites, to CGI for server-side processing, to Javascript, Ajax, and many other libraries and frameworks, to AR/VR to now AI. In this post I will try to present a brief history of frameworks and address my views on frameworks and their issues, and why I think we should be careful with AI as it exists at the time of this writing. Prehistory: Before Javascript The earliest server-side programming was done with...
One of my favorite things to see on the web are curved paths with text on them... how to create irregular text paths and laying out text on them. This post will discuss how to create text on a path using SVG, the advantages and disadvantages of using SVG for this purpose, and how to animate the text along the path. Creating Text on a Path Creating text on a path in SVG is straightforward. You define a path using the element and then use the and elements to place the text along that path. In the element we use...
Promises have been around since 2015 and are a powerful way to handle asynchronous code in Javascript. They allow you to write cleaner, more readable code by avoiding callback hell and making it easier to handle errors. Newer methods are introduced periodically to improve the functionality of promises, and the async/await syntax has made working with promises even easier. In this post, we'll take a deep dive into how promises work, their methods, and provide a reference for these methods. We'll also look at the async/await syntax and how it can be used to simplify promise handling. Basic promise support...
Functional programming is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. This post will explore basic concepts of functional programming and how you can apply them in Javascript. Primitives Primitives are all datatypes that can hold only one value at a time. JavaScript has 7 primitive data types. string : Represents text. number : Represents numerical values. boolean : Represents true or false. undefined : Indicates a variable has not been assigned a value. null : Represents an intentional absence of any object value. Symbol : Creates unique identifiers. BigInt...
The attrhttps://developer.mozilla.org/en-US/docs/Web/CSS/attr function allows you to use the value of an HTML attribute in your css. It has been around for a while, but it was limited to using the value of an attribute as a string. The following example uses the value of the data-color attribute to set the background color of a div element: css div { background-color: attrdata-color; } There is a problem. attrdata-color is always parsed as a string, and could only ever be referenced as a string value and used in the content property of a pseudo element. There has been new functionality introduced recently...
