themarcba

This is an addition to my Vue.js Global 2020 talk about Vue 3 Reactivity.

Some people asked for the slides. You can find them here:
https://marcbackes.com/d8qaLT

themarcba

<div id="app"></div>
<script>
    // Create virtual node
    function h(tag, props, children) {
        // Return the virtual node
        return {
            tag,
            props,
            children,
        }

themarcba

<script>
    let activeEffect

    class Dep {
        subscribers = new Set()
        depend() {
            if (activeEffect) this.subscribers.add(activeEffect)
        }
        notify() {
            this.subscribers.forEach((sub) => sub())

themarcba

<script>
    let activeEffect

    class Dep {
        // Initialize the value of the reactive dependency
        constructor(value) {
            this._value = value
            this.subscribers = new Set()
        }

themarcba

const acceptInterval = setInterval(() => {
  const acceptButtons = Array.from(document.querySelectorAll("[role=button]")).filter(
    (button) => button.textContent === "Approve"
  );

  if (acceptButtons.length > 0) {
    acceptButtons.forEach((b) => b.click());
    window.scrollBy(0, window.innerHeight - 100);
  } else {
    clearInterval(acceptInterval);

themarcba

<style>
    * {
        user-select: none;
    }
    body {
        margin: 0;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    #app {
        height: 100vh;

themarcba

npm init vue@3
if [ $? -eq 0 ]; then
    LAST_FOLDER=$(ls -td ./* | head -1)
    cd $LAST_FOLDER
    yarn
    code .
else
   echo "Project creation unsuccessful 😔"
fi

themarcba

#!/usr/bin/env zsh
source ~/.zshrc
ggpull
gco -b "bugfix/$1"

themarcba

Stupid puns. Don't Laugh!

Tech puns

• Why did the Vue child component have such great self-esteem? Because its parent kept giving it props!
• What does a Vue developer have in his tea? Syntactic sugar
• Programming is like sex: One mistake and you have to support it for the rest of your life.
• Sometimes when I'm writing JavaScript I want to throw up my hands and say "this is bullshit!" but I can never remember what "this" refers to.
• Why are JavaScript conferences the worst? It all just sounds scripted.
• How do you comfort a JavaScript bug? a. You console it.

themarcba

// A dependency-free, await-ready function for Node.js
// to get user input in the console
// Author: Marc Backes (@themarcba
const getInput = query => {
    return new Promise((resolve, reject) => {
        const readline = require('readline').createInterface({
            input: process.stdin,
            output: process.stdout,
        })
        readline.question(`${query} `, answer => {