Learn Graphql, Html and Jasmine

_Note: this course is being published and released as it is recorded, and is still incomplete. It is slated to be around a dozen videos._

Learn how to build PlaylistHunt, a fully featured app with authentication, authorization, a GraphQL API, and more, using up and coming modern tools, including:

- Gatsby
- Hasura
- Heroku
- Auth0
- Chakra UI

[View the demo](https://playlisthunt.netlify.app/) live online!

Most tools used are open source, with the exception of Auth0 and Heroku, which offers a generous enough free tier for hobby apps to be developed without any problems.

## Modern techniques

In the process, implement techniques to make your app experience dynamic on some portions, and static in others. 

Learn to how to build for Gatsby's vast and powerful plugin ecosystem by creating 3 of your own custom plugins in the process.

Use the latest and greatest of Gatsby, like the brand new [file-system routing APIs](https://www.gatsbyjs.com/docs/file-system-page-creation/). 

## Who is this course for?

Intermediate developers with some existing knowledge of React and web development are best suited for this course. The pace is a little quicker and aims at showing how all the pieces connect together to make a modern JAMstack app.

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

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

One of the most well-known GraphQL features is that it lets you do things like replacing multiple REST calls with a single query. You might have done some query experimentation with demo APIs or working on a Gatsby site. 

But there's more to GraphQL than just making queries.

For example, with mutations and subscriptions, GraphQL can smooth out the process of implementing real-time features in your web applications.

In this new course, you'll get practice with these features as egghead's own Ian Jones guides you through building a real-time chat app that's backed by GitHub Issues.

The tools used for the course are OneGraph and Formidable Labs' urql client.

OneGraph is great because it allows you to expose a single GraphQL endpoint that can access data from multiple services including GitHub, Stripe, Airtable, and more. It handles things like authentication for us as well, as you'll see in the course.

At Formidable Labs, the team released urql as a lighter weight alternative to Apollo or Relay that supports the most common interactions with a GraphQL server through their handy React Hooks. 

The course starts with a fresh Create-React-App and touches upon topics like using GraphQL query variables, working with Hooks, handling authentication with React Context, and setting up & consuming the GraphQL subscription.

Along the way, Ian also works through debugging some common errors that you may encounter when developing your own GraphQL apps in the future!

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

React Real-Time Messaging with GraphQL using urql and OneGraph

How does e-commerce work on the Jamstack? 

Jason Lengstorf and [Thor 雷神](https://twitter.com/thorwebdev) teamed up on _Learn With Jason_ to [build a serverless Stripe Checkout implementation](https://www.learnwithjason.dev/sell-products-on-the-jamstack). This collection is a cleaned up, egghead-style tutorial for selling products on a Jamstack site using Netlify Functions and Stripe Checkout.

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Sell Products Using Stripe Checkout and Netlify Functions

GraphQL brings joy to using APIs. Even though it's based on a type system, GraphQL in many ways is more flexible than REST.

But the flexibility that makes GraphQL a joy to work with can have its downsides if you aren't careful.

Schema design is an area where one small oversight at the beginning can get you stuck having to deal with weird naming, bloated duplicates, and other annoying workarounds.

It doesn't have to be like this!

Nik Graf has extensive experience designing GraphQL schemas, for a variety of business applications.

In this course, Nik has prepared several examples following different design patterns. Through exploration and comparison, you'll come away with actionable knowledge for designing and extending schemas.

Follow Nik, and avoid making Schema mistakes that will come back to bite you later.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Designing GraphQL Schemas

GraphQL is gaining traction as one of the most popular ways to create an API. Regardless of which GraphQL implementation you pick, you’ll use the QL in GraphQL — the query language — to query data, change data with mutations, and listen for data changes with subscriptions.

You need to know the Query Language regardless of the server-side implementation.  In this course, we will learn the GraphQL query language by sending an assortment of GraphQL operations to an existing API. 

To start, we’ll learn how to write queries to obtain all the data needed for an app in one response. As the course progresses, we’ll use mutations to add and change data. To wrap up, we’ll investigate GraphQL subscriptions and realtime data. 

After the course, you’ll be ready to communicate with a GraphQL API regardless of server-side implementation using the GraphQL query language.

GraphQL Query Language

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

Up and Running with Gatsby

In this playlist, we are going to go over how to set up and use urql as a GraphQL client. 

You will learn how to set up an Urql `Provider` component so that all of your React components have access to urql. Then you will learn how to use 3 of urql's React Hooks:

- useQuery
- useMutation
- useSubscription

Each of these lessons covers their corresponding GraphQL topic: Queries, Mutations, and Subscription.

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

vscode

Introduction to Urql: A React GraphQL Client

Learn how to add optimized images to your Gatsby site with the `gatsby-image` plugin.

These videos dive into:

- installing and configuring plugin options
- sourcing images to be queried via GraphQL
- displaying traced-svg or "blurred-up" images
- different image types supported by `gatsby-image`
- as well as alternatives for using images in Gatsby

Image Loading and Optimization in Gatsby with gatsby-image

This application serves as an introduction to building products with a JAMStack and Serverless approach. We cover everything from the beginning:

* starting with the Gatsby client
* handling authentication with Netlify Identity
* Shipping a GraphQL server on Netlify Functions
* Building in access control with a serverless capable database

It uses tools that remove as many of the barriers as possible while also allowing upgrading in the future. Netlify Functions can grow into AWS Lambda, Netlify Identity can grow into Auth0 or Cognito, and FaunaDB can grow into DynamoDB.

Building a Serverless JAMStack Todo app with Netlify, Gatsby, GraphQL, and FaunaDB

WordPress is the most popular content management system in the world. Content creators are able to easily customize nearly everything about WordPress from their admin dashboard, providing a really pleasant content management experience. Using Gatsby as a frontend for your WordPress sites makes the experience of developing the site and visiting the site just as pleasant.

Moving your WordPress frontend to the Jamstack means you keep the convenience of using WordPress’s custom backend for creating and editing content while _also_ avoiding some of WordPress’s biggest downsides.

Historically, WordPress has many downsides, including:

- **Security** — because it’s the most popular content management system in the world, hackers work hard to find and exploit security holes in WordPress sites.
Performance — through a combination of legacy code, community plugins, and other challenges, WordPress sites can easily become slow to load.
- **Scale** — if a WordPress site suddenly becomes very popular (a great thing!) it can overload servers and cause the website to go down (a not-so-great thing!) without complex scaling techniques.
- **Cost** — a WordPress site requires always-on hosting, and specialized hosting can be expensive. Adding support to handle massive scale adds significant cost, too.

Switching to the Jamstack helps mitigate — and even eliminate! — these downsides:

- **More secure** — Jamstack sites don’t connect to the server or database after they’re built. This makes it much harder to hack the site.
- **More performant** — by doing less work for each request and leveraging modern tools, Jamstack sites tend to outperform WordPress sites out of the box, and can be very fast with a bit of extra effort.
- **More resilient** — because Jamstack sites ship to a content delivery network (CDN) by default, a sudden surge of site visitors won’t take your site down.
- **More affordable** — many Jamstack hosting solutions have generous free tiers that are plenty for most small to medium sites, and upgraded accounts typically cost less than specialized WordPress hosting.

Switching to the Jamstack gives you all of the benefits of WordPress and helps you avoid the downsides!

In this collection, we walk through the full process of migrating a WordPress site to the Jamstack, which keeps all the flexibility and power of WordPress’s admin dashboards while adding all the benefits of the Jamstack.

Migrate a WordPress Site to the Jamstack Using Gatsby

This course will walk you through the entire process for creating and deploying your first Static HTML Site. 

You will learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page. If you want to build a website or web application, you'll need to know HTML.

Additionally, you will learn how to make your website responsive using CSS media queries, add custom emojis, animations, and a "Tweet" button.

To finalize the course, you will learn how to deploy and host your Static HTML Site with Netlify, a powerful service that automates builds, deployments, and manages your websites and web apps.

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Create and Deploy a Basic Static HTML Website

With GraphQL, you can define the shape of your data in a schema, and GraphQL will fulfill the request with the precise data you need. When you need it. This doesn't come without a cost. GraphQL adds a lot of complexity to your application by requiring you to define your schemas through types, mutations, and resolvers.

AppSync is a fully managed serverless GraphQL service that fast-tracks your API development. You can define a single type, and AppSync auto-generates a schema, queries, mutators, and subscriptions for you.

In this course, Nader Dabit will show you how to:

- build a production-ready GraphQL API through AWS AppSync
- create and modify data through the AWS AppSync console
- connect a React application to the GraphQL API
- execute queries, mutations, and subscriptions for data through the API in React

Scalable Offline-Ready GraphQL Applications with AWS AppSync & React

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

GraphQL Data in React with Apollo Client

In this course we will learn some of the basics of getting data into and out of Neo4J, as well as touch on some of the libraries and tooling available in the Neo4J community ecosystem, which we will leverage to quickly create and use a full-featured GraphQL API.

We will start by learning how to run and interact with Neo4J locally. Then we will develop a graph model in which to store the data that we pull from SWAPI via REST. We will then create an Apollo GraphQL API driven by a few simple schemas which fit into this model. We will then write some simple code to crawl SWAPI and insert the data into Neo4J through our GraphQL API. Once there is data in the store, we will learn about some of the features in `neo4j-graphql-js` that make connecting and accessing our graph Nodes easier.

Neo4j delivers the lightning-fast read and write performance you need. Neo4j combines native graph storage, scalable architecture optimized for speed, and ACID compliance to ensure predictability of relationship-based queries.

neo4j

Build a Neo4J & GraphQL API

Introduced in React 16.8, Hooks are a new way to write stateful components while avoiding the pitfalls of classes. 

As a result, GraphQL developers everywhere wanted to use them for their Apollo Client components, instead of relying on render props pattern. In August of 2019 things have changed and Apollo Client now has official support for React hooks, by providing `useQuery`, `useLazyQuery`, `useMutation` and `useSubscription` hooks.

If you'd like to learn how to use them, this playlist is for you!

Learn Apollo Client Hooks

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


Optimize User Experience for Mobile Devices and Browsers

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

Learn how to:
- Generate markup with loops and template literals
- Leverage native HTML behavior
- Create SVG
- Use CSS variables and scope
- Implement game logic with HTML forms
- Animate SVG with CSS
- Use CSS Animation to provide motion
- Use Pug Mixins
- Disable motion when users don't want it
- Apply visual effects using CSS filter and backdrop-filter
- Generate random animations using Pug and CSS variables

Cascading Style Sheets bring order and beauty to our applications.

Tic Tac Toe with CSS and SVG

It’s really fun to work with graphics when building apps and websites, but how do you get started? HTML5 has a technology called **Canvas** that lets us draw graphics to our screens. We can do everything from making basic shapes to creating complex interactive games and animations!

 In this course, we will learn the basics of using **Canvas**. We’ll start by learning how to create a canvas on an HTML page. Next we will learn how to draw and style with fills and strokes. Finally, we will add interactivity to canvas elements.

Create Graphics with HTML Canvas

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

Create an SVG Icon System

Supercharge your HTML with a powerful templating language. Variables, loops, conditionals.. Twig brings programming concepts to your HTML workflow!

HTML Templates With Twig

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

Topics

Instructors

Content Type

Free or Pro