Learn how Kent started working with egghead.

Kent's Instructor Journey

Open source is an excellent way to level up your skills as a developer. You don't need to be an expert to start contributing to open source. Learn how Kent recommends starting in open source.

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this course, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Kent C. Dodds

How to Contribute to an Open Source Project on GitHub

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

How to Write an Open Source JavaScript Library

What open source project should I contribute to?

Becoming an Open Source Project Maintainer

Get into Open Source

This course is for React newbies and anyone looking to build a solid foundation. It’s designed to teach you everything you need to start building web apps in React right away.

The Beginner's Guide to React

Learn Hooks by taking a modern React codebase that uses classes and refactor the entire thing to use function components as much as possible.

Simplify React Apps with React Hooks

Use Suspense to Simplify Your Async UI

Launching Epic React

Kent C. Dodds chats with developers about life, career, and code.

Chats with Kent

Kent C. Dodds Landing Page

 Resources from Kent C. Dodds in 2022

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

It’s not feasible to create a new route file for every single blog post we want to publish! Instead we can use the `$slug.tsx` filename convention with the dollar sign prefix to create a **dynamic segment**. Whatever you name the file is what the param will be called in your component. 

Then there are a couple steps to take to get posts from your db based on the url param. First you’ll write a `getPost` method in your `post.server.ts` file that finds a unique post based on the slug. Then write a loader function that calls your `getPost` method and returns JSON with your post.

Create a Dynamic Segment in Remix

You don’t have to worry about over-fetching when using Prisma. Just use the `.findMany` method from Prisma and pass it an object with a `select` property. In the `select` you can choose exactly what properties that you want off of objects fetched from the database. 

We’ll continue following the .server file pattern we established in an earlier lesson and create an async function in `post.server.ts` that fetches posts with only their slugs and titles. We can then use this function in our components.

Avoid Over-Fetching in Prisma by Using findMany

Let’s move away from hardcoded JSON and use our own database. In this course, we’ll be using Prisma as our database but Remix *doesn’t actually care* about what database you’re using!

To model Posts in our Prisma database we can edit the `schema.prisma` file under the prisma directory. Changes can be pushed to the db by running `npx prism db push` in your terminal. 

We’ll also be seeding the database with data using a seed file in this lesson. Data in your seed file can be pushed running `npx prisma db seed`. Once you have data it can be accessed directly in your components!

Model Data in the Prisma Schema for a Remix App

We can take advantage of TypeScript by setting our `loader` function to the `LoaderFunction` type from `@remix-run/node`

Then we can ensure that our loader is returning the type that we want by creating a custom type called `LoaderData` with a property of `posts`. 

We’ll also do a cool trick where we get the awaited return type of our `getPosts` async function. This is done like this `posts: Awaited<ReturnType<typeof getPosts>>`

Integrate TypeScript Into a Remix Loader Function

While you technically can have server functions in your route files, it’s not always the best choice. 

For code that you **never ever** want in your client, it’s a best practice to move them into separate files, and name with the `.server` convention. For example: `posts.server.ts`

Remix Server Code Filename Convention

The routes in your Remix app are based on the file structure within your `routes` folder. You can create a new route by making a new folder under `routes` and creating an `index.tsx` inside of it. 

Then in the index file you can make a new default export that returns a React component. Once that is saved, whatever you have in your component will render to the page.

Create a Dynamic Segment in Remix

Avoid Over-Fetching in Prisma by Using findMany

Model Data in the Prisma Schema for a Remix App

Integrate TypeScript Into a Remix Loader Function

Remix Server Code Filename Convention

Create Your First Remix Route