Making setInterval Declarative with React Hooks

Dan Abramov’s blog Overreacted is pure gold and contains a ton of information. Take today’s post “Making setInterval Declarative with React Hooks” for example, in which he explains why setInterval and Hooks (which should be released in today’s planned React 16.8 release) don’t play that nice together out of the box.

// This won't work … time will always remain 0
function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return (
    <div>Seconds: {time}</div>
  );
}

ReactDOM.render(<Clock />, document.querySelector('#app'));

A possible fix is to use a functional updater function in setTime(), yet Dan’s solution is a useInterval hook, which in itself is amazing.

import React, { useState, useEffect, useRef } from 'react';

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  });

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

As per usual, Dan goes into detail on why it should be written like this and the advantages it has over setInterval

Instead of writing code to set and clear the interval, I can declare an interval with a particular delay — and our useInterval Hook makes it happen.

It’s posts like these that make me even more excited about Hooks 🙂

Making setInterval Declarative with React Hooks →

How to publish your PWA onto the Google Play Store

Thanks to the Trusted Web Activity feature in Chrome 72 on Android, the Google Play Store is now open for Progressive Web Apps.

Chrome 72 for Android is now shipping from the Play Store to all users and this version included Trusted Web Activity (TWA), that in a nutshell is a way to open Chrome in standalone mode (without any toolbar or Chrome UI) within the scope of our own native Android package.

The easiest way to get your PWA published onto the Google Play Store is to clone the example repository and adjust the manifestPlaceholders settings in app/build.gradle.

Additionally you’ll also need to set up Digital Assets Links in /.well-known/assetlinks.json which is hosted on the website also hosting the PWA.

UPDATE 2019-02-12: Thanks to PWA2APK you can now automatically generate a .apk for you to upload to the Play Store.

Google Play Store now open for Progressive Web Apps 😱 →
SVGOMG / Trusted Web Activity Example (GitHub) →
Google Digital Assets Links →

The Modem Dialup Sound, Visualised

Remember the dialup sound of your modem from back in the day?

Those beeps and glitches aren’t just random garbage, but they’re the handshake between two modems trying to agree on which language they’ll be speaking to one another.

Oona Räisänen has created this nice poster of a spectogram of said handshake, detailing what each blip stands for:

Cool!

The sound of the dialup, pictured →

useHooks(🐠) – Easy to understand React Hook recipes

Hooks are an upcoming feature that lets you use state and other React features without writing a class. This websites provides easy to understand code examples to help you understand how hooks work and hopefully inspire you to take advantage of them in your next project.

useHooks(🐠)

💁‍♂️ Not familiar with Hooks? The announcement video gives you a really clear view on this new and exciting React feature:

More into reading? Check “Introducing Hooks” on the React Blog

The React Handbook

If you’re looking to get started with React, then the (massive) React Handbook will come in handy.

The React Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic.

Best part of it all is that it starts with a big section on Modern JavaScript (e.g. ES2015 and newer) as people seem to confuse ES2015+ with React.

Also available as an ebook in PDF, ePub and Mobi.

The React Handbook (Blogpost) →
The React Handbook (eBook) →

Creating vs. Shipping

Creating is easy. Shipping is the hard part, and countless companies never quite figure it out. Sure, they might release their software, but that’s not the same as shipping. No company is perfect, but it makes a big difference when they genuinely care.

Shipping is about consistency. It’s regularly updated help documents. It’s responsive and helpful customer support. It’s useful release notes. It’s an informative status page. It’s a regularly updated blog and social media accounts. It’s all the little things.

— Garett Dimon, in his piece Creating vs. Shipping

Tools to automatically format PHP, JavaScript and CSS files

Good writeup by Freek on how to get PHP-CS-Fixer and Prettier up and running.

When working on a project with other people, it’s important to pick a coding standard. Agreeing on a coding standard makes the code more readable for all developers that need to touch the project.

It’s easy to make mistakes against those formatting rules and bit cumbersome to fix all small formatting errors. Luckily there are many tools available that can automatically format this code. In this blog post, I’ll show you how to automatically format PHP, JavaScript and CSS files in a Laravel project. Not using Laravel? No problem! Most of this can be applied to any PHP project.

Addtionally I’d recommend to let these linters run in a precommit hook. That way no “faulty” code can be committed, and everyone is forced to adhere to the standards (Although: git commit -n …).

Tools to automatically format PHP, JavaScript and CSS files →

At the end of his post, Freek mentions that you can use Prettier to format your PHP code. The folks at Made With Love have a post on how to use Prettier with PHP.

Does Space Smell Like Burnt Steak? Astronaut Chris Hadfield Debunks (and Confirms) Space Myths

Retired astronaut Chris Hadfield helps debunk (and confirm!) some common myths about space. Is there any sound in space? Does space smell like burnt steak? Is NASA working on warp speed?

Multilingual Sites: Styling translated text

Ire Aderinokun on why you should use the :lang pseudo-class over the lang attribute selector (e.g. [lang]) for language-specific styles:

The problem with having language-specific styles based on the [lang] attribute selector is that the selector isn’t actually aware of the language of the element. It’s just like any other “dumb” attribute selector.

This can become a problem if we have a document with multiple, nested elements of different languages. Let’s take this section below. The section has a French lang attribute but, within the section, we have a quote in Spanish.

<section lang="fr">
    <p>Comment dites-vous "Bonjour" en Espanol?</p>
    <blockquote lang="es">
        <p>Hola!</p>
    </blockquote>
</section>

If one were to be styling based on the lang attribute, the styling would only work nice if the order of the CSS declarations was the same as the order in which the different languages appear in the markup. Flip your CSS around, and the styling will be wrong.

The fix is to use the :lang pseudo-class, a selector whose use wasn’t very clear to me … up until now 😉

Use the :lang pseudo-class over the lang attribute selector for language-specific styles →

Want to know how to link to a translation? Check Multilingual Sites: Linking to Translations.