A rather geeky/technical weblog, est. 2001, by Bramus
script tags
When exactly is a script loaded and when is it executed? How do the async and defer attributes affect it? What about modules? This overview/cheatsheet sums it up nicely: The cheatsheet was extracted from this tweet by Addy Osmani
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 }) => { // …
Continue reading “React: Hooks vs. Render Props vs. Higher-Order Components”
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 …
Continue reading “Component Variations: Considerations for Creating a Card Component”
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, …
Continue reading “ESNext: Get localized language, currency, and region names with Intl.DisplayNames“
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 …
Continue reading “You don’t need webpack / Rollup / Babel / whatever to start with React”
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 …
Continue reading “esbuild – An extremely fast JavaScript bundler and minifier”
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 →
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 …
Continue reading “Rome – An experimental JavaScript toolchain”
I like using data attributes in my markup (data-*), CSS ([data-*]), and JS (el.dataset). This post on CSS-Tricks writes down exactly how I use them. Especially the different type of attribute selectors are really powerful: // Seven different types of CSS attribute selectors // This attribute exists on the element [value] // This attribute has …
To get the full details behind Redux, Sorin Nunca has recreated it using PHP: As I usually try to understand the tools I’m using, the following tries to be a toy implementation of Redux in PHP, in the hopes of gaining a deeper understanding of the concepts behind Redux. Also covers combineReducers. Redux in 30 …