No video :(

UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

Подписаться 360 тыс.

Просмотров 7 тыс.

50% 1

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.
Show Notes
00:00 Welcome to Syntax!
02:39 We're on RU-vid.
03:14 The four categories of UI libraries or frameworks.
03:46 What does a UI component need to do?
04:14 Must be functional.
06:20 They must fit styling.
06:33 They must be accessible.
08:09 "Internationalizationable."
09:29 They must handle theming and variants.
10:05 A few common UI components.
10:14 Date Pickers.
12:10 Dropdowns.
13:21 Toast message.
15:11 Some honorable mentions.
16:10 Headless components.
18:54 React Aria.
19:34 Radix UI Primitives.
20:16 Downshift JS.
21:29 Tanstack Table and Forms.
26:00 Unstyled components.
28:04 Shoelace.
32:47 React Aria Components.
33:00 Headless UI.
33:04 Radix UI.
37:12 Base UI.
38:23 What's up with Google's design?
40:22 Styled Starters.
47:50 What is the process for overriding with custom elements.
51:10 UI Kits and Design Systems.
53:06 Some things to consider.
55:41 A few more options to consider.
59:02 Sick Picks & Shameless Plugs.
All links available at syntax.fm/751
------------------------------------------------------------------------------
Hit us up on Socials!
Scott: / stolinski
Wes: / wesbos
Randy: / @randyrektor
Syntax: / syntaxfm
www.syntax.fm
Brought to you by Sentry.io
#webdevelopment #webdeveloper #javascript

Опубликовано:

16 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 27

@MyBaBB 2 месяца назад

“Thank you very much for sharing your insights. Over the past year and a half, I’ve been diligently coding and creating my own components from scratch. This methodical approach has helped me gain a solid understanding of the underlying principles. Now, I feel confident discussing the topics you’ve covered, and it’s incredibly satisfying. The instructional video you provided played a crucial role in advancing my expertise. I’m truly grateful for this valuable learning resource, and I’m excited to explore more complex subjects. Once again, thank you for helping me progress on my learning journey.” 😊

4 месяца назад

Thanks for the mention to VerveUI guys ✨

@noccer 4 месяца назад

This is cool, I've listened for years but never saw video. You've done it very well with the camera angles. Do you also have a forward facing camera so it feels like you're looking directly at each other, it sure looks that way. Cheers ☘️

@patricknelson 4 месяца назад

28:07 - Why I love web components and custom elements so much. They essentially work everywhere. You really don’t even need to build things in web components per se, but maybe wrap in a WC (like I do with svelte-retag) to get the full power of both worlds, i.e.: Your favorite framework (Svelte in my case) and pluggable as little islands anywhere that WC’s are used, which these days with browser standards, is basically anywhere. It’s a great for very basic components, but also awesome as a “portal” to bridge the gap between all sorts of technologies. ♥️

@studiousllama4776 4 месяца назад

Are we sure that's actually Scott? I barely recognize him without a hat. Also big fan of Radix for headless components

@Ahheck01 4 месяца назад

Oh is it a hat that's different? I thought "wow, Scott looking super sharp" but couldn't place the change. In any case, very positive initial impression over past videos FWIW!

@rrd_webmania 4 месяца назад

Datalist is the HTML standard for select with filtering

@zisra 4 месяца назад

Wonderful! Thanks for this podcast from Singapore

@erics2133 Месяц назад

One of the worst cases of "just grab the UI kit's default date picker" was a birthday picker that started at a recent date and the user could only change to the previous month. Mind you, this was for signing up with a program that was primarily targeting seniors, so it took almost everyone hundreds of clicks.

@stefansdev 4 месяца назад

There is shadcn svelte version too, done by the same dev behind meltUI.

@abdellahcodes 4 месяца назад

he's not the same, but they work together Svelte slots make very confusing though. Svelte 5 should improve that a lot

@patricknelson 4 месяца назад

Accessibility is such a huge part of it though, too (even with those easy toast pop-ups). Blind users need a way to know that the message just came up and to easily dismiss it!

@sueaustin6261 4 месяца назад

i could use a whole episode just on Scott's fridge system

@syntaxfm 4 месяца назад

🫡 I’ll snap some photos

@abdellahcodes 4 месяца назад

Just in time as I'm building the redesign of Sentry docs 😅

@MatthewKennedyUK 4 месяца назад

It’s not that frightening folks, it’s just some html and css.

@brokeloser 4 месяца назад

Damnnnnnn no hat Scott. So glad he decided to join the receding hairline gang.

@syntaxfm 4 месяца назад

I’ve always had a big forehead but age certainly isn’t helping here - Scott

@MatthewKennedyUK 4 месяца назад

This is what happens when you spend too much time in react, you become afraid of the basics.

@syntaxfm 4 месяца назад

We talked quite a bit about standards based solutions in this episode too, ie Web Component based systems

@patricknelson 4 месяца назад

@@syntaxfm at eBay I’m known as “the web component” guy, I keep bringing it up. We’re big on Marko, React and Svelte but I’m out there pushing web components since my particular site is very PHP heavy 😅. I’m glad you guys touched so much on WC’s and custom elements for sure, since it allows for so much more reuse (at least at the library level, particularly UI libraries) across whatever framework you happen to be using… if any!

@patricknelson 4 месяца назад

@@syntaxfm … especially with Enhance WASM coming out, looking to optimize SSR of _web components_ using web assembly, which would make it far easier to do it in PHP, Ruby, Java, etc. Exciting times.