One style guide to rule them all

Deep Git magic, the miniest minifier, and a good reason to wear my fancy feather boa.

Welcome to #205.

---

One style guide to rule them all

Earlier this month, everyone’s favorite code formatter launched v3.0 — a new major release that includes a migration to ES Modules for all Prettier source code, improved plugin support, and a few relatively painless breaking changes.

And while this wasn’t the most exciting major release ever, it did get us thinking more about Prettier’s roots and why it became the ubiquitous and (mostly) beloved tool it is today. Let’s dive in.

In March 2017, James Long stood on stage at React Conf and talked about the mental burden of manually formatting your code. Not only was manual formatting super tedious for individual developers, but it caused thousands of engineering hours to be wasted on creating and enforcing unique style guides with the death-by-a-thousand-nits method ☠️.

James talked about how he couldn’t take it anymore, so he built his own solution — a “prettier” style guide that was fully automatic and highly opinionated (it came with zero configuration options). This was a pretty radical idea, because do you know who else was “highly opinionated” about code formatting back in the mid 2010s? Every single developer on the planet.

But it turns out that Prettier was just what the doctor ordered. For most teams, the unique benefits of a high-quality, automatic formatter outweighed the sacrifices of not having all of your code formatted 100% the way you’d like. And this forced consistency ended up becoming a big plus, because it eventually helped create a kind of common style guide for the entire JS ecosystem — which made it much easier to work across teams and change jobs.

Prettier caught on fast. Right after James ended his React Conf talk, Tom Occhino invited him back on stage to merge a PR that added Prettier to the React codebase. (Prettier had technically been released about 2 months earlier, so they had time to get it ready.) Fast forward to today, and it’s up to 30 million weekly npm downloads, with no sign of slowing down anytime soon.

Bottom Line: Before Prettier, code formatting was like trying to coordinate a giant group order from Cheesecake Factory’s 500-item menu. Thankfully, Prettier rescued all of us from that post-modern design hellscape with its Omakase-like style guide — which became wildly popular, largely because it dared to be way more opinionated than any of its peers. Thanks James.

---

Dynaboard can help you build a legit web app in 60 seconds

Tired of spending hours hacking together libraries, fighting with boilerplate, and trying to connect to a data source every time you want to start a new project?

Of course you are. That’s why you should give Dynaboard a try. They’re on a mission to help you build a functioning web app in 60 seconds from any database or API with their AI-supercharged, low-code IDE.

How is that possible? By giving you a bunch of powerful tools and getting TF out of your way.

It comes with 40+ customizable UI components, intelligent data integrations, real-time collaboration, and one-click deploys to prod — plus a little WebAssembly magic that lets you add custom code on both the client and the server 😱.

Try it for free to see what you could build in 60 seconds.

---

What will be logged to the console after the code is finished executing?

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)

---

1. Boa just released v0.17 of its embeddable and experimental Javascript engine that’s written in Rust. They’re calling it one of their biggest releases yet - so to celebrate, I’ve chosen to write the rest of this issue wearing my fanciest feather boa and nothing else.

2. AJ Stuyvenberg wrote an article called Understanding AWS Lambda Proactive Initialization.

3. JS minification benchmarks is a helpful library for comparing the quality and speed of various JavaScript minifiers. May the most miniest minifier win.

4. BugHerd is the best tool for getting contextual website feedback from your team and users. It automatically provides technical details about the user’s browser, OS, and more - so you can pinpoint the exact issue and resolve bugs quickly. [sponsored]

5. Enrico Campidoglio gave an hour-long talk about Git Hidden Gems at NDC Oslo, which covers some deep Git magic. Once you learn it, you’ll only be interested in wearing cargo shorts, socks + Birkenstocks, and a ponytail.

6. Giuseppe La Torre wrote this guide to Self-hosting Cloudflare Workers and JavaScript Functions on Fly and Everywhere.

7. The Sandworm team created The State of npm 2023 - which shares some interesting insights and trends about popular libraries and the friendly little package manager where they all live.

8. Every time you click this link it sends you to a random Web 1.0 site. Enjoy doing nothing else for the rest of the day. I’m still not entirely sure how they built websites without 5MB of JavaScript.

---

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)

We get undefined, Jordyn, Jake, then Tyler. What this shows us is that you can think of each new Execution Context as having its own unique variable environment. Even though there are other Execution Contexts that contain the variable name, the JavaScript engine will first look to the current Execution Context for that variable.

For more info (and to see a cool GIF on how the JS interpreter evaluates the code above that I would include here but honestly I’m not sure how different email clients support GIFs), visit The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript