Coding Design Systems - ep08 - Building in Astro with Matthew Phillips

56m Link to video
Tags Astro Product demo Coding Design Systems
Speakers Matthew Phillips Georges Gomes m4dz Backlight
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 - Start 01:17 - Astro Core 05:36 - Partial Hydration and Islands Pattern with external Frameworks and Astro 07:37 - Understanding Astro concepts for “Backend Developers” 10:53 - The Astro components syntax vs JSX 13:07 - Front Script Metadata 15:48 - KISS Logics when designing with Astro 18:44 - Typescript as a Front Matter 19:48 - Using Astro for your Design System 24:05 - Declaring Design Tokens for Astro Components 29:19 - Using JSON to store tokens and generate Custom Properties in Astro 33:30 - Building documentation with Astro components 37:12 - Client logic: building a Theme Switcher 39:21 - JSON Tokens and Style Dictionary 42:11 - Astro XElement: the HTML Web Component Generator 48:04 - Using Vanilla-JS to built-in components’ client-logic 54:09 - Outro: Upcoming features in Astro

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

With the concept of Islands Architecture, Astro brings a new way to think the Design of our applications. Offering a close-to-JSX syntax for its components, and natively supporting third-party UI frameworks like React, Vue, or Svelte, it’s a new generation of Static Site Generators.

In this episode, we welcome Matthew Phillips to discuss those new paradigms in Web sites/apps development, how it is chnaging the way we think our views, and how it aims to improve global performance. From a Design System perspective, we talk how we can use Design Tokens in Astro Components, and how we can use it to build static websites like documentation, straight with Astro files!

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