Weekly Vue.js News - #53 - Avoid Directly DOM Manipulation
Hi 👋
I’m back from my honeymoon. First, I apologize for the layout and content problems in my last two newsletter issues. You can expect the upcoming issues to have better quality.
In this issue, I will explain why you should avoid directly manipulating the DOM in Vue and use ref instead. Additionally, it includes curated articles and tools for you.
Have a great week ☀️
Vue Tip: Avoid Directly DOM Manipulation
It is a no-go to manipulate the DOM in Vue.js directly:
Instead, you want to make use of refs. ref is a special attribute that allows us to obtain a direct reference to a specific DOM element or child component instance after it's mounted.
Note that you can only access the ref after the component is mounted because the element doesn't exist until after the first render.
Let's take a look at the above example using a template ref:
Curated Vue Content
Ref vs Reactive — vuejsdevelopers.com
👉🏻 Vue 3’s Composition API provides two main ways of declaring reactive data.
👉🏻 Anthony explains in this article the difference between these and which should you use.
Invalidating Computed with The Composition API
There are cases where you want to invalidate a computed prop you created and re-evaluate its value, this happens often if the computed prop uses non-reactive parts.
Kara Erickson spoke about the NuxtJS and Chrome collaboration that she works on as a member of the Chrome Aurora team.
📹 Vue.js Forge: Recap of Day 2
Highlights: Q&A with Evan You, live coding session by Maya Shavin and Jessica Sachs and more amazing guidance from other industry and product experts.
👉🏼 An open-source Notion UI built with Vue 3.
👉🏻 Uses , TypeScript and Vite.
👉🏻 Like Gridster.js (from the jQuery days!) , but for Vue.js.
👉🏻 There’s a demo right on the homepage.
A game engine entirely written using Vue.js
JavaScript Tip: Implement a builder with method chaining
We can implement a builder in JavaScript by writing a class that contains methods which return this:
After instantiating a new instance of the Builder class, we can chain the methods on the builder variable:
Curated Web Development Content
Migrating millions of lines of code to TypeScript
How and why the Stripe team migrated 3.7 million lines of JavaScript to TypeScript.
The 10 Most Common JavaScript Issues Developers Face
This article shows 10 of JavaScript’s subtleties that lead to a number of common problems that keep it from working.
Extract parameter types from string literal types with TypeScript
How to parse and derive types from string literal types in TypeScript using template literal types.
It's 1997 and you want to build a website
👉🏻 Let's time travel back to 1997. There is no Stack Overflow.
❓ How would you build a website?
👉🏻 Can you describe the difference between a statement and an expression in JavaScript?
👉🏻 If you’re not entirely sure, this is a good refresher on what’s involved.
Learn Test-Driven Development with JavaScript
👉🏻 This tutorial will teach you the strengths of this software development methodology.
👉🏻 You'll use the Jest library to code your own Unit Tests, Integration Tests, and End-to-End Tests.
I Regret My $46k Website Redesign
Michael talks about his lessons learned from a project that was supposed to take a few months and $15k but took eight months and $46k.
Quote of the Week
Tools & Misc
"Docusaurus will help you build the best documentation websites with minimal effort, letting you focus on what really matters: writing the content."
