To grid or not to grid?

Today’s issue: Makin’ love at midnight, my Grandma’s favorite family members, and the experimental Wasm compiler that turned Glen Powell into a superstar.

Welcome to #340 on 11/11 – make a wish.

---

To grid or not to grid?

That is the question for the long-awaited Masonry layout that’s coming soon to a browser near you.

Quick review: Historically, web developers needed to rely on JavaScript to create the “Pinterest-style” Masonry layout, where content packs together like a brick wall. CSS is finally getting native support for this feature – but things are being held up by a debate between the Chrome team and the WebKit team over what the syntax should look like.

Let’s dive into the two options and the tradeoffs of each one. As usual, I will be your unhinged unbiased moderator to help you cut through the spin.

Option #1 - Create a new display property: This is being championed by the Chrome team, and it would add a new display property to the CSS spec, display: masonry.

• Pros: This approach would have its own set of defaults, making it easier to learn and configure.

• Cons: It would lead to a lot of duplication between the spec for grid and masonry, making responsive design more difficult.

Option #2 – Bake it into the grid spec: The WebKit team wants to use what’s already available in the grid spec by adding a collapsed property to grid-template-rows and grid-template-columns.

• Pros: This option is better for progressive enhancement because display:grid will still work, even while browsers are working to implement the new features.

• Cons: By overloading the values for various grid properties, it could be more difficult to learn and configure.

How will this be resolved? The Chrome and WebKit teams are trying to restore our collective faith in democracy with a community vote, but there still seems to be a lack of consensus so far. That said, if one of the CSS super PACs wants to pay me to publicly endorse a specific approach, I can take off my unbiased moderator hat real quick 😉.

Bottom Line: If you do vote, please remember to fill in your ballot completely, so we can avoid another hanging chad fiasco.

---

Google’s Project IDX feels like the future of programming

It’s an AI-assisted, web-based dev environment that lets you build, test, and deploy full-stack apps right in the browser.

How it works: IDX is built on the popular Code OSS project and runs on pre-configured VMs on Google Cloud. This allows it to provide a web-based dev environment that’s safe, reliable, and fully customizable – just like your local env.

Plus, it adds in lots of other features to help you build and ship faster:

• Templates for frameworks like Next.js, Angular, Astro, React, and Flutter let you spin up a new project in seconds.

• Code suggestions from Gemini help you generate new code, write unit tests, explain code, and more.

• Web and mobile emulators give you a live preview of your full-stack, multi-platform apps across devices.

• Workspace sharing lets you share a project with others like you’re sharing a Google Doc

Try spinning up an IDX project for yourself – it’s still in beta, but I think you’ll be surprised by how powerful it is.

---

function* userGenerator(users) {
  for (let user of users) {
    if (!user.isActive) {
      return;
    }
    yield user;
  }
}

const users = [
  { name: "Ben", isActive: true },
  { name: "Alex", isActive: false },
  { name: "Tyler", isActive: true },
];

const gen = userGenerator(users);

for (let user of gen) {
  console.log(user);
}

---

1. Pinia Colada is a new data fetching layer for the Pinia state management library that loves getting caught in the rain and taking out classified ads in the local paper to find love.

2. Aurora Scharff wrote this interactive article about managing advanced search param filtering in Next.js App Router.

3. QA Wolf saves teams $10,000 per engineer per month (on average) – because they get you 80% automated e2e test coverage and unlimited, parallel test runs on their infrastructure. This speeds up release cycles and helps teams ship an average of 5x more releases. Check out their free demo. [sponsored]

4. Ollie Williams wrote about how centering things is largely a solved problem (with a few exceptions). Does this mean we’ll finally get less jokes about how cEnTerInG a DiV iS sO hArD? Probably not, but we can dream.

5. React core team member, Sathya Gunasekaran gave a talk about What’s next for the React Compiler.

6. Hono OpenAPI lets you auto-generate OpenAPI specs for your Hono APIs using validation schemas with Zod support. Tbh, I think I blacked out writing that last sentence.

7. Snyk is hosting a virtual workshop on how to create a powerful security champions program at your company. It’ll walk through how to identify leaders, foster collaboration, and drive security excellence throughout your org. [sponsored]

8. Simon Grimm wrote an article on the Expo blog called, What is the best React Native list component? It was significantly less troubling than when my grandma wrote a blog post ranking her favorite family members.

9. We wrote this very cool guide to imperative vs declarative programming.

10. Apryse created this JavaScript PDF library, which lets you easily build functionality to allow your users to modify actual PDF data with page manipulations like rotating, cropping, reordering, adding, and deleting pages. [sponsored]

11. Bruno Calza wrote about how databases use mmap.

12. Jawsm is an experimental JavaScript to Wasm compiler that’s written in Rust and rhymes with “awesome.” Unfortunately for them, I already own the Jawsm trademark for my 12-week jawline training program that turned Glen Powell into a superstar.

---

return will stop the generator, so the second user will not be yielded which causes only the user object for Ben to be logged (instead of both Ben and Tyler). To fix this, use continue instead of return.

function* userGenerator(users) {
  for (let user of users) {
    if (!user.isActive) {
      continue;
    }
    yield user;
  }
}

const users = [
  { name: "Ben", isActive: true },
  { name: "Alex", isActive: false },
  { name: "Tyler", isActive: true },
];

const gen = userGenerator(users);

for (let user of gen) {
  console.log(user);
}