 Resources from Yonatan Kra in 2024

This is a list of web components lessons showing the technologies behind it and some practical ways to use it now in production.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Web Components

Nodejs

Frontend runtime optimization is heavily impacted by rendering.  Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls.
This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

Critical Rendering Path

Custom elements are fun technology. In this video, you will learn how to set one up and running in less than 2 minutes.

You'll learn how to create a Custom Web Element (that extends `HTMLElement`) that renders text to the browser and respond to a click event listener.

Render Hello World Text with Custom Elements

HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

HTMLTemplates are part of the web components specification.  In this lesson we will learn what are HTML templates, how to use them and how to use the powerful HTMLTemplates slots inside a web component.

Build Flexible HTML with HTMLTemplates using Slots and Web Components

Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the component from global style while "protecting" the host application from styles defined inside the component.
In this lesson you will learn how to setup a shadow DOM and see the CSS encapsulation in action.

Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

The Shadow DOM protects your components from style conflicts. The same protection also makes it hard for users to modify the inner style for their own needs. In this lesson we go over 3 ways to define API for a controlled manipulation of encapsulated styles.

Allow External Styling of a Web Component's Shadow DOM

In this lesson, you will learn how to create an explicit API using methods on the web component itself.

Web components explicit API's using class methods

In this lesson you will learn how to use custom events to expose internal events from withing a web component.

Using Custom Events as a web component API

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

In this lesson we will learn how to see your node server's code in chrome dev tools and also to add debug points to debug your nodejs app easily.

Debug a NodeJS App in Chrome Dev Tools

Sometimes you'd like to measure how two implementations compare in regards to run time.  In this lesson you will learn how to quickly do this using Console.time and constole.timeEnd.

Benchmark functions runtime in chrome console

In this lesson we will see how to measure the used JS heap size in chrome. This can be used for various needs from performance debugging to production monitoring of apps.

Measuring used JS heap size in chrome

The used heap size can be a valuable piece of information when it comes to improving your app's memory usage. In this lesson you will learn how to measure the used heap size in a nodejs application.

Measuring used JS heap size in nodejs

Class properties can help you simplify your classes code. In this lesson we will see how to use class properties in javascript classes.

Assigning class properties in Javascript

In this lesson we will learn about how to define real private properties in javascript classes.

Private class properties in Javascript

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Sometimes you'd might need to render a component outside an angular application. One way to do it is by rendering a dynamic component outside the angular app. In this lesson we will learn how to do that and how to make sure data bindings work.

Rendering an angular dynamic component outside an angular app

Big or non decimal numbers are sometimes hard to read inside code. Numeric separators are now part of the javascript specification and allow us to make numbers in our code more readable for humans.
In this lesson we will learn how to use numeric separators and the limitations of usage.

Javascript numeric separators

The main purpose of a web server is to export an api. The most common protocol is http requsts. In this lesson, we will learn how to benchmark your app's http api's using autocannon in order to be able to track down performance bottlenecks or inefficient code.

Benchmark http requests using autocannonjs

The part pseudo class allows consumers of a web component to manipulate certain key elements inside the Shadow DOM.  In this lesson we will explore two use cases to using the part pseudo class.

Topics

Instructors

Content Type

Yonatan Kra