Astro 2 Takes Flight

Issue #156.January 26, 2023.2 Minute read.
Bytes

Hi friends,

We don’t have any hot takes about the moral supremacy of using camel_case, but we do have some revenge of the type nerds, more cowbell, and one big no take-backsies.

Welcome to #156


Eyeballs logo

The Main Thing

Dog pushing two dog figurines together

Now kiss

Astro 2 Takes Flight

The last time we wrote about Astro, our favorite Diet JavaScript framework had just released v1 and was using its islands architecture to help us all shed some unwanted bits. Now, the space crew is back again with one more mission – help you command your lawless Markdown.

If you work on a large content or ecomm site, you’re intimately familiar with the… limitations of markdown. It’s not necessarily that markdown is bad, it’s that the tooling around it sucks – and by sucks we mean it’s non-existent.

That is, until now.

The idea is simple, what if we had a TypeScript like experience, but for Markdown? It doesn’t take a ton of creativity to realize what that would enable – validation, type safety, autocomplete, SEO recommendations, inline type errors, and maybe some positive affirmations if we’re lucky.

This is exactly what Astro 2’s Content Collections API enables and, as someone who spends more time in markdown files than I do sleeping, it’s exciting.

But that’s not the only thing Astro 2 had up its booster, it also comes with:

  • Hybrid rendering combines SSR and SSG to give you flexibility and great performance.

  • A redesigned error overlay makes debugging issues a little easier and more aesthetically pleasing.

  • Some nice improvements to Hot Module Reloading, plus an upgrade to Vite 4.0.

Bottom Line: Aligning itself with the die-hard type nerds is a smart way for Astro to keep the hype rocket humming *(tRPC nods approvingly)* and we’re here for it.

        

React Data Grid logo

Our Friends
(With Benefits)

One dog putting his paw on another dog's head

May the odds be in your favor

🚨 React Data Grid MacBook Pro Giveaway 🚨

TLDR — React Data Grid is giving away a brand new, 14-inch MacBook Pro M2 to one Bytes reader who stars their GitHub repo in the next week.

That’s it. Just star the repo, and you’ll be automatically entered to win a $2,000 laptop. Like NSYNC says, “No strings attached.”

And the good news is, they’re definitely worth the star. The RDG team has been *obsessed* with building the world’s best data grid for years, and we think they did a great job:

  • Extensive virtualization gives you the best possible performance, no matter how big the dataset. That’s one reason it’s used by huge companies like Netflix and Bridgestone.

  • It’s pure React, not just a wrapper — so it’s easy to work with inside your codebase.

  • There’s tons of functionality baked in, so you can do anything you’d ever need.

But even if you don’t care about any of that, and you hate data grids, and you think React is an anti-pattern because you miss Backbone.js — it doesn’t matter. Just star the repo between now and Feb. 4th, and you’ll still be entered to win the MacBook Pro.


The Job Board Logo

The Job Board

Senior Full Stack Engineer
Remote friendly
TS
$160-210k

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.

Have a job you want to fill?
Pop Quiz logo

Pop Quiz

Sponsored by Datadog

Their free Frontend Testing Best Practices Guide covers just about everything you’ll ever need to know about frontend testing. Now you’ve got no excuse for flakey tests.

Did you know that the anchor element can do more than just navigate to a url?

<a href="https://bytes.dev">Read Bytes!</a>

We’ve got three specific use cases. Can you guess them?


Cool Bits logo

Cool Bits

  1. Right on cue, Alex MacArthur wrote a blog post called What I Like About Astro. Speaking of, we’re still waiting for one of you to write a nice article called, “What I like about Bytes.”

  2. Callstack created The Ultimate Guide to React Native Optimization — and they really do mean “ultimate”. This ebook is 207 pages long and is better than half the courses on Udemy. It’s also *free* and written by React Native Core Contributors, so you know it’s legit. [sponsored]

  3. Mokshit Jain created Typewind, which (as you probably guessed) is a type-safe version of Tailwind. The type nerds’ power is consolidating.

  4. Andrew Clark from the React Core Team wrote a controversial tweet thread about “If you use React, you should be using a React framework.”. He then clarified that ”You should clean your ass after pooping“.

  5. Vladimir Klepov wrote an in-depth article about Making sense of TypeScript using Set Theory. But before you can really understand TypeScript or Set Theory, you need to understand Game Theory, and you can’t really understand Game Theory without understanding Mimetic Theory, and all of these theories are worthless until you understand Heliocentric Theory. So you might as well just start with Copernicus if you want to get good at TypeScript.

  6. Kysely is a type-safe SQL query builder. Like I said, you either align yourself with the type nerds or you’re getting left behind.

  7. Darius Cepulis wrote on the Mux blog about The building blocks of great docs. Speaking of which, word on the street is that the new React docs are almost done done for real this time (*drink*). But technically, Dan never said “no take-backsies” — so yeah, we’re probably still a few months out.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Datadog

  1. Anchor tags can send POST requests
<!-- sends a POST request with the body of PING to url -->
<a href="#" ping="https://api.iwanttotrackyou.com">
  Click Me
</a>
  1. Links can download files (if they are on the same origin or use the data: or blob: directive).
<a href="data:,Hello%2C%20World%21" download="helloworld.txt">
  Download
</a>
  1. Links can open your email client (and populate the email’s content)
<a href="mailto:tyler@ui.dev?subject=Re%3A%20My%20third%20nipple&body=%F0%9F%91%8B">
  Hi 👋
</a>

And that’s all folks. Thanks for reading ❤️.