🚨 IMPORTANT:

Part 2 (Face Recognition) Tutorial: https://youtu.be/AZ4PdALMqx0

In this video we will be setting up real time face detection through a webcam using AI. This AI is so quick that we are able to draw in real time the various faces and expressions of every person in the video without much performance overhead. We will be using the Face API JS library built on Tensor Flow to setup the face detection.

By the end of this video you will have fully functional real time face detection on your site which can be used with any webcam or phone camera. If you want to see a part two of this video make sure to let me know in the comments below.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/Face-Detection-JavaScript
Face API Library: https://github.com/justadudewhohacks/face-api.js
Models Used: https://github.com/WebDevSimplified/Face-Detection-JavaScript/tree/master/models


🧠 Concepts Covered:

- Streaming a webcam through HTML
- Using Face API to detect faces in real time
- Drawing facial landmarks in real time
- Determining emotion through facial expressions in real time


🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#AI #FaceDetection #JavaScript

Build Real Time Face Detection With JavaScript

Projects are the best way to learn JavaScript, and a calculator is one of the best projects to choose. A calculator covers all the complex interactions with UI and JavaScript while still being simple enough for people of any skill level.

In this video I will walk you through the steps it takes to build a completely modern calculator using JavaScript best practices. If you want to learn JavaScript or improve your JavaScript skill this is a must do project.

📚 Materials:

Code: https://github.com/WebDevSimplified/Vanilla-JavaScript-Calculator

🧠 Concepts Covered:
 
- How to use ES6 classes to organize code
- How to sync JavaScript code with a UI
- CSS Grid
- Flexbox
- The best way to cleanly handle user input
- How to debug complicated edge cases

🌎 Find Me Here:

Twitter: https://twitter.com/DevSimplified
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#JavaScript #WebDevelopment #Programming

Build A Calculator With JavaScript Tutorial

Check out my courses and become more creative!
https://developedbyed.com/

🎁Get all files, projects, exclusive videos and more on my Patreon: https://www.patreon.com/dev_ed

In this episode we are going to build out a project using python. If you are a python beginner this simple application will give you some good practice.
We will be using python to make requests and do webscraping on amazon.de.  If you have difficulty following along, I highly recommend my python for beginners tutorial which will teach you all the basics of python in 1 hour.

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin


#python #webscraping

Build A Python App That Tracks Amazon Prices!

A fullstack project course that teaches you how to build a backend and frontend from scratch then deploy it. 

Includes the follow technologies:

- React
- TypeScript
- GraphQL
- URQL/Apollo
- Node.js
- PostgreSQL
- MikroORM/TypeORM
- Redis
- Next.js
- TypeGraphQL
- Chakra

Code: https://github.com/benawad/lireddit

Links from video:
Learn vim: https://benawad.com/vim
How to install PostgreSQL: https://www.google.com/search?q=how+to+install+postgresql
How to install Redis: https://www.google.com/search?q=how+to+install+redis
Argon2 vs bcrypt: https://security.stackexchange.com/questions/193351/in-2018-what-is-the-recommended-hash-to-store-passwords-bcrypt-scrypt-argon2
React snippets: https://gist.github.com/benawad/1e9dd01994f78489306fbfd6f7b01cd3#file-snippets-typescriptreact-json
Simple pagination: https://github.com/FormidableLabs/urql/blob/main/exchanges/graphcache/src/extras/simplePagination.ts
Node.js Docker: https://nodejs.org/en/docs/guides/nodejs-docker-webapp/
Next Apollo: https://github.com/adamsoffer/next-apollo/blob/master/src/withApollo.js

0:00:00 Intro
0:02:02 Node/TypeScript Setup
0:11:29 MikroORM Setup
0:39:50 Apollo Server Express Setup
0:47:32 MikroORM TypeGraphQL Crud
1:09:23 Register Resolver
1:23:27 Login Resolver
1:41:11 Session Authentication
2:03:06 Sessions Explained
2:08:24 Next.js + Chakra
2:32:36 URQL Basics
2:46:07 GraphQL Code Generator
2:53:16 Register Error Handling
3:10:57 NavBar
3:26:21 URQL Cache Updates
3:39:33 Logout
3:50:11 Next.js URQL SSR
4:12:34 Forgot Password
4:35:31 Change Password
5:22:14 Why Switching to TypeORM
5:25:27 Switching to TypeORM
5:50:44 Many to One
6:02:26 Global Error Handling
6:24:15 Next.js Query Params
6:31:26 URQL Pagination Start
6:50:02  Adding Mock Data
7:01:19 Chakra Styling
7:12:37 More URQL Pagination
7:32:07 Fix Mock Data
7:40:41 URQL Pagination Has More
8:00:53 GraphQL Fetching Relationships
8:18:43 GraphQL Field Permissions
8:23:16 Many to Many
8:46:46 Invalidate Queries
9:00:49 Upvote UI
9:23:11 Change Vote
9:31:57 Write Fragments
9:39:00 Vote Status
9:51:57 SSR Cookie Forwarding
10:04:08 Single Post
10:21:55 Delete Post
10:38:19 Edit Post
11:09:23 DataLoader
11:40:06 Cache Reset
11:43:55 Deploy Backend
11:52:56 Docker
12:03:29 Environment Variables
12:14:55 DB Migrations
12:21:40 Docker Hub
12:28:23 DNS
12:36:39 Deploy Frontend
12:57:28 Fix Cookie
13:03:07 Switch to Apollo

#benawad #fullstack #tutorial

----
Checkout my side projects:

If you're into cooking: https://www.mysaffronapp.com/

----
Join the Discord:  https://discord.gg/Vehs99V

----
Patreon: https://www.patreon.com/benawad

----
Follow Me Online Here:

Twitter: https://twitter.com/benawad
Medium: https://medium.com/@benawad
GitHub: https://github.com/benawad
Twitch: https://www.twitch.tv/benawad
Facebook: https://www.facebook.com/benawad97/
LinkedIn: https://www.linkedin.com/in/benawad/
Instagram: http://instagram.com/benawad97
TikTok: https://www.tiktok.com/@benawad ​
​
----
Follow me online: https://voidpet.com/benawad
#benawad

Fullstack React GraphQL TypeScript Tutorial

Learning Backend Web Development in C# by writing my first Microservice. Github repository data is pulled into my database every 10 minutes so that we can display a near realtime software portfolio on my website. In the future we will also add more data to my database so that project pages can be automatically generated (with articles and images etc)

The goal was to build a scalable background microservices architecture, where I can easily write new services independently and then seamlessly plug them into my server on a Cron schedule. I spent most of this video reading documentation and learning ASP .NET Core, Hangfire, Microsoft Entity Framework, object mappers and how to best organize my services to easily extend them in the future. I have found a solution that works well for me, only requiring two lines of code to add a service to my scheduler. This is me learning through doing. Roughly 20 hours of coding went into this video. See below for technologies used in more detail.

Next Video: https://youtu.be/eDjGBOxuuZs
Previous Video: https://youtu.be/1-YPj5Vt0oQ

Technologies Used
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Backend: C# with ASP .NET Core
Database: MySQL
Scheduler: Hangfire open source background processing library
API: Github
Object Mapper: Microsoft Entity Framework Core (Maps MySQL into objects)
JSON Mapper: Newtonsoft (Maps Github API response into objects)
Editor: VSCode with Material Oceanic Theme

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://devoncrawford.io
Twitter: https://twitter.com/DevonCrawford13
Snapchat: https://www.snapchat.com/add/devoncrawfordyt
Instagram: https://www.instagram.com/devoncrawford_/
Github: https://github.com/devoncrawford
Discord: https://discord.gg/sU2fur9
Patreon: https://www.patreon.com/devoncrawford

Gear
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- Video Editing Software (Premiere Pro CC): https://goo.gl/rKx66D
- All Adobe Apps (I use this plan): https://goo.gl/hrTYFS
- Keyboard (Velocifire TKL01) : https://amzn.to/2AQTjJQ
- Monitors (Dell U2518D) : https://amzn.to/2AQQmco
- Webcam (Logitech C920): https://amzn.to/2Cw588c
- Desk Microphone (Blue Yeti): https://amzn.to/2FPFmzi
- DSLR (Canon T7i): https://amzn.to/2T54mpZ
- Wide Lens (Tokina 11-16mm F2.8): https://amzn.to/2MlpvcO
- Full list of gear: https://devoncrawford.io/gear

Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Bubbymane - Forever w/ Tony
Link: https://soundcloud.com/yungbubby/forever-w-tony

Puar - In The Rough
Link: https://soundcloud.com/puarbeats/in-the-rough

DaRu - MXTIXN X Backwood Boy - Pour Dat Phonk
Link: https://soundcloud.com/daru-4/mxtixn-x-backwood-boy-pour-dat-phonk

shao - runnin' up w/ SOUDIERE
Link: https://soundcloud.com/prodbyshao/runnin-up-ww-soudiere

Learning a new Programming Language | Developer Vlog (Backend Microservices)

I've wanted to make an LED Music Visualizer for the past year so I finally just did it. I had many problems designing the circuitry and although it is not perfect it actually turned out to be a pretty good result. The coding in this project was simple in comparison to the hardware and although this is not a programming video I want to show people why both hardware and software are interesting especially when you are able to combine them both so that you have full control over the system you designed. Next few videos will be some large software projects I developed in my spare time, meaning I can show you code!! I'm trying to start a community of passionate software/electronics hobbyists and entrepreneurs so join the newly created discord channel if you are interested, I will be active a lot of the time as I just got the app on my phone. 

!! Special shout out to Math Encounters Blog for the amazing Frequency to Voltage Converter circuit !!
Link: http://mathscinotes.com/2014/03/a-simple-frequency-to-voltage-converter/

NEWLY CREATED DISCORD CHANNEL: https://discord.gg/tb6J6F4

Next Video: https://youtu.be/uKmjvCPllWQ
Previous Video: https://youtu.be/S20NcDLF_t4

|| Technologies / parts used ||
RGB LED 300 Pixels (WS2812B): https://goo.gl/YoFYP5
Arduino: https://goo.gl/Ah6GGG

View the code on github: https://github.com/DevonCrawford/LED-Music-Visualizer

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://devoncrawford.io
Twitter: https://twitter.com/DevonCrawford13
Snapchat: https://www.snapchat.com/add/devoncrawfordyt
Instagram: https://www.instagram.com/devoncrawford_/
Github: https://github.com/devoncrawford
Discord: https://discord.gg/sU2fur9
Patreon: https://www.patreon.com/devoncrawford

Gear
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- Video Editing Software (Premiere Pro CC): https://goo.gl/rKx66D
- All Adobe Apps (I use this plan): https://goo.gl/hrTYFS
- Keyboard (Velocifire TKL01) : https://amzn.to/2AQTjJQ
- Monitors (Dell U2518D) : https://amzn.to/2AQQmco
- Webcam (Logitech C920): https://amzn.to/2Cw588c
- Desk Microphone (Blue Yeti): https://amzn.to/2FPFmzi
- DSLR (Canon T7i): https://amzn.to/2T54mpZ
- Wide Lens (Tokina 11-16mm F2.8): https://amzn.to/2MlpvcO
- Full list of gear: https://devoncrawford.io/gear

Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Karma Rhythm - fruit salad
Link: https://soundcloud.com/karmarhythm/fruit-salad

Complexion - The Future Beats Show 173 Featuring Funk Bast*rd
Link: https://soundcloud.com/complexion/the-future-beats-show-173-featuring-funk-bastrd

DIY LED Music Visualizer | Real-Time Animations (Arduino)

Trying to learn video processing by writing a program that edits my videos (lol).

Patreon: https://patreon.com/devoncrawford
My Editing Software (Adobe Premiere): https://goo.gl/rKx66D
Source Code for this project: https://github.com/DevonCrawford/Video-Editing-Automation

The goal is to build algorithmic building blocks that a human video editor can use in place of their manual labor. This means a partially-autonomous editing workflow, where the human can strategically use the toolkit of algorithms to achieve their desired results. This project uses the FFmpeg library to handle much of the heavy lifting of video processing and intends to build a library on top of FFmpeg without changing the FFmpeg source code. I have many ideas for future algorithms that can be implemented, so let me know if you're interested in this kind of development!

Also note, this was only three weeks of work. The code is not fully tested or documented (the source code is commented though). The random editing function is just a demo to showcase the clip and sequence functionality (cutting clips and stitching them together in a sequence). I was genuinely surprised to see how well the random function performed. I thought it was going to be awful but it wasn't that awful. I would love to use AI in this project, but I've never done AI so I figured I would get a solid base in video/image processing first.

Next Video:
Previous Video: https://youtu.be/l5VtPY7FBw4

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: https://devoncrawford.io
Twitter: https://twitter.com/DevonCrawford13
Snapchat: https://www.snapchat.com/add/devoncrawfordyt
Instagram: https://www.instagram.com/devoncrawford_/
Github: https://github.com/devoncrawford
Discord: https://discord.gg/sU2fur9
Patreon: https://www.patreon.com/devoncrawford

Gear
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
- Video Editing Software (Premiere Pro CC): https://goo.gl/rKx66D
- All Adobe Apps (I use this plan): https://goo.gl/hrTYFS
- Keyboard (Velocifire TKL01): https://amzn.to/2AQTjJQ
- Monitors (Dell U2518D) : https://amzn.to/2AQQmco
- Webcam (Logitech C920): https://amzn.to/2Cw588c
- Desk Microphone (Blue Yeti): https://amzn.to/2FPFmzi
- DSLR (Canon T7i): https://amzn.to/2T54mpZ
- Wide Lens (Tokina 11-16mm F2.8): https://amzn.to/2MlpvcO
- The full list of gear: https://devoncrawford.io/gear

Music
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
A M A I - MINNA @ 2:59
Link: https://soundcloud.com/amaixamai/minna

EMUNE - 100% emune @ 5:45
Link: https://soundcloud.com/emune/e100

eugene cam - freeze
Link: https://soundcloud.com/eugenecam/freeze

t1e.6k - CROSS LIKE JORDAN
Link: https://soundcloud.com/yungtie/cross-like-jordan

Bearfoot - broke (n)
Link: https://soundcloud.com/bearfoott/broke-n

Writing a Program that Edits my Videos

In this video we will build a clean coded responsive mobile friendly HTML5 website for a fictional web design company. We will go over semantic HTML tags like header and footer as well as the basics of HTML and CSS. This is a great project for beginners.

Like this? Check out my 21 hour HTML/CSS course:
https://www.udemy.com/course/modern-html-css-from-the-beginning/?referralCode=EB0470C43F3C3E9AA306

CODE DOWNLOAD:
http://www.traversymedia.com/downloads/acme_website.zip

SUGGESTED VIDEOS: 
HTML Crash Course For Absolute Beginners - 
https://www.youtube.com/watch?v=UB1O30fR-EE
Product Landing Page (CSS Grid) - https://www.youtube.com/watch?v=61R5kn_kYwY&feature=youtu.be

BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
http://www.twitter.com/traversymedia
http://www.instagram.com/traversymedia

NEW DISCORD CHAT SERVER:
https://discord.gg/traversymedia