![Steve Griffith - Prof3ssorSt3v3](/img/default-banner.jpg)
- 933
- 13 137 882
Steve Griffith - Prof3ssorSt3v3
Canada
Приєднався 16 вер 2013
The videos on this channel are largely about web design & development with a good dose of mobile development thrown in just for fun.
I started doing web development back in 1997. My current day job is Coordinator of the Mobile Application Design & Development Program at Algonquin College in Ottawa, Canada.
www.algonquincollege.com/mediaanddesign/program/mobile-application-design-and-development/
I hope that these videos help people learn to love JavaScript as much as I do.
For best results it has been shown that watching tutorials at 1.5 speed helps to improve both understanding and retention.
I started doing web development back in 1997. My current day job is Coordinator of the Mobile Application Design & Development Program at Algonquin College in Ottawa, Canada.
www.algonquincollege.com/mediaanddesign/program/mobile-application-design-and-development/
I hope that these videos help people learn to love JavaScript as much as I do.
For best results it has been shown that watching tutorials at 1.5 speed helps to improve both understanding and retention.
Відео
Up and Running with SQLite3 in a NodeJS API
Переглядів 1 тис.8 днів тому
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 - www.npmjs.com/package/sqlite SQLite Tutorial - www.sqlitetutorial.net/sqlite-nodejs/connect/ SQLite Github link - github.com/TryGhost/node-sqlite3 Express Website - expressjs.com/ Code fro...
Using NVM to Leverage Multiple Versions of NodeJS
Переглядів 47415 днів тому
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: nodejs.org/en NVM repo: github.com/nvm-sh/nvm NVM-windows repo: github.com/coreybutler/nvm-windows
Enhanced UI control and Responsible Accessibility with the HTML INERT Property
Переглядів 1,5 тис.22 дні тому
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: github.com/prof3ssorSt3v3/probable-lamp MDN reference for inert: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert Web.dev article on inert: web.dev/articles/inert
Web Hosting with Github and Vercel
Переглядів 90528 днів тому
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...
How to Use the New JS Object GroupBy Method
Переглядів 3,4 тис.Місяць тому
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 - github.com/prof3ssorSt3v3/literate-waffle MDN reference: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/grou...
Web Components with Embedded Icons
Переглядів 979Місяць тому
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 - www.urlencoder.org/
Custom Events Dispatched from Web Components
Переглядів 1,4 тис.Місяць тому
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: github...
Download Progress Monitoring with SVG Animation
Переглядів 1,2 тис.Місяць тому
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: gist.github.com/prof3ssorSt3v3/c13003e4ff199bf6ea15843352d549e7
Checking for the Existence of JavaScript Variables
Переглядів 3,3 тис.11 місяців тому
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: gist.github.com/prof3ssorSt3v3/4a1ecfb307ca636e315d038b9cdd95fc
The Difference between JS Expressions and Statements
Переглядів 6 тис.11 місяців тому
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: gist.github.com/prof3ssorSt3v3/74c6a20e51a1047293cf7fce1775d55e
Revealing the Differences between HTML Dialogs and the Popover API
Переглядів 7 тис.Рік тому
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: gist.github.com/prof3ssorSt3v3/f23929f66fb3cd8773f3d7b073df30a6 MDN reference for dialog element: developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog MDN reference for popover api: develo...
Puppeteer: Headless Automated Testing, Scraping, and Downloading
Переглядів 23 тис.Рік тому
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: github.com/prof3ssorSt3v3/puppeteer-video Puppeteer Reference: pptr.dev/ Puppeteer Extra Stealth Plugin: www.npmjs.com/package/puppeteer-extra-plugin-stealth Chrome Dev Tools Protocol: ...
Ten Steps to Mastering the Fetch API
Переглядів 41 тис.Рік тому
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 request...
Important differences between textContent and innerText
Переглядів 2,3 тис.Рік тому
Did you know that textContent and innerText, while similar properties, actually have differences in their values that could impact your project? Code from video: gist.github.com/prof3ssorSt3v3/77a9084e220c8dcb16a5ed7ae1d64a72
Deep Dive into Array from method
Переглядів 2,6 тис.Рік тому
The basic use of Array.from is to create a shallow copy of an iterable object. However, there are two other parameters for the method - a map function and a this argument. And what about times when you need to iterate over an Object that is not natively iterable? Learn how here. Code gist: gist.github.com/prof3ssorSt3v3/58bbd1d0976e93d779437bfcd6174de5 video about basic Array.from method - ua-c...
incredible teach
Hello Professor Steve,thank you so much for the great videos. Can I still use this tutorial in 2024, or has too much changed in the meantime? Greetings from France
Really good videos !! (the fours) Thanks
that's smooth! thought I need to use something like a socket, but nope 🤯 Very very cool! I don't need to use any frontend frameworks after watching a couple of your vids thanks Steve 🙌
This is awesome! Thanks Steve 🙌
there is little mistake, focus in/out bubble and focus/blur do not
Grazie.
Thank you very much 😀🙏❤️
So we can use cache storage without service workers?
Absolutely. I have a video on file handling for web apps where I talk about that a lot
Interesting. Trying it in the console I get the following : a, e, undefined, d, b, c
Can't thank you enough for your effort to make such amazing tutorial. It was fun to watch and clear enough to understand. Take love professor♥
David Attenborough of JavaScript YT Videos
There's a VS Code plugin "es6-string-html" where you can add syntax highlighting to those long js template strings :-)
Below meter tags show green color in chrome and yellow color in firefox. Why? <meter min="0" max="1" low="0.25" high="0.75" value="0.75" optimum="0.8"></meter> <meter min="0" max="1" low="0.25" high="0.75" value="0.25" optimum="0.2"></meter>
That is perfect explanation, I love when you say "r" root element and 1 em ..... that is my level of expectation, and rarely someone go that level.
+
+
I really need help. What I am wanting to do is make a small web app that does very little. My husband has high blood pressure, and I would like to make something that allows him to input his BP readings and save them, and to be able to look at graphs showing things like his BP average for the week. I know a little JavaScript, HTML and CSS. Is there possibly a way to do something like this from within a single folder? I'd like to copy the app over to his computer.
Building something like that is not too hard. An experienced developer could put it together in a day or two. Data can be saved locally (on your computer) using LocalStorage, IndexedDB, Cache API, or even cookies. The hard part is meeting the security restrictions for the browser. The pages have to be opened through a web server and localhost or some real url. You said you wanted it local so it has to be through localhost. It can't be done just opening a file in the browser like C:/Users/Files/mypage.html, the url has to start with With the storage options I listed before, you are still at the mercy of the browser deciding when it wants to delete the data. If loading the web page via localhost then you can actually save a file locally on the computer via JavaScript and then open it again via JavaScript. If you install Node.js on your computer and your husband's computer then you can easily build the website along with a Node.js module that creates the web server to load your HTML over http. It's a lot of moving parts but none are really that difficult on their own. Here is a tutorial about handling files from web pages. - ua-cam.com/video/zq2xD-xuIG4/v-deo.html
@@SteveGriffith-Prof3ssorSt3v3 Thanks for the great post! Lots to think about! The Node.js thing was why I was wanting to do something "local".
@atlantic_love node running on your computer or your husband's is still local. Just an extra step to set up.
This is very comprehensive, thank you very much.
Let's always do alot of good
i saw at the previous video that postMessage to service worker is using the navigator.serviceWorker.controller but at this video u do it differently, which is navigator.serviceWorker.ready.... , both of it is ok to be use isit or there is thing that we need to be aware of?
Tutorial too good! Amazing
Thank you ,..
This was so beautiful, you might think I commented on the wrong video but no. Programing is like magic and it's so beautiful magic as well.
i swear i can almost hear the clicks of the magic mouse (it's driving me mad)
No magic mouse. Only a MacBook trackpad
@@SteveGriffith-Prof3ssorSt3v3 eyy prof, didn't expect a reply on a 5y old video, me but that's interesting, i didn't expect MacBook clicks to be this loud
@@rudrakshmishra2761 depends on whatever mic I was using
vladimir putin ? are you serious ?
всегда.
@@SteveGriffith-Prof3ssorSt3v3 он же убийца, садист, военный преступник
thank you
Dear Sir, Thank you for uploading high-quality content. I recently watched some of your CSS tutorials as I started to learn web development in my 40s :), your teaching style is amazing and I am very impressed. Your clear and detailed explanations make learning easy and enjoyable. Hats off to you!
Thanks Steve, iam first time watching a video on Sqlite. Awesome ❤❤
Impressive, thank you ❤
Thank you so much sir! I really like your teaching style, no flashy edit, no colory stuff just good explantions of concepts, just to the point. I really wonder if you could have the time to make videos for basic web apis outside the flashy now days frameworks
thank you a lot, just in time when I was needing to learn about databases
WOW, I guarantee this will decode makes sense of a lot of concepts when working with JS. BRAVO, the way you explain it
Edit: in 2019-april-2 in [email protected] the body-parser middleware is included in express, so you don't need to install body-parser separately anymore
Great content and tutorial as always. Just missed the biggest enemy of all {Sleepy Joe, he has no clue of all the damage he's done}.
is there a way to clean up? in your component, you created a listener, can it be destroyed?
Absolutely. In one of the other videos in this playlist I talked about using the disconnectedCallback() method in the component class. It is called when the component is removed from the page. You would use a standard removeEventListener call to delete the listener inside of disconnectedCallback().
Thank you, clear explanation as always...
Nice playlist on custom web component. I think you should continue this, you can also add one on multiple different components "talking" to each other ?
Communication / messaging between tabs, windows, components, and service workers is covered in this playlist - ua-cam.com/play/PLyuRouwmQCjk-hvtzQSrCSxBd4S0nOMh9.html. Smaller scope than that would be messaging through custom events, covered in this - ua-cam.com/video/wmGmKSLfVCY/v-deo.html
You have a great voice sir! 🎙️👌
can do the same with videos?
Like this? - ua-cam.com/video/_2SvAepbCSg/v-deo.html
Thank you so so much
Thanks ... very helpful series. i hope we see multi components put together to make a web app.
Great video, really easy to follow, thanks for posting.
Steve, could you make a video maybe about Expo Go and how to go back back in SDK versions if it's even possible? Basically I am trying to fix Giftr Native but Expo SDK 49 is already deprecated and it won't work with the newer Expo Go
Probably not any time soon. I have videos planned out for the next couple.months
Thank you
Steve!!!! Thanks for your dedication to these awesome videos. So I'm using part of this tutorial for an app that I'm developing. Do you have a tutorial that would demonstrate saving the data to a server?
For uploading data, this tutorial covers all you need - ua-cam.com/video/2sQ9xiEAXNo/v-deo.html I have a playlist on MySQL - saving data in a MySQL database, I also have a playlist on PHP - building webpages and talking to the database. And I am currently recording a video on how to use SQLite in NodeJS to save data. It will be part of the NodeJs playlist.
Very helpful sir.
It's a sad day when most web dev videos coming out now are centered around managing "versions of NodeJS".
Not every project is built on the same day using the same version of Node. For backwards compatibility it is very useful to be able to work on older versions of a project using the version of Node that was used with that project. Nothing sad about a project that continues to be used after the version of Node increments.
Thank you professor 🙏
👏🏻👏🏻👏🏻
I like Volta much better. You can use Volta pin node@version npm@vesion to to the desired version in your package.json and when npm I it will automatically use the pin version.
{ "name": "your-project-name", "version": "1.0.0", "description": "Your project description", "main": "index.js", "scripts": { "start": "node index.js" }, "engines": { "node": ">=14.0.0 <=16.0.0", "npm": ">=6.0.0 <=7.0.0" }, "dependencies": { "your-dependencies": "^1.0.0" } } the engines field specifies that the project is compatible with Node.js versions between 14.0.0 and 16.0.0, and npm versions between 6.0.0 and 7.0.0. You can adjust these version ranges according to your needs. Using nvm If you're using nvm, you can create a .nvmrc file in your project directory specifying the Node.js version, You can add a preinstall script to your package.json to enforce the required Node.js and npm versions { "scripts": { "preinstall": "node check-versions.js", "start": "node index.js" }, "dependencies": { // your dependencies }, "engines": { "node": ">=14.0.0 <=16.0.0", "npm": ">=6.0.0 <=7.0.0" } } const semver = require('semver'); const { engines } = require('./package.json'); const nodeVersion = process.versions.node; const npmVersion = require('child_process').execSync('npm --version').toString().trim(); if (!semver.satisfies(nodeVersion, engines.node)) { console.error(`Required Node.js version ${engines.node} not satisfied with current version ${nodeVersion}.`); process.exit(1); } if (!semver.satisfies(npmVersion, engines.npm)) { console.error(`Required npm version ${engines.npm} not satisfied with current version ${npmVersion}.`); process. Exit(1); } it is nice to be able to do it yourself .... we had a math teacher who would let you bring in a calculator for tests and quizzes. You had to pull out the batteries before he would let you use it ...... always bring a #2 pencil just incase