Learn Http, Remix and Scikit-learn

[Supabase](http://supabase.com?utm_source=egghead&utm_campaign=remix) is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes.

We will learn about:

- loaders and actions in Remix
- querying and mutating data with Supabase
- authentication with GitHub
- authorization with RLS
- merging client and server state with realtime events
- deploying a Remix app to Vercel

This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build a Realtime Chat App with Remix and Supabase

Remix is a full stack web framework that focuses on web standards and the server/client model so that you can develop the features your users want and need without being bogged down in over-abstractions. When you get good with Remix, you actually get good at the foundations of web development.

remix

Learn Remix by Building a Social Media Platform with TypeScript and Prisma

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Add Github Login to Your Web App with OAuth 2.0

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Previously to tackle manual restarts due to server crashes , process management tools were used. 

Forever is one such module that is runs on the node ecosystem. So, we need not move away from the rich ecosystem of Node.js.

Use ``` npm install --global forever ``` to install forever module globally.
 

Running your server forever using forever in Node.js

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

- Editor: Atom
- Theme: [Nebula (with Nebula syntax theme)](https://atom.io/themes/nebula-ui)
- Font: [Iosevka with ligatures enabled](https://github.com/be5invis/Iosevka)
- Plugin used for imports: [Elmjutsu](https://atom.io/packages/elmjutsu)
- Plugin used for formatting: [Elm-format](https://atom.io/packages/elm-format)
- Plugin used for linting: [linter-elm-make](https://atom.io/packages/linter-elm-make)


Make an HTTP Request in Elm

`curl` is how you make HTTP requests from the command line. It's awesome for testing out APIs because you have full control over all the headers that are sent, and you don't have to interact with a UI to send a request. 

We’ll learn how to make requests and change the HTTP method, set headers, and send JSON and url encoded form data. We'll also see how to increase readability by splitting long requests into multiple lines and formatting JSON responses with `jsome`, a node module.

Make HTTP Requests in Bash with `curl`

To make our opengraph image generation function, we'll have to work out a way to pass the querystring variables from the original URL through to the React script running inside the headless browser. We choose to set them on the window using another injected script, and we also cover handling URL decoding of querystring components.

Passing variables to serverless functions using query strings

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

express

The main purpose of a web server is to export an api. The most common protocol is http requsts. In this lesson, we will learn how to benchmark your app's http api's using autocannon in order to be able to track down performance bottlenecks or inefficient code.

Benchmark http requests using autocannonjs

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

In this video, we start by going to Begin.com and creating a new Deno app. We then clone the repo, inspect the code, and modify the response from HTML to JSON data. Next, we deploy the updates in an automated CI / CD process by merging the updates to our master GitHub branch.

Up and Running with Deno

We're adding Github authorization to our client app

Create a function that is called on window load. In that function store the parameters that get sent over to the Github auth server. 

In our query params, we will set the response_type parameter to "code" in order to ask the auth server for a code. Asking for a code from the auth server is more secure than asking for the access token through a browser

Finally, create a URL from the params and an authorization endpoint. Using a query selector select an anchor tag and set the href attribute to the URL that you created.

Add GitHub Authorization to an OAuth Client App

We'll create our client-server using the `express` and `cors` packages

Express will be used to create our HTTP application. We'll need it to post to our endpoints and listen to our port.

We need the `cors` package to make cross-origin requests since the front-end will be a different origin than the server.

Create an OAuth Client-Server for code/token exchange

We'll be parsing the authorization code sent in our query before sending it to the server.

We do this by creating a function that parses our query and retrieves the code parameter. If we find a code in the query we send the code to our server by using `fetch` to make a `POST` request. In the body of the request we send the code and the state in stringified JSON.

Once we make the request we can await a response and store its JSON data (the auth token) in a variable. In a real application, we might also redirect to the homepage or the page the user was just on.

Parse for the Auth Code in a Query before Sending It to a Server

We're going to refactor some of our HTTP application code in order to create the ability to exchange the code inside our HTTP request for a token. 

We can do this by creating a function that takes the code from a request and posts a query that contains our client id and secret to our token endpoint. We then await a response, parse the data from the response, and then return the parsed data.

Exchange Auth Code in a Request for an Access Token

We're going to fetch a user with that token we exchanged the code parameter for in the previous lesson. 

All we have to do is make a fetch request to the `/user` endpoint with an Authorization header that contains the token and then return the data. Like this ``Authorization: `Bearer ${token}``

Fetch Protected Data from a Resource Server with an Access Token

The first thing you do is install Remix! In this course, you start with a barebones Remix set up. In many situations you will start with a [Remix stack](https://remix.run/docs/en/v1/pages/stacks) but this course starts from the beginning.

Installing Remix is easy though, so you will finish this lesson by being introduced to a core Remix feature: data loaders.

Remix loaders are functions that only run on the server so you are safe to connect to databases, make API calls, and anything else you’d expect to do on a server. The data you return from these functions will be received into your components through `useLoaderData` hooks. 

We’ll see how to return static data from a loader and display it in a component. Along the way, TypeScript will complain about data that is coming into your component so we will fix that as well.


Load and Display Static Data with Remix loaders

Most applications need data persisted to a database. A really great way to manage data is through an (Object-relational mapping) ORM so you aren’t stuck writing SQL queries when you want to be building websites. 

Prisma is a modern ORM that lets you get started with a database in just a couple steps. It supports TypeScript to which you will take advantage of.

In this lesson you will initialize Prisma in your application and model out what a `Post` will look like. You’ll set a few properties that Prisma will manage (e.g. id, createdAt) and a few that you will manage. Prisma also comes with a studio that you can run to create and manage data super easily when you don’t have other means to CRUD that data (we don’t yet!).

Install and Model Data with Prisma

Now that you have a database running, you need a way to connect to it in your application. This is where Prisma client joins the fray and really shines. 

With Remix, there is a little bit of set up that we have to do to ensure that we won’t be opening extra connections to the database through Prisma. Through this set up you’ll learn about another important pattern in Remix which are services. 
You’ll create a db.server.ts service that will manage setting up the Prisma client. The folks at Remix have us covered with this code snippet that safely sets the client up for you. 

After creating the client, we will create another service `post.server.ts` that will expose all of the functions that you can use throughout your application to retrieve data from the db. One great benefit of this pattern is that when consuming these services you don’t need to know about the implementation that is powering them. Just the api that is exposed, in this case a `Post` type and `getPosts` function.

FINALLY you’ll consume that function in the data loader at the root of your application to display posts from the database.

This sounds like a lot but you get this all done in under 5 minutes.

Retrieve and Display Data from the Database through Prisma and Remix Loaders

There are many ways to style an application. While styling isn’t a focus for this course, we don’t want the application to be unbearable to look at. 


TailwindCSS is how you will style this application. With it’s utility classes, Tailwind stays out of the way once you get it set up. The [Tailwind docs have a great tutorial](https://tailwindcss.com/docs/guides/remix) which you can follow to get to styling your application. You can also follow along in this tutorial.

Set up Tailwind and Create a Presentational Component in Remix

This is where things start to get fun, you’re adding data to your database!

 To do this, you’ll learn about Remix actions. A Remix action utilizes HTML elements to accept input from the user. When creating data, you’ll set the form to a method of `post`. The form needs a route to post to so you will need to set the `action` to the route that will handle the request. In our case it is the index route the form is in.

The Remix action itself accepts a request that you can pull the form field data you need off of it. From here you can update your database directly, because you’re on the server! In this case, you’ll create a function createPost that will utilize Prisma to create a record. Once this happens, we will redirect users back to the index page that they were on.

Add Data to your Database through Remix Actions and Prisma create

At this point, your form will accept any type of input that users desire. This isn't good, you need to add form validation. 

Form validation is another area that there are many ways to accomplish what you need. One great way to get easy form validation is through a library called Zod. Zod allows you to create a schema to parse your form input against. It will return form and field errors when input doesn’t match the rules that you supply.

With Zod in place, you’ll check form input in the action previously defined. If an error is found, you’ll return an object passing in the errors you find as well as the input that users submitted. This will be used to render error messages in the form and reset form state to what was submitted. This is easy to accomplish with Remix json helper that will also set the error message for you.

Along the way you will also see how easy it is to type this data.

Validate Form Data Through a Remix Action using Zod

You are at a place where you have an app that will persist data through a sqlite database. Sqlite is great for getting started but as you build out your application, you’ll want a database that can scale with your project. 

PlanetScale is the database that you are looking for. PlanetScale is a database as a service that powers a mysql database called Vitess. Vitess is what YouTube is ran on so safe to say it will scale to all your needs. 

Because you used Prisma to set up your database, switching to PlanetScale will be easy. You will create a PlanetScale project, sign in to the CLI, follow the Prisma Quickstart guide and learn about Database workflows with PlanetScale. Who would have thought it would be so easy to migrate your database service.

Connect a Remix Application to PlanetScale Through Prisma

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

After this course, you should be able to leverage SolidStart to build your Solid applications.

SolidStart is a JavaScript Framework designed to build full-stack SolidJS apps and enhance your developer experience.

In this course, you will learn how to:
- Set up a SolidStart project
- Toggle different rendering modes
- Leverage file system routing to turn your files into routes
- Create API routes to expose some public endpoints
- Fetch, prefetch, update and cache your data
- Turn your functions and actions into server-executing ones
- Get rid of unnecessary network waterfalls by using Single Flight Mutations.

Getting Started with SolidStart

Bootstrap is an incredibly popular CSS framework designed to make your website look great on mobile and desktop.

By the end of this course, you'll be familiar with many of the popular classes and components that Bootstrap uses to apply in your own projects.

For each feature you build in the course, you'll get a sense for what the relevant classes do for those components and links to documentation for further exploration.

For the course demo application, we will analyze the landing pages of Microsoft and Apple to identify common components that are implemented. When these are identified, you'll implement these components yourself with Bootstrap.

You'll build several common UI elements such as a nav bar, a carousel of images, Cards, and Forms.

Through building these components, you'll understand what is behind the different classes Bootstrap gives you and get familiar with how it exposes flex and grid layout for you.

Cascading Style Sheets bring order and beauty to our applications.

Create Professional Responsive Websites using Bootstrap

This course is perfect for those looking for a lightweight alternative to NgRx Store that scales effortlessly.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

Scalable Signals Angular Architecture with NGRX Signal Store

Learn how the latest JavaScript features can help you improve your codebase. 

Learn the Latest ECMAScript Features (ES2024, ES2023, ...)

course repository: https://github.com/ducin/egghead-typescript/tree/brand-types-value-objects

Domain Data Modelling using TypeScript Aliases, Brand Types and Value Objects

**Note:** This course is being actively developed and more lessons will be added in the future.

Cursor is an AI-enhnaced code editor that allows you to call upon the robots to refactor or stub out functions for you with natural language. 

In this course, John will show you workflows that will save you time and effort by utilizing the features such as its mult-line editing and context.

In particular, by giving Cursor's AI the proper context, whether that's lines of code or multiple files, you'll get better output when trying to extend or refactor logic that's present.


Bite-size video tutorials for badass web developers.

egghead

Productive Developer Workflows with AI Enhanced Cursor IDE

Learn the fundamentals of React Query by going through the basic API and then implementing search in an employee tracking app.

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

Simplify State Management with React Query

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.

Create Interactive 3D Experiences with TresJS

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

angular

Modernize State Management in Angular with Signals

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

Search

Search Results