NFL Blitz.js

Issue #79.December 20, 2021.2 Minute read.
Bytes

After receiving our billionth request for it, we finally decided to build out an /archives page for Bytes. Please clap.

3d movie Meme

3D movies are the future

Framer Motion goes 3D

Hold onto your hats and (3D) glasses — because Framer Motion has entered the 3rd dimension.

Okay, what? Framer is a design and prototyping tool that was kind enough to release their animation library for React, aptly named Framer Motion. Because… you know, it moves. With it, you can create declarative, performant animations that’ll blow the socks off of anyone using your site (green or otherwise).

What about the 3D? Browsers have been rendering 3D views to the <canvas> element for years with WebGL, and the popular three.js library makes it much easier. React Three Fiber (R3F) has become de-facto way to use three.js in React, allowing your cameras, lights, and 3D objects can be composed as React components.

This new update makes it possible for Framer Motion to animate R3F components. It’s like a Russian doll of API abstractions, but in 3D.

Using it is easy: Just import their magic motion helper and put it at the front of your component name. It works with any R3F component and supports every powerful feature provided by Framer Motion without sacrificing the convenience of R3F.

Here’s an example which renders a 3D cube and continuously rotates it using the declarative API of Framer Motion.

<motion.mesh
  rotation={[Math.PI / 2, 0, Math.PI * 2]}
  scale={3}
  animate={{
    rotateZ: 0,
    rotateY: 0.3,
    transition: {
      rotateZ: { duration: 1.5, ease: "linear", repeat: Infinity },
    },
  }}
>
  <boxGeometry args={[1, 1, 1]} />
  <meshPhongMaterial
    color="#ffdd00"
    emissive="#ff9500"
    specular="#fff"
    shininess="100"
  />
</motion.mesh>

Framer Motion 3D also tackles one of the hardest problems with 3D on the web: how do you animate the 3D canvas on the 2D screen without introducing distortion? Framer Motion’s solution is trivial: use the <MotionCanvas> and <LayoutCamera> components, animate the surrounding DOM elements, and it “just works” - no futzing with CSS transforms and messy matrix math.

Be sure to check out some of the examples — they’re real and they’re spectacular.

The Bottom Line: I personally can’t wait to use Framer Motion 3D to create a shot-for-shot remake of Spy Kids 3D over my holiday vacation. The hardest part will be getting the vein in Sly Stallone’s forehead to bulge out just right, but we’ll get there.

A job you might actually like

We’ve partnered with our friends over at Portal to make getting your next job suck a little less.

Here’s how it works. Head over to our Portal, upload your resume and contact info, and you’ll be connected to 50+ legit (and pre-vetted) tech companies — including Discord, Zapier, Coinbase, OpenSea, DoorDash, and some YC-backed startups.

If a recruiter at one of those companies thinks you might be a good fit, they’ll contact you directly and skip you straight to the interview round.

It doesn’t cost anything, and there’s no catch. We’re doing this because 1) We love you, and 2) We love money (these companies will pay us a finders fee if they end up hiring you). Guess that means we’re headhunters now, hope this message finds you well.

Let’s all get this bread in 2022.

Spongebob Meme

The gang’s all here

Create React App v5

It might not feature all those new-and-hot build tools like Vite, esbuild, or Snowpack — but create-react-app is still the OG way to spin up a React app with one command. And they just released v5 last week.

Quick review: CRA’s magic is how it makes it so you don’t have to read the Webpack docs configures and updates all your build tools for you (Webpack, Babel, and ESLint).

It’s kind of like using SparkNotes to write your end-of-semester book report — you may not understand everything that’s going on in the book (or under the hood of your app), but you’ll definitely get the assignment done a lot faster.

CRA5 highlights:

  • Updated dependencies — All major dependencies got updated to their latest version, including Webpack, Jest, ESLint, and PostCSS. You can update them all at once by updating react-scripts to v5.

  • New Tailwind CSS support — Tailwind stans rejoice, because it’s now a much easier (and cleaner) experience to use the CSS framework with CRA.

  • Fast refresh improvements — Fixes up a few known bugs and improves fast refresh performance overall.

Bottom Line: Like the Houston Rockets, CRA’s best days are probably behind it. With that said, it’s still the most popular way to spin up a React app and the team has shown they’re still dedicated to keeping it up to date – even with “last month’s” tech.

JS Quiz - Answer Below

In what order will the logs below show up in the console?

console.log('First')

setTimeout(function () {
  console.log('Second')
}, 0)

new Promise(function (res) {
  res('Third')
}).then(console.log)

console.log('Fourth')

Cool Bits

  1. Is the new AWS RUM tool an industry game-changer? Real User Monitoring for Amazon CloudWatch was just announced at AWS re:Invent, adding to their existing suite of over 200 products and services. But how does it stack up? Raygun tried it out (and wrote about it), so that you don’t have to. [sponsored]

  2. Gajus Kuizinas created the Canonical ESLint Config with over 1,000 ESLint rules. I’m not sure who gave Gajus the authority to define that canon, but I’d love to get his take on whether or not The Clone Wars should be considered part of Star Wars canon.

  3. Alternatively, you could just break free of ESLint altogether by using quick-lint-js — a new linter that promises to be “faster, easier, and friendlier” than the original. Buckle up for the Linter Wars because the Roaring ’20s are back baby.

  4. Blitz.js is considering a big pivot towards a “framework agnostic toolkit” approach. We can only hope this pivot will include a joint venture with EA Sports to resurrect (co-brand) the greatest sports video game of all time: NFL Blitz.js.

  5. patterns.dev is a free (and very in depth) book on design and component patterns for building powerful web apps with vanilla JavaScript and React.

  6. The Storybook team wrote this 9-chapter UI Testing Handbook with lots of great info. I haven’t found a SparkNotes entry for it yet, but luckily my book report isn’t due til after Winter Break.

  7. The Tower team interviewed Mark Porter (CTO of MongoDB) about what it’s like running a giant engineering org and hiring/onboarding new employees. Turns out, that job seems pretty stressful. I also thought it was weird that this was his favorite job interview question — but I guess that’s why he’s a CTO and I’m a newsletter man.

  8. The Expo team released a preview of EAS Update — a new tool that lets you provide bug fixes or make other small changes to your mobile app in between app store releases. How do you like them _Apple_s?

JS Quiz - Answer

In what order will the logs below show up in the console?

console.log('First')

setTimeout(function () {
  console.log('Second')
}, 0)

new Promise(function (res) {
  res('Third')
}).then(console.log)

console.log('Fourth')

First, Fourth, Third, Second.

To fully understand this one you need an understanding of JavaScript’s event loop – specifically, the Call Stack, Task Queue, Web APIs (for setTimeout), and the Job Queue. Turns out, that’s a little much to cover here so do some Googling and uh GLHF.