JavaScript to Know for React

Good article by Kent C. Dodds, covering the JavaScript paradigms which are used quite a lot when writing React apps. Learning JavaScript features is really advisable for you to be effective building applications with React. So here are a few JavaScript features I’d recommend you spend some time learning so you can be as effective …

ESNext: Proposals to look forward to (Fronteers Jam Session)

At last years’ edition of Fronteers Conference I gave a lightning talk on ESNext, covering the TC39 Process and highlighting three of my favorite proposals (some of which have hit Stage-3 by now!). Earlier this week they released the video of my (short) talk The lightning talk itself was a short version of a full …

RE: Overengineered packages?

ℹ️ This is a reply to Johan Ronsse’s post “Overengineered Packages?”. Be sure to read it first. After having posted about the class-names package, Johan turned to Twitter to state that the package overengineered. In a follow-up blogpost he argues that: At the moment I feel like it’s only invented because of a deeper problem: …

class-names – Conditionally join CSS class names together

One of the packages I’ve been using a lot is classnames, a simple JavaScript utility for conditionally joining classNames together. Recently I stumbled upon @sindresorhus/class-names, a likewise package whose usage is very similar. import classNames from '@sindresorhus/class-names'; // Think of these like props of your React component … const props = { type: 'success', small: …

“I didn’t know that” – A Short Talk Packed with JavaScript Tips and Tricks

Video of a lightning talk by Stefan Judis, as presented at NDC Oslo 2019, in which he highlights a few of the lesser known JavaScript things he learned over time His tips can also be found on his blog, in a dedicated “Today I Learned” section.

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 …

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.