Lights, Camera, Tailwind

Jammy eulogies, pattern matching magic, and the Venn diagram of Type nerds and coffee snobs.

Welcome to #210.

---

Lights, Camera, Tailwind

The headset microphone has always been an underrated power move.

So for last month’s Tailwind Connect keynote, it was great to see Adam Wathan walk out on stage wearing his dad’s nicest blazer and a tastefully subtle headset mic that would’ve made the NSYNC boys proud.

Adam talked about Tailwind’s history, shared some of its mind-blowing growth numbers (25 million downloads per month 🤯), and demoed a new, “fully componentized” React UI Kit called Catalyst that’s still a WIP.

But the most exciting part was when he introduced Oxide — the next evolution of the Tailwind CSS engine that will make the framework more of an “all-in-one CSS processing tool” going forward.

It does this by integrating Lightning CSS, a Rust-based CSS parser, transformer, bundler, and minifier that was created by Devon Govett and the Parcel team. Oxide is set to come out soon with Tailwind v3.4, and it should immediately provide three noticeable benefits:

• A more unified toolchain, so you won’t need to install additional tooling like postCSS or autoprefixer anymore. Things like vendor prefixing, syntax transforms, and importing other CSS files will just work.

• Improved performance, because Lightning CSS is written in Rust and is super fast overall. Build times in real-world Tailwind projects using Oxide have already dropped by 50%.

• Simpler configuration with automatic content detection, which means that you won’t need to configure the paths to your template files anymore.

Bottom Line: You don’t typically see 200 people pay real money to go to a conference/meetup for a CSS framework, but Tailwind is an inspiring project — which is why I just put in the winning bid on this bad boy.

Dress for the job you want.

---

Hire great devs faster with CoderPad

Using whiteboard interviews to hire developers is like trying to make your own fireworks — it might work, but you’ll waste a lot of time and probably get burned eventually.

That’s why 4,000 engineering teams (including Netflix, Lyft, and Spotify) have ditched the algo questions and are using CoderPad’s collaborative IDE to actually code with candidates. (See the Sandbox.)

Their familiar, fully customizable IDE supports 40+ languages and frameworks (React, Angular, Node, etc), and it lets you:

• create interview questions unique to your business
• add packages with npm install
• drag and drop a repo for quick & easy interview setup
• watch code playback after the interview

It’s a great way to pair program with candidates to see if their skills and communication style are a good fit for your team.

Try CoderPad for free — and code together before you work together.

---

What gets logged?

function getPort(url) {
  const { port } = new URL(url);

  if(port === '80') {
    console.log("You're using the default port");
  }

  if(port === '443') {
    console.log("You're using the default secure port");
  }

  console.log(`You are running on port "${port}"`);
}

getPort(`http://example.com:80`)
getPort(`http://example.com:8080`)
getPort(`https://example.com:443`)
getPort(`https://example.com:3000`)

---

1. Andy Warfield wrote an in-depth article on Dr Werner’s blog about what it was like Building and operating a pretty big storage system called S3.

2. Vercel just introduced react-tweet, which lets you embed tweets into any React app with a single line of code. It comes with RSC support, less client-side JavaScript, and it already needs to be renamed 🙅‍♂️.

3. Zero created an easy way to integrate 3rd-party API credentials into your project. Their SDK is available for TypeScript, Rust, Python, and Go. [sponsored]

4. Brian Rinaldi wrote this touching Jamstack Eulogy, which sparked some debate among all the pro-Jammies and anti-Jammies out there.

5. Remix-Dev-Tools makes it easier to monitor and manage page info, URL parameters, server responses, and more in your Remix apps.

6. In a classic case of “if you can’t beat ‘em, join ‘em”, Stack Overflow just released Overflow AI. It’s kind of like ChatGPT, but it gives a different company money when you ask it questions.

7. Ready Layer 2 is a free, 3-day learn & pitch competition for developers. You’ll learn how to build applications on top of Bitcoin Layer 2, then get a chance to build a prototype and pitch it to judges for a chance to win over $15,000 in prizes. [sponsored]

8. Mathieu Acthernoene wrote an article called, Unraveling the magic of Pattern Matching, which made me think that I was reading a quilting blog for about 5 seconds.

9. Erik Devries created this Tailwind CSS Color Generator and made sure that we would see it on the exact same day we were writing a Tailwind CSS story. What a thoughtful and considerate friend.

10. ExpressoTS is a lightweight TypeScript framework for building scalable server-side applications. But don’t worry coffee snobs, you can always refer to it as EspressoTS if it makes you feel better.

---

What gets logged?

function getPort(url) {
  const { port } = new URL(url);

  if(port === '80') {
    console.log("You're using the default port");
  }

  if(port === '443') {
    console.log("You're using the default secure port");
  }

  console.log(`You are running on port "${port}"`);
}

getPort(`http://example.com:80`) // You are running on port ""
getPort(`http://example.com:8080`) // You are running on port "8080"
getPort(`https://example.com:443`) // You are running on port ""
getPort(`https://example.com:3000`) // You are running on port "3000"

The URL constructor function in JavaScript strips the default port even if it’s explicitly provided. Since port 80 is the default for http and port 443 is the default for https, the port is stripped from the URL resulting in an empty string. File this one away under JavaScript quirks that you probably don’t need to know, but could save future you hours of debugging.