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.
You can't just turn back time.
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."
Stop relying on your less-than-amazing Spidey Senses. [sponsored]
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.
It really worked!
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
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.
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.
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 is a Developer Advocate at Cloudflare. He'll be doing a live talk for ui.dev 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.|
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.
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.
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.
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.
Delivered to 105,434 developers every Monday
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.
Literally the only newsletter I’m waiting for every week.
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.
The sense of humor and structure of the Bytes Newsletter is first class and the information that comes with it is enough to make a mini course.
Very few newsletters manage to be useful and not very boring. @uidotdev manages to achieve these pretty effortlessly. You can almost see Tyler chuckle as he writes them.