I apologize up front for 1. this being a long issue and 2. the terrible restaurant metaphor we use in the Snowpack story.
A different kind of “snow pack” for productivity
(Side note: we all know that caffeine + the TRON soundtrack are the real “#1 developer productivity boosters.” But we’re happy for Snowpack too.)
There are a lot more differences between Snowpack and Webpack that we don’t have time to cover here, so here’s a quick TL;DR
Snowpack is like Chipotle. It’s known for doing one thing really well and really fast (bundling ES Modules / bundling up huge burritos), and it does it in a straightforward way that makes sense. It’s pretty new and trendy, but it doesn’t offer a ton of options beyond its core functionality (bundling ESM / making burritos).
Webpack is like Cheesecake Factory: It’s a much slower experience, partially because it offers so many options (tons of Webpack use cases / over 250 menu items at CF). You’ll definitely feel overwhelmed during your first encounter with either of them, and you could reasonably describe both as a “post-modern design hellscape.” They’re a little older and clunkier, but they’ve still got a lot of power and versatility if you know how to use them.
Now that we’re all craving cheesecake burritos, here’s what’s new with Snowpack 3.0.
Streaming imports: This lets you skip the
npm install step and just fetch the relevant, pre-built package code on-demand via ESM import. And since Snowpack caches everything for you automatically, you can work offline after the first package fetch.
New integration with esbuild: Now, you can plug in esbuild — the “I’m-100x-faster-than-everyone-and-not-obnoxious-about-it-at-all” bundler — to make Snowpack even faster.
The Bottom Line
We’ve got the perfect headline ready to go if Snowpack ever releases a paid, premium version: “Guac is Extra.”
One more glass of that vno vino
Vno is a compiler and bundler that pitches itself as “the first native build tool for compiling and bundling Vue single-file components in a Deno runtime.”
That’s where vno comes in.
The Bottom Line
Vno is the first tool to make it possible for developers to work with Vue in a Deno environment. That’s a cool concept on its own, but it also demonstrates the continued growth and emergence of Deno and Vue’s respective ecosystems.
2020 was obviously a huge year for both technologies, and it looks like 2021 isn’t showing any signs of slowing down. All aboard the hype train.
JS TS Tip: Why TypeScript?
Undefined is not an object error?
TypeScript is a static validation tool, like ESLint. The goal of any kind of validation tool is to increase your confidence that the program you are writing behaves the way it is supposed to and doesn’t have unexpected bugs. Since TypeScript understands the relationships between the types in your codebase, using it well can eliminate entire classes of errors and issues. As you write your code, TypeScript can give you hints to help you write your code correctly. TypeScript doesn’t replace ESLint or automated tests, but it can give you more confidence that your code is working correctly without having to run your code.
It’s important to remember that TypeScript is not a runtime language - all of the types are removed at compile time. It’s purpose is to encourage you, the developer, to use the types to add checks to your program so you have fewer errors and bugs.
any type and
Communication and Documentation
Coming into a brand new codebase can be daunting, especially if you don’t know how all the pieces connect together or how something is supposed to behave. Adding type annotations to your code removes a lot of the guess work in figuring out how a program works and serves as guide for anyone trying to work in your codebase.
TypeScript can also help with refactoring. Without TypeScript, you have no way of knowing all of the different places that need to be updated when you change something. TypeScript checks your change against any other files that might be affected and warns you if anything is broken. All that’s left is to follow each warning and make the appropriate change without needing to run your code.
The Bottom Line
In short, TypeScript will help you write code with less errors by checking your code before you run it. Adding the types might take a little bit of work, but it definitely pays off in the long run.
CodeSwing is a cool VSCode extension that lets you create a personalized web playground right inside your editor. It’s even cooler if you use it while singing along to this iconic 2008 hit: “Now drop it loooow, and let me see your code SWING.”
The Vercel team published a great article and video on everything you need to know about React Server Components.
Mark wrote Why React Context is Not a “State Management” Tool (and Why It Doesn’t Replace Redux).
Stripe released some new VSCode extensions that let you build, test, and use Stripe inside your editor.
JQuery turned 15 years old last week!. It just got its first armpit hairs and is refusing to shower now. Teenagers.
Rob Palmer wrote and in-depth post about his 10 insights from adopting TypeScript at scale at Bloomberg.
You could go through Ania Kubow’s new 12-hour coding bootcamp on YouTube, or you could binge watch all of the extended versions on the Lord of the Rings trilogy. Doing either would probably make you a better person, but Ania’s bootcamp will probably make you better at your job.