Dinil Thilakarathne
51 posts
Dinil Thilakarathne
@codebydinil
Creative Front-end developer Talk about CSS and Web Animations
가입일 Nisan 2023
343 팔로잉16 팔로워
Introducing 𝚑𝚒𝚝-𝚊𝚛𝚎𝚊—a collection of @tailwindcss utility classes for expanding the hit area of interactive elements.
Small hit areas are a silent UX killer. One class fixes it.
Distributed via @shadcn registry - see link below.
English
Sona UI just hit a major milestone.
– Refined UI and layout system
– Improved overall architecture
– Fully integrated with shadcn/ui
You can now install Sona UI components directly via the shadcn CLI.
No manual setup. Just add and build.
More updates coming soon.
English
For those still writing CSS 😊
Here's a squishy hover I've been using a lot recently. 👇
English
prediction cone/safe triangle — this is something we take so much for granted in modern day native UIs.
but it's not the same for most web-based dropdown menus. it took me a while to implement this here.
Amazon, macOS, Windows all implement some version of this.
English
i found the use-case of this component.
inspired by @nitishkmrk
zenith@bossadizenith
If this feels overengineered, your UI is underdesigned. inspired by @raunofreiberg
English
@Una @emilkowalski I’m absolutely loving these morphing animations!!!
English
I always *love* @emilkowalski's UI tips! Here's the native browser way to achieve this effect:
View transitions do this "fade-out-while-rearranging" behavior by default. You can also customize the transition with CSS (see demo)
::view-transition-old(*):only-child { ... }
codepen.io/una/pen/VYjKoae
Emil Kowalski@emilkowalski
Notice how in the correct example chips move instantly to their new position when a chip is removed. That’s because of the `popLayout` mode on AnimatePresence in motion/react which creates a smoother, faster transition when removing an element.
English
2025: built things
2026: build more things 🧑🍳
jhey ʕ•ᴥ•ʔ@jh3yy
2024: built things 2025: build more things 🤙
English
@jh3yy Thank you for sharing these stuffs. I have learnt a great deal from them and I am very excited about the 2026 event.
English
A Front-End Dev who understands UI/UX is 10x more valuable than one who only knows the syntax. 💡
That’s why my main goal for 2026 is to look beyond the code. I'm diving deep into design principles to evolve into a Design Engineer.
Devs, do you study design? Or strictly code? 👇
English
@Lolasasfi Yup, this isn’t quite ready for the big leagues yet, as it doesn’t support all the major browsers just yet.
Full documentation own👇
developer.mozilla.org/en-US/docs/Web…
English
@codebydinil css taking back territory from js is always satisfying
how's browser support looking tho? feels like these apis sit in demo land for ages
English
Stop reaching for JS libs to position your tooltips. The future is pure CSS! 🤯
I built a simple demo using the new CSS Anchor Positioning API to show how you can natively tether tooltips to any element.
Demo & Code: sona-animations.vercel.app/tooltip
#css #frontend #webdev #cssanchor
English