Day 4 Studies – Web Related Things

Today I got into some studying Vue.js, but realized I wanted to cover some of the basics around things that Vue.js uses but I’d not really covered in the posts. Also before I got into some of the other core topics as outlined on Day 1 there were a number of things that just needed defined. This post, is about those things.

Virtual DOM – this is something you hear about that isn’t specifically Vue.js related. React uses a virtual DOM as do other frameworks. The DOM part stands for Document Object Model, and the Virtual DOM is a lightweight JavaScript representation of this model. This Virtual DOM is what is updated instead of the actual DOM, and when the Virtual DOM is ready for rendering to the actual DOM, a diff is done of the two and only the changes are rendered in the actual DOM. This generally makes changes render much faster than attempting to make the changes in the actual DOM only.

The frameworks that use a Virtual DOM include; React, Vue.js, and Elm. Other frameworks like Svelte created by Rich Harris does not, and Rich is also quoted as saying a Virtual DOM is pure overhead. A valid point, yet arguable whether this is an advantage or disadvantage, as it appears to depend entirely on the situation and type of page(s) being rendered.

There are other techniques like Angular or Ember.js’s incremental DOM that offer an alternate approach to DOM rendering.

Digging more closely into the Document Object Model, it is a cross-platform language independent interface that uses a tree structure to represent XML or HTML. Each branch of the DOM ends in a node, each node containing objects. This provides a way to programmatically traverse the model and gain access to various parts of the tree. The nodes within the DOM can also have event handlers attached to them, which provides a programmatic way to fire off events for execution.

The DOM technology is currently managed by WHATWG – Web Hypertext Application Technology Working Group.

Rendering Mechanism – This is the way, process, and flow of Vue.js’s rendering of a page for a Vue Application.

This all starts in Vue.js, with the above defined Virtual DOM, as defined in the docs as the VDOM. Remembering from above, that each branch ends in a node, a constant of the VDOM could be written up as shown.

const vnode = {
  type: 'div',
  props: {
    id: 'anIdentifierOfSorts'
  children: [
    /* all the other nodes on down the tree. */

The Render Pipeline, at a high level compiles, mounts, and patches the VDOM. Vue templates are compiled into render functions that return VDOM trees. The mount function then invokes the render function which walks the returned virtual DOM tree, creates actual DOM nodes based on it and renders. This is performed as a reactive effect to apply changes to the actual DOM. Finally during mount changes, the effect reruns during patch, which creates a new VDOM, the runtime renderer walks the tree, does a diff, and applies updates to the actual DOM.

Templates & Render Functions

It’s important to know that Vue templates are compiled into VDOM render functions. Render functions can also be authored and called programmatically, bypassing a need to create a template. Even though vue recommends, and many if not most tutorials will show templates versus render functions, it’s important to know that render functions are available to use for more flexibility when dealing with dynamic logic or just odd business rules and such.

Vue.js Studies Day 3 – More Ways to Get Started

Method 3 – JetBrains WebStorm

For this next method on getting started I decided to give JetBrains WebStorm a go and see what it used, and what extras it would provide. I presumed correctly, that there is indeed lagniappe!

I opened up WebStorm – to note, I’ve got a full subscription to the entire line of JetBrains tools but you can go get a free trial version if you want to give it a try – and clicked on the File menu and New, then on Project.

That brings up another window with project and I clicked on New Project from there, which gives me a list of web projects to start and I chose Vue.js. After entering location and node interpreter, the Vue CLI – both of which I’ve already got installed but if they’re not, WebStorm can do that for you – and then click Create.

That’ll spin up a project and open it in the IDE itself. You’ll see a prompt popup that’ll ask if you want to run npm install and if not, be sure to run that either view the embedded CLI, or via the run npm option in the IDE. The IDE’s display will show the familiar “Process finished with exit code 0”.

Now there are a range of ways to run the application that was just generated for us. To note, WebStorm has used the same method that you can use if you execute npx create-vue. The big differences are there are now hooks, and the IDE itself is aware of a number of things that can help you do a number of things from debugging to application execution. For example, looking up at the top of the IDE (pending it’s a default install and you’ve not moved parts of the IDE around!) we now have a button to execute the application with npm, or to execute and debug the application.

When you execute the application, the window at the bottom of the IDE will pop up with the familiar launch of vite, and you can even click on the local URI and it’ll launch your default browser. You can also setup the IDE to, by default, launch the browser if you’d like.

Vue.js Studies Day 2 – Getting Started/Installed/Creating an App

I’m going to enumerate these, because holy hell there’s a number of ways to start working with Vue.js. Since I’m time boxing all of the these posts too and study time in a day, it might take more than one post to get through all of these ways to get started with Vue.js.

Method 1 – Hand Crafted Artisanal Vue App

This is the age old approach, and in my opinion one of the best ways to learn something well, to just hand code up a minimal app from scratch. Doing this with Vue is fairly easy, and as with any web application regardless of framework, begins with two files. For these files, we have:

  1. index.html – The index.html file is the standard base file of a web app, or more simply the web site. It’s been the default file that displays for a website since pretty much the dawn of the internet using HTML for composing sites!
  2. main.js – This is the part that initiates the Vue app itself.

Creating the index.html we would need something like this. Note the script file is located on a CDN, and works fine until you don’t have access to the internet (if that were to happen). It’s possible to do the same thing locally by just downloading the vue.js file locally.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Minimalistic Vue App</title>
    <script src=""></script>
    <div id="app">
      <h1>{{ appHeader }}</h1>
      <p>{{ appDescription }}</p>
    <script src="./main.js"></script>
      const mountedApp = app.mount('#app')

The JavaScript page, where the invocation of the Vue app is done is loaded via the <script src="./main.js"></script> file, while the Vue framework itself is loaded by the <script src=""></script> in the header. Then the app is attached the the div element <dev id="app"> and the elements inside then have various pieces that the Vue framework can then populate based on the capabilities of the framework.

The underlying main.js file looks like this.

const app = Vue.createApp({
    data() {
        return {
            appHeader: 'This is yer Header!',
            appDescription: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
The page displayed.

Method 2 – Creating a Project via NPM

To use this method start by ensuring you have Node.js and npm installed. I use nvm to get these tools installed and manage which version of these tools I have installed, and have detailed what steps I go through here.

Once the prerequisites are installed issue the following npm init command.

npm init vue@latest

That’s it, next you’ll be prompted for all sorts of additional capabilities one can add to a Vue.js App. The easiest however is just to ignore them all, go with the default of No, and then navigate into the directory made for you, install dependencies, and run the app with the following commands. Which mind you, are listed out when you run the above npm init. Working through this automation your terminal would look something like this.

Working through the npm init in the terminal.

Once all that is done, you then npm install and then issue npm run dev you’ll be presented with the following status.

Vite is now running with the default app.

This shows that your app is now running and available via a VITE server that you can open a browser and navigate to http://localhost:5173 to view. That page will look something like this, which is a smidge more shined than a hand crafted artisanal vue app!

A default vue app when using npm init vue@latest.

That’s it for today’s notes. I spent an exorbitant amount of time toying around with these things so I’ve only gotten through the two methods. But rest assured, these are effective ways to get your vue app started and get going with that initial development.

Vue.js Studies Day 1

I’m putting this core curriculum structure together to accomplish two things.

  1. Learn Vue.js for my own use.
  2. Teach others Vue.js.

The following is my general outline of what I think should be covered for knowledge of Vue.js. I’d love any input, additions, subtractions (i.e. is something not specifically Vue.js related?)

The Vue.js App.

  1. Creating a Vue App.
  2. Features of Vue.js.
  • Declarative Rendering
  • Reactivity Fundamentals
  • Attribute Binding
  • Conditional Rendering
  • List Rendering
  • Event Handling
  • Class & Style Binding
  • Computed Properties
  • Components & Props
    • Registration
    • Props
    • Events
    • Fallthrough Attributes
    • Slots
    • Provide/inject
    • Async Components
  • Communicating Events
  • Form Input
  • Lifecycle Hooks


  • Single File Components
  • Vuex
    • Global State
    • Updating State
    • Fetching State
    • Error Handling
  • Vue Router Essentials
    • URL Parameters
    • Pagination
    • Nested Routes
    • Redirect & Alias
    • Programmatic Navigation
    • Error Handling & 404s
    • Flash Messages
    • In-Comopnent Route Guards
    • Global and Per-Route Guards
  • Axios API Calls
  • Dynanic Routing
  • Deploying
  • Scaling

Unit Testing Vue 3

  • Writing tests with Jest
  • Testing Props & User Interaction
  • Testing Emitted Events
  • Testing API Calls
  • Stubbing Child Components


  • CSS & Debugging
  • Working with Assets
  • Getting Vite Going

There will be a number of changes to this but the ideas & topical coverage are all there. The ordering will also, very likely, have. a number of changes. For example I’m already thinking that Vite should be up at the beginning of coverage just like the list of ways to get up and running. As I create additional posts on these topics, I’ll link the topics in this post to the topics on the other pages.

JSON Web Tokens

JSON Web Tokens, one hears all about them all the time. But what exactly are they? I’ve used them a thousand times myself but I never really checked out exactly what they are. So this post fills that gap for me, and hopefully it’s useful to a few of you readers out there too.

What is a JSON Web Token?

JSON Web Token, or JWT, is open standard RFC 7519 for compact and self-contained secure information transmission between two parties using JSON objects. For a refresher, JSON stands for JavaScript Object Notation. JWTs provide security between parties by being signed, which can be used the verify the integrity of the claims contained. JWTs can be signed using a secret or a public / private key pair using RSA or ECDSA. JWTs can also be encrypted to hide those claims as well.

What are JWTs good for? When should you use a JWT?

The most common, and what I’ve found the most recommended use of JWTs, is for API authentication or server-to-server authorization.

JWT Structure

Paraphrased and summarized using the Wikipedia example here.

The header identifies which algorithm generated the signature, such as HMAC-SHA256, as indicated in the example below.

  "alg": "HS256",
  "typ": "JWT"

Then the contenxt, or payload, contains the claims. There are seven Registered Claim Names (RCN) as standard fields commonly included in tokens. Custom claims can also be included, the following is the At Time claim, designated iat and custom claim of loggedInAs. The others include: iss (issuer), sub (subject), aud (audience), exp (expiration time), nbf (not before time), iat (issued at time), and jti (JWT ID). For these and many other claims the IANA has a resource here.

  "loggedInAs": "admin",
  "iat": 1422779638

The signature securely validates the token. It’s calculated through encoding the header and payload using Base64url encoding per RFC 4648 and concatenated with a period as the seperator. This string is run through a cryptographic algorithm specified in the header (i.e. HMAC SHA 256). A function signature would look something like this.

  base64urlEncoding(header) + '.' +

All concatenated together the token would then look like this.


Do and Do Nots

  • Do not use JWTs as session tokens. At least in general, they have a wider range of features and a wider scope. Session tokens are a different beast and using JWTs can increase potential mistakes. Some other issues with this is a JWT doesn’t simply can’t be removed at the end of a session, as it is self-contained without a central authority, and another is that they’re relatively large for such a purpose.
  • Do use JWTs for API Authentication. This is the most common use for JWTs today, as it fits the use case and in many ways was designed specifically for it.
  • Do use a library or some other known way to generate JWT tokens. Don’t just randomly generate a string that looks like a JWT. I’ve seen people just generate a big ole’ wad of text that looks like a JWT before but then it is literally just a big wad of text, you can’t fake a JWT, and in turn when it’s verified or processed by a library for authentication purposes you’ll end up with errors and other issues.