One of the aspects I seldom consider when building demos and applications is how to build the database that will power the CRUD application. For this post we'll use Postgresql 17 installed via Homebrew. Just like with Node, we append the version specifying it using @ and the version that we want to install. This is important because the Homebrew default version is not the latest. bash brew install postgresql@17 When starting the database we have two options. We can start it manually every time we want to use it with this command: The LCALL variable control collation settings for...
Baseline is an interesting initiative The Web Platform Developer Experience group created the baseline-statushttps://github.com/web-platform-dx/baseline-status web component to display data regarding the baseline status of a given feature. This could be useful when discussing a feature in a post since it provides a visual cue as to what major browsers supports the feature. The structure of the component is simple. It has one parameter, the feature ID for the desired feature as it's found in the web features explorerhttps://web-platform-dx.github.io/web-features-explorer/ site. The component requires one attribute, the name of the feature in the featureId attribute. The following examples show how the component...
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...
