Build lightning fast web components apps for any framework

Learn how to use ES modules to import and export dependencies with named and default exports, aliases, and dynamic imports and exports for safer, modular browser code.

Learn how arrow functions deliver concise syntax, support multiple arguments, and preserve this from surrounding context, simplifying map operations and object returns in JavaScript.

Build lightning vanilla web components, define attributes and compute properties, and pass data between components. Explore custom elements, shadow dom, and component communication with styling and data fetching.

Grab the course content from GetUp, clone or download the repository, and extract the folder to access course chapters and setup instructions.

Run a basic http-server to serve ES modules on localhost, avoiding complex build tools and enabling reliable module imports from the project root.

Create a profile card web component that renders dynamic data from first and last name attributes. Syncs attributes with properties via getters/setters, observes changes, and re-renders using shadow DOM.

Learn why custom elements fail to register when conflicting versions share a name in the global registry. Explore strategies to avoid duplication, such as pure dependencies and user-defined handling.

Style the profile card within a web component using the :host selector and shadow scope, and set margins, background, cursor, image radius, typography, and a reusable render function.

Explore two approaches in web components: predefined tag names versus letting users choose their own, and publish both pre-registered and register-less variants to enable portable, flexible components.

Create a reusable template renderer base class to render into a shadow dom, extend the card component from it, and implement a get template method for consistent rendering.

Compare the constructor and connected callback in web components, explain timing when attributes are set, and illustrate with a custom progress bar and role attributes.

Create a no-shadow app-shell that loads components, initializes the router, and applies shared styles and theming with css custom properties using a root selector.

Fetch dynamic profiles from the random user API, map them into profile cards, and render a responsive grid of personalized cards while handling async data and dynamic attributes.

Animate cards on data changes using a parent component called profile cards animator, leveraging slots and slot change events to drive animations and hover highlights across cards.

Learn to dispatch and listen for events to open a dialog from a profile card, wire a profile dash dialog, and manage a backdrop with proper open and close behavior.

Learn to resolve issues with the hidden attribute on web components by adjusting host display defaults, using profile data to toggle hidden, and removing extraneous display styles.

Click a profile card to feed its data into the dialog using detail, the open method, and events, then update the dialog with shared styles and section layouts.

Learn why automated tests matter for your components and app, prevent regressions, and boost quality assurance and team productivity with fast, scalable test coverage and the testing pyramid.

Explore the software testing pyramid to determine what to test: prioritize unit tests, balance with integration tests, and use end-to-end tests sparingly to cover real-world flows.

Explore the upside-down testing pyramid and shift from manual and end-to-end testing toward unit and integration tests, with static testing and typing via TypeScript or Flow.

Develop a testing plan for the web components app, validating data bindings, the dialog open/close behavior, card interactions, and shadow dom rendering, with unit and integration tests.

Set up linting and prettier for web components using open-wc.org recommendations, and install the generator with npm to initialize presets and a source folder.

Install and enable the prettier extension in VS Code, configure auto-format on save, and customize rules (tabs vs spaces) to consistently format JavaScript files across your project.

Identify and fix linting errors in web components via command line interface, covering issues like unused variables and incorrect returns. Configure ESLint rules and CI to run checks on push.

Install karma for unit testing and create your first test for a profile card component using open wc, yarn, and a code-coverage workflow.

Create and run the remaining unit tests for the profile card and dialog, validating empty defaults, DOM and shadow DOM rendering, and data-driven behavior.

Set the chrome binary in your environment variables by permanently adding it to your profile file, ensuring chrome is always found by karma and related testing tools.

Adjust code coverage thresholds in karma using Istanbul, with global or per folder overrides, to set reachable targets and guide your team's testing progress.

Set up continuous integration with CircleCI to automatically run tests on push, deploy to staging or master only when tests pass, and enable Slack notifications.

Set up Slack notifications for failing CircleCI tests with a CircleCI integration, posting failures (and fixes) to a testing channel, while enabling branch-specific notifications to reduce spam.

Add a status badge to the repo README using CircleCI, selecting the finish branch and shield style to show whether builds pass for open source projects.