Using the web to build the web

Today, we’re jumping on the StackBlitz rocket ship to take a quick field trip to the world of browser-based web dev. So be sure to buckle up and take your Dramamine, because it’s gonna be a bumpy ride.

Today’s issue: Oldie-but-goodie Git tips, sleepovers that end in misdemeanors, and Ernest Shackleton’s quest to migrate to Rust.

Welcome to #263.

---

Using the web to build the web

You probably know StackBlitz as the folks who run ViteConf, or the company whose CEO secretly squatted in the AOL office for two months, or the team who created WebContainers to build an online IDE that claims to be “faster and more secure” than local.

But let’s skip over the misdemeanor trespassing part of the story and zoom in on online IDEs for a minute. They can be great for specific use cases, but they’re typically slower and less secure than your local env, because they run on remote servers and stream the results back to your browser.

That’s why the crazy bastards innovators at StackBlitz spent the last half decade building WebContainers — a Wasm-based operating system that runs Node.js and npm/pnpm/yarn entirely in the browser.

This allows StackBlitz to immediately spin up a fully secure, link-shareable, fullstack dev environment for any JavaScript framework in milliseconds.

If your head is still spinning after reading that last sentence, here’s what it looks like in practice:

• One-click bug reproductions that let you share complete environments with a URL

• Easier design system adoption, by giving your team interactive documentation and one-click environments for using internal libraries

• Simplified PR reviews that let you easily move in and out of various branches and repos

Plus, for those of us who aren’t allowed to have nice things (at work), StackBlitz just dropped a self-hostable build — which, as you probably guessed, lets you run SB on your own infra. For the right price, they’ll even host it for you.

This means that all those slick, browser-first features work with your company’s version control system and private repos. Best of all, isolating all the compute within the browser means you just spared your security team from a(nother) full-on panic attack.

Bottom Line: We’ve previously written about the idea of retiring localhost and doing all of your development in the browser. But thanks to WebContainers, StackBlitz is making it feel like we’re finally getting close to being able to use the web to build the web.

---

KendoUI’s Angular library makes life easy

So instead of stitching together a bunch of out-of-date OSS libraries with terrible performance, try using KendoUI to build the high-quality, modern Angular app of your dreams.

Their 110+ Angular components are specifically built for modern Angular from the ground up, and they come with enterprise-ready functionality out of the box:

• Angular Data Grid comes with advanced features like paging, sorting, filtering, editing, row virtualization, and more.

• Angular Charts lets you easily create the exact chart you need with deep customizability and interactivity

• All components come with best-in-class performance and support for the latest security and accessibility standards

Try it for free — and see why teams at NASA, Microsoft, and Samsung all trust KendoUI.

---

let seats = [
  [1, 1, 0, 1, 0],
  [0, 1, 1, 1, 0],
  [1, 0, 1, 0, 0],
];

function reserveFirstAvailableSeat(seats) {
  for (let i = 0; i < seats.length; i++) {
    for (let j = 0; j < seats[i].length; j++) {
      if (seats[i][j] === 0) {
        seats[i][j] = 1; // Reserve the seat
        console.log(`Reserved seat at row ${i + 1}, column ${j + 1}`);
        break;
      }
    }
  }
}

reserveFirstAvailableSeat(seats);

---

1. Figma and StackBlitz are hosting a free Web dev community meetup on Feb 22nd at the Figma San Francisco office. They’ll have food, drinks, swag, and a chance to win an all-expenses-paid sleepover at AOL HQ (jk, please don’t do that).

2. Angular 17.2 just launched with experimental support for Material 3, signal queries, model inputs, and more.

3. Graphite created a free VS Code extension that gives you visual Git for stacked PRs. It lets you visualize dependency graphs, create new branches with the click of a button, and do drag-and-drop rebasing — so you can finally automate away all those tedious Git operations. [sponsored]

4. Max Shen wrote about Tailwind CSS under the hood and what being “utility-first” really means.

5. The WebContainers API lets you build interactive, full-stack coding experiences directly into your web app. Developers are already using it to build interactive tutorials, AI applications, and next-gen documentation like SvelteKit’s.

6. Nicholas Yang and Anthony Shew wrote about how they recently completed Turborepo’s migration from Go to Rust. Reading the blog post felt similar to reading about Ernest Shackleton’s voyage to Antarctica in Endurance, but I’m very happy that everyone survived in both cases.

7. React Conf is back for 2024, for the first time in years. Meta and Callstack are hosting it in Henderson, Nevada on May 15-16th, and you’ll get a chance to learn directly from the React Core Team and other leaders about React’s vision for the future and what’s coming next. Join the lottery for tickets or sign up to join the free livestream. [sponsored]

8. Last chance to take the State of Data survey before it closes. If you take it, you might win some prizes, and you also might get roasted by us when we write about the results in a couple weeks. Win win.

9. Tomek Sułkowski wrote about the new StackBlitz Starters upgrade with WebContainers and Vite, and how it makes coding in the browser feel more like your native environment.

10. Scott Chacon wrote a series on Git Tips: Oldies but Goodies - which reminds me of how all the songs from my college dance parties now play on the oldies radio stations at Kohl’s and TJ Maxx. But don’t worry Ke$ha, they’ll never take away what we had in 2010.

---

The code ends up making 3 reservations instead of 1. This is because the break statement only breaks out of the inner loop, not the outer loop. To fix this, you can replace the break statement with a return statement.

let seats = [
  [1, 1, 0, 1, 0],
  [0, 1, 1, 1, 0],
  [1, 0, 1, 0, 0],
];

function reserveFirstAvailableSeat(seats) {
  for (let i = 0; i < seats.length; i++) {
    for (let j = 0; j < seats[i].length; j++) {
      if (seats[i][j] === 0) {
        seats[i][j] = 1; // Reserve the seat
        console.log(`Reserved seat at row ${i + 1}, column ${j + 1}`);
        return;
      }
    }
  }
}

reserveFirstAvailableSeat(seats);

Alternatively, you can use labeled statements to explicitly break out of the outer loop:

let seats = [
  [1, 1, 0, 1, 0],
  [0, 1, 1, 1, 0],
  [1, 0, 1, 0, 0],
];

function reserveFirstAvailableSeat(seats) {
  rows: for (let i = 0; i < seats.length; i++) {
    columns: for (let j = 0; j < seats[i].length; j++) {
      if (seats[i][j] === 0) {
        seats[i][j] = 1; // Reserve the seat
        console.log(`Reserved seat at row ${i + 1}, column ${j + 1}`);
        break rows;
      }
    }
  }
}

reserveFirstAvailableSeat(seats);