Goooood morning to everyone except for those hating on The Weeknd.
If that’s your thing, we’d love to see you in the comment section ❤️.
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.
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.
Gun to my head, I still couldn’t tell you how to pronounce Vuex.
latest and the greatest
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
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.
Transition.style will help you make your transitions the prettiest belles at the CSS ball.
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.
Justin made a cool video on a unique way to build desktop applications with Vue 3 and Electron.
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.
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.
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?
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!