Meta blesses us with StyleX

Today’s issue: 28 years of script kiddies, Zippo tricks, and keeping up with the Joneses Redux family.

Welcome to #244.

---

Meta blesses us with StyleX

Remember Socker Boppers? I was obsessed with those inflatable boxing gloves when I was 8 years old, but I never had my own pair until they went on sale at Walmart four years later and my dad bought them for my 12th birthday — but by that time I had pretty much outgrown them and moved on to more sophisticated toys like Super Soakers and Zippo lighters.

Well, in completely unrelated news, Meta just open-sourced StyleX, their internal CSS-in-JS library that they first showed off back in 2019.

Back then, most of us couldn’t wait to get our hands on the styling system that was (and still is) being used to power Facebook, Instagram, and WhatsApp. But if you fast forward four years to today, CSS-in-JS tools are a lot less popular because of their expensive performance tradeoffs, among other things.

StyleX uniquely addresses these perf issues by including a Babel plugin that finds and extracts all the styles defined within your source code, and converts them to atomic class names at compile time. This lets you avoid the costs associated with using JavaScript to insert styles at runtime.

Another unique feature of StyleX is how the API, along with every style property and variable are strongly typed. This provides a few powerful benefits:

• You can use types to create sophisticated rules about the ways in which a component’s styles can be customized, with zero runtime cost.

• This lets you create natural constraints like defining a component’s props to only accept color and backgroundColor but no other styles, or allowing all styles except for margins.

• These constraints can be super helpful for large codebases with big teams, where too many CSS cooks in the kitchen can create a lot of style conflicts.

Bottom Line: A library like StyleX is perfect for Meta, which has both a long history with CSS-in-JS and unique needs for extremely large codebases.

Does this mean we’re going to see a CSS-in-JS renaissance to rival Tailwind’s current dominance? I probably wouldn’t bet on it, but it’s nice to see the emergence of another solid CSS library — even if it does feel a few years late.

---

Propel is the easiest way to build powerful analytics

Your customers have been asking for better analytics on your product for a while now — but you keep putting it off because you know how painful it is to build.

Thankfully, Propel gives you everything you need to build powerful analytics tools in days (not months), without having to hire a team of data viz engineers:

• Serverless real-time analytics infrastructure that auto-scales, so you can always query data fast.

• Ready-to-integrate APIs for dashboards and reports.

• A powerful UI Kit of responsive, customizable React components built on top of Chart.js.

Your customers will love you once they see those sleek analytics dashboards, helpful drill-downs, and custom reports — and your team will love you for not forcing them to build it all from scratch 🙏.

Try it out for free.

---

function processUserData(userId, options = {}) {
  "use strict";
  let processedData = `User ID: ${userId}\n`;

  if (options.includeEmail) {
    processedData += "Email: user@example.com\n";
  }

  if (options.includeAge) {
    processedData += "Age: 25\n";
  }

  if (options.verbose) {
    processedData += "Processing mode: Verbose\n";
  }

  return processedData;
}

const userData = processUserData(12345, { includeEmail: true, verbose: true });

---

1. JavaScript was released 28 years ago last Monday, and the script kiddies are still going strong.

2. Astro 4.0 just dropped with some new APIs, faster builds, and a new dev toolbar that’ll make you feel more productive than that time in college when you “accidentally” took some of your friend’s adderall three days in a row during finals week.

3. Sentry is doing a free fireside chat next week on Improving web performance by finding the JavaScript code causing slowdowns. You’ll learn how to take action on Web Vitals, find code-level bottlenecks, and speed up your site’s load times for good. [sponsored]

4. FloatUI is a new library of modern UI components and full website templates built on top of React, Next.js, and Tailwind.

5. Vitest 1.0 was just released, which means you are rapidly running out of excuses for refusing to test your code.

6. Our friend, Andrew Israel wrote A Complete Guide To Using Cookies in Next.js on the PropelAuth blog. It’s very well written, and you should go check it out.

7. The Redux family (aka Redux, Redux Toolkit, and React-Redux) all just came out with new major versions at the same time on Monday. Why can’t our family be as perfect as the Redux family, honey?

8. Daniel Friyia wrote on the Shopify blog about Getting started with React Native Skia.

9. Storybook 7.6 was just released to make you feel even guiltier for not testing.

10. JJTech is a high school student who wrote an article called iMessage, explained about how the internals of iMessage work. That’s pretty impressive JJ, but how good are you at Zippo tricks?

---

From MDN - “The ‘use strict’ directive can only be applied to the body of functions with simple parameters. Using “use strict” in functions with rest, default, or destructured parameters is a syntax error.”

There are a few ways to fix this. We can move the "use strict" directive to the top of the file, or we can remove the default parameter from the function signature, but if we wanted to keep both the default parameter and the "use strict" directive, we can go old school and check if the options parameter is undefined and set it to an empty object.

function processUserData(userId, options) {
  "use strict";
  if (typeof options !== "object" || options === null) {
    options = {};
  }
  let processedData = `User ID: ${userId}\n`;

  if (options.includeEmail) {
    processedData += "Email: user@example.com\n";
  }

  if (options.includeAge) {
    processedData += "Age: 25\n";
  }

  if (options.verbose) {
    processedData += "Processing mode: Verbose\n";
  }

  return processedData;
}

const userData = processUserData(12345, { includeEmail: true, verbose: true });