Steve Griffith - Prof3ssorSt3v3
Steve Griffith - Prof3ssorSt3v3
  • 933
  • 13 137 882

Відео

Up and Running with SQLite3 in a NodeJS APIUp and Running with SQLite3 in a NodeJS API
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 NodeJSUsing NVM to Leverage Multiple Versions of NodeJS
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 PropertyEnhanced UI control and Responsible Accessibility with the HTML INERT Property
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 VercelWeb Hosting with Github and Vercel
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 MethodHow to Use the New JS Object GroupBy Method
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 IconsWeb Components with Embedded Icons
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 ComponentsCustom Events Dispatched from Web Components
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 AnimationDownload Progress Monitoring with SVG Animation
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 VariablesChecking for the Existence of JavaScript Variables
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 StatementsThe Difference between JS Expressions and Statements
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 APIRevealing the Differences between HTML Dialogs and the Popover API
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 DownloadingPuppeteer: Headless Automated Testing, Scraping, and Downloading
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 APITen Steps to Mastering the Fetch API
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 innerTextImportant differences between textContent and innerText
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 methodDeep Dive into Array from method
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...

КОМЕНТАРІ

  • @peytube
    @peytube 14 годин тому

    incredible teach

  • @natb007
    @natb007 22 години тому

    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

  • @pasduroc5422
    @pasduroc5422 23 години тому

    Really good videos !! (the fours) Thanks

  • @pulserudeus7968
    @pulserudeus7968 День тому

    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 🙌

  • @pulserudeus7968
    @pulserudeus7968 День тому

    This is awesome! Thanks Steve 🙌

  • @adrianjarosz7028
    @adrianjarosz7028 2 дні тому

    there is little mistake, focus in/out bubble and focus/blur do not

  • @stefanotosolini
    @stefanotosolini 3 дні тому

    Grazie.

  • @majklzumberi1761
    @majklzumberi1761 3 дні тому

    So we can use cache storage without service workers?

  • @FnDraws
    @FnDraws 3 дні тому

    Interesting. Trying it in the console I get the following : a, e, undefined, d, b, c

  • @daniel_williams
    @daniel_williams 3 дні тому

    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♥

  • @orangelimesky
    @orangelimesky 3 дні тому

    David Attenborough of JavaScript YT Videos

  • @qwertgfhxc
    @qwertgfhxc 4 дні тому

    There's a VS Code plugin "es6-string-html" where you can add syntax highlighting to those long js template strings :-)

  • @dumchik7290
    @dumchik7290 4 дні тому

    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>

  • @prasadmadushan
    @prasadmadushan 4 дні тому

    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.

  • @zloy_ax8496
    @zloy_ax8496 4 дні тому

    +

  • @zloy_ax8496
    @zloy_ax8496 4 дні тому

    +

  • @atlantic_love
    @atlantic_love 5 днів тому

    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.

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 4 дні тому

      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

    • @atlantic_love
      @atlantic_love 3 дні тому

      @@SteveGriffith-Prof3ssorSt3v3 Thanks for the great post! Lots to think about! The Node.js thing was why I was wanting to do something "local".

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 3 дні тому

      @atlantic_love node running on your computer or your husband's is still local. Just an extra step to set up.

  • @davidinmichael
    @davidinmichael 5 днів тому

    This is very comprehensive, thank you very much.

  • @Mari_Selalu_Berbuat_Kebaikan
    @Mari_Selalu_Berbuat_Kebaikan 6 днів тому

    Let's always do alot of good

  • @ngyang5113
    @ngyang5113 6 днів тому

    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?

  • @andredearaujorodrigues7725
    @andredearaujorodrigues7725 6 днів тому

    Tutorial too good! Amazing

  • @IvanMithun
    @IvanMithun 6 днів тому

    Thank you ,..

  • @abdallahazme4757
    @abdallahazme4757 7 днів тому

    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.

  • @rudrakshmishra2761
    @rudrakshmishra2761 7 днів тому

    i swear i can almost hear the clicks of the magic mouse (it's driving me mad)

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 7 днів тому

      No magic mouse. Only a MacBook trackpad

    • @rudrakshmishra2761
      @rudrakshmishra2761 7 днів тому

      @@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

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 7 днів тому

      @@rudrakshmishra2761 depends on whatever mic I was using

  • @alexeyn2281
    @alexeyn2281 7 днів тому

    vladimir putin ? are you serious ?

  • @xavier-vc6fj
    @xavier-vc6fj 7 днів тому

    thank you

  • @85MA
    @85MA 8 днів тому

    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!

  • @mtcindianutube
    @mtcindianutube 8 днів тому

    Thanks Steve, iam first time watching a video on Sqlite. Awesome ❤❤

  • @TRMethu-cn8tc
    @TRMethu-cn8tc 8 днів тому

    Impressive, thank you ❤

  • @abdallahazme4757
    @abdallahazme4757 8 днів тому

    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

  • @RafaelSales55
    @RafaelSales55 8 днів тому

    thank you a lot, just in time when I was needing to learn about databases

  • @bostongreen1629
    @bostongreen1629 8 днів тому

    WOW, I guarantee this will decode makes sense of a lot of concepts when working with JS. BRAVO, the way you explain it

  • @averstrum6372
    @averstrum6372 8 днів тому

    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

  • @kettenbach
    @kettenbach 8 днів тому

    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}.

  • @paulh6933
    @paulh6933 8 днів тому

    is there a way to clean up? in your component, you created a listener, can it be destroyed?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 8 днів тому

      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().

  • @doriomer
    @doriomer 9 днів тому

    Thank you, clear explanation as always...

  • @notASimpleGuy
    @notASimpleGuy 9 днів тому

    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 ?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 8 днів тому

      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

  • @shanepereraedu
    @shanepereraedu 9 днів тому

    You have a great voice sir! 🎙️👌

  • @alexdin1565
    @alexdin1565 9 днів тому

    can do the same with videos?

  • @elvisz7667
    @elvisz7667 10 днів тому

    Thank you so so much

  • @fahdfuhaid573
    @fahdfuhaid573 11 днів тому

    Thanks ... very helpful series. i hope we see multi components put together to make a web app.

  • @benjarris8660
    @benjarris8660 11 днів тому

    Great video, really easy to follow, thanks for posting.

  • @LucianoClassicalGuitar
    @LucianoClassicalGuitar 12 днів тому

    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

  • @nextleveltech267
    @nextleveltech267 13 днів тому

    Thank you

  • @umbertopolanco4159
    @umbertopolanco4159 13 днів тому

    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?

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 8 днів тому

      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.

  • @algorithms_hub
    @algorithms_hub 14 днів тому

    Very helpful sir.

  • @atlantic_love
    @atlantic_love 14 днів тому

    It's a sad day when most web dev videos coming out now are centered around managing "versions of NodeJS".

    • @SteveGriffith-Prof3ssorSt3v3
      @SteveGriffith-Prof3ssorSt3v3 14 днів тому

      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.

  • @shahinza
    @shahinza 14 днів тому

    Thank you professor 🙏

  • @djlee0721
    @djlee0721 15 днів тому

    👏🏻👏🏻👏🏻

  • @JohnDoe-sz5jh
    @JohnDoe-sz5jh 15 днів тому

    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.

    • @goffyfoot82
      @goffyfoot82 14 днів тому

      { "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