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 317 lessons...

Build a Navigation Component in Vue.js and Use in a Nuxt Layout

P

Design for Mobile First with Tachyons

Build a Basic Webhook with Micro, ngrok, and Now

Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

P

Take Screenshots of Multiple Dimensions for Responsive Sites using Nightmare

Access Webpack Dev Server from Mobile Safari on an iPhone

Update State with Vuex Actions in Nuxt.js

P

Display Vuex Data Differently in Each Page of Nuxt and Vue.js

P

Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

P

Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

P

Understand the Flash of Unstyled Content in Nuxt

P

Load Data from APIs with Nuxt and Vuex

P

Add CSS Libraries to Nuxt

P

Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

P

Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

P

Manage Vue.js State with Vuex and Nuxt

P

Update Vuex State with Mutations and MapMutations in Vue.js

P

Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

P

Build Responsive CSS Layouts with Tachyons

Add a Google OAuth 2.0 Login Button to Your Site

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

vue tutorial about Build a Navigation Component in Vue.js and Use in a Nuxt Layout

Build a Navigation Component in Vue.js and Use in a Nuxt Layout

4:08 vue PRO

You can isolate parts of templates you want to re-use into components, but you can also reuse those components across pages using layouts. This lesson walks you through creation a navigation component then extracting it out into the default layout.

css tutorial about Design for Mobile First with Tachyons

Design for Mobile First with Tachyons

2:43 css

Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.

node tutorial about Build a Basic Webhook with Micro, ngrok, and Now

Build a Basic Webhook with Micro, ngrok, and Now

4:30 node

This is a simple webhook example. This lesson walks you through creating a github webhook using micro, the development process of testing the webhook online by tunneling to it using ngrok, then launching the webhook using zeit's now.

vue tutorial about Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

Navigate with nuxt-link and Customize isClient Behavior in Nuxt and Vue.js

2:56 vue PRO

Because Nuxt renders pages on the server, you should use the nuxt-link components to navigate between pages. Each time a page loads, you can check if you're on the client or server and avoid doing unnecessary loading based on how the page was rendered. This lesson walks you through using nuxt-link and isClient to navigate and avoid reloading data.

node tutorial about Take Screenshots of Multiple Dimensions for Responsive Sites using Nightmare

Take Screenshots of Multiple Dimensions for Responsive Sites using Nightmare

2:00 node

When developing responsive websites, you will constantly be resizing your browser to make sure your site is properly responding to all of the resizes. You can script this behavior by using Nightmare to leverage Electron and it will handle all the resizing for you. Nightmare can then also takes screenshots and save them so you can make sure the site matches your designs.

js tutorial about Access Webpack Dev Server from Mobile Safari on an iPhone

Access Webpack Dev Server from Mobile Safari on an iPhone

1:36 js

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhone.

vue tutorial about Update State with Vuex Actions in Nuxt.js

Update State with Vuex Actions in Nuxt.js

2:34 vue PRO

You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to patch todos in Vuex.

vue tutorial about Display Vuex Data Differently in Each Page of Nuxt and Vue.js

Display Vuex Data Differently in Each Page of Nuxt and Vue.js

2:55 vue PRO

You often use the same data in different ways across pages. This lesson walks you through setting up multiple pages, retrieving the same data, then displaying it for each page's use-case.

vue tutorial about Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

3:41 vue PRO

You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the response comes back.

vue tutorial about Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

Build a Vue.js Form then use Vuex Actions to Post to an API in Nuxt

5:25 vue PRO

The default behavior of submitting an HTML form is to reload the page. You can use the Vue.js @submit.prevent syntax to avoid that behavior. Then wire together the @submit event with an add Vuex action to handle an async post to an api. This lesson walks you through posting to an API using Vue.js, Vuex. and Nuxt.

vue tutorial about Understand the Flash of Unstyled Content in Nuxt

Understand the Flash of Unstyled Content in Nuxt

0:52 vue PRO

You'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use nuxt build, your styles will render before the page loads.

vue tutorial about Load Data from APIs with Nuxt and Vuex

Load Data from APIs with Nuxt and Vuex

2:16 vue PRO

Before each page loads, Nuxt supports pre-fetching data to render what you need on the server. This lesson walks you through using Nuxt's fetch to load data then save it in the Vuex store.

vue tutorial about Add CSS Libraries to Nuxt

Add CSS Libraries to Nuxt

1:25 vue PRO

You can easily add CSS libraries to Nuxt using yarn or npm to install them, then simply adding them to the nuxt.config.js so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your nuxt.config.js.

vue tutorial about Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

Handle Load Errors in Nuxt with Alternate Data, Redirect, or Error Layout

3:50 vue PRO

In a server-rendered application, if you attempt to load data before the page renders and the data fails to load, your application will not run unless you handle the error properly. This lesson walks you through the options of handling load errors so that your users will always have a good experience.

vue tutorial about Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

Add Arrays of Data to the Vuex Store and Display Them in Vue.js Templates

1:33 vue PRO

You add array of todos to the store simply by adding them to the state defined in your store/index.js file. You can access the array of todos using mapState then loop through and display them with v-for. This lesson walks you through the process of setting up todos in Vuex and displaying them in your Vue.js template.

vue tutorial about Manage Vue.js State with Vuex and Nuxt

Manage Vue.js State with Vuex and Nuxt

2:03 vue PRO

Most applications require state to be shared across the application. In the case of Nuxt, you'll share state across pages. Nuxt integrates easily with Vuex by simply adding JavaScript files in the store directory. This lesson walks you through setting up a basic store and using it in your template

vue tutorial about Update Vuex State with Mutations and MapMutations in Vue.js

Update Vuex State with Mutations and MapMutations in Vue.js

1:49 vue PRO

You commit changes to state in Vuex using defined mutations. You can easily access these state mutations in your template using mapMutations. This lesson shows you have to wire together your Vue.js template with your Vuex store using mutations and mapMutations.

vue tutorial about Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

2:21 vue PRO

The Vue-CLI helps you to quickly and easily setup new Vue projects. Nuxt.js is a library that helps you build server-rendered Vue.js applications. This lesson shows you how to use the nuxt/starter template with the Vue-CLI to quickly start a new project.

css tutorial about Build Responsive CSS Layouts with Tachyons

Build Responsive CSS Layouts with Tachyons

2:47 css

Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the flex-column and flex-row classes to respond to mobile and desktop sizes.

js tutorial about Add a Google OAuth 2.0 Login Button to Your Site

Add a Google OAuth 2.0 Login Button to Your Site

7:12 js

Many sites rely on Google's login functionality for creating accounts. This lesson walks you through using the Google OAuth 2.0 api to login to Google and access the basic profile information for your own site.

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.

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