The Truth about CSS

In today’s issue we’ve got perpetual TC39 proposals, v8 buzzwords, and Emily in Paris learning to code.

Welcome to #155.

---

CodeSandbox coming in hot

The world’s changed a lot since 2017 when CodeSandbox first launched as an “online editor for React apps.” We’ve seen some historic advances in the arts, including *two* Sonic the Hedgehog movies. Oh, and web dev has advanced some too.

Thanks to Wasm, the web is no longer a JavaScript-or-GTFO establishment. Developers are now using languages like Rust and C++ to build more robust web apps than ever, and new browser features are making The Platform™️ more powerful all the time.

CodeSandbox has done a good job of riding this wave, leveraging Rust to make their own web app more powerful and steadily adding support for most of the poplar JS frameworks. In 2022 alone, developers used it to create over 14 million sandboxes.

Much like the web itself, CodeSandbox has started to spread its wings and expand its functionality in a few other interesting ways lately:

• Last year, they introduced Cloud Sandboxes and repos that run in microVMs instead of the browser. This removed some browser limitations, and let you run servers and databases in CodeSandbox. It also allowed you to code directly in VS Code, via their extension.

• The move to microVMs allowed them to introduce Native Docker support earlier this month, which lets you create sandboxes for any programming language — not just JavaScript.

• Last week, they announced official support for Rust. So now, you can use CodeSandbox to quickly spin up a Rust dev environment and open it on their web editor, iOS IDE, or your own VS Code setup.

Bottom Line: We’re seeing lots of players crowd into the cloud-based IDE arms race, including Replit, StackBlitz, and others. It’s too early to tell who (if any) will become the dominant platform, but it’s exciting to follow the interdependent growth of web development and the web itself — just not quite as exciting as the growing Sonic Cinematic Universe (third movie comes out next year, mark your calendar).

---

Swimm is the coolest way to create docs

The unthinkable just happened: Harold quit.

He was the only person on your team who understood how half the codebase worked, and now he’s gone forever 😭.

If only you’d used Swimm — a new documentation tool built specifically for devs that’s currently the #1 product of the week on Product Hunt. It helps you reap all the productivity benefits of a “documentation culture”, without having to have an actual “documentation culture.” Here’s how:

• Swimm lets you integrate live code snippets from your repo directly into their docs editor, so you can easily document complex flows across multiple repos.

• They automatically keep those code snippets up to date with their GitHub app and CI/CD integrations, which verify that all your docs are synced up with your code after every PR.

• Their IDE apps show you relevant documentation whenever you’re browsing code — so you always have up-to-date docs at your fingertips.

Check out Swimm for free — and stop using the wrong tools to document your code.

---

Have a job you want to fill?

---

What does this function do?

const surprise = (...fns) => input => fns.reduce(
  (acc, fn) => fn(acc), input
)

---

1. Patrick Brosset wrote an article on the Microsoft engineering blog called The Truth about CSS Selector Performance. I promise I’ll get to optimizing my CSS selectors as soon as I finish getting my JavaScript bundle under 15MB, Patrick.

2. Adam Tornhill gave an insightful talk called Prioritizing Technical Debt as if Time and Money Matters. Personally I miss the glory days of 2021 when prioritizing neither time nor money mattered.

3. FusionAuth wrote this white paper on Using OAuth To Add Authentication To Your React App, which could really be called “How to make all of your auth problems disappear forever into a place where they can’t hurt you anymore.” But I guess that title didn’t have enough SEO juice. [sponsored]

4. Sachin Raja (a tRPC maintainer) wrote about some TypeScript performance lessons the tRPC team encountered while refactoring for their v10 release.

5. Ahmad Shadeed wrote an article about creating a more dynamic UI by leveraging Conditional CSS. None of the code snippets were in Tailwind so I couldn’t actually understand the article but I’m sure it was great.

6. The French government just open-sourced their DSFR React component library. Once Emily in Paris inevitably gets laid off from her marketing gig, maybe she can #LearnToCode and get hired by the French government to lead their OSS efforts.

7. V8 just introduced a new WebAssembly JavaScript Promise Integration API. Like me, you probably understand what most of those words mean separately, but you’ll have to actually read the post to understand what they all mean together.

8. Ben wrote about his 2023 plans for Ezno — the experimental parser, partial-executor, optimizer and type checker for JavaScript. We’re a little upset it doesn’t include a plan to raise VC $, over hire, thought lead about entrepreneurship on Twitter, then quietly fire everyone a year from now when the money runs out.

---

What does this function do?

const surprise = (...fns) => input => fns.reduce(
  (acc, fn) => fn(acc), input
)

It’s a pipe function that allows you to chain multiple operations together by taking a series of functions as arguments and applying them in a specific order to the input.

Wow, words.

Instead of doing something like this.

const toUpperCase = str => str.toUpperCase()
const removeSpaces = str => str.replace(/\s/g, "")
const addExclamation = str => str + "!"

toUpperCase(removeSpaces(addExclamation("Subscribe to Bytes")))

You can do something like this.

const pipe = (...fns) => input => fns.reduce(
  (acc, fn) => fn(acc), input
)

const formatString = pipe(toUpperCase, removeSpaces, addExclamation)

formatString("Subscribe to Bytes") // SUBSCRIBETOBYTES!

There’s currently a perpetual TC39 proposal for adding a true Pipe operator (|>) to JavaScript.