The Deno-lution

Issue #317.August 26, 2024.2 Minute read.
Bytes

Today’s issue: Controlling the population of JavaScript dates, scary JS stories to tell in the dark, and good old fashioned name calling.

Welcome to #317.

Eyeballs logo

The Main Thing

Kip standing in a du rag

It's pronounced Deno, actually

The Deno-lution

Last week’s Deno 1.46 release was a big deal for two reasons: 1) it’s the last minor release before Deno 2 comes out, and 2) it shows how much Deno has evolved since Ryan Dahl first introduced it to the world six (!!) years ago.

Let’s break down three big things the Deno team has been working on, and see if this Deno evolution Deno-lution has the next-gen runtime ready for primetime.

#1 Fixing the module system: Initially, one of Deno’s biggest bets was on a decentralized module system that eliminated the need for npm or node_modules. Unfortunately, this approach didn’t scale well, so they created the JavaScript Registry instead.

JSR lets you publish TypeScript modules, it generates API docs and .d.ts files for you, and it transpiles the code into cross-runtime compatible ES modules. It basically fixes everything developers hate about packaging and distributing modules 🙏.

Node compatibility: It turns out that popular SDKs like @aws-sdk, @stripe, and others all rely on Node-specific APIs. So rather than force everyone to create Deno-specific alternatives, the team has transitioned to building full compatibility with Node.js.

Stable standard library: With last week’s release, Deno’s Standard Library is hitting v1.0 and is now officially stable. It’s heavily inspired by Go’s stdlib and provides a set of high-quality packages for common use cases that are audited by the core team and guaranteed to work with Deno.

Ideally, you can use these built-in modules for 90% of use cases and not need to bloat your project with tons of dependencies. This should make your applications more secure and reliable – aside from the trash code you write yourself.

Bottom Line: Deno’s mission is to “uncomplicate JavaScript.” Ironically, they’ve taken a fairly convoluted route to get to where they are today – but those changes have the runtime looking more stable, secure, and ready for production than ever.

Long live the Deno-lution.

        
idx-logo.png

Our Friends
(With Benefits)

Kermit walking with a toolbox

Gemini about to put in another honest day's work

Google’s Project IDX is ready for prime time

Google just launched the long-awaited open beta of Project IDX, the web-based development platform bringing your entire full-stack workflow to the cloud.

It supports languages like Go, Python, Rust, PHP, and of course JavaScript – making it a one-stop shop to build, test, and deploy any project. Here’s what that looks like:

Step 1: Instantly spin up a new project (or import an existing one) with the online IDX editor. It supports every popular framework, so you never have to mess with boilerplate or set up a local env.

Step 2: Use its built-in Gemini AI assistant to build faster, and get a live preview of your app with built-in web previews and emulators.

Step 3: Share the project with your team just like you’d share a Google Doc, and collaborate without replicating your local env 🙏.

Step 4: Deploy your app to Firebase or Cloud Run with one click, or spin up your own DB with Postgres, MySQL, and more.

Try out the Project IDX beta.

Pop Quiz logo

Pop Quiz

Sponsored by FusionAuth

They just added passkeys to their free tier, which is a paid feature for almost every other auth provider. Try it out and protect your users from insecure passwords.

How can we improve this code?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic List</title>
  </head>
  <body>
    <ul id="myList"></ul>

    <script>
      let items = [...Array(1000).keys()].map((i) => `Item ${i}`);

      let ul = document.getElementById("myList");

      for (let item of items) {
        let li = document.createElement("li");
        li.textContent = item;
        ul.appendChild(li);
      }
    </script>
  </body>
</html>
Cool Bits logo

Cool Bits

  1. Iago Lastra wrote about how JavaScript dates are about to be fixed – which you think should really help control the JavaScript dates population.

  2. Robby Pruzan wrote a deep dive on how he Implemented React from scratch.

  3. James Cowling built Cronvex – an implementation of user space crons that let you register periodic jobs that call third-party http endpoints. It’s similar to EasyCron or FastCron, but it’s completely free, open source, and built on top of Convex. [sponsored]

  4. Max Stoiber wrote about how Developer tools are different than tools for any other profession.

  5. Chrome 129 will come with two new snap events for JavaScript – scrollSnapChange and scrollSnapChanging. Snip snap, snip snap.

  6. Over-the-wire is a network inspection library for Node. Not to be confused with Through-the-wire, which is a Kanye-inspired library that drinks a Boost for breakfast, and Ensure for dessert.

  7. Max Schmitt wrote a short article on why Toasts are Bad UX. I prefer to order pancakes, I just sip the sizzurp.

  8. The React Universe Conf is on September 5-6, featuring a stellar lineup including Dan Abramov, Delba de Oliveira, Kent C. Dodds, and many more! 🚀✨ Can’t make it in person? Register for FREE Livestream Access and join from anywhere! [sponsored]

  9. Trevor Lasn wrote about The only widely recognized JavaScript feature ever deprecated, and other scary stories to tell in the dark.

  10. React Email 3.0 comes with a new component library, RSC support, and everything else you need to build a newsletter of 214,720 super close friends who will definitely all show up to my Deno-themed improv show next week, right?

Pop Quiz logo

Pop Quiz: Answer

Sponsored by FusionAuth

In the initial example, we are appending each list item to the DOM as we create it. This is inefficient because the DOM is updated each time we append a new list item. Instead, we can create a document fragment and append all of the list items to the fragment. Then, we can append the fragment to the DOM. This way, the DOM is only updated once.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dynamic List</title>
  </head>
  <body>
    <ul id="myList"></ul>

    <script>
      let items = [...Array(1000).keys()].map((i) => `Item ${i}`);

      let ul = document.getElementById("myList");
      let fragment = document.createDocumentFragment();

      for (let item of items) {
        let li = document.createElement("li");
        li.textContent = item;
        fragment.appendChild(li);
      }

      ul.appendChild(fragment);
    </script>
  </body>
</html>