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.

Learn Git

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

This project is a Next.js example of Kent C Dodd's Frontend Masters Advanced Remix Workshop project.

The aim of this project and course is to take a large project using the traditional Next.js pages architecture and migrate the full project to use the new app directory architecture.

We will fork project repo and clone it to get setup with the project locally. 

Fork and Clone the Next.js 13 Project to Get Started

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

It always happens again. We have some weird bug in our codebase, hard to debug and just looking at the Git history doesn't help much. Git has a powerful command to help us: `git bisect`.

We have to simply identify a commit where the bug was not present, and the bad commit (usually the latest of the `master` or `main` branch). Then we invoke `git bisect` with both of them. The rest is just following along and answering questions. Let's see how that works.

Find that bad commit that broke your App with Git Bisect

You can create diffs in markdown to show what has changed in a code snippet. I use this in blog posts to highlight changed lines for readers. This works for code snippets in most markdown packages and on Dev.to.

To show a line of code changing in a function, you can do this:

```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```

First, instead of specifying the programming language, use diff after the backticks. Then at the beginning of any lines of code you want to show as removed, add a -. At the beginning of any lines of code you want to show as added, add a +.

The code would look like this:

````
```diff
function addTwoNumbers (num1, num2) {
-  return 1 + 2
+  return num1 + num2
}
```
````

Create a Diff in Markdown to Show What Has Changed in a Code Snippet

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

express

In this lesson, we will use Auth0 to generate a JWT that we can use to validate future requests to our server.

We will then return that token and test that it works when authenicated by our middleware.

During the lesson, we'll also briefly look at a strategy to keep your credentials out of source control using a .gitignore file. 

Get a JWT From Auth0 in Express to Be Used in Authentication

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

Using the [GitHub CLI](https://github.com/cli/cli) and a shell script, we will automate the process of monitoring pull requests in repositories we maintain. Specifically, open PRs we have created and those awaiting our review.

Monitor Pull Requests with the GitHub CLI

We scaffold out a new GitHub repo to deploy netlify functions and a small index.html file, while covering Makefile basics and netlify.toml. The lesson ends with a working Netlify site.

Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml

`git` is an interesting tool for a developer - it's definitely the most widespread version control solution and even after using it for **years**, there's always something new to learn.

In this lesson we're going to learn a quick trick - how to use `-sb` flag in order to modify the `git status` command so it returns a shorter, more succinct info about the state of our changes. 

We're also going to learn how to create an alias for `git status -sb` command so we won't have to type more in order to get a shorter output.

Use -sb flag to get a shorter git status output without unnecessary noise

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

We initialize a new Gatsby project while covering a few of the tripping points such as ignoring .cache and public using a .gitignore file.

Initialize a new Gatsby project with a gitignore in yarn workspaces

hub is a command-line tool that makes git easier to use with GitHub. In this lesson we cover a couple of the commands in a real-world scenario at the start of a project.

Initializing a new git repo with Github's hub CLI

If you want to pull over just a single commit from one branch onto another, you can do that with `git cherry-pick [HASH-TO-MOVE]`

We'll demonstrate that by making a commit on a feature branch, and then copying that commit (but not the entire branch) onto master.

Copy a Commit from One Branch to Another

To poke around in old code, we can checkout the hash of an old commit with `git checkout [HASH]` - but then we'll be in a "detached HEAD" state.

Detached HEAD just means that HEAD is not pointing to a branch.  That's problematic if we want to save the work that we do in that state - so we first have to make a new branch where we are with `git checkout -b my-new-branch`

Then, any changes we make can be committed to that new branched and saved.

Explore Old Commits with a Detached HEAD, and then Recover

We've made a pull request and now we can clean up the branches by deleting the feature branch.

Branches are just pointers to commits - so we can safely delete branches without losing the underlying commits (once the commits are merged back into master).

So we'll use the github interface to delete the branch remotely, and to delete it locally we'll use `git remote prune origin --dry-run` and then `git remote prune origin`

That will tell us that the remote is gone, and we can finally clean up the feature branch with: `git branch -d feature-branch`

Cleanup and Delete Branches After a Pull Request

We'll go back into our history with

`git log --oneline`

and then we can pick a previous commit and change its commit message with an interactive rebase.  (Note: you shouldn't try to do this on commits that have already been pushed - only commits you still have locally)

To start the interactive rebase, we'll use:

`git rebase -i HEAD~3`

and then change `pick` to `reword`.  Then we can reword the commit message and the commit will be rewritten for us.

Change the Commit Message of a Previous Commit with Interactive Rebase

We're going to pick a previous commit and enter an interactive rebase with:

`git rebase -i HEAD~2`

and change the word `pick` to `edit` on the commit where we want to add a file.

Then during the interactive rebase, we can add the file, and amend the commit we stopped on with:

`git commit --amend --no-edit`

and then once we're happy, continue the rebase with:

`git rebase --continue`

Add a File to a Previous Commit with Interactive Rebase

We have created 3 commits that we want to squash together before we push them to github.  We can enter an interactive rebase with:

`git rebase -i HEAD~3`

and then change `pick` to `squash` for the last two commits (we want to squash "down" into the first one).

Then we'll be given the chance to make the commit message for that commit, and once we save the message we'll be left with just a single commit that contains the changes from all three commits.

Squash Commits Before they are Pushed with Interactive Rebase

We'll make a new feature branch with:

`git checkout -b new-branch`

and then when we make changes and commit them, we can try to push that branch with:

`git push`

However, in order to get the branch to exist on github as well, we need to set the upstream of the local branch at the same time with:

`git push --set-upstream origin new-branch`

Push a New Branch to github that Doesn't Exist Remotely Yet

If you've added files to the staging area (the Index) accidentally - you can remove them using `git reset`.

We'll first add a file to staging, but then back it out with:

`git reset HEAD filename`

in order to pull it back to the working directory, so it doesn't end up in a commit when we don't want it to.

Remove Files from Staging Before Committing

We'll do some work and commit it - but then realize it was on the wrong branch!

To move a commit from one branch to another, we'll first `git cherry-pick` the commit we want, and then use `git reset` to remove the commit from the master branch.  

Then we'll be able to manually delete the changes that we don't want on the master branch.

Move a Commit that was Committed on the Wrong Branch

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

git

Search Results