Category: Unknown Code Ramblings

A Quick Post on URL, URI, UDI, URN… Resources

URL, or Uniform Resource Locator, is often used as a blanket term for almost anything on the internet. A URI, or Uniform Resource Identifier, represents a unique resource on a server, located somewhere on the World Wide Web. Other abbreviations that are often confusingly related include UDI for Universal Document Identifier and URN for Universal Resource Name. All together we have the following abbreviations;

  • URL – Uniform Resource Locator
  • URI – Uniform Resource Identifier
  • UDI – Universal Document Identifier
  • URN – Uniform Resource Name

A URI can be either a URL or URN.

URI Syntax

scheme:[//authority]path[?query][#fragment]
  • Scheme – This is a non-empty sequence of characters followed by a colon, followed by any combo of digits, letters, periods, hyphens, or plus characters. The scheme is registered with the Internet Assigned Numbers Authority (IANA).
  • Authority – The authority is an optional field preceded by //. It has the following subfields.
    • Userinfo – A subcomponent which could contain username and password, or other user information data.
    • Host – A subcomponent containing either an IP address or a registered host or domain name.
    • Port – An optional subcomponent that is followed by a colon.
  • Path – Contains a sequence of segments separated by a slash characters. This could be something like /resources or /trains or similar.
  • Query – An optional component preceded by a question mark. The component contains a query string of non-hierarchical data, each parameter is separated by an ampersand in the query component and parameter values are assigned using an equals operator.
  • Fragment – An optional field and is preceded by a hash. The fragment includes a fragment identifier for a secondary resource.

Examples

  • mailto:myaddress@thrashingcode.com
  • telnet://10.20.0.1:23/
  • ldap://[2020:ba6:9:9]/c=ZAZA?objectClassOfDomain?objectOfDomain

The Differentiator

The URI examples above all could be called URLs, however the difference is that a URI is an identifier, where as a URL is an identifier and provides details on how to get to the identified resource.

URN AKA Uniform Resource Name

URNs are not used often. More specific details can be found in RFC 2141. For this quick post it’s safe to sort of ignore URNs, as the other abbreviations are the ones you will see out and about in the world, and specifically used in detailing REST APIs and the like.

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 vue.global.js file locally.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Minimalistic Vue App</title>
    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ appHeader }}</h1>
      <p>{{ appDescription }}</p>
    </div>
    <script src="./main.js"></script>
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

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="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></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

Vue.js

  • 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

Vite

  • 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.