Post AklKfb03TUSmtC9LP6 by aral@mastodon.ar.al
 (DIR) More posts by aral@mastodon.ar.al
 (DIR) Post #AklKfb03TUSmtC9LP6 by aral@mastodon.ar.al
       2024-08-08T16:21:47Z
       
       0 likes, 0 repeats
       
       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
       
 (DIR) Post #AklLUTkYBphtAkA0lE by nigenet@mastodon.social
       2024-08-08T16:31:03Z
       
       0 likes, 0 repeats
       
       @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 😂
       
 (DIR) Post #AklLYFpFtwVd96A4a8 by aral@mastodon.ar.al
       2024-08-08T16:31:27Z
       
       0 likes, 0 repeats
       
       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
       
 (DIR) Post #AklLbqRCEelbZ3cVXc by aral@mastodon.ar.al
       2024-08-08T16:31:44Z
       
       0 likes, 0 repeats
       
       @nigenet I remember those days… :)
       
 (DIR) Post #AklLg2fMiCaWeIFUiu by alien@mastodon.green
       2024-08-08T16:32:28Z
       
       0 likes, 0 repeats
       
       @aral sooo cool! :blobcat_box:
       
 (DIR) Post #AklLjqo2kVkz1Y7l0y by aral@mastodon.ar.al
       2024-08-08T16:33:14Z
       
       0 likes, 0 repeats
       
       @alien 💕
       
 (DIR) Post #AklLnbgeu5IJI7SeLw by nigenet@mastodon.social
       2024-08-08T16:34:09Z
       
       0 likes, 0 repeats
       
       @aral Even further back in the day, replace the words "Internet Explorer" with "Netscape Navigator 4" 🙂
       
 (DIR) Post #AklhXaz7wbrzTJrzl2 by liziwizi@mastodon.social
       2024-08-08T20:38:07Z
       
       0 likes, 0 repeats
       
       @aral sooo cute. I did notice when i rotate my phone the cat is very tiny
       
 (DIR) Post #Aklm4nI3c7zR0coHi4 by aral@mastodon.ar.al
       2024-08-08T21:29:01Z
       
       0 likes, 0 repeats
       
       @liziwizi Elizabet’s characters are adorable :)And yeah, there are limits to the responsiveness :)