🔥 (#68) Purchasing power parity! (and some tips) #

July 2022

Hello!

I want everyone to have equal access to learning Vue — and equal access to Vue Tips Collection.

That's why I've put together a purchasing power parity system.

This will help equalize prices across all countries.

You'll see a discount on the sales page if you live in a country where the regular price is too expensive.

This discount varies based on the relative strength of your local currency to USD. So not every country will get a discount.

See what sort of discount you may be eligible for.

— Michael

🔥 How to watch anything in your component #

It took me a very long time to realize this, but anything in your component that is reactive can be watched:

export default {
  computed: {
    someComputedProperty() {
      // Update the computed prop
    },
  },
  watch: {
    someComputedProperty() {
      // Do something when the computed prop is updated
    },
  },
};

You can watch:

• computed props
• props
• nested values

Any value can be watched if you're using the composition API, as long as it's a ref or reactive object.

🔥 My favourite git commands #

Here are a few of my favourite git commands (is it weird to have favourite git commands?):

I'm often jumping back and forth between different branches, and typing is annoying:

# Checkout the previous branch
git checkout -

Sometimes I add new files, then realize I don't actually need them:

# Remove any files not tracked by git
git clean

Or I completely broke everything and need to start over:

# Undo all changes to git and the working directory,
# going back to the most recent commit
git reset --hard

Github takes all of the commits on your PR branch and combines them into a single one when you merge. But sometimes you want to merge a branch, and you aren't ready for a PR just yet:

# Squash all commits from a branch into one commit
git merge --squash <branch>
git commit

📜 Code Coverage for Vue Applications #

Code coverage can be a useful testing metric, as long as you don't focus on it too much (that story is for another time).

But did you know you can get code coverage from your Cypress tests? I certainly didn't.

Read it here: Code Coverage for Vue Applications

💬 Indirection #

"Any problem in computer science can be solved with another layer of indirection, except of course for the problem of too many indirections." —Bjarne Stroustrup

🧠 Spaced-repetition: Reactive CSS #

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.

In Vue 3 we can use reactive values in our <style> block just like we can in the <template> block:

<style scoped>
  .button {
    color: v-bind(buttonColor);
  }
</style>

Behind the scenes, Vue uses CSS computed properties (aka CSS variables) scoped to each component.

The CSS remains static, but we can dynamically update the CSS variables whenever the reactive value changes.

More info can be found in the docs.

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

来源 #

原文 https://michaelnthiessen.com/weekly-068-july-06/

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