Easily find and remove old and heavy node_modules/vendor folders with npkill

When working in web, you can be left with several lost node_modules (JS) and vendor (PHP) folders spread across your filesystem, unnecessarily taking up space. To find these, I use the following command: # List all node_modules (from current directory down) and their size $ find . -name ‘node_modules’ -type d -prune -print | xargs […]

Old Typewriter Text Effect

By randomly changing the opacity and adding a little text-shadow, one can create this old typewriter effect: Makes good use of currentColor for the shadow, so it can be applied on any coloured text. Old Typewriter Text Effect → πŸ’β€β™‚οΈ Don’t confuse this effect with a typing carousel which types the letters one-by-one.

Hermes, a JavaScript engine optimized for running React Native on Android

Interesting announcement from Facebook: Hermes is an open-source JavaScript engine optimized for running React Native apps on Android. For many apps, simply enabling Hermes will result in improved start-up time, decreased memory usage and smaller app size. At this time Hermes is an opt-in React Native feature, and this guide explains how to enable it. […]

Pika CDN – A CDN for modern JavaScript

Yesterday the aforementioned Pika announced some new things. One of the things that stood out is Pika CDN: The Pika CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax. This module syntax runs natively in the browser, so you can build for the web without a bundler. With our […]

create-es-react-app – A create-react-app like template using only es-modules (no build step).

create-es-react-app is a create-react-app like template demonstrating how far you can get creating progressive web apps (using react) with no build step. It takes advantage of static and dynamic imports which enables you to break up your app into small reusable ES modules that are compiled for you by the browser at run time. TIL: […]

React Hooks: When to useMemo and useCallback

Insightful post by Kent C. Dodds on the costs and benefits of React’s useMemo and useCallback. We hear a lot that you should use React.useCallback to improve performance and that “inline functions can be problematic for performance,” so how could it ever be better to not useCallback? Just take a step back from React and […]

The Economics of Open Source // Introducing Entropic, a federated package registry

At JSConf EU 2019, CJ Silverio – former CTO at NPM Inc – gave this talk on why a VC-funded private package registry (read: the one ran by NPM Inc) holds many dangers. The JS package commons is in the hands of a for-profit entity. We trust NPM Inc with our shared code, but we […]

useDimensions – a React Hook to measure DOM nodes

import React from 'react' import useDimensions from 'react-use-dimensions' const MeasuredNode = () => { const [ref, { x, y, width, height }] = useDimensions(); return ( <p ref={ref}> I am a paragraph at ({x}px, {y}px) position with a width of {width}px and height of {height}px </p> ); }; Handy. Uses window.resize+window.scroll internally, yet I’m quite […]