Customizing HTML Form Validation / / No Comments Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes like required and pattern to act as very basic validation. Did you know, however, that you can control native form validation using JavaScript? validity Each form element (input, for example) provides a validity property which represents a ValidityState. ValidityState looks something like this: // input.validity { badInput: false, customError: true, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false,... more → Posted in: JavaScript Tagged with: Customizing, form, HTML, Validation
The Global Contrail Map / / No Comments Global air travel is a significant contributor to climate change. A recent study revealed that aircraft contrails contribute over half of the sector’s global warming impact. The study shows how contrails (the icy clouds that form in the wake of aircraft) effectively trap heat in the atmosphere, heat which would otherwise be released into space.The Contrail Climate Initiative’s Contrail Map Maps Mania… more → Posted in: Interactive Maps Tagged with: Contrail, global
5 Web Design Trends for 2023 That You Should Pay Attention To (Sponsored) / / No Comments The start of a new year is usually a time when we start looking for ways to make something a little better. That something could be our life, work, or what we produce. Web designers, for example, might look for ways to make their designs more interesting or effective. In this post we will focus on 5 web design trends that are designed to help users get the most from the websites they visit and we will use 10 pre-built websites from BeTheme to demonstrate how best to implement those trends . BeTheme is one of the world’s most popular and highly-rated WordPress Themes with 268,000+ sales and a 4.83/5 star-rating. 5 new web design trends for 2023 To improve anything, you have to know what it does... more → Posted in: JavaScript Tagged with: 2023, Attention, design, should, Sponsored, Trends
Forever Chemicals in Freshwater Fish / / No Comments A new study by the Environmental Working Group (EWG) has found harmful levels of PFAS in freshwater fish throughout the United States. The study measured the harmful levels of ‘forever chemicals’ in freshwater fish collected across the United States. PFAS are known as ‘forever chemicals’ because they never break down in the environment. They have entered freshwater bodies across the United Maps Mania… more → Posted in: Interactive Maps Tagged with: Chemicals, Fish, Forever, Freshwater
A Simple Slideshow Web Component / / No Comments As I continue to play around with and learn more about web components, I thought I’d build a simple component to make it easier to add a slideshow. By that, I mean something that renders one picture but provides controls to go to more images. I’ve probably built this many times in the past, both in JavaScript and server-side code, and I thought it would be a nice candidate for a component. As with most of my demos so far, there’s a lot more that could be done with it, but I thought I’d share what I have so far. Once again I want to give a shout-out to Simon MacDonald for helping me get this code working. (At the end of the post, I’ll share the mistake I made, as... more → Posted in: JavaScript Tagged with: Component, simple, Slideshow
fetch with Timeout / / No Comments A few years back I wrote a blog post about how write a fetch Promise that times out. The function was effective but the code wasn’t great, mostly because AbortController , which allows you to cancel a fetch Promise, did not yet exist. With AbortController and AbortSignal available, let’s create a better JavaScript function for fetching with a timeout: Much like the original function, we’ll use setTimeout to time to the cancellation but we’ll use the signal with the fetch request: async function fetchWithTimeout(url, opts = {}, timeout = 5000) { // Create the AbortController instance, get AbortSignal const abortController = new AbortController(); const { signal }... more → Posted in: JavaScript Tagged with: fetch, Timeout
A Dialect Map of England / / No Comments The University of Leeds’ Dialect and Heritage Project has released a Sound Map of English dialects. The map features archived audio recordings of native English speakers from the different regions of England. In the 1950s and 1960s the Survey of English Dialects undertook to complete a survey of the regional dialects of England. The survey was conducted in over 300 different towns and villages. Maps Mania… more → Posted in: Interactive Maps Tagged with: Dialect, England
Followup to My Intl Short Number Post / / No Comments A few days ago I shared a blog post about using the Intl object in JavaScript to create short, more readable numbers. So for example, instead of 9123456, it would display 9.1M. This was done using the notation option in Intl.NumberFormat. Yesterday I randomly ran into an interesting modification on this using yet another option, compactDisplay. The compactDisplay option is only used when notation is set to compact. It supports two options, short which is default and what I demonstrated in the previous post, and long. So given a number, i, you would use it like so: new Intl.NumberFormat('en-US', { notation:'compact', compactDisplay:'long'}).format(i); And the result is, well, longer. 😉 What’s... more → Posted in: JavaScript Tagged with: Followup, Intl, Number, Post, Short