 Courses from Kyle Gill

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

Animate a React component's position with the animate prop from Framer Motion

Learn how to apply keyframe animations to React components with Framer Motion by passing an array of values to the animate prop.

The time for each keyframe can be configured with the times prop, and even more options can be set if you don't like the default transitions applied by the library.

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

Animate a React component using an array of keyframes from Framer Motion

Learn how to create common button animations by applying gesture recognizers like `whileTap`, `whileHover`, and `onDrag`. Framer Motion offers flexibility in how animations are pieced together but offers sensible defaults for the transitions it applies without you having to mess with transition easing methods.

These props extend React's event listeners to apply powerful gesture detection for animations on components and can be strung together or used for more simple use cases.

Check out the [official docs]([https://www.framer.com/api/motion/gestures/](https://www.framer.com/api/motion/gestures/)) for more information on them.

Animate buttons using gesture controls like whileTap and onDrag from Framer Motion

Learn how to animate components with the transition prop to reverse animations, loop them, adjusting their easing, and more, which are all great for creating loading animations.

The transition prop is a powerful part of Framer Motion that defines "how values animate from one state to another".

Check out the [official docs](https://www.framer.com/api/motion/types/#transition) for more information on how to customize attributes of the transition prop.

Create loading animations with Framer Motion's transition prop

Learn how to animate components based off of React state. Imperatively triggering an animation is a common use case, and one that is easily facilitated with state and Framer's animation APIs. 

You can use it to cycle a component through specific states like rotating or changing the position of an element.

Check out the [official docs](https://www.framer.com/api/motion/utilities/#usecycle) for more information about the `useCycle` hook for toggling between multiple states.


Trigger state-based React animations using Framer Motion

Learn how to orchestrate animations between parent and child components with variants. Variants allow you to set different states, *almost like keyframes of motion elements*.

By passing a new variant name to the element, it will automatically animate to the configuration of the animation that corresponds.  

Check out the [official docs]([https://www.framer.com/api/motion/types/#transition) for more information on how to customize orchestration between animations.

Link complex animations together with variants from Framer Motion

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)

Kyle Gill

Search Results