Hierarchic Indeterminate Checkboxes with JavaScript (Vanilla)

Earlier today Chris Coyier tweeted that he was in the process of rewriting one of his pens without jQuery: Been trying to re-write this without jQuery: https://t.co/xvsZMKsfvL I’m like 70% there but haven’t quite gotten it. jQuery is doing so much helpful DOM traversal here it’s a pain in the ass without it. — Chris […]

pagemap, a mini map navigation for web pages

Many text editors nowadays sport a minimap on the right hand side of the screen. Pagemap is like that, but for webpages: To use it, position a canvas element fixed on your screen, and tell pagemap which elements to include in the map: <canvas id="map"></canvas> #map { position: fixed; top: 0; right: 0; width: 200px; […]

Stop Apple Spotlight from slowing down your Mac by preventing it to index node_modules folders

Speaking of node_modules folders, this tip by Roel Van Gils came to mind: Does your Mac becomes slow/unresponsive (fans kicking in etc.) when you `npm install` a huge project with a million tiny dependencies? I learned that adding an empty `.metadata_never_index` in /node_modules *beforehand* will prevent Spotlight from indexing all that crap. — Roel Van […]

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 […]

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. […]

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 […]