Thinking in React Hooks

React introduced hooks one year ago, and they’ve been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.

The code-flow visualisations between the class component and function component take this post to a whole new level. Very nicely done, Amelia!

Thinking in React Hooks →

Flexbox Holy Albatross with CSS Grid

In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid.

ℹ️ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical):

There’s no intermediary state where a few items get wrap to new lines.

The short answer: yes. The long answer: yes, but only in browsers that support the CSS min() function, which is only Safari at the time of writing.

.selector {
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            min(
                calc(1024px * 999 - 100% * 999),
                100%
            ),
            1fr
        )
    );
}

Flexbox Albatross with Grids (CodePen) →

Boston Dynamics Spot hands-on: new dog, new tricks

An update on Spot / SpotMini, by The Verge:

Boston Dynamics is putting Spot to work. The company has announced a new leasing program for its Spot robot (formerly SpotMini), which is aimed at construction, entertainment, and other automation-friendly industries. But is the world ready for this semi-autonomous quadruped?

Boston Dynamics’ Spot is leaving the laboratory →

An HTML attribute potentially worth $4.4M to Chipotle

Jason Grigsby:

I recently found myself racing to fill out Chipotle’s online order form before my mother could find her credit card. In the process, I discovered a bug that could cost Chipotle $4.4 million annually.

The form didn’t play nice with autocomplete and therefore would not get sent …

The culprit? A JS library which enforced a 2-digit pattern on the card details’ year field, thus truncating the autocompleted value (202320).

The solution? The pattern attribute, which the autocomplete feature can detect, thus passing in a correctly shortened valued (202323)

An HTML attribute potentially worth $4.4M to Chipotle →

The Lufthansa Upcycling Collection

Lufthansa cabins are full of high-quality materials. Even the outer skin is made of extremely durable materials. They’re much too valuable to throw away ⁠– it would be better to reuse them.

We commissioned product designers and recycling experts to sustainably reuse the original materials. Their creativity was given free rein, and that paid off in the end result.

The mentioned wash bag – with sewn in safety instructions – goes over the counter for $49

Lufthansa Upcycling Collection →

💡 Upcycling is “the process of transforming by-products, waste materials, useless, or unwanted products into new materials or products of better quality and environmental value” (ref).

Use React.memo() wisely

To improve user interface performance, React offers a higher-order component React.memo(). By memoizing the rendered output, React skips unnecessary re-rendering.

This post helps you distinguish the situations when React.memo() improves the performance, and, not less important, understand when its usage is useless

Use React.memo() wisely →

An Introduction to Svelte

Developer Dave Ceddia, who had mainly been writing React before:

A few months ago, Svelte 3 was released.

I tried it out, ran through their tutorial, and built a few small things. And I can honestly say that I think writing Svelte feels even faster and easier than React. Svelte gave me the same spark, the same feeling of “wow!” that I had with React.

In this post I want to tell you a bit about Svelte, show you how it works with a few live example apps, and point you toward how to get started.

An Introduction to Svelte →

🗣 If you’re from the Belgium area and are interested in Svelte, Johan from Mono is organising Svelte Camp later this year, Barcamp-style.

Find the cost of adding a npm package to your bundle with BundlePhobia

Ever wondered what the (size) impact of adding an NPM package to your project is? BundlePhobia is a tool that does not only that, it also recommends you other similar packages that have a lesser load.

This thing lets you understand the performance cost of npm install‘ing a new npm package before actually adding it to your bundle.

BundlePhobia →

How to use React Dev Tools, an introduction

Dev Tools can do a lot of things. We’re are not going to dive into the nitty gritty details of each and every feature. Instead we’ll take a look at the top 10 helpful features that help us save time and write better React code.

Good intro (*) on how to find your way around in the aforementioned React DevTools 4.0.

React DevTools — Debug Like a Ninja →

(*) The “Debug Like a Ninja” subtitle is overkill, to be honest 😅

Run prettier or php-cs-fixer with GitHub Actions

Stefan Zweifel shares his GitHub Actions Workflows to run prettier and php-cs-fixer on his repos:

Over the past few weeks I’ve added a handful of workflows to my projects.

One workflow is really like, is to run prettier and php-cs-fixer to automatically format my code and commit the fixed files back to the repository.

Here’s the contents of the prettier workflow for example (.github/workflows/format_prettier):

name: Format (prettier)

on:
  pull_request:
    paths:
    - '**.css'
    - '**.js'
    - '**.vue'

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/[email protected]

    - name: Install
      run: yarn install
      env:
        CI: true

    - name: Run prettier
      run: yarn run prettier --write 'src/**/*.{css,js,vue}'

    - uses: stefanzweifel/[email protected]
      with:
        commit_message: Apply prettier changes
        branch: ${{ github.head_ref }}
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Upon each PR the workflow spins up an ubuntu machine which:

  1. Checks out the code
  2. Installs the dependencies (given that prettier is listed as a dev dependency in package.json)
  3. Runs the linter on certain files, with autofix enabled
  4. Commits all changes made by the linter

The php-cs-fixer works in a similar way.

Run prettier or php-cs-fixer with GitHub Actions →

🤩 There’s more cool things you can do with GitHub Actions. Automatically compressing (image) assets for example is a really neat workflow. You can even use GitHub Actions to schedule deploys of your site.

🤔 Looking to set up prettier and/or php-cs-fixer? Look no further.

Freek on Twitter