Coding Design Systems - ep09 - Clever Cloud Web Components Collection with Hubert Sablonnière

1h Link to video
Tags Web components Tools Coding Design Systems
Speakers Georges Gomes m4dz Hubert Sablonnière
Edit on GitHub

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about Design Systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro 02:08 - Meet Hubert Sablonnière 05:11 - Why the Clever Cloud Web Components Collection? 09:18 - Using Lit to build a Collection of Web Components 13:02 - The Open WC tools and toolkits 14:36 - Concept behind a Web Components Smart CDN 18:42 - Clever Cloud Web Components Storybook 21:02 - Using Web Components in Backlight 26:03 - Web Components and Internationalization 34:38 - Using Clever Cloud Web Components Smart CDN 37:25 - Variants and Modes in Web Copmonents 41:20 - Styling Web Components with Consistency 44:30 - Embedding Web Components in different formats 51:15 - Running all the Frontend Dev Stack in the Browser 58:37 - Outro & community.webcomponents.dev

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

“Always bet on Web Components.” Clever Cloud team choose to rely on the Web Components technology to build its console UI. Hubert is their core maintainer and in this episode, we talk about how they built them, how they customize them, and how they ship them. Because they build a Smart CDN to pre-pack the collection and distribute it, we also cover the pack-as-a-service aspect of distributing such a collection.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯