Vanilla HTML Popovers in 2 lines of code! (featuring Svelte) 🍦🎥 LIVE Coding & Chill 🔴
Let’s have a look at the new native HTML way to do Popovers, using the `popover`, and `popovertarget` attributes! We always advocate for web standards and native solutions here, because less code is best code 🥰
We will be using Svelte, but that’s because it’s the framework that most looks like HTML to me: so you can practice the standards as much as possible, but easily drop in features like reactivity, and progressive enhancement as needed!
🚀 Click around the app yourself: https://chronokit.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/chrono
If you’re a beginner, you may want to start with our Portfolio "Paulina Puppers" series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5...
No need to watch the previous episodes, but this series playlist is: • Event Sourcing with PocketBase & Svel...
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today? Popovers?! https://developer.mozilla.org/en-US/d...
✅ Quick example with two lines of code!
✅ Why not use a library, like shadcn?! https://shadcn-svelte.com/docs/compon... & https://www.bits-ui.com/docs/componen... & https://github.com/huntabyte/bits-ui/...
✅ Let’s style a popover!
✅ Adding the `popover` attribute: What does it do?
✅ Adding a button with a `popovertarget` for our Popover!
✅ So, what do we get “for free”? https://developer.mozilla.org/en-US/d...
✅ Bring in a Shadcn popover! https://shadcn-svelte.com/docs/compon...
✅ Styling our own popover!
✅ Pros & Cons recap!
✅ ULTIMATE LIVE 🥳 DEMO!
— BONUS —
[ ] Programmatic access by binding `this`?
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
Svelte: https://svelte.dev/docs/introduction
Tailwind: https://tailwindcss.com/
shadcn-svelte: https://shadcn-svelte.com/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 123!
—
TIMESTAMPS
—
00:00 - What are we doing today? Popovers?!
2:55 - Quick example with two lines of code!
10:57 - Why not use a library, like shadcn?!
15:45 - Let’s create and style our own Svelte 5 `Popover` component!
25:27 - So, what do we get “for free”?
27:10 - Other `popover` & `popovertargetaction` modes!
32:03 - Styling our own popover!
51:51 - Bring in a Shadcn popover!
1:06:10 - Pros & Cons recap!
1:09:27 - ULTIMATE LIVE 🥳 DEMO!
Смотрите видео Vanilla HTML Popovers in 2 lines of code! (featuring Svelte) 🍦🎥 LIVE Coding & Chill 🔴 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Johnny Magrippis 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 143 раз и оно понравилось 13 людям.