“Worth It: Modern JS edition” is a small tool to analyze how much less JavaScript is downloaded in modern browsers as a result of it using the module/nomodule pattern. Worth It: Modern JS edition → 💡 The module/nomodule pattern is a technique to ship ES2015 modules to browsers that support, whilst also keeping older browsers […]
Tag Archives: javascript
Extract URLs, usernames, hashtags, etc. from tweets with twitter-text-js
If you ever have to work with Tweets, then twitter-text-js will surely come in handy: A JavaScript utility that provides text processing routines for Tweets. The library provides autolinking and extraction for URLs, usernames, lists, and hashtags. The following snippet for example will autolink the hashtag and the mentioned username: twitter.autoLink(twitter.htmlEscape('#hello < @world >')) Installation […]
How and when browsers load and execute JavaScript from script tags
When exactly is a script loaded and when is it executed? What about modules? This overview/cheatsheet sums it up nicely: The cheatsheet was extracted from this tweet by Addy Osmani
React: Hooks vs. Render Props vs. Higher-Order Components
Nice post comparing these three approaches and detailing why you should use the version with hooks. // #1 – Hooks const MyComponent = () => { const mousePosition = useMouse(); // mousePosition.x, mousePosition.y } // #2 – Render Props const MyComponent = () => { return ( <Mouse> {({ x, y }) => { // […]
Component Variations: Considerations for Creating a Card Component
Chris Coyier wants to create a Card Component in React. But then he suddenly finds himself down the rabbit hole: how flexible does he make it? What is configurable and what is not? Where to draw the line? It sounds very familiar, as I’m always pondering over things like this when writing libraries/reusable things in […]
ESNext: Get localized language, currency, and region names with Intl.DisplayNames
An ECMAScript Internationalization API Feature that currently is in Stage-3 and that has already landed in V8 version 8.1 is Intl.DisplayNames. It’s a way to get localized display names for languages, scripts, regions and others. The idea is that you as a developer should not build your own list of localized strings for languages, regions, […]
You don’t need webpack / Rollup / Babel / whatever to start with React
A common misconception about React is that you need to set up an entire toolchain to get started with it. While that might have been true in the past, that certainly isn’t the case today. From the React Docs: The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines […]
esbuild – An extremely fast JavaScript bundler and minifier
Interesting work by Evan Wallace, a JS bundler/minifier written in Go. Since it compiles down to native code, it’s fast: My main benchmark approximates a large codebase by duplicating the three.js library 10 times and building a single bundle from scratch, without any caches. For this benchmark, esbuild is 10-100x faster than the other JavaScript […]
Giving a dragging animation a more natural feel with math
By applying some math you can give an element that you’re dragging around a more natural feel … See the Pen Sigmoid-2 by Nash Vail (@nashvail) on CodePen. How to fix dragging animation in UI with simple math →
Rome – An experimental JavaScript toolchain
I’ve been following Sebastian on Twitter for quite some time and am very excited to see that Rome – which he has been talking about for quite some time – has been released into the open … Rome, an experimental JavaScript toolchain, is now open source and available for contributors 🥳🏛️📜 It's far from production […]