Multiplayer Snake Game | JavaScript & Socket.io @TraversyMedia

Traversy Media In this video we will create a multiplayer snake game using socket.io

Hungry Turtle Code YouTube Channel:
https://www.youtube.com/channel/UC7Vxnf06GP6w42Lg3TQLXSw

Code:
https://github.com/HungryTurtleCode/multiplayerSnake

Timestamps:
0:07 - Adrian's Intro
1:05 - Setting up HTML
2:25 - Setting up the canvas
7:00 - Painting the snake
12:24 - Setting up the socketio server
14:15 - Connecting to socketio from frontend
18:10 - Moving game state to the server
19:58 - Adding a game loop
32:31 - Debugging game loop issue
33:45 - Controlling the snake
39:05 - WORKING SNAKE GAME!!
40:50 - Home screen for multiplayer game
45:12 - Handling new game on the server
53:30 - Adding ability for second player to join the game
1:01:30 - Handling join game error states
1:03:44 - Modify game mechanics for two players
1:11:48 - Testing the game
1:12:35 - Debugging errors
1:15:15 - Working multiplayer game
1:15:21 - Outro

updated 3 years ago

Multiplayer Snake Game | JavaScript & Socket.io

Traversy Media 2020-09-09 | In this video we will create a multiplayer snake game using socket.io

Hungry Turtle Code YouTube Channel:
https://www.youtube.com/channel/UC7Vxnf06GP6w42Lg3TQLXSw

Code:
https://github.com/HungryTurtleCode/multiplayerSnake

Timestamps:
0:07 - Adrian's Intro
1:05 - Setting up HTML
2:25 - Setting up the canvas
7:00 - Painting the snake
12:24 - Setting up the socketio server
14:15 - Connecting to socketio from frontend
18:10 - Moving game state to the server
19:58 - Adding a game loop
32:31 - Debugging game loop issue
33:45 - Controlling the snake
39:05 - WORKING SNAKE GAME!!
40:50 - Home screen for multiplayer game
45:12 - Handling new game on the server
53:30 - Adding ability for second player to join the game
1:01:30 - Handling join game error states
1:03:44 - Modify game mechanics for two players
1:11:48 - Testing the game
1:12:35 - Debugging errors
1:15:15 - Working multiplayer game
1:15:21 - Outro

Node.js Crash Course 2024

Traversy Media 2024-04-23 | This is an intro to Node.js. No frameworks or libraries. We will look at a bunch of the core modules including building a server with the http module.

Code:
https://github.com/bradtraversy/nodejs-crash-2024

Node.js API Masterclass:
https://www.traversymedia.com/node-js-api-masterclass

Timestamps:
0:00 - Intro & Slides
12:18 - Installation
13:22 - Node REPL
15:05 - Setup & package.json Init
16:51 - Running JavaScript Files
19:36 - CommonJS Modules
23:13 - ES Modules
27:20 - HTTP Module & Create Server
35:06 - NPM Scripts
36:15 - NPM Modules & Nodemon
38:45 - .gitignore File
41:06 - Environment Variables & .env
44:00 - Req Object
46:10 - Marking Requests From Postman
47:28 - Simple Routing
51:52 - Loading Files
59:45 - Building a Simple API
1:10:27 - Middleware
1:13:24 - Cleanup (Middleware & Handlers)
1:19:08 - Get Req Body For POST
1:24:20 - File System Module
1:33:43 - Path Module
1:39:50 - OS Module
1:42:13 - URL Module
1:47:46 - Crypto Module
1:54:08 - Emitting Events
1:59:04 - Process Object

20 Browser Extensions For Web Design & Development

Traversy Media 2024-04-11 | Let's take a look at some browser extensions for web designers and developers. This includes Chrome extensions and Firefox Addons that help with design, testing, debugging, productivity and more.

Full Article With Links:
https://www.traversymedia.com/blog/20-browser-extensions

Timestamps:
0:00 - Intro
2:10 - ColorZilla
2:53 - WhatFont
3:22 - Wappalyzer
4:13 - Web Developer
5:24 - Dark Reader
5:52 - JSON Formatter
6:21 - Session Buddy
6:52 - Fake Filler
7:25 - Quick Source Viewer
7:51 - CSS Viewer
8:27 - User Agent Switcher
8:58 - Visbug
9:39 - Daily.Dev
10:12 - LT Debug
11:10 - Check My Links
11:32 - Web Developer Checklist
12:01 - Click Up
12:23 - Checkbot
13:00 - IE Tab
13:40 - Lorem Ipsum Generator
14:06 - Outro

Microservices Crash Course & Moleculer JS Intro

Traversy Media 2024-04-02 | An introduction to the microservices architecture and the Node.js Moleculer framework.

Course Code:
https://github.com/bradtraversy/microservices-example

Moleculer Framework:
https://moleculer.services/

Check out my courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:
00:00 - Intro
1:11 - Monolithic Architecture
3:07 - Microservices Architecture
6:31 - API Gateway
8:32 - Service Oriented Architecture (SOA)
10:51 - Pros & Cons
13:28 - Moleculer JS Intro
15:57 - Moleculer Setup
16:42 - Your First Microservice
21:24 - User Service
29:30 - Email Service
33:54 - Auth Service

React Crash Course 2024

Traversy Media 2024-03-18 | Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.

Code:
https://github.com/bradtraversy/react-crash-2024

React Front To Back Full Course:
https://www.traversymedia.com/Modern-React-Front-To-Back-Course

Check out all my courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro
1:55 - What Is React? (Slide)
3:43 - Why React? (Slide)
7:19 - What Are Components? (Slide)
8:21 - What Is State? (Slide)
10:00 - What Are Hooks? (Slide)
11:17 - What Is JSX? (Slide)
12:42 - SPA, SSR, SSG (Slide)
15:38 - Vite (Slide)
16:30 - Project Demo
19:53 - Setup React With Vite
22:29 - File Explanation
25:11 - Boilerplate Cleanup
26:48 - Tailwind CSS Setup
30:24 - JSX Crash Course
39:37 - Start Homepage
42:00 - Navbar Component
43:56 - Image Import
45:24 - Hero Component
46:17 - Props
48:00 - Default Props
48:51 - Wrapper Components
55:14 - JobListings Component
58:50 - Create Lists With map()
1:03:20 - Single JobListing Component
1:05:49 - Limit Jobs to 3
1:07:50 - useState() Hook & Desc Toggle
1:13:07 - Creating an Event
1:14:20 - Updating Component State
1:16:00 - React Icons Package
1:18:00 - React Router Setup
1:20:21 - Create Routes From Elements
1:21:36 - Router Provider
1:22:36 - Homepage Component/Route
1:24:40 - Layouts
1:29:06 - Jobs Page Component/Route
1:30:50 - Link Component
1:34:20 - Custom 404 Page
1:36:55 - Active Links With NavLink
1:41:00 - Conditional Rendering
1:43:10 - JSON Server Setup
1:47:00 - useEffect() & Data Fetching
1:53:07 - Loading Spinner
1:51:06 - Conditional Fetching
1:59:45 - Proxying
2:03:38 - Single Job Page
2:09:04 - useParams() to Get ID
2:12:25 - Data Loaders
2:16:36 - Single Job Output
2:22:00 - Add Job Page
2:23:40 - Working With Forms
2:30:05 - Form Submission
2:35:27 - Pass Function as Prop
2:39:32 - POST Request to Add Job
2:41:45 - Delete Job Button/function
2:45:12 - DELETE Request to Remove Job
2:46:50 - React Toastify Package
2:50:08 - Edit Job Page/Form
2:56:05 - Update Form Submission
2:58:54 - PUT Request to Update Job
3:02:10 - Build Static Assets For Production

20 Essential VS Code Extensions In 2024

Traversy Media 2024-03-11 | 20 extensions for Visual Studio Code to increase your productivity.

Check out my courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:
00:00 - Intro
1:08 - Prettier
1:56 - GitHub Copilot
3:05 - Live Server
3:35 - Multiple Cursor Case Preserve
4:29 - Git History
4:48 - Git Lens
5:26 - Code Runner
5:49 - Markdown Preview Enhanced
6:21 - Console Ninja
6:56 - RegEx Snippets
7:30 - Polacode
8:05 - Code Spell Checker
8:53 - Document This
9:19 - ChatGPT
9:57 - Peacock
10:41 - Postman
11:17 - REST Client
11:45 - Bookmarks
12:07 - Codiumate/Codium AI
12:44 - Quokka
13:24 - Wrap Up

Exploring React 19 Features - use() Hook, Actions & More

Traversy Media 2024-03-06 | In this video, we will look at some of the features of React 19 including the React compiler, use() hook, form actions, new hooks like useFormState(), useFormStatus() and useOptimistic().

Code:
https://github.com/bradtraversy/react-19-playground

Check out my courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:24 - Compiler Info (Slide)
3:05 - Automatic Memoization (Slide)
4:04 - use() Hook Info (Slide)
4:57 - use client & use server (Slide)
5:43 - Actions (Slide)
6:54 - useOptimistic (Slide)
7:40 - Metadata (Slide)
8:06 - Other Changes (Slide)
9:48 - React 19 Playground Intro
10:53 - use() Hook to Fetch Joke
15:34 - use() Hook to Fetch Posts
17:05 - use() Hook with Promise
21:16 - use() Hook with Context
23:32 - Action Example 1 - Post Form
29:25 - Action Example 2 - Shopping Cart Form
35:25 - useFormStatus()
39:49 - useFormState()
44:12 - useOptimistic()

Tailwind & JavaScript Project - Products Filtering UI

Traversy Media 2024-02-27 | In this project, we will create a product list using Tailwind CSS, and we will add filtering and add-to-cart functionality with JavaScript.

Code:
https://codepen.io/bradtraversy/pen/oNVKXBo

20 Projects Course:
https://www.traversymedia.com/20-Vanilla-JavaScript-Projects

Vanilla Projects Repo:
https://github.com/bradtraversy/vanillawebprojects

Blog Post:
https://www.traversymedia.com/blog/product-filtering-ui

0:00 - Intro
2:02 - Start The HTML
4:35 - Navbar / Search Area
9:00 - Main Products & Categories Area
14:26 - Hardcode HTML Items
19:30 - Start The JavaScript
20:25 - Select DOM Elements & Init
22:42 - Loop Over Products & Create Elements
27:53 - Refactor To Function
29:22 - Update Cart Item Count
35:23 - Filter Products

Next.js 14 Course Release With Promo

Traversy Media 2024-02-20 | $15 PROMO CODE: NEXT2024

TRAVERSY MEDIA:
https://www.traversymedia.com/nextjs-from-scratch

UDEMY:
https://www.udemy.com/course/nextjs-from-scratch/?couponCode=NEXT2024

Stop Worrying About AI!

Traversy Media 2024-02-06 | In this quick video, I will share my opinion on AI and how it will affect software development.

Check out my premium courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Web Development In 2024 - A Practical Guide

Traversy Media 2024-01-23 | My annual guide to every web development technology that you can think of. We cover everything including frontend, backend, full stack, DevOps and more.

Check Out My Courses:
https://www.traversymedia.com

Content Guide:
https://www.traversymedia.com/guide

Premium eBook Version:
https://traversy.gumroad.com/l/web-dev-guide

Timestamps:
0:00 - Intro
1:12 - About This Guide
2:43 - Developer Roles
7:15 - Developer Goals
11:38 - Essential Tools
16:02 - HTML & CSS
18:35 - CSS Frameworks
22:28 - Sass
24:17 - Other Helpful Tools
29:59 - Design Principles
31:34 - JavaScript
34:00 - WordPress
35:54 - Basic Deployment
38:46 - Checkpoint #1
41:49 - Where To Next?
45:12 - Evolving Frontend Architecture
49:05 - Frontend Frameworks
49:33 - React
52:17 - Vue
54:05 - Angular
56:30 - Svelte
58:32 - React Ecosystem
1:06:14 - Vue Ecosystem
1:10:00 - Angular Ecosystem
1:12:50 - Svelte Ecosystem
1:15:11 - TypeScript
1:16:36 - Headless CMS
1:20:03 - Other Frontend Tools
1:24:23 - Web APIs
1:27:10 - Testing
1:29:16 - Checkpoint #2
1:30:49 - Server-Side Language
1:42:29 - Server-Side Framework
1:53:50 - REST API
1:54:37 - GraphQL
1:56:09 - Databases
2:04:27 - Database ORMs
2:09:14 - Authentication
2:12:03 - Serverless Architecture
2:13:54 - Full Stack Deployment
2:17:09 - Bun.js
2:18:36 - Checkpoint #3
2:20:25 - Containerization
2:23:00 - Web Assembly
2:24:15 - Mobile Development
2:27:18 - Progressive Web Apps
2:28:53 - Desktop Apps
2:31:56 - Design Trends
2:34:12 - IoT & Metaverse
2:35:03 - Artificial Intelligence
2:36:50 - DevOps
2:38:00 - Animation
2:39:50 - VR & AR
2:40:58 - Web3 & Blockchain
2:42:37 - Outro

HTMX Crash Course | Dynamic Pages Without Writing Any JavaScript

Traversy Media 2024-01-01 | Learn HTMX by creating a couple of small projects with a Node.js and Express backend, including a contacts search, temperature converter, mock weather app with polling and form validation component. We will learn about the common HTMX attributes like hx-get, hx-post, hx-swap, etc.

Final Code:
https://github.com/bradtraversy/htmx-crash-course

Alpine Crash Course:
https://www.youtube.com/watch?v=r5iWCtfltso

Check out my courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
3:42 - Node.js/Express Server Setup
9:23 - Simple request with hx-get & hx-trigger
11:12 - hx-swap
11:58 - Route to get a list of users
16:04 - hx-target
17:00 - hx-confirm
17:30 - Get users from jsonplaceholder
18:40 - hx-indicator
21:06 - hx-vals
23:27 - Temperature converter with hx-post
29:44 - Polling
33:23 - Mock weather app with polling
36:44 - Contacts search widget
39:50 - Backend route for search
47:08 - Inline form validation
50:12 - Backend route for validation
56:01 - Wrap up

Should You Test As A Web Developer?

Traversy Media 2023-12-28 | A chat about writing tests as a web developer. I talk about what testing is, the benefits, types of testing, and when and if you should write tests for your projects.

Check out my premium courses:
https://traversymedia.com

Jest Crash Course:
https://www.youtube.com/watch?v=7r4xVDI2vho

React Testing Course:
https://www.youtube.com/watch?v=7r4xVDI2vho

TDD Course:
https://www.youtube.com/watch?v=u5cLK1UrFyQ

Timestamps:
0:00 - Intro
0:54 - What Is Testing?
1:56 - TDD (Test Driven Development)
3:19 - Types Of Testing
5:28 - When Should You Write Tests?

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Astro Quick Start Course | Build an SSR Blog

Traversy Media 2023-12-18 | In this course, you will learn the fundamentals of the Astro web framework while building a server-side rendered (SSR) tech blog.

Final Code:
https://github.com/bradtraversy/astro-blog

Course Page:
https://www.traversymedia.com/astro-quick-start

Become a Traversy Media Member:
https://www.traversymedia.com/offers/2NFSzqDt/checkout

Use the promo TRAVERSYMEMBER to get the first 3 months for $15 per month.

Timestamps:
0:00 - Intro
3:32 - What Is Astro?
7:35 - Install & Setup
12:27 - Pages Folder & Routing
17:26 - Image Component
24:58 - Component Script
29:06 - Layout & Slots
36:45 - Component Props
39:31 - Using Constants
42:52 - Navbar & Footer Components
46:51 - Custom 404 Page
51:18 - Collections & Markdown
55:27 - Collection Schema
58:17 - Querying Collections
01:07:02 - Format & Sort By Date
01:12:36 - Article Card Component
01:15:52 - Homepage Articles
01:25:08 - Most Recent Article
01:31:11 - Slug & getStaticPaths
01:37:12 - SSR Config & Single Article
01:47:30 - Tags Component
01:53:18 - Tag Page
01:59:34 - Footer Tags
02:04:29 - Search Page
02:16:15 - API Endpoints
02:25:55 - Pagination Component
02:34:05 - Disable Prev & Next
02:39:36 - Vercel Deployment

Vue 3 & Composition API - Full Project

Traversy Media 2023-11-08 | Build an expense tracker application from scratch using Vue.js 3 and the composition API with the latest syntax from version 3.2.

Final Code:
https://github.com/bradtraversy/vue-expense-tracker

Vanilla JS Project Repo:
https://github.com/bradtraversy/vanillawebprojects

Blog Post:
https://www.traversymedia.com/blog/vue-expense-tracker

Check Out My Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro & Demo
3:21 - Vue.js Setup
4:57 - File Structure
7:44 - Boilerplate Clean Up
9:06 - Create Component Files & Templates
12:30 - Create and import Components
18:50 - TransactionList Display
28:37 - Transactions in Global State
30:12 - Pass & Recieve Props (defineProps)
32:30 - Balance Component & computed()
37:21 - Income & Expenses Component
42:34 - AddTransaction Form Component
44:58 - Binding Form Inputs
46:41 - Validation & Toasts
52:05 - Emit Custom Events (defineEmits)
54:45 - Add Transaction to State
59:30 - Deleting Transactions
1:03:30 - Fetch From Local Storage & OnMounted()
1:06:09 - Save to Local Storage

Are You Too Dumb To Code? A Chat About Imposter Syndrome

Traversy Media 2023-10-26 | In this video, we will talk about why so many developers feel too dumb to code. We get into the topic of imposter syndrome.

Check out my courses:
https://traversymedia.com

Professional Website From Scratch | HTML & CSS For Beginners

Traversy Media 2023-10-16 | We will create a professional-looking website from scratch using HTML, CSS and a bit of JavaScript. This project is beginner-friendly, but it's also a fun project for more experienced developers.

Figma File:
https://shismqklzntzxworibfn.supabase.co/storage/v1/object/public/pro-challenges/landing.fig

Final Code:
https://github.com/bradtraversy/saas-landing-page

iCodeThis: Use the promo code BRAD to get 10% off of the Pro plan
https://icodethis.com/?ref=traversy

Check out my courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
1:00 - Project Info & Demo
6:57 - Exporting Images From Figma
8:42 - Downloading The Image Assets
9:43 - Create Files
10:18 - Base HTML & Links
15:55 - Navbar HTML
19:20 - Base CSS
24:15 - Navbar CSS
29:25 - Custom Properties/Variables
31:00 - Buttons & Utility Classes
37:00 - Hero HTML
40:10 - Text Utility Classes
43:50 - Hero CSS
47:16 - Video Section
51:46 - Background Utility Classes
53:11 - Testimonials Section
56:00 - CSS Grid & Cards
1:00:25 - Finish Testimonials CSS
1:01:20 - Pricing HTML
1:06:33 - Pricing CSS
1:12:20 - FAQ HTML
1:17:12 - FAQ CSS
1:25:15 - FAQ JavaScript
1:37:55 - Footer HTML
1:43:30 - Footer CSS
1:47:05 - Mobile Menu HTML
1:49:29 - Mobile Menu CSS
1:58:50 - Mobile Menu JS
2:00:45 - Responsive Hero
2:05:40 - Remaining Responsiveness
2:12:26 - Deploy To Netlify

15 Web Developer-Related Career Paths

Traversy Media 2023-09-28 | In this video, we will look a bit deeper than frontend, backend, and full stack. We will explore 15 different web dev-related roles including UI/UX Designers, SPA Developers, API/microservices developers, Blockchain, IoT and much more.

Check Out My Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
2:37 - 1. UI/UX Designer
4:42 - 2. SPA/Frontend Developer
6:10 - 3. Server-Side/Full Stack Developer
8:25 - 4. API/Microservices Developer
9:50 - 5. Dev Ops Engineer
11:18 - 6. Mobile Developer
12:45 - 7. Freelance Web Developer
15:29 - 8. Ecommerce Developer
16:57 - 9. Web Security Specialist
18:09 - 10. Web Game Developer
19:01 - 11. Blockchain Developer
19:55 - 12. AR/VR Developer
20:52 - 13. PWA Developer
21:45 - 14. IoT Developer
22:50 - 15. Chatbot Developer
24:13 - Conclusion

Bun Crash Course | JavaScript Runtime, Bundler & Transpiler

Traversy Media 2023-09-18 | In this crash course, we will look at the Bun.js JavaScript runtime/bundler/toolkit. I will show you how to get set up and check out some of the features.

Bun Official Website & Docs:
https://bun.sh

Check Out My Courses:
https://traversymedia.com

If you are on Windows, this is a video I did setting up WSL. It is old, but the steps are pretty much the same:
https://www.youtube.com/watch?v=Cvrqmq9A3tA

Timestamps:

0:00 - Intro & Slides
1:22 - What Is Bun?
4:41 - Features & Advantages
9:16 - Installation
11:50 - bun init
12:55 - bun run
13:18 - Bun.serve()
15:29 - Watch Mode
16:22 - Hot Reload Mode
16:43 - Env Variables
18:16 - Bun Scripts
19:30 - Simple Routes
21:00 - bun x
21:58 - Node Core Modules
23:59 - File I/O API
27:05 - Testing
29:19 - The Bundler
32:21 - bun build
34:26 - Bundler Watch Mode
35:03 - React & JSX
39:03 - Conclusion

Prisma Crash Course

Traversy Media 2023-09-12 | Let's look at Prisma, which is a Node.js & TypeScript ORM & toolkit to interact with your database.

Written Version:
https://www.traversymedia.com/blog/prisma-crash-course

Check Out My Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro & What Is Prisma?
5:30 - What Is Data Modeling?
6:28 - Getting Started
9:38 - The Schema File
10:36 - User Model
12:29 - Article Model
14:13 - Running Migrations
15:45 - Using The Prisma Client
16:18 - main() Function
18:00 - Create a User
19:40 - Get Users
20:44 - Create Article & Relate User
23:16 - Create User & Article With One Query
27:59 - Loop Through Users & Articles
31:30 - Update Data
32:37 - Remove Data
34:23 - Prisma Studio GUI

New Course Alert - JS Challenges: Data Structures & Algorithms

Traversy Media 2023-09-07 | Traversy Media Platform:
https://www.traversymedia.com/javascript-challeges
$15 Promo Code: CODEWIZARD

Udemy:
https://www.udemy.com/course/javascript-challenges/?couponCode=CODEWIZARD

Github Repo:
https://github.com/bradtraversy/traversy-js-challenges

Modern JavaScript From The Beginning | First 12 Hours

Traversy Media 2023-07-26 | This is the first 12 hours of my 37-hour JavaScript course. In thes video we will go over the fundamentals in-depth.

Get The Full Course For $15!
PROMO CODE: YOUTUBEJAVASCRIPT
https://www.traversymedia.com/modern-javascript-2-0

JAVASCRIPT SANDBOX REPO:
https://github.com/bradtraversy/javascript-sandbox

SHOPPING LIST PROJECT:
https://github.com/bradtraversy/shopping-list

Timestamps:
0:00 - Intro
1:00 - What is JavaScript?
8:43 - Environment Setup
14:10 - Running JS In The Browser
21:14 - Using The Sandbox
24:15 - The Browser Console
34:22 - Comments & Shortcuts
41:26 - Variables & Constants
52:56 - Data Types
1:05:52 - Primitive vs Reference Types
1:13:02 - Type Conversion
1:23:10 - Arithmetic & Comparison Operators
1:32:51 - Type Coercion
1:36:54 - Strings
1:52:55 - Capitalize Challenge
1:59:46 - Numbers
2:05:34 - Math Object
2:11:33 -Number Challenge
2:20:05 - Date Object
2:28:20 - Date Object Methods
2:37:20 - Section 2 Intro - Arrays & Objects
2:38:02 - Array Basics
2:45:27 - Array Methods
2:55:56 - Nesting, Concat & Spread
3:06:06 - Array Challenges
3:13:16 - Object Literals
3:21:24 - Object Spread Operator
3:33:25 - Destructuring & Naming
3:40:24 - JSON Intro
3:49:27 - Object Challenge
3:55:50 - Section 3 Intro - Functions, Scope & Execution Context
3:57:22 - Function Basics
4:03:32 - Parameters & Arguments
4:13:55 - Global & Function Scope
4:19:23 - Block Scope
4:24:42 - Nested Scope
4:27:38 - Declaration vs Expression
4:31:56 - Arrow Functions
4:39:35 - IFFE
4:44:39 - Function Challenges
4:57:00 - Execution Context
5:06:20 - Execution Context In Action
5:10:21 - The Call Stack
5:15:14 - Section 4 Intro - Logic & Contol Flow
5:16:25 - If Statements
5:23:18 - If-Else & Nesting
5:30:29 - Switch Statements
5:35:29 - Calculator Challenge
5:38:52 - Truthy & Falsy Values
5:51:10 - Logical Operators
5:59:19 - Logical Assignment
6:05:33 - Ternary Operator
6:15:52 - Section 5 Intro - Loops & High Order Array Functions
6:16:49 - For Loop
6:28:16 - Break & Continue
6:31:09 - While & Do...While Loops
6:38:10 - FizzBuzz Challenge
6:46:14 - For...Of Loop
6:51:18 - For...In Loop
6:54:28 - Array.forEach
7:03:03 - Array.filter
7:14:38 - Array.map
7:30:10 - Array.reduce
7:39:01 - Array Method Challenges
7:49:33 - Section 6 Intro - The DOM
7:50:46 - Intro To The DOM
8:01:52 - Document Element Properties
8:16:14 - DOM Selectors - Single Elements
8:30:29 - DOM Selectors - Multiple Elements
8:39:49 - Traversing The DOM - Elements
8:51:16 - Traversing The DOM - Nodes
9:05:07 - Create & Append Elements
9:11:25 - innerHTML vs CreateElement
9:20:20 - Refactor To Multiple Functions
9:24:32 - Insert Elements, Text & HTML
9:33:59 - Custom insertAfter() Challenge
9:38:49 - Replacing Elements
9:48:38 - Removing Elements
9:56:28 - Working With Styles & Classes
10:06:09 - Section 7 Intro - Events
10:07:00 - Event Listeners
10:20:03 - Mouse Events
10:30:47 - The Event Object
10:43:49 - Keyboard Events & Key Properties
10:54:21 - KeyCode Mini-Project
11:09:14 - Input Events
11:21:05 - Form Submission & Form Object
11:31:52 - Event Bubbling
11:37:33 - Event Delegation & Muiltiple Events
11:43:21 - Page Loading & Window Events

Simple Next.js & React Authentication With Clerk

Traversy Media 2023-07-10 | In this project, we will buid an authentication system for Next.js using clerk. It can also be used with React SPAs and Remix.

Visit Clerk:
https://clerk.com

Project Code:
https://github.com/bradtraversy/clerk-app

Clerk Docs:
Main: https://clerk.com/docs
Next.js: https://clerk.com/docs/nextjs/get-started-with-nextjs
React: https://clerk.com/docs/quickstarts/get-started-with-create-react-app
Remix: https://clerk.com/docs/quickstarts/get-started-with-remix

Follow Clerk On Twitter:
https://twitter.com/ClerkDev

Timestamps:
0:00 - Intro
1:22 - Project Demo
5:07 - Next.js Setup
7:43 - Install & Setup Clerk
9:45 - Clerk Provider
12:24 - Header Component
17:23 - Protecting Pages - middleware.js
19:48 - .env routes
21:33 - Sign In Page
26:13 - Conditional Header Links
29:42 - UserButton Component
31:45 - UserProfile Component
33:35 - Email Signup & Verification Code
35:07 - Using Themes
37:13 - Start Custom Sign Up Flow
42:15 - Custom Form UI
44:29 - Handle Submit
46:35 - Email Verification
48:36 - Conclusion

Write A ChatGPT Chatbot With Node.js

Traversy Media 2023-06-30 | In this video we will build an AI chatbot from scratch using Node.js, the OpenAI library and the ChatGPT API.

Code:
https://github.com/bradtraversy/chatgpt-chatbot

Blog Post:
https://www.traversymedia.com/blog/chatgpt-chatbot-nodejs

Check Out My Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
2:57 - Getting Setup
5:26 - OpenAI API Key
6:18 - OpenAI Library Setup
8:00 - Chat Completion Example
11:30 - Creating The Chatbot
13:42 - ReadlineSync Example
16:14 - Get User Input
18:05 - Exiting The Program
18:49 - Chat Completion for Chatbot
21:36 - Trying Out The Bot
22:13 - Storing The Chat History
25:22 - Update Chat History
26:05 - Final Test

Build A RealTime Chat App With React & Appwrite Cloud

Traversy Media 2023-06-26 | Fullstack chat application with Authentication and real-time capabilities with Appwrite cloud. Be sure to join the Appwrite discord channel for technical support questions and say hello on Twitter:

Appwrite Website: https://t.co/HVsoUClCF4

Appwrite Twitter: https://twitter.com/appwrite
AppWrite Discord: https://twitter.com/appwrite

Source Code: https://github.com/divanov11/React-Appwrite-RealTime-Chat

Read more about Appwrite cloud here: https://appwrite.io/public-beta

Timestamps:
00:00 - Intro
1:16 - Demo
2:20 - Appwrite Intro
8:08 - Basic Setup
8:08 - Basic Setup
12:00 - Configuring Appwrite
17:55 - Collection Permissions
19:45 - Querying Database Items
25:15 - Adding Styling
31:50 - Create Messages
40:50 - Sorting Queries
43:45 - Limiting Queries
44:23 - Deleting Messages
50:45 - Adding Realtime events
1:07:30 - Protected Routes
1:12:15 - Adding AuthContext
1:22:00 - Login User
1:39:45 - Persisting User After Login
1:47:20 - Logout User
1:51:00 - Register User
2:06:50 - Document Level Permissions

New Bootstrap 5 Course & Why Bootstrap?

Traversy Media 2023-06-22 | $15 PROMO: BOOTSTRAP2023
https://www.traversymedia.com/bootstrap-from-scratch

UDEMY VERSION:
https://www.udemy.com/course/bootstrap-from-scratch

MERN Crash Course | JWT Authentication, Redux Toolkit, Deployment & More

Traversy Media 2023-05-15 | In this project, we will create a MERN stack app with a React SPA frontend. The main focus is authentication, but you will learn how to create a full-featured API, manage state with Redux Toolkit, and more.

Linode/Akamai - Get $100 Free For 60 Days
https://linode.com/traversy

Code:
https://github.com/bradtraversy/mern-auth

Blog Post - Part 1 (Backend):
https://www.traversymedia.com/blog/mern-crash-course-part-1

Blog Post - Part 2 (Frontend):
https://www.traversymedia.com/blog/mern-crash-course-part-2

12-Hour MERN Course:
https://www.traversymedia.com/mern-stack-from-scratch

Timestamps:
0:00 - Intro
2:58 - Linode Sponsor
4:18 - Getting Started
6:45 - Dependencies & Express Server
9:51 - Scripts & Nodemon
10:59 - .env File
12:52 - User Routes & Controller Setup
18:15 - Postman Workspace Setup
21:10 - Async Handler
22:37 - Custom Error Middleware
30:23 - User Controller Functions
33:14 - Connect To User Routes
37:20 - MongoDB Database Setup
44:50 - User Model
48:32 - Register User Endpoint
58:50 - Generate JWT & Save Cookie
1:06:29 - Auth User Endpoint
1:11:33 - Logout & Destroy Cookie
1:13:13 - Auth Protect Middleware
1:23:30 - Update User Profile Endpoint
1:28:11 - Starting The Frontend
1:34:15 - Concurrently Setup
1:37:43 - React Bootstrap Setup
1:40:00 - Header Component
1:42:30 - HomeScreen & Hero
1:44:54 - React Router Setup
1:53:21 - Login & Register Form UIs
2:05:47 - Redux Toolkit Setup
2:10:37 - Auth Slice
2:19:50 - API Slices
2:29:17 - Login Functionality
2:37:35 - React Toastify Setup
2:39:45 - Auth Header Links
2:44:01 - Logout Functionality
2:48:48 - Loader Component
2:51:52 - Register Functionality
2:57:39 - Start Profile
2:58:21 - PrivateRoute Component
3:02:50 - ProfileScreen Component
3:06:00 - Update Profile Functionality
3:11:15 - Prepare For Production
3:16:43 - Create A Linode/Server
3:18:32 - SSH Into Server & Provision
3:22:44 - Clone Files On To Server
3:28:07 - PM2 Setup
3:30:45 - NGINX Setup

ChatGPT Crash Course | 10 Practical Use Cases For Developers

Traversy Media 2023-04-17 | In this video, I will give you and show examples of 10 ways to use OpenAI's ChatGPT as a developer including general learning, getting feedback, writing tests and more

ChatGPT:
https://chat.openai.com

Full Blog Post:
https://www.traversymedia.com/blog/chat-gpt-crash-course

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:14 - The Interface
3:31 - #1 - General Learning Tool
9:24 - #2 Code Feedback
10:57 - #3 Specific Solutions
12:39 - #4 Brainstorming
14:07 - #5 Generating Sample Data
17:06 - #6 Generating Documentation
18:40 - #7 Explaining Errors
22:30 - #8 Writing Tests
23:45 - #9 Natural Language Programming
29:08 - #10 - UIs & Layouts

Next.js 13 Crash Course | App Directory, React Server Components & More

Traversy Media 2023-04-05 | A complete crash course to NextJS version 13 and it's new features such as the app directory structure, routing, React Server Components vs client components, layouts and more.

Code:
https://github.com/bradtraversy/next-13-crash-course

Original Next.js Crash Course:
https://www.youtube.com/watch?v=mTz0GXj8NN0

Blog Post:
https://www.traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-more

All Of My Courses:
https://traversymedia.com

Deploy to Vercel for Free:
https://vercel.com/ambassadors/bradtraversy

Timestamps:
0:00 - Intro
2:32 - Setup & File Structure
5:22 - Homepage & Clean Up
7:12 - Routing System
10:02 - Nested Routes
11:04 - Layouts
13:37 - Metadata API
15:31 - next/font/google
19:10 - Header Component
21:19 - React Server Components
23:26 - use client
24:13 - Data Fetching
28:05 - ReposPage Output
31:47 - Custom Loading Page
34:16 - Dynamic Routes
35:30 - params Prop
37:07 - Repo & RepoDir Component
45:57 - Suspense Boundaries
48:29 - Caching & Revalidating
51:30 - API Route Handlers
53:49 - Serving Course Data
56:00 - Fetching Course Data
1:00:32 - Getting Search Params
1:06:00 - Getting Body Data
1:10:00 - Refactor Server to Client Component
1:16:30 - Search Component

Build a Keyword Extractor: React + OpenAI API + Chakra UI

Traversy Media 2023-03-23 | Build and deploy a keyword extractor powered by OpenAI, using React, Vite and Chakra UI.

Hostinger:
https://hostinger.com/traversy
Use the code TRAVERSY for 10% off!

Github Repo:
https://github.com/bradtraversy/ai-keyword-extractor

Blog Post:
https://www.traversymedia.com/blog/ai-keyword-extractor-with-react-openai

My Web Development Courses:
https://www.traversymedia.com

Timestamps:
0:00 - Intro
1:58 - Hostinger Sponsor
3:13 - Vite & React Setup
4:30 - File Clean Up
7:00 - Chakra UI Setup
8:58 - Base Styles
10:58 - Header & Footer Components
15:42 - TextInput Component
21:46 - Start Extract Keywords Function
22:58 - Create API Key & Environment Variables
26:36 - Global State
27:56 - Completions API Request
36:50 - Modal Component & Spinner
43:54 - Project Deployment

Vite Crash Course | Faster Alternative To CRA

Traversy Media 2023-03-14 | In this video, we will talk about the Vite JavaScript build tool. We will also compare it to Webpack as well as Create React App.

💻 Blog Post:
https://www.traversymedia.com/blog/vite-crash-course

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro
1:13 - Vite vs Traditional Module Bundlers
3:50 - Vite vs Create React App
7:14 - Setting Up a Project
8:21 - File & Folder Structure
11:27 - Creating a React Component
12:23 - Environment Variables
13:50 - Using Sass
14:50 - Build For Production & Preview
15:19 - Plugins

Web Development In 2023 - A Practical Guide

Traversy Media 2023-03-06 | Updated 2024 Version - https://www.youtube.com/watch?v=8sXRyHI3bLw

This is an in-depth guide that goes over every major technology that has to do with web development, from languages to frameworks to utilities.

Content Guide Of Videos/Courses:
https://www.traversymedia.com/guide

Premium eBook Version:
https://traversy.gumroad.com/l/web-dev-guide

Design For Developers Repo:
https://github.com/bradtraversy/design-resources-for-developers

My Web Development Courses:
https://www.traversymedia.com/

Timestamps:

0:00 - Intro
1:30 - About This Guide
3:38 - Overall Goals
6:23 - Types Of Web Developers
9:05 - The Essentials
13:55 - HTML & CSS
19:44 - JavaScript
23:17 - Sass & Post CSS
25:23 - CSS Frameworks
28:27 - UI Design Principles
30:57 - Design Software
33:01 - Tools & Utilities
39:19 - Helpful AI Tools
42:15 - Front-End Deployment
45:27 - Foundational Front-End Developer
48:54 - Your Next Path
51:56 - Front-End Build Tools
55:12 - Front-End Frameworks & Ecosystems
57:50 - React
1:01:24 - Vue
1:03:53 - Angular
1:06:08 - Svelte
1:07:57 - SolidJS
1:09:58 - TypeScript
1:11:48 - UI Kits & Component Libraries
1:15:01 - Testing
1:16:43 - Web APIs
1:18:56 - Full-Stack Frameworks
1:25:36 - Static Site Generators
1:30:26 - Headless CMS
1:34:02 - The Jamstack
1:24:38 - Alpine,js & Lit
1:36:41 - Visualization & Animation
1:38:33 - No-Code Tools
1:40:02 - Front-End Superstar
1:42:13 - Server-Side Languages
1:50:29 - Server-Side Frameworks
2:05:35 - Relational vs NoSQL Databases
2:09:02 - Database Management Systems
2:19:12 - ORM (Object Relational Mapping)
2:22:11 - REST API & GraphQL
2:25:15 - Authentication & Authorization
2:28:54 - Full-Stack & Back-End Deployment
2:32:47 - DevOps Skills
2:37:06 - Back-End / Full-Stack Superstar
2:39:57 - Mobile Development
2:43:18 - Progressive Web Apps (PWA)
2:44:03 - Desktop Applications
2:46:17 - Web Assembly (WASM)
2:47:25 - Advanced AI
2:50:44 - Web3
2:52:58 - Outro

Im Back! 37-Hour JavaScript Course & New Platform

Traversy Media 2023-02-09 | $20 Coupon - TRAVERSYFIVEOFF
https://www.traversymedia.com/modern-javascript-2-0

The coupon is good for ALL courses

The domain name has not propagated in a few regions. If you can not access the link yet, you can use
https://brad-traversy.mykajabi.com/modern-javascript-2-0

Build An AI Image Generator With OpenAI & Node.js

Traversy Media 2022-12-07 | In this project, we will use OpenAI and the DALL-E model to create a web app that will generate images from scratch based on the entered text.

💻 Code:
https://github.com/bradtraversy/nodejs-openai-image

📄OpenAI Docs:
https://beta.openai.com/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
2:00 - Setup & Install Dependencies
3:33 - Express Server & ENV Variables
6:03 - Route & Controller
9:58 - OpenAI Library Request/Response
15:17 - Request Body Data
19:34 - Frontend Setup
24:00 - Form Event Listener
26:38 - GenerateImageRequest() Function
31:45 - Display Image in DOM
33:20 - Using The App & Outro

Intro To Web Scraping With Puppeteer

Traversy Media 2022-11-09 | In this video, we will look at Puppeteer to scrape data from a web page.

💻 Code:
https://github.com/bradtraversy/courses-scrape

Puppeteer Docs:
https://pptr.dev/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:36 - Install & Setup
3:36 - Init Browser & Page Object
5:02 - Screenshot & PDF
6:54 - Targeting HTML, Text, and Links
11:22 - Scraping Courses
17:08 - $$eval()
18:40 - Save JSON Data

PostCSS Crash Course

Traversy Media 2022-10-26 | In this video, we will talk about what PostCSS is, set it up and show you how to use some of the popular plugins such as postcss-preset-env, precss, postcss-import, autoprefixer and more.

💻 Code:
https://github.com/bradtraversy/postcss-crash

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:47 - Slides
6:48 - Docs
8:14 - Setup & Install
9:42 - Build & Watch Scripts
12:40 - Autoprefixer & Plugin Config
16:17 - postcss-preset-env
18:05 - Custom selectors, media, nesting
21:29 - PreCSS
24:13 - PostCSS Import & File Structure
28:42 - PostCSS Assets
31:52 - CSSNano

Build a Shopping Cart With React JS & Stripe

Traversy Media 2022-10-18 | In this project, we will create a shopping cart using React and Stripe.

📽️ Cooper Codes YouTube Channel:
https://www.youtube.com/c/CooperCodes

💻 Code:
https://github.com/coopercodes/ReactEcommerceStoreWithStripeAPI

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 Project showcase
1:25 Create react app / installs
2:22 Navbar component
6:00 Implementing React Router
7:45 Creating pages for router
10:35 Building rows and cols for Store page
12:14 Creating products for React to use
16:50 Loading products dynamically
19:18 Creating product card component
22:45 Creating a modal for the cart
25:55 Creating our cart context (Cart functionality)
46:02 Adding CartProvider to our app
46:29 Creating add / remove product to product cards
52:05 Adding cart functionality to navbar (number of items)
54:40 Showing cart data in modal
57:00 Creating CartProduct component
1:01:00 Create Stripe account and add test products
1:03:06 Creating Express server / installs
1:05:00 Creating Stripe checkout request
1:09:30 Adding Stripe IDs to React
1:10:33 Creating checkout call from React
1:13:43 Final project / checkout demo!
1:15:06 Thank you for watching

Clean Code vs Preference

Traversy Media 2022-10-11 | Let's talk about the phrase "clean code" and how it can be pretty subjective and a lot of it comes down to preference.

⭐ Check out Agora!
https://bit.ly/3bLM8Iu

🐥 Clean Code Tweet:
https://twitter.com/traversymedia/status/1577706658943344641

💻 All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Create a Desktop App With JavaScript & Electron

Traversy Media 2022-10-03 | In this video, we will create a cross-platform desktop app to resize image dimensions, using JavaScript and Electron.

💻 Code:
https://github.com/bradtraversy/image-resizer-electron

To package your app up for different platforms, you could use one of the following:
https://github.com/electron/electron-packager
https://www.electronforge.io/

⭐ All Courses:
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
3:05 - Resources
4:48 - Setup & Install Dependencies
8:08 - Create Main Window
12:45 - Common Boilerplate
15:53 - Show Devtools
18:10 - Using Electronmon
18:54 - Adding the UI Theme
21:26 - Content Security Policy
23:00 - Menu Customization
27:36 - Menu Roles
30:00 - About Window
31:53 - Start Renderer JS / Load Image
38:15 - Get Original Dimensions
39:40 - Using Preload
44:28 - Show Output Path
46:43 - Toastify Alerts
50:58 - Form Submit Handler
53:54 - IPC Renderer (Send)
56:44 - IPC Main (Recieve)
59:35 - Resize Image
1:05:32 - Catch Message In Renderer
1:07:32 - Make mainWindow Global
1:10:22 - Test Production Mode

5 Pro-Level React Dos & Donts

Traversy Media 2022-09-20 | In this video, Jack will talk about some do's and don'ts when it comes to writing code with the React JavaScript framework.

📽️ Jack's YouTube Channel:
https://www.youtube.com/c/JackHerrington

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
00:00 Introduction
00:30 Do use functional components
02:22 Don’t think of function components as templates
07:08 Do use TypeScript
12:02 Don’t worry about re-renders (too much)
14:35 Do learn to love dependency arrays
18:36 Don’t ignore useCallback or useMemo
22:25 Do learn to make custom hooks
23:23 Don’t use Redux just because you think you have to
26:00 Do use a query library
27:50 Don’t make your own UI library
29:29 Outroduction

Command Line Crash Course For Beginners | Terminal Commands

Traversy Media 2022-09-14 | This is a course for beginners to learn how to navigate the terminal/command line. I tried to make it as OS agnostic as possible, but if you are on Windows, I suggest using something like "Git Bash".

⭐ Check out Agora!
https://bit.ly/3bLM8Iu

💻 Gist With All Commands:
https://gist.github.com/bradtraversy/cc180de0edee05075a6139e42d5f28ce

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:50 - Agora Sponsor
1:34 - Slides Start
2:00 - Why Learn The Command Line?
5:43 - Command Line vs Terminal vs Shell
8:25 - Let's Talk About Windows
10:30 - Gist File
12:20 - Up & Down Arrow
12:44 - Tab Key
13:08 - Keyboard Shortcuts
14:11 - man
15:11 - whoami
15:17 - date
15:21 - clear
15:47 - pwd
16:09 - ls
18:13 - cd
19:35 - open, start, xdg-open
20:25 - mkdir
20:55 - touch
21:22 - rm
22:31 - rm -r
23:48 - cp
24:28 - mv
27:46 - cat
29:14 - RIght Angle Bracket (piping)
30:32 - less
31:00 - head
31:21 - tail
32:01 - nano
33:04 - echo
33:53 - grep
36:10 - find
38:03 - More On Piping
39:44 - ln (symlinks)
41:36 - tar
43:45 - history

3 Alternatives for Herokus Free Tier - Full Stack & API Hosting

Traversy Media 2022-09-08 | Heroku is getting rid of its free tier. In this video, we will look at 3 really good alternatives that offer a similar service. We will deploy a simple Node.js API to each one.

- Render - https://render.com
- Railway -https://railway.app
- Cyclic - https://cyclic.sh

💻 Node API Github Repo:
https://github.com/bradtraversy/vanilla-node-rest-api

📽️ Node API Video:
https://www.youtube.com/watch?v=_1xa8Bsho6A&t=2120s

🐥Tweet About Topic:
https://twitter.com/traversymedia/status/1566881561366220800

⭐ All Courses
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro & Chat About Heroku & Free Hosting
3:16 - Project Intro
3:47 - Render
5:24 - Railway
6:40 - Cyclic
7:35 - Render Deployment
9:53 - Railway Deployment
11:30 - Cyclic Deployment

Astro Crash Course

Traversy Media 2022-08-29 | Astro is an amazing static site generator that allows you to build really fast websites with little to no production JavaScript. You can use Astro components as we all have components from other frameworks such as React, Vue and Svelte.

TIP: I forgot to mention there is a VS Code extension called "Astro". Use it for syntax highlighting.

💻 Github Repo:
https://github.com/bradtraversy/astro-crash-course

⭐ All Courses
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro / What Is Astro?
3:20 - Project Demo
6:20 - Create A New Astro Project
7:50 - Folder Structure
10:19 - Run Dev Server & Prepare
11:18 - Astro Components
16:00 - Making a Request - Top Level Async
17:13 - Create A Layout
20:29 - Passing Props
23:17 - Start Project / Global Styling
26:53 - Header Component
31:38 - React Integration
37:10 - Showcase Component
43:18 - Features & Card Components
49:34 - Dynamic Classes - Dark Card
51:40 - Page Content & Tabs Component
1:03:28 - Footer Component
1:05:19 - About Page
1:08:37 - Refactor Card Component
1:10:53 - Blog Page & Markdown Files
1:18:44 - Fetching Markdown FIles
1:20:57 - Blog Showcase Component
1:22:50 - Single Post Page / getStaticPaths()
1:29:35 - Build Static Assets
1:30:40 - Deploy To Netlify

Do You Need To Learn Data Structures & Algorithms As A Developer?

Traversy Media 2022-08-25 | A short discussion on learning data structures and algorithms as a developer.

James Quick YouTube Channel:
https://www.youtube.com/c/jamesqquick

Tweet from Lawrence Lockhart - [https://twitter.com/LDLockhartJr/status/1561250018006294528?s=20&t=Sb2aRdbdmveSWt1-JVsBUw](https://twitter.com/LDLockhartJr/status/1561250018006294528?s=20&t=Sb2aRdbdmveSWt1-JVsBUw)

Hiring without Whiteboards - https://github.com/poteto/hiring-without-whiteboards

Interview Patterns - [https://twitter.com/LDLockhartJr/status/1561251161134473217?s=20&t=Sb2aRdbdmveSWt1-JVsBUw](https://twitter.com/LDLockhartJr/status/1561251161134473217?s=20&t=Sb2aRdbdmveSWt1-JVsBUw)

JavaScript Algorithms and Data Structures Masterclass - [https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/](https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/)

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Create A Simple JavaScript App to Generate QR Codes

Traversy Media 2022-08-16 | Let's create a simple QR Code generator app with JavaScript, QRcode.js and Tailwind CSS.

💻 Github Repo
https://github.com/bradtraversy/qr-code-generator

🧑‍💻 Live Demo
https://qrcodes.tech

💻 QRCode.js Library:
https://github.com/davidshimjs/qrcodejs

⭐ Special $9.99 Promo For My Tailwind CSS Course:
https://www.udemy.com/course/tailwind-from-scratch/?couponCode=5DAY999

⭐All Courses
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Traversy Media On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:09 - Side Project Motivation
2:31 - QRCode.js Library Intro
3:16 - Dependency Setup
6:39 - Tailwind CSS Layout
20:42 - Start JavaScript & Get Form Inputs
23:03 - Show & Hide Spinner Functions
25:05 - Generate QR Code
27:28 - Clear UI Function
28:40 - Create Save Button
32:48 - Get QR Code Image Source
34:50 - Clear Button From UI

Build A Digital Resume & Host For Free

Traversy Media 2022-08-11 | Turning a real-life resume into a digital resume hosted free on Github pages.

Live Demo: https://divanov11.github.io/Digital-Resume/
Source Code: https://github.com/divanov11/Digital-Resume
Article: https://dev.to/dennisivy11/build-a-digital-resume-host-for-free-559

Check out Agora! https://bit.ly/3bLM8Iu

Dennis Ivy's Channel: https://www.youtube.com/c/DennisIvy

Timestamps

00:00 - Introduction
4:56 - Project Setup
9:15 - Hero Section
35:50 - Adding Dark Mode
39:50 - Techstack section
44:23 - Work History section
52:30 - Projects sections
57:30 - Project Detail Page
1:01:30 - Adding Responsiveness
1:05:50 - Hosting with Github pages

SpaceX Website Clone - HTML, CSS & JavaScript

Traversy Media 2022-08-09 | In this video, we will re-create parts of the SpaceX website including the homepage, menus, and some inner pages. We will create some animations and use JavaScript to manipulate the DOM.

Sponsor: Hostinger (10% off):
http://hostinger.com/traversymedia

Github Repo:
https://github.com/bradtraversy/spacex-website

Live Demo:
https://traversydemo.dev

Website & Courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
0:37 - Hostinger Sponsor
1:39 - Project Demo
4:38 - Header/Navbar HTML & CSS
17:23 - Menu Underline Animation
22:52 - Homepage Section A
30:22 - Button & Hover Animation
38:29 - Fade In & Up Animation
44:40 - Scroll Arrow Animation
49:29 - Remaining Homepage Sections
53:30 - Footer
58:29 - Media Queries
1:04:25 - Hamburger Icon & Open Animation
1:12:22 - JavaScript For Open Toggle
1:14:30 - Dark Overlay
1:18:32 - Remove Scroll On Open
1:19:40 - Side Menu HTML & CSS
1:33:00 - Inner Page & Fade Animation
1:42:20 - Stats Counter HTML & CSS
1:46:07 - Stat Counter JavaScript
2:00:00 - Inner Page Responsiveness
2:02:40 - Remaining Inner Pages
2:08:27 - Deploy To Hostinger (Using Git)

Carbon Lang First Look & Crash Course | Googles C++ Successor

Traversy Media 2022-08-01 | Carbon is Google's new C++ successor. In this video, we will talk a little bit about it and then look at the basic syntax including variables, data types, arrays, tuples, classes, generics and more.

💻 Carbon Main Repo:
https://github.com/carbon-language/carbon-lang

✅ Gist File From Video:
https://gist.github.com/bradtraversy/681eae47e8c2fc14fbfa9e3eac8dc3ca

⭐ My Courses & More
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:37 - Carbon - What & Why?
7:26 - Setup With Homebrew
13:15 - Package Namespace
14:16 - Main() Function
16:40 - Print() Function
18:00 - Creating Functions
19:40 - Primitive Data Types
21:37 - Naming Conventions
22:14 - Variables
24:15 - let Keyword
26:22 - auto Type
27:06 - Global Variables & Scope
28:52 - Multi-Line Strings
29:27 - Function Arguments
31:49 - Arrays
35:10 - Tuples
37:42 - Structs
41:11 - Classes & Objects
43:32 - Class Methods
46:10 - Class Functions
47:52 - Pointers
52:35 - If Else Statements
54:55 - Match Statement
59:04 - While Loops
1:01:32 - Generics
1:05:22 - Outro

5 HTML, CSS & JS Mini Projects - Scroll Animation, Rotating Navigation, Drag Events, etc

Traversy Media 2022-07-27 | 5 projects from my 50 Projects In 50 Days course on Udemy. These projects are meant to sharpen your CSS skills and help you work with the DOM using JavaScript.

FULL COURSE: $9.99 Promo Link (Only valid for 5 days)
https://www.udemy.com/course/50-projects-50-days/?couponCode=JULY999

All courses:
https://traversymedia.com

Timestamps:
0:00 - Intro
2:00 - Scroll Animation Project
16:13 - Rotating Navigation Project
40:40 - Login Input Wave
59:38 - Animated 3D Boxes Project
1:27:12 - Hoverboard Project

Improve The Developer Hiring Process

Traversy Media 2022-07-19 | In this video, I will propose an alternative to the current hiring process that a lot of tech companies use to hire developers.

💻 My Courses & More
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
1:19 - Interview Questions
2:08 - Being Put On The Spot Sucks
3:55 - Ridiculous Tech Requirements
4:59 - Mandatory College Degree
5:24 - My Proposal
6:03 - Personal Project Review
6:39 - Relevant Take Home Project
7:54 - Learning Process Evaluation
8:25 - Wrap Up

JavaScript Under The Hood [5] - JavaScript Engine Overview

Traversy Media 2022-07-12 | In this final video of the series, we will talk about JS engines and look at how JavaScript code is turned into machine code that runs on the CPU.

💻 My Courses & More
https://traversymedia.com

💖 Show Support
Patreon: https://www.patreon.com/traversymedia
PayPal: https://paypal.me/traversymedia

👇 Follow Me On Social Media:
Twitter: https://twitter.com/traversymedia
Instagram: https://www.instagram.com/traversymedia
Linkedin: https://www.linkedin.com/in/bradtraversy

Timestamps:
0:00 - Intro
0:42 - What is a JS Engine?
1:31 - Specific Browser Engines
3:30 - Compiled vs Interpreted Languages
6:11 - JS Engine Process Overview
7:25 - Abstract Syntax Tree (AST)
10:01 - Interpreter & Bytecode
10:58 - JIT Compilation