DEV Community: Alex Gurr

Turning a React app into an installable PWA with offline detection, service workers and theming.

Alex Gurr — Wed, 13 Oct 2021 10:02:52 +0000

Recently I decided to take the dive into making my web app progressive. Some of the benefits are excellent caching, sped up page load times and the ability for a user to install it "natively".

There are definitely some gotchas and other interesting tidbits which I'll also be covering below.

I'm using React, so I'll assume you are too. If you want to jump in to the code, it's all in the mixmello GitHub repo.

Let's get started!

Setting Up Service Workers
Offline Detection & UI/UX
Icons & Splash Screens
Themes & Theme Colours
Extras

Setting Up Service Workers

Create-react-app provides us a couple of excellent service worker files to help us get started. They automatically configure lots of useful things like caching your webpack output. They'll pretty much contain everything we need for our PWA.

You can get these files by running npx create-react-app my-app --template cra-template-pwa.

This will give you two files you can move into your project, serviceWorkerRegistration.js and service-worker.js. Add these into /src of your project (or use the new project provided by the command). I'm not going to deep dive into these files today as they are extremely well documented via comments.

Now we actually need to register our service worker on launch. In your app index file, import the service worker.



import { register as registerServiceWorker } from './serviceWorkerRegistration';

Now simply run the function with registerServiceWorker();.

A finished index file should look something like this:



import React from 'react';
import ReactDOM from 'react-dom';
import { register as registerServiceWorker } from './serviceWorkerRegistration';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

registerServiceWorker();

Service workers will only register/run in a production build, unless specifically enabled (see create-react-app documentation in the extras section below). This is because hot-reloading and service worker caching don't mix very well! This means you won't see the service worker running in Dev tools > Application > Service Workers.

Offline Detection & UI/UX

Offline detection is not specifically a service worker/PWA feature, however, PWAs are 'offline first', meaning it's a good idea to have code to handle offline/online state.

In my application, I decided to add a little bubble that comes down from the top of the screen and block the page. See what it looks like below (might take a few seconds to load):

To make a good user & developer experience for this feature -

It should be a higher order component we can wrap round our whole app, for single responsibility and no code duplication
It should prevent the user from scrolling when open
It should be able to detect when the app is online/offline in real time
It should be clear what's happening

The Component

Let's make a new folder, Offline. Where you put it is up to you. In my app, it's in src/common/components. I'm using SCSS, but you can continue to use whatever framework your app is using.

Create 3 new files, index.js, Offline.js and _offline.scss.

index.js provides the default export for our component:



export { default } from './Offline';

Offline.js is our main component. The component is comprised of two main bits of functionality. 1) The window event handlers to handle network state changes and 2) the actual JSX/HTML itself. Here I'm using React 17 and hooks but you could retrofit this to a class component if needed.

Let's start building!



export default function Offline({ children }) {
  return (
    <>
      <div className="offline" />
      {children}
    </>
  );
}

We've instantiated a new component and rendered it inside a fragment, because we don't want to add an additional layer/container above our app's children.



import cx from 'classnames';
import './_offline.scss';

export default function Offline({ children }) {
  return (
    <>
      <div className="offline" />
      <div className={cx('offline__overlay')} />
      {children}
    </>
  );
}

Now we have our styles import and an overlay div that will fade out the background. I'm using a library called classnames to chain classes but you don't have to use it. Later on, we'll conditionally change the overlay styles bases on our online/offline state.



import cx from 'classnames';
import { ReactComponent as OfflineLogo } from 'assets/images/logo-offline-icon.svg';
import Text from '../Text';
import './_offline.scss';

export default function Offline({ children }) {
  return (
    <>
      <div className="offline">
                <div className="offline__content">
                    <OfflineLogo />
                    <div className="offline__text">
                        <Text subHeading className="mt-0 mb-5">You're not online</Text>
                        <Text className="mt-0 mb-0">Check your internet connection.</Text>
                    </div>
                </div>
      <div className={cx('offline__overlay')} />
      {children}
    </>
  );
}

Now we're adding some content to our little offline bubble. Text is a component wrapper for text elements like <p> . I've created a dedicated SVG logo for offline, but you can use whatever you like in it's place. The mt-x helper classes are for margin which I cover in my other article here.



import cx from 'classnames';
import { useEffect } from 'react';
import { useBooleanState, usePrevious } from 'webrix/hooks';
import { ReactComponent as OfflineLogo } from 'assets/images/logo-offline-icon.svg';
import Text from '../Text';
import './_offline.scss';

export default function Offline({ children }) {
  const { value: online, setFalse: setOffline, setTrue: setOnline } = useBooleanState(navigator.onLine);
    const previousOnline = usePrevious(online);

    useEffect(() => {
        window.addEventListener('online', setOnline);
        window.addEventListener('offline', setOffline);

        return () => {
            window.removeEventListener('online', setOnline);
            window.removeEventListener('offline', setOffline);
        };
    }, []);

  return (
    <>
      <div className="offline">
                <div className="offline__content">
                    <OfflineLogo />
                    <div className="offline__text">
                        <Text subHeading className="mt-0 mb-5">You're not online</Text>
                        <Text className="mt-0 mb-0">Check your internet connection.</Text>
                    </div>
                </div>
      <div className={cx('offline__overlay')} />
      {children}
    </>
  );
}

We've added the logic that makes it do something! We have two state variables, online which will reflect our network state (boolean) and previousOnline which allows us to prevent the overlay appearing on first load which we'll set up shortly.

The useEffect hook only runs once (on first render) and sets up our window event listeners. The function that's returned will be run on page unload and will clear those same listeners. useBooleanState is a hook provided by webrix and is a simple convenience hook for boolean manipulation.



import cx from 'classnames';
import { useEffect } from 'react';
import { useBooleanState, usePrevious } from 'webrix/hooks';
import { ReactComponent as OfflineLogo } from 'assets/images/logo-offline-icon.svg';
import Text from '../Text';
import './_offline.scss';

export default function Offline({ children }) {
  const { value: online, setFalse: setOffline, setTrue: setOnline } = useBooleanState(navigator.onLine);
    const previousOnline = usePrevious(online);

    useEffect(() => {
        window.addEventListener('online', setOnline);
        window.addEventListener('offline', setOffline);

        return () => {
            window.removeEventListener('online', setOnline);
            window.removeEventListener('offline', setOffline);
        };
    }, []);

  return (
    <>
     <div
            className={cx(
                    'offline',
                    'animate__animated',
                    'animate__faster',

                // This should be backticks, but the syntax highlighting gets confused so I've made it single quotes
                    'animate__${online ? 'slideOutUp' : 'slideInDown'}'
                )}
                style={previousOnline === online && online ? { display: 'none' } : void 0}
        >
                <div className="offline__content">
                    <OfflineLogo />
                    <div className="offline__text">
                        <Text subHeading className="mt-0 mb-5">You're not online</Text>
                        <Text className="mt-0 mb-0">Check your internet connection.</Text>
                    </div>
                </div>
            <div className={cx('offline__overlay', { 'offline__overlay--visible': !online })} />
      {children}
    </>
  );
}

Now we'll actually use our online variable to do some cool stuff! Firstly, we're adding a conditional class to our overlay, which we'll style later.

Next, we're making it a bit more shiny with animation! I've used animate.css to make the bubble slide in and out of the screen. It provides us some animation classnames we can use.

Finally, we've added a conditional style to our container, to cover the initial load when we're connected. This prevents the bubble from appearing and immediately sliding out of view.



import cx from 'classnames';
import { useEffect } from 'react';
import { useBooleanState, usePrevious } from 'webrix/hooks';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
import { ReactComponent as OfflineLogo } from 'assets/images/logo-offline-icon.svg';
import Text from '../Text';
import './_offline.scss';

export default function Offline({ children }) {
  const { value: online, setFalse: setOffline, setTrue: setOnline } = useBooleanState(navigator.onLine);
    const previousOnline = usePrevious(online);

  useEffect(() => {
        if (!online) { return void disableBodyScroll(document.body); }

        enableBodyScroll(document.body);
    }, [online]);

    useEffect(() => {
        window.addEventListener('online', setOnline);
        window.addEventListener('offline', setOffline);

        return () => {
            window.removeEventListener('online', setOnline);
            window.removeEventListener('offline', setOffline);
        };
    }, []);

  return (
    <>
     <div
            className={cx(
                    'offline',
                    'animate__animated',
                    'animate__faster',

                // This should be backticks, but the syntax highlighting gets confused so I've made it single quotes
                    'animate__${online ? 'slideOutUp' : 'slideInDown'}'
                )}
                style={previousOnline === online && online ? { display: 'none' } : void 0}
        >
                <div className="offline__content">
                    <OfflineLogo />
                    <div className="offline__text">
                        <Text subHeading className="mt-0 mb-5">You're not online</Text>
                        <Text className="mt-0 mb-0">Check your internet connection.</Text>
                    </div>
                </div>
            <div className={cx('offline__overlay', { 'offline__overlay--visible': !online })} />
      {children}
    </>
  );
}

Last but not least, let's lock scrolling. Remember the earlier requirement? When the overlay and bubble are open the user shouldn't be able to scroll in the background. For this, we use a library called body-scroll-lock and simply toggle the lock in our new useEffect hook.

The Styling

Styling in SCSS is pretty simple. Here's how we can get the result above:



@import 'vars';

.offline {
  position: fixed;
  top: 0;
  z-index: 4;
  left: calc(50% - 200px);
  width: 400px;
  padding-top: 40px;

  @media only screen and (max-width: $mobile-width) {
    padding-top: 20px;
  }

  @media only screen and (max-width: 500px) {
    padding-top: 20px;
    width: calc(100% - 40px);
    left: 20px;
  }

  &__content {
    padding: 15px 20px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;

    > svg {
      height: 50px;
      width: auto;
      margin-right: 20px;
    }
  }

  &__overlay {
    position: fixed;
    z-index: 3;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;

    &--visible {
      opacity: 1;
      pointer-events: unset;
    }
  }
}

Parts worth talking about are:

Hardcoded right %, instead of translate. animate.css uses transforms to animate, so we need a different approach to center it horizontally.
@import 'vars' - this is just a file full of SCSS variables. The media query variable is just a pixel value.
padding: top instead of an actual top value - animate.css uses transform: translateY(-100%) on the container when sliding it out. If we use a top value, the component won't slide completely out of view. If we give it padding instead, we are making the component larger and therefore will all slide out, but still have the gap from the top of the screen.

Using It In Our App

You can use the component wherever you want, but I recommend as high as possible. In mine, it's in the app index file:



ReactDOM.render(
  <React.StrictMode>
    <Offline>
        <App />
    </Offline>
  </React.StrictMode>,
  document.getElementById('root')
);

Icons & Splash Screens

Manifest.json

The manifest file is used to tell platforms how we want our PWA to behave. create-react-app creates a manifest.json file automatically for us, in the public folder.



{
  "short_name": "name",
  "name": "name",
  "description": "description",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff"
}

short_name - the title that's displayed on smaller areas, such as on home screens

name - the full title of the app

description - app description

icons - these are icons used on an android home screen or for PWA desktop apps on desktop.These are not used on iOS PWAs (see gotchas below)

start_url - entry point to your application. For standard React apps, this will be root, or .

display - how should your app be displayed within a PWA container? standalone will render full screen and give a more native experience

background_color - loading screen background colour (such as on a splash screen). This is not the background colour of your app when loaded.

theme_color - this dictates the color of the status bar at the top of the app, however I choose to just use the theme <meta> tag in index.html as I can dynamically change it (see themes below).

For my app, I took my app's logo and turned it into a macOS-esque rounded icon, such as:

Full breakdown of the manifest.json file can be found here. Your index.html file should link to this manifest, with a line similar to <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />.

iOS & Gotchas

iOS still doesn't handle PWAs very well. Your manifest file will be pretty much ignored, other than to tell iOS you support PWAs. PWAs are only supported via Safari.

iOS does not support transparency on icons. It'll render a black background behind your icon if it's a png. You should make special icons for iOS, with a coloured background (mine's white), which looks like:

To use it, we'll need the link <link rel="apple-touch-icon" href="%PUBLIC_URL%/icons/ios-touch-icon.png"> in our index.html file.

Splash Screens

To show a splash screen on iOS when the app's loading, you'll need a series of html code lines in index.html. Unfortunately, you'll need a different sized image per supported resolution:



<link href="%PUBLIC_URL%/splash/iphone5_splash.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/iphone6_splash.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/iphoneplus_splash.png" media="(device-width: 621px) and (device-height: 1104px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/iphonex_splash.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/iphonexr_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/iphonexsmax_splash.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/ipad_splash.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/ipadpro1_splash.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/ipadpro3_splash.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<link href="%PUBLIC_URL%/splash/ipadpro2_splash.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

Themes & Theme Colours

As mentioned before, we'll control theme through index.html and not using manifest.json. Find out more about theme-color and what it looks like in action, here.

Static Theme Colour

Static theme colours are easy. Simply include this line in your index.html file. <meta name="theme-color" content="#ffffff" /> . create-react-app provides this by default.

Dynamic Theme Colour

In your app, you might have different page colours. For example, in my app, the homepage is green, but the rest are white. I wanted the theme-color to change based on where I was. When a Modal window opens, the theme-color becomes black.

For this, you'll need a library called react-helmet. Helmet allows us to modify the <head> of our document from within our components. Sweet!

To do this, simply include the <Helmet> element in any of your components:



<Helmet><meta name="theme-color" content="#000000" /></Helmet>

We can actually extend the Offline.js component we built earlier to make the status bar black:



<div
    className={cx(
        'offline',
        'animate__animated',
        'animate__faster',

    // This should be backticks, but the syntax highlighting gets confused so I've made it single quotes
        'animate__${online ? 'slideOutUp' : 'slideInDown'}'
    )}
    style={previousOnline === online && online ? { display: 'none' } : void 0}
>

  // The line below changes the theme dynamically, but only when we're offline
    {!online && <Helmet><meta name="theme-color" content="#000000" /></Helmet>}

    <div className="offline__content">
        <OfflineLogo />
        <div className="offline__text">
            <Text subHeading className="mt-0 mb-5">You're not online</Text>
            <Text className="mt-0 mb-0">Check your internet connection.</Text>
        </div>
    </div>
</div>

Extras

Thanks for reading! Feel free to leave feedback 🚀

Like my article and want more? Come and follow me on medium.

mixmello - create remixed versions of your Spotify playlists. Open source.

Alex Gurr — Fri, 08 Oct 2021 09:36:47 +0000

Introducing mixmello, a free, open source application to create remixed or acoustic versions of your favourite Spotify playlists.

Web: mixmello.com
GitHub: github

Stack

Frontend: react@latest -- design & logo by me from scratch
Backend: none
APIs: Spotify
Authentication: Spotify OAuth pkce

Things I Learned

Making an app that uses the Spotify API is more work than you think!

Spotify's public API has some questionable decisions, including limits on resources but no search functionality. This means you have to chain paginated requests to get items and make a local search.
Their development checking team means business. Make sure you read the partner guidelines before build. You get one evaluation per day and the turnaround is slow.
If you use any metadata from their API, including art, titles, tracks etc. you must add a Open In Spotify button.
pkce is by far the easiest way of authenticating client-side with their API

Open to feedback, suggestions, PRs and any questions you might have!

Like my article and want more? Come and follow me on medium.

Creating a style utility file with some SCSS magic ✨

Alex Gurr — Sun, 26 Sep 2021 02:49:31 +0000

You might have used style frameworks in the past like Bootstrap or Bulma. Most of these types of libraries provide utility classes you can easily use in your HTML layouts, such as ml-10 for left margin, or pr-5 for right padding. One way of doing this is with a super long file and repetitive class declarations. Not very readable or scalable though is it?

In this article, we'll dive into making our own utility style file with scss, using some cool scss magic you might not have used before. In our example we'll be working with margin, but you could easily reproduce with any properties you like! The way we do this is flexible -- you provide the values for your classes (instead of mapping 1-100 for example).

Let's make a new `.scss` file

Pretty easy. I'll let you decide on how you want to do this.

Tip: you can structure your scss files similarly to JS files and make it super readable! I love using index.scss files to group imports within a folder, then having the parent import the index file.

Let's set up some variables

We're going to need 4 variables (a couple are optional):

auto (optional) - good practice to extract constants to variables. This is used to hold the auto value.

directions - an array of strings, to cover the 4 different directions our margin could be (top, bottom, left, right)

css-property-map (optional) - A scss map to map our directions above to CSS properties. SCSS maps work similarly to JS, with a key/value. I use this because I want my utility classes to be shorthand/small in size. You could avoid this by having the full direction in your class.

sizes: an array of CSS values. These are the utility classes/values we want to generate. I've also included an auto value which gets handled separately as it's not a standard px value.

$auto: auto;
$directions: 't', 'b', 'l', 'r';
$css-property-map: ('t': margin-top, 'b': margin-bottom, 'l': margin-left, 'r': margin-right);
$sizes: 0, 5, 10, 20, 30, 40, 50, 60, 100, $auto;

And now some loops

We set up a couple of dynamic loops (think for each loop in JS). This will give us all sizes for each direction.

@each $direction in $directions {
  @each $size in $sizes {
    // Classes coming here
  }
}

Generate the actual utility class

We dynamically create CSS classes for each direction/size combo. This will give us the classes in a .ml-5 format.

@each $direction in $directions {
  @each $size in $sizes {
    .m#{$direction}-#{$size} {
      // CSS property/values coming here
    }
  }
}

Setup the CSS properties and values

We compare the size to our previously defined auto value. If it's auto, we don't need to build a px value.

#{map-get($css-property-map, $direction)} let's us build dynamic CSS properties. Let's deep dive into what each bit means:

#{} - inject an SCSS variable into CSS
map-get(map, key) - pull out a value from a specific map with the passed key

@if $size == $auto {
  #{map-get($css-property-map, $direction)}: $auto;
} @else {
  #{map-get($css-property-map, $direction)}: #{$size}px;
}

Complete util code

$auto: auto;
$directions: 't', 'b', 'l', 'r';
$css-property-map: ('t': margin-top, 'b': margin-bottom, 'l': margin-left, 'r': margin-right);
$sizes: 0, 5, 10, 20, 30, 40, 50, 60, 100, $auto;

@each $direction in $directions {
  @each $size in $sizes {
    .m#{$direction}-#{$size} {
      @if $size == $auto {
        #{map-get($css-property-map, $direction)}: $auto;
      } @else {
        #{map-get($css-property-map, $direction)}: #{$size}px;
      }
    }
  }
}

And that's it! We've now dynamically generated a collection of top/bottom/left/right margin classes.

I built a new tool for teams. Time To Estimate, a fun, simple way for teams to remotely estimate tasks together.

Alex Gurr — Sun, 22 Aug 2021 09:39:03 +0000

Free to use and no sign up required to use it.

Want to skip the blurb? Here's the link.

Have you been in an awkward situation, such as on a zoom call, where developers are trying to estimate using hands? Video call's background removal features cut people's hands off, there's lag and it's general pain in the butt. Or, you're shaking your fists rock-paper-scissors style to your scrum lead's countdown only for everyone to estimate at the wrong time.

Time To Estimate - it's new, it's shiny and it's fun to use. I built it with agile teams in mind. It simplifies your estimation and comes with some cool features to make your remote planning session that bit quicker.

My arms are wide open for feedback (feedback button on desktop is middle right of the screen), including any issues or bugs you might encounter.

Check it out at timetoestimate.com.

On the hunt for ideas & collaborators for node-coding-challenges

Alex Gurr — Fri, 23 Apr 2021 03:08:59 +0000

Hi, my name's Alex and I created react-coding-challenges on GitHub.

We've built up a community, got some ⭐️ and due to popular demand are expanding into the nodeJS space.

I'm on the lookout for challenge ideas, help or collaborators for the new open source repo, node-coding-challenges.

I'd love for this to have lots of challenges of varying difficulties, however maintaining this many open source projects at once is a real challenge!

Post an idea here, get in touch at alexgurr.com or have a conversation in the comments below!

Take a look at the new challenge template here and what makes a good challenge.

React Coding Challenges Is officially on the awesome-react list on GitHub!

Alex Gurr — Mon, 22 Mar 2021 12:10:30 +0000

Just under a year ago I published the first react-coding-challenge on GitHub, Rocket Ship 🚀.

Right now, there's 4 fully fledged challenges (almost 5) and 300 ⭐️ on GitHub.

Today the challenges officially got added to the awesome-react list, which has over 42K ⭐️ and is used by thousands of people!

Thanks and love to the whole community - here's to many more challenges & collaborators 🙏

The challenges

awesome-react

What and why

How I built a small ReactJS app to automatically invite collaborators to a private GitHub repo 👌

Alex Gurr — Sat, 20 Mar 2021 07:35:53 +0000

I currently maintain a GitHub repo called react-coding-challenges. It involves a variety of different difficulty challenges people can check out and complete. I also have a separate, private repository for the solutions to these challenges. The solutions are invite-only, meaning I need to invite each person as a collaborator before they get access (see the why here).

This was fine at the start, with a small amount of people requesting access. Now however, I have a steady stream of requests (usually via email which goes in to my spam folder) and it's becoming increasingly difficult/time consuming to manually do this process.

So what did I do? I built a MERN application that can automate this entire process with no-touch. Check it out at solutions.alexgurr.com.

How Does It Work?

Client

The user clicks the main CTA button

This uses a great library called react-github-login.

  import GitHubLogin from 'react-github-login';

  <GitHubLogin
    clientId="CLIENT_ID"
    onSuccess={joinRepo}
    onFailure={onFailure}

    // We only need the read:user scope to determine who the user is
    scope="read:user"

    // This is irrelevant because the auth window gets closed
    redirectUri=""

    // Use animate.css to give the button a pulse effect
    className={`button animate__animated animate__pulse animate__infinite animate__slow ${loading ? 'is-loading' : ''}`}
  >
    <div>
      <span className="icon">
        <i className="fab fa-github"></i>
      </span>
      <span>Let Me In</span>
    </div>
  </GitHubLogin>

The library starts the GitHub OAuth login process and calls our callback with an oAuth code

  const joinRepo = async ({ code }) => {
    try {
      // The code gets sent to the server
      await axios.post(config.serverUrl, { code });

      setJoined(true);
    } catch(e) {
      // if it's a 409, the user is already in the repository
      if (e.response && e.response.status && e.response.status === 409) {
        setAlreadyIn(true);

        return void setJoined(true);
      }

      toast("Oops, something went wrong.", { type: 'error', position: "bottom-left", hideProgressBar: true })
    }
  }

Server

Generate an access token for the user, using a client secret/id & the client code

  const { data } = await axios.post('https://github.com/login/oauth/access_token', {
    client_id: 'ID',
    client_secret: 'SECRET',
    code: code
  });

Retrieve the user's information using the generated access token

  const { data: user } = await axios.get('https://api.github.com/user', {
    headers: { Authorization: `token ${data.split('&')[0].split('=')[1]}` }
  });

Check if the user's a collaborator already

We use the @octokit/rest library for the more complex GitHub API actions, which is a node GitHub SDK

  await octokit.repos.checkCollaborator({
    owner: GITHUB_UN,
    repo: 'react-coding-solutions',
    username
  });

If they are already a collaborator, we return at this point and return a response with 409 status code.

Invite the user as a collaborator and return a success (201) response

  await octokit.repos.addCollaborator({
    owner: GITHUB_UN,
    repo: 'react-coding-solutions',
    username
  });

Store the user record in our database

We use mongodb and mongoose as our user record store. This record write is non-blocking and we don't wait for it to finish before returning a response.

  User.create({ username });

Overall, this was quite an easy app to build. I hope this gives some insight into how you could invite users to GitHub repos, or provide some inspiration to go and automate things!

Chatter. The latest reactJS coding challenge in react-coding-challenges on GitHub.

Alex Gurr — Sun, 14 Mar 2021 06:09:06 +0000

Hello! My name's Alex and I built the react-coding-challenges collection on GitHub. Find them here.

So what are the coding challenges? They are a series of small incomplete React apps you can use to test yourself in a variety of ways, or for example, as small code challenges for interview candidates. Get more information and deep dive in this dev post.

Today I'm excited to announce the latest challenge, Chatter. A chat application to test your knowledge of sockets (socket.io), hooks and callbacks. It talks to my server Botty. Check it specifically out here or head over to the main code challenges repository. All UI/UX was done by me from scratch.

If you need access to the coding solutions, you can get an invite here.

Botty. A basic conversational bot using socket.io and nodeJS (open source).

Alex Gurr — Fri, 04 Dec 2020 03:24:39 +0000

Whilst working on my latest React coding challenge, a messaging client with sockets, I ran into the need for a simple backend to facilitate a bot conversation.

I've been spending quite some time lately scouring the internet for a free, easy-to-use conversational bot without much success. I tried to set up a bot service through Microsoft Azure, but it's definitely not an easy process and didn't get anywhere. There aren't really any API offerings either, certainly not any free ones.

Botty is a nodeJS based, socket server that provides basic automated conversations. There's no AI, no smarts or anything complex. You provide a dataset of request/responses and it uses string pattern matching to work out the most accurate response it can find. It's highly customisable and comes with a bunch of natural behaviours out the box, such as typing events and pauses. I've sourced a pretty good dataset with a bunch of basic responses to get started.

You can check Botty out on GitHub here or use the hosted version at https://botty-beep-boop.herokuapp.com. There's nothing like Botty available at the moment, and everything's open source.

Spootify. The latest reactJS coding challenge in react-coding-challenges on GitHub.

Alex Gurr — Wed, 28 Oct 2020 07:58:27 +0000

Hello! My name's Alex and I built the react-coding-challenges collection on GitHub. Find them here.

Today I'm excited to announce the latest challenge, Spootify. A basic Spotify clone, designed to test you around API consumption and loading state. Check it specifically out here or head over to the main code challenges repository. All UI/UX was done by me from scratch.

If you need access to the coding solutions, you can get an invite here.

React Drive - An all-in-one react wrapper around Google's drive file picker. Supports direct downloads & blob exports.

Alex Gurr — Sun, 17 May 2020 04:44:23 +0000

https://github.com/alexgurr/react-drive

https://developers.google.com/drive/api/v3/picker

I made this library to try and solve a bit more of the file picker flow, while providing a bit more simplicity with use. React drive can automatically pull down any selected files as blobs or download them directly to the user's machine (as well as passing the drive docs if needed).

Examples and docs in the readme. Feel free to add any issues/feature requests in the repo.

There's only one existing library that's similar to this and it doesn't really have any smarts around post-file selection. It also exposes a lot of props that really aren't needed in my opinion.

What is function Memoization and why should you care?

Alex Gurr — Tue, 28 Apr 2020 07:23:55 +0000

Memoization is a general software engineering principal/idealogy that can be applied to code in any language. My examples and libraries will all be JavaScript.

So What is Memoization?

Memoization is the principal of caching the result of a function call. If you call a function multiple times with the same arguments, you'll get the cached result every time. The logic in your function will not re-run when there's a cached result.

Why/When Would I Ever Need This?

Memoization is great when you find functions being called over and over again (such as in a render call in React). Your function might have some complex logic that your performance would benefit from by not calling the same logic over and over.

tl;dr performance for functions called multiple times with the same arguments.

Memoization in React

The concept of Memoization in React is exactly the same. We want to cache the result of a function call. Except in this scenario, our function returns JSX and our arguments are props.

If you have a parent being re-rendered, your child function will be called on every render, even if the props don't change. React provides us a React.memo utility and a useMemo hook which we can utilise in our functional components to prevent unnecessary re-renders.

We can also utilise normal Memoization in class methods and other JS functions in our react components. A traditional pattern in React class components was to react to prop changes through componentWillReceiveProps, apply some logic to a prop and set it in state. Now that componentWillReceiveProps is on the way to being deprecated, Memoization provides us a great alternative method to achieving the same result. See the examples section below.

https://reactjs.org/docs/react-api.html#reactmemo

Some vanilla JS memoization Libraries

For general JavaScript, I'd recommend two battle-tested libraries instead of trying to implement yourself, which I've covered below.

Lodash.memoize

Creates a memoization results map, meaning it will effectively store the history of all results for use in the future.

Serialises only the first argument to string. Be careful about passing objects. Multiple arguments aren't compared.

Useful if you're calling the function from multiple places with different arguments.

https://lodash.com/docs/4.17.15#memoize

Memoize One

Stores the last result of the function call. Will only ever compare the arguments to the last ones the function was called with.

Uses all the arguments for comparison between function calls. No serialisation of objects so you can pass anything.

Useful if you're only calling the memoized function from one place.

https://github.com/alexreardon/memoize-one

Differences Between the Two

Lodash memoize will serialize the arguments to use as a map key
Lodash memoize will only use the first argument
Memoize One will only remember the set of arguments/result of the previous function call. Lodash memoize will maintain a result map.

How About Some Examples?

A normal function

import _memoize from 'lodash.memoize';
import memoizeOne from 'memoize-one';

const myFunc = users => users.filter(user => user.gender === 'female');

const myMemoizedFunc = _memoize(user => users.filter(user => user.gender === 'female'));

const myMemoizedOnceFunc = memoizeOne(user => users.filter(user => user.gender === 'female'));

React.memo

import React, { memo } from 'react';

function MyFunctionalComponent {
  return <div />;
}

export default memo(MyFunctionalComponent);

Before/After, React class component real world scenario

Before

import React, { Component } from 'react';

function filterUsers(users) {
  return users.filter(({ gender }) => gender === 'female');
}

export default class FemaleUserList extends Component {
  constructor(props) {
    super(props);

    const { allUsers } = props;

    this.state = {
      femaleUsers: filterUsers(allUsers)
    }
  }

  componentWillReceiveProps(nextProps) {
    const { allUsers } = nextProps;

    if (allUsers !== this.props.allUsers) {
      this.setState({
        femaleUsers: filterUsers(allUsers)
      });
    }
  }

  render() {
    const { femaleUsers } = this.state;

    return femaleUsers.map(User);
  }  
}

After

import React, { Component } from 'react';
import memoizeOne from 'memoize-one';

export default class FemaleUserList extends Component {
  // We bind this function to the class now because the cached results are scoped to this class instance
  filterUsers = memoizeOne(users => users.filter(({ gender }) => gender === 'female'));

  render() {
    const { allUsers  } = this.props;
    const femaleUsers = this.filterUsers(allUsers);

    return femaleUsers.map(User);
  }
}

A React form

import React, { Component } from 'react';
import _memoize from 'lodash.memoize';

export default class FemaleUserList extends Component {
  // Yes, we can even return cached functions! This means we don't have to
  // keep creating new anonymous functions
  handleFieldChange = _memoize((fieldName) => ({ target: { value } }) => {
    this.setState({ [fieldName]: value });
  }); 


  render() {
    const { email, password } = this.state;

    return (
      <div>
        <input onChange={this.handleFieldChange('email')} value={email} />
        <input
          onChange={this.handleFieldChange('password')}
          value={password}
          type="password"
        />
      </div>
    );
  }
}

Closing Words

Memoization is a great tool in a developer's arsenal. When used correctly and in the right places, it can provide great performance improvements.

Just be aware of the gotchas, especially when using React.memo and expecting things to re-render.