Category: Week 4

Custom HTML boilerplate shortcut in VSCode

·

I finally configured my own HTML boilerplate shortcut for VSCode so I don’t have to constantly look up the syntax for my most frequently used HTML tags that the built-in Emmet shortcut ! does not include.

I added my custom code into the html.json file in Preferences > User Snippets.

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
	  "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

Object destructuring

·

We are learning Node.js this week. I came across the destructuring assignment syntax in JavaScript that we used to unpack properties from objects into distinct variables, which came in handy when exporting and importing our modules.

The object literal syntax provides a way to define objects and their properties like:
const me = {
  firstName: "Hannah",
  secondName: "Gooding"
};

Using object destructuring you can assign these properties to variables like:
const {firstName, secondName} = me;

console.log(firstName) // "Hannah"
console.log(secondName) // "Gooding"

These properties can be assigned to new variable names like:
const {firstName: a, secondName: b} = me;

console.log(a) // "Hannah"
console.log(b) // "Gooding"

Localhost and the Heroku server

·

This week’s project is to build a micro-blogging app using vanilla Node.js and deploying it on Heroku.

When you type http://localhost:3000 into your browser it sends a client-side HTTP request. Localhost points to the IP address of your own machine 127.0.0.1 and looks for the required server-side code on your machine at the port :3000.

Heroku allows you to take your application off your local server on your machine by moving it to a server in a remote location. A visitor will visit the domain in their browser, get connected to a server with the host IP address, and the server will send a response to their individual browser. Heroku sets the port on their end so you should add this conditional statement when adding the port to your server.js file: const port = process.env.PORT || 3000;

The web server listens to the port in the environment variable PORT or 3000 if there’s nothing there.

Children vs. childNodes

·

Element.children returns only element children in an HTML collection, Node.childNodes returns all node children in a NodeList.

In the following example:
let example = document.createElement("p");
example.textContent = "hello";

example.children.length evaluates to 0 as there are no element children, but example.childNodes.length evaluates to 1 as there is a Text node child.

HTML collection vs. NodeList

·

We went over this topic last week, but for some reason it’s taken me a bit of cross-reference reading to solidify the distinction for myself, as some resources *cough* StackOverflow *cough* were giving me conflicting information.

HTML collections and NodeLists are both collections of DOM nodes. A NodeList can contain any node type including elements, but an HTML collection will only return elements.

getElementsByClassName() returns a live HTML collection.

Node.childNodes returns a live NodeList (is updated by changes in the DOM).

querySelectorAll() returns a static NodeList (is a “snapshot” of the DOM when it is called).