Conversation

Notices

1. Embed this notice
   Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 01:22:31 JST Aral Balkan

   Well, y’know what they say about the 90/90 rule… something tells me with web projects the second 90% is spent working around CSS issues.

   So, anyway… I added the code panel to my Kitten port of React Kawaii and spent a chunk of time getting the responsiveness and animation right and, well, here you go – have a play:

   https://kitten-kawaii.small-web.org

   :kitten: 💕

   Writing a blog post about it as we speak and will likely publish it tomorrow or over the weekend :)

   #Kitten #Kawaii #SmallWeb #React #web #dev

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 01:32:27 JST Aral Balkan

     in reply to

     PS. Here’s the code:

     https://codeberg.org/aral/kitten-kawaii/

     And a big shout out to Nelson Menezes who apparently back in 2021 cracked how to do a smooth CSS-only 0-to-auto height animation by animating the grid-template-rows of a single row grid containing an element with min-height of zero from 0fr to 1fr. (https://nemzes.net/posts/animating-height-auto/)

     (That’s the technique I’m using – which now works cross browser – after trying to achieve the same effect by animating margin-bottom proved too brittle.)

     #CSS #animations

   • Embed this notice
     Nigel Moss 🌻 (nigenet@mastodon.social)'s status on Friday, 09-Aug-2024 01:33:03 JST Nigel Moss 🌻

     in reply to

     @aral Back in the day, I think the second 90% was spent thinking "Yay, that looks great now... better just check it in Internet Explorer though..." and then weeping 😂

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 01:33:03 JST Aral Balkan

     in reply to

     • Nigel Moss 🌻

     @nigenet I remember those days… :)

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 01:34:31 JST Aral Balkan

     in reply to

     • Alien

     @alien 💕

   • Embed this notice
     Alien (alien@mastodon.green)'s status on Friday, 09-Aug-2024 01:34:33 JST Alien

     in reply to

     @aral sooo cool! :blobcat_box:

   • Embed this notice
     Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 06:29:37 JST Aral Balkan

     in reply to

     • liziwizi

     @liziwizi Elizabet’s characters are adorable :)

     And yeah, there are limits to the responsiveness :)

   • Embed this notice
     liziwizi (liziwizi@mastodon.social)'s status on Friday, 09-Aug-2024 06:29:38 JST liziwizi

     in reply to

     @aral sooo cute.
     I did notice when i rotate my phone the cat is very tiny