Conversation

Notices

Embed this notice
Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:29:41 JST Aral Balkan

New blog post – Kitten Kawaii: porting a React library and Next.js web site to Kitten
Small Web is the exact opposite of the Big Web. But what does that mean in practice? I wanted to find out by porting Elizabet Oliveira’s lovely React Kawaii app to Kitten. How does Kitten hold up to the frameworks of trillion-dollar and hundred-billion-dollar corporations?
(Spoiler: pretty darn well, actually.)
https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
:kitten:💕
#SmallWeb #Kitten #BigWeb #React #NextJS
In conversation about 10 months ago from mastodon.ar.al permalink
Attachments
1. Untitled attachment
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:37:42 JST Aral Balkan
  in reply to
  
  React + Next.js vs Kitten: developer experience, getting started.
  It takes ~30 seconds to get the React + Next.js web site up and running… how long does it take for Kitten? You’ll find out in the next post…
  Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
  #SmallWeb #Kitten #BigWeb #React #NextJS
  In conversation about 10 months ago permalink
  Attachments
  1. Demonstrating getting the React Kawaii web site up and running in the browser locally by running the following command: git clone https://github.com/miukimiu/react-kawaii.git; cd react-kawaii; pnpm i; pnpm run dev & sleep 2; $(which firefox) http://localhost:3000 It takes ~30 seconds for the page to appear in the browser.
  2. Domain not in remote thumbnail source whitelist: www.started.It
    
    STARTED.IT
  3. Domain not in remote thumbnail source whitelist: ar.al
    
    Kitten Kawaii: porting a React library and Next.js web site to Kitten
    
    Interactive embed (play with it) Kitten Kawaii is a Kitten port of React Kawaii by Miuki Miu (Elizabet Oliveira) that you can play with in the interactive embed above (also try it out in its own window/tab so you can see its responsiveness and URL-based state). I stumbled on Muiki Miu’s (Elizabet Oliveira’s) adorable React Kawaii web site and wanted to use one of the characters in my Kitten app.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:41:32 JST Aral Balkan
  in reply to
  
  React + Next.js vs Kitten: developer experience, getting started (cont.)
  So it takes ~30 seconds to get the React + Next.js web site up and running…
  How long does it take for Kitten?
  ~3 seconds.
  Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
  #SmallWeb #Kitten #BigWeb #React #NextJS
  In conversation about 10 months ago permalink
  Attachments
  1. Domain not in remote thumbnail source whitelist: ar.al
    
    Kitten Kawaii: porting a React library and Next.js web site to Kitten
    
    Interactive embed (play with it) Kitten Kawaii is a Kitten port of React Kawaii by Miuki Miu (Elizabet Oliveira) that you can play with in the interactive embed above (also try it out in its own window/tab so you can see its responsiveness and URL-based state). I stumbled on Muiki Miu’s (Elizabet Oliveira’s) adorable React Kawaii web site and wanted to use one of the characters in my Kitten app.
  2. Getting Kitten Kawaii up and running in the browser (including cloning its repository, as we did with the React example) by running the following command: kitten run https://codeberg.org/aral/kitten-kawaii.git --open It takes ~3 seconds. The rest of the video is spent playing with the interface.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:46:56 JST Aral Balkan
  in reply to
  
  React + Next.js vs Kitten: developer experience, getting started (cont.)
  In fact, it’s even faster if you install Kitten first (the equivalent of installing Node.js first, basically).
  Kitten is still up and running with the Kitten Kawaii web site in ~18 seconds.
  So that thing about web frameworks and workflows being slow… that’s a Big Web thing.
  Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
  #SmallWeb #Kitten #BigWeb #React #NextJS
  In conversation about 10 months ago permalink
  Attachments
  1. Untitled attachment
  2. Domain not in remote thumbnail source whitelist: ar.al
    
    Kitten Kawaii: porting a React library and Next.js web site to Kitten
    
    Interactive embed (play with it) Kitten Kawaii is a Kitten port of React Kawaii by Miuki Miu (Elizabet Oliveira) that you can play with in the interactive embed above (also try it out in its own window/tab so you can see its responsiveness and URL-based state). I stumbled on Muiki Miu’s (Elizabet Oliveira’s) adorable React Kawaii web site and wanted to use one of the characters in my Kitten app.
  3. Demonstration of installing Kitten first and then cloning the Kitten Kawaii web site and running it using the following compound command: wget -qO- https://kittens.small-web.org/install | bash; kitten run https://codeberg.org/aral/kitten-kawaii.git --open The web site is up at around the 18 second mark.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:52:18 JST Aral Balkan
  in reply to
  
  Development is one thing, what about deployment?
  Soon, you’ll be able to deploy your Kitten apps to small-web.org using Domain¹.
  Here’s a recording of me deploying Kitten Kawaii to kitten-kawaii.small-web.org using Domain.
  Here, domain is registering the domain (subdomain but it’s on the Public Suffix List) and installing Kitten Kawaii on a pre-warmed VPS server.
  Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
  ¹ https://codeberg.org/domain/app
  #SmallWeb #Kitten #Domain #deployment #web #dev #KittenKawaii
  In conversation about 10 months ago permalink
  Attachments
  1. No result found on File_thumbnail lookup.
    
    Small Web
  2. Domain not in remote thumbnail source whitelist: codeberg.org
    
    app
    
    from domain
    
    Domain is a free and open Small Web hosting platform.
  3. Video showing me deploying Kitten Kawaii using Domain. In Settings → Create a place, I pick a custom app and enter the link to Kitten Kawaii’s git repository and then pick the kitten-kawaii subdomain. Within a few seconds, the server is ready and I access it.
  4. Untitled attachment
  5. Untitled attachment
- Embed this notice
  Marius Gundersen (gundersen@mastodon.social)'s status on Tuesday, 20-Aug-2024 01:56:26 JST Marius Gundersen
  in reply to
  
  @aral why does my history look like this after reading your blog? All I did was scroll, but it's impossible to get back to where I came from.
  In conversation about 10 months ago permalink
  Attachments
  1. Untitled attachment
    https://files.mastodon.social/media_attachments/files/112/989/682/887/993/147/original/235060810daa9fcf.jpg
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:56:26 JST Aral Balkan
  in reply to
  - Marius Gundersen
  @gundersen Very odd. It’s a static site; no idea what could be causing that.
  Which browser/platform? I’ll try to recreate it.
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 01:59:32 JST Aral Balkan
  in reply to
  - Marius Gundersen
  @gundersen Aha! Figured it out… it’s not the scrolling.
  So the Kitten Kawaii web site is embedded in the blog post and the Kitten Kawaii web site maintains state in the URL. Of course, you can’t see its URL because it’s in an iframe but it is still adding its state to the history and, apparenty, that’s not a separate history for iframes.
  Interesting…
  You can see what I mean by hitting it directly in the browser:
  https://kitten-kawaii.small-web.org
  :)
  In conversation about 10 months ago permalink
  Attachments
  1. Untitled attachment
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 02:07:17 JST Aral Balkan
  in reply to
  
  Of course it’s not just quantitative differences but qualitative ones too…
  Since all our time isn’t spent trying to create planet-scale factory farms for human beings (which are hard to do and involve lots of complexity), we can concentrate on nice things like maintaining state in the URL… like Kitten Kawaii does.
  URL-based state: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/#url-based-state
  Full blog post: https://ar.al/2024/08/19/kitten-kawaii-porting-a-react-library-and-next-js-web-site-to-kitten/
  View source: https://codeberg.org/aral/kitten-kawaii
  #SmallWeb #Kitten #URL #state #web #dev #KittenKawaii
  In conversation about 10 months ago permalink
  Attachments
  1. Screen recording of the moods and colours of a cat character being changed and the detail drawer being opening showing every change being reflected in the URL.
  2. Domain not in remote thumbnail source whitelist: ar.al
    
    Kitten Kawaii: porting a React library and Next.js web site to Kitten
    
    Interactive embed (play with it) Kitten Kawaii is a Kitten port of React Kawaii by Miuki Miu (Elizabet Oliveira) that you can play with in the interactive embed above (also try it out in its own window/tab so you can see its responsiveness and URL-based state). I stumbled on Muiki Miu’s (Elizabet Oliveira’s) adorable React Kawaii web site and wanted to use one of the characters in my Kitten app.
  3. Untitled attachment
  4. Domain not in remote thumbnail source whitelist: codeberg.org
    
    kitten-kawaii
    
    from aral
    
    Kitten port of react-kawaii by Miuki Miu.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 02:16:11 JST Aral Balkan
  in reply to
  
  And just to underscore how simple Kitten is, here’s a demo of creating a new Kitten project that displays the character you’ve configured using Kitten Kawaii.
  There’s a lot more in the blog post (this whole thing just ballooned up from what I thought would be a nice weekend project) but I hope the highlights/videos give you some idea of how web development can be if our goal isn’t to exploit and extract from people to become billionaires.
  :kitten:💕
  #SmallWeb #Kitten #web #dev #KittenKawaii
  In conversation about 10 months ago permalink
  Attachments
  1. Screen recording showing me configure a lovestruck cotton-candy coloured cyborg character in Kitten Kawaii and then, using the details drawer via the Show details button, copying the run it locally instructions: mkdir kawaii && cd kawaii kitten-npm init -y kitten-npm install kitten-kawaii touch index.page.js And then the generated code: import { Cyborg } from 'kitten-kawaii' export default () => kitten.html` <${Cyborg} mood='lovestruck' colour='#ffbae1' /> ` Into the index.page.js file and running `kitten --open` in terminal to see the character in the browser at https://localhost in my own Kitten app.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 02:16:54 JST Aral Balkan
  in reply to
  - John :mastodon:
  @FreezePeach 💕
  
  In conversation about 10 months ago permalink
- Embed this notice
  John :mastodon: (freezepeach@twit.social)'s status on Tuesday, 20-Aug-2024 02:16:55 JST John :mastodon:
  in reply to
  
  @aral this looks really interesting and I keep telling myself I’m going to use Kitten somewhere but I really have to convince myself to find the time to play around with your project
  
  In conversation about 10 months ago permalink
- Embed this notice
  Marius Gundersen (gundersen@mastodon.social)'s status on Tuesday, 20-Aug-2024 02:24:52 JST Marius Gundersen
  in reply to
  
  @aral it should probably use replaceState so that the state updates but doesn't add to the history
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 02:24:52 JST Aral Balkan
  in reply to
  - Marius Gundersen
  @gundersen Ah, but I do enjoy being able to use the back and forward buttons to go back and forth…
  It definitely doesn’t make sense when in an iframe though.
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 03:02:15 JST Aral Balkan
  in reply to
  - nus
  @nus Yep. Love it. Never thought I’d be using a modal editor but here we are :)
  
  In conversation about 10 months ago permalink
- Embed this notice
  nus (nus@mstdn.social)'s status on Tuesday, 20-Aug-2024 03:02:16 JST nus
  in reply to
  
  @aral hmm... Helix text editor :blobcatlook:
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 03:12:37 JST Aral Balkan
  in reply to
  - Jorge Sanz
  @jorgesanz I will :)
  She’s clearly excellent at what she does (and those illustrations just adorable) :)
  
  In conversation about 10 months ago permalink
- Embed this notice
  Jorge Sanz (jorgesanz@mapstodon.space)'s status on Tuesday, 20-Aug-2024 03:12:38 JST Jorge Sanz
  in reply to
  
  @aral have you shared this with Elizabeta? Pretty sure she'll love it.
  We worked together before she moved to Xata and she did a fantastic job helping to create a design system for Elastic's products (yes, using react 😅)
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 03:23:15 JST Aral Balkan
  in reply to
  - Jorge Sanz
  @jorgesanz Just sent her an email :)
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 21:44:12 JST Aral Balkan
  in reply to
  - tbss
  @tbss I’m sorry, I translated your reply but I don’t understand what you’re suggesting.
  Gemini is a different protocol.
  The Small Web uses web protocols (HTTP, etc.).
  I’m glad Gemini exists but this is something different.
  
  In conversation about 10 months ago permalink
- Embed this notice
  tbss (tbss@fe.disroot.org)'s status on Tuesday, 20-Aug-2024 21:44:14 JST tbss
  in reply to
  
  @aral vi plus fari ja #gemlog ankaux cxar la mlamulte uxebo ne estas suficxe
  
  In conversation about 10 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 20-Aug-2024 22:08:37 JST Aral Balkan
  in reply to
  
  PS. I forgot to mention: use the back, forward, and refresh buttons on the browser. It should all work as expected. Because this is a *web* app, after all.
  #Kitten #SmallWeb #web #dev #URL #state #usability #design
  
  In conversation about 10 months ago permalink

Public

Conversation

Notices

Feeds