Like any good doggo, ESLint might be a little overbearing

Happy Fourth of July to those who celebrate and happy July 4th to those who don’t. This week, we’ve got our special Bytes Cocktail recipe, our class action lawsuit Airbnb developers, and a story all about how my life got flipped turned upside down.

Welcome to #107.

---

Another framework???

There’s a new Fresh Prince

No, I’m not talking about the new TV series reboot that nobody asked for. I’m talking about Fresh — the new fullstack SSR framework…that nobody asked for.

Fresh was created by the Deno team (who raised a very fresh $21 million last month), and they just released a stable v1.0 of the framework last week. It’s built on top of Deno, and describes itself as a combo of “a routing framework and templating engine that renders pages on demand, on the server” using Preact and JSX.

So it’s basically Remix and Next.js and Astro and Hydrogen and RedwoodJS… but for Deno?

Well yes, but actually no. Fresh borrows a lot of features and concepts from those other frameworks, but it combines them in a unique way while adding some cool new features of its own — thanks to a healthy serving of magic Deno dust. Let’s zoom in:

• Similar to Astro, Fresh uses the Islands Architecture to only ship JavaScript for components that actually require interactivity — it ships zero JS to the client by default.

• It has file-system routing that’s very similar to Next.js and Remix-style form submissions.

• Being built on Deno means that Fresh has first-class TypeScript support, doesn’t require configuration, and has no build step. So you’d never have to read another blog post about “How I reduced my build times by 13.7% in just 29 easy steps.”

Bottom Line: Ultimately, Fresh wants to make it super simple for you to use Deno and Deno Deploy™ to deploy your apps to the edge, so that you can easily build cool stuff and so that your company will eventually pay them lots of money.

And so far, they seem to be doing a good job.

---

When you build your own chat app from scratch [sponsored]

Stream is the smartest way to build chat apps

Building a chat app from scratch in 2022 is like trying to make Pop-Tarts from scratch — overly complex and completely unnecessary thanks to glorious technology.

That’s because most developers just use Stream It’s the #1 chat-messaging and activity feed platform in the world — because it handles all of the mess that comes with building chat apps for you.

bUt WilL iT SCaLe? Don’t ask me, ask Match.com — they use Stream to let their 22 million members send each other heartfelt messages like, “You up?” every single day night. So next time you drunkenly message that person who ghosted you 7 months ago, you can thank (or curse) Stream for making it all possible.

CodePen, Imgur, SoundCloud and a bunch of other companies have built apps with Stream too. Chances are, you’ve already used Stream as a user without even realizing it 🤯.

Check out the free trial and I guarantee you’ll be shocked by how straightforward (and flexible) the API is.

---

Happy birthday, old boy

ESLint is still going strong

The OG JavaScript linter just turned 9 years old last week, which is roughly 63 in JS years (yes, that’s the same as dog years… feels right).

That’s a pretty impressive run for a tool that literally everyone uses. Like any good doggo, ESLint might be a little overbearing at times, but its heart is always in the right place. So let’s break out a new jar of peanut butter (down boy) and pay some respect to the Lint King.

How we got here: ESLint was created by Nicholas Zakas to torture you flag and fix common issues with your JavaScript code. Until 2019, it was more widely used than Babel or TypeScript, and it still gets 26 million weekly downloads today 🤯.

A big reason that it’s stayed so popular for so long is because of how easy it is to configure and create plugins for. In many ways, ESLint is responsible for kickstarting the JavaScript tooling revolution that’s still rolling today.

Here’s how it works under the hood:

• ESLint is a compiler that parses your JavaScript into an AST and runs it through a bunch of plugins and rules.

• Plugins are used to add functionality to ESLint (aka the band-aid React uses to help you understand hooks).

• It then passes the output to your IDE or build tool in order to shame you for being bad at your job (it’s only yelling at you because it cares).

• Finally, it does your job for you automatically fixes (some of) the flagged issues with the --fix 🪄 command

Bottom Line: There’s no denying that ESLint has made all of our lives exponentially better. However, if you’ve been emotionally scarred by the Airbnb ESLint config, you may be entitled to compensation! Tweet using the hashtag #AirbnbESLintPain to join our class-action lawsuit today.

---

Jobs

Full-Stack Developer Job for Health Applications

QuickBird is looking for a Full-Stack Developer working on medical/health applications in Munich, Germany. Our young, energetic team highly values great engineering and we enjoy making a positive impact. We provide re-location assistance. Our Stack: Backend with Node.js, Frontend with React, & JavaScript/TypeScript.

Senior or Staff Front-end Engineer - React (100% Remote)

Close.com is looking for 3 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of ~55 high-performing, happy people that are dedicated to building a product our customers love.

---

JS Quiz — Sponsored by Raygun

Raygun is the best tool for catching and resolving bugs before they crash prod. We use it at ui.dev and it’s been super helpful.

Given this array of tweets, how would you get the tweet that has an id of 3?

const tweets = [
  { id: 1, stars: 13, text: 'Turns out "git reset --hard HEAD^" was a terrible idea.' },
  { id: 2, stars: 87, text: 'Tech conferences are too expensive.' },
  { id: 3, stars: 51, text: 'Clean code is subjective. Optimize for deletion.' },
  { id: 4, stars: 19, text: 'Maybe the real benefit of open source was the friendships we made along the way?' },
]

---

Cool Bits

1. TypeScript-JSON is a runtime type checker that gives you a 5x faster JSON.stringify() function with only one line of code. And if you’re looking to produce code 5x faster, we recommend the Bytes Cocktail: a 1-liter mason jar filled with equal parts Red Bull, Mtn Dew Code Red, and Fun Dip packets. (I like mine on the (pop) rocks.)

2. CarbonQA provides QA services geared for dev teams. They’ll boost your team’s morale sky-high by… breaking your code repeatedly. But the good news is that you’ll never have to waste time on testing again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

3. Next.js just released v12.2 and it’s a big one — stable versions of middleware and on-demand ISR, along with experimental versions of Edge SSR and Edge API routes. So much edge, so little time.

4. Nolan Lawson wrote a great article about SPAs and MPAs in theory versus practice, in an attempt to bring a little nuance to that debate. I typically prefer the polarizing, 140-character hot takes that people spend 45 seconds writing while on the toilet, but to each their own.

5. Sacha Greif wrote a reflection on 10 Years of Meteor as someone who lived through it (and wrote a popular book on it at the time). The good news is that we’ve all learned our lesson and no longer have any of our vital web infrastructure dependent on venture capital and its grow-fast-or-die-trying expectations, right? 🥲

6. Jim Nielsen (Director of Design @ Remix) wrote an insightful post about Data flow in Remix and what makes their approach unique.

7. Slack’s VP of Engineering spoke recently about reducing developer burnout by “avoiding crap like toil, re-work, and spending too much mental energy on bottlenecks.” But it turns out the best way to avoid those things would be to invent a time machine, go back to the late 2000’s, and prevent Slack from ever being created in the first place. She didn’t mention that for some reason.

8. Devon Govett just announced that React Aria has new date and time pickers with some great features and functionality. Sounds cool Devon, but how exactly is that supposed to help us get back to 2009 Vancouver?

---

JS Quiz - Solution — Sponsored by Raygun

I know this was an easy one but it’s the Fourth of July and I gotta get this out so I can go watch a guy try to eat 76 hot dogs to celebrate my Country.

const tweets = [
  { id: 1, stars: 13, text: 'Turns out "git reset --hard HEAD^" was a terrible idea.' },
  { id: 2, stars: 87, text: 'Tech conferences are too expensive.' },
  { id: 3, stars: 51, text: 'Clean code is subjective. Optimize for deletion.' },
  { id: 4, stars: 19, text: 'Maybe the real benefit of open source was the friendships we made along the way?' },
]

const tweet = tweets.find((t) => t.id === 3)

console.log(tweet) // {id: 3, stars: 51, text: "Clean code is subjective. Optimize for deletion."}