Traversy Media
Windows 10 Bash & Linux Subsystem Setup
updated
Visit Appwrite and claim $50 in free Appwrite Cloud Pro credits:
https://apwr.dev/traversymedia50
Final Code & Theme Files:
github.com/bradtraversy/bookit-app
Check Out My Courses:
traversymedia.com
Timestamps:
0:00 - Intro
1:30 - Project Demo
5:00 - Create Next App
6:40 - Prep & Clean Up
10:18 - Header Component
18:32 - Footer Component
19:53 - Homepage Rooms (JSON data)
22:32 - RoomCard Component
27:48 - Heading Component
28:49 - Room Details Page
38:20 - Apppwrite Project Setup
40:26 - Rooms Database, Collections & Attributes
44:10 - Add User & Room Data
47:03 - Permissions & API Key
48:15 - Environment Variables
51:16 - Create Appwrite Clients
57:52 - Get All Rooms
1:04:44 - Get Single Room
1:06:53 - Login & Register Pages/Forms
1:11:39 - Middleware in Next.js
1:15:21 - Protecting Routes
1:18:07 - Login & Create Session
1:26:00 - React Toastify Setup
1:34:36 - Logout & Destroy Session
1:43:18 - checkAuth Action
1:47:05 - Show/Hide Nav Links
1:51:00 - Global Auth Context
1:59:20 - Auth Wrapper
2:05:40 - Finish Route Protection
2:07:15 - Create User
2:16:50 - Add Room
2:32:04 - Storage Buckets & Image Upload
2:44:51 - Single Room Page Image
2:46:06 - My Rooms Page
2:59:04 - Delete Room
3:03:58 - DeleteRoomButton Component
3:08:38 - Bookings Collection Setup
3:11:32 - Book Room Action
3:21:32 - Booking Form
3:25:40 - Show Bookings
3:31:50 - BookedRoomCard Component
3:39:58 - Cancel Booking
3:51:07 - Check Room Availability
4:07:18 - Deploy To Vercel
traversymedia.com/laravel-from-scratch
UDEMY:
udemy.com/course/laravel-from-scratch/?couponCode=LARAVEL2024
Code:
github.com/bradtraversy/encore-url-shortener
Encore Website:
https://encore.dev
Timestamps:
0:00 - Intro
1:29 - Slides
7:41 - Installation & Setup
10:43 - Running Encore & Dev Dashboard
11:40 - Create Your First Endpoint
14:28 - URL Params
15:52 - Query Params
18:55 - Start URL Shortener
20:22 - URL POST Endpoint
23:41 - PostgreSQL & Migration
27:49 - Encore DB Shell
28:50 - URL GET Endpoint
32:41 - Deploy To The Cloud
33:51 - Test Cloud API With CURL
Check Out Our Sponsor: Bright Data @BrightData
brdta.com/traversy
Code:
github.com/bradtraversy/web-scraper-youtube
Timestamps:
0:00 - Intro
2:01 - What Is Web Scraping?
2:58 - Legal & Ethical Considerations
3:42 - History Of Web Scraping
4:41 - Why Use Web Scraping?
5:53 - How Do Scrapers Work?
6:57 - Tools & Libraries
8:32 - Basic Steps
10:28 - Additional Steps
12:15 - What Are We Scraping?
15:03 - Node.js Web Scraper
33:44 - Python Web Scraper
Check Out My Courses:
traversymedia.com
Timestamps:
0:00 - Intro
1:01 - #1 One & Done
2:00 - #2 You Need To Learn Everything
2:34 - #3 You Need a Degree
3:37 - #4 Web Development is Easy
4:51 - #5 Front & Backend Are Completely Separate
6:09 - #6 Web Development Is Dead
7:23 - #7 Web Dev Is Just About Writing Code
8:16 - #8 Wordpress Developers Are Not Real Developers
9:45 - #9 You Need A Fancy Design
11:09 - #10 The More Features, The Better
11:46 - #11 You Need A Team
12:38 - #12 Not All Websites Need To Be Responsive
13:37 - #13 Websites Need To Be Perfect Before Launch
14:44 - #14 SEO Is Only About Keywords
15:35 - #15 You Always Need The Latest Technologies
Check Out My Courses:
traversymedia.com
Social Media:
https://x.com/traversymedia
instagram.com/traversymedia
facebook.com/traversymedia
github.com/bradtraversy
Timestamps:
0:00 - Intro
1:28 - My History With SIde Projects
2:32 - Taking On Too Much
3:53 - Lack Of Proper Planning
5:59 - Unreasonable Expectations
7:37 - Neglecting Market Research
8:34 - No Or Bad Marketing
Check Out Our Sponsor Daily.dev:
https://daily.dev/traversy-media
Full Project Code:
github.com/bradtraversy/vue-crash-2024
Blog Post:
traversymedia.com/blog/vue-crash-course
Check Out My Courses:
traversymedia.com
Timestamps:
0:00 - Intro
2:19 - Daily.dev Sponsor
3:11 - What is Vue.js?
4:45 - Prerequisites
6:17 - Role of Frontend Frameworks
8:40 - Why Vue.js?
11:14 - Vue Components
13:39 - Getting Setup
15:40 - Using The Vue CDN
20:54 - Create-Vue Setup
22:30 - Vue Official Extension
22:58 - Exploring Folders & Files
26:10 - Boilerplate Clean Up
26:50 - Component Structure
27:25 - Options API data() & Interpolation
28:36 - v-if, v-else & v-else-if Directives
30:43 - v-for Directive & Looping
32:17 - v-bind Directive
33:36 - v-on Directive, Events & Methods
35:55 - Composition API - Long Form
39:08 - ref() & Reactive Values
40:35 - Composition API Short Form
42:41 - Forms & v-model
46:38 - Delete task
48:36 - Lifecycle Methods
49:50 - onMounted & Fetching Data
51:58 - Vue Jobs Project Start
52:26 - Tailwind CSS Setup
56:47 - Theme Files & Images
58:16 - Navbar Component
1:01:20 - Hero Component
1:02:30 - Props
1:04:57 - HomeCards & Card Container Component
1:10:20 - JobListings Component & JSON Data
1:16:47 - JobListing Component
1:20:53 - JobListings Limit & showButton Props
1:24:26 - computed() & Truncate Description
1:30:41 - PrimeIcons
1:32:35 - Vue Router & Home View
1:39:52 - Jobs View
1:41:55 - RouterLink
1:46:07 - Navbar Active Link
1:50:42 - Not Found Page
1:56:27 - JSON Server REST API
1:59:50 - Fetch Data For JobListings
2:03:42 - reactive() Function
2:05:15 - JobListings Refactor To reactive()
2:07:26 - Vue Spinner
2:09:50 - Fetch Single Job & Display Data
2:19:06 -BackButton Component
2:21:03 - Proxying
2:23:54 - Add Job Page
2:32:20 - Save Job POST
2:37:15 - Toast Notifications
2:40:08 - Delete Job
2:44:14 - Edit Page
2:47:06 - Fetch Job To Edit
2:50:58 - Update Job
2:52:50 - Netlify Deployment
Neon (Sponsor) - https://fyi.neon.tech/traversy
Clerk (Sponsor) - go.clerk.com/BsG2XQJ
Prisma - prisma.io
Next.js - nextjs.org
Full Code Repo:
github.com/bradtraversy/expense-tracker-nextjs
Timestamps:
0:00 - Intro
2:04 - Links & Docs
3:24 - Create Next App
5:58 - Layout File
7:54 - Neon Project Setup
9:45 - New Database & Role
10:56 - Neon SQL Editor Demo
14:18 - Prisma Setup & Schema
15:20 - User Model
18:06 - Transaction Model
20:19 - Generate Client & Migrate
22:25 - Database File
25:29 - Clerk Authentication Setup
28:21 - Header Component
29:35 - SignIn, SignOut & UserButton
32:29 - Save User To Neon Database
42:26 - Guest Component
44:58 - AddTransaction Component
50:48 - addTransaction Action
59:36 - Get & Validate User
1:01:47 - React Toastify Setup
1:04:08 - Save Transaction to Neon Database
1:07:53 - useRef To Clear Form
1:09:36 - Balance Component
1:11:17 - getUserBalance Action
1:15:36 - addCommas() Utility Function
1:19:03 - Clerk Dashboard Users
1:19:49 - IncomeExpense Component
1:21:26 - getIncomeExpense Action
1:27:06 - TransactionList Component
1:29:22 - Transaction Type
1:30:40 - getTransactions Action
1:34:00 - TransactionItem Component
1:38:28 - Delete Button
1:41:07 - deleteTransaction Action
1:45:07 - Commas & Decimal Places
1:47:30 - Email/Password Test
1:48:35 - Vercel Deployment
Check out the sponsor, Mailtrap:
https://l.rw.rw/traversy_media
Full Source Code:
github.com/bradtraversy/traversypress-ui
This project will use the following technologies:
- React/Next.js
- Shadcn/ui
- TypeScript
- Tailwind CSS
- Recharts
- Lucide React
- React Hook Form & Zod
Full Next.js Course:
traversymedia.com/nextjs-from-scratch
Udemy Version:
udemy.com/course/nextjs-from-scratch
Timestamps:
0:00 - Intro
4:02 - Project Setup
9:18 - Initialize Shadcn/ui
10:37 - Using Shadcn Components
12:54 - Navbar, Avatar, Dropdown Components
24:04 - Sidebar & Command Component
33:40 - Dashboard Cards
39:55 - Make The Cards Dynamic
44:13 - Posts Data Array & Types
47:50 - Posts Table
59:13 - Limit & Sort Posts
1:02:27 - Analytics Data & Types
1:04:30 - Analytics Chart & Recharts
1:11:10 - Posts Page
1:13:50 - Back Button Component
1:16:38 - Pagination Component
1:18:00 - Edit Post Page & Form
1:23:34 - Zod Form Schema
1:25:17 - Get Post Data
1:27:00 - useForm Hook
1:28:45 - Create Form
1:38:03 - Toast Component
1:42:29 - Dark Mode Toggler
1:49:48 - Auth Page & Layout
1:55:26 - Tabs Component
2:00:47 - Login Form
2:10:50 - Register Form
2:13:52 - Auth Page Theme Toggler
Check out My Courses:
traversymedia.com
Code from Video:
github.com/bradtraversy/express-crash
Node.js Crash Course:
youtube.com/watch?v=32M1al-Y6Ag
14+ Hour Node.js API Masterclass Course:
traversymedia.com/node-js-api-masterclass
Timestamps:
0:00 - Intro & Slides
0:53 - What is Express?
2:28 - Opinionated vs Unopinionated
4:10 - Prerequisites
5:18 - What we'll cover
6:45 - Express Setup
9:00 - Basic Server
13:10 - --watch Flag & NPM Scripts
15:25 - res.sendFile() Method
18:00 - Static Web Server
19:48 - Working with JSON
22:35 - Postman Utility
23:45 - Environment Variables (.env)
26:30 - Request Params (req.params)
29:35 - Query Strings (req.query)
33:19 - Setting Status Codes
36:40 - Multiple responses
37:35 - Route Files
41:40 - Using ES Modules
43:47 - Request Body Data
47:53 - POST Request
50:23 - PUT Request
53:23 - DELETE Request
55:44 - Middleware
1:00:24 - Custom Error Handler
1:08:30 - Catch All Error Middleware
1:10:47 - Colors Package
1:14:17 - Using Controllers
1:20:45 - __dirname Workaround
1:24:29 - Making Requests From Frontend
1:30:03 - Submit Form to API
1:36:00 - EJS Template Engine Setup
1:41:15 - Pass Data to Views
1:42:50 - Pass and Loop Over Arrays
1:44:20 - Template Partials
Code:
github.com/bradtraversy/nodejs-crash-2024
Express Crash Course:
youtube.com/watch?v=CnH3kAXSrmU
Node.js API Masterclass:
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
Full Article With Links:
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
Course Code:
github.com/bradtraversy/microservices-example
Moleculer Framework:
https://moleculer.services/
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - 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
Code:
github.com/bradtraversy/react-crash-2024
React Front To Back Full Course:
traversymedia.com/Modern-React-Front-To-Back-Course
Check out all my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - 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
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - 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
Code:
github.com/bradtraversy/react-19-playground
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - 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()
Code:
codepen.io/bradtraversy/pen/oNVKXBo
20 Projects Course:
traversymedia.com/20-Vanilla-JavaScript-Projects
Vanilla Projects Repo:
github.com/bradtraversy/vanillawebprojects
Blog Post:
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
TRAVERSY MEDIA:
traversymedia.com/nextjs-from-scratch
UDEMY:
udemy.com/course/nextjs-from-scratch/?couponCode=NEXT2024
Check out my premium courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy
Need a Place To Start?
traversymedia.com/modern-html-css-from-the-beginning
Check Out All Courses:
traversymedia.com
Content Guide:
traversymedia.com/guide
Premium eBook Version:
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
Final Code:
github.com/bradtraversy/htmx-crash-course
Alpine Crash Course:
youtube.com/watch?v=r5iWCtfltso
Check out my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - 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
Check out my premium courses:
traversymedia.com
Jest Crash Course:
youtube.com/watch?v=7r4xVDI2vho
React Testing Course:
youtube.com/watch?v=7r4xVDI2vho
TDD Course:
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 - github.com/bradtraversy
Twitter - twitter.com/traversymedia
Instagram - instagram.com/traversymedia
Facebook - facebook.com/traversymedia
Linkedin - linkedin.com/in/bradtraversy
Final Code:
github.com/bradtraversy/astro-blog
Course Page:
traversymedia.com/astro-quick-start
Become a Traversy Media Member:
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
3-Hour Vue.js Crash Course:
youtube.com/watch?v=VeNfHj6MhgA
Final Code:
github.com/bradtraversy/vue-expense-tracker
Vanilla JS Project Repo:
github.com/bradtraversy/vanillawebprojects
Blog Post:
traversymedia.com/blog/vue-expense-tracker
Check Out My Courses:
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
Check out my courses:
traversymedia.com
Figma File:
shismqklzntzxworibfn.supabase.co/storage/v1/object/public/pro-challenges/landing.fig
Final Code:
github.com/bradtraversy/saas-landing-page
iCodeThis: Use the promo code BRAD to get 10% off of the Pro plan
icodethis.com/?ref=traversy
Check out my courses:
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
Check Out My Courses:
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 Official Website & Docs:
https://bun.sh
Check Out My Courses:
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:
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
Written Version:
traversymedia.com/blog/prisma-crash-course
Check Out My Courses:
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
traversymedia.com/javascript-challeges
$15 Promo Code: CODEWIZARD
Udemy:
udemy.com/course/javascript-challenges/?couponCode=CODEWIZARD
Github Repo:
github.com/bradtraversy/traversy-js-challenges
Get The Full Course For $15!
PROMO CODE: YOUTUBEJAVASCRIPT
traversymedia.com/modern-javascript-2-0
JAVASCRIPT SANDBOX REPO:
github.com/bradtraversy/javascript-sandbox
SHOPPING LIST PROJECT:
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
Visit Clerk:
clerk.com
Project Code:
github.com/bradtraversy/clerk-app
Clerk Docs:
Main: clerk.com/docs
Next.js: clerk.com/docs/nextjs/get-started-with-nextjs
React: clerk.com/docs/quickstarts/get-started-with-create-react-app
Remix: clerk.com/docs/quickstarts/get-started-with-remix
Follow Clerk On Twitter:
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
Code:
github.com/bradtraversy/chatgpt-chatbot
Blog Post:
traversymedia.com/blog/chatgpt-chatbot-nodejs
Check Out My Courses:
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
Appwrite Website: https://t.co/HVsoUClCF4
Appwrite Twitter: twitter.com/appwrite
AppWrite Discord: twitter.com/appwrite
Source Code: github.com/divanov11/React-Appwrite-RealTime-Chat
Read more about Appwrite cloud here: 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
traversymedia.com/bootstrap-from-scratch
UDEMY VERSION:
udemy.com/course/bootstrap-from-scratch
Linode/Akamai - Get $100 Free For 60 Days
linode.com/traversy
Code:
github.com/bradtraversy/mern-auth
Blog Post - Part 1 (Backend):
traversymedia.com/blog/mern-crash-course-part-1
Blog Post - Part 2 (Frontend):
traversymedia.com/blog/mern-crash-course-part-2
12-Hour MERN Course:
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:
chat.openai.com
Full Blog Post:
traversymedia.com/blog/chat-gpt-crash-course
β All Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
Code:
github.com/bradtraversy/next-13-crash-course
Original Next.js Crash Course:
youtube.com/watch?v=mTz0GXj8NN0
Blog Post:
traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-more
All Of My Courses:
traversymedia.com
Deploy to Vercel for Free:
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
Hostinger:
hostinger.com/traversy
Use the code TRAVERSY for 10% off!
Github Repo:
github.com/bradtraversy/ai-keyword-extractor
Blog Post:
traversymedia.com/blog/ai-keyword-extractor-with-react-openai
My Web Development Courses:
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
π» Blog Post:
traversymedia.com/blog/vite-crash-course
β All Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
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:
traversymedia.com/guide
Premium eBook Version:
traversy.gumroad.com/l/web-dev-guide
Design For Developers Repo:
github.com/bradtraversy/design-resources-for-developers
My Web Development Courses:
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
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
brad-traversy.mykajabi.com/modern-javascript-2-0
π» Code:
github.com/bradtraversy/nodejs-openai-image
πOpenAI Docs:
beta.openai.com
β All Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
π» Code:
github.com/bradtraversy/postcss-crash
β All Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
π½οΈ Cooper Codes YouTube Channel:
youtube.com/c/CooperCodes
π» Code:
github.com/coopercodes/ReactEcommerceStoreWithStripeAPI
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
β Check out Agora!
bit.ly/3bLM8Iu
π₯ Clean Code Tweet:
twitter.com/traversymedia/status/1577706658943344641
π» All Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: linkedin.com/in/bradtraversy
π» Code:
github.com/bradtraversy/image-resizer-electron
To package your app up for different platforms, you could use one of the following:
github.com/electron/electron-packager
electronforge.io
β All Courses:
traversymedia.com
π Show Support
Patreon: patreon.com/traversymedia
PayPal: paypal.me/traversymedia
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
π½οΈ Jack's YouTube Channel:
youtube.com/c/JackHerrington
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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
β Check out Agora!
bit.ly/3bLM8Iu
π» Gist With All Commands:
gist.github.com/bradtraversy/cc180de0edee05075a6139e42d5f28ce
π Follow Traversy Media On Social Media:
Twitter: twitter.com/traversymedia
Instagram: instagram.com/traversymedia
Linkedin: 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