Better off Zed

Issue #258.January 29, 2024.2 Minute read.
Bytes

Today’s Issue: React libraries resurfacing my childhood trauma, Expo solidifying my Valentine’s Day plans, and Lions’ fans dulling their pain with Web Components.

Welcome to #258.


Eyeballs logo

The Main Thing

Shia labeouf with a group of men making the I'm shy fingers

Developers when you promise them a slightly faster IDE

Better off Zed

Last week, Zed announced that they’re open-sourcing their next-gen editor and the UI framework that powers it — and developers were hyped.

The announcement tweet blew up, the Zed repo immediately added 13,000+ GitHub stars, and Hacker News was filled with so many positive comments that I thought Pebble was launching another smartwatch (RIP).

Why all the excitement? Two reasons:

  1. Everybody loves free software.
  2. Zed might be the chosen one to save us all from VS Code lagginess.

Zed’s main selling point is that it gives you all the power of a full-fledged IDE like VS Code, with the responsiveness of a lightweight editor like Sublime Text.

To achieve this black magic, the Zed team built their own GPU-accelerated UI framework for Rust called GPUI, which they then used to build the Zed editor itself. This kind of feels like building an entire dairy farm from scratch just to open an ice cream shop, but how do you think Ben & Jerry’s became the creamy nectar of the gods?

Thankfully, this isn’t the Zed team’s first time building farm-to-table software like this. Their founders also built the Atom editor at GitHub a decade ago, along with Atom Shell Electron.js, the cross-platform framework that powered Atom and still powers VS Code today.

But wait, isn’t Electron the main reason VS Code can feel laggy and slow? Yes, what a plot twist.

By building a native desktop app with Rust and GPUI, Zed’s creators are taking the opposite approach of how they built Atom and Electron. This allows Zed to feel noticeably faster and smoother than VS Code, while still shipping all the modern IDE features you’d expect, plus a killer feature you probably wouldn’t expect — multiplayer mode.

This lets multiple developers navigate and edit code together inside a shared workspace and discuss changes you’re making with a Slack-like chat panel. Even with all this real-time collaboration, it’s still fast af.

These team collaboration features will probably be how Zed (a VC-backed startup) makes money in the future, since they’ve promised that the IDE itself will always be free and open source.

Bottom Line: Congrats to the Zed team for graduating from the Ryan Dahl school of “Starting a new project years later to solve my original problem in a better way,” and godspeed on your quest. We’re all rooting for you.

        

OneSchema logo

Our Friends
(With Benefits)

Close up of a Ninja Turtle saying Cowabunga it is

Live look at your app's CSV importer right now

Launch CSV imports 10x faster with OneSchema

If there’s one lesson I want my kids to learn from me it’s this: never build CSV import functionality into your app from scratch.

It always takes months longer than you think, and it’ll probably break as soon as one of your users tries to upload a messy data file.

That’s why smart teams like Ramp and Vanta use OneSchema’s embeddable CSV importer to skip all that pain. They make it easy for you to set up and even easier for your customers to use.

But what makes OneSchema better than other CSV importers?

  1. Powerful bulk data editing features for your users like find & replace, auto-fix errors, and bulk delete/add rows

  2. By far the most performant data importer at scale (see benchmarks)

  3. Enterprise features like localization, advanced UI customization, and automations with the OneSchema API

Check it out — and see how it saves teams 6 months (!!) of engineering time on average.


Pop Quiz logo

Pop Quiz

Sponsored by Snyk

Check out their free Ethical Hacking 101 Workshop and learn to exploit prototype pollution and path traversal vulnerabilities and proactively fix security weaknesses.

Python has a range function that generates a sequence of numbers starting at the first argument, incrementing by the third argument, and stopping at the second argument.

range(0, 5) // [0, 1, 2, 3, 4, 5]
range(3, 9, 3) // [3, 6, 9]
range(10, 50, 10) // [10, 20, 30, 40, 50]

How would you recreate this in JavaScript?


Cool Bits logo

Cool Bits

  1. Expo 50 introduced a new DevTools Plugins API that lets you build your own browser-based plugins to debug and interact with parts of your library or app. I guess I do have Valentine’s Day plans after all.

  2. Astro 4.2 came out with improved accessibility rules, a new redirectToDefaultLocale config option, and experimental support for the Chromium browser-exclusive Speculation Rules API.

  3. Tamagui just released v1.88, and they’re calling it “one of our biggest releases ever.” I still can’t read about Tamagui without shedding a tear for my pet Tamagotchi I killed when I was 8. Forgive me, Mametchi 😭.

  4. Stream created this React SDK for Video and Audio, so you can build features like livestreaming, video calling, and audio rooms in days instead of months. Now you can give your users the power of Zoom or Twitter Spaces right inside your app. [sponsored]

  5. React is planning to add custom elements support in its next stable release, so pencil that into your calendar for sometime in Q4 2025.

  6. Expressive Code is a text marking and annotation engine for presenting source code on the web.

  7. Ollama just released their first JavaScript library, so you can easily integrate various LLMs into your JS apps. Thanks, Ollama.

  8. Basedash created this AI-generated interface to visualize, edit, and interact with your production data. You just connect your database, and it instantly gives you a beautiful suite of custom internal tools like dashboards, charts, and a data editor - all for free. [sponsored]

  9. Fatih Altinok wrote about Server-side rendering local dates without FOUC.

  10. David Bryant Copeland wrote this very detailed article called Web Components in Earnest, which walks you through how he built a palette generator using only custom elements. So if you’re a depressed Lions fan, this is an easy way for you to distract yourself from the pain for a few hours.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Snyk

range(0, 5) // [0, 1, 2, 3, 4, 5]
range(3, 9, 3) // [3, 6, 9]
range(10, 50, 10) // [10, 20, 30, 40, 50]

How would you recreate this in JavaScript? There are a few ways, one of them is the following.

const range = (start, stop, step=1) => {
  return Array.from(
    { length: (stop - start) / step + 1 },
    (value, i) => start + i * step
  )
}

The function uses Array.from() to generate an array of a specified length and fill it with values generated by the provided function. The length is calculated as (stop - start) / step + 1, which represents the number of elements in the desired range. The function passed to Array.from() generates each element by starting with start, adding an increment of i * step, where i is the index of the current element.