🔥 (#132) Reducing Objects and Looping Over Ranges

​

Hey all!

I have a couple of announcements today.

First, I'll be giving a talk and a workshop at VueConf Toronto this year.

Both will be on component patterns, but the workshop will be hands on and we'll get to spend the entire day applying patterns to your own code.

You can get your tickets here.

Second, Clean Components Toolkit will be fully released October 18th. That's 3 weeks from today!

Enjoy your tips!

— Michael

Vue Tips Collection

Maybe you just want to stay on top of the latest features, remind yourself of interesting things Vue can do, and get daily inspiration.

Vue Tips Collection is a beautiful book of 115 awesome tips, as well as a daily email to get your creative juices flowing.

​Check out Vue Tips Collection​

🔥 Reducing Objects

The reduce function is excellent for converting arrays into objects (and many other use cases), but it can be intimidating.

If we have a bunch of items that all have an id:

{    id,    //...  }

We can reorganize the array into an object, where the key for each item is the item's id:

const obj = arr.reduce((prev, next) => {    // Grab the id from the item    const { id } = next;      // Add the item to our object    prev[id] = next;      // Return the object so we can add more items    return prev;  }, {});

You get an object that looks like this:

{    'id1': { id: 'id1', ... },    'id2': { id: 'id2', ... },    'id3': { id: 'id3', ... },  }

If you want to group all objects in an array by a specific property, you can do something very similar:

const obj = arr.reduce((prev, next) => {    // Grab the property from the item that we want to group by    const { prop } = next;      // Add a new array to the object if this is the first one    // with this value    if (prev[prop] === undefined) {      prev[prop] = [];    }      // Add our item to this array    prev[prop].push(next);      // Return the object so we can add more items    return prev;  }, {});

Our final object looks like this:

{    'prop1': [      { prop: 'prop1', ... },      { prop: 'prop1', ... },      { prop: 'prop1', ... },    ],    'prop2': [      { prop: 'prop2', ... },      { prop: 'prop2', ... },      { prop: 'prop2', ... },    ],  }

🔥 Looping Over a Range in Vue

The v-for directive allows us to loop over an Array, but it also let's us loop over a range:

<template>    <ul>      <li v-for="n in 5">Item #{{ n }}</li>    </ul>  </template>

This will render out:

• Item #1
• Item #2
• Item #3
• Item #4
• Item #5

When we use v-for with a range, it will start at 1 and end on the specified number.

🔥 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 element 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

📜 3 Ways to Create Inline Composables

Composables are great, except that it seems we always need to create a new file for them.

In this article I explore some ways we can create inline composables — no need to create new files all over the place!

Check it out here: 3 Ways to Create Inline Composables

💬 Solve the Problem

"First, solve the problem. Then, write the code." — John Johnson

🧠 Spaced-repetition: Understanding scoped slots

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.

Here's the best way to think about scoped slots:

Scoped slots are like functions that are passed to a child component that returns HTML.

Once the template is compiled, they are functions that return HTML (technically vnodes) that the parent passes to the child.

Here's a simple list that uses a scoped slot to customize how we render each item:

<!-- Parent.vue -->  <template>    <ScopedSlotList :items="items">      <template v-slot="{ item }">        <!-- Make it bold, just for fun -->        <strong>{{ item }}</strong>      </template>    </ScopedSlotList>  </template>

<!-- ScopedSlotList.vue -->  <template>    <ul>      <li        v-for="item in items"        :key="item"      >        <slot :item="item" />      </li>    </ul>  </template>

We can rewrite this example to use a function instead of a scoped slot:

<!-- Parent.vue -->  <template>    <ScopedSlotList      :items="items"      :scoped-slot="(item) => `<strong>${item}</strong>`"    >  </template>

<!-- ScopedSlotList.vue -->  <template>    <ul>      <li        v-for="item in items"        :key="item"        v-html="scopedSlot(item)"      />    </ul>  </template>

p.s. I also have four products to help you learn Vue: Clean Components Toolkit, Vue Tips Collection, Mastering Nuxt 3 and Reusable Components

Unsubscribe | 8 Queen St N, Kitchener, ON N2H2G8