Table of Contents
IntroductionMaximiliano Firtman introduces the course by providing some personal and professional background. An overview of the material to be covered in this course is also provided in this segment.
The DOM APIMaximiliano discusses the DOM API, where it's available, and walks through parts of a simple DOM example. Referencing DOM elements and actions that can be performed on elements are also discussed in this segment.
Finding Elements in the DOMMaximiliano discusses selecting elements from the DOM, types of returns when selecting elements, functions that return a single element, and functions that return multiple elements. Common pain points when returning elements are also discussed in this segment.
Vanilla JS Q&AMaximiliano answers student questions regarding the appendChild() method and different types of Vanilla JS architecture patterns.
Course Project OverviewMaximiliano discusses an overview of the contents of the course project, Coffee Masters, and demonstrates how to install and run the app as a PWA. A demonstration of what will be rendered on the DOM and what is considered valid HTML is also provided in this segment.
Scoping querySelectorMaximiliano demonstrates the difference between querySelector and querySelectorAll, including what data is returned. The DOM API is available in every DOM element, which allows more fine-tuned scoping of the querySelector and querySelectorAll methods.
Adding Scripts async & deferMaximiliano discusses adding scripts with the async or defer attributes to the course project. The defer attribute will defer the script execution until the parsing is finished while the async attribute will execute the script in tandem with the parsing operation.
Main Script SetupMaximiliano walks through setting up the main application script and discusses the difference between the Load event and DOMContentLoaded. The DOMContentLoaded event uses the DOM API, which is widely supported across browsers.
Event Binding & HandlersMaximiliano discusses some possible DOM events that can be listened to, event naming patterns, and binding functions to events. Using onevent properties will only allow one function to be bound, while addEventListener allows binding multiple event handlers.
Advanced Event HandlingMaximiliano discusses attaching multiple event handlers per event/object and dispatching custom events. Student questions regarding removing event listeners with the parent element, if events with multiple functions fire synchronously, and if there is a limit to the number of event listeners are also covered in this segment.
Helpful Shorthand MethodsMaximiliano provides some shorthand methods to help reduce the amount of code needed by creating aliases.
Fetching DataMaximiliano walks through creating the initial services for the coffee masters application to access the menu eventually. Updating the script to a module to allow imports is also covered in this segment.
Loading Menu DataMaximiliano demonstrates importing and utilizing the application's previously created Store and API modules. Calling the API to load the menu data is also covered in this segment.
Browser Routing & History APIMaximiliano discusses navigating between pages using the DOM for single and multi-page applications. The History API will be used to push new entries to the navigation history.
SPA Router from ScratchMaximiliano walks through creating a router, managing which navigations get stored in History, and handling deep linking. The created router will be specific to the course application but can be made reusable by adding abstractions.
Router Q&AMaximiliano answers student questions regarding using a function for loadData and not Router, how arrow functions handle bindings, and if the menu isn't modular because it uses app as a dependency.
Changing DOM Element ContentMaximiliano demonstrates updating the DOM content based on the URL by utilizing a switch case and createElement. The page content is targeted using children instead of childNodes to avoid selecting empty text and new text lines.
Dynamic RoutingMaximiliano demonstrates creating a dynamic page route to handle navigating to individual product detail pages. Handling URL changes by adding an event listener for the popstate is also covered in this segment.
Overview & Custom ElementsMaximiliano briefly discusses an overview of web components and their associated set of standards, including, custom elements, HTML templates, shadow DOM, and declarative shadow DOM. Custom element attributes, lifecycle, slots, and custom builtins are covered in this segment.
HTML TemplatesMaximiliano discusses creating markup containing HTML content that can be reused, rendered, and dynamically modified. CSS style declarations made in templates will apply to the entire document by default.
Shadow DOMMaximiliano discusses utilizing the shadow DOM for more control over the styling and functionality of custom elements. If a template element is on a shadow DOM, the style declarations will only apply to the template.
Declarative Shadow DOMMaximiliano briefly discusses the declarative shadow DOM which allows the shadow DOM to be defined directly in the HTML markup. Alternatives for where to define custom element CSS including CSSOM APIs, script tags, link tags, and external CSS files are also discussed in this segment.
Creating Web ComponentsMaximiliano creates the Menu, Details, and Order web components and exports them to app.js so the browser can recognize and execute the modules. Applying the web components to the DOM is also covered in this segment.
Loading TemplatesMaximiliano walks through loading the previously created templates and rendering them to the DOM. Templates must be cloned before they can be injected into the DOM.
Styling Web ComponentsMaximiliano walks through loading and applying stylesheets to web components.
Reactive Programming with Proxies
Creating a ProxyMaximiliano discusses creating a proxy to allow modifications to operations performed on the wrapped object. A proxy can be used for validation, data binding, and reactive programming. Proxy handlers and traps are also covered in this segment.
Rendering the MenuMaximiliano walks through creating an event listener that listens for and renders changes to the coffee master's menu. A student's question regarding if the shadow DOM allows the use of local IDs is also covered in this segment.
ProductItem ComponentMaximiliano implements the ProductItem component and demonstrates an alternate method of passing in the product as an attribute. Updating the event listener to not link the add to cart button to the details page is also covered in this segment.
DetailsPage ComponentMaximiliano walks through the code for the DetailsPage component and updates the product ID to the correct variable name.
Adding Items to the OrderMaximiliano demonstrates implementing a new Order.js service to allow users to add products to the cart. Handling adding multiple of the same item is also covered in this segment.
Displaying Items in the CartMaximiliano walks through and implements the code for the CartItem component to display the items that have been added to the cart. A student's question regarding why importing the custom element renders the content is also covered in this segment.
Binding Form DataMaximiliano demonstrates binding the order form's input data to a user object. Clearing out the form when the order is placed and updating the home page to render when navigated to are also covered in this segment.