This tutorial explains two fairly new Array methods - with and copyWithin. One creates a shallow copy of the array and the other is a destructive method. NodeJS support - https://node.green/ Array with reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/with Array copyWithin reference - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin Code from Video - https://gist.github.com/prof3ssorSt3v3/30018890d5876cbc8771935f7d62fb22

This tutorial covers how to install MySQL on your computer and then how to integrate the mysql2 npm package with an Express application to create an API that uses MySQL as the backend. Websites referenced in the video: https://sidorares.github.io/node-mysql2/docs https://dev.mysql.com/doc/refman/8.4/en/ https://http.cat/ https://www.mamp.info/en/downloads/ https://ampps.com/wamp/ https://www.apachefriends.org/ Code from tutorial: https://github.com/prof3ssorSt3v3/mysql-node 0:00 Overview 1:40 MAMP setup 3:50 MySQL from Terminal 8:21 Creating Users and Database 14:22 Project config 19:05 Connecting to MySQL 22:55 Managing DB from Node 31:10 API endpoints 36:08 SELECT with query method 41:16 Errors and HTTP status codes 46:00 INSERT with execute method 53:09 UPDATE with execute 58:04 Testing in browser & postman

In this tutorial I explain how to use a SQL based relational database using SQLite3 as the example DB. An Express-based API is created that reads and writes data from the SQLite database. SQLite NPM package - https://www.npmjs.com/package/sqlite SQLite Tutorial - https://www.sqlitetutorial.net/sqlite-nodejs/connect/ SQLite Github link - https://github.com/TryGhost/node-sqlite3 Express Website - https://expressjs.com/ Code from this tutorial - https://github.com/prof3ssorSt3v3/node-sqlite3 MySQL Video Playlist - https://www.youtube.com/watch?v=a9W7OpS4LfI&list=PLyuRouwmQCjlXvBkTfGeDTq79r9_GoMt9 ExpressJS Playlist - https://www.youtube.com/watch?v=cMbJ8hatqJ8&list=PLyuRouwmQCjne87u8XUdOM5oCl7vI2vVL NodeJS Playlist - https://www.youtube.com/watch?v=fO8ontWnlwk&list=PLyuRouwmQCjnD0CgJYfcLnQ0LnlZHrs6B Postman tutorial - https://www.youtube.com/watch?v=t5n07Ybz7yI 0:00 introduction 2:00 project setup 4:30 connecting to the database 11:00 creating tables and run method 17:38 setting up the API 19:15 creating API endpoints 24:15 SQLite methods and POSTMAN 26:20 SELECTing all data 34:20 INSERTing new data 41:00 DELETEing records

Did you know that you can run multiple versions of Node.js on your computer at the same time? All you need to do is install the terminal app - NVM. Node.js website: https://nodejs.org/en NVM repo: https://github.com/nvm-sh/nvm NVM-windows repo: https://github.com/coreybutler/nvm-windows

Now supported across all browsers, the inert attribute and property can be used to mark content that you do not want a user to be able to interact with. Code from tutorial: https://github.com/prof3ssorSt3v3/probable-lamp MDN reference for inert: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert Web.dev article on inert: https://web.dev/articles/inert

This tutorial walks through three different types of websites and how they can be hosted using Git, Github, Github Pages, and Vercel. First is a basic static HTML site hosted on both Github Pages and Vercel. Second is a web app created with Vite and hosted on Vercel using the command line tools to deploy. Third is an API built with Node.js and Express, which is deployed through Github to Vercel. Static site github repo: https://github.com/prof3ssorSt3v3/vercel-ghpages Vite site github repo: https://github.com/prof3ssorSt3v3/vercel-vite Node Express api github repo: https://github.com/prof3ssorSt3v3/vercel-express 0:00 Static sites with Github Pages and Vercel 10:05 Vite projects on Vercel from CLI 21:38 Node.js and Express Apps on Vercel from Github

Recently, fully browser baseline support was reached for the Object groupBy method, which is very useful for working with data. This tutorial explains how the method works and shows a practical demonstration of the method in the browser. Code from video - https://github.com/prof3ssorSt3v3/literate-waffle MDN reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy CanIuse reference: https://caniuse.com/?search=groupBy

This tutorial explains how you can build custom web components and include embedded SVG icons as part of the component without requiring the web site developers, who use your component, to have to download more that just the one JavaScript file. Code from tutorial: git@github.com:prof3ssorSt3v3/stunning-fortnight.git URLEncoder website - https://www.urlencoder.org/

When you build web components, you are generally building a new feature that is intended to be used by other developers and on multiple websites. This means planning the features and building them in a way that won't cause issues on other other websites. This tutorial explains how to use CustomEvents, CSS Properties, and private properties inside the component class. Code from the video: https://github.com/prof3ssorSt3v3/cuddly-octo-couscous Custom Web Component Playlist: https://www.youtube.com/playlist?list=PLyuRouwmQCjnENQk6NJlckZRXOfQP0x5B

This tutorial has two topics - first is how to make an animated circular progress meter using SVG, CSS, and JS. The second part examines how to monitor progress of a file download using the JavaScript fetch method. Code from video: https://gist.github.com/prof3ssorSt3v3/c13003e4ff199bf6ea15843352d549e7

When writing JavaScript there are going to be times when you want to use a variable or call a function, but you are not sure if it exists, then this is how you can handle these situations. Code from video: https://gist.github.com/prof3ssorSt3v3/4a1ecfb307ca636e315d038b9cdd95fc

When writing JavaScript and especially when using frameworks like React, it is important to understand the difference between statements and expressions so you can understand the error messages that you can get. Code from video: https://gist.github.com/prof3ssorSt3v3/74c6a20e51a1047293cf7fce1775d55e

The fully supported HTML dialog element and the newly released Popover API have some overlapping functionality but also a lot of unique features. Watch this to understand the differences. Code from video: https://gist.github.com/prof3ssorSt3v3/f23929f66fb3cd8773f3d7b073df30a6 MDN reference for dialog element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog MDN reference for popover api: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API CanIUse coverage for popover api: https://caniuse.com/mdn-api_htmlelement_popover 0:00 Intro 0:45 Dialog element 4:45 Default Styling 6:00 Modal Concepts 8:27 Dialog Events 9:20 Dialog Return Values 11:55 Dialog Open Attribute 13:15 Popover API 16:18 popovertargetaction 18:00 Popover Events 21:21 More Styling

This tutorial walks you through every thing you need to know about Puppeteer and headless browsers, so you can automate website testing, web scraping, fetching and downloading content, and more. code from video: https://github.com/prof3ssorSt3v3/puppeteer-video Puppeteer Reference: https://pptr.dev/ Puppeteer Extra Stealth Plugin: https://www.npmjs.com/package/puppeteer-extra-plugin-stealth Chrome Dev Tools Protocol: https://chromedevtools.github.io/devtools-protocol/ Pages for testing headless status: https://arh.antoinevastel.com/bots/areyouheadless https://bot.sannysoft.com/ 0:00:00 intro and install 0:03:26 basic commands 0:18:50 interface testing 0:47:26 web scraping 1:05:33 downloading images and files

This full course covers every aspect of working with fetch from beginner to expert. It demonstrates and explains alternate syntaxes, the related components - Request, Response, URL, URLSearchParams, Promises, Headers, File and Blob, plus how to abort fetch calls, handling download progress, understanding CORS, generating new content in your pages based on fetched data, handling multiple requests in sequence or in parallel. GitHub repo with full project source: https://github.com/prof3ssorSt3v3/all-the-fetch Content-Security-Policy reference: https://content-security-policy.com/ HTTP Headers reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers Forbidden Header names: https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name Donate here - https://ko-fi.com/prof3ssorst3v3# - to support this channel 0:00:00 Introduction & Setup 0:03:20 1: Basic Fetch & Promises 0:16:40 2: Async Await Alternate 0:21:35 3: URL, Request, Headers 0:32:35 4: Response Objects 0:45:20 5: Generating Content 0:58:41 6: API Keys, Credentials 1:24:45 7: Uploading Data & Files 1:39:34 8: Understanding CORS 1:59:15 9: Multiple Request Management 2:09:17 10: Abort 2:16:03 Bonus: Progress