 Courses from Khaled Garbaya

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

Often times packages will require their own bespoke configuration files apart from NPM installing and configuring in gatsby-config.js or you may want additional files present for doing things like setting global styles. We can handle this by creating files within a Gatsby Recipe.

In this lesson, we will create a handful of Files within a Gatsby Recipe to configure tailwindcss and postcss. We will also see how we can create an example usage of tailwind within gatsby as part of the recipe.

Add Files using a Gatsby Recipe

Gatsby Recipes use MDX files to specify what steps are taken, files are downloaded and plugins installed. 

In this lesson we will set up a `tailwindcss.mdx` file that specifies what tailwind is and installs the package using the `NPMPackage` component through Gatsby Recipe cli.

Create a Custom Gatsbyjs Recipe for Installing NPM Packages

Gatsby Recipes are a new tool of the gatsby-cli which require the latest install of the package. You will need to install the cli with `npm install -g gatsby-cli@latest`

Gatsby Recipes allow you to add common functionality to your Gatsby site with none of the headache of dealing with all the various plugins that would are required.  

In this lesson, you will see how easy it is to install and run `Jest` with an official Gatsby recipe. What used to be a multiple step process (including modifying babel configs) is now a simple install command away.

Setup a Gatsby Project to Use Recipes

In [Create a Custom Gatsbyjs Recipe for Installing NPM Packages](https://egghead.io/lessons/gatsby-install-an-npm-package-using-a-gatsbyjs-recipe?pl=getting-started-with-gatsbyjs-recipes-c79a) you learned how to write a Gatsby Recipe to install an NPM Package. For gatsby plugins and themes, there is a config step as well.

In this lesson we will create a new step within a recipe that will install the `gatsby-plugin-postcss` package and configure it within `gatsby-config.js` using the `GatsbyPlugin` component. NOTE: Options support for [configuring plugins](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#recipe-api) coming soon.

Add a Gatsby Plugin using a Gatsbyjs Recipe

There are 1000s of plugins and themes in the Gatsby eco system, which is amazing but introduces the problem of deciding which to use to accomplish the feature you *actually* want to build. 

Analysis paralysis is real.

Enter: Gatsbyjs Recipes 

Gatsbyjs Recipes are run from the CLI and automate common tasks like creating pages and layouts, installing and setting up plugins, adding a blog to a site, setting up Typescript, and many more.

With the release of this new feature, Gatsby has created 11 official recipes that you can explore including: ThemeUI, Sass, Cypress, animated page transitions, and persistent layout components.

In this collection, you will learn how to:

- Set up Gatsby to use Recipes
- Create a multi-step Recipe
- Install NPM packages
- Configure Gatsby Plugins
- Create Custom files with Recipes

Getting Started with Gatsbyjs recipes

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

Add Tailwindcss to a React project

Load data from an external API using React

Add routes to a react app using reach Router

With Node.js installed, bootstrapping a react app is as simple as executing `create-react-app` with `npx`. No further downloads necessary.

Bootstrap a react app using create-react-app

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

Migrate from Create-React-App to Gatsby - Start Project

Cascading Style Sheets bring order and beauty to our applications.

In CSS, there is no property background-opacity, but you can fake it by inserting a pseudo-element with regular opacity. Using that trick you can create a watermark effect with few lines of CSS.




Make Transparent Background Images Using CSS

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Numbered bookmarks will allow us to select a block of code, bookmark it and easily navigate back to it using the bookmark number.

In this lesson, you will learn how to use the `Numbered Bookmarks` extension to navigate your code faster.

### Keyboard Shortcuts

The default keyboard shortcut for adding a code bookmark is `cmd+shift+#` where `#` is a number from 0 to 9, This might interfere with other system's keyboard shortcuts like taking a screenshot `cmd+shift+4` and `cmd+shift+4`. You can change the default one to `shift+alt+#`.

To navigate bookmarks you can use `cmd+#` where `#` is your bookmark number

Navigate through code faster in VSCode using Numbered Bookmarks

Even if you are not a heavy VIM user and you are a VSCode user using the vim mode in VSCode can be very beneficial and give a productivity boost.

In this lesson, you will learn how to install a vim emulator on VSCode and get to know a few navigations tricks that will help you edit your code faster.


Use VIM mode in VSCode


## What is JAMStack?

JAMstack stands for Javascript API Markup. It’s a modern way of building a web app based on client side technologies that use Javascript, and APIs to extends its functionality like pulling content or authorization. 
And a prebuilt Markup 

For example here I have a Gatsby website that pulls the content from Contentful.

Gatsby is the javascript part because it’s built with javascript it also Provides the M part which is the prebuilt Markup once that is loaded by the user Gatsby will lazily load React and turn my website into a fully fledged React App.

The API part here is Contentful I am using Contentful's API to pull content and render it at build time in my website but since a Gatsby website is a full-blown React App at the end of the day you can call APIs also at runtime like Authentication.

## What is not JAMStack?
A monolithic server-run web app that relies on a server technology like Ruby, python or Nodejs.
What is also not JAMstack is a website that is baked

WTF is JAMstack

In this lesson, you will learn how to render Contentful Rich text in your Gatsby website as well as customizing styling for every node types like Heading and embedded assets.

## What is Contentful rich text?

Rich text is a new JSON format for handling complex content structures in a strongly typed manner. It is represented by the rich text field in Contentful.

## Rendering The rich text

Contentful offers many tools to help you work with our [Rich Text](https://www.contentful.com/developers/docs/concepts/rich-text/) feature. This guide is meant to help put the pieces together and provide resources for learning more. It focuses majorly on Contentful’s [SDK](https://github.com/contentful/contentful.js) , [rich-text-html-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-html-renderer) , and [rich-text-react-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer) to render your Rich Text fields with HTML.




Render Contentful rich text in Gatsby

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 lesson, you will learn how to define the content blueprints for your project.

Contentful organizes content into spaces, that allows you to group all the related resources for a project together, this includes content entries, media assets, and settings for localizing content into different languages.

Each space contains 1 or more content types that define the structure of your content.

Each content type can have up to 50 fields that you define this is called [content modeling](https://www.contentful.com/developers/docs/concepts/data-model/).

Model Content in the Contentful Web App

In this lesson, you will learn how to model content programmatically using the contentful-migration tool.

Content modeling is hard and nobody can get it right the first time. You have to model your content at a time where you have the least (real) experience, at the start of your project. Your choices will haunt you for the rest of your product lifecycle in the case of the incumbents - with Contentful migration tool you could potentially start anywhere with your content model, then refine it as you learn what you truly need.

## Prerequisite

You need to have the `contentful-cli` installed

```
npm install -g contentful-cli
```
and then login 

```
contentful login
```
 and follow the steps to get you setup

Model Content programmatically using the contentful-migration tool 

In this lesson, you will learn how to set up your Gatsby project to use Contentful as a data source using the `gatsby-source-contentful` plugin.

Add Contentful as a data source for Gatsby

In this lesson, you will learn how to get a list of entries from Contentful and render it in a Gatsby website

List data entries from Contentful in Gatsby

In this lesson, you will learn how to create pages dynamically in Gatsby based on data coming from Contentful

Programmatically create Gatsby pages from Contentful data

In this lesson, you will learn how to use the Graphql backreferences created by Gatsby to get more data from a parent content type.

In this example, we have a lesson that references an instructor but the instructor content type does not have any data about the lessons that are assigned to it. Usually, you would create a reference back in the instructor content type to the lesson but this can cause a circular reference that's hard to maintain. 
Fortunately in the Gatsby data layer, GraphQL, we can query the parent node to get its data from its child. That's called backreference. 

Use Graphql backreference to avoid circular dependencies between Content model

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


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


Using Cursor Chat, you can easily reference an entire directory of files and ask it to generate anything based on those files. This opens up the possibility of using your current code as a reference guide to create new code that follows existing patterns. With this approach, the result can be a polished prompt you can use with any AI to generate consistent and reliable output.

Focus less on crafting the perfect prompt upfront - what matters most is testing and iterating based on the AI's responses. The more results you see from the prompt, the more you can reinforce the good results and prune out the bad results until your prompt is polished enough that you can rely on the prompt to give you consistent quality results.


Khaled Garbaya

Search Results