![]() In today’s issue we’ve got perpetual TC39 proposals, v8 buzzwords, and Emily in Paris learning to code. Welcome to #155. ![]() The Main Thing![]() Hey TikTok fans, welcome to a day in my life as a CodeSandbox PM CodeSandbox coming in hotThe 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:
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).
![]() Our Friends |
![]() | Senior Full Stack Engineer | |||
| ||||
Motion is looking for experienced TypeScript engineers to build the next generation of productivity tools. You'll inform key frontend architectural decisions that help Motion scale the next 2 order of magnitudes, create delightful user-facing features, and improve application performance. We are an ambitious team of 15 people distributed remotely across North America. |
Build cross-platform messaging experiences with Stream Chat API. Sign up for Stream’s 30 day trial for free!
What does this function do?
const surprise = (...fns) => input => fns.reduce(
(acc, fn) => fn(acc), input
)
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.
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.
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]
Sachin Raja (a tRPC maintainer) wrote about some TypeScript performance lessons the tRPC team encountered while refactoring for their v10 release.
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.
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.
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.
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.