Media is too big
VIEW IN TELEGRAM
35. Using Modules
Anjana explains how modules can be used in a browser or Node.js applications. Browser-based applications must use the type="module" attribute on a script block. In Node.js applications, modules either need an
#lesson
Anjana explains how modules can be used in a browser or Node.js applications. Browser-based applications must use the type="module" attribute on a script block. In Node.js applications, modules either need an
mjs extension or have type="module" specified in the package.json file.#lesson
Media is too big
VIEW IN TELEGRAM
36. Evolution of JS Tooling
Anjana discusses the history of JavaScript tooling and shares some advice for creating a balance between understanding the overwhelming amount of tools available today and choosing the right tools for your project.
#lesson
Anjana discusses the history of JavaScript tooling and shares some advice for creating a balance between understanding the overwhelming amount of tools available today and choosing the right tools for your project.
#lesson
Media is too big
VIEW IN TELEGRAM
37. Introduction to Vite
Anjana introduces Vite and explains why it's a valuable build tool for JavaScript developers. Vite is widely used and provides several of the necessary tools like a development server, code bundling, and a robust set of plugins.
#lesson
Anjana introduces Vite and explains why it's a valuable build tool for JavaScript developers. Vite is widely used and provides several of the necessary tools like a development server, code bundling, and a robust set of plugins.
#lesson
Media is too big
VIEW IN TELEGRAM
38. Creating a Vite Project
Anjana uses the create-vite command-line tool to scaffold a new Vite project. The tool asks a few questions about the type of project and adds the necessary dependencies to the package.json file. The dependencies are installed after the project is created and the development server is started.
#lesson
Anjana uses the create-vite command-line tool to scaffold a new Vite project. The tool asks a few questions about the type of project and adds the necessary dependencies to the package.json file. The dependencies are installed after the project is created and the development server is started.
#lesson
Media is too big
VIEW IN TELEGRAM
39. Exploring the Vite Project Code
Anjana walks through the project structure and explores the generated files. Another benefit of the Vite development server is live reload, which automatically updates the application when changes are made to the source code.
#lesson
Anjana walks through the project structure and explores the generated files. Another benefit of the Vite development server is live reload, which automatically updates the application when changes are made to the source code.
#lesson
Media is too big
VIEW IN TELEGRAM
40. Vite Selfie Cam Project
Anjana explains the Selfie Cam project, which will display video from the user's webcam in a canvas element on the page. The project will use the getUserMedia API to access the webcam and the Canvas API to draw the image to the page.
- https://github.com/vakila/selfie-cam
#lesson
Anjana explains the Selfie Cam project, which will display video from the user's webcam in a canvas element on the page. The project will use the getUserMedia API to access the webcam and the Canvas API to draw the image to the page.
- https://github.com/vakila/selfie-cam
#lesson
Media is too big
VIEW IN TELEGRAM
41. Using the Canvas API
Anjana uses the Canvas API to create a graphic similar to the JavaScript logo. A yellow rectangle is drawn to the canvas element. Then, the fill color is changed to black, and the fillText method is used to draw text on the yellow background.
#lesson
Anjana uses the Canvas API to create a graphic similar to the JavaScript logo. A yellow rectangle is drawn to the canvas element. Then, the fill color is changed to black, and the fillText method is used to draw text on the yellow background.
#lesson
Media is too big
VIEW IN TELEGRAM
42. Accessing the Camera
Anjana begins building the selfie cam functionality. The existing application is refactored to use the getUserMedia API and add the video to a canvas element. The markup rendered by the main.js file is moved into the index.html file.
#lesson
Anjana begins building the selfie cam functionality. The existing application is refactored to use the getUserMedia API and add the video to a canvas element. The markup rendered by the main.js file is moved into the index.html file.
#lesson
Media is too big
VIEW IN TELEGRAM
43. Refactoring the UI
Anjana refactors the UI of the selfie cam projects so the logos appear above the space where the camera image will show. The getVideo method is exported as a module and imported into the main.js file.
#lesson
Anjana refactors the UI of the selfie cam projects so the logos appear above the space where the camera image will show. The getVideo method is exported as a module and imported into the main.js file.
#lesson
Media is too big
VIEW IN TELEGRAM
44. drawVideo Method
Anjana creates a drawVideo method that takes in a video and canvas element from the application. The method will draw the video image on the supplied canvas element. The drawVideo method is exported from the camera.js file so it can be imported and used in the application.
#lesson
Anjana creates a drawVideo method that takes in a video and canvas element from the application. The method will draw the video image on the supplied canvas element. The drawVideo method is exported from the camera.js file so it can be imported and used in the application.
#lesson
Media is too big
VIEW IN TELEGRAM
45. Using the Video Element
Anjana uses the exported functions from the camera.js module to display an image from the camera on the web page. The code is refactored, so the image will be displayed once the user clicks the button.
#lesson
Anjana uses the exported functions from the camera.js module to display an image from the camera on the web page. The code is refactored, so the image will be displayed once the user clicks the button.
#lesson
Media is too big
VIEW IN TELEGRAM
46. Scaling the Canvas
Anjana adjusts the image displayed in the canvas element so the size matches the image from the camera. The final solution can be found in the GitHub repository linked below.
- https://github.com/vakila/selfie-cam
#lesson
Anjana adjusts the image displayed in the canvas element so the size matches the image from the camera. The final solution can be found in the GitHub repository linked below.
- https://github.com/vakila/selfie-cam
#lesson
Media is too big
VIEW IN TELEGRAM
47. Building for Production
Anjana demonstrates how to build a production version of the application. Vite will provide errors when JavaScript features incompatible with the targeted browser runtime are used. An IIFE is used to enable support for top-level await.
#lesson
Anjana demonstrates how to build a production version of the application. Vite will provide errors when JavaScript features incompatible with the targeted browser runtime are used. An IIFE is used to enable support for top-level await.
#lesson
Media is too big
VIEW IN TELEGRAM
48. Tooling Setup for Hackathon
Anjana introduces the "hackathon" and explains how the quick win projects from earlier in the course will be combined into an application and deployed. GitHub is also introduced and will provide source control for the project.
#lesson
Anjana introduces the "hackathon" and explains how the quick win projects from earlier in the course will be combined into an application and deployed. GitHub is also introduced and will provide source control for the project.
#lesson
Media is too big
VIEW IN TELEGRAM
49. ESLint
Anjana installs and configures ESLint to check the source code for syntax errors and other code problems. A "lint" script is added to the package.json file, and the lint script is also run any time the build script is run. The code in the selfie-cam repo linked below can be used as a starting point for this lesson.
- https://github.com/vakila/selfie-cam
#lesson
Anjana installs and configures ESLint to check the source code for syntax errors and other code problems. A "lint" script is added to the package.json file, and the lint script is also run any time the build script is run. The code in the selfie-cam repo linked below can be used as a starting point for this lesson.
- https://github.com/vakila/selfie-cam
#lesson
Media is too big
VIEW IN TELEGRAM
50. Prettier
Anjana installs another developer tool, Prettier, responsible for consistent code formatting in a project. Prettier ensures any developers contributing to a project follow the same set of formatting rules.
#lesson
Anjana installs another developer tool, Prettier, responsible for consistent code formatting in a project. Prettier ensures any developers contributing to a project follow the same set of formatting rules.
#lesson
Media is too big
VIEW IN TELEGRAM
51. VS Code Tooling
Anjana demonstrates the tooling provided by Visual Studio Code to aid developers in their workflow. The Source Control panel provides a basic UI for git-related operations. Extensions for ESLint and Prettier are also shared.
#lesson
Anjana demonstrates the tooling provided by Visual Studio Code to aid developers in their workflow. The Source Control panel provides a basic UI for git-related operations. Extensions for ESLint and Prettier are also shared.
#lesson
Media is too big
VIEW IN TELEGRAM
52. Deployment & Configuring Vite
Anjana compares development and production environments and shares an example vite.config.js file containing configuration for both environments. Static hosting options are also discussed in this lesson, including GitHub Pages, Netlify, and Vercel.
#lesson
Anjana compares development and production environments and shares an example vite.config.js file containing configuration for both environments. Static hosting options are also discussed in this lesson, including GitHub Pages, Netlify, and Vercel.
#lesson
Media is too big
VIEW IN TELEGRAM
53. Configuring GitHub Actions
Anjana looks at the configuration options for deploying a project using GitHub Pages. The finished selfie-cam repo is used as an example. Adding a YAML file to a repo's .github/workflows folder allows developers to configure custom GitHub actions for any automation tasks, including deploying a Vite project to GitHub pages. The code in the selfie-cam project linked below can be used as a starting point for this lesson.
- https://github.com/vakila/selfie-cam
#lesson
Anjana looks at the configuration options for deploying a project using GitHub Pages. The finished selfie-cam repo is used as an example. Adding a YAML file to a repo's .github/workflows folder allows developers to configure custom GitHub actions for any automation tasks, including deploying a Vite project to GitHub pages. The code in the selfie-cam project linked below can be used as a starting point for this lesson.
- https://github.com/vakila/selfie-cam
#lesson
Media is too big
VIEW IN TELEGRAM
54. Viewing GitHub Actions
Anjana looks at existing GitHub actions in the project and walks through each step displayed in the log. A successful action will have a green confirmation when it's completed. Failed actions are shown in red, and inspecting the logs helps developers understand why the action failed.
#lesson
Anjana looks at existing GitHub actions in the project and walks through each step displayed in the log. A successful action will have a green confirmation when it's completed. Failed actions are shown in red, and inspecting the logs helps developers understand why the action failed.
#lesson