JavaScript: What is the meaning of this?

Jake Archibald: JavaScript’s this is the butt of many jokes, and that’s because, well, it’s pretty complicated. However, I’ve seen developers do much-more-complicated and domain-specific things to avoid dealing with this this. If you’re unsure about this, hopefully this will help. This is my this guide. JavaScript: What is the meaning of this? →

Needledrop: A Turntable Interface for Music Playback

Leveraging the JavaScript YouTube Player API and with a good pinch of CSS on top, Thomas H. Park created this record player for you to play with. Drop the needle and find your favorite track, more or less. It’s fuzzy and inexact, and emphasizes the continuous listening experience an album can be. Clever usage of …

Formatting a Date in JavaScript with Intl.DateTimeFormat

Phil Nash walks us through using Intl.DateTimeFormat to format a Date to a specific timezone and format. const shortcutFormatter = Intl.DateTimeFormat("en-AU", { timeZone: "Australia/Melbourne", timeStyle: "long", dateStyle: "short" }); shortcutFormatter.format(date); // => "22/2/21, 5:05:52 pm AEDT" How to display dates in your user’s time zone with the Intl API → Related: Think you know a …

Control the behavior of JavaScript imports with Import Maps

Shipping in Chrome 89 are Import Maps, which allows control over what URLs get fetched when importing modules. Let’s take a look at this very welcome addition. When importing ES Modules (on the web), you need to refer to them using their full filenames or URLs: import moment from “/js/moment/moment.js”; import { partition } from …

JavaScript performance beyond bundle size

Nolan Lawson, on how we might focus too much on JavaScript bundle size: Performance is a multi-faceted thing. It would be great if we could reduce it down to a single metric such as bundle size, but if you really want to cover all the bases, there are a lot of different angles to consider. …

Before You React.memo()

Dan Abramov shares 2 techniques to try before resorting to optimize with React.memo() In this post, I want to share two different techniques. They’re surprisingly basic, which is why people rarely realize they improve rendering performance. These techniques are complementary to what you already know! They don’t replace memo or useMemo, but they’re often good …

Easily see the JavaScript Keyboard Event KeyCodes with keycode.info

Handy helper tool by Wes Bos: simply press any key and see the results for KeyboardEvent.which, KeyboardEvent.key,KeyboardEvent.code, etc. As a user with an AZERTY keyboard layout I often have a broken experience on sites that respond to first row of keys, e.g. QWERTY. As those sites respond to KeyboardEvent.key — which differs from layout to …

How I Build JavaScript Apps In 2021

Tim Daubenschütz on how he builds JavaScript Apps In 2021 I avoid build processes. I avoid transpiling. I avoid the new and shiny. I test EvErYtHiNg. I optimize for performance and quality. I use my own work I use open source to my advantage. Don’t agree 100% with the third point though, as React Hooks …