Even outside of functional programming, Javascript provides mutable and immutable functions and methods to process data. Which one you use depends on the context of the application you're working on. In this post, we'll explore the differences between mutable and immutable objects in Javascript, and how to use them. Definitions Mutable objects : Objects whose state can be modified after they are created : In Javascript, most objects are mutable by default. This means you can change their properties, add new properties, or remove existing ones without creating a new object : This is what most people think of when...
Creating the same type of Vite-based applications is tedious and repetitive, even when it's the same Vite command. This post will cover one way to create a builder tool for Vite-based applications. It will also cover how to add utilities like Prettier, ESLint, and Playwright to the project. How The NPM inithttps://docs.npmjs.com/cli/v9/commands/npm-init command allows you initialize remote packages, like a Vite project, either from an NPM package or a GitHub repository. For eaxmple, the following command will create a new Vite project using the React template: bash npm create vite@latest my-vite-app -- --template react This command will create a new...
Now that GSAP 3.11 has been released as a free product, the GSAP Motion Path Helper plugin is available for use free of charge. This post will run through installing the GSAP MotionPathHelper plugin, and how to use it. Why a Javascript solution? Creating SVG paths is very challenging, especially when you want to create complex paths for animations or to place text on them. The MotionPathHelper GSAP plugin allows you to create complex animations with ease by providing a visual interface for defining motion paths. While I'm normally not a fan of using Javascript for animations, I've come to...
Image Magickhttps://imagemagick.org/index.php is a powerful command-line tool for image processing. It can be used to convert, edit, or compose images in various formats. I first heard of Image Magick from Phillip Greenspun's Pandahttps://philip.greenspun.com/panda/ project, which uses it to add borders and a copyright message. This post will explore ways to use Image Magick for image processing, both modifying existing images and composing new images from existing images and text. Background: What is Image Magick? ImageMagick was created in 1987 by John Cristy when working at DuPont, to convert 24-bit images 16 million colors to 8-bit images 256 colors, so they...
I read Michelle Barker's Creating CSS Theme Variables from a JS filehttps://css-irl.info/creating-css-variables-from-a-js-file/ and thought it was a great idea. I wanted to try out a simpler version that would work as a command line tool. This post will discuss how to create a command line tool that generates a CSS file with custom properties from a JS/TS module exporting a theme object. Rationale Michelle's post is a great introduction to the topic, but rather than using it as a library or including the theme data on the same script file, I wanted to create a command line tool that would...
I answered a question in Quora about the default styles for a p element. The answer is more complicated than it would first appear. There is no single default for HTML elements that are common to all browsers. This post will explore the default stylesheets for the most common browsers and show what the default styles are for a p element. Where to find the default stylesheets Before we start digging into the default styles, let's look at where to find the default stylesheets for the major browsers. The table below shows the default stylesheets for the major browsers. The...
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...
