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!
Watch video Vanilla HTML Popovers in 2 lines of code! (featuring Svelte) 🍦🎥 LIVE Coding & Chill 🔴 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 143 once and liked it 13 people.