 Resources from Kyle Gill in 2024

A short list of screencasts to cover essentials of [Gatsby](https://www.gatsbyjs.org/) to get started and have enough knowledge to become dangerous. 

The content comes from multiple instructors that have each covered different essentials, this cherry picks some of the most important concepts.

Videos in this collection cover these topics:
- installing plugins
- creating pages
- navigating between pages
- adding optimized images
- theming your styles
- deploying your site

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

Up and Running with Gatsby

Learn how to add optimized images to your Gatsby site with the `gatsby-image` plugin.

These videos dive into:

- installing and configuring plugin options
- sourcing images to be queried via GraphQL
- displaying traced-svg or "blurred-up" images
- different image types supported by `gatsby-image`
- as well as alternatives for using images in Gatsby

Image Loading and Optimization in Gatsby with gatsby-image

These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique. 

Some of those concepts include:
- the Mix build tool
- project structure
- collections of functions written in modules
- function *arity*
- pattern matching and common uses for it
- the pipe operator

Elixir is a dynamic, functional language designed for building scalable and maintainable applications.

Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

elixir

Getting Started with Elixir

Framer Motion is a production-ready animation and gesture library. With it you can create beautifully smooth animations with minimal effort, or compose together elaborate sequences of animations with low level APIs. 

These videos showcase some of Framer Motion's key features and how to get started implementing them.

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

Animating React Components with Framer Motion

In this lesson, learn how to quickly add documentation pages to a Gatsby site with Docz's Gatsby theme.

## Related Links

- [Docz's docs on its Gatsby theme](https://www.docz.site/docs/gatsby-theme)
- [Gatsby theme docs](https://www.gatsbyjs.org/docs/themes/)

Add documentation to a Gatsby site with the Docz Gatsby theme

Learn how to import an image into a component using webpack (don't worry, you won't be in any config files), the simplest recommended approach to adding a single image.

- [Gatsby documentation](https://www.gatsbyjs.org/docs/recipes/#import-an-image-into-a-component-with-webpack)


Import a Local Image into a Gatsby Component with webpack

Learn how to import static assets into components in alternative scenarios when it might be necessary, like if you couldn't use webpack.

[Assets added to the static folder won't leverage Gatsby's performance optimizations](https://www.gatsbyjs.org/docs/static-folder/#downsides) so this isn't a recommended approach, and should be used as an escape hatch.

- [Gatsby documentation on adding an image from the static folder](https://www.gatsbyjs.org/docs/recipes/#reference-an-image-from-the-static-folder)

Use a local image from the static folder in a Gatsby component

Learn how to install and setup gatsby-image plugins to source local images from the filesystem so you can query them with GraphQL, and then use them in your site.

- [Using gatsby-image with your site](https://www.gatsbyjs.org/tutorial/gatsby-image-tutorial/) 
- [gatsby-image documentation](https://www.gatsbyjs.org/packages/gatsby-image)

Install gatsby-image and source local images from the filesystem

Learn how to use image from the filesystem at a relative path with the gatsby-image plugin.

- [Written recipe for this video](https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-local-images-with-gatsby-image)
- [Gatsby documentation](https://www.gatsbyjs.org/docs/using-gatsby-image/)

Use gatsby-image with an image from a relative path

Learn how to simplify the fields you include in your queries for image data by using GraphQL fragments. With this powerful abstraction, changing the fragment will change the behavior of your image, loading it as a minified blurred file or traced svg before loading the full size image when the rest of the content loads.

- [List of built in fragments](https://www.gatsbyjs.org/docs/gatsby-image/#image-query-fragments)
- [Using GraphQL fragments in Gatsby](https://www.gatsbyjs.org/docs/using-fragments/)

Use gatsby-image's GraphQL fragments for blurred-up and traced SVG images

Learn how to query multiple local images so they can easily be displayed on a Gatsby site side-by-side.

- [Written steps](https://www.gatsbyjs.org/docs/recipes/#optimizing-and-querying-local-images-with-gatsby-image) related to this video
- [Working with images in Gatsby](https://www.gatsbyjs.org/docs/working-with-images/)

Add multiple images from a directory with gatsby-image

Learn how to add a shortcut for templates of commonly reused sections of code like new files, functions, or loops.

Create a Shortcut for a New React File with Custom VSCode Snippets

Learn how to extend a Gatsby site with an official or community authored plugin. Plugins are an important building block in the Gatsby ecosystem that allow you to leverage repeated Gatsby functionality across multiple Gatsby sites.

Plugins hook into the Gatsby lifecycle as sites build and allow you to source data from external APIs or CMSs, transform data, optimize images, and much more.

Learn more:

- Find more plugins in the [Gatsby plugin library](https://www.gatsbyjs.org/plugins/)
- [Official docs on plugins](https://www.gatsbyjs.org/docs/plugins/)

Install and use a plugin in a Gatsby site

Bootstrap a new Elixir project using Mix (a build tool included when you install Elixir), with its built in project generation.

Additional resources:
- [Official introduction to Mix](https://elixir-lang.org/getting-started/mix-otp/introduction-to-mix.html#our-first-project)

Generate a new Elixir project using Mix

Elixir code is organized into groups of functions called modules. You can create your own modules and built on top of predefined modules that are a part of Elixir by default.

Additional resources: 
- [Getting started with Modules and function from Elixir docs](https://elixir-lang.org/getting-started/modules-and-functions.html)

Write a New Function Inside of an Elixir Module

The syntax to pass arguments into functions is akin to many other languages. Elixir functions are uniquely recognized when running based off of the number of arguments passed in (a term called *arity*). This means you can define functions with the same name, so long as a different number of arguments is passed in.

Arity is a key concept to be aware of when reading documentation and writing your own code.

Additional resources:
- [Information about arity](https://elixir-lang.org/getting-started/modules-and-functions.html#function-capturing)
- [Default arguments in functions](https://elixir-lang.org/getting-started/modules-and-functions.html#default-arguments)

Pass arguments into Elixir functions and understand arity

Get setup to write a Gatsby plugin using the official plugin starter. Run the `gatsby new` command and connect the plugin to a site to test with.

The plugin starter includes a message that will be logged to the console of your site when it is hooked up correctly, helping you verify that your plugin is being loaded.

Additional resources:

- [Gatsby Starter Plugin repository](https://github.com/gatsbyjs/gatsby-starter-plugin)
- Written recipe for [creating a new plugin using the plugin starter](https://www.gatsbyjs.org/docs/recipes/working-with-plugins/#creating-a-new-plugin-using-a-plugin-starter)
- Guide for [loading plugins in a Gatsby site for local development](https://www.gatsbyjs.org/docs/creating-a-local-plugin/#developing-a-local-plugin-that-is-outside-your-project)

Get started writing a Gatsby plugin using the plugin starter

Elixir uses `=` as an operator, but rather than assigning values to variables with it, it *matches* values on the right hand side of the `=` with the left side. This can be used in simple values, more complex data structures, and powerful condition checking.

Put into simpler terms, pattern matching is Elixir's way of assigning variables.

Additional resources:
- [Elixir docs on pattern matching](https://elixir-lang.org/getting-started/pattern-matching.html)

Pattern match values in Elixir

Some common uses for pattern matching in Elixir include checking conditions and passing parameters into functions. It's useful for pulling out only specific variables from collections of data.

Additional resources:
- [Elixir docs on pattern matching](https://elixir-lang.org/getting-started/pattern-matching.html)

Pattern match in conditions and function parameters in Elixir

Bite-size video tutorials for badass web developers.

egghead

You can automatically add a GraphQL API to any WordPress site by installing the free, open-source WPGraphQL plugin into WordPress. The plugin adds a GraphiQL with an explorer for interactively building out your own queries of data, or mutations to update data. In many ways, it's easier to reason with and understand than the WordPress REST API because of the built in autocompletion and documentation that comes with GraphQL.

By installing the plugin in a default WordPress site (which this lesson demonstrates), you get queries and mutations already set up for all the native WordPress data types.

## Additional resources

- [WPGraphQL home page](https://www.wpgraphql.com/)
- [WPGraphQL vs. WP REST API](https://www.wpgraphql.com/docs/wpgraphql-vs-wp-rest-api/)

Convert your WordPress REST API into a GraphQL API by installing the WPGraphQL plugin

Learn how to apply simple animations with default transitions generated by Framer Motion to any React component.

The animate prop can animate location, scale, and a host of other attributes, and the transition prop can override the generated defaults.

- [Official docs](https://www.framer.com/api/motion/examples/#animation)

Topics

Instructors

Content Type

Kyle Gill