 Courses from Laurie Barth

A series of lessons to help you get more familiar with modern JavaScript syntax.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

ES6 and Beyond

Ever built a website? Did it have more than one page?

If it did, you learned quickly how essential routing is to the success of your project. And in so many frameworks routing is a painful and complex thing to learn.

But not in Vue!

Vue has an incredibly clean and powerful library called vue-router that takes care of everything you could need.

In this course, we'll cover what you need to know to get started with vue-router.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

A Journey with Vue-Router

Learn the main additions. Including flat, flatMap and Object.fromEntries.

ES2019 Additions to JavaScript

Learn how to use the features of `gatsby-theme-blog` version 2.0.

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Blog Theme 2.0

This is an example of how to use the flat method available on the array prototype in JavaScript.

Flatten a Nested Array in JavaScript with Array.prototype.flat

Use these functions in order to flip back and forth between an Object and an Array.

Convert an Object to an Array and back again with Object.entries and Object.fromEntries

Use the spread operator to create a copy of a flattened array.

Copy an Array with the Spread Operator

Use the spread operator to copy a flat object. Note that this is a shallow copy.

Copy an Object with the Spread Operator

Use the spread operator to merge multiple arrays. This example uses two, but the same pattern can be used.

Merge Arrays using the Spread Operator

Using the spread operator you can merge objects. This example uses two objects, but the syntax is the same for more. Note that duplicate keys will be overridden.

Merge Objects with JavaScript's Spread Operator

Use the flatMap function to both map and flatten at the same time.

Array.prototype.flatMap from ES2019

Arrays can be iterated through using both for...in and for...of, but there are differences. This video shows that for...of accesses the values of each element and for...in accesses the indexes of each element.

For...in Loop vs. For...of Loop

Cascading Style Sheets bring order and beauty to our applications.

Use the hover pseudo-class to apply conditional styling when a user interacts with an element but has not yet activated it.

Conditionally Apply Style on Hover with the CSS Hover Pseudo-class

Use the focus pseudo-class to assign conditional styling when I user selects an element.

Conditionally Style an Element with the Focus Pseudo-class

Use the focus-within pseudo-class to conditionally assign styling to a parent element when its child receives focus.

Conditionally Assign Style to a Parent Element with Focus-Within Pseudo-class

Use nested destructuring to access the value of an object within an object.

Nested Destructuring for Objects

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Determine whether a keybinding in VS Code is duplicated and change the binding to a unique set of keys so you can use the shortcut.

Find and Fix Keybinding Clashes in VS Code

Use the Peacock extension to assign colors to the border of each VS code window or project.

Apply Colors to your VS Code border to Differentiate Between Windows

Learn how to use splice with one, two or three+ arguments.
With one argument splice removes all elements past that index.
With two arguments it removes the number of elements specified past the first argument index.
With three+ arguments it removes the elements specified and adds all elements passed into the function.

Add and Remove Elements in an Array Using Splice

This lesson goes through vue-router setup from npm install, through the boilerplate code needed to create a router.

Additionally, it creates a single route record for the home page.

Set up Vue-Router and add the Root Application Route

We can create routes with other URL paths. It's important to know that the router will navigate to the first matching path it finds in the route record array. So matching paths will be ignored once the first match is found.

Laurie Barth

Build a Developer Blog with Gatsby

Search Results