Bytes #73 - it's sterile and I like the taste

it's sterile and I like the taste

Issue #73.November 8, 2021.2 Minute read.

Angular becomes an angsty teen, React Router v6 decides that a 2-year alpha/beta period was just long enough, and the Norse God of Web Dev reveals his secrets. Welcome to #73.

13 going on 30 meme

You can't just turn back time.

Angular is 13 Going on 30

Tech Twitter's favorite JavaScript framework (🤥) released v13 last week -- and its main focus was on expanding its "Ivy-based features and optimizations."

And yes, I agree that "Ivy Based" would be a great name for a dispensary, but it's not worth getting sued by Sundar -- so please don't send me any more logo designs.

Ivy is Angular's next-gen compilation and rendering pipeline that replaced View Engine (which was officially removed in this v13 release). It makes Angular a lot faster and easier to use, giving the framework a stronger foundation for releasing more powerful new features (like the ones we're about to talk about).

What's new in v13:

  • New-and-improved Component API -- removing View Engine allowed Angular to reduce the amount of boilerplate code you need to write new components, which makes life as an Angular dev a little less sad.

  • Better tooling -- newly added esbuild now makes various Angular processes go zoom (to use a technical term). And new default support for the use of persistent build cache has led to 68% faster build speeds.

  • RIP IE11 support 💀 -- this addition by subtraction lets Angular leverage modern browser features like CSS variables and web animations via native web APIs.

Bottom Line: Angular might not get a lot of love these days, but this is another solid release for the web's third most popular framework.

As the voice of our generation once said, "forget the haters cuz somebody loves ya."

Spiderman meme

Stop relying on your less-than-amazing Spidey Senses. [sponsored]

Raygun Alerting gives you superpowers

I haven’t written a single test in years -- thanks to Raygun.

That's a joke, mostly, but it is tempting because of how powerful Raygun’s monitoring tools are. They give you real-time visibility into your apps, so, like a good therapist, when there’s an issue, you'll know exactly what’s going on and how to fix the root cause -- down to the specific ~~traumatic childhood event~~ line of code.

And their new Alerting functionality makes it easier to catch errors and performance issues before they become a problem since you can set alerts based on an increase in error count, a spike in load time, or a new error occurrence.

Try out Raygun’s 14-day free trial, so you can spend less time worrying about if you need to pay your users for their QA testing in prod efforts and more time worrying about how you're going to get $70k to buy the Spider-Man 3 suit that's being auctioned off this week.

👉 Check it out.

Licking a flag pole

It really worked!

React Router - the 6th edition

January 2020 was a simpler time. We could easily buy furniture, carelessly go weeks without washing our hands, and lick flag poles without worry. It was also when the first version of React Router v6 (alpha) was released.

~645 days later, I'm still being told I can't (safely) lick flag poles, but React Router v6 is finally out.

Was the wait necessary? Well, is it necessary for me to drink my own urine? No, but I do it anyway because it's sterile and I like the taste.

So what's new?

Hooks for everything: The entire library is rewritten to use hooks, which gives us helpful tools like useParams to get route params, useLocation to get the current URl, and useNavigate to do imperative navigation. Not only that, but they managed to shave 50% off the bundle size. Unlike me, React Router is lost weight during the pandemic.

Nested Routes: The Router's superpower comes from nesting routes within each other. This works great when you've got sections of the page that stay the same between routes, like a navigation bar or a list view, while the rest of the page changes. React Router provides a new <Outlet> component so you can decide where to render the child route content.

Automatic Route Ranking: Remember how you'd have to carefully order your Routes in order to have them render correctly? No? Oh, well this is awkward. There's a new, "intelligent", Routes component that solves that problem you may or may not have had.

Relative Routes: Since you have parent and children routes already, it only makes sense to write <Link to=".."> to go up one page. These relative paths work nicely with the nested routes, and make it much easier to create reusable components that still work with whatever routing structure you're using.

The Bottom Line: Whether you're using React Router v3, or v4, or v5, or now v6 - we still love you just the same.

If you want to learn all about React Router v6, check out our post - A Complete Guide to React Router: Everything You Need to Know

Job Listings

Alan is looking for experienced fullstack engineers in France, Spain and Belgium

Alan is the first health insurer in France since 1986, and we’re aiming to build the healthcare super-app for 10M Europeans. Our 40and performance issues0+ strong team enjoys our values of distributed ownership, radical transparency and a flexible remote policy. We recently raised a Series D bringing the company’s total valuation to €1.4bn, and we were named the #1 best startup to work at in France by LinkedIn.

React or Full-Stack Engineer at Fully Remote US-based Tech Consultancy

Contract opportunity to start, which may turn into employment for US-based applicants. Work on a variety of projects in different industries, and enjoy work-life balance, using modern tools and technologies, React, Node.js, GraphQL APIs, React Native, and solving complex problems while interacting directly with our clients.

One Question Interview

What is the most underrated Cloudflare feature?

The most underrated Cloudflare feature(s) are Stream and Wrangler. Stream makes it so easy to broadcast to multiple services like Twitch and YouTube, build your own video applications and easily combine them with Workers to handle permissions and the upload experience! Wrangler is a super powerful CLI that makes serverless a cinch! You can create new projects, use existing templates, create a local dev environment, test and deploy all from a single tool!

Jon Kuperman Jon is a Developer Advocate at Cloudflare. He'll be doing a live talk for subscribers on Wednesday called, "Optimizing The Crap Out of Your Website with Cloudflare." Sign up for a free 3-day trial if you want to check it out.

Cool Bits

  1. In A Complete Guide to React Router (v6): Everything You Need to Know, I write about literally everything you need to know about the newly released React Router v6.

  2. PodRocket is a cool web dev podcast where the LogRocket team interviews some big ~~JavaScript celebs~~ industry names about the technologies they’ve created. They talked to Guillermo Rauch about Next.js, Rich Harris about Svelete, and more. If you love Bytes, I got a feeling you'll like this pod too. [Sponsored]

  3. Microsoft announced a new JavaScript API for Excel -- and Nat Friedman announced he was stepping down as GitHub's CEO 24 hours later. Coincidence?

  4. Phu Minh wrote about how to create a blockchain with 60 lines of Javascript.

  5. Sara Soueidan wrote an in-depth guide to designing accessible, WCAG-compliant focus indicators. I'm not sure what WCAG is but if it takes more than 60 lines and isn't on a blockchain, I don't care for it.

  6. Chris Heilmann (the Norse God of Web Dev) wrote about Developer Tools secrets that shouldn’t be secrets. Because secrets secrets are no fun, secrets secrets hurt someone.

  7. Harmonicon lets you use JavaScript code to compose tracks and effects to make music in your browser. If you Venmo me $15 today, I'll mail you a burned CD of my first JavaScript mixtape in time for Christmas. If you send me 10 ETH, I'll sell it to you as an NFT.

  8. Hasty is a cool new tool that lets you quickly test variations of code snippets to see which one is faster. It's just like watching a full season of the hit CBS show The Amazing Race, except you're watching code snippets compete instead of people, and it's a lot less dramatic, and there's no international travel, and there's no cash prize, and there's no real stakes at all, and it's not a TV show, and your mom probably wouldn't enjoy watching it as much.

Join Bytes

Delivered to 105,434 developers every Monday