⚡️ Vite 5 is out!
Performance improvements, big cleanups, and new features preparing the ground for even more innovation from the ecosystem!
https://t.co/54Z2pLLtyv
@MichaelFilipiuk The first one follows the Bauhaus where the less is more, and the form must address the purpose... and the second one was made by following a new design hype that will be lost in time, right? Haha ^^ just kidding, yeah, both are senior designs if you look in a different way.
Thanks to @antfu7's VSCode File nesting config, sleep deprived coding gets better, cuz I can't mistype +page.server.ts as +page.svelte.ts(pretty common to do) and then wonder why I'm not getting server data
If it's nested, its right. If it's not, it's wrong.
And yes, this is the 3rd time in last week it's helped me. Easy to mess this up when sleep deprived or tired
Future CSS Tip! 📜
You can use scroll-driven animations like JavaScript's IntersectionObserver to animate highlights ✏️
mark {
animation-name: highlight;
animation-timeline: view();
}
@keyframes highlight { to { --light: 1; }}
mark span {
background-position: calc((1 - var(--light)) * 110%) 0;
transition: background 1s;
}
The "trick" is to animate a custom property with a scroll-driven animation. These will flip in a binary fashion if not using @property. And that's what you want.
You can then use that value to set the style on the highlights (<mark>). What you see is the transition of a background-position to get the multi-line highlight. A technique posted on this account before 🤙
Added bonuses:
– Could use another element for the author initials of a highlight and animate that in too. Here the pseudoelement is being used. But another accessible span would do the trick.
– Highlight color is scoped inline via hue.
– View transition theme switch for a bonus that looks like a triangle. Been messing with Vercel docs so was the easiest thing to go with 😅
@CodePen link below! 👇
CSS Tip! 🤙
You can create this magnetic :hover effect with CSS anchor positioning, :has, and zero JS 🔥
article { anchor-name: --develop; }
ul:has(li:hover) { --anchor: --develop; }
ul::after {
inset:
anchor(var(--anchor) top)
anchor(var(--anchor) right)
... ;
}
How do you keep it clean when entering/exiting the list? Use transition-delay ⭐️
ul:has(li:hover) { --active: 1; }
ul::after {
opacity: var(--active, 0);
transition: opacity 0.2s, inset 0.2s 0.2s;
}
ul:hover::after {
transition: opacity 0.2s 0.2s, inset 0.2s;
}
This is a cool trick you can use. Delay the opacity on enter and then delay the position on exit. That way you don't get a weird effect on enter/exit 🙏
This one's a "Future" CSS tip 🔮 But, the demo will work in all browsers in some way. The idea is to progressively enhance it.
1. No JavaScript and no Anchor Positioning? Highlight on hover ✏️
2. No Anchor Positioning? Use JavaScript with a single event listener to update the inset values using elementFromPoint and .closest 🫶
3. If there is Anchor Positioning support, use that and don't fire the JavaScript. You can check with CSS.supports('anchor-name: --anchor') ✨
That's it!
@CodePen link below! 👇
✨ Releasing Neodrag v2.0 ✨
- Smaller bundle size! (Up to 15%)
- 5 new features
- Multiple bug fixes
- Faster runtime performance
And, the most important: NEW DOCS!
You can now ask GPT4 to review your site with the
[ 🌐 Browse with Bing ] plugin
I asked it to review https://t.co/p15s9oEuka and give improvements based on what it saw, a few good ones:
- the numerous filtering options, while comprehensive, could be overwhelming
- enhance community engagement by highlighting active discussions or trending topics on the homepage
It seems to understand quite well what it sees too "visually engaging with images of members"