🔥 (#60) Shorthand for slots #

May 2022

Hey all!

Tomorrow is my last day at Vidyard.

I've been there for 4.5 incredible years, and I'm sad to leave.

But I'm on to new and exciting things!

Friday, I leave for a vacation that I've waited over two years for. Unfortunately, some "global events" interfered with that one, but we finally made it happen.

Then starting in June, my entire focus will be on bringing you more Vue content:

• First, I'll be releasing Vue Tips Collection in June 🎉
• Then, I plan on updating Clean Components — it's overdue for an overhaul! I'm not sure yet what this update will look like, but it will definitely include Vue 3 and the composition API.
• ...? This is as far as my roadmap goes (for now)

Of course, I'll still be sending you this weekly newsletter and writing some articles here and there.

Coming up: I've got one on Suspense as well as parts 3-5 of the Coding Better Composables series!

And don't worry, I'll be off on vacation, but you'll still get these newsletters.

I've been working ahead, and I have scheduled the newsletters to go out while I'm away. So you should see the Vue tips in your inbox just like any other week.

— Michael

🔥 Shorthand for named slots #

Named slots also have a shorthand syntax, one that's much nicer to look at.

Instead of writing this:

<DataTable>
  <template v-slot:header>
    <TableHeader />
  </template>
</DataTable>

We can write this:

<DataTable>
  <template #header>
    <TableHeader />
  </template>
</DataTable>

Not a huge difference, but a little cleaner for sure. I think the # character is easier to pick out than v-slot when reading code.

🔥 Don't Override Component CSS #

It can be really tempting to quickly modify a component's CSS from outside the component. If all you need is a slight modification, it seems harmless — but it's not.

Let's say you have a normally blue button, but you need it to be green in this specific case. You can override the background colour from the parent component like this:

<template>
  <button class="green">Make this button green</button>
</template>

<style>
  .green.button {
    background: green;
  }
</style>

This does work, but it's very fragile and prone to breaking.

What if the class name changes?

What if the HTML of the component is modified?

Anyone making changes to the button component will have no idea that this component's background colour is overridden. They won't know to update this component too.

Instead, we can just extend the functionality of the button component. That way, we keep all of the code that modifies the button inside the button component.

Here, we can add a is-green prop to the button component:

<template>
  <button is-green>Make this button green</button>
</template>

<style>
  /* No extra styles needed! */
</style>

Adding to the component itself makes it easier for anyone else who might need this button to be green in the future!

I've created a demo showing the original component and the new one with the added prop: https://codesandbox.io/s/wizardly-aryabhata-kn37d?file=/src/components/Button.vue

📜 Manual testing, E2E testing, unit testing – how to decide which testing strategy to use? #

In this article Markus takes us through thinking about testing in terms of managing risk.

He gives some great thoughts on managing the balance between risk and reward in testing.

Read it here: Manual testing, E2E testing, unit testing – how to decide which testing strategy to use?

💬 Libraries #

"Telling a programmer there's already a library to do X is like telling a songwriter there's already a song about love." —Pete Cordell

🧠 Spaced-repetition: Global Properties #

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.

It's possible to add global properties to your Vue app in both Vue 2 and Vue 3:

// Vue 3
const app = createApp({});
app.config.globalProperties.$myGlobal = "globalpropertiesftw";

// Vue 2
Vue.prototype.$myGlobal = "globalpropertiesftw";

I would recommend prefixing any global properties with a $.

This helps prevent naming conflicts with other variables, and it's a common convention that makes it easy to spot when a value is global.

This global property can be accessed directly off of any component when using the Options API:

computed: {
  getGlobalProperty() {
    return this.$myGlobal;
  },
},

Why can't this be used with the composition API?

Because the composition API is designed to be context-free, and has no access to this.

Instead, you can create a simple composable to access your globals:

<script setup>
  import useGlobals from "./useGlobals";
  const { $myGlobal } = useGlobals();
</script>

// useGlobals.js
export default () => ({
  $myGlobal: "globalpropertiesftw",
});

p.s. I also have two courses: Reusable Components and Clean Components

来源 #

原文 https://michaelnthiessen.com/weekly-060-may-11/

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。