New Year's Reso-Vue-tions

Issue #161.February 13, 2023.2 Minute read.
Bytes

This week we’ve got brand new Ramen flavors, a brand new feeling of superiority, and some Valentine’s Day inspiration.

Welcome to #161.


Eyeballs logo

The Main Thing

Superbowl half time shot

The Vue 3 Ecosystem

New Year’s Reso-Vue-tions

Because time is a cruel mistress that only dances in one direction, this year is already somehow 10% complete. And I hate to brag, but I’ve already made some really good progress on my one and only 2023 resolution: mass producing a new official Top Ramen flavor called, Flamin’ Hot Chili Limón Creamy Cool Ranch Beef.

And I’m not the only one with big plans. Evan You just gave a talk where he laid out Vue’s goals and objectives for 2023 — which mostly fall into two main categories.

Category #1: Sharing is caring. Two years ago, the Vue team shared Vite with the world by extracting it from the Vue core and making it framework agnostic. That was a huge success that transformed Vite into one of the web’s most loved build tools, with over 3.2 million weekly downloads today.

Now, they’re looking to run the same playbook with Volar.js — a framework for building language tools for embedded languages. It was initially designed for the specific needs of Vue single-file components, but they just extracted it into a framework-agnostic base that can support any file format involving embedded languages — including Astro, Svelte, and Angular.

Category #2: The best ability is stability. The Vue ecosystem is still carrying some pretty fresh battle scars from the Vue 2 ➡ Vue 3 migration, so the core team is focused on improving stability and reducing fragmentation in 2023.

This “no child codebase left behind” approach will feature smaller, more frequent releases and is already impacting the upcoming v3.3 release — which will no longer include more complicated features like Suspense. They’re also phasing out some more polarizing features like Reactivity Transform altogether.

Bottom Line: It’s good to see that me and Vue are both doubling down on the things we’re best at in 2023.

        

KodeKloud logo

Our Friends
(With Benefits)

Puppet looking at chalkboard with tons of calcuations

Every Kubernetes tutorial

Gain new DevOps skills with KodeKloud

Have you ever been curious about the DevOps world? But does the thought of spending hours learning random theory make you cringe harder than the last time you watched Spy Kids 3D?

That’s why over 550,000 students love KodeKloud. They know that the best way to learn is by building real stuff — which is why their 50+ premium courses come with over 400 hands-on labs and practice problems.

And they make it super easy:

  • You get instant access to 3 sandboxed cloud environments (Google Cloud, Azure, and AWS) and 40+ DevOps environments (like Docker servers, Kubernetes clusters).

  • Their KodeKloud Engineer Program lets you role-play a fictitious SysAdmin job, work on different projects, and get “promoted” all the way up to DevOps Architect. (Basically The Sims, but you actually learn stuff.)

Get a subscription here — or go back to trying to learn the boring way.


The Job Board Logo

The Job Board

Senior Full Stack Engineer
Remote friendly
TS
$160-210k

Motion is looking for experienced TypeScript engineers to build the next generation of productivity tools. You'll inform key frontend architectural decisions that help Motion scale the next 2 order of magnitudes, create delightful user-facing features, and improve application performance. We are an ambitious team of 15 people distributed remotely across North America.

Have a job you want to fill?
Spot the Bug logo

Spot the Bug

Sponsored by Courier

Building applications just got delightful! With a ChatGPT integration and Courier’s API, every notification can be synthesized, with a side of automated fun! #ChatGPTwrotethis

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Cool Bits logo

Cool Bits

  1. Veracode’s State of Software Security report for 2023 found that JavaScript Applications Have Fewer Security Flaws Than Java and .NET Applications. It turns out that my unearned sense of superiority has actually been *earned* all along.

  2. CarbonQA provides QA services for dev teams, so you’ll never have to do it yourself again. They work in your tools, talk with your team on Slack, and let your devs be devs — so you never have to waste engineering time on testing again 🙏. [sponsored]

  3. Shopify wrote about how they’re Bringing Javascript to WebAssembly for Shopify Functions. Much like this recent surge in UFO sightings — I don’t fully understand what’s going on, but I fully support it.

  4. Mojtaba Seyedi wrote this practical guide to building faster websites with Astro.

  5. The Chrome 111 beta just came out and includes lots of fancy new CSS features. Safe to say, it went much better than Google’s other beta demonstration last week.

  6. Laurie Voss wrote an article called The Case for Frameworks in response to another article that compared JS framework authors to oil companies intentionally covering up climate change. (Not a joke.)

  7. In “Something subtle in your browser”, Zainab breaks down a pattern that might become a new trend when building web apps – spinning up a SQLite DB via WASM in your browser. What a time to be alive.

  8. In A Love Letter to React, Chris from the fly.io team breaks down why he loves React and what makes it special. We figured this will be a good template to follow for that Valentine’s day card you have to write later today.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Courier

const Animal = (name, type) => {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')

Arrow functions don’t have their own this. This leads to three errors in our code.

First, we’re adding properties to this in the constructor function. Again, because Arrow Functions don’t have their own this, you can’t do that.

Second, we can’t use the new keyword with an Arrow Function. This will throw a X is not a constructor error.

Third, we can’t add a property on a function’s prototype if that function is an arrow function, again, because there’s no this.

Here’s the solution -

function Animal (name, type) {
  this.name = name
  this.type = type
  this.age = 0
}

Animal.prototype.birthday = function () {
  this.age++
}

const leo = new Animal('Leo', 'Lion')