Egghead Instructor John Lindquist

John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.



Unlock all of John's PRO Lessons
click for instant access!

Browse John Lindquist's lessons.

showing 297 lessons...

Load Data from URL Params in Vue.js and Nuxt.js

Configure Named Routes in Vue.js and Nuxt.js

Use Google Sheets with Node and Express in Fun Side Projects

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

Count Words in a String with Ramda's countBy and invert

Format console.log with CSS and String Template Tags

Implement Structural Directive Data Binding with Context in Angular 2

Assign a Structual Directive a Dynamic Context in Angular 2

Create a Template Storage Service in Angular 2

Combine HostBinding with Services in Angular 2 Directives

P

Write a Structural Directive in Angular 2

Use Template Elements in Angular 2

P

Create Elements from Template Elements with ngTemplateOutlet in Angular 2

P

Build a Directive that Tracks User Events in a Service in Angular 2

P

Handle Events with Angular 2 Directives

Add Inputs to Angular 2 Directives

P

Write an Angular 2 Directive

Preload Data using Promises with Vue.js and Nuxt.js

Create Vue.js Layout and Navigation with Nuxt.js

Build Vue.js Apps with the Vue-CLI and Nuxt.js

Define Two-Way Transitions for Angular 2 States

Animate Adding and Removing Angular 2 Elements with ngIf

Use Keyframes for Fine-Tuned Angular 2 Animations

Delay and Ease Angular 2 Animations

Animate Between Angular 2 States Using Transitions

Control Undefined Angular 2 States with void State

Switch Between Angular 2 States on a Trigger

Define an Angular 2 Trigger and State

Apply CSS Classes Conditionally with Angular 2’s ngClass

Pass Events from Angular 2 Components with @Output

Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

Pick Up Angular 2 in 6 Minutes

Check ngModel Validation in Angular 2

P

Create a Basic Angular 2 ngModel Input

Use RxJS Streams with Angular 2 Forms

P

Understand the Angular 2 States of Inputs: Pristine and Untouched

P

Create Radio Buttons for Angular 2 Forms

P

Build Select Dropdowns for Angular 2 Forms

P

Style Validation in Angular 2 Forms

P

Group Inputs in Angular 2 Forms with ngModelGroup

P

Display Validation and Error Messaging in Angular 2

P

Create and Submit an Angular 2 Form using ngForm

P

Generate and Render Angular 2 Template Elements in a Component

P

Create an Angular 2 Hello World Component

Load Data Based on Angular 2 Route Params

P

Load Data to Build Angular 2 Navigation

P

Build Dynamic Angular 2 Navigation with ngFor

P

Understand the Angular 2 Base href Requirement

P

Use Params from Angular 2 Routes Inside of Components

P
vue tutorial about Load Data from URL Params in Vue.js and Nuxt.js

Load Data from URL Params in Vue.js and Nuxt.js

3:18 vue

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

vue tutorial about Configure Named Routes in Vue.js and Nuxt.js

Configure Named Routes in Vue.js and Nuxt.js

1:02 vue

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the nuxt.config.js and the passing the named route to a router-link.

node tutorial about Use Google Sheets with Node and Express in Fun Side Projects

Use Google Sheets with Node and Express in Fun Side Projects

9:59 node

First and foremost, DO NOT use Google Sheets for any production app. It's fine for fun side projects for your family or friends, but not much more. With those disclaimers in mind, Google sheets can be complicated to set up if you don't follow precise configuration steps. This lesson walks you through setting up Google sheets credentials, authentication, getting/appending values, then finally wrapping the sheets api with Node.js and Express to use in a simple project.

vue tutorial about Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

1:08 vue

Sometimes the pages/ directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

js tutorial about Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

3:47 js

When doing comparisons inside of functions, you end of relying heavily on the argument passed into the function. Ramda's converge allows you to do comparisons in a Point-Free style allowing you more flexibility with composing and constructing functions. This lesson walks through refactoring a function to Point-Free style using Ramda's Converge.

js tutorial about Count Words in a String with Ramda's countBy and invert

Count Words in a String with Ramda's countBy and invert

4:10 js

You can really unlock the power of ramda (and functional programming in general) when you combine functions. Counting words in a string may seem like a relatively difficult task, but ramda makes it easy by providing a countBy function. This lesson walks through using the countBy to count words in a string.

js tutorial about Format console.log with CSS and String Template Tags

Format console.log with CSS and String Template Tags

4:36 js

The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable.

angular2 tutorial about Implement Structural Directive Data Binding with Context in Angular 2

Implement Structural Directive Data Binding with Context in Angular 2

2:03 angular2

Just like in *ngFor, you're able to pass in data into your own structural directives. This is done by declaring the variable using a let statement then passing context into the createEmbeddedView call.

angular2 tutorial about Assign a Structual Directive a Dynamic Context in Angular 2

Assign a Structual Directive a Dynamic Context in Angular 2

3:01 angular2

Just like passing in an array to *ngFor, you can pass in any value into your structural directive so that it can render templates based on those values. It's crucial to understand how the *directive syntax expands into a <template> and adds a custom @Input based on the syntax you use so that you can use your own data.

angular2 tutorial about Create a Template Storage Service in Angular 2

Create a Template Storage Service in Angular 2

4:00 angular2

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app.

angular2 tutorial about Combine HostBinding with Services in Angular 2 Directives

Combine HostBinding with Services in Angular 2 Directives

3:08 angular2 PRO

You can change behaviors of element and @Component properties based on services using @HostBinding in @Directives. This allows you to build @Directives which rely on services to change behavior without the @Component ever needing to know that the Service even exists.

angular2 tutorial about Write a Structural Directive in Angular 2

Write a Structural Directive in Angular 2

3:01 angular2

Structural directives enable you to use an element as a template for creating additional elements. Creating structural directives requires a knowledge of <template> elements, but they're easy and extremely powerful once you undrestand the concepts.

angular2 tutorial about Use Template Elements in Angular 2

Use Template Elements in Angular 2

1:33 angular2 PRO

The <template> element is a core piece of building complex UI in Angular 2. You can get a reference to these elements, then pass them around and create new elements based on them.

angular2 tutorial about Create Elements from Template Elements with ngTemplateOutlet in Angular 2

Create Elements from Template Elements with ngTemplateOutlet in Angular 2

2:38 angular2 PRO

ngTemplateOutlet is a directive that simplifies creating elements from template elements. This allows you to create simple, reusable templates then generate elements with custom data whenever you need them.

angular2 tutorial about Build a Directive that Tracks User Events in a Service in Angular 2

Build a Directive that Tracks User Events in a Service in Angular 2

3:11 angular2 PRO

A @Directive is used to add behavior to elements and components in your application. This makes @Directives ideal for behaviors such as "tracking" which don't belong in a Component, but do belong as a behavior in your application.

angular2 tutorial about Handle Events with Angular 2 Directives

Handle Events with Angular 2 Directives

1:35 angular2

A @Directive can also listen to events on their host element using @HostListener. This allows you to add behaviors that react to user input and update or modify properties on the element without having to create a custom component.

angular2 tutorial about Add Inputs to Angular 2 Directives

Add Inputs to Angular 2 Directives

2:55 angular2 PRO

The @Input decorator allows you to pass values into your @Directive so that you can change the value of the Directive each time that it is used. Using @Input makes your Directives much more flexible and reusable so they can adapt to many different situations.

angular2 tutorial about Write an Angular 2 Directive

Write an Angular 2 Directive

1:42 angular2

Angular 2 Directives allow you manipulate elements by adding custom behaviors through attributes. This lesson covers how to create a Directive and attach its behavior to an element.

vue tutorial about Preload Data using Promises with Vue.js and Nuxt.js

Preload Data using Promises with Vue.js and Nuxt.js

2:23 vue

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

vue tutorial about Create Vue.js Layout and Navigation with Nuxt.js

Create Vue.js Layout and Navigation with Nuxt.js

1:40 vue

Nuxt.js enables you to easily create layout and navigation by replacing the default App.vue template with your own app.vue layout in a layouts directory. Then you simply surround your content (the <nuxt> instance) with your navigation and/or layout and you're ready to go.

vue tutorial about Build Vue.js Apps with the Vue-CLI and Nuxt.js

Build Vue.js Apps with the Vue-CLI and Nuxt.js

2:48 vue

The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

angular2 tutorial about Define Two-Way Transitions for Angular 2 States

Define Two-Way Transitions for Angular 2 States

1:53 angular2

You often want to re-use a transition when going between the same two states. Angular 2 transition syntax allows you to define how the transition should be applied between states: one-way or two-way.

angular2 tutorial about Animate Adding and Removing Angular 2 Elements with ngIf

Animate Adding and Removing Angular 2 Elements with ngIf

1:49 angular2

A common use-case for an Angular 2 animation is to animate an element into the DOM. This is achieved with a combination of ngIf and the “void” state so that you have complete control over how the element appears and how it leaves.

angular2 tutorial about Use Keyframes for Fine-Tuned Angular 2 Animations

Use Keyframes for Fine-Tuned Angular 2 Animations

2:15 angular2

When easing isn’t enough to get the exact animation you want, you can leverage keyframes to define and precise styles and steps over time. Keyframes allow you to achieve pretty much any Angular 2 animation you want.

angular2 tutorial about Delay and Ease Angular 2 Animations

Delay and Ease Angular 2 Animations

3:11 angular2

By default, transitions will appear linearly over time, but proper animations have a bit more customization to them by delaying when they start and controlling how slowly or quickly they move over time.

angular2 tutorial about Animate Between Angular 2 States Using Transitions

Animate Between Angular 2 States Using Transitions

1:11 angular2

The foundation of animation in Angular 2 is using transitions to move from one state to another state. Transitions bring in the concept of time and how long it should take to go from one state to the next while they almost magically calculate the difference in values over time between the CSS properties of each state.

angular2 tutorial about Control Undefined Angular 2 States with void State

Control Undefined Angular 2 States with void State

2:05 angular2

Each trigger starts with an “undefined” state or a “void” state which doesn’t match any of your currently defined states. You have to be aware of when you’re in that state so that you don’t stumble on any undesired behaviors. This is especially important if your transitions cover “*”/all states because “void” is part of “all”.

angular2 tutorial about Switch Between Angular 2 States on a Trigger

Switch Between Angular 2 States on a Trigger

1:04 angular2

Triggers work in combination with states to define ways of getting from one state to the next. This lesson covers how to create multiple states then cause the trigger assignment to update from one state to the next.

angular2 tutorial about Define an Angular 2 Trigger and State

Define an Angular 2 Trigger and State

1:32 angular2

Triggers are a special type of directive prefixed with an “@” that allow your elements to be bound to defined animations in the @Component decorator. Each trigger is represented by a defined animation trigger and each trigger can support many states.

angular2 tutorial about Apply CSS Classes Conditionally with Angular 2’s ngClass

Apply CSS Classes Conditionally with Angular 2’s ngClass

2:10 angular2

ngClass is Angular 2's way of allowing you to apply classes and styles based on what's happening in your component. While CSS covers many scenarios with pseudo classes, you'll often run into scenarios where you need to apply classes based on certain conditions, so ngClass comes to the rescue.

angular2 tutorial about Pass Events from Angular 2 Components with @Output

Pass Events from Angular 2 Components with @Output

3:54 angular2

Components push out events using a combination of an @Output and an EventEmitter. This allows a clean separation between reusable Components and application logic. This lesson shows how to use @Output to create an update event and then listen for the even in your application.

angular2 tutorial about Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

Controlling Rx Subscriptions with Async Pipe and BehaviorSubjects

2:11 angular2

Each time you use the Async Pipe, you create a new subscription to the stream in the template. This can cause undesired behavior especially when network requests are involved. This lesson shows how to use a BehaviorSubject to observe the http stream so that only one request is made even though we still have two Async pipes in the template.

angular2 tutorial about Pick Up Angular 2 in 6 Minutes

Pick Up Angular 2 in 6 Minutes

6:09 angular2

Angular 2 has many new moving parts, but the basics still focus on Components with templates, properties, events, and styles. This lesson walks through the template syntax and features inside of the Angular 2 components so that you can start building quickly.

angular2 tutorial about Check ngModel Validation in Angular 2

Check ngModel Validation in Angular 2

0:55 angular2 PRO

Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the #ref syntax, assigning it a name, then ngModel will check all of the validity rules for you.

angular2 tutorial about Create a Basic Angular 2 ngModel Input

Create a Basic Angular 2 ngModel Input

1:39 angular2

ngModel is a very powerful feature of Angular 2, but it isn’t enabled by default. You need to import the Angular 2 FormsModule and use the proper syntax around the ngModel directive to enable the features (such as automatically updating from an ngModel) that you would expect.

angular2 tutorial about Use RxJS Streams with Angular 2 Forms

Use RxJS Streams with Angular 2 Forms

3:05 angular2 PRO

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

angular2 tutorial about Understand the Angular 2 States of Inputs: Pristine and Untouched

Understand the Angular 2 States of Inputs: Pristine and Untouched

1:44 angular2 PRO

Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

angular2 tutorial about Create Radio Buttons for Angular 2 Forms

Create Radio Buttons for Angular 2 Forms

5:48 angular2 PRO

Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and for attributes as well as how to style validation of radio buttons.

angular2 tutorial about Build Select Dropdowns for Angular 2 Forms

Build Select Dropdowns for Angular 2 Forms

1:10 angular2 PRO

Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes.

angular2 tutorial about Style Validation in Angular 2 Forms

Style Validation in Angular 2 Forms

1:11 angular2 PRO

Inputs using Angular 2’s ngModel automatically apply style classes of .ng-valid and .ng-invalid each time the input’s validity changes. These classes allow you easily add your own styles simply by declaring the styles in your Component decorator.

angular2 tutorial about Group Inputs in Angular 2 Forms with ngModelGroup

Group Inputs in Angular 2 Forms with ngModelGroup

1:51 angular2 PRO

The ngModelGroup directive allows you to group together related inputs so that you structure the object represented by the form in a useful and predictable way. ngModelGroup is often used in combination with fieldset as they mostly represent the same idea of “grouping together inputs.”

angular2 tutorial about Display Validation and Error Messaging in Angular 2

Display Validation and Error Messaging in Angular 2

2:59 angular2 PRO

Angular 2’s ngModel provides error objects for each of the built-in input validators. You can access these errors from a reference to the ngModel itself then build useful messaging around them to display to your users.

angular2 tutorial about Create and Submit an Angular 2 Form using ngForm

Create and Submit an Angular 2 Form using ngForm

2:42 angular2 PRO

Forms in Angular 2 are essentially wrappers around inputs that group the input values together into an object and also check that all the inputs are valid. Angular 2 ‘s ngForm allows you to get a reference to that object and validity and use them to display information about the form or use the ngSubmit event to save information from the form.

angular2 tutorial about Generate and Render Angular 2 Template Elements in a  Component

Generate and Render Angular 2 Template Elements in a Component

1:25 angular2 PRO

Angular 2 Components have templates, but you can also create templates inside of your templates using Angular 2 ViewContainer’s createEmbeddedView for more visual control of how you want to generate elements inside of your Angular 2 templates.

angular2 tutorial about Create an Angular 2 Hello World Component

Create an Angular 2 Hello World Component

2:32 angular2

A Hello World application in Angular 2 requires you to understand concepts around bootstrapping, modules, and components. The bootstrapping system allows you to decide which module and platform you’ll use when your app starts up as well as which components should be shown first. The Angular 2 modules define which features you’ll want to include so you can have fine control over your final project size. The Angular 2 Components then become a simple definition of a template with variables.

angular2 tutorial about Load Data Based on Angular 2 Route Params

Load Data Based on Angular 2 Route Params

5:16 angular2 PRO

You can load resource based on the url using the a combination of ActivatedRoute and Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

angular2 tutorial about Load Data to Build Angular 2 Navigation

Load Data to Build Angular 2 Navigation

3:29 angular2 PRO

Using the Http service, you can load in data to create your routerLink navgation. This builds on the same concepts of using *ngFor, but since Http uses streams, you’ll need to use the | async pipe to be able to properly display the loaded data.

angular2 tutorial about Build Dynamic Angular 2 Navigation with ngFor

Build Dynamic Angular 2 Navigation with ngFor

1:49 angular2 PRO

It’s often easier to build out your navigation dynamically so that you have programmatic control of which navigation elements appear (and those which don’t). You can leverage the power of Angular 2’s *ngFor directive to build out navigation based on any set of data you provide with urls.

angular2 tutorial about Understand the Angular 2 Base href Requirement

Understand the Angular 2 Base href Requirement

3:48 angular2 PRO

The <base href=”/”/> you define will determine how all other assets you plan on loading treat their relative paths. While you’ll most often use / as your base href, it’s important to understand what’s going on in case you need to change how you’re hosting your project.

angular2 tutorial about Use Params from Angular 2 Routes Inside of Components

Use Params from Angular 2 Routes Inside of Components

3:07 angular2 PRO

Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?