Sam Meech-Ward
Sam Meech-Ward

Videos

Sam Meech-Ward

Sam Meech-Ward
Learn how to use useState to keep track of arrays of objects in a react app.🔗Starter Code:https://github.com/Sam-Meech-Ward/react-state-arrays-jokes/tree/3c3251eaac856f77081e7a4c7192cfa8d64dbfc0🔗Final Code:https://github.com/Sam-Meech-Ward/react-state-arrays-jokesThis is video #7 in my react series: #6 useState: https://youtu.be/_wPGcpoZQn8#8 Conditional Rendering: coming soonJoin this channel to support these videos and get access to perks:https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/joinChapters:0:00​ Intro1:38 Adding an object to the array5:12 Deleting an object from the array8:52 Update an object in the array15:37 Sort the array of objects19:09 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
React State Array of Objects
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLjk1cjlBNV90YU5v
I tried to repair a broken e-bike scooter thing to avoid spending money on a brand new one. 🔗My LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
$100 DIY EBIKE
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLnBQaWFaU05SOW9B
Learn how to use useState in a react app to:* Keep track of state for a single component* Update state with values and updater functions* Share state between multiple components* Keep track of state for form inputs and share that with a parent component🔗Starter Code:https://github.com/Sam-Meech-Ward/react-state-jokes🔗Final Code:https://github.com/Sam-Meech-Ward/react-state-jokes/tree/finalCodeThis is video #6 in my react series: #5 Event Listeners in React: https://youtu.be/lE31_0cXeAg#7 Arrays in state: coming soonJoin this channel to support these videos and get access to perks:https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/joinChapters:0:00​ Intro0:59 The Wrong Way2:59 Introducing useState4:01 useState Explained6:50 useState is async8:35 Setter Functions9:34 Updated Variable10:04 Multiple State Variables12:18 Sharing State between Components16:03 State and Forms20:25 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
useState
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLl93UEdjcG9aUW44
Learn how to handle events like button clicks and form submissions in a react app. This is video #5 in my react series: #4 Rendering a List of Components: https://youtu.be/f640Z6QZawc#6 useState: https://youtu.be/_wPGcpoZQn8Chapters:0:00​ Intro0:34 button onClick2:03 form onSubmit3:33 input onChange4:47 inline arrow functions5:29 events in child components8:27 SummaryJoin this channel to get access to perks:https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/join🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Event Listeners in React
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmxFMzFfMGNYZUFn
Using map to create a list of components super common in React. You need to know how to use map correctly, and this video will show you howThis is video #4 in my react series: #3 React Props Explained: https://youtu.be/hpZmKR9FmQw#5 Event Listeners in React: https://youtu.be/lE31_0cXeAgJoin this channel to get access to perks:https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/joinChapters:0:00​ Intro0:20 App Setup1:20 The wrong way1:35 Array of Components2:40 For Loop3:45 Key5:35 Map7:12 Filter7:41 Summaryhttps://beta.reactjs.org/learn/rendering-lists#why-does-react-need-keys🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Rendering a List of Components
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmY2NDBaNlFaYXdj
Learn what props in react are and the different ways that props are used. This is video #3 in my react series: #2 Creating Components in React: https://youtu.be/PbkwqVZsUgs#4 Rendering Lists of Components: https://youtu.be/f640Z6QZawcJoin this channel to get access to perks:https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/joinChapters:0:00​ Intro0:09 App Setup2:14 Creating a New Component4:08 Function Parameters6:33 Props11:36 Destructuring Props13:31 Spreading Props15:11 List of components17:52 Ending🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
React Props Explained
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmhwWm1LUjlGbVF3
Learn how to create a react app using vite and how to create react components using JSX. This is video #2 in my react series: https://www.youtube.com/playlist?list=PL0X6fGhFFNTe_vJIlAQQo0IEgPgk9er3g#1 What is React.js? Get started with React using Vite https://youtu.be/-DTUdOJv8w8#3 React Props Explained https://youtu.be/hpZmKR9FmQwJoin this channel to get access to perks:https://www.youtube.com/channel/UC6aTLuI_j4-0wiDSzmaPctQ/joinChapters:0:00​ Intro0:17 App Setup3:49 JSX7:38 CSS8:45 JavaScript in JSX11:00 Creating Components15:32 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Creating Components in React
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLlBia3dxVlpzVWdz
Proxying API Requests in Development using Vite, Parcel, or Create React App. If your plan is to host your react app from the same origin as your web server, then this is super helpful. Conveniently, this also avoids CORS issues. I'll also show you how to deploy your react app using your express server and railway.This is video #8 in my react series: https://www.youtube.com/playlist?list=PL0X6fGhFFNTe_vJIlAQQo0IEgPgk9er3gChapters:0:00​ Intro2:56 CORS3:38 Deploying a React App7:04 What is React Proxy8:10 Adding a Proxy11:14 Building the app for production13:10 Deploying the app into production15:13 Summary🔗The Docshttps://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Originhttps://create-react-app.dev/docs/proxying-api-requests-in-development/https://vitejs.dev/config/server-options.html#server-proxyhttps://parceljs.org/features/development/#api-proxy🔗Moar LinksMy Website: https://sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
React Proxy | Easiest Fix to CORS Errors
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLk40eVVpUWlUdndV
Get a fast paced introduction to React.js, JSX, and how to setup a react project using Vite. This video takes a big picture look at what react is and why you would want to use React when making web apps. This is video #1 in my react series: https://www.youtube.com/playlist?list=PL0X6fGhFFNTe_vJIlAQQo0IEgPgk9er3g#2 Creating Components in React https://youtu.be/PbkwqVZsUgsChapters:0:00​ Intro0:59 Vanilla JS 4:01 Using React.js8:12 JSX9:18 React Toolchains10:48 Using Vite to Create a React App15:01 importing npm modules16:39 Building a vite app17:51 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
What is React.js? Get started with React using Vite
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLi1EVFVkT0p2OHc4
When you delete an image from s3, it stays in the CloudFront cache until the cache is cleared, usually 24 hours. In this video, learn how to invalidate the cloud front cache so that any updates or deletes to a file are immediately seen in CloudFront.🔗Code Snippets: https://github.com/meech-ward/s3-get-put-and-delete/blob/master/InvalidateCloudfront.md🔗Storing Images in S3 from Node Server: https://youtu.be/eQAIojcArRY🔗Set up a CloudFront CDN for an S3 Bucket: https://youtu.be/kbI7kRWAU-wChapters:0:00​ Intro1:28 Adding the CloudFront client5:38 IAM7:44 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Deleting files from S3 and CloudFront | Invalidate CloudFront Cache
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmxaQUdJeTFlM0pB
Create signed urls to access files in a CloudFront distribution. Learn how to generate the signed URLs using a private key in a node application.🔗Code Snippets: https://github.com/meech-ward/s3-get-put-and-delete/blob/master/CloudFrontSignedURL.md🔗Storing Images in S3 from Node Server: https://youtu.be/eQAIojcArRY🔗Set up a CloudFront CDN for an S3 Bucket: https://youtu.be/kbI7kRWAU-wChapters:0:00​ Intro0:42 Why Sign URLs?3:58 Generating an RSA Key Pair5:32 Create a Public Key in AWS6:41 Restrict CloudFront Access7:59 Sign URLs in Node Server12:21 Conclusion🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
CloudFront Signed URLs with Node.js
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkVJWXJoYkJrN2Rv
Learn how to setup a CloudFront distribution for your S3 Bucket to securely deliver files with low latency over a CDN.🔗Storing Images in S3 from Node Server: https://youtu.be/eQAIojcArRYChapters:0:00​ Intro2:09 Setting up CloudFront5:42 Getting Images from CloudFront6:53 Using CloudFront with a Node server10:07 What Next🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Set up a CloudFront CDN for an S3 Bucket
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmtiSTdrUldBVS13
Learn how to store your web app's files in an s3 bucket. Upload, Download, Update, and Delete images from the s3 bucket. Uploading an image goes through the express server allowing us to modify the image before it's stored in the s3 bucket. Downloading the image happens directly from the s3 bucket to put less strain on the server and make it easier to integrate our bucket with a CDN in the future. 🔗Code: https://github.com/meech-ward/s3-get-put-and-delete🔗CloudFront CDN: https://youtu.be/kbI7kRWAU-wChapters:0:00​ Intro3:17 Post a photo with multipart/form-data5:06 Multer8:40 Create an S3 Bucket11:38 IAM User and Policy16:36 AWS SDK S3 Client19:00 Uploading an image to S322:07 Updating an image23:18 Random Image Names25:16 Resizing Images27:36 Saving data to the database29:55 Getting images with signed url35:28 Deleting an image38:19 Summary🔗LibrariesMulter: https://www.npmjs.com/package/multerAWS S3 Client: https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/index.htmlS3 request presigner: https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/modules/_aws_sdk_s3_request_presigner.html🔗AWS & Cloud Computing tutorials:Intro to IAM Roles and Policies on AWS: https://youtu.be/BSodkwWB-8sAWS CLI: https://youtu.be/_DIRSI07kxYS3 bucket for static website: https://youtu.be/RoY3ekCCxKc🔗Other tutorials:Older version of this tutorial: https://youtu.be/NZElg91l_msUpload Images Directly to S3 from Front End: https://youtu.be/yGYeYJpRWPMImage upload with mutler without s3: https://sammeechward.com/uploading-images-express-and-react/🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Storing Images in S3 from Node Server
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmVRQUlvamNBclJZ
Learn how to correctly hash and store your passwords for any web app using node.js and express. The only things you need to take away from the video are: 1. Don't store passwords in plain text2. Hash your passwords using bcryptChapters:0:00​ Intro0:30 Hashing with bcrypt2:30 Other Hashing Algorithms4:30 Salt6:30 bcrypt cost factor9:03 Comparing Passwords10:28 Express App16:43 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Hashing Passwords in Node and Express using bcrypt
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkF6QV9MVERvRnFZ
What happens when you evaluate a value in a boolean context? JavaScript will interpret any value as either true or false, because every value in JavaScript is either truthy or falsy. And on that note, what's up with ! (bang) and !! (double bang)?Chapters:0:00​ Intro🔗Musichttps://www.epidemicsound.com/track/UWK1vKftvJ/🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
WTF is Truthy and Falsy !!
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLjVEVnFBRmhmU3NF
Learn how the addition operator + really works in JavaScript. Understand the type coercion and how JavaScript decides if the operation should be string concatenation or addition. 🔗Song: https://www.epidemicsound.com/track/FhKgzwY2Jm/🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
What you don't know about + in JavaScript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLm54M243VXlRVzNz
What is recursion and how do you use recursion in JavaScript? In this video I'll explain what recursion is and how you can use recursion to solve recursive problems in JavaScript. I'll also show you how to traverse the DOM using a depth first search.Chapters:0:00​ Intro0:29 Solving with a for loop5:45 Solving with recursion10:25 What is Recursion?15:26 Recursion in the browser21:29 Depth First Search🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
JavaScript Recursion Explained
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLldzYzJ4a3FEczdB
Learn how to deploy a react app, or any static website, to a Cloud Front distribution custom domain name and SSL Certificate.Chapters:0:00​ Intro0:59 Building the react app1:35 Create an S3 bucket2:37 Create CloudFront Distribution4:16 Custom Domain Name5:19 SSL Certificate7:08 DNS Record in Route 538:26 Custom Error Page for React10:46 Updating the Website12:05 CloudFront Invalidate Files13:06 AWS CLIaws s3 sync directory-path "s3://your-bucket-name/" aws cloudfront create-invalidation --distribution-id your-distribution-id --paths '/*'🔗Route 53 Domain Namehttps://youtu.be/jDz4j_kkyLA🔗 AWS CLIhttps://youtu.be/_DIRSI07kxY🔗S3 Static Website AWS CLIhttps://sammeechward.com/aws-cli-s3-static-website/🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Deploy React App to CloudFront with HTTPS Custom Domain
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmxQVmdmU1hURTFZ
Learn how to deploy a react app, or any static website, to an s3 bucket with a custom domain name.Chapters:0:00​ Intro0:46 Building the react app2:09 Create an S3 bucket3:54 Upload files to S34:28 S3 Static Website Hosting6:04 S3 Policy Permission8:18 Custom Domain Name10:15 Deploy Site Updates11:13 Deploy Updates with AWS CLI13:15 HTTPS🔗Code Snippets:https://gist.github.com/meech-ward/c0ee31fc2256c7fab6d494121071e53c🔗Route 53 Domain Namehttps://youtu.be/jDz4j_kkyLA🔗 AWS CLIhttps://youtu.be/_DIRSI07kxY🔗S3 Static Website AWS CLIhttps://sammeechward.com/aws-cli-s3-static-website/🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Deploy React App to S3 with Custom Domain
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLjdkak1aNU9UR19F
Learn how to setup the aws cli on your computer and configure it to manage your cloud infrastructure with code. Chapters:0:00​ Intro0:18 Install the CI0:54 Documentation2:13 Creating an IAM User4:52 Configuring the AWS CLI5:38 Creating an S3 Bucket6:27 Infrastructure as Code🔗Install AWS CLIhttps://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html🔗S3 Static Website AWS CLIhttps://sammeechward.com/aws-cli-s3-static-website/🔗AWS CLI VPChttps://sammeechward.com/aws-cli-vpc-subnets-ec2-and-more/🔗Intro to Terraformhttps://youtu.be/bStIFxbD1fo🔗Intro to Packerhttps://youtu.be/dde-bWUeRMo🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
aws cli
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLl9ESVJTSTA3a3hZ
Setup a custom domain name in route 53 to start creating dns records for services within aws. I'll show you how to purchase a domain with namecheap and create a Route 53 hosted zone in aws. Then you can create dns records for aws services like ec2 instances, s3 buckets, load balancers, and more.Chapters:0:00​ Intro0:27 Custom Domain Name Setup0:43 Route 53 Hosted Zones1:00 Route 53 Hosted zone cost1:15 Purchasing through AWS vs somewhere like namecheap or godaddy1:28 Purchasing through Namecheap2:42 Domain Name settings3:20 Creating hosted zone on AWS3:50 NS Record values AWS5:00 Simple record to point to EC2 Instance 🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
AWS Route 53 Domain Name
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmpEejRqX2treUxB
I'll show you how to connect your node application to a MySQL database to query and insert data. I will also show you how to integrate this into an express server to show what a complete backend might look like. Chapters:0:00​ Intro0:32 Setup MySQL1:50 Setup Node App2:46 Connect to MySQL from Node4:40 Basic Queries7:24 Environment Variables10:22 Prepared Statements13:42 Insert Statement17:58 Express26:00 Error Handling27:28 Summary🔗Code:https://github.com/Sam-Meech-Ward/Node-MySQL🔗A Quick Guide to Creating Tableshttps://sammeechward.com/a-quick-guide-to-creating-tables/🔗Install MySQLhttps://www.youtube.com/watch?v=u96rVINbAUI🔗SQL Injectionhttps://youtu.be/Hh6CbrDr0Lk🔗Express JS Crash Coursehttps://youtu.be/bssX9Ot9YOI🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
MySQL Node.js Express
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkhlajQ4cGlfbE9j
Should you be using semicolons in your javascript code?
Stop Using Semicolons in Javascript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkoyRG1lUVFITFJv
There are different types of callback functions in JavaScript. This video goes over them and how to successfully use callback functions to handle asynchronous, non-blocking code in JavaScript. Chapters:0:00​ Intro0:57 Synchronous Callback Functions2:16 Event Based Async Callbacks6:31 Blocking Code 10:30 Performance Async Callbacks14:45 Summary🔗Intro to callback functionshttps://youtu.be/Pk3AoFgSiU0🔗Codehttps://codesandbox.io/embed/young-shadow-um5bm5?fontsize=14&hidenavigation=1&theme=dark🔗LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Async Callback Functions in Javascript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmJMcGtveXJzQUxj
Stop using else statements, I'll show you how.
Stop Using else Statements in Javascript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkNWZVNGNy1naldN
Learn what callback functions are and how to use them in JavaScript.Chapters:0:00​ Intro0:26 Functions5:21 Callback Functions9:57 forEach12:54 Summary🔗LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
JavaScript Callback Functions
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLlBrM0FvRmdTaVUw
Learn about what prototypes are in JavaScript and how to use prototypes to implement inheritance in your javascript applications.this: https://youtu.be/A9SaTI7-sM4Chapters:0:00​ Intro0:40 Object.create1:50 [[prototype]]2:37 __proto__4:30 Array.Prototype6:55 Property Lookup and Assignment 11:39 Prototype Chain13:39 SummaryMusic:Music: TheFatRat - Rise UpWatch the official music video: https://www.youtube.com/watch?v=j-2DGYNXRx0Listen here: https://enter.lnk.to/riseup
Prototypes in JavaScript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLm42bFN4VGdPbTQw
Learn how to use getters and setters on JavaScript objects
Getters and Setters in JavaScript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLlBrZVRIMXJCN0hZ
Learn how to couple data and functionality with objects in JavaScript.THIS in JavaScript: https://youtu.be/A9SaTI7-sM4🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Object Oriented Javascript | The basics
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLi1SNVIwc05GRnBz
Learn what this is in Javascript.Chapters:0:00​ Intro0:44 Global this1:47 Methods3:37 bind & call7:47 4 ways to call a function8:38 arrow functions11:03 Summary🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
THIS in JavaScript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkE5U2FUSTctc000
Learn how to create a web application using Express js and EJS. This video goes over the basics of HTTP and backend programming to create a very basic note-taking app. Chapters:0:00​ Intro0:26 HTTP1:41 App Setup4:35 PORTs6:36 GET Requests8:02 Inspecting HTTP Requests9:47 nodemon12:02 Static Files15:31 Dynamic HTML17:23 EJS21:17 EJS Tags23:19 Passing Data to EJS24:37 Get All Notes33:08 Get Single Note39:47 40443:10 Fake Database45:57 Create a Note56:11 Redirect58:55 Delete Note1:05:28 Search Notes1:11:24 Summary🔗Other resources:Database integration: https://expressjs.com/en/guide/database-integration.html🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Express JS Crash Course | Web Dev Tutorial for Beginners
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmJzc1g5T3Q5WU9J
Learn what a NAT gateway is and how to set one up on AWS to allow internet access on a private subnet.Chapters:0:00​ Intro0:20 Theory2:15 Setup NAT Gateway3:50 Summary4:44 Destroying Infrastructure🔗Other tutorials:Setting up an S3 Gateway VPC Endpoint for Private Subnets: https://youtu.be/tfSzEU9xfIQCloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Setup a NAT Gateway on AWS
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLklxemd1NVVFREtv
How to set up a VPC endpoint to allow private connections to s3 buckets from private subnets.Chapters:0:00​ Intro0:16 Theory1:12 S3 Gateway4:10 Summary🔗Other tutorials:Setting up an S3 Gateway VPC Endpoint for Private Subnets: https://youtu.be/tfSzEU9xfIQCloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
VPC Gateway Endpoints for Private S3 Bucket Connections
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLnRmU3pFVTl4ZklR
Learn how to set up a custom VPC with public and private subnets. Chapters:0:00​ Intro0:34 What is a VPC2:43 Setting Up a VPC5:01 Creating Subnets 6:46 EC2 with custom VPC8:29 Internet Gateway12:06 Deploying to Private Subnet14:47 Reverse Proxy🔗Other tutorials:Intro to Horizontal Scaling, Load Balancing, Immutable Infrastructure with AWS: https://youtu.be/FEbfvTZCYQQIntro to Packer with AWS (Creating AMIs): https://youtu.be/dde-bWUeRMoCloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
AWS VPC & Subnets For Beginners
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLlRVVHFZRVpaVWRj
Watch me solve an advent of code problem from 2016 yay.adventofcode.comLeaderboard: 279615-649f7569
Get read for advent of code 2021
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLldYcGxndk5qVkQ0
Learn how to use Auto Scaling Groups and Application Load Balancers in AWS. An auto scaling group will automatically manage the creation and destruction of EC2 instances while elastic load balancers can balance network traffic between the instances. Chapters:0:00​ Intro1:58 Launch Template5:22 Auto Scaling Group9:27 Application Load Balancer12:28 Target Group14:28 Testing the Load Balancer15:53 Connecting Scaling Group and Load Balancer18:36 Updating EC2 Instances21:42 SSL Certificate24:13 Route 53 Record25:39 Summary🔗Other tutorials:Intro to Horizontal Scaling, Load Balancing, Immutable Infrastructure with AWS: https://youtu.be/FEbfvTZCYQQIntro to Packer with AWS (Creating AMIs): https://youtu.be/dde-bWUeRMoCloud-init and Terraform with AWS: https://sammeechward.com/cloud-init-and-terraform-with-aws/Cloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-WardBinary in the background: 11110000 10011111 10010010 10101001💩
AWS Auto Scaling Groups and Load Balancers
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkFtUWVlQjR5Z1pj
#TeamSeas is a global campaign to raise $30M to remove 30M pounds of plastic and trash from our ocean, rivers, and beaches.Go to https://teamseas.org now to donate. Convert text to binary or binary to text: https://binary-text.herokuapp.com/All money made from this video will be donated directly to https://teamseas.org
Ocean Emoji Binary #TeamSeas
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmRybFl2VHdnSzJR
Learn the basics of using terraform to manage your AWS infrastructure.Chapters:0:00​ Intro2:10 Project Setup2:39 Setting up the project3:57 Terraform CLI5:46 EC2 Resource Block7:38 terraform apply8:55 terraform state11:34 Security Group Resource15:29 Idempotent18:16 terraform destroy19:20 Data Block22:35 Review🔗Code:https://github.com/Sam-Meech-Ward/intro-to-terraform🔗Other tutorials:Intro to Packer with AWS: https://youtu.be/dde-bWUeRMoCloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_MVariables and Outputs in Terraform: https://sammeechward.com/variables-and-outputs-in-terraform/S3 and IAM with Terraform: https://sammeechward.com/s3-and-iam-with-terraform/Cloud-init and Terraform with AWS: https://sammeechward.com/cloud-init-and-terraform-with-aws/🔗Installing Packer:https://learn.hashicorp.com/tutorials/terraform/install-cli?in=terraform/aws-get-started🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Intro to Terraform with AWS
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmJTdElGeGJEMWZv
Learn the basics of using packer to create AMIs in AWS by setting up an AMI that runs a basic node web application.Chapters:0:00​ Intro1:00 What is Packer2:39 Setting up the project4:28 Amazon Plugin5:15 Source Block7:39 Build Block9:29 Bash Script Provisioner10:40 File Provisioner16:20 Packer Build19:48 Local Variables21:10 Source AMI Filter23:57 Review🔗Code:https://github.com/Sam-Meech-Ward/intro-to-packerhttps://github.com/Sam-Meech-Ward/cocktails.git🔗Other tutorials:Intro to Horizontal Scaling, Load Balancing, Immutable Infrastructure with AWS: https://youtu.be/FEbfvTZCYQQDeploy Node app on AWS EC2 Amazon Linux 2 https://youtu.be/oHAQ3TzUTroIntro to Terraform with AWS: https://youtu.be/KmtWuYh4s8oCloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_MVariables and Outputs in Terraform: https://sammeechward.com/variables-and-outputs-in-terraform/S3 and IAM with Terraform: https://sammeechward.com/s3-and-iam-with-terraform/Cloud-init and Terraform with AWS: https://sammeechward.com/cloud-init-and-terraform-with-aws/🔗Installing Packer:https://learn.hashicorp.com/tutorials/packer/get-started-install-cli?in=packer/aws-get-started🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Intro to Packer with AWS
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLmRkZS1iV1VlUk1v
Learn how to set up RDS with MySQL and connect to the database from a MySQL client over the internet, or an EC2 instance of the private network.https://aws.amazon.com/rds/Chapters:0:00​ Intro1:22 Networking4:13 Setting up Database Cluster11:44 Connecting to the Database Public15:55 Connecting to the Database Private18:46 Summary🔗Other tutorials:Cloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Intro to RDS in AWS for MySQL
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLlZpeTF0Qm9pbmww
Learn how to send logs from an Amazon Linux 2 EC2 instance to cloud watch. https://docs.aws.amazon.com/AmazonCloudWatch/latest/logs/QuickStartEC2Instance.htmlChapters:0:00​ Intro1:00 IAM Role for Cloud Watch2:50 Setting up an EC2 instance6:30 Installing and configuring cloud watch agent8:47 Viewing logs in Cloud Watch10:43 Summary🔗Other tutorials:Cloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Sending logs to CloudWatch from Amazon Linux 2
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLndfMUVPTWstcndj
Load balancing and horizontally scaling a web app using immutable infrastructure on AWS with custom AMIs.Chapters:0:00​ Intro0:30 Theory2:47 Creating an AMI8:58 Scaling the App11:40 Load Balancing with Nginx17:25 Summary🔗Other tutorials:Cloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Intro to Horizontal Scaling, Load Balancing, Immutable Infrastructure with AWS
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkZFYmZ2VFpDWVFR
Learn about what IAM roles and policies are and how to create policies and roles to grant an ec2 instance access to other AWS services.Chapters:0:00​ Intro1:12​ Policies and Roles2:35 Setting up Policies6:18 Setting up roles8:00 Adding a role to EC29:00 Conclusion🔗Other tutorials:Cloud Computing Playlist: https://youtube.com/playlist?list=PL0X6fGhFFNTcU-_MCPe9dkH6sqmgfhy_M🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward
Intro to IAM Roles and Policies on AWS
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkJTb2Rrd1dCLThz
Install and set up an nginx reverse proxy on an Amazon Linux 2 ec2 instance.🔗Other tutorials:MySQL on AWS EC2 Amazon Linux 2: https://youtu.be/N9DwaThhpsgDeploy Node app on AWS EC2 Amazon Linux 2: https://youtu.be/oHAQ3TzUTroSetting Up And Deploying AWS EC2 Instances: https://youtu.be/GEVbYQWWJkQ🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward🔗nginx links:https://www.nginx.com/blog/setting-up-nginx/https://www.nginx.com/blog/mitigating-ddos-attacks-with-nginx-and-nginx-plus/http://nginx.org/en/docs/http/configuring_https_servers.htmlCode```sudo amazon-linux-extras install nginx1 -ysudo systemctl enable nginxsudo systemctl start nginx``````sudo vim /etc/nginx/nginx.conf``````server { location / { proxy_pass http://localhost:8080; }}```
Nginx Reverse Proxy on AWS EC2 Amazon Linux 2
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLl9FQkFScXJlZWFv
Deploy Node app on AWS EC2 Amazon Linux 2 by installing node js and setting the app up as a systemd serviceChapters:0:00​ Intro0:14 Setting up an EC2 Instance2:31 Installing Node3:21 git clone code onto the instance4:28 Running the node app6:13 Environment Variables9:38 Systemd service14:13 Summary🔗Other tutorials:MySQL on AWS EC2 Amazon Linux 2: https://youtu.be/N9DwaThhpsgNginx Reverse Proxy on AWS EC2 Amazon Linux 2: https://youtu.be/_EBARqreeaoSetting Up And Deploying AWS EC2 Instances: https://youtu.be/GEVbYQWWJkQ🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward## CodeInstall nodejs version 16```sudo yum install -y gcc-c++ makecurl -sL https://rpm.nodesource.com/setup_16.x | sudo -E bash -sudo yum install -y nodejs```Install git and pull the repo```sudo yum install -y gitgit clone https://github.com/sam-meech-ward-bcit/lotr```Create a service file```shsudo vim /etc/systemd/system/NodeServer.service``````[Unit]Description=My Node ServerAfter=multi-user.target[Service]ExecStart=/usr/bin/node /home/ec2-user/lotr/server.jsRestart=alwaysRestartSec=10StandardOutput=syslogStandardError=syslogSyslogIdentifier=my-node-serverUser=ec2-userEnvironmentFile=/home/ec2-user/lotr/app.env[Install]WantedBy=multi-user.target```start the service```shsudo systemctl enable NodeServer.servicesudo systemctl start NodeServer.service```
Deploy Node app on AWS EC2 Amazon Linux 2
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLm9IQVEzVHpVVHJv
Install and set up a MySQL database on an Amazon Linux 2 ec2 instance.Chapters:0:00​ Intro0:15​ Setting up an EC2 Instance2:27 Installing MySQL3:16 Login as root4:02 Change root user password4:43 SCP database file and create a database7:16 Creating a new user localhost8:50 Creating a new user any host10:37 Modify Security Group12:14 Summary🔗Other tutorials:Deploy Node app on AWS EC2 Amazon Linux 2: https://youtu.be/oHAQ3TzUTroNginx Reverse Proxy on AWS EC2 Amazon Linux 2: https://youtu.be/_EBARqreeaoSetting Up And Deploying AWS EC2 Instances: https://youtu.be/GEVbYQWWJkQ🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-Ward---## Instructionshttps://gist.github.com/meech-ward/db3597795904584b83a0cfa79b461b7dInstall MySQL and start it using the following commands```shsudo yum install -y https://dev.mysql.com/get/mysql80-community-release-el7-3.noarch.rpmsudo amazon-linux-extras install epel -ysudo yum install -y mysql-community-serversudo systemctl start mysqld sudo systemctl enable mysqld ```Get the password for the root user:```shsudo grep 'temporary password' /var/log/mysqld.log```Login to MySQL:```shmysql -u root -p```You have to change the root user's password before you can do anything, so run the following command to do that:```mysqlALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'MyNewPass1!';```upload the sql filehttps://gist.githubusercontent.com/meech-ward/1723b2df87eae8bb6382828fba649d64/raw/ee52637cc953df669d95bb4ab68ac2ad1a96cd9f/lotr.sqlCreate a new user called `sam` with the password `MyNewPass1!` that can access the database from localhost:```mysqlCREATE USER 'sam'@'localhost' IDENTIFIED WITH mysql_native_password BY 'MyNewPass1!';GRANT ALL PRIVILEGES ON lotr.* TO 'sam'@'localhost';```Now we can access the database with this user from the ec2 instance. So If I installed a web app on this instance, I could use this username and password.However, if you want to be able to access the database from anywhere else, First, we have to create a new user that can access this database from any host.```mysqlCREATE USER 'frodo'@'%' IDENTIFIED WITH mysql_native_password BY 'MyNewPass1!';GRANT ALL PRIVILEGES ON *.* TO 'frodo'@'%';```
MySQL on AWS EC2 Amazon Linux 2
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLk45RHdhVGhocHNn
Learn how to store your web app's image files in an s3 bucket by uploading them directly to the bucket.There is a different version of this tutorial that I suggest you check out too: https://youtu.be/eQAIojcArRY🔗Code:https://github.com/Sam-Meech-Ward/s3-direct-upload🔗Other tutorials:Upload Images to S3 from Node Back End: https://youtu.be/eQAIojcArRYS3 bucket for a static website: https://youtu.be/RoY3ekCCxKcImage upload without s3: https://sammeechward.com/uploading-images-express-and-react/🔗Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardTwitter: https://twitter.com/Meech_WardGithub: https://github.com/orgs/Sam-Meech-Ward
Upload Images Directly to S3 from Front End
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLnlHWWVZSnBSV1BN
Learn how to use jest mock functions to mock a database in an HTTP server. 🔗 Previous Videos:Introduction to Writing Automated Tests With Jest: https://youtu.be/hz0_q1MJa2kIntroduction to TDD in JavaScript: https://youtu.be/89Pl2Uok8xcTesting Node Server with Jest and Supertest: https://youtu.be/FKnzS_icp20Dependency Injection: https://youtu.be/yOC0e0NMZ-E🔗 Text version:https://sammeechward.com/mocking-a-database-with-jest-in-javascript/🔗 Code:https://github.com/Sam-Meech-Ward/express_jest_and_mocks🔗 Jest Mock Functions:https://jestjs.io/docs/mock-functions🔗 Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-WardTikTok: https://www.tiktok.com/@meech.s.ward
Mocking a Database in Node with Jest
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLklEakY2LXMxaEdr
Learn how to use dependency injection in a JavaScript application to decouple a MySQL database from an express HTTP server. This will help us be able to mock the database for a future video.🔗 Text version:https://sammeechward.com/dependency-injection-in-javascript/🔗 Code:https://github.com/Sam-Meech-Ward/dependency_injection_js🔗 Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-WardTikTok: https://www.tiktok.com/@meech.s.ward
Dependency Injection in JavaScript
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLnlPQzBlME5NWi1F
Learn how to test a node.js HTTP server using Jest and Supertest.🔗 Previous Videos:Introduction to Writing Automated Tests With Jest: https://youtu.be/hz0_q1MJa2kIntroduction to TDD in JavaScript: https://youtu.be/89Pl2Uok8xc🔗 Text version:https://sammeechward.com/testing-an-express-app-with-supertest-and-jest/🔗 Using Jest with ESModules:https://sammeechward.com/jest-and-esmodules/🔗 Code:https://github.com/Sam-Meech-Ward/express_jest_and_mocks/tree/express🔗 Moar LinksMy Website: https://www.sammeechward.comInstagram: https://www.instagram.com/meech_wardGithub: https://github.com/orgs/Sam-Meech-WardTikTok: https://www.tiktok.com/@meech.s.ward
Testing Node Server with Jest and Supertest
YouTube Video VVU2YVRMdUlfajQtMHdpRFN6bWFQY3RRLkZLbnpTX2ljcDIw
Load More... Subscribe