JavaScript
JavaScript is a programming language which is widely used, especially on the web. I mostly use it to add interactivity to web pages, although I have used frameworks like React and Next.js to build more complex interfaces in my day job.
Testing date formatting with date-fns-tz and different timezones
Override the
TZenvironment variable in your tests.Linking to text fragments with a bookmarklet
I’ve written a bookmarklet that helps me link to specific text on a web page.
Don’t nest a
<Script>in a<Head>with Next.jsIf you do, the rendered page won’t include the script anywhere.
Discard a variable in a JavaScript object spread by assigning it to
_Listen for the
popstateevent to see when the user clicks the “back” buttonMore generally, it fires whenever the user is navigating the session history.
console.log()holds a reference to an object, not a copy of itWhen you view an array/object with
console.log(), you see the contents at the time you expand it, not as it existed when you calledconsole.log().Localising the
<time>with JavaScriptI’m using the
<time>element and some JavaScript to display timestamps as human-readable, localised timestamps. Something likeTue, 15 Apr 2025 at 20:45 BSTis easier to read than2025-04-15T19:45:00Z.Disable JavaScript in an
<iframe>by setting thesandboxattributeHow to parse URLs in JXA
Sort a list of DOM elements by sorting and calling
appendChild()Use Unicode property escapes to detect emoji in JavaScript
Preserving Dates during JSON serialisation with vanilla JS
How to make sure you get a
Dateback when you callJSON.parseandJSON.stringify.Testing JavaScript without a (third-party) framework
The browser can be a pretty good place to run your JavaScript tests.
CSS formatting in the console
Did you know you can use
%cto format yourconsole.logmessages?Getting an Important Internet Checkmark to follow your cursor
Party like it’s 1996! A trailing checkmark cursor will make your Brand Website feel fun and authentic.
Redacting sensitive query parameters with koa and koa-logger
Using a custom transporter to modify the log message and remove secret information.
Finding redundant data in our Next.js props
A script that helps us optimise our
__NEXT_DATA__, which in turn helps reduce page size.Remembering if a <details> element was opened
A JavaScript function that remembers if a details element was reopened, and keeps it open when you reload the page.
Showing human-friendly dates in JavaScript
What’s a nicer way to show a date than an ISO 8601 timestamp?
Manipulating URL query parameters in JavaScript
Adding checkboxes to lists
A bookmarklet to add checkboxes to lists in the browser.