I wanted to change the layout of [my blog](https://simonwillison.net/) on mobile screens such that the content from the "Elsewhere" right hand column combined with the main column in the correct order
A few notes on JavaScript `Date` object, based on trying to do some basic things with them in Observable notebooks.
## Parsing ISO format strings into a Date object
I had date times that looked like
I had to figure this out while building [datasette-copyable](https://github.com/simonw/datasette-copyable/) - demo [here](https://covid-19.datasettes.com/covid/ny_times_us_counties.copyable?state=Texa
indiana-university/when-elements: Callbacks for when elements are added or removed from the DOM.
Callbacks for when elements are added or removed from the DOM. - indiana-university/when-elements: Callbacks for when elements are added or removed from the DOM.
Getting To Know The MutationObserver API — Smashing Magazine
Monitoring for changes to the DOM is sometimes needed in complex web apps and frameworks. By means of explanations along with interactive demos, this article will show you how you can use the MutationObserver API to make observing for DOM changes relatively easy.
Promises are arguably one of the trickiest concepts to grasp in the javascript world, and even if you know how to use them, it’s difficult to explain how they actually work.
This FAQ style tutorial is meant for both beginners and intermediates in the world of promises. If you’re a beginner and have trouble grasping what a promise even is, then go on ahead and start from the first question.
Inline validation in web forms is useful when it works, but frustrating when it fails. Too often it leads to an endless stream of disruptive error messages or dead-ends without any chance of getting out. Let’s fix it.
JavaScript APIs You Don’t Know About — Smashing Magazine
In this article, Jaun Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see what they are, where we should use them, and how to use them.
The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the fetch() or XMLHttpRequest.send() method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
Removing jQuery from GOV.UK was a huge yet manageable task that led to improved code and performance gains across the site. This is how and why we did this work.
This week, we looked at how to create custom events with vanilla JS, and a helper function to make things a bit easier. Today, we’re going to look at different naming conventions for custom events.
To help prevent naming collisions, it’s a good idea to prefix custom events with your library or project name.
// Namespaced to the Calculator library emit('calculator-add'); One common naming convention is kebab-case.
// kebab-case naming emit('calculator-add'); Another convention is to put a colon (:) between the library name and the event type.
JavaScript provides developers with a way to emit custom events that developers can listen for with the Element.addEventListener() method.
We can use custom events to let developers hook into the code that we write and run more code in response to when things happen. They provide a really flexible way to extend the functionality of a library or code base.
Today, we’re going to learn how they work. Let’s dig in!
Modern Javascript: Everything you missed over the last 10 years
JavaScript has come a long way since I knew it as the “D” in DHTML. For anyone like me, who’s been reluctant to use the latest syntax that could require polyfills or a transpiler, I’ve written this cheatsheet to get you caught up on all the goodness that’s widely supported in modern browsers.
Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick: const restartAnimations = ($el) = { $el.getAnimations().forEach((anim) = { anim.cancel(); anim.play(); … Continue reading "JavaScript: Restart all Animations of an Element"