The ingredients of a classic house track

Another great video in the Vox Earworm series, a must see for any (house) music lover. Perfect fit to watch right after their previous “The Disco Invention that Changed Pop Music” video.

On June 12, 1979, thousands of disco records were destroyed at Chicago’s “Disco Demolition Night”. Within one year, Chicago DJs and producers had reinvented the genre, and house music rose from the ashes of disco.

5 Tips to Help You Avoid React Hooks Pitfalls

Kent C. Dodds:

As hot as it is, React Hooks require a bit of a change in the way you think about React Component Lifecycles, State, and Side Effects and it can be easy to fall into problematic scenarios if you’re not thinking about React Hooks properly. So let’s look a bit at what pitfalls you could come across and how you can change your thinking so you avoid them.

Glad to see one of the tips is to no longer think in lifecycles, but in effects. Also, must say I hadn’t really checked out the ESLint React Hooks Plugin yet 😬.

5 Tips to Help You Avoid React Hooks Pitfalls →

React DevTools 4.0

Version 4 of the React DevTools have been released, with a lot of improvements.

At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects.

The release notes hold a detailed list of changes, with example gifs. Furthermore there’s an interactive React DevTools tutorial showing you a few of the basics.

ℹ️ If you’re interested in some more behind the scenes, be sure to follow @brian_d_vaughn on Twitter. He’s been working on it the past few months.

React DevTools 4.0.0 supports react-dom 15.x and up, and react-native 0.62 and up.

React DevTools 4.0.0 Changelog →
Interactive React DevTools Tutorial →
React DevTools extension for Google Chrome →
React DevTools extension for Mozilla Firefox →

Inside NASA’s facility where they keep the Moon Rocks

In honour of the upcoming 50th anniversary of the first lunar landing – which launched on July 16th, 1969 – Destin from SmarterEveryDay went to the NASA facility where they keep about 70% of the Moon Rocks that were ever collected (Apollo Missions 11, 12, 14, 15, 16, and 17). The video offers us a truly amazing inside view on how the rocks are stored, manipulated, documented, etc.

Extra kudos to his guide Andrea Mosie, who speaks in such a passionate, open, and honest way about it all. It must be a joy and privilege to work with her.

💩 Did you know: In order to take all those rocks back, the astronauts left a lot of their stuff on the moon … including wastebags filled with their own poop.

In the end of the video Dustin refers to It’s Okay To Be Smart‘s video on The Genesis Rock, which is also worth your time:

The Wikipedia article on Moon Rocks is also worth a read 🙂

🚀 If you really want to go back in time you can – just like with the Apollo 17 Mission before – relive the entire Apollo 11 Mission in real-time. Included real-time elements are:

  • All mission control film footage
  • All TV transmissions and onboard film footage
  • 2,000 photographs
  • 11,000 hours of Mission Control audio
  • 240 hours of space-to-ground audio
  • All onboard recorder audio
  • …

And to say some people still think this was all a scam 😅

Apollo 11 in real-time →

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.

Deploying multi-source sites to Netlify

Deploying one site (from a single source repo) to Netlify ain’t that hard – see my instructions here – but what if your sources are spread out across multiple repos? How do you combine the data without duplicating it into a monorepo?

That’s exactly the problem Spatie was having for their docs.spatie.be: the website holds the documentation for all of their (bigger) open source packages, but the documentation itself is not part of said repo but is stored within each project’s repository.

To solve this they first created an inventory file repositories.json. The file keeps track of each part of the documentation and its location. Using a script named fetch-content.js they aggregate all those documentation parts:

const util = require("util");
const exec = util.promisify(require("child_process").exec);
console.log('Fetching repositories...');
console.time('Fetched repositories');

const repositories = require("./repositories.json");

function transformBranchToFolderName(branch) {
    return branch.startsWith('v') ? branch.substring(1) : branch;
}

(async function () {
    let promises = [];

    for (const repository of repositories) {
        for (const [branch, alias] of Object.entries(repository.branches)) {
            const folder = `content/${repository.name}/${alias}`;
            const url = `https://codeload.github.com/${repository.repository}/tar.gz/${branch}`;

            promises.push(exec(`mkdir -p ${folder} && curl ${url} \
             | tar -xz -C ${folder} --strip=2 ${repository.repository.split('/')[1]}-${transformBranchToFolderName(branch)}/docs \
             && echo "---\ntitle: ${repository.name}\ncategory: ${repository.category}\n---" > content/${repository.name}/_index.md`));
      
        }
    }

    await Promise.all(promises);
    console.timeEnd('Fetched repositories');
})();

To build the site they first launch fetch-content.js and successively run hugo.

[build]
  command = "node fetch-content.js && hugo -b https://docs.spatie.be"
  publish = "public"

By adding webhooks which point to the same endpoint on all of the listed repos, the docs website is built whenever a commit to any of those repos is pushed.

Going serverless with Hugo and Netlify →
docs.spatie.be Source (GitHub) →

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.

Here’s a side-by-side comparison recording by @nparashuram of one and the same app . The one of the left is with Hermes, the one on the right without:

To enable Hermes, simply edit your android/app/build.gradle file and set enableHermes to true (requires React Native 0.60.2 or newer):

project.ext.react = [
    entryFile: "index.js",
    enableHermes: true  // clean and rebuild if changing
]

One cd android && ./gradlew clean later and you’re good to go 🙂

Hermes Source (GitHub) →
React Native: Enabling Hermes →

Clock Experiments by Vasilis

Vasilis had some fun and created these experimental clock interfaces.

First up is the “Decimal Clock”:

If we had ten hours in a day, instead of 24, and if each of these hours had 100 minutes instead of 60, and if every minute had 100 seconds, our clocks would look like this, and the time would be …

Decimal Clock →

~

And there’s also the “WowClock”:

All numbers are built with 24 round digits. Each digit looks like a small clock, with two hands that can turn. Every time a number changes, for instance when 13:36 turns into 13:37, the hands of all little clocks start moving until the reach such a position that their combined pattern forms the new number.

WowClock →

React: Forget about component lifecycles and start thinking in effects

Yesterday, while at a workshop, React Hooks (intro here) became the subject of discussion between participants. Someone in the audience asked how to easily map the classes+lifecycle way of thinking onto hooks, as she had trouble doing so.

In short, my recommendation was to no longer think in lifecycles but to think in effects, as useEffect was created for exactly this type of thing: when one (state) value changes something else should happen. It also provides you with cleanup methods, to perform stuff one would typically do in componentWillUnmount.

When coming home later that day I was really glad to see that Sebastian had just published a blogpost, along with a practical example, on that very same subject:

React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place.

Thanks for writing this post Seb, saved me some time from writing it myself 😉

Forget about component lifecycles and start thinking in effects →