🔥 Vue Tips #23: Why there must be one source of truth
Tags: vue, webdev, javascript, tutorial
Published: 2021-08-31 12:16:59

---
title: "🔥 Vue Tips #23: Why there must be one source of truth"
published: true
description: "One source of truth, useful aria roles, HarperDB, the dark side of Nuxt, conference season (again), and keeping things simple."
canonical_url: https://michaelnthiessen.com/weekly-023-august-25/
tags: vue, webdev, javascript, tutorial
series: Vue Tips
---

_This newsletter was sent out to my list on August 25, 2021. [Sign up here](https://michaelnthiessen.com/newsletter) 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](https://michaelnthiessen.com/newsletter) 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`
1. Composite - roles like `combobox` and `listbox` (these are for dropdown menus), `radiogroup`, or `tree`
1. Document structure - this includes `article`, `presentation`, `figure`, `feed`, and `directory`
1. Landmark - `banner`, `main`, `navigation`, and `region` are roles in this category
1. Live region - `alert`, `log`, `marquee`, and `status` are roles that might update with real-time information
1. 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](https://harperdb.io/docs/getting-started/), but they also have a [well-documented API](https://api.harperdb.io/).

There's also this [demo in React](https://github.com/cassidoo/book-rating-demo). 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](https://vuejsdevelopers.com/2021/03/23/nuxt-vite-fastify/)

## 🗞 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](https://nuxtnation.com/) — September 15th — free and online
- [Vuejs Global (Amsterdam)](https://www.vuejs.amsterdam/) — October 1st and 4th — Amsterdam and online
- [Vue.js Conference (London)](https://vuejs.london/) — October 20-21 — London and online
- [VueConf Toronto](https://www.vuetoronto.com/) — 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:
```html
<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:
```html
<template>
  <div class="combined"></div>
  <div class="combined"></div>
</template>
```
```html
<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](michaelnthiessen.com/newsletter) 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](michaelnthiessen.com/newsletter)