Learn Html, Next and Rxjs

Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force specific data into your database.

In this course, Michael Chan will teach you how to integrate Storybook 6.3 with Next.js 11 so that you can flawlessly build UIs. 

The course will kick off by taking the default Next.js page and turning it into a Story. You will then learn how to leverage Story `Args`, configure the `next/image` component to be unoptimized, and mock server workers with MSW inside Storybook.

Next.js is a minimalistic framework for server-rendered React applications.

Integrate Storybook in a Next.js Application

With the release of `Next.js` v9+, we've been handed the tools to create full-stack react apps with ease. 

This collection will dive into the bare homes basics of API & Dynamic Routing. 

Next.js 9 Routing Quick Start

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

### Accept payments & sell products powered by Stripe and the best of the JAMStack

There are as many ways to build an e-commerce store on the internet as there are products to sell. One thing is for certain, e-commerce is here to stay and as professional developers we need to understand how to build fully custom stores for our clients using the best modern tools available.

- React: flexible and customizable while following modern best practices
- Next.js: lightening fast with guide rails to help your project perform as consumers expect
- Stripe Checkout: lets you offload reams of complicated business logic to a trusted third party that maintains regulatory compliance, global payments, and a standard UX.

Your store will have well managed local component state using React Hooks and you'll also have clear and cohesive shared (global) state with React Context.

Finally you'll deploy your custom store to Vercel (the platform behind Next.js) as well as how to make your Next.js e-commerce store portable to deploy to other platforms.

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

Create an eCommerce Store with Next.js and Stripe Checkout

Add Conversation Intelligence to your video or voice application without training Machine Learning models. Integrate speech to text and all of the below capabilities, out of the box:

- Speaker Diarization
- Sentiment Analysis
- Contextual Insights
- Conversational Analytics
- Topics of Discussion
- Entity and Intent Recognition
- Pre-built UI and Symbl JS Elements

In this course we will use [Symbl.ai](https://symbl.ai/) to get transcripts for the video we will upload as well as more meaningful insights. 

Additionally, you will pick up NextJS for the main stack and will use Symbl's RESTful APIs for processing a conversation from a video and rendering transcripts to screen. Get your Symbl account [here](https://platform.symbl.ai/) and start building.

Create Contextual Video Analysis App with NextJS and Symbl.ai

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

When a manager gives us the requirements for an application feature, they don't care too much about *how* we build it. And often times, they think that hard things will be easy.

Dealing with time and coordinating different types of events can be tricky.

Luckily, we have RxJS to help!

In this course, you will use RxJS to build a loading spinner in an app that meets the ever-changing requirements from a mock Product Manager.

You'll also learn how to implement a "Konami Code" style feature that listens for a correct sequence of keys to be typed in a set amount of time.

Follow the thought process that Rares uses as he breaks problems down into manageable pieces that remain flexible, and become more comfortable solving problems reactively.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Thinking Reactively with RxJS

(This collection is still WIP)

Databases are essential for any full-stack applications, but working with them is traditionally very difficult. Prisma is here to change that. It's a powerful database toolkit that helps us think in data itself - not SQL, not classes, just the data we care about in our apps.

In this series, we will learn how to leverage the power of Prisma to automatically generate a type-safe, autocomplete-ready, and efficient query builder, all based on a simple and easy-to-read schema. We will integrate all this good stuff into a Next.js project to complete a simple social network app.

In the end, you will be able to understand how Prisma works, and confidently start using Prisma in your own project.

Prisma is a next-generation open-source ORM For Node.js and TypeScript that helps developers build faster and make fewer errors.

It supports the following databases: PostgreSQL, MySQL, MariaDB, SQL Server, SQLite, and more recently, MongoDB (Preview).

Prisma provides a complete toolkit:

- Prisma Client: Auto-generated and type-safe database client
- Prisma Migrate: Declarative data modeling and customizable migrations
- Prisma Studio: Modern UI to view and edit data


prisma

Build a full-stack app with Prisma

[Next.js](https://nextjs.org/) is a fantastic framework that allows us to build performant server-side rendered React apps with ease.

In this series, we will learn how to utilize the powerful features of Next.js 9, like API routes and Static Site Generation (SSG), to build full-stack React apps. We will use [Auth0](https://auth0.com) to handle user authentication and authorization, and we'll also learn how to integrate the excellent [Chakra UI](https://chakra-ui.com/) component library into our Next.js project to make it a breeze to build beautiful and modularized user interfaces. Finally, we will import and deploy our project from GitHub to [Vercel](https://vercel.com), the deployment platform built by the creators of Next.js.

This collection will still be continuously updated with new and more advanced content. Subscribe to the RSS feed to get notified of the latest lessons!

Introduction to Next.js 9

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

_Feels like magic._

It’s a beautiful feeling when technology works in mysterious, miraculous ways. So smooth! So effortless! So…

_Wait, that’s not right. What’s it doing? I don’t get it. Help!_

…until you encounter unexpected behavior. Good luck debugging magic.

To use technology to its fullest, you need to understand how it’s accomplishing the tasks set before it. 

This course de-mystifies RxJS. It feels like magic, but it’s also one of the most laborious technologies to learn in front-end web development. We’ll open up the internals to take an up-close look at how RxJS handles Async programming so smoothly.

Over 12 lessons and 31 minutes, you'll get a handle on:

- how RxJS pushes values from observables to subscribers, which take care of the output. 
- how operators handle all of the "in-between" operations where you can manipulate the values while they're still in-flight.
- the internals of operators and subscribers and how to customize operators to your specific needs.


Build Your Own RxJS Pipeable Operators

***Note: RxJS imports have changed since the publication of this course, these changes to RxJS have been reflected in the code examples underneath each lesson. The concepts being taught on RxJS are still applicable.***

Vue.js is an amazing framework that can easily update and reflect user input using templates and data-binding. But there are many scenarios where complex asynchronous behaviors (like loading data, handling "pending" states, timeouts, etc) are solved much easier by leveraging the streaming capabilities of RxJS. This course covers how to setup and use the features of "vue-rx" to enable streams within your templates and easily solve complex scenarios.

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.

Build Async Vue.js Apps with RxJS

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

Build React Components from Streams with RxJS and Recompose

Introductions to various RxJS Operators including of, from, fromEvent, interval and zip.

RxJS Operators

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

Up and Running with redux-observable

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

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will learn to identify common mistakes with RxJS that usually make code harder to read and even introduce bugs. Most of these mistakes are related to Subject, subscribe, and subscriptions. We are going to see how to use only Observables and convenient operators made for solving those mistakes, such as fromEvent, takeUntil and switchMap. By the end of this course, you will have a more immediate intuition on what patterns are simple and safe in RxJS.

Save time avoiding common mistakes using RxJS

If you have used RxJS Observables, it is likely you have seen the flatMap or switchMap operators. They are very powerful operators that can be used in various situations, while being common for dealing with HTTP requests. These operators may look mysterious at first, but turn out to be simple flattening operations on higher order Observables. 

In this course you will learn what is a higher order Observable, when does it occur in real applications, and how to handle them with operators like switchMap. Throughout this course we will see real applications of these operations.

Start following this course if you have some understanding of RxJS, but want to gain advanced skills in the art of using operators.

If you're new to RxJS, we highly recommend the [Introduction to Reactive Programming using RxJS](https://egghead.io/courses/introduction-to-reactive-programming) to begin with, and then [RxJS Beyond the Basics: Operators in Depth](https://egghead.io/courses/rxjs-beyond-the-basics-operators-in-depth) to understand operators.

If you're an absolute beginner to the concept of Observable and async streams, we highly recommend starting with [Jafar Husain's excellent introduction](https://egghead.io/courses/mastering-asynchronous-programming-the-end-of-the-loop).

Use Higher Order Observables in RxJS Effectively

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

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.*** 

RxJS Subjects are a source of confusion for many people using RxJS. For many, the Subject is the obvious and only answer to every problem. Subjects are incredibly useful and necessary, but the key is to know when to use them for solving specific problems that you encounter.

In this course, we are going deep into RxJS Subjects and multicasting operators. You'll gain a solid understanding of when, where, and how to use these powerful tools.

If you are new to RxJS, or want a refresher please check out this course **[Introduction to Reactive Programming](https://egghead.io/courses/introduction-to-reactive-programming)**.

RxJS Subjects and Multicasting Operators

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.