DEV Community: Marc Backes

Unlock "sudo" with TouchID on your Mac

Marc Backes — Thu, 04 Jan 2024 17:51:08 +0000

Since I got my Magic Keybord with integrated TouchID, I don't rely on my password anymore to authenticate myself on my local machine. So I thought why not enable it for "sudo" commands in the Terminal as well?

Here is how:

Copy `sudo_local` file

sudo cp /etc/pam.d/sudo_local.template /etc/pam.d/sudo_local

Edit `sudo_local` file

Uncomment the following line in the newly copied sudo_local file (e.g. with sudo vi /etc/pam.d/sudo_local):

auth       sufficient     pam_tid.so

Save the file, and voilà!

You might have to exit your current shell or open a new one before it works

What is Vue Storefront?

Marc Backes — Wed, 11 May 2022 08:35:46 +0000

You might have seen the presence of Vue Storefront on social media, conferences, and so on. But do you know what Vue Storefront is?

In this article I will take you through a journey of getting to know the basics of what Vue Storefront as a frontend framework does.

What actually is Vue Storefront? 🤷‍♂️

Vue Storefront is an eCommerce frontend framework that connects to

An eCommerce backend (such as Shopify, Magento, etc.)
Other third-party services (CMS, payment, authentication, etc.)

Connecting services 🔗

So if you want to create an eCommerce shop, Vue Storefront helps you combine all these services you need in order to create a shop.

Example:

You might have a Shopify eCommerce platform, but want to add copy for a promotion you're having, provide a separate payment option with PayPal, authenticate your user to give them a a personalized experience, include a search in your shop.

With Vue Storefront, you can get this done by adding a CMS for the copy, the PayPal integration for the checkout, the Auth0 integration for authenticating your users, and the Algolia integration for adding search functionality.

What does Vue Storefront do for you? 👀

As you can see in the example above, you can integrate different services to fit your needs, and Vue Storefront does the rest of the heavy lifting 🏋️‍♂️

Providing a lightning-fast online shop for you to work with
Facilitate extensivility

Lightning-fast online shop ⚡

Vue Storefront provides a lightning-fast online shop by:

Keeping the bundle size small (Using modern technologies)
It only loads what’s needed (Leveraging Code Splitting, Lazy Loading, Lazy Hydration)
It loads already-visited pages instantly (By caching the page on the first visit, Preloading resources that might be needed in the future)
Is hosts and executes as much as possible on the server (So the part served to the users is much lighter and faster)

Extensibility 🔌

You can extend Vue Storefront to your liking

By using some of the integrations maintained by the Vue Storefront team or community
Or choosing between hundreds of Nuxt modules
As a developer, you can also create new integrations for a certain platform, and make it available to other users

Tech Stack 🥞

Vue Storefront is essentially a Nuxt application, which is extended by modules and plugins.

☝️ The frontend is largely handled by Nuxt.
💪 Vue Storefront adds eCommerce capabilities through Nuxt modules and plugins.

Storefront UI

Vue Storefront also includes Storefront UI.

A Vue.js design system and UI for headless commerce.

It’s installed by default to all Vue Storefront project, but you can install the UI library you prefer.

Storefront UI is

100% customizable
Open-Source
Made and optimized for eCommerce and Vue Storefront

Summary 📋

Let's summarize the most important take-aways from this blog post

Vue Storefront is a frontend app to build online shops
It does a lot of the heavy lifting for you in terms of performance
It is a Nuxt application, extended with eCommerce capabilities

Bug, Error, Defect, Failure Explained

Marc Backes — Thu, 15 Oct 2020 12:36:06 +0000

Often, terms like error, bug, defect, failure are used interchangeably. But each one has its own meaning. In this post, I will explain the differences.

TD;DR

The following quote explains in a nutshell what you need to know about the differences between error, bug, defect, failure.

A coding mistake is called an error. The error found by the tester is called a defect. A defect accepted by the development team is called bug. If the software does not meet the requirements, then it is failure.

Error

An error happens during coding. This can be a range of things:

Syntax error (wrongly using the programming syntax)
Compiling error (the syntax is fine, but there is another problem during compilation, for example, the wrong use of a variable)
Runtime error (the program crashes when it is running)

In short, something that breaks the code. This always happens at the development side, so this is something the programmer/developer detects.

Defect

When a tester detects that the program does not behave the way it is supposed to, that is a defect.

A defect could be caused by an underlying error (but not necessarily). For example, this would happen if a JavaScript error is thrown due to a DOM element not being yet available, but the code is trying to access it. This would result in the rest of the code not running, ergo: Resulting in unexpected behavior.

However, the code could run error-free, but there still could be mistakes in the logic of the code. For example, updating a value in the database and forgetting to save that change. This would not cause an error; however, it would be a defect because the program doesn't behave as it is supposed to.

Defects are usually detected by testers.

Bug

When a defect, detected by a tester, is sent to the developer and they find that indeed it is due to a programming mistake, it is accepted as a bug.

The developer looks for the cause of the bug (debugging) and once the culprit is found, the bug is being fixed.

Fun fact: It is called bug, because in the early days of computing when electromechanical relays were used, and an actual bug (e.g., a moth) is trapped in a relay, causing the program to malfunction.

Failure

A failure is when the program can't work the way it was intended to, but not due to a programming mistake.

For example, this could be faulty software requirements (not specifying that something needs to be implemented) or other reasons, such as network problems not caused by the software. (Although the software should catch those programs and show the user an error).

Summary

Well, there you have it - the differences between an error, a defect, a bug, and a failure. So if next time there is a problem with the program, you can use the correct term, so everyone knows the nuance of the problem at hand.

What is a Senior Developer Really?

Marc Backes — Thu, 15 Oct 2020 12:34:38 +0000

There is a common misconception of what a senior developer is. Some may tell you it's the years of experience, others may say it's the "bugfixes per second". It's none of those.

What a senior developer is NOT ☝️

When you look for a developer/software engineer job and read through the postings, you find a pattern where recruiters seem to define a senior developer on the number of years they have experience in the field. Well, this is not how it works. Determining what and what, not a senior developer is, is more complicated than that.

Let's start with what they are not:

People that know everything about a programming language
Know all the answers
The absolute truth

Problem solving 💡

One of the essential traits of a senior developer is the ability to solve problems quickly while also:

staying efficient
making sure not to introduce unnecessary sources of errors
creating as little friction with the existing system as possible
thinking of the bigger picture
having expandability/reusability in mind
make decisions about potential trade-offs

There is not always enough time to make perfect solutions. A senior developer must know which sub-optimal solution they can accept for the moment, but be sure to raise awareness that it's a quick solution for now but that it needs to be changed sometime in the future.

Tech skills & experience 🛠

Of course, it is important that a senior developer has a vast amount of technical skills experience. This does not mean that they know every syntax by heart and can list all the array functions available.

No, this has more to do with knowing what tools and software patterns are out there, so they can choose the correct one for the problem at hand.

Often, a senior developer has some sixth sense when it comes to possible roadblocks. This experience is drawn from previous projects. They can't immediately explain why one road may be worse, but they can almost bet on why one solution would be better. When they look closely at the problem, they will eventually find what's wrong exactly with a given approach, though.

It's also vital to know what you don't know and do some more research to learn more about the problem.

Knowledge of technologies ⚙️

A great senior developer also knows about tools available, even if they are not using them and even if they don't remember exactly how they work. They know when the occasion arises that there is something out there that could be a great fit.

They are experts in pairing the perfect tool with a given problem. They might have to do some research to ensure that a tool is right for the job, but they know what to look for.

Especially at the beginning of a new project, a senior developer should make wise choices of which decisions pay off in the long run.

From start to the end 🌟

A senior developer is capable of handling every step of the way to build a part of the software:

Analyze the problem
Understand the problem
Form a viable solution for the problem
Implement the solution
Test the solution
Integrate the solution
Deploy the solution

Mentoring 😊

One important quality that every senior developer should possess is to be able to lead others. This means:

Help them to up their skills
Guide them to better solutions and help them understand why
Help them when they are stuck
Don't look down on them
Provide them with interesting and helpful resources
Cheer others on
Share what you know
Give credit where credit is due

Communication 💬

Senior developers should be great communicators:

Explain a problem to someone in an understandable way (even to non-tech people)
Present a solution and explain why among all the solutions, his is the best
Navigate political situations in the workplace
Try to shield other developers from bad management decisions

Humbleness 🙏

A senior developer is not always right, and they should know that. Everyone makes mistakes, and when they make one, they should own up to them:

Raise awareness of a problem
Claiming responsibility
Analyze the severity of a problem
Have a range of solutions to solve the problem
Accept help

Also, a senior developer should never assume they are always right. They should analyze input from others and be prepared to accept it as a better solution. However, they should not be easily influenced by others either. They should always have the best solution in mind. There is no place for ego.

Summary ✨

In summary, a senior developer is really good at solving problems, choosing the right technology for a job, and helping others excel at their own job.

Create Your Own Vue.js From Scratch - Part 5 (Bringing it all together)

Marc Backes — Sat, 23 May 2020 12:51:14 +0000

If you like this article, chances are you'd like what I tweet as well. If you are curious, have a look at my Twitter profile. 🚀

This post is the fifth part of a series called Create Your Own Vue.js From Scratch, where I teach you how to create the fundamentals of a reactive framework such as Vue.js. To follow this blog post, I suggest you first read the other parts of the series.

Roadmap 🚘

Introduction (this post)
Virtual DOM basics
Implementing the virtual DOM & rendering
Building reactivity
Bringing it all together

Recap

In the last posts, we created our own virtual DOM and replicated a rudimentary Vue 2 reactivity.

For the virtual DOM, we created an engine that allows us to create virtual nodes, mount/unmount them to/from the actual DOM. The code can be found on Github.

For the reactivity, we built a dependency class, which we then use to detect changes in object property changes, we bound using Object.definePropert(). The code can be found on Github.

Preparation

First, we create a new HTML-file add a div with the ID app, and <script> tag.

Second, we copy the following functions from the VDOM example into the <script></script>-tag:

h
mount
unmount
patch

Third, we copy the following elements from the reactivity example into the <script>-tag:

Dep-class
watchEffect-function
reactive-function
activeEffect variable declaration

Writing our template

Let's assume we want to create a very simple click-counter like this one:

We would need a structure like this:

<div id="app">
    <div id="container">
        <h1>NUMBER_OF_CLICKS</h1>
        <p>clicks</p>
    </div>
</div>

The #app-div is the mounting point for our application, so we just need to create a template for the .clickContainer and it's content. For this, we write a function that returns the template we will render to the DOM later, using the h-function from the VDOM:

function render(clickCount) {
    return h(
        'div',
        { class: 'container' },
        [h('h1', null, clickCount)],
        h('p', null, 'clicks'),
    )
}

Create our reactive state

In this simple example, we only have one variable, so one property in our reactive state:

const state = reactive({
    count: 0,
})

Make our VDOM reactive

We're almost done. What we need to do now is to call the watchEffect function, so we can react upon changes in the state.count property. There are two scenarios for this:

It's the first time our callback function gets called: We need to mount the template to the DOM
It's not the first time our callback function gets called: We need to patch() the node in the DOM

To differenciate between this, let's create a variable previousNode.

let previousVnode
watchEffect(() => {
    if (!previousVnode) {
        // No previous node. We must mount it to the DOM
    } else {
        // There is a previous node. We need to patch it (update)
    }
})

For the first case, we create a new node with our render function and mount it to the DOM:

previousVnode = render(String(state.count))
mount(previousVnode, document.getElementById('app'))

For the second case, we create a new node and patch it to the previousNode. (Compare and see what the differences are).

const newVnode = render(String(state.count))
patch(previousVnode, newVnode)
previousVnode = newVnode

Create the click event

Our reactive DOM is now done. It will react to changes to the state.count variable. The last thing left for our counter to work is to increment the counter on the click of the #app element:

We just add onclick="state.count++" to it:

<div id="app" onclick="state.count++">

And voilà! We have a simple click counter, we built on top of our own reactive library.

Congratulations! 🎉

Add some style

This of course still looks ugly. To make it a little bit fancier, add a <style>-tag to the top of the document and add the following CSS code to it:

* {
    user-select: none;
}
body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#app {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #41b883;
    color: #ffffff;
}

h1 {
    font-size: 10rem;
    font-weight: 900;
    margin: 0;
}

p {
    margin: 0;
    text-align: center;
    font-weight: 100;
    font-size: 3rem;
}

Summary

This is a very simple example, and could be done with way less code in simple JavaScript. However, keep in mind that this series is for educational purposes, so you get an insight to the internals of a frontend framework. It's not meant for you to create your own framework and use it in production. (Of course, you could.)

In this last part (for now), there we learned how to put together our own reactivity with our own virtual DOM to create a rudimentary reactive frontend framework. If you are keen to build more stuff on top of this, go ahead. You'll learn a lot in the process. If you built something, let me know and I'll check it out. Curious if someone uses this to learn stuff.

There might be a bonus coming some day where I build something more advanced with this "framework".

The code of this last part can be found on Github as well.

Original cover photo by Joshua Earle on Unplash, edited by Marc Backes.

Create Your Own Vue.js From Scratch - Part 4 (Building The Reactivity)

Marc Backes — Sat, 25 Apr 2020 10:41:03 +0000

If you like this article, chances are you'd like what I tweet as well. If you are curious, have a look at my Twitter profile. 🚀

This post is the fourth part of a series called Create Your Own Vue.js From Scratch, where I teach you how to create the fundamentals of a reactive framework such as Vue.js. To follow this blog post, I suggest you read about the other parts of this series first.

Roadmap 🚘

Introduction
Virtual DOM basics
Implementing the virtual DOM & rendering
Building reactivity (this post)
Bringing it all together

What is state reactivity?

State reactivity is when we do something (react) when the state of our application (set of variables) changes. We do this in two steps:

Create a "reactive dependency" (We get notified when a variable changes)
Create a "reactive state" (Basically a collection of dependency variables)

1. Building a reactive dependency

Function to watch over changes

For this to work, we first need a function that is executed when a reactive dependency changes. As in Vue, this is called watchEffect; we'll also call our function that.

In our example, this function looks like this:

function watchEffect(fn) {
    activeEffect = fn
    fn()
    activeEffect = null
}

The global variable activeEffect is a temporary variable where we store our function, passed to watchEffect. This is necessary, so we can access the function when itself reads a dependency that refers to that function.

Dependency class

We can see a reactive dependency as a variable that notifies to its subscribers when it's value changes.

It can be created with an initial value, so we need a constructor
We need to subscribe a function to changes on the dependency. We'll call this depend()
We need a to notify subscribed functions of the dependency when the value changes. We'll call this notify()
We need to do something when the value gets read or written, so we need a getter and a setter

So our skeleton will look like this:

class Dep {
    // Initialize the value of the reactive dependency
    constructor(value) {}

    // Subscribe a new function as observer to the dependency
    depend() {}

    // Notify subscribers of a value change
    notify() {}

    // Getter of the dependency. Executed when a part of the software reads the value of it.
    get value() {}

    // Setter of the dependency. Executed when the value changes
    set value(newValue) {}
}

The class has two fields: value (value of the dependency) and subscribers (set of subscribed functions).

We implement this step by step.

Constructor

In the constructor, we initialize the two fields.

constructor(value) {
    this._value = value // not `value` because we add getter/setter named value
    this.subscribers = new Set()
}

subscribers needs to be a Set, so we don't repeatedly subscribe to the same function.

Subscribe a function

Here, we need to subscribe a new function as an observer to the dependency. We call this depend.

depend() {
    if (activeEffect) this.subscribers.add(activeEffect)
}

activeEffect is a temporary variable that is set in the watchEffect which is explained later on in this tutorial.

Notify subscribers of a dependency change

When a value changes, we call this function, so we can notify all subscribers when the dependency value changes.

notify() {
    this.subscribers.forEach((subscriber) => subscriber())
}

What we do here is to execute every subscriber. Remember: This is a subscriber is a function.

Getter

In the getter of the dependency, we need to add the activeEffect (function that will be executed when a change in the dependency occurs) to the list of subscribers. In other words, use the depend() method we defined earlier.

As a result, we return the current value.

get value() {
    this.depend()
    return this._value
}

Setter

In the setter of the dependency, we need to execute all functions that are watching this dependency (subscribers). In other words, use the notify() method we defined earlier.

set value(newValue) {
    this._value = newValue
    this.notify()
}

Try it out

The implementation of dependency is done. Now it's time we try it out. To achieve that, we need to do 3 things:

Define a dependency
Add a function to be executed on dependency changes
Change the value of the dependency

// Create a reactive dependency with the value of 1
const count = new Dep(1)

// Add a "watcher". This logs every change of the dependency to the console.
watchEffect(() => {
    console.log('👻 value changed', count.value)
})

// Change value
setTimeout(() => {
    count.value++
}, 1000)
setTimeout(() => {
    count.value++
}, 2000)
setTimeout(() => {
    count.value++
}, 3000)

In the console log you should be able to see something like this:

👻 value changed 1
👻 value changed 2
👻 value changed 3
👻 value changed 4

You can find the complete code for the dependency on 👉 Github.

2. Building a reactive state

This is only the first part of the puzzle and mainly necessary to understand better what is going to happen next.

To recap: We have a reactive dependency and a watch function that together give us the possibility to execute a function whenever the variable (dependency) changes. Which is already pretty damn cool. But we want to go a step further and create a state.

Instead of somthing like this:

const count = Dep(1)
const name = Dep('Marc')
id.value = 2
name.value = 'Johnny'

We want to do something like this:

const state = reactive({
    count: 1,
    name: 'Marc',
})
state.count = 2
state.name = 'Johnny'

To achieve this, we need to make some changes to our code:

Add the reactive function. This created the "state" object.
Move getter and setter to the state instead of the dependency (because this is where the changes happen)

So the dependency (Dep) will only serve as such. Just the dependency part, not containing any value. The values are stored in the state.

The reactive function

The reactive() function can be seen as an initialization for the state. We pass an object to it with initial values, which is then converted to dependencies.

For each object property, the following must be done:

Define a dependency (Dep)
Definer getter
Define setter

function reactive(obj) {
    Object.keys(obj).forEach((key) => {
        const dep = new Dep()
        let value = obj[key]
        Object.defineProperty(obj, key, {
            get() {
                dep.depend()
                return value
            },
            set(newValue) {
                if (newValue !== value) {
                    value = newValue
                    dep.notify()
                }
            },
        })
    })
    return obj
}

Changes on the dependency

Also, we need to remove the getter and setter from the dependency, since we do it now in the reactive state:

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

The watchEffect function stays the same.

Try out the code

And we are already done with converting our dependency variable into a reactive state. Now we can try out the code:

const state = reactive({
    count: 1,
    name: 'Marc',
})

watchEffect(() => {
    console.log('👻 state changed', state.count, state.name)
})

setTimeout(() => {
    state.count++
    state.name = 'Johnny'
}, 1000)

setTimeout(() => {
    state.count++
}, 2000)
setTimeout(() => {
    state.count++
}, 3000)

In the console log you should see something like this:

👻 state changed 1 Marc
👻 state changed 2 Marc
👻 state changed 2 Johnny
👻 state changed 3 Johnny
👻 state changed 4 Johnny

You can find the complete code for the reactive state on 👉 Github.

Summary ✨

That's it for this part of the series. We did the following:

Create a dependency with a value inside, which notifies a subscribed function when the value changes
Create a state where a subscribed function is called for the change of every value

Original cover photo by Joshua Earle on Unplash, edited by Marc Backes.

Create Your Own Vue.js From Scratch - Part 3 (Building The VDOM)

Marc Backes — Sun, 29 Mar 2020 10:29:44 +0000

Create Your Own Vue.js From Scratch - Part 3 (Building The VDOM)

If you like this article, chances are you'd like what I tweet as well. If you are curious, have a look at my Twitter profile. 🚀

This is this third part of a series called Create Your Own Vue.js From Scratch, where I teach you how to create the fundamentals of a reactive framework such as Vue.js. To follow this blog post, I suggest you read about the first and second part of this series.

This post might be long at first, but probably not as technical as it looks like. It describe every step of the code, that's why it looks pretty complicated. But bear with me, all of this will make perfect sense at the end 😊

Roadmap 🚘

Introduction
Virtual DOM basics
Implementing the virtual DOM & rendering (this post)
Building reactivity
Bringing it all together

Building the Virtual DOM

The skeleton

In the second part of this series, we learned about the basics of how the virtual DOM works. You copy the VDOM skeleton from the last point from this gist. We use that code to follow along. You'll also find there the finished version of the VDOM engine. I also created a Codepen, where you can play around with it.

Creating a virtual node

So, to create a virtual node, we need the tag, properties, and children. So, our function looks something like this:

function h(tag, props, children){ ... }

(In Vue, the function for creating virtual nodes is named h, so that's how we're going to call it here.)

In this function, we need a JavaScript object of the following structure.

{
    tag: 'div',
    props: {
        class: 'container'
    },
    children: ...
}

To achieve this, we need to wrap the tag, properties, and child nodes parameters in an object and return it:

function h(tag, props, children) {
    return {
        tag,
        props,
        children,
    }
}

That's it already for the virtual node creation.

Mount a virtual node to the DOM

What I mean with mount the virtual node to the DOM is, appending it to any given container. This node can be the original container (in our example, the #app-div) or another virtual node where it will be mounted on (for example, mountaing a <span> inside a <div>).

This will be a recursive function, because we will have to walk through all of the nodes' children and mount the to the respective containers.

Our mount function will look like this:

function mount(vnode, container) { ... }

1) We need to create a DOM element

const el = (vnode.el = document.createElement(vnode.tag))

2) We need to set the properties (`props`) as attributes to the DOM element:

We do this by iterating over them, like such:

for (const key in vnode.props) {
    el.setAttribute(key, vnode.props[key])
}

3) We need to mount the children inside the element

Remember, there are two types of children:

A simple text
An array of virtual nodes

We handle both:

// Children is a string/text
if (typeof vnode.children === 'string') {
    el.textContent = vnode.children
}

// Chilren are virtual nodes
else {
    vnode.children.forEach(child => {
        mount(child, el) // Recursively mount the children
    })
}

As you can see in the second part of this code, the children are being mounted with the same mount function. This continues recursively until there are only "text nodes" left. Then the recursion stops.

As the last part of this mounting function, we need to add the created DOM element to the respective container:

container.appendChild(el)

Unmount a virtual node from the DOM

In the unmount function, we remove a given virtual node from its parent in the real DOM. The function only takes the virtual node as a parameter.

function unmount(vnode) {
    vnode.el.parentNode.removeChild(vnode.el)
}

Patch a virtual node

This means taking two virtual nodes, compare them, and figure out what's the difference between them.

This is by far the most extensive function we'll write for the virtual DOM, but bear with me.

1) Assign the DOM element we will work with

const el = (n2.el = n1.el)

2) Check if the nodes are of different tags

If the nodes are of different tags, we can assume that the content is entirely different, and we'd just replace the node entirely. We do this by mounting the new node and unmounting the old one.

if (n1.tag !== n2.tag) {
    // Replace node
    mount(n2, el.parentNode)
    unmount(n1)
} else {
    // Nodes have different tags
}

If the nodes are of the same tags; however, it can mean two different things:

The new node has string children
The new node has an array of children

3) Case where a node has string children

In this case, we just go ahead and replace the textContent of the element with the "children" (which in reality is just a string).

...
    // Nodes have different tags
    if (typeof n2.children === 'string') {
        el.textContent = n2.children
    }
...

4) If the node has an array of children

In this case, we have to check the differences between the children. There are three scenarios:

The length of the children is the same
The old node has more children than the new node. In this case, we need to remove the "exceed" children from the DOM
The new node has more children than the old node. In this case, we need to add additional children to the DOM.

So first, we need to determine the common length of children, or in other terms, the minimal of the children count each of the nodes have:

const c1 = n1.children
const c2 = n2.children
const commonLength = Math.min(c1.length, c2.length)

5) Patch common children

For each of the cases from point 4), we need to patch the children that the nodes have in common:

for (let i = 0; i < commonLength; i++) {
    patch(c1[i], c2[i])
}

In the case where the lengths are equal, this is already it. There is nothing left to do.

6) Remove unneeded children from the DOM

If the new node has fewer children than the old node, these need to be removed from the DOM. We already wrote the unmount function for this, so now we need to iterate through the extra children and unmount them:

if (c1.length > c2.length) {
    c1.slice(c2.length).forEach(child => {
        unmount(child)
    })
}

7) Add additional children to the DOM

If the new node has more children than the old node, we need to add those to the DOM. We also already wrote the mount function for that. We now need to iterate through the additional children and mount them:

else if (c2.length > c1.length) {
    c2.slice(c1.length).forEach(child => {
        mount(child, el)
    })
}

That's it. We found every difference between the nodes and corrected the DOM accordingly. What this solution does not implement though, is the patching of properties. It would make the blog post even longer and would miss the point.

Rendering a virtual tree in the real DOM

Our virtual DOM engine is ready now. To demonstrate it, we can create some nodes and render them. Let's assume we want the following HTML structure:

<div class="container">
    <h1>Hello World 🌍</h1>
    <p>Thanks for reading the marc.dev blog 😊</p>
</div>

1) Create the virtual node with `h`

const node1 = h('div', { class: 'container' }, [
    h('div', null, 'X'),
    h('span', null, 'hello'),
    h('span', null, 'world'),
])

2) Mount the node to the DOM

We want to mount the newly created DOM. Where? To the #app-div at the very top of the file:

mount(node1, document.getElementById('app'))

The result should look something like this:

3) Create a second virtual node

Now, we can create a second node with some changes in it. Let's add a few nodes so that the result will be this:

<div class="container">
    <h1>Hello Dev 💻</h1>
    <p><span>Thanks for reading the </span><a href="https://marc.dev">marc.dev</a><span> blog</span></p>
    <img src="https://media.giphy.com/media/26gsjCZpPolPr3sBy/giphy.gif" style="width: 350px; border-radius: 0.5rem;" />
</div>

This is the code for creating that node:

const node2 = h('div', { class: 'container' }, [
    h('h1', null, 'Hello Dev 💻'),
    h('p', null, [
        h('span', null, 'Thanks for reading the '),
        h('a', { href: 'https://marc.dev' }, 'marc.dev'),
        h('span', null, ' blog'),
    ]),
    h(
        'img',
        {
            src: 'https://media.giphy.com/media/26gsjCZpPolPr3sBy/giphy.gif',
            style: 'width: 350px; border-radius: 0.5rem;',
        },
        [],
    ),
])

As you can see, we added some nodes, and also changed a node.

4) Render the second node

We want to replace the first node with the second one, so we don't use mount. What we want to do is to find out the difference between the two, make changes, and then render it. So we patch it:

setTimeout(() => {
    patch(node1, node2)
}, 3000)

I added a timeout here, so you can see the code DOM changing. If not, you would only see the new VDOM rendered.

Summary

That's it! We have a very basic version of a DOM engine which lets us:

Create virtual nodes
Mount virtual nodes to the DOM
Remove virtual nodes from the DOM
Find differences between two virtual nodes and update the DOM accordingly

You can find the code we did in this post, on a Github Gist I prepared for you. If you just want to play around with it, I also created a Codepen, so you can do that.

If you have any more questions about this, feel free to reach out to me via Twitter.

Original cover photo by Joshua Earle on Unplash, edited by Marc Backes.

7 Essential Tips for Working From Home

Marc Backes — Wed, 18 Mar 2020 12:01:07 +0000

Due to the Covid-19 pandemic, many people had to switch to remote work in a short time. This can be a significant change for people not prepared for it, or even not wanting it. I have more than a year of experience working entirely remotely, just visiting my clients once in a while on-site. In this post, I will show you 7 essential tips for working remotely.

Disclaimer: These are my personal tips. Not all of this might be "for you," or you find better ways to achieve a great experience working from home. There are many more ways of doing it. But this is an excellent way to get started.

1. Have a dedicated working space 🖥

Probably the most essential thing of all when it comes to working remotely is having a dedicated working space. It would be best if you had a place that is only designated to work. If you don't have a room for that, create a space that is for work only. There should be the least amount of distraction possible in this place.

Having your own working space will help you to separate work and your personal life and is right for your mental health. Once you leave this space, you're off the clock.

This goes both ways: If you were to work from your living room, there would be a high chance you could be distracted by other people living with you, or tempted to swoop in some household chores while you're actually still "on the clock."

2. Make your working place comfortable ☀️

Now that you have a dedicated space make it as comfortable as possible. It should be free of clutter, and enough natural light should enter.

Also, decorate it in a way that you feel comfortable working with.

Having proper equipment (screen, chair, desk, etc.) helps to make work from home great. You most likely can make your home office even better than your regular office.

3. Create boundaries with people around you 🚦

Whether if it's your partner, your children, or your roommates. Have a sit-down with them and explain that it's essential that the time you are in your working space, you don't want to be disturbed. Some people have a hard time grasping the concept of "working from home," so it's well invested time explaining to them what you do and why you don't need to be physically in an office.

4. Dress as if you were going to the office 👔

Many people (even including myself some days) tend to work in their pajamas. While this might feel nice, it could distract you from the fact that it's not a lazy Sunday, but an actual workday. You don't have to take it to the extreme and put on a tie and suit, but shower, clean yourself up and put on clothes.

You will feel better about yourself if you work all cleaned up.

5. Maintain regular work hours ⏰

A fantastic advantage of working from home is that you could be working at the times you prefer. And if it's okay with your employer or clients, you can work at the hours you want. But it's essential to set a schedule and stick to it. Also, this gives you a better work-life balance.

However, you can be a bit flexible about this, if needed. After all, having flexible hours is one of the most significant advantages of working remotely. If, for instance, you finish up something and make "overtime" because of it, make sure to recompensate those hours by sleeping longer the next day or calling it a day earlier another day. This all of course, if it's alright with your employer.

6. Schedule your breaks ☕️

When working at home, it's easy to forget about time or get obsessed with the work you currently do. Make sure to schedule regular breaks - and stick to them.

A great way to schedule your breaks (and working hours) is the Pomodoro Technique. Not only makes it sure you comply, but it also makes your working times more productive. There are various "Pomodoro timers" available online that help you stick to the schedule.

7. Create a morning- and after-work routing 📄

To get into the mindset of working, it helps if you have a routine that gets you started instead of "just deciding to sit down and get some work done." This could be as easy as preparing a cup of your favorite hot beverage, getting dressed, going for a walk with your dog. A little routine that signalizes that you are about to work.

As important as a morning routine is an after-work routine. Going for an evening walk with your dog, watch your favorite news channel, sign off from Slack. Be consistent about it. It will get you in the "off work" set of mind.

Summary ✨

There you have it, my six essential tips for working from home. Most are designed to keep a healthy attitude about the whole thing and train your mind to separate work from your personal life.

I hope some of this helps you get comfortable with your work from home experience.

Photo by Markus Spiske on Unsplash

Create Your Own Vue.js From Scratch - Part 2 (Virtual DOM Basics)

Marc Backes — Mon, 16 Mar 2020 10:20:40 +0000

This is the second part of a series called Create Your Own Vue.js From Scratch, where I teach you how to create the fundamentals of a reactive framework such as Vue.js. In the first part, I described the pieces we need and the road map to follow. If you haven't read it, I suggest you do that before reading this post.

I only have 1 year of professional experience working with Vue.js, but I attended an 8-hour course given by Evan You himself (as part of Vue.js Amsterdam where I learned how Vue.js works on the inside and made me really understand how the "magic" behind the scenes works. This blog series is meant to teach everyone who is interested what I learned on that fantastic workshop, in a comprehensive way.

Roadmap 🚘

Introduction
Virtual DOM basics (this post)
Implementing the virtual DOM & rendering
Building reactivity
Bringing it all together

What is a virtual DOM?

💡 DOM = Document Object Model, the HTML structure of a website 💡 VDOM = Representative copy of that structure

A virtual DOM is a representation of the real DOM into a JavaScript format, where it's easier and cheaper to manipulate it than manipulating the real DOM every time something changes.

It's also useful if you don't want to render the DOm to the browser, but to a string for instance (handy when it comes to server-side rendering).

Virtual nodes

So, the virtual DOM is composed of virtual nodes, which in the example we're going to code will look something like this:

{
    tag: 'div',
    props: {
        class: 'container'
    },
    children: [
        {
            tag: 'h1',
            props: {},
            children: 'Hello World'
        },
        {
            tag: 'p',
            props: {},
            children: 'Lorem ipsum dolor sit amet.'
        }
    ]
}

The example above is the equivalent to this HTML code:

<div class="container">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

So all a virtual node is composed of is:

An HTML tag as String
An Object of properties
A list of children than can either be:
- Another node
- A text (representing the content)

Virtual DOM skeleton

In our example, we will not build a full-fledged virtual DOM "engine", but enough to understand the basics.

Let's take a look at the coding of the virtual DOM. We will base all future code on the following lines. So, create an HTML-file with the following content:

<div id="app"></app>
<script>

    // Create virtual node
    function h(tag, props, children) {
        // Return the virtual node
    }

    // Mount a virtual node to the DOM
    function mount(vnode, container) {
        // Create the element
        // Set props
        // Handle children
        // Mount to the DOM
    }

    // Unmount a virtual node from the DOM
    function unmount(vnode) {
        // Unmount the virtual node
    }

    // Take 2 vnodes, compare & figure out what's the difference
    function patch(n1, n2) {
        // Case where the nodes are of the same tag
        // Case where the new vnode has string children
        // Case where the new vnode has an array of vnodes
        // Case where the nodes are of different tags
    }

    function render(message) {
        // Render a virtual node with a given message
    }

    // Create virtual nodes & render them below this line...
</script>

As you can see, we have five different functions which all do their part to create and render a virtual DOM:

h creates a virtual node (but does not mount it yet to the real DOM). I called this h, because that's how it is called in the Vue.js project as well
mount will take a given virtual node and mount it to a given container in the real DOM. For the first element, this will be the #app node we created at the very top of the file.
unmount will remove the virtual node from it's parent node
patch is by far the biggest function we will write for the VDOM. This is, because we have to compare two different nodes and check all the differences in a recursive manner (doing it for all the children recursively).
render is a simplified version of a render function. In our example, it creates various virtual nodes with a given the message inside (which we later change to demonstrate our VDOM "engine" works.

What's next ⚡️

In part 1, we saw the building parts we'll need for building our own Vue.js-like framework and in this part, we saw the basics of how we are going to build the virtual dom.

In the next chapter, we will then actually implement the complete virtual DOM part.

Stay tuned 😉

If you like my content and updates, your best bet would be to follow me on Twitter. That's where I usually hang out under the handle @_marcba

Original cover photo by Joshua Earle on Unplash, edited by Marc Backes.

Create Your Own Vue.js From Scratch - Part 1 (Introduction)

Marc Backes — Sun, 08 Mar 2020 14:29:25 +0000

A lot of developers see these reactive frameworks such as Vue.js, React.js, Angular.js as "magic" since they do - well as it seems magic. But that's not the case. In fact, recreating Vue-like functionality is not all that difficult, and I want to prove it to you in this series where we create step-by-step a reactive framework (or at least a prototype of it), similar to how Vue 2 works in the inside.

Roadmap 🚘

Introduction (this post)
Virtual DOM basics
Implementing the virtual DOM & rendering
Building reactivity
Bringing it all together

The Pieces We Need 🧩

In order to build our prototype, we actually just need two major parts:

A virtual DOM
Reactivity

Virtual DOM

💡 DOM = Document Object Model, the HTML structure of a website
💡 VDOM = Representative copy of that structure

In a gist, a virtual DOM (VDOM) is lightweight JavaScript data format to represent what the actual DOM should look like at a given point in time.

It is meant to decouple the rendering logic from the actual DOM. This is helpful to reuse it in non-browser contexts (think about server-side rendering for example).

Also, having a VDOM makes updating the UI more performant. You can manipulate the virtual DOM with the full power of JavaScript (create nodes, clone nodes, inspect nodes, etc.) which is really fast and when you're finished with the manipulation, just update the elements in the actual DOM.

In our little project, we'll create our own functionality to create a virtual DOM and how to render it to the actual DOM (renderer).

Reactivity

Once we have our VDOM, we need to write our reactivity. This is a set of functions and classes to have our system react to a state change.

So in simple terms, when the state changes, we get notified so we can do something. That something at the end is rendering the VDOM to the actual DOM. And that it where our experiment stops. It will be the proof-of-concept the our own tiny Vue.js

What follows ⚡️

In the next couple of weeks I'll try to write a guide as comprehensive as possible so you can get a good grasp on what the magic of Vue.js is actually about. Once you understand what's going on under the hood, you'll definitely have a better time understanding the framework as a whole.

Stay tuned 😉

If you like my content and updates, your best bet would be to follow me on Twitter. That's where I usually hang out under the handle @_marcba

Original cover photo by Joshua Earle on Unplash, edited by Marc Backes.

Vue.js Amsterdam 2020 Recap

Marc Backes — Thu, 27 Feb 2020 18:55:15 +0000

From the 20th to the 22nd of February 2020 I went to the biggest Vue.js conference in the world - Vue.js Amsterdam. The three days have been fantastic, filled with lots of adventure, knowledge and getting to know amazing people. In this post I'll talk about the talks and a little bit about my personal experience.

The experience 🤩

When I signed up for the event, I didn't know much about it, so I didn't expect much. When I entered, it was a pleasant athmosphere. Everyone talking tech, donuts, coffee, and everyone eager to get started. Cool.

But when I entered the seating area, I was in awe at once. The most gigantic screen I have ever seen. Seriously. I don't think even Apple has these to introduce their new products to the public.

Every time someone got on stage, they played a song chosen by the speaker, which was a nice touch.

The speakers 👩‍💻👨‍💻

This conference had an amazing lineup. The crème de la crème of the Vue.js world was there. Of course, there was Evan You, the creator of Vue.js himself. But the house was filled with either core team members or otherwise important people of the Vue world. Trust me, it was wild. Just to mention only a few incredible speakers:

Thorsten Lünborg, Vue.js core team member
Sarah Drasner, Vue.js core team member, VP of developer experience at Netlify
Thorsten Lünborg, Vue.js core team member
Eduardo San Martin Morote, Vue.js core team member, vue-router
Pooya Parsa, Nuxt.js core team
Sébastien Chopin, Nuxt.js author
Gregg Pollack, Vue Mastery. (Fun fact: With his course for Ruby on Rails I started getting into web development in the first place.)
Jessica Sachs, Vue.js Test Utils maintainer

The talks 🎙

All the talks, without exception was amzing. You can check the complete programme on the website of Vue.js Amsterdam. But here are some takeaways from those talks.

Vue.js 3 is coming soon

Everyone has been waiting for it for a long time. And people are eager to get their hands on it. Evan You explained that they are very close to the beta version. In fact, he said that most definitely it will be out by the end of Q1. He also said that the final version would probably be out by the end of Q2.

The most significant changes in the new version will be:

Composition API. The Vue-pendant to React hooks. THE feature everyone is waiting for.
Portals. Render certain content outside the current component.
Fragments. Allows multiple root nodes.
Updated v-model-API. It now accepts multiple models.
Suspense. Mostly for UX stuff. Waits to render multiple components, until all are ready. Shows a fallback-component until ready.
TypeScript. Vue now has full TypeScript support.

Vue.js is heading towards the next era with Vue 3

Evan You also talked about the current state of development of Vue.js. It's very close to completion. Most of the work that is yet to do are tests, benchmarks, optimizations, and some renaming.

What I really found amazing is that the whole ecosystem is going ALL-IN with Vue 3. There are several projects that made major or entire rewrites of their code to take advantage of the newest features of Vue 3. When the maintainers of Vue, Nuxt, Vuelidate, Vuetify, etc. talked, I really got the perception that they all worked very closely together to really bring the whole Vue ecosystem to a new era. So, brace yourselves, because I really think Vue 3 will be a huge success.

Use more SVG

A talk by Dima Vishnevetsky really sensibilized me for using more SVGs. He for example had some interesting examples of micro interactions with SVG on input fields, showed that cool animations can be done, and reminded everyone that SVG is such a slim format with so much power. He also pointed out that SVGs are great for Vue.js, because they can be built easily with a component.

What I for exmaple didn't know is that SVG has media query support. Which means, you can create one single logo file in SVG, and depending on the size displayed, the logo looks different (squared). Check out the slides of his talk to see some great examples of SVG.

Main takeaway from his talk: Ask youself if it could be done in SVG. If yes... do it in SVG!

Climate change is also the responsability of developers

Callum Macrae had a compelling talk about climate change and how it affects all of us. To be honest, at first it took everyone's mood way down after everyone's excitement about the talks before. Because all the facts he stated from a research made me think "We're doomed. We're all going to die". The situation of our planet is no joke and there are little steps we can do as developers to help reduce CO2 consumption.

Where is a website called Website Carbon which analyzes your site and tells you how much CO2 one request to this websites generates. I was pretty happy with myself that my website is in the top 15% of the tested websites 💪. Callum pointed out that by creating more optimized websites in size and logic performance, we could actually make a difference.

But he also mentioned that the biggest CO2 are the backends. The APIs that dig through a lot of data. Also here, the advice is to make as effective and performant code as possible.

a11y is extremely important

Maria Lamardo, an instructor at vueschool.io showed based on a Memory game some interesting techniques to make like a lot easier for people who need screen readers. There are some neat techniques to optimize a website for screen readers. For example, you can create an invisible element where you write link changes for JS-powered websites that don't actually do a site load, but rather change content on the website with JavaScript instead. Also, aria-label and aria-descriptions go a long way!

Check out her amazing talk and the repository that's going along with it.

JavaScript Proxys are fun

There is this thing called Proxy in JavaScript, which is something I didn't know about and it turns out it's pretty darn interesting. Escpecially, because Vue.js 3 reactivity is built on proxies, as Evan You pointed out.

A proxy is an object that encases another object or function and allows you to intercept it.

That's how Sarah Drasner, VP of Developer Experience at Netlify explained it, and she showed us how proxies work in practical and understandable examples. It's something I will definitely take a look at and play with.

Vue Testing Utils

Sarah Dayan made a really comprehensive and fun live-coding session where she showed us how we can do TDD on Vue components with Vue Test Utils. In her talk she explained the red-green-blue TDD strategy and explained reasons why it's important:

TDD helps you write robust test. Not too many, not too few!
TDD encourages refactors which lead to better software design
Fixing bug is far more costy than preventing them

She also mentioned that it's more important to have tests than have an ultra-clean and maintainable code base. Because having tests in place gives you more confidence to go ahead and refactor some code.

To the same topic, later that day Jessica Sachs gave a talk what VTU is and what's coming next. Among other things, they are preparing to support the Composition API (but will still work with Vue 2) and migrate TypeScript.

After-party 🕺

You might think programmers are all geeks, but Evan You (and some others) showed us that the opposite is true. After all the talks finished, the Master of Ceremonies Divya Sasidharan announced a special surprise, and boy - a surprise it was.

Evan You and Luke Thomas got on stage and started rapping Forgot About Dre. If you haven't seen it, check out the video I took if. They did it so great.

The after-party was nice as well. I There was some more karaoke (featuring Evan You, Debbie O'Brien, Jos Gerards, and others) and drinks. We all had a great time.

I also got a chance to greet Evan You himself. I thanked him for this work in the community and told him a little about what I'm doing with Vue.js and he seemed genuinly happy that his work is improving so many people's lives.

I even got him to pose for a photo with me 👇

Workshop 🤓

The day after the conference there was an optional workshop where Evan You take us to a deep dive with Vue 3.

It was a quite intense workshop, because Evan was typing so fast and the topic at hand was quite complex to grasp in such a short time, but it was absolutely amazing. We built a tiny version of Vue.js (how it currently works in version 2) FROM SCRATCH, which consisted of two parts: A renderer and the reactive part. Unfortunately we didn't get to build to compiler, that would have been fun as well.

The second part of the workshop was to get familiarized with the Composition API, which is fascinating. It was so many use cases where it makes code more readable and better maintainable.

The really cool part was that Evan was practically live coding for 8 hours without errors. That's amazing, because a lot of people fail in even a 5-minute live code. It was really impressive see the thought process that leads to the results Evan showed it.

At the end, I even got him to sign my laptop 😁

Summary ✨

I had such an amazing time at the conference and will for sure be participanting next year. Without exception, all talks were amazing. I met many great people, including my hero Gregg Pollack, and the master himself Evan You.

If Jos, Nick, or someone else from the organization team is reading this: I just want to thank you for creating this insane event. I went in a Vue.js user, and I came out a Vue.js enthusiast!

Photo credit for cover photo: Vue.js Amsterdam

MineSweeper Game In Vanilla JavaScript

Marc Backes — Wed, 12 Feb 2020 12:04:44 +0000

I wanted to code a little game and I thought "why not MineSweeper", you remember, the old classic from Windows where as a kid we all didn't know how it worked? Yes, that one!

Here is what it looks like:

You can play the demo here 👉 MineSweeper Game Demo

And if you're interested how I coded this, I uploaded the code to Github.

DEV Community: Marc Backes

Unlock "sudo" with TouchID on your Mac

Copy sudo_local file

Edit sudo_local file

What is Vue Storefront?

What actually is Vue Storefront? 🤷‍♂️

Connecting services 🔗

Example:

What does Vue Storefront do for you? 👀

Lightning-fast online shop ⚡

Extensibility 🔌

Tech Stack 🥞

Storefront UI

Summary 📋

More questions? ❓

Bug, Error, Defect, Failure Explained

TD;DR

Error

Defect

Bug

Failure

Summary

What is a Senior Developer *Really*?

What a senior developer is NOT ☝️

Problem solving 💡

Tech skills & experience 🛠

Knowledge of technologies ⚙️

From start to the end 🌟

Mentoring 😊

Communication 💬

Humbleness 🙏

Summary ✨

Create Your Own Vue.js From Scratch - Part 5 (Bringing it all together)

Roadmap 🚘

Recap

Preparation

Writing our template

Create our reactive state

Make our VDOM reactive

Create the click event

Add some style

Summary

Create Your Own Vue.js From Scratch - Part 4 (Building The Reactivity)

Roadmap 🚘

What is state reactivity?

1. Building a reactive dependency

Function to watch over changes

Dependency class

Constructor

Subscribe a function

Notify subscribers of a dependency change

Getter

Setter

Try it out

2. Building a reactive state

The reactive function

Changes on the dependency

Try out the code

Summary ✨

Create Your Own Vue.js From Scratch - Part 3 (Building The VDOM)

Roadmap 🚘

Building the Virtual DOM

The skeleton

Creating a virtual node

Mount a virtual node to the DOM

1) We need to create a DOM element

2) We need to set the properties (props) as attributes to the DOM element:

3) We need to mount the children inside the element

As the last part of this mounting function, we need to add the created DOM element to the respective container:

Unmount a virtual node from the DOM

Patch a virtual node

1) Assign the DOM element we will work with

2) Check if the nodes are of different tags

3) Case where a node has string children

4) If the node has an array of children

5) Patch common children

6) Remove unneeded children from the DOM

7) Add additional children to the DOM

Rendering a virtual tree in the real DOM

1) Create the virtual node with h

Copy `sudo_local` file

Edit `sudo_local` file

What is a Senior Developer Really?

2) We need to set the properties (`props`) as attributes to the DOM element:

1) Create the virtual node with `h`