Embed Notice

HTML Code

<blockquote style="position: relative; padding-left: 55px;"><section><a href="https://mastodon.ar.al/users/aral/statuses/112927316841426504">Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 09-Aug-2024 01:22:31 JST</a><a href="https://mastodon.ar.al/@aral" title="aral@mastodon.ar.al"><img src="https://gnusocial.jp/avatar/4627-48-20250906071718.webp" width="48" height="48" alt="Aral Balkan" style="position: absolute; left: 0; top: 0;">Aral Balkan</a></section><article><p>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.</p><p>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:</p><p><a href="https://kitten-kawaii.small-web.org" rel="nofollow noreferrer">https://kitten-kawaii.small-web.org</a></p><p>:kitten: 💕</p><p>Writing a blog post about it as we speak and will likely publish it tomorrow or over the weekend :)</p><p><a href="https://mastodon.ar.al/tags/Kitten" rel="tag">#Kitten</a> <a href="https://mastodon.ar.al/tags/Kawaii" rel="tag">#Kawaii</a> <a href="https://mastodon.ar.al/tags/SmallWeb" rel="tag">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/React" rel="tag">#React</a> <a href="https://mastodon.ar.al/tags/web" rel="tag">#web</a> <a href="https://mastodon.ar.al/tags/dev" rel="tag">#dev</a></p></article><footer><a rel="bookmark" href="https://gnusocial.jp/conversation/3493842#notice-6864168">In conversation</a><time datetime="2024-08-09T01:22:31+09:00" title="Friday, 09-Aug-2024 01:22:31 JST">Friday, 09-Aug-2024 01:22:31 JST</time> <span>from <span><a href="https://mastodon.ar.al/@aral/112927316841426504" rel="external" title="Sent from mastodon.ar.al via ActivityPub">mastodon.ar.al</a></span></span><a href="https://mastodon.ar.al/@aral/112927316841426504">permalink</a><h4>Attachments</h4><ol><li><label><a rel="external" href="https://gnusocial.jp/attachment/869377">Untitled attachment</a></label><br></li><li><label><a rel="external" href="https://gnusocial.jp/attachment/3016993">Screen recording of Kitten Kawaii: A change the colours and moods of a cute human dinosaur character (green, blue, magenta, sad, blissful, excited, etc.) and then press the Show code button which slides in a code drawer showing the code to add the character to your Kitten app. The drawer animates in smoothly. I also change the size of the window to show that a scrollbar appears when necessary and how the interface adapts.</a></label><br><video poster="" controls="controls"><source src="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/927/306/390/323/584/original/99862e67a1f4368c.mp4" type="video/mp4"></source></video></li></ol></footer></blockquote>

Corresponding Notice

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
In conversationFriday, 09-Aug-2024 01:22:31 JST from mastodon.ar.alpermalink
Attachments
1. Untitled attachment
2. Screen recording of Kitten Kawaii: A change the colours and moods of a cute human dinosaur character (green, blue, magenta, sad, blissful, excited, etc.) and then press the Show code button which slides in a code drawer showing the code to add the character to your Kitten app. The drawer animates in smoothly. I also change the size of the window to show that a scrollbar appears when necessary and how the interface adapts.

Public

Embed Notice

HTML Code

Corresponding Notice