WinterJS is coming

Today’s issue: WinterJS is coming, Douglas Crockford’s new programming language, and the longest 37 minutes of my life.

Welcome to #237.

---

Platform Power-ups

The CSS world is buzzier than usual — and not just because they’re making fun of you for not understanding clamp(). It’s because browser vendors are rolling out new CSS features at a breakneck pace, giving us new ways to build interactive websites with less JavaScript.

So let’s all take a quick break from playing the new Super Mario Bros. Wonder game and take a closer look at three of these new-ish Platform Power-ups™:

🍄 The :has() selector just landed in Firefox and is now finally supported in all major browsers. It lets you apply CSS to an element based on what’s happening inside that element — like if you wanted to apply different styles to a form depending on the state of one of its input fields (Jen Simmons wrote more about it 🐐).

⭐️ CSS Nesting allows you to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This helps make your CSS more readable and modular and can reduce the size of your CSS files. You used to need a CSS preprocessor like Sass to do this, but it’s now supported by all browsers, so you can just #UseThePlatform.

🌷 color() functions allow the browser to display colors in any color space, such as the P3 color space, which can display colors outside of the default sRGB color space. This makes it really easy to manipulate the alpha (opacity) of a color on the fly, or even manipulating the color with the color-mix function. It’s also available in all browsers 🙏.

Bottom Line: There’s only one downside to all these powerful new CSS features being added to the platform — now we all have to learn how to actually use the platform. Be careful what you wish for.

---

BugHerd is the simplest way to track issues

I finally have my life back.

That’s because I’m not wasting hours digging through email chains to find website feedback from my team, then spending even more time trying to figure out what they meant.

And it’s all thanks to BugHerd.

• It lets your team (or clients) pin feedback directly to website elements, and it automatically provides metadata about their specific browser, OS, and screen resolution — so you can pinpoint issues fast.

• It consolidates all that feedback into their kanban-stayle Task Board, so you can manage and track progress on bug fixes in one place.

Try it out for free — and see why over 10,000 companies, including Amazon and Automattic, love BugHerd.

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000)
}

---

1. Matt Silverlock and Kris Evans wrote a good debrief of Cloudflare’s 37-minute outage last Monday, which was probably the longest 37 minutes of their lives. I had the longest 37 minutes of my life last week too, when my father-in-law forced me to watch an episode of Young Sheldon with him and answer questions about whether writing a newsletter was “a real job.”

2. Mark Dalgleish gave a great talk at React Advanced Conf called Simplifying Server Components that will help you understand what’s going on under the hood and the line between React and the meta-frameworks built on top of it.

3. Vercel created their own font called Geist, which helps the company get back to its roots of choosing difficult-to-pronounce names with an ei in the middle.

4. CarbonQA’s high-quality QA services for dev teams gives you a team of dedicated, US-based QA testers. They’ll catch all the bugs for you, so you never get stuck QA testing your own apps again. 🙏 [sponsored]

5. Tzvetan Mikov shared this cool demo of the WIP Static Hermes compiler that shows off what he’s been working on at Meta.

6. Five months after saying everyone should stop using JavaScript, Douglas Crockford just released a new programming language called Misty, which describes itself as a “dynamic, general-purpose, transitional, actor language.” That sentence is somehow the least confusing thing about it.

7. Jarrod Overson wrote a Salad Fingers biography technical article called Was Rust worth it? It shares his experience of transitioning from JavaScript developer to Rust developer over the past three years.

8. Hannah Sutor wrote about Why A Low Friction User Signup Process Is Crucial For Your Business on the FusionAuth blog. It’s a great deep dive on how you can use different Customer Identity and Access Management strategies to increase conversion rates and improve UX. [sponsored]

9. Svelte Flow is a customizable Svelte component for building Node-based editors and interactive diagrams, created by the folks behind React Flow.

10. WinterJS is a JavaScript Service Workers server written in Rust, that uses the SpiderMonkey runtime to execute JavaScript. We might write more about it in the future, but I’ll need a little more time to prepare an extended metaphor involving all the characters from Frozen 2, Game of Thrones, and Vertical Limit.

---

What gets logged?

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000)
}

A little throw back for all you old heads. This used to be everyone’s favorite JavaScript interview question.

This code will log 5 5 times.

The reason for this is because we declared our variable with var, which is function scoped. By the time our functions given to setTimeout run, i will already be 5 and every function will reference that same variable. To fix this, use let which is block scoped and will give each iteration of our for loop its own i.

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000)
}