Can I add state-based UI to a Web Component?

preview_player
Показать описание


⏳ Timestamps

00:00 - Intro
01:32 - Recap of Project
02:15 - What is state-based UI?
05:04 - Converting the Component
32:38 - Debugging Jump-To-Move
41:00 - Wrapping Up
  1. Go Make Things
  2. JavaScript
  3. vanilla JS
  4. front-end
  5. web development
  6. code newbie
Рекомендации по теме
Hover, pressed, and 0:02:48

Hover, pressed, and focused states - Webflow CSS tutorial (using the Old UI)

DON'T Update Your 0:00:46

DON'T Update Your UI Like THIS In Compose

State holders and 0:20:53

State holders and state production in the UI Layer

Best practices for 0:20:36

Best practices for saving UI state on Android

Easily Manage the 0:22:38

Easily Manage the State of Your UI With This Pattern to Save Yourself Headaches | Unity Tutorial

This UI component 0:08:23

This UI component library is mind-blowing

How UI Frameworks 0:07:00

How UI Frameworks Actually Work

This might change 0:15:14

This might change how we build UI forever

Make this advance 0:16:27

Make this advance micro interaction in Figma - Hover effect

Banking App - 0:00:19

Banking App - Sketch to UI Design Process

Optimistic UI in 0:30:35

Optimistic UI in NextJs 14

Redux in 100 0:02:33

Redux in 100 Seconds

Loading UI with 0:03:07

Loading UI with Next.js 13 and React Suspense

How Shadcn/ui ACTUALLY 0:32:38

How Shadcn/ui ACTUALLY Works

6 Stages of 0:08:23

6 Stages of UI Design

This Video Will 0:16:42

This Video Will Take You From Junior to Senior UX/UI Designer

angularjs ui router 0:10:07

angularjs ui router configuring states

Swift UI State 0:09:53

Swift UI State - Your First iOS and SwiftUI App with Xcode 11, Swift 5.1 and iOS 13

These 2 UI 0:05:03

These 2 UI Libraries Are The Perfect Combo

What is a 0:09:12

What is a REST API?

Architecture: Handling UI 0:10:17

Architecture: Handling UI events - MAD Skills

Component-based UI for 0:28:02

Component-based UI for .NET MAUI with MauiReactor

3 Tips for 0:00:47

3 Tips for Better UI Buttons 🔘

UI Builder - 0:12:09

UI Builder - Client state parameters, client scripts, and events.

Комментарии
Автор

Really enjoying these Web Component videos Chris

zephyr
Автор

Your library looks very cool! I will definitely be using it

terrencemoore
Автор

Hi,

I'm new to your channel and i would like to thankyou for covering about web component since i was really interested about it

CLeovison
Автор

Love your content... I wish I had found it 12years ago... It would have saved me lot of time on my VaJS journey...

cloudpuncher
Автор

Wow glad I inspired u haha. Or maybe not. Let's watch this.... If I understood well, line 118 will act like each time u change the object square it will trigger a rendering.

kanaillaurent
Автор

What's your typical threshold for when to use state-based UI? When traditional DOM manipulation is becoming too much?

I have a project that might be at this threshold. The project involves an iframe and a UI that modifies content inside the iframe. When the user interacts with the UI, we dispatch a custom event to update the iframe, update it, then dispatch a custom event to update the UI. This was fine for a while but some updates to the UI were getting quite complex.

For now, I switched to simply re-rendering the UI and managing keyboard focus for accessibility. It doesn't seem to harm performance at this scale, but it's a potential future issue.

With a state-based UI approach, I guess I would maintain a central data object that represents the shared state of both the iframe and the UI? Reef may be a good fit for my needs in this case.

davidluhr
Автор

Hey, just a little thing but a few times (e.g. 12:15) your coding was covered up by your picture. Might want to scroll a bit in future to keep the code visible :)

svivian