🔥 (#136) Nesting slots and reactive SVGs
Hey there!
VueConf Toronto is only a couple weeks away, and I'm so excited to be giving a workshop and a talk this year!
My workshop is Advanced Patterns for Simplifying Components, and is basically like the in-person version of the Clean Components Toolkit (although I doubt we'll get through most of the tools in one day).
We're going to learn some awesome patterns for refactoring our code, and it's going to be epic!
I'll be providing exercises, but you can also BYOC (bring your own code) if you want to apply these concepts immediately to your work.
My talk is also on patterns, but far less in-depth (30 minutes vs. a full day!).
The official title is, "5 Patterns for Better Components", but I'm hoping to cover as many things as possible!
I hope to see you there: VueConf Toronto
And if you can't make it, I'll make sure the slides are available.
Have a great week, and enjoy the 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.
🔥 [Video] Refactoring Examples in Clean Components Toolkit
I wanted to share some of the work I've been doing with Clean Components Toolkit.
In this video I talk about the refactoring examples, and how I've changed how they work based on feedback from the pre-release.
Here's a link direct to Vimeo: watch video on Vimeo
🔥 Nesting slots
As you start creating more abstractions with Vue, you may need to begin nesting your slots:
<!-- Parent.vue --> <template> <Child> <!-- We take the content from the grand-parent slot and render it inside the child's slot --> <slot /> </Child> </template>
This works similarly to how you would catch an error and then re-throw it using a try...catch block:
try { // Catch the error reallyRiskyOperation(); } (e) { // Then re-throw as something else for the next // layer to catch and handle throw new ThisDidntWorkError('Heh, sorry'); }
Normally when using a slot we just render the content that's provided to us:
<template> <div> <!-- Nothing to see here, just a regular slot --> <slot /> </div> </template>
But if we don't want to render it in this component and instead pass it down again, we render the slot content inside of another slot:
<template> <Child> <!-- This is the same as the previous code example, but instead of a `div` we render into a component. --> <slot /> </Child> </template>
🔥 Invisible Outlines
Adding a border to an element can get really annoying when it shifts your beautiful layout around.
One way to solve this is by creating an invisible outline — an outline that has no width, no height, and doesn't take up any space.
The way we achieve this is by creating a box shadow that has a spread but with zero blur and zero offset:
box-shadow: 0 0 0 2px black;
The values for a CSS box shadow are:
box-shadow: <offset-x> <offset-y> <blur-radius> <spread> <color>;
By having no offset, we keep the shadow centred on the element, so it's the same thickness all the way around. With no blur, we make sure that it appears like a solid line.
But because we have no offset or blur, we have to include a spread — otherwise, the shadow has zero width!
Here's a demo if you want to play around with it a bit: https://codepen.io/michaelthiessen/pen/rNjzzdW
🔥 Reactive SVG components
SVGs can be reactive components, too.
After all, they're HTML elements just like div, span, and button.
Here's an SVG component that has a prop to change it's fill colour:
<template> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50" :fill="color" /> </svg> </template>
<script> export default { name: "SVGComponent", props: { color: String, }, }; </script>
I'm sure you can build some pretty wild things if you dig into different SVG elements and attributes.
Scoped slots and SVGs? Why not...
Here's a demo if you want to see this example in action.
📜 Coding Better Composables: Options Object (1/5)
I teamed up with Vue Mastery to create this series on coding better composables.
In this series we cover five different patterns.
For each, we show how you can implement it and then we see it in action with a composable from VueUse.
This first article is on using an options object to easily configure the behaviour of your composable.
Check it out here: Coding Better Composables: Options Object (1/5)
💬 Write Less
"A good way to stay flexible is to write less code." — Pragmatic Programmer
🧠 Spaced-repetition: Extract Conditional Pattern
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.
This is one of my favourite tools from the Clean Components Toolkit.
It's super easy to implement, and can be applied in so many situations to clean up your code fairly quickly.
We can apply this in almost any place we have a v-if in our component.
When we extract each branch body we go from this:
<div v-if="condition"> <div> <!-- Lots of code here --> </div> </div> <div v-else> <div> <!-- Lots of other code --> </div> </div>
To this:
<div v-if="condition"> <NewComponent /> </div> <div v-else> <OtherComponent /> </div>
We know we can do this for two reasons:
- Each branch is semantically related
- Each branch does distinct work
We know that each branch is semantically related, meaning all of that code works together to perform the same task.
Each branch also does distinct work — otherwise, why have a v-if at all?
This means it's a perfect opportunity to create new components.
And by replacing a large chunk of code with a well-named component that represents the code's intent, we make our code much more self-documenting.
However, this pattern doesn't always work well. If we have a lot of branches we may want to switch to using the Strategy Pattern, another tool included in the Clean Components Toolkit.
p.s. I also have four courses: Vue Tips Collection, Mastering Nuxt 3, Reusable Components and Clean Components
评论
发表评论