🔥 Vue Tips #23: Why there must be one source of truth

This newsletter was sent out to my list on August 25, 2021. Sign up here to get emails like this each week!

Heyo,

I've got some more tips, an article, and a quote — as always.

If you know someone who would enjoy these tips, forward this email to them or send them here so they can sign themselves up.

The more people that sign up, the more I feel obligated to pack in tons of value, and that's especially good for you, right?

So share this newsletter with others, even if it's just for purely selfish reasons 😏

— Michael

🔥 Why there must be one source of truth

This is the most important principle of state management that I know:

Each piece of state has a single owner, a single source of truth.

No one else is allowed to modify the state. It's just borrowed temporarily.

If you have an array in a Vuex store, only that Vuex store can update it. Anywhere in your app that needs that value must get it from the store (whether directly or through another component).

If the state is owned by a component, only that component can modify it. This means other comopnents must emit an event to that component, which can then decide what it wants to do.

Why?

If you allow state to be modified from anywhere, your code becomes a tangled mess.

With a single source of truth, you can easily understand what's happening.

The best code is easily understood.

🔥 Aria roles you didn't know you needed

Aria roles are used to tell a screenreader what an element is for.

This is really important when the native HTML elemen just doesn't exist (eg. roles like toolbar and alert) or when you're using a different HTML element for design or technical reasons (eg. wrapping a radio button to style it).

But please, remember that you should always use the semantic element where you can. This is always the best and most effective solution.

There are six different categories of aria roles:

1. Widget - roles like button, checkbox, separator, tab, or scrollbar
2. Composite - roles like combobox and listbox (these are for dropdown menus), radiogroup, or tree
3. Document structure - this includes article, presentation, figure, feed, and directory
4. Landmark - banner, main, navigation, and region are roles in this category
5. Live region - alert, log, marquee, and status are roles that might update with real-time information
6. Window - alertdialog and dialog are the only two roles in this category

You can check out the full list here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques#roles

📜 (Sponsored) HarperDB, the best db for frontend devs

...but it's not exactly a database.

For me, the most frustrating part of building an app is all of the backend stuff.

You need to find somewhere to persist the data, another place to put the API, and then spend hours configuring and setting it all up. If you pick the one that's easy to use, your project will outgrow it. But if you go all-in with AWS you never even get the project off the ground 🤦‍♂️.

HarperDB does all of this stuff for you, in an easy-to-use package that grows with your project. Here are its best features:

• NoSQL and SQL hybrid
• Custom API functions (powered by Fastify)
• Simple REST API to access everything
• Really easy to use admin dashboard to create tables, add or delete data

I've only played around with HarperDB a bit, but so far I'm impressed, and I plan to use it on my next project.

The best way to get started is through the HarperDB docs, but they also have a well-documented API.

There's also this demo in React. There's nothing yet for Vue + HarperDB, but that just means you could be the one to build it!

📜 The Dark Side of Nuxt

Nuxt is a fantastic framework, but even the best frameworks aren't perfect.

It this article, Jonas uses his experience as a consultant to explore the dark side of Nuxt, and how to refactor the Nuxt Hacker News clone to use Fastify and Vite to eliminate some of those dark spots.

Read it here: Rewriting Nuxt HN with Fastify, Vite and Vue 3

🗞 News: It's (still) conference season!

If you didn't get the memo last week, we have four incredible conferences coming up in the next 3 months, all accessible online and two offering (limited) in-person experiences:

• Nuxt Nation — September 15th — free and online
• Vuejs Global (Amsterdam) — October 1st and 4th — Amsterdam and online
• Vue.js Conference (London) — October 20-21 — London and online
• VueConf Toronto — November 22-23 — free + online

💬 Simplicity

"Complicated code is a sign that you don't understand your program well enough to make it simple." — Steve McConnell

🧠 Spaced-repetition: Clean up your Tailwind classes

The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨‍🔬

Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory.

After using Tailwind for awhile you'll start to notice you end up with a lot of elements that have tons of classes on them:

<div class="mx-5 w-1/2 md:mx-0 md:w-auto mb-8 flex justify-end">

You can combine all of these utility classes together into a single class by using the @apply directive:

<template>
  <div class="combined"></div>
  <div class="combined"></div>
</template>

<style>
.combined {
  @apply mx-5 w-1/2 md:mx-0 md:w-auto mb-8 flex justify-end;
}
</style>

This lets you reuse those styles without having to create a whole new Vue component for them.

Of course, one of the best parts of Vue is that we can create reusable components, but not everything needs to be (or deserves to be) it's own component.

Exclusive tips and insights every week

Join 8135 other Vue devs and get exclusive tips and insights like these delivered straight to your inbox, every week.

You have great content in your emails. I seriously learn something from every one of them. — Titus Decali

Thanks for another beautiful tip 🙏 — Victor Onuoha

Loving these, and the spaced repetition — Mark Goldstein

Sign up here