GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

Learn Github

Now that we are on Fly.io we'll want to replicate the functionality that Vercel was automatically doing for us by creating and configuring a GitHub Action to deploy our site whenever new commits hit the main branch.

Luckily for us there are a number of pre-defined GitHub actions that we can utilize like `actions/checkout@v3`, `actions/setup-node@v3`, and `superfly/flyctl-actions/setup-flyctl@master`. You'll notice that the first two actions are maintained by GitHub where the last is maintained by Fly.io. 

During this process you will also need to generate a token to verify your deployment to Fly.io and store that in the repository Action secrets.

Create a GitHub Action Configuration to Automatic Deploy an Astro Blog

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

First thing we'll do is navigate to [Github's Developer Settings](https://github.com/settings/applications/new) to register a new OAuth application.

Here we will set the app name, url, and callback url both for the development environment.

We will copy the Client ID and generate secrets and set them in our `.env`.

Finally we'll generate a `NEXTAUTH_SECRET` with the `openssl` cli tool to generate a random, secure string.

Set up GitHub OAuth for a Next.js 13 Application

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. 

supabase

[Supabase](https://supabase.com) includes multiple authentication strategies. In this lesson, we create a Supabase client to trigger the OAuth authentication flow with GitHub.

Additionally, we discuss the differences between Client and Server Components in the [Next.js App Router](https://nextjs.org/docs/app):

- Client Components: user interactivity
- Server Components: data fetching

Lastly, we create a Route Handler to exchange an authentication code from GitHub for their Supabase session.

## Code Snippets

**Authenticate with GitHub OAuth**

```tsx
await supabase.auth.signInWithOAuth({
  provider: "github",
  options: {
    redirectTo: "http://localhost:3000/auth/callback",
  },
});
```

**Exchange code for Supabase session**

```tsx
await supabase.auth.exchangeCodeForSession(code);
```

## Resources

- [Supabase Auth Helper docs](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [Next.js App Router docs](https://nextjs.org/docs/app)

Authenticate Users with GitHub OAuth using Supabase and Next.js Client Components

[Supabase](https://supabase.com/) includes many ways to authenticate users - Email and password, magic link, mobile OTP etc. In this lesson we implement social login with GitHub by registering a new OAuth Application and providing Supabase with the Client ID and Secret.

## Resources

- [Supabase guide to Login with GitHub](https://supabase.com/docs/guides/auth/social-login/auth-github)

Create an OAuth App with GitHub

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

Using a GitHub repo to deploy our application to Vercel, keeps our code and live production site in sync. In this lesson we look at using the [GitHub CLI](https://cli.github.com/) tool to create a public repo, and adding it as a remote origin for our project.

Additionally, we create a new Vercel project from this GitHub repo, add our Supabase environment variables, and deploy. Lastly, we update the Homepage URL in our GitHub OAuth app to be our new Vercel URL, and set our Supabase project's [Authentication Site URL](https://app.supabase.com/project/_/auth/url-configuration) to our new live application URL.

## Extension ideas

- Style the app using Tailwind CSS (or another method of choice)
- Implement the ability for a user to `update` and `delete` their own messages
- Add the option to set a username and display this alongside messages
- Add separate message threads/chat rooms
- Implement private messages/chat rooms

## Resources

- [GitHub CLI](https://cli.github.com/)
- [Vercel docs](https://vercel.com/docs)
- [Deploying Remix app to Vercel](https://vercel.com/guides/deploying-remix-with-vercel)

Deploy a Remix Application to Vercel from a GitHub Repository

Supabase supports [a collection of auth strategies](https://supabase.com/docs/guides/auth) - Email and password, passwordless and OAuth. In this lesson, we look at implementing OAuth with GitHub.

In order to do this, we [create a new GitHub OAuth app](https://github.com/settings/applications/new), and configure Supabase to use its Client ID and Secret. Additionally, we create a `<Login />` component that uses the Supabase client to sign users in and out.

This identifies a problem that we don't have access to the environment variables required to create a Supabase client outside of loaders or actions. Therefore, we pipe through our `SUPABASE_URL` and `SUPABASE_ANON_KEY` from the Loader function, and create a singleton Supabase client, to use across our components.

Lastly, we look at sharing this single instance of Supabase through the Outlet Context and declare types to ensure we have TypeScript helping us out throughout the application.

## Code Snippets

**Expose environment variables from the server**

```tsx
export const loader = async ({}: LoaderArgs) => {
  const env = {
    SUPABASE_URL: process.env.SUPABASE_URL!,
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
  };

  return json({ env });
};
```

**Access `env` in component**

```tsx
const { env } = useLoaderData<typeof loader>();
```

**Create a singleton Supabase client**

```tsx
const [supabase] = useState(() =>
  createClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
);
```

**Share global variables with Outlet Context**

```tsx
<Outlet context={{ supabase }} />
```

**Consuming Outlet Context**

```tsx
const { supabase } = useOutletContext<SupabaseOutletContext>();
```

**Logging in with GitHub**

```tsx
await supabase.auth.signInWithOAuth({
  provider: "github",
});
```

**Logging out**

```tsx
await supabase.auth.signOut();
```

**Entire root component**

```tsx
import { json, LoaderArgs, MetaFunction } from "@remix-run/node";
import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";
import { createClient, SupabaseClient } from "@supabase/supabase-js";
import { useState } from "react";

import type { Database } from "db_types";

type TypedSupabaseClient = SupabaseClient<Database>;

export type SupabaseOutletContext = {
  supabase: TypedSupabaseClient;
};

export const meta: MetaFunction = () => ({
  charset: "utf-8",
  title: "New Remix App",
  viewport: "width=device-width,initial-scale=1",
});

export const loader = async ({}: LoaderArgs) => {
  const env = {
    SUPABASE_URL: process.env.SUPABASE_URL!,
    SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY!,
  };

  return json({ env });
};

export default function App() {
  const { env } = useLoaderData<typeof loader>();

  const [supabase] = useState(() =>
    createClient<Database>(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
  );
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet context={{ supabase }} />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}
```

## Resources

- [Supabase docs - login with GitHub](https://supabase.com/docs/guides/auth/auth-github)
- [Remix docs - Outlet Context](https://remix.run/docs/en/v1/api/remix#useoutletcontext)

Implement Authentication for Supabase with OAuth and Github

In this lesson we look at why you would need to generate snapshots on your CI server. We follow this up by creating a simple Github Action that will generate new snapshots against a pull request once you leave a specially formatted "slash command" style comment.

Generate Playwright Snapshots on your CI Server

“a11y” stands for “accessibility.” It is a numeronym, with 11 representing the count of letters between the letter a and the letter y.

Accessibility is broken down into 4 categories of disability: visual, cognitive, auditory, motor. 

Regardless of the category of disability, accessibilities aim in web development is to make applications and websites usable for everyone.

a11y

To automate running Lighthouse audits on our application we can add the use of the Lighthouse CI tool to our Continuous Integration suite using GitHub Actions.  By making use of the Lighthouse CI GitHub App we can add to the checks in every Pull Request a report with the score from the audit run on each URL we configure for Lighthouse to audit.

## Resources
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/getting-started.md
* https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md
* https://github.com/apps/lighthouse-ci

Automate Lighthouse Audits with GitHub Actions

The pluggable linting utility for JavaScript and JSX.

eslint

We can leverage GitHub Actions to automate the running of all of our accessibility auditing tools as part of a Continuous Integration (CI) workflow. 

Auditing tools will only catch a percentage of potential accessibility issues, it is no replacement for manual testing.  But being able to automate the auditing will add efficiencies to our testing and provide an early warning system that can be run much more frequently than it’s practical to perform manual testing.  Additionally, we can use our CI suite as a safety net to prevent code changes that break accessibility from being able to be merged.

## Resources
* https://app.egghead.io/lessons/react-set-up-eslint-to-audit-accessibility-issues-in-react
* https://docs.cypress.io/guides/continuous-integration/github-actions#Basic-Setup
* https://github.com/cypress-io/github-action

Automate Accessibility Audits with GitHub Actions

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

This course builds off a react-based shopping cart application containing a list of products (loaded dynamically from a JSON file). It is fully self-sustaining and does not rely on any third party APIs. It uses [vite](https://vitejs.dev/) as the underlying bundler and development tool with [react-ts](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) preset.

To get started simply follow the these instructions:

```
git clone git@github.com:xjamundx/redux-shopping-cart.git
cd redux-shopping-cart
git checkout egghead
npm install
npm run dev
open http://localhost:3000
```

**Note** This course uses a shopping cart application to demonstrate redux principles. It is not meant to demonstrate anything about making actual financial transactions over the web.

Setup and Explore our Shopping Cart Application to Learn Redux with TypeScript

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.

Getting started with contributing to open source projects can be very confusing and stressful. This talk will help clear away the confusion and pinpoint why and how you can make your first open source contribution. 



How to Make Your First Open Source Contribution

Get a client ID and Secret from GitHub by registering a new OAuth Application. You can register a new OAuth Application on Github [here](https://github.com/settings/applications/new)

Make sure to keep the secret you generated safe. It's the key to your data.

Get a GitHub client ID and Secret for an OAuth Application

 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

DevOps goals have stayed the same over the year, but our tools, infrastructure, and operating models have changed. To support modern software delivery, organizations must establish and share proven developer workflows.

This talk will cover how existing projects are using GitHub Action to hope that all projects, despite their size, can benefit collectively from knowledge sharing. The benefit of Actions is that the majority are shareable and open source. Plan to leave this talk with ideas on how you can automate new portions of your software development pipeline for production.

GitHub Action Traction

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 completely from scratch by creating a new Next.js project. We then create a GitHub repository and create and configure a GitHub actions workflow file, enabling the proper settings that we'll need to deploy the app to AWS using the Serverless Framework. We then walk through how to enable environment secrets in the GitHub dashboard and set up the serverless.yml file locally. Finally, we push the code to GitHub, deploying our app to AWS automatically by triggering the GitHub action.

How to Set Up Next.js CI / CD on AWS with GitHub Actions

In order for someone to buy your products, your store needs to be publicly available.

Vercel is a hosting and deployment solution that works perfectly with Next.js—they're the ones who made it! We can use Vercel to easily deploy our site from GitHub and automatically update our store any time we add any changes. We'll walk through connecting a git repository to Vercel and see exactly how it deploys new versions with each commit to our repo.

Host & Deploy a Next.js React App on Vercel imported from GitHub

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.

The key is to switch to a new branch before you add your first commit, I choose `main` in this lesson. When I push `main` up to Github as the first branch, it gets set to the default.

Configure a New Github Repo to Use a Different Default Branch

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

In this lesson, we'll walk through adding debug logs to a custom Github Action. We'll use the debug method of the Actions Toolkit Core package to add logs and set the `ACTIONS_STEP_DEBUG` Github Secret to `true` in order to see the logs output in our workflow logs.

* [@actions/core - debug](https://github.com/actions/toolkit/tree/master/packages/core#logging)
* [How to Access Step Debug Logs](https://github.com/actions/toolkit/blob/master/docs/action-debugging.md#how-to-access-step-debug-logs)

Add Debug Logs with the Toolkit Logger to Find and Fix Issues in a Custom Github Action

In this lesson, we'll walk through setting a failed exit code for our custom Github Action. We'll set up restrictions around our existing input value and explicitly set a failed status when trying to use an invalid input.

* [Github - Setting exit codes for actions](https://help.github.com/en/actions/creating-actions/setting-exit-codes-for-actions)
* [@actions/core - Exit codes](https://github.com/actions/toolkit/tree/master/packages/core#exit-codes)

Set an Exit Code on Custom Github Actions to Indicate a Passing or Failing Status

In this lesson, we'll walk through configuring a custom Github Action to provide an output value when the action completes. We'll configure the output in our actions.yml and use the setOutput method from the Github Actions Toolkit core package that will allow us to log that value out in the following step.

* [Github - Metadata syntax for GitHub Actions - Outputs](https://help.github.com/en/actions/creating-actions/metadata-syntax-for-github-actions#outputs)
* [@actions/core - setOutput](https://github.com/actions/toolkit/tree/master/packages/core#inputsoutputs)

Configure Outputs in a Custom Github Action to Use Resulting Data in Other Actions

Vimium's Vomnibar is a "command palette"-like search tool for your open tabs, browser history, and bookmarks. We can search through and jump to any tab open across browser windows. We can also do a generalized search with results that also include browser history and bookmarks which can either be opened in the current tab or a new tab. If you're anything like me, you open tons of tabs and visit hundreds of webpages over the course of a week. The vomnibar puts all of that at your fingertips.

Josh Branchaud

Open Tabs, Browser History, and Bookmarks with the Vomnibar

Vimium's Vomnibar is a "command palette"-like search tool for your open tabs, browser history, and bookmarks.

Another aspect of Vimium's configurability is customizable key mappings. We can add new mappings and override existing ones. If there is a certain Vimium feature you want to make easier to trigger, adjust the key mapping to suit your needs.

Configure Custom Vimium Key Mappings

Another aspect of Vimium's configurability is customizable key mappings. We can add new mappings and override existing ones.

Many aspects of Vimium can be configured in order to bend the tool to your specific needs and use cases. We look at how to configure what sites turn off Vimium, the default search engine, link hint characters, and other basic settings. We also see how both insert mode and searching a visual selection work. Custom keymappings and custom search engines are covered in subsequent lessons.

Configure Basic Aspects of Vimium

Many aspects of Vimium can be configured in order to bend the tool to your specific needs and use cases.

Vimium's "marks" feature lets you mark positions in the current tab and across tabs. These are positional markers that you can jump back to. For instance, as you browse a huge page of documentation or a massive forum discussion, you can leave a series of "dog ears" to sections or conversations that you'll later want to revisit. Each tab supports its own set of lower-case letter marks. Upper-case letter marks are shared across tabs allowing you to seamlessly move between a specific set of tabs regardless of how they are arranged.

Set Marks on a Vimium Webpage You Want to Jump Back To

Vimium's "marks" feature lets you mark positions in the current tab and across tabs. These are positional markers that you can jump back to.

Vimium's `yy` shortcut makes quick work of grabbing the URL for the current page. I find this useful for linking to an article in my notes or sharing a web page with my team in Slack/Discord. We'll get a glimpse at a couple other features like `gi` (for "go to input") and `o` to open the URL on the clipboard.

Grab and Open URLs with Vimium

Vimium's `yy` shortcut makes quick work of grabbing the URL for the current page.

An introduction to "Why Use Vimium" and how to install it in your browser of choice. Though this entire course uses Chrome, Vimium is also available for Edge and Firefox. There is a lot that Vimium can do — on-page navigation, moving between tabs, interacting with links and other page elements, and much more. We'll get into all of that in the following lessons.

Install and Start Using Vimium

An introduction to "Why Use Vimium" and how to install it in your browser of choice

A powerful navigation and interaction feature, and probably my most used Vimium feature, is Link Hints. By hitting `f`, we prompt Vimium to overlay link hints for every visible link, button, and interactive HTML element (e.g. a text area). By typing the keys corresponding to a link hint, we effectively click that link or element. We also look at a few page movement commands like scrolling up (`k`) and down (`j`) as well as jumping to the top of a page (`gg`) and to the bottom (`G`). Putting all of these together, we can get into a fluid and efficient flow for common browser tasks.

Follow Links and Fill Forms with Vimium

A powerful navigation and interaction feature, and probably my most used Vimium feature, is Link Hints.

The Vimium Chrome extension enhances page navigation and searching. By pressing forward slash, users enter find mode to search terms on the page. Additional keys like 'N' and Shift+N help navigate through search results forwards and backwards, respectively. The extension proves especially useful on complex web pages, like Stack Overflow, for quickly locating specific sections like answers or share links without reading through all the content.


Navigate using find with Vimium

With these advanced URL manipulation commands we have a whole new way to think about traversing between locations on a website. This is especially useful for sites like GitHub that use a hierarchical URL structure. Since each layer of the URL is a valid page, we can move up that structure (with `gu`) and edit the current URL (with `ge`) to navigate somewhere else.

Traverse a Site with Advanced URL Manipulation with Vimium

With these advanced URL manipulation commands we have a whole new way to think about traversing between locations on a website.

Losing focus and getting lost while looking for that browser tab from *earlier* is a drag on getting things done. Even minor slow-downs in how you navigate within and between pages can pull you out of your flow. There are so many minor aspects of your browser-based workflows that chip away at your productivity.

Vimium extends how you use the browser with a highly-efficient, keyboard-centric workflow. Vimium leverages powerful concepts from the Vim editor (`j`/`k` for scrolling, `f` for following links, `/` for find, etc.) allowing for faster navigation and interaction without the need to switch to the mouse.

Don't worry, you don't need to know anything about Vim. Anyone who spends a lot of time in the browser and is willing to learn a few shortcuts has a lot to gain from using Vimium.

This course demonstrates the core features of Vimium through practical, real-world use cases. Even if you only adopt a few of the shortcuts, you'll find yourself using the browser in surprising, new, and speedy ways.

GitHub

Search Results

Redux: Refactoring the Reducers

Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Dispatching Actions Asynchronously with Thunks

Redux: Filtering Redux State with React Router Params

Redux: Wrapping dispatch() to Log Actions

Redux: Fetching Data on Route Change

Redux: Dispatching Actions with the Fetched Data

Redux: Supplying the Initial State

Redux: Wrapping dispatch() to Recognize Promises

Redux: Avoiding Race Conditions with Thunks

Redux: Updating Data on the Server

Redux: Normalizing API Responses with normalizr

Redux: Updating the State with the Fetched Data

Redux: Applying Redux Middleware

Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Displaying Error Messages

Redux: Navigating with React Router <Link>

Redux: The Middleware Chain

Redux: Displaying Loading Indicators

Redux: Creating Data on the Server

Redux: Simplifying the Arrow Functions