 Resources from Kevin Cunningham in 2024

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Get Started Building CLI Tools with Node.js

  Vue is a progressive framework for building UIs that allows you to incrementally integrate the technology into any existing project that you're working on. This makes it a great tool for you to learn as you can bring it anywhere.

This course is for learners just starting out in web development as well as for those who want to get up to speed on Vue 3 as fast as possible. You'll learn all the foundational skills of web development and how they are presented in Vue. 

We will start with an HTML, CSS, and JavaScript file as to not distract you with any possible tooling that goes on top of the building websites with Vue. 

You will incrementally build an app that sells comedy event tickets. In the end, you'll see how to deploy the application with Netlify Drag and Drop.

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.

The Beginner's Guide to Vue 3

WordPress has been around for a long time and powers a huge number of sites.

Just because WordPress isn't brand new doesn't mean it can't get the job done!

Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

### While watching, consider...

- What are the tradeoffs of using a CMS for a site?
- Would headless WordPress work for me or my clients in this scenario?

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

wordpress

WordPress as a Headless Content Management System (CMS) and GraphQL API

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Building an API with Express

**Get started building dynamic apps with GraphQL and Vue3.**

As your app scales, so does the complexity of managing your routes and API endpoints. 

It gets tiresome. 

But this aspect of web development can be streamlined considerably! 

GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end.

But what does GraphQL *do*? 

Its power comes from giving you a *single* endpoint that you make all your queries to. Instead of making a request to a specific endpoint and getting a fixed response, you can write flexible queries to a single endpoint.

![REST vs GraphQL diagram](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1638989029/course-resources/create-a-graphql-powered-vue-3-application/rest_vs_graphql.png)

Vue3 has some great new features that we will be exploring, such as the setup script syntax. But you won't just be exploring Vue3's new features, we will be building a dynamic front end with an index, view pages generated from data, and forms.

To make our frontend dynamic, we will be powering it with GraphQL. We start with the basics by creating queries but we move on to more advanced topics such as query params, mutations, and pagination.

To actually use GraphQL in our Vue app we will be using the Vue Apollo Client. Which gives us convenient methods for making queries, getting the data back into the client, and handling errors.

## Gain These Skills

- Add GraphQL to a Vue 3 project
- Query and mutate data with GraphQL in Vue 3
- Create data-driven views with Apollo client
- Handle routing within a Vue 3 project
- Implement optimistic updates and infinite scroll

## Prerequisites

Some entry-level knowledge on Vue and GraphQL is recommended, but this course is beginner-friendly enough to where it isn't a strict requirement.

If you want to build a deeper foundation for both Vue and GraphQL we have a couple of awesome courses that you can hack through. 

For Vue, check out **[The Beginner's Guide to Vue 3](https://egghead.io/courses/the-beginner-s-guide-to-vue-3-1c46da8b),** which is also by Kevin. It's great for both newcomers to web dev and veterans alike. 

And for GraphQL, work through **[GraphQL Query Language](https://egghead.io/courses/graphql-query-language)** from Eve Porcello. Eve literally wrote the book on learning GraphQL and her course is similarly top quality. 

## What's Next?

Progressive Web Apps are a more advanced topic, and converting an existing Single Page **Vue** App into one makes for an excellent follow-up project. **->** [Offline-First Progressive Web Apps (PWA) in Vue.js](https://egghead.io/courses/offline-first-progressive-web-apps-pwa-in-vue-js)

If you want to take your **GraphQL** game to the next level, then becoming an expert in designing GraphQL schemas is the way to go. **->** [Designing GraphQL Schemas](https://egghead.io/courses/designing-graphql-schemas-99db)

And I know the following recommendation is a React course but *it really is that good*. You will learn some **advanced** techniques that will be applicable to Vue or any other Apollo compatible framework that you work with. **->** [Manage State in React Apps with Apollo Client and GraphQL](https://egghead.io/courses/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89)

Create a GraphQL Powered Vue 3 Application

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

A Toast is a non modal, unobtrusive window element used to display brief, auto-expiring windows of information to a user. They are used for status messages and persist between page changes until they have been seen. We'll use the react-toast-notifications library to add this functionality to a basic app. 

Use react-toast-notifications to add toast notifications to a NextJS app

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

By default, git provides `master` as the default branch. This lesson shows how to get round that and use an alternative as the default branch for an existing repo.

Configure an existing Github repo to use a different default branch

Bite-size video tutorials for badass web developers.

egghead

There are tasks that would be great to automate more and, if you are using G-Suite, there are built in tools to help you along.

In this lesson, we'll take a form responses, process it and create a calendar event based on the response.

We'll use a Google App script which has a large selection of classes ready for use.

You can find more documentation here https://developers.google.com/apps-script/reference/.

Use Google App Scripts to create a calendar event from form responses

We'll look at the minimum requirements to create your own theme. With two files, style.css and index.php, you have all you need to get started. We'll look at how to pass information about the theme to WordPress and how to set-up a direct link to the admin panel.

Create a Stand-Alone Theme in WordPress

We'll look at how we can transfer our work so far into using single file components. We'll see how the build tools lint our code and allow us to have more readable code.

Refactor to use Vue files

We'll see how to install the vue/cli and how to start a project using it. We'll discuss the boilerplate that is provided by this bootstrapping process.

Install the vue/cli

We'll see how to quickly deploy (and redeploy) a static site using Netlify's Drop. This service allows a drag-and-drop approach to application deployment.

Deploy a static site using Netlify's Drop

We'll handle any fetching errors using the `.catch()` property of the `axios` promise. We'll also add some indication for our users to let them know that we had a problem.

We'll do this by setting an error data property to true when we have an error and conditionally render an error message to the user. 

Handle Errors when Data Fetching in Vue with Axios

We'll see how we can use the `mounted` property of the configuration object to fetch data for our applications. We will set initial props and then have these updated with the returned data from our HTTP call.

Use Axios for Remote Data Fetching with Vue Mounted Property

We'll see how we can define our own events that our components can emit to their parents. We'll also see how the parent can respond to these events using the `v-on` or `@` directive, just like any other event.

Send an Emit Event with Data From a Vue Component to It's Parent

We'll see how we can add methods and properties to components, allowing us to keep the logic that controls our components together with the templates.

Our component receives tickets for the visitor to buy, we'll create a method in our component and bind it to a button that allows them to buy those tickets. In doing so, you'll notice that we can't change the value of the tickets that we received, it's immutable. To get around this we'll create a local variable in our component to update the display as tickets are purchased.

Create and Manipulate State within a Vue Component by Defining Methods and Properties

We'll use the `app.component` function to make a component and add it to our template. We'll pass through `props` into the component and use these to initialize the state of our component.

In this component, we'll accept data with the `props` key, display the data with the `template` key and bind data in our `data` key in our component config object. By doing so we'll be able to select the number of tickets that we would like to buy at each ticket type level.

Build a Component and Pass Props to It in Vue

As our applications get more complex, it can be really valuable to organize our applications into components. We'll discuss some of the considerations that help us make these decisions. A big factor to consider when making these considerations is when you start seeing logic or styling that you could use elsewhere in the application.

Decide when to use a component in Vue

We'll see how we can define two-way binding using the `v-model` directive. This allows us to update data in our component and have it change the data stored in the application. This is particularly useful in forms within our application.

We'll see a form in action by creating a `message` data prop and binding the input field to that data prop and watch the data get updated. If this prop is updated anywhere in the application it will affect the input that we defined.

Create a Two Way Binding to Update Data Throughout an App with Vue v-model

We'll see how we can add CSS classes conditionally to our HTML elements using the array syntax. We'll explore how different classes can be added atomically and that these can be build on top of a defined base class.

You'll see that we can pass in terneries that will conditionally apply a class or use the object syntax to conditionally apply a class.

Conditionally Apply an Array of CSS Classes to Elements in Vue

We'll see how we can add CSS classes conditionally to our HTML elements using the object syntax. We'll explore how different classes can be added atomically and that these can be built on top of a defined base class.

In this case, we'll check if our `soldOut` computed property is returning true and if it is we'll gray out the event image.

Topics

Instructors

Content Type

Kevin Cunningham