 Resources from Joe Previte in 2024

GitHub is one of the most popular places for a developer to store their code. There are a lot of benefits that come with using GitHub such as easy collaboration on code with other programmers and developers and version control for your repositories. 

These help you to have a productive workflow but there are a lot more tools that are built into GitHub that you might not know about!

Dive into the weeds with Joe Previte as he provides for you some helpful tips and tricks you’ll need to run a productive repository with your team. 

He teaches you how to setup PR Templates to make sure your team doesn’t leave out vital information. You’ll learn about auto-assigning reviewers to your PR’s so that they don’t get missed. You’ll even get to learn a little about the GitHub CLI!

Joe teaches you how to:

- Creating issue templates
- Automatically delete branches after merging PR’s
- Open repositories in your browser using the GitHub CLI

... And more! 

So take your productivity up a notch when using GitHub and take Joe’s course today!

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

GitHub Tips & Tricks

React 16.8 introduced Hooks like `useState` for using stateful logic in our function components, and `useEffect` for side effects previously only used in class-based components.

The React Team has given developers a way that simplifies using core features, but what's that mean for the code that you write?

In this self-paced workshop, you'll work through refactoring a component to use a custom hook, and learn to apply the patterns used by the React team to your own code.

Follow the React Team's lead, and make your code more readable, reusable, and reasonable!

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

Shareable Custom Hooks in React

Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices. In this course, we will explore the fundamentals of Figma’s toolset that you can use for various design functions. 

We will start from scratch, then walk through scenarios you may encounter when designing a website or application. We will cover building reusable designs — known as “components” in Figma — all the way up to prototyping your designs to show screen transitions and animations between state. 

By the end of the course, you will understand the basics of Figma so you can use it to your advantage when building your next app or website.

Design, prototype, and gather feedback all in one place with Figma.

figma

The Beginner's Guide to Figma

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

In this lesson, you will learn to create a CSS mixin using styled-components. We will create a drop shadow mixin and use it on two styled-components. 

Create a CSS mixin in React using styled-components

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

In this lesson, you will learn how to send a text message in Node.js with Twilio's API. We will utilize Twilio's SMS API which allows us to send SMS to any number using an authorization token and a Twilio phone number.

Send a Text Message in Node.js with Twilio

In this lesson, you will learn how to extend styles from one styled-component to another in a React app. This is helpful when you have two styled-components that are similar but differ in one or more CSs properties.

Extend styles with styled-components in React

In this lesson, you will learn how to look up a phone number in Node.js with Twilio's. We will utilize Twilio's Lookup API which allows lookup and verify any number.

Look Up a Phone Number in Node.js with Twilio 

In this video, you will learn how to create frames (i.e. layouts) in Figma using the "frame" tool. This will allow you to get up and running quickly using pre-defined sizes.

Create a Mobile, Tablet and Desktop Frame in Figma

In this lesson, you will learn how to build a component in Figma, which is the equivalent to a "symbol" in Sketch. It's essentially a reusable piece of design. This will allow you to work more efficiently when designing your app.

Build Reusable Designs with Figma Components

In this lesson, you will learn how to use Figma's ellipse and pen tool to draw a simple clock icon. This will show you how to create vector-based graphics for your websites and apps.

Create a Simple Icon with Figma Ellipse and Pen Tool

In this lesson, you will learn how to add a reusable Figma component to multiple frames in your project. 

Add a Reusable Figma Component to Multiple Frames

In this lesson, you will learn how to duplicate grouped vectors to create a patterned logo in Figma. 

Duplicate Grouped Vectors to Create a Patterned Logo in Figma

In this video, you will learn how to establish your typography system for your project using Text Styles in Figma.

Establish a Typography System in Figma with Text Styles

In this video, you will learn how to create Color Styles, or a color palette so that you can reuse colors across various frames in your project in Figma.  

Create Figma Color Styles to Reuse Across Frames 

In this video, you will learn how to reuse Effects such as a drop shadow using Effect Styles in Figma. 

Reuse a Drop Shadow in Figma with Effect Styles

In this lesson, you will learn how to use Figma's prototyping feature to simulate a screen transition. This is a great feature to demo how users will interact with your app.

Prototype a Screen Transition in Figma

In this lesson, you will learn how to export frames in Figma to share with others. You will also learn how to share links so others can see your design happening in real-time.

Export and Share Figma Frames

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 use [default parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters) within functions. This will allow you to use default values in the event your functions are called without any arguments. 

Use Default Parameters with Functions

In this lesson, you will learn how to embed expressions within strings using [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). 

Use Template Literals to Embed Expressions in Strings

In this video, you'll learn how to Node.js on your computer using [nvm](https://github.com/nvm-sh/nvm) (also known as Node Version Manager). Using `nvm` allows you to easily upgrade or switch between versions of Node straight from the command line.

Topics

Instructors

Content Type

Joe Previte