15 badges earns you a waffle party

Issue #104.June 13, 2022.2 Minute read.
Bytes

This week, we’ve got one IDE going to heaven, fifteen GitHub badges to earn a waffle party, and a million ways to be cruel.

Welcome to #104.

Tom going to heaven

Welcome to the cloud, my son

Is the cloud heaven?

Last week, GitHub announced that they’re sunsetting Atom Editor. It’s always strange to mourn the loss of a tool we’ve loved over the years, but at least your kid won’t be asking you if Atom is going to heaven (like when Petey the fish died).

GitHub’s decision to move on from Atom says a lot about where we’ve been as an industry and even more about where we’re heading. Let’s dive in.

How did we get here? Atom was a big deal when it came out in 2014. It was the first “hackable” IDE — the idea of extending the editor’s functionality by writing browser code (HTML, CSS, JS) was a revelation. To enable this, GitHub built a platform called Atom Shell (aka Electron) — which famously makes your laptop fan go brrrrr powers basically every app developers use (Slack, Discord, VS Code, and more).

So why did Github shut it down? The obvious reason was that Microsoft already had VS Code when they bought GitHub, and no one needs 2 editors 🙃. But more interestingly, GitHub said that, “we decided to sunset Atom so we can focus on enhancing the developer experience in the cloud with GitHub Codespaces.” The bigger picture here is how all dev tools are moving to the cloud.

Here’s what that means for all of us:

  • Easier to setup and run code (GitHub is building CodeSpaces with CodeSpaces… very meta.)

  • More “local development” will be done through a thin client running your code in the cloud (like Cloudlare’s wrangler cli)

  • Getting help from a friend to debug an issue should be much nicer than a Zoom screen share (we already have this, but this experience should become the default)

  • Microsoft is going to print more cash than ever

Bottom Line: Atom’s in heaven now, but maybe we’ll see it there since we’ll all be hanging out in the cloud. Either way, thanks for giving us the best syntax theme of all time (Atom Dark).

Corpse admiring silk

“You set this up in 5 minutes? Incredible.” [sponsored]

FusionAuth made my job fun again

I got into this industry for one reason — my burning passion for building complex authentication solutions.

Ok, that’s a lie.

Call me old fashioned, but I’m a little more interested in building features that users *actually* care about — instead of worrying about crap like SSO, MFA, user management, and all the security headaches that come along for the ride.

That’s why we’re huge fans of FusionAuth.

They handle all of the messy auth and security stuff for you, and make it super easy to integrate with your app in 5 minutes or less (no matter how weird your tech stack is).

They’re also way more flexible than most other auth tools — you can deploy anywhere, you can self-host, and you can easily customize whatever you want with their straightforward APIs and webhooks.

Check it out — and never worry about hand rolling auth again.

Lil wayne sitting on money

A milli a milli a milli

Million.js wants to make VDOM cool again

It’s not 2015 anymore. We’ve stopped doing up the top button on our shirts, the Yik Yak app won’t open on my iPhone 6S, and React’s once-revolutionary virtual DOM has fallen out of favor in many circles.

That last fact is largely due to VDOM’s higher compute costs (unlike the best things in life, diffing ain’t free). And that’s one of the main attractions of newer frameworks like Svelte and Solid.js — they don’t have a Virtual DOM at all. Instead, they use a compiler to pre-render beforehand and only generate the code they need, making them a lot faster in most cases.

But the virtual DOM just got a virtual shot in the arm with the emergence of Million.js — a new, compiler-augmented virtual DOM that’s sponsored by Vercel and created by 17-year-old Aiden Bai.

Aiden is about to start interning at Vercel this summer (because of course he is), and he describes Million.js as if “React’s API and Svelte’s compiler had a baby with super speed.”

Translation: You still get all the declarativity (real word?) of React’s VDOM, but with much better performance by computing the UI beforehand with a fast, Svelte-like compiler.

Million just became officially compatible with React 18, but you can use it with any library. It’s extensible, and it supports all compiler optimizations, so you could easily create your own custom compiler on top of Million if you’re into that sort of thing.

Bottom Line: At the end of the day, we’re all just out here trying to render lists. And this is just one more of a million ways to do it. Leave it to Gen Z to recycle old trends into something hip and modern.

Jobs

Front-end Engineer at Phantom

Phantom is looking for front-end devs with experience in React, TypeScript, and Next.js who are interested in helping us build out new features on our web platform and launch new products. The role is fully remote and provides lots of freedom and autonomy as we work to provide great experiences for our 1 million+ users.

Senior or Staff Front-end Engineer - React (100% Remote)

Close.com is looking for 3 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of ~55 high-performing, happy people that are dedicated to building a product our customers love.

JS Quiz — Sponsored by BugHerd

BugHerd is by far the best way to get feedback on a website from all stakeholders. No more Slack threads, screenshots, spreadsheets, or figuring out what browser everyone’s using. Try it free.

What is this code doing?

const friends = ['Aliyah', 'Alex', 'Ben', 'Cassidy', 'Carlos']

const { length, 0: first, [length - 1]: last } = friends

Cool Bits

  1. GitHub just announced GitHub Achievements — aka badges on your GH profile when you reach certain milestones. Just remember: 5 badges earns you a finger trap, 10 badges earns you a music dance experience, and 15 badges earns you a waffle party. Praise Kier.

  2. CarbonQA provides QA services geared for dev teams. They’ll boost your team’s morale sky-high by… breaking your code repeatedly. But the good news is that you’ll never have to waste time on testing again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

  3. Adam Rackis wrote about Building Interoperable Web Components That Work With React. His opening line really helped set it all up — “Two households, both alike in dignity, in fair Verona, where we lay our scene.”

  4. Plasmo is a free core OSS React framework for building browser extensions that bills itself as “the Next.js of browser extensions.” What a coincidence, writing this newsletter every weekend is “the Next.js of my crippling caffeine addiction.”

  5. Deepkit is a new TypeScript framework that gives you runtime types, a high performance TypeScript ORM, a remote procedure call for TS, and more.

  6. The CSS Day Conference happened last week in Amsterdam, and Michèle van den Aardweg was kind of enough to write up this TLDR. I didn’t make it to the conference this year, but lucky for me, every day is CSS Day (and chest day).

  7. Apple announced some cool new Safari features at last week’s WWDC, including Web Push for MacOS (coming to iOS next year). How many push GitHub push notifications do I need to receive in order to earn a badge?

  8. The 90th TC39 meeting happened last week, and Hemanth HM (one of the delegates) wrote up this nice summary of the proposals that were discussed. But here’s the thing — I don’t see any of these JavaScript wizards driving Lambos, so we’ve decided to pivot: this is officially a Laravel newsletter now. As soon as I figure out wtf a Laravel is.

JS Quiz Solution — Sponsored by BugHerd

const friends = ['Aliyah', 'Alex', 'Ben', 'Cassidy', 'Carlos']

const { length, 0: first, [length - 1]: last } = friends

console.log(first) // Aliyah
console.log(last) // Carlos

Since arrays are just objects with numeric keys and a length property, we can use destructuring and computed property names in order to grab the first and last elements in any array. Kind of worthless, but kind of cool.