Async JavaScript, Furbies, Denny's, and Skeletor

Issue #88.February 21, 2022.2 Minute read.
Bytes

Zuck is now referring to all 45,000 Meta employees as Metamates, which inspired us to come up with an equally fun-and-not-creepy-at-all nickname for all 71,000 of you.

This week, we’ve got graphs on graphs, Safari’s new love, and righteous anger for the Nickelodeon Kids’ Choice Awards.

Welcome to #88, #BytesBabies.

Nickleback Graph Meme Inception

Welcome to hell

Graph. Graph. Graph. Graph.

Both Apollo and Netlify made announcements this week involving the word “Graph.” At this point, “Graph” seems to be more of a vibe than an actual technical term. Our working theory is that everyone has caught on to the fact that all it takes to raise your next round of funding is the right combination of words like “Federation”, “Composable”, “Extensible”, “Decoupled”, and “Streamlined”.

But despite the buzzword copy-pasta, you have to give Netlify props for how fast they’ve incorporated “One Graph” (which they acquired in November) into their product. The freshly minted Netlify Graph service offers one-click integrations with third-party APIs and automatically hooks them up to a (managed) GraphQL endpoint.

Netlify Graph enables developers to seamlessly integrate third-party APIs and services into their web applications without writing API-specific code. Instead of connecting different APIs and SDKs with brittle code, you can now abstract all that behind a convenient GraphQL interface.

With Netlify Graph you can:

  • Connect to 3rd party API’s like Stripe, GitHub, Contentful and more
  • Manage auth / permissions across APIs
  • Explore the data across services in one place
  • Use a nice UI to build and test queries for your data
  • Generate Serverless functions to access the data in your app

Bottom Line: Even though it’s been 7 years and no one still really knows what “Jamstack” means, Netlify is finding new ways to bring more buzzwords one-click goodness into your workflow.

Jeopary contestant answers what is pain meme

Building notifications from scratch [sponsored]

Courier’s new API saved me from my PM

You know that one person on your team who loves building complex notification systems?

Of course you don’t.

That’s because notifications have become a special kind of hell with tons of different platforms to worry about — email, SMS, chat, web and mobile push, Slack and more.

That’s what makes Courier’s simple API so powerful. It’s a one-stop shop for all notification platforms — so you can use the same API call to send your users an email, an SMS, a Slack message, or a push notification.

And their new Courier Elemental update gives you a JSON-based syntax to easily customize the design and content for each platform you send messages to.

This makes designing the actual notifications a lot less tedious, and it lets you create more dynamic notifications like magic login links and location based alerts.

So tell your PM to go as crazy as they want with notifications, because Courier’s got your back.

Check it out and get 10,000 free sends a month.

Tim Cook as a Spartan

I am a benevolent god

Safari ❤️ mobile web

On Valentine’s Day, Safari expressed their undying love for robust web applications by releasing their conservative approach to supporting the File System Access API — which lets you build web apps with the ability to create, open, read, and write files directly.

That might not sound like huge news, but if you know much about Safari, Apple, or Mr. Timmy Tim (Cook, not Chalamet this time), you’ll also know that this is a big shift — since historically, they’ve shown approximately zero love for the idea of robust web applications (especially mobile web apps).

Why tho? User privacy. Money (obviously). As you probably know, Apple makes fat stacks of cash from its 30% cut on all in-app purchases. (They’ve easily made $100k from my mom’s Candy Crush upgrades alone.) And since Apple makes zero dollars when you buy something in a Safari web browser, it’s pretty easy to understand why they’ve been slower than Chrome when it comes to adopting certain APIs.

bUt wHaT aBOut pRIvACy? People often point to privacy concerns as the legitimate reason for Safari’s hesitation to support “native APIs.” But isn’t this is the same company that downloaded the worst U2 album of all time onto every iPhone in the world without our consent? So yeah, not sure I buy that line of reasoning.

Why support this API now? We don’t know for sure, but it could be a response to a few different forces — increased regulatory scrutiny on the App-Store’s “anti-competitive” business model, Chrome’s continued popularity growth, the fact that users aren’t really downloading new apps, and most importantly… developers consistently begging the WebKit team to let them build cool stuff.

Bottom Line: Thanks Tim. You’ll always have a monopoly on my heart.

Spot the Bug — Sponsored by Mergify

Teams at Amazon and Mozilla use Mergify to prioritize, queue, and automatically merge their PR’s. You’ll probably like it too. Check out their Startup Program to get 12 months free.

import { useRef, useEffect } from 'react'
import {Modal, ModalHeader, ModalBody, ModalFooter} from '../components/Modal'

export default function InputModal({isOpen, close}) {
  const inputRef = useRef(null)

  useEffect(() => {
    if (isOpen) {
      inputRef.focus()
    }
  },[isOpen])

  return (
    <Modal isOpen={isOpen}>
      <ModalHeader>
        <h3>What is your name?</h3>
      </ModalHeader>
      <ModalBody>
        <input name="name" ref={inputRef} />
      </ModalBody>
      <ModalFooter>
        <Button onClick={() => close()}>Close</Button>
      </ModalFooter>
    </Modal>
  )
}

Cool Bits

  1. Have you ever wanted to see Async JavaScript patterns, Furbies, Denny’s, and Skeletor in the same video? Well I have FANTASTIC news for you. Our newest video, The Story of Asynchronous JavaScript, covers all that and more.

  2. Next.js 12.1 was just released with on-demand ISR (Incremental Static Regeneration) — which was apparently one of their most requested features. I find that hard to believe, since I’ve personally mailed Guillermo dozens of letters specifically asking for “more graphs,” but it’s fine.

  3. Did you know that only 1 out of 100 users report bugs? Make sure you’re not flying blind with this complete guide to error monitoring. It’s got everything you need from workflow best practices, key metrics, and how to choose the right tools for your team. [sponsored]

  4. James Long wrote a cool article on Exploring model-based testing for UIs — which is a nice companion piece to the article I’m working on, Exploring spray-and-pray-based non-testing for UIs.

  5. GatsbyConf is starting on March 2nd, and we’ve been promised that it’ll be packed with more fireworks than a gender-reveal party gone horribly wrong (one of my favorite YouTube niches).

  6. Nanda Syahrasyad wrote some interesting learnings he had about tokenizers while rebuilding Babel from scratch over the weekend. I have many questions for Nanda, but I’m mostly curious about how long it’ll take him to 1) become the lead Babel maintainer, and 2) decide to rewrite everything in Rust.

  7. Express.js released its v5 beta, a mere seven years after releasing its first v5 alpha. So at least React is following some historical precedent with its own release cadence.

  8. A lot of you had opinions about a JavaScript survey that came out last week, but I just hope you all come with that same energy if Tom Holland and Zendaya don’t win the Nickelodeon Kids’ Choice award for Best On-Screen Kiss this year.

Spot the Bug — Solution

React treats the ref as a “box” that can hold a mutable value in it’s .current property, including DOM elements. Since React needs a way to update the ref’s value without completely overriding it, the ref itself is an object with a mutable .current property that can be changed any time without changing the object reference.

The bug happens when we try to .focus() the inputRef. The input DOM element is stored in the .current property, so the correct way to focus the input is to call inputRef.current.focus().

Here’s the solution -

export default function InputModal({isOpen, close}) {
  const inputRef = useRef(null)

  useEffect(() => {
    if (isOpen) {
      inputRef.current.focus()
    }
  },[isOpen])

  // ...

}

Refs can store more than just DOM elements - they can store any value a component needs to hold on to without causing a re-render whenever the value changes.