… and stop worrying about the bomb.

Why does everyone keep talking about contexts … ?

A bit of … well, context 🤭

Let’s dive

Heard about export map ? It’s quite powerful !


Seriously, how ?!

“Export” what ?

  • Environments like NodeJS, browser, of even node-env-like filters production/development, for instance React could (or does ?) …


So you think you master hooks … ?

Small recap: an async effect

With an example − Fetching a user

First approach

The problem

Part 3: Events

Write a completely useless − yet experimental − component <events-demo />

  • Emit the event 'change' using a button
  • Emit a custom event 'sayhello' using another button
  • Be able to use listeners shorthand .onchange and .onsayhello .
The component we are about to build

The template (HTML)

<!-- index.html -->
<template id="events-demo-template">
<button id="dispatch-change">
Trigger change Event
<button id="dispatch-sayhello">
Trigger custom event "sayhello"


The component constructor

// events-demo.js

Part 2: Using slots

Today, we’ll write a <page-layout /> web component

  • can have an aside part, piloted by an attribute
  • must have in its layout: a header, a footer, a main part, and optionally an aside part
Where to start…? Ah yes.

Step 1/4 − The skeleton

// page-layout.jsexport const PAGE_LAYOUT_TAGNAME = 'page-layout';const template = document.createElement('template);
template.innerHTML = `

export class HTMLPageLayoutElement extends HTMLElement {
static get observedAttributes () {
return [];
// I don't need to observe the aside attribute since…

Part 1: Using Attributes

First things first, MDN is our friend.

Let’s begin.

Building a badge/chip component

Thomas Juster

Front-end Developer; I‘m not sure who I am.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store