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:...
Working with international websites can be challenging since there are many aspects that we need to address. This post will cover a simple way to add internationalized messages available in multiple languages. It will also adress pontential alternatives and enhancements. The Code I've broken the code into three sections. We define the international strings in an external JSON file languages.json. For each of the languages that we want to use, we define each string that we want to translate. The names must be the same in all the languages since we'll use them in the script below. json { "en":...
Destructuring is an alternative way to assign properties from an objecct or array. The traditional way to assign items to an array is using bracker notation. This example sets constatn to specific values found on the array. js const myArray = "blue", "red", "rebeccapurple", ; const firstElement = myArray0; const secondElement = myArray1; const thirdElement = myArray2; Using destructuring, we can assign values from an array directly into a variable. We can also assign more than one value at a time. This example is equivalent to the previous one but uses destructuring assignments to assign all three properties at the...
Most of the time I create a pen in Codepenhttps://codepen.io to validate the code I'm working with. I've found myself constantly repeating the same CSS and the same HTML multiple times. It gets tiresome and it can lead to errors. Codepen allows you to create template pens that you can then use to create new pens based on it. This post will cover how to create a template pen, what to put in it and how to create new pens based on the template. Setting Default Styles The first section we'll deal with is CSS. This post takes the reset...
