One of the things I've always appreciated learning about writing Javascript is to code defensively. Defensive coding or defensive programming,is the practice of eliminating assumptions in the code, especially when it comes to handling information in and out of other routines. Write Better CSS By Borrowing Ideas From JavaScript Functionshttps://www.smashingmagazine.com/2023/04/write-better-css-borrow-ideas-javascript-functions/ provides ideas and solutions for writing defensive CSS. I'm starting from a different place. How can we reduce code repetition and how can we keep ourselves honest when writing CSS? I will use the CSS Properties and Values Level 1 APIhttps://drafts.css-houdini.org/css-properties-values-api/ Houdini CSS Variables as an example of how we...
Dynamic imports have been around for a while but it wasn't until recently that I started looking at the API since it seems to answer a question I've had for a while: How to lazy load Javascript modules at run time without making things unnecessarily difficult for me as a developer. This post will explore one possible way to answer the question I originally asked. We will also look at the difference between the current, static, way to import modules and dynamic, function-like, imports, and some additional uses for the syntax. The way we've always done it In most scripts...
In an Deep Dive Into color-mixhttps://publishing-project.rivendellweb.net/deep-dive-into-color-mix/ I used color-mix to lighten and darken colors. There is another technique to accomplish the same task: relative color syntax. Relative color syntax allows us to manipulate and convert any color to any format. We can use it to create a color palette from any chosen color To make things easier, we'll store both the base color and the relative colors based on it in custom properties. The syntax looks like this: css :root { background: labfrom var--theme-primary 10% a b; } in this example we see the following elements: lab indicates the color...
This is what we're used to do when working with media queries. We use and and or to represent logical comparisons. This example matches viewports that are 30em or larger. css @media screen and min-width: 30em { .element { / Styles go here/ } } It gets more complicated when you're working with multiple, simultaneous, conditions. This query will match when the viewport width is between 30em and 80em larger than 30em and smaller than 80em css @media screen and min-width: 30em and max-width: 80em { .element { / Style away! / } } Media Queries Level 4 introduced the...
When the Node team marked their test runnerhttps://nodejs.org/api/test.html stable in Node 20.0, it reignited my interest in testing code in general and, potentially, in test-driven developmenthttps://en.wikipedia.org/wiki/Test-drivendevelopment This post will cover my experiments with testing using Node's built-in test runner and the Chaihttps://www.chaijs.com/ assertion library with the Chai as promisedhttps://www.chaijs.com/plugins/chai-as-promised/ plugin to better handle promises. Running tests I'm still learning the Chai API and the different ways to run tests. Some of these exercises are trivial, meant to get comfortable with the technology. Others are examples of how to test against external APIs... while WordPress may be overkill, it shows how...
One of the hardest things for me to do when writing is to avoid jargon or assume that everyone will understand what I mean. In Dealing with Technical or Professional Jargonhttps://www.nngroup.com/articles/technical-jargon/, the author presents an interesting analysis of jargon in technical documents. The first consideration that I find interesting is that jargon is defined by the audience reading the document. In other words, do they understand the term? !Should we use Jargon diagram. Taken from Dealing with Technical or Professional Jargonhttps://www.nngroup.com/articles/technical-jargon/https://res.cloudinary.com/dfh6ihzvj/image/upload/cscale,w500/fauto,qauto/should-we-use-jargon-1 So how do we address jargon on our pages? It all starts with the users. Who is your audience?...
In Speech Synthesis API: computer talkshttps://publishing-project.rivendellweb.net/speech-synthesis-api-computer-talks/ I looked at how to use the Text To Speech portion of the Web Speech APIhttps://wicg.github.io/speech-api/ to enhance error messages in web forms. Since I wrote that the speech portion of the API is now supported in all major browsers so we can take a deeper look at two specific cases where the speech portion of the Web Speech API may be useful. Audio feedback for forms The first example revisits the original idea of providing audio cues for form validation errors in addition to visual cues. The example uses the following HTML: html...
One of the biggest pains of working with Node is when either a library you're working with is pinned to a specific version of Node or you must pin your project to a specific version because one or more dependencies will not work in versions after the specified one or so the developers of the library say. This can happen in one of two ways. The supported versions are included in the engines section of the package.json file as an advisory are included in a .nvmrc file Even though neither of these options will stop you from running the package...
Javascript import maps provide a mapping between local names and external modules. Using Import Maps is a two-step process. First, you create a script with a type="importmap" attribute to create the mappings. html { "imports": { "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js" } } You can also reference files in the project's nodemodules folder. html { "imports": { "lodash": "/nodemodules/lodash-es/lodash.js" } } Furthermore, we can map multiple modules inside the path that we're mapping to. For example, lodash has many modules living under the lodash module. We can use a slash after the map to indicate that we also want the content inside the...
With the release of Node 20, the team introduces an experimental permissions API. There are two types of permission available with this version of the API: - Module-based permissions control which files or URLs are available to other modules during application execution - Process-based permissions control the Node.js process's access to resources. The resource can be entirely allowed or denied, or actions related to it can be controlled The API provides an additional layer of security. I hope that once the API is marked as stable the API would be restrictive by default, like Deno's permission system. In this post,...
