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.
showing 317 lessons...
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.
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
isClient to navigate and avoid reloading data.
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.
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.
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.
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.
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.
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.
You can easily add CSS libraries to Nuxt using
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
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.
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.
store directory. This lesson walks you through setting up a basic store and using it in your template
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.
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.
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-row classes to respond to mobile and desktop sizes.
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
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.
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.
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.
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.
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.
You can change behaviors of element and
@Component properties based on services using
@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.
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.
@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.
@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.
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.
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.
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.
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.
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”.
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.
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.