 Resources from Khaled Garbaya in 2024

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

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

Getting Started with Gatsbyjs recipes

The JAMstack, short for “JavaScript, APIs, and Markup,” has been making waves in the world of web development. 

Building JAMstack applications removes the hassle of building out a backend from scratch, freeing you to focus on what really matters: your content.

In this course, you’ll learn how to build and deploy your own static Gatsby site that pulls external data from Contentful and then deploys to the web with Netlify. After the course, you’ll have all the knowledge you need to build a blog, marketing site, or portfolio with Gatsby. Just add content.


Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/build-content-rich-progressive-web-apps-with-gatsby-and-contentful-notes).

Build Content Rich Progressive Web Apps with Gatsby and Contentful

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

tailwind

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

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Sometimes you might want to transform arguments before they reach the command handler. For example, perhaps you want to validate that credentials have been provided and otherwise load credentials from a file.

Middleware is simply a stack of functions, each of which is passed the current parsed arguments, which it can in turn update by adding values, removing values, or overwriting values.


Reduce Boilerplate with yargs middleware in a Node.js Command Line Tool

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

In this lesson, you will learn how to create a react app and fetch and render some data stored in Contentful content infrastructure

Load Data from Contentful in React

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.

angular

In this lesson, you will learn how to fetch and render data stored in Contentful content infrastructure in an Angular app

Load Data from Contentful in Angular


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

Sometimes you are one or two lines short from finding the cause of the error in the stack trace but you can't because Nodejs displays only a handful of lines.
In this lesson, you will learn how to increase the stack trace limit to show more lines

Show More Lines in a Node.js Error Stack Trace

A Javascript Proxy object is a very interesting es6 feature, that allows you to determine behaviors whenever a property is accessed in a target object. In this lesson, you will learn how to use it to prevent users from accessing specific properties in your objects

Intercept property access with Javascript Proxy


## 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 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 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

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

In this lesson, you will learn how to push your website code to Github and Build and deploy it using Netlify

Deploy a Gatsby website on Netlify

An all-in-one workflow that combines global deployment, continuous integration, and automatic HTTPS.

netlify

Netlify will automatically build your Gatsby website whenever you push new code to your repository but what about content changes in Contentful. In this lesson, you will learn how to use Contentful webhook feature to trigger a Netlify build whenever you publish or delete new content on Contentful

Trigger Netlify Builds when content changes in Contentful

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

vscode

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

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

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.




Topics

Instructors

Content Type

Khaled Garbaya