An absolute rager

Issue #34.February 8, 2021.2 Minute read.
Bytes

Goooood morning to everyone except for those hating on The Weeknd.

Your favorite most confident JavaScript newsletter is on Product Hunt today.

If that’s your thing, we’d love to see you in the comment section ❤️.

Vuex Releases v4.0

The Weeknd

Bugs when you mutate state in a predictable fashion with Vuex

Quick re-vue: Vuex is the default state management pattern and library for Vue.js. It was created by members of the Vue team and designed after the same Flux patterns and architecture you see in Redux. The main difference between Redux and Vue has to do with immutability. When you mutate state in Redux, Dan appears and politely scowls in your direction. When you mutate state in Vuex, assuming you follow the rules, Evan appears and gives you a subtle, yet approving smile.

What’s new: To maintain its tight integration with Vue, this new Vuex release focuses on compatibility with all of the new updates that came with the release of Vue 3 last September. This includes newly-added support for Vue 3’s Composition API, greater TypeScript support, and a more simplified approach to using Vuex generally.

Breaking Changes:

  • New installation process — With Vuex 4.0, you use the new createStore function to create a new store instance.

  • Removal of global typings for this.$store within Vue components — Designed to enable TypeScript users to compose full typing layers in components, including manual declarations that enable fully typed structures.

  • New bundles — Four bundles are automatically generated to align with Vue 3. Check out the docs if you wanna see what they are, because I refuse to type them all into this email.

The Bottom Line

Gun to my head, I still couldn’t tell you how to pronounce Vuex.

npm 7 is the latest and the greatest

npm v7

Call the ambulance, but not for me

npm 7 was just published as latest to the npm registry last week, and it’s now the default version you get when you run npm install --global npm. We wrote about this update when it was first announced last October, but since most of you weren’t with us back then and the rest of you forgot about it, we put together this little npm 7 refresh for you.

3 Big Highlights:

  • Workspaces — By far the most-requested feature by npm users everywhere, this new set of npm CLI features lets you manage multiple packages from within a singular, top-level root package. It’s the first time any package manager (not named Y*rn) has offered this functionality.

  • Auto-installing peer dependencies — With npm v6 (because programming is hard), peerDependencies were not installed by default. With v7 (because we can do hard things), they are.

  • package-lock v2 and support for yarn.lock: When your parents are separated but they put aside their differences to support you anyway. v7 now supports yarn.lock files. There’s also a new package-lock format which will (in their words, obviously) “allow you to do ‘deterministically reproducible builds’ and includes everything npm needs to fully build the package tree.”

Other cool new features include improved npm audit output and the ability to skip pre/post scripts when using --ignore-scripts.

The Bottom Line

This was npm’s first major release since it cashed out was acquired by GitHub/Microsoft back in March. When that deal happened, GitHub’s CEO promised to invest some of those sweet PowerPoint dollars from Microsoft into modernizing npm and making it faster and more scalable.

This big release makes it seem like Github is starting to make good on that promise, while working towards its longer-term goals of integrating npm into GitHub itself. Stay tuned.

One Question Interview

What does building for the web look like 5 years from now?

Tomasz Lakomy
  • Simple things continue to get simpler (thanks serverless technologies and frameworks like Next.js)
  • React will be the go-to tool for building apps, Svelte the go-to tool for building sites
  • jQuery and Wordpress will still power majority of the web
  • I’m still looking up flexbox documentation every time I need to style something

Cool Bits

  1. Felix wrote an absolute rager about JavaScript’s Memory Management. You’ll never guess how it ends.

  2. Transition.style will help you make your transitions the prettiest belles at the CSS ball.

  3. Daniel wrote about 10 bad TypeScript habits you should try to break this year. Thankfully, “Stop ingesting 500+ mg of caffeine every time you jump into a TypeScript codebase” didn’t make the list. So we’re all still good.

  4. Justin made a cool video on a unique way to build desktop applications with Vue 3 and Electron.

  5. VSCode released its first update of 2021 last week. It includes fun new features like wrapping editor tabs, so that it’s easier than ever to crash your computer by making sure you have at least 275 files open at any given time.

  6. Deskreen is an Electron app that lets you turn any device with a web browser into a secondary screen for your computer. I’m finally gonna be a 10x engineer now that I can use my iPhone 6S as another external monitor.

  7. Jake Archibald wrote about why you shouldn’t use functions as callbacks unless they’re designed for it. Let me guess, Jake, your next article is gonna be about how I shouldn’t be using Deskreen to turn my Apple Watch into a 5th monitor?

  8. NES.css is an old-school, Nintendo NES-style 8-bit CSS Framework. 8-bit? Hmmm. Could that be why there are exactly 8 cool bits in each issue of Bytes? WHAT A REVEAL!