Those two magic words

Issue #144.December 12, 2022.2 Minute read.
Bytes

Today’s date is 12/12 and this is issue #144 🤯. I don’t know what that means, and my tarot card reader never came back from Burning Man this year, but hopefully it’s all good things.

Today, we’ve got a Vite aperitif, mistakes at prom, and a disturbing lack of Audrey Hepburn puns.

Welcome to #144 - you can read it online here.


Eyeballs logo

The Main Thing

One person whispering into Patrick Stewart's ear in Star Trek

"Zero config"

Those two magic words

Over the years, Storybook has become the de facto tool for developing and testing your UI components in isolation. The problem, like my osteoarthritic Grandma warming up for a track meet, it’s a nightmare to get up and running.

That is, until now.

That’s because this past week, Storybook announced their brand new Framework API, which brings “zero-config” support for your favorite framework… as long as your favorite framework is Vite. But don’t worry, support for NextJS, SvelteKit, Remix, and Nuxt are in the pipeline too.

Here are the details.

  • Zero Config: The two most beautiful words in the English language. But unless your favorite framework uses Vite, you’ll either have to wait for Storybook to build it, or go the DIY route for now. Thankfully, this new API makes it pretty easy to build and maintain your framework’s own “zero-config” solution.

  • Mocking: When you’re trying to isolate components, it’s super annoying to deal with things like data fetching or routing hooks that might work in your app but break in Storybook. This new API makes it easy to mock those calls (and can even do it automatically).

  • Extendable: If you’re the type of person who will never be satisfied until they can customize [insert random tool to fit your bizarrely specific use case], you’ll be happy to know that Storybook v7 is extendable for nerds power users.

Bottom Line: In addition to making Storybook much easier to use, it’s interesting to see how this new Framework API prioritized Vite support. This speaks to Vite’s crazy fast growth and makes us wonder if it ultimately could become Next’s most formidable (and perhaps most unexpected) competitor.

        

Retool logo

Our Friends
(With Benefits)

two kids covered in paint

When you ask the junior devs to build a few dashboards from scratch.

Retool is basically magic

It’s not 2013 anymore (RIP dubstep), and you don’t need three engineers spending a whole sprint on internal apps. Now in glorious 2022, you can whip up any internal tool you need in about 15 minutes with Retool.

I don’t think I’ve ever seen developers give a devtool this much love before. But since most devs hate building internal apps even more than they hate turning on their Zoom cameras for standup — I guess it makes sense.

Here’s how some of the best engineering teams in the world use Retool:

  • Financial services like Brex, Plaid, and Ramp use it to build apps that underwrite loans, measure risk, and investigate fraud.

  • Marketplaces like DoorDash and ShipBob use it to build back-office apps for sales and support teams.

  • Retail & E-comm companies like Amazon and Peloton use it to build apps that manage returns, promos, inventory, and GDPR compliance.

Try it out for free and see what cool stuff you can build in an afternoon.


The Job Board Logo

The Job Board

Senior Full Stack Engineer
Remote friendly
TS
$160-210k

Motion is looking for experienced TypeScript engineers to build the next generation of productivity tools. You'll inform key frontend architectural decisions that help Motion scale the next 2 order of magnitudes, create delightful user-facing features, and improve application performance. We are an ambitious team of 15 people distributed remotely across North America.

Have a job you want to fill?
Spot the Bug logo

Spot the Bug

Sponsored by The Developer Nation Survey

Take part in the most complete survey Developer Nation has ever created to share your thoughts, win amazing prizes, and shape key trends among developers for 2023.

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 1) {
      evenNumbers.push(numbers[i]);
    }
  }

  return evenNumbers;
}

getEvenNumbers([1,2,3,4,5,6])

Cool Bits logo

Cool Bits

  1. npm just announced new security features like a new code explorer and “granular access tokens”. Hopefully we can securitize these new security features on the blockchain and start pumping $GAT tokens like it’s October 2021. (My second mortgage in Miami isn’t going to pay itself.)

  2. JSworld Conference is the #1 JS conference in the world, and it’s BACK in Amsterdam on Feb. 8-10. There will be 45 speakers from the Vite, Remix, and Angular teams, and Evan You is going to be DJ’ing inside a giant bouncey house shaped like a bowl of shrimp cocktail (that last part definitely isn’t true, but imagine those vibes). [sponsored]

  3. SWR just released v2 of its popular data fetching library for React. As retaliation, the React Query team just released TanStack Query Query, a query library for TanStack Query.

  4. Vite 4.0 was just released. We’re writing a main story about it next issue, so consider this a little aperitif before we fully clench your Vite thirst on Thursday.

  5. Harlem is a “powerfully simple” global state management library for Vue 3 that’s trying to take Pinia’s crown for having the cutest logo in the Vue ecosystem.

  6. Lydia Hallie wrote about Optimizing Web Fonts in Next.js 13. Because if there’s one thing John Mayer has taught us, it’s that our font choices matter.

  7. Rome released v11 this month (which happens to be a big holiday month), and they didn’t even make one Roman Holiday pun. Audrey Hepburn would like a word.

  8. Paul Armstrong helped build the very first version of Twitter’s web app, and he just wrote about How he’d build a social web app like Twitter today. He does end the piece with “while I strongly believe the solutions outlined here would work well, they’re all theoretical” – which is the exact line of thinking that got me in trouble at Prom in High School.


Spot the Bug logo

Spot the Bug: Solution

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 1) {
      evenNumbers.push(numbers[i]);
    }
  }

  return evenNumbers;
}

getEvenNumbers([1,2,3,4,5,6])

Our logic is a little off. n % 2 will return 0 if n is an even number. The bug is that our code checks if it returns 1 (which would be an odd number).

To fix this, we can change that line to see if it evaluates to 0, not 1.

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
      evenNumbers.push(numbers[i]);
    }
  }

  return evenNumbers;
}

getEvenNumbers([1,2,3,4,5,6])