This post is a continuation of the last post about Javascript events. It will give a partial list of events available to Javascript browsers, whether they bubble up to parent chain and a brief description. Knowing whether an even bubbles or not is important since it may change the way you write code. The first block of events are triggered in the window or document objects. | Event | Bubbles | Description | |:---: |:---: | --- | | Window/Document Events ||| | load | No | Fired when the whole page including external resources is fully loaded. | |...
These components are under development and they may change without notice. If the current version of the components meets your needs you may want to pin to the specific version you're currently using. This may also mean hosting your own version of the library Working in blog updates and ideas for future projects I started looking at web components as an alternative to manually updating code for each type of component I want. These are likely not the only options for what I want to do but are the one I'm evaluating at the time of writing. color.js Color.js elementshttps://elements.colorjs.io/...
We can use special types of parameters to protect ourselves when writing code. This post will cover two defensive coding strategies: default parameters and what I call sibling parameters. Using default parameters protects us from getting errors with our code when we forget to add the parameters or we forget to add the right number of parameters. In this function we've set up default values for each parameter. Default Parameters When we use default parameters we assign values to the parameters when we create the function. In the example function we assign values to each parameter. js function multiplya =...
Most of the time I work with ES Modules as a consumer, only using the import side of the equation. However there is another side to modules when working in creating reusable code libraries. This post will cover module exports, the different elements we can export and why they are important. What are exports? The export declaration is used to export values from a JavaScript module. Exported values can then be imported into other programs with the import declaration or dynamic import. The value of an imported binding is subject to change in the module that exports it — when...
In Using Sliders in Javascripthttps://publishing-project.rivendellweb.net/using-sliders-in-javascript/ we saw how we can use sliders to control aspects of a user interface. This post will expand on the content from the previous post and build a full configuration panel for a long-form reading application. We'll look at what elements we should customize, how to customize them and finally, provide a script that accomplishes the customization. What to customize Text and background colors : Think of dark mode : It may be good to provide preset color combinations in addition to let users create their own, maybe with a select menu : Input type...
When doing interactive demos or building preferences panels we may need to create sliders to set values for the associated properties. This post will cover how to configure an HTML slider and how to read the data from Javascript to change portions of the page. First we define a range inputhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range we'll use to change the width of a target element. html Width: The Javascript portion of the code does two things. First it captures references to the slider and the target element element with container class. js const slider = document.getElementById'theWidth'; const container = document.querySelector'.container'; Next,we add an inputhttps://developer.mozilla.org/en-US/docs/Web/API/Element/inputevent...
A while back I came across Firefox on the brink?https://www.brycewray.com/posts/2023/11/firefox-brink/. In the article, the author wonders if we're seeing the final decline of Firefox. According to the article, the US Web Design System provides a set of standards and guidelines for US Federal Government websites. Part of these guidelines include browser support: > The current major version of the design system 3.0.0 follows the 2% rulehttps://gds.blog.gov.uk/2012/01/25/support-for-browsers/: we officially support any browser above 2% usage as observed by analytics.usa.govhttps://analytics.usa.gov/. > > Source: Browser Supporthttps://designsystem.digital.gov/documentation/developers/browser-support-2 When the article was written 10/15/2024 Firefox usage was 1.9% in the last 30-day period. What happens...
In addition to black and white or single, solid-color text, we can also use gradients to color the text. The process is slightly more complicated than just assigning color to the desired element. We wrap the selector in a feature query for background-clip: text. This feature will only work if the feature is supported. Set the color of the element to transparent so the background will show through. Then define the gradient for the color with as many stops as you want and in whatever color space works best for your project. Newer color spaces like OKLCH are supported across...
Publishing NPM modules has become progessively more complex over time go figure. We now have to contend with ESM versus Common JS, Typescript versus Javascript, setting a default module type, and other considerations. The first decision is to use Typescript as my development language to ensure type safety. There is additional items that need to be added to package.json in order for it to work with common.js and ESM. Finally, we'll discuss different tools available to make the process easier. Setting Up And Writing The Code The first step is to initialize an empty package.json file: bash npm init --yes...
One of the biggest issues I have when using CSS background images, is that we can't add alt text to images used as background image sets. a new feature has become newly available in Baselinehttps://webstatus.dev/features/alt-text-generated-content that fixes this problem, enabling alt text for images used in CSS. For example, all external links that contain the string "wikipedia" are considered external links pointing to Wikipedia content in whatever language the content is created in so we append a Wikipedia icon to all these links. css ahref="archive"::after { content: ""; inline-size: 20px; block-size: 20px; margin-inline-start: 10px; background-image: url"https://assets.codepen.io/32795/ia-logo.svg" / "Internet Archive"; display:...
