Masthash

#kitten

Stef Isen
27 minutes ago

Today it was Freyja's turn to need rescuing from the pergola! 😿

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats #Caturday

Meow Moe
7 hours ago

子猫がご飯の隠し場所を発見して嬉しそうな顔でママにおねだりする。【赤ちゃん猫 保護猫】 https://www.meowmoe.com/45813/

#cat #gatten #kitten #meow #neko #straycat #UCl2ydRVrnkoSLRBKwpblqKQ #yavrukedi #котёнок #エウレカねこ部 #子猫 #猫猫動画

子猫がご飯の隠し場所を発見して嬉しそうな顔でママにおねだりする。【赤ちゃん猫 保護猫】

These GUYS may not have the same mother or father -- but they are DEFINITELY brothers. 🤗 #kitten #catsofmastodon #cats #caturday

Aral Balkan
17 hours ago

OK, I’m just going to go ahead and blame the fact that it’s Friday for this… So Kitten builds no longer have traditional version strings… they have, umm… birthdays (complete with star sign; because cute) and a favourite colour :awesome:

When reporting a bug, please make sure you mention your Kitten’s birthday and favourite colour.

(The favourite colour is also the short git hash.)

It’s probably a good idea if I step away from the computer now…

:kitten:💕

#Kitten #SmallWeb #web #dev

Screenshot of terminal with Kitten running. On top is a sixel image of a kitten sitting on a green hill in front of a blue sky.

Terminal text follows:

Kitten
by Aral Balkan, Small Technology Foundation

Born 2023/3/31 at 17:23:32 (Aries)
Favourite colour #c3f5d5 (small swatch of the colour – a light cyan, drawn using three block characters)
 
Like this? Fund us!                       We’re a tiny, independent not-for-profit.
 https://small-tech.org/fund-us

Need help?
https://codeberg.org/kitten/app/issues
Aral Balkan
19 hours ago

:kitten: One of the nice things with the new conditional syntax in Kitten¹ is that you can have conditional styles in your components :)

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev #js #css #styles #conditionals

Screenshot of code:

export default ({ SLOT, activeSection = '', autoHeading = true}) => html`
  <${Application} layout='settings'>
    <${Navigation} activeSection=${activeSection} />
    <main id='content'>
      <if ${autoHeading}>
        <h2>${activeSection}</h2>
      </if>
      ${SLOT}
    </main>
  </>
Screenshot of code:

// Application layout.
import Footer from './Footer.component.js'

export default ({ layout, SLOT }) => html`
    <div id='application'>
      ${SLOT}
    </div>

    <${Footer} />

    <style>
      …

      #application {
        max-width: 920px;
        margin-left: auto;
        margin-right: auto;
      }

      <if ${layout==='settings'}>
        #application {
          display: grid;
          grid-template-areas:
            'navigation  main  '
            'footer      footer';
          grid-template-rows: 1fr fit-content(100%);
          grid-template-columns: fit-content(100%) 1fr;
        }

        /* On narrower screens, use one-column layout. */
        @media screen and (max-width: 660px) {
          #application {
            grid-template-areas:
              'navigation'
              'main'
              'footer';
          }
        }
      </if>
    </style>
  `
Stef Isen
20 hours ago

Daisy decides to climb the pergola (I managed to rescue her.)

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats

Aral Balkan
23 hours ago

So Kitten might be a little cuter now if your terminal supports sixels…

(Oh, and there’s a new version format too.)

https://codeberg.org/kitten/app

#kitten #SmallWeb #web #dev

Screenshot of terminal. Graphic (sixel) illustration of grey kitten with big eyes and pink ears sitting on a green hill in front of a blue sky.

Text under it reads:

Kitten
by Aral Balkan, Small Technology Foundation

Version 2023/03/31-11:32:42-95b477b
 
Like this? Fund us!                        We’re a tiny, independent not-for-profit.
https://small-tech.org/fund-us

Need help?
https://codeberg.org/kitten/app/issues

~/Projects/kitten/app (git main)                                                                 ⬢ 19.8.1
❯
WACOCA
23 hours ago

パパがいない寂しさをぶつけてくる弟猫にたじたじな兄猫 https://www.wacoca.com/pets/120477/

#cat #kitten #munchkin #neko #プリン #マンチカン #メル #

パパがいない寂しさをぶつけてくる弟猫にたじたじな兄猫
WACOCA
2 days ago

【マンチカン子猫ちゃんをシャンプー】生後5ヶ月の子猫ちゃん。みんなの応援で頑張りました#マンチカン#子猫#kitten#munchkin#kitty#shorts https://www.wacoca.com/pets/120141/

#2倍速 #cat #kitten #kittycat #munchkin #neko #nekomusubi #ticacattery #シャンプー #ショーキャットのシャンプー #マンチカン #子猫

【マンチカン子猫ちゃんをシャンプー】生後5ヶ月の子猫ちゃん。みんなの応援で頑張りました#マンチカン#子猫#kitten#munchkin#kitty#shorts
Aral Balkan
2 days ago

:kitten: Major changes:

- Content is now rendered directly to the <body> of your page, not to a special #application div (less magic = good)

- New special page slots let you entirely customise the internal base layout component: HTML, HEAD, START_OF_BODY, BEFORE_LIBRARIES, AFTER_LIBRARIES, END_OF_BODY

- You can also return lang, title, charset, viewport, and icon properties from your page routes for quick customisation

Details/example:
https://codeberg.org/kitten/app#special-page-slots

#Kitten #SmallWeb #web #dev

WACOCA
2 days ago

大好きなパパが出て行っちゃうので荷物に忍び込もうとする猫! https://www.wacoca.com/pets/119973/

#cat #kitten #munchkin #neko #プリン #マンチカン #メル #

大好きなパパが出て行っちゃうので荷物に忍び込もうとする猫!
AGuyChasingPhotos
2 days ago

2023 Photo Challenge 88/365
This is a difference a 6.25 months can make. I took the first photo last year and posted it with, what I thought was, good slider edits. This year I revisited it as I am cleaning out my folder I revisited this. Think the comfort with the sliders are being more evident.
#photoshopedit #kitten #natureshot #progress #2023photochallenge

Flatter picture of leafs in front, branch across the top, grey kitten looking at the camera, trellis from a garden in background.
Picture of leafs in front, branch across the top, grey kitten looking at the camera, trellis from a garden in background.
Stef Isen
2 days ago

"Over there!" 🙀
'No, over there!" 🙀
"Ribbit." 🐸

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats

WACOCA
2 days ago

6匹の猫たちの一日の様子・・その夜に非日常なことが起きました・・。【玄関先に突然現れた子猫】【保護猫ラグドール】 https://www.wacoca.com/pets/119891/

#cat #kitten #neko #pets #protectivecat #かわいい #ニャンちゃん #ねこ #ペット #ラグドール #保護子猫 #保護猫 #子猫 #猫のくつろぎ #癒し #癒し猫

6匹の猫たちの一日の様子・・その夜に非日常なことが起きました・・。【玄関先に突然現れた子猫】【保護猫ラグドール】
WACOCA
3 days ago

先住猫から子猫へ、受け継がれる伝統芸。ソファはこうしてボロボロになりました。 https://www.wacoca.com/pets/119531/

##保護子猫#子猫##伝統芸#kitten#cat #cat #neko #日本猫

先住猫から子猫へ、受け継がれる伝統芸。ソファはこうしてボロボロになりました。
Aral Balkan
3 days ago

:kitten: Heads up: I’ve renamed the “uses” property on page routes to “libraries” to make it consistent with the other properties you can return from page routes, which are all nouns (currently: markup, styles, and syntaxHighlightingTheme).

If you’re playing with Kitten, please update your projects accordingly.

See the Streamiverse (my streaming federated fediverse timeline) example for a usage example:

https://codeberg.org/kitten/app#streamiverse

#Kitten #SmallWeb #web #dev

Stef Isen
3 days ago

Ursula, Colette, Daisy, Freyja and...
NOW WAIT A MINUTE! I THOUGHT WE ONLY HAD FOUR KITTENS!
The fifth is "Tuxy Boy", a new visitor that the kittens seem to get on with - we do wonder if they're related.

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats

@RIDDLES

"Ah, Mr Bond, I've been expecting you"
#kitten #bigchair

Aral Balkan
3 days ago

:kitten: Just merged an improved slots implementation to main and you can now pass CSS class lists to components. 🎉

Read more:

Slots:
https://codeberg.org/kitten/app#slots

Layout components:
https://codeberg.org/kitten/app#layout-components

Passing CSS class lists to components:
https://codeberg.org/kitten/app#layout-components

Named slots:
https://codeberg.org/kitten/app#layout-components

Sample project:
https://codeberg.org/kitten/app/src/branch/main/examples/layout

#Kitten #SmallWeb #templating #layout #components #web #dev #html #css #js

WACOCA
3 days ago
出産直後のラガマフィン家族の様子は? #ragamuffin #kitten #子猫動画
Benjamin V. Spider
3 days ago

Got the Tonkanator transformer set and cats have taken over my hobby table.

#cats #kitten #transformers #hasbro #catsofmastodon

🐈 Kristofur 🏳️‍🌈
3 days ago

Bitey kitten ❤️ you. #catsofmastodon #caturday #kitten

Kutten
Sweet but Psycho
4 days ago

Cats
Neue Katzenfotos.

Kittens

KI Inhalte im Beitrag Für die Erstellung dieses Artikels, wurde auch eine künstliche Intelligenz verwendet. Nicht alle Fotos wurden manuell erstellt. Ich setze auch ein experimentelles Photoshop-Plugin für meine Fotografien ein. Alle Bilder sind Unikate und nur 1x weltweit vorhanden. Dementsprechend liegt das Copyright für alle Bilder
https://canonholik.info/cats-2/
#AI #Tiere #canon #CanonEos80D #canonholik #canonphotography #Cats #fotografie #kitten

Aral Balkan
4 days ago

Folks, thanks for your feedback, appreciate it :)

I think I’m going to implement it as-is (which means the magic slot property in Kitten components now becomes SLOT and the little less magic class property is exposed as CLASS). If any other magic props are added in the future, they’ll follow the same naming convention to differentiate them from regular props and to avoid namespace clashes).

I’ll update the docs, etc., today.

:kitten: 💕

#Kitten #SmallWeb

Aral Balkan
4 days ago

#Web #dev folks, I’m implementing the ability to pass classes to components in #Kitten and could use your thoughts…

Passing a class is easy: <${MyComponent} … class='myClass'> (same as any DOM element). However, in the component, you can’t get a property named “class” as that’s a reserved keyword. Even if you could, I’m worried about polluting the namespace (we also have “slot”).

So, I’m thinking, ALL CAPS for special props?

- Won’t clash
- Stands out
- I’m allergic to $ prefixes

Thoughts?

Code listing:

function MyComponent ({name, SLOT, CLASS}) {
  return html`
    <div class='MyComponent ${CLASS}'>
      <h2>Hello ${name}, this is my component.</h2>
      <blockquote>
        ${SLOT}
      </blockquote>
    </div>
    <style>
      .MyComponent {
        padding: 1em;
        border: 1px solid cadetblue;
      }
    </style>
  `
}
Aral Balkan
5 days ago

I might actually have created the Slotty McSlotFace example… (I’m not sure if this calls for an intervention or not but I know I’m having fun.)

:kitten:💕

https://codeberg.org/kitten/app/src/branch/main/examples/slotty-mcslotface

#Kitten #SlottyMcSlotFace #slots #SmallWeb #web #dev

Screenshot of screen split into quarters. On the left, two terminal windows with code, on the right, two browser windows with an illustration of a monkey-like creature with a tuft of blonde hair at the top (“normal”) and the same creature wearing a hat, glasses and false moustache in the bottom one (“disguised”).

Code excerpt, top:

export default ({ slot }) => html`
  <if ${slot.head !== undefined}>
    <then>
      ${slot.head}
    <else>
      <img src='/images/head.png' alt='Head'>
  </if>

  <if ${slot.eyes !== undefined}>
    <then>
      ${slot.eyes}
    <else>
      <img src='/images/eyes.png' alt='Eyes'>
  </if>

  <if ${slot.mouth !== undefined}>
    <then>
      ${slot.mouth}
    <else>

Code excerpt, bottom:

import Slotty from './Slotty.component.js'
import Navigation from './Navigation.component.js'

export default _ => html`
  <${Slotty}>
    <content for='head'>
      <img src='/images/disguised/head.png' alt='Head with hat.'>
    </content>
    <content for='eyes'>
      <img src='/images/disguised/eyes.png' alt='Eyes with glasses.'>
    </content>
    <content for='mouth'>
      <img src='/images/disguised/mouth.png' alt='Mouth with moustache.'>
    </content>
  </>
  <${Navigation} currentPage='Disguised' />
`
Stef Isen
5 days ago

Ursula making the most of a lovely evening😻🌞

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats

Aral Balkan
5 days ago

Kitten has slots but what about named slots?

Yep, Kitten has those too (as of a few minutes ago in main) :kitten:🎉

https://codeberg.org/kitten/app

#Kitten #SmallWeb #templating #layout #web #dev

Screenshot of full screen. Two terminal windows on the left show code. On the right is a browser showing the rendered Named slots example.

Browser contents:

Heading: Named slots

Pink boxed section with white on pink heading titled “Slot: header”. Inside it a blue dashed border inside of which there’s a heading: “This is content for the header slot” followed by an illustation of a cat with a caption that reads “Isn’t Kitten cute?”

Under the box is a heading and two paragraphs that are regular DOM nodes from the page.

Under that are two more slots, main and footer.

Top terminal (index.page.js):

import Slotty from './Slotty.component.js'

export default _ => html`
  <${Slotty}>
    <h2>I’m a regular heading from the page.</h2>

    <content for='header'>
      <div class='content'>
        <markdown>
          ### This is content for the header slot.
          ![Illustration of a sitting kitten.](/😸/images/kitten-sitting.svg "Isn’t Kitten cute?")
        </markdown>
      </div>
    </content>

    <p>I’m a regular paragraph from the page.</p>

    <content for='main'>
      <p class='content'>This is content for the main slot.</p>
    </content>

Bottom terminal (Slotty.component.js):

export default ({ slot }) => html`
  <h1>Named slots</h1>

  <header class='slot'>
    <h2>Slot: header</h2>
    ${slot.header}
  </header>

  ${slot.default}

  <main class='slot'>
    <h2>Slot: main</h2>
    ${slot.main}
  </main>
Stef Isen
6 days ago

Little Pip has a favourite toy - her tail. 😻

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats

Stef Isen
1 week ago

Colette, Daisy, Freyja, Ursula, Quinn and Miguel enjoying the outdoors.

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats #Caturday

Aral Balkan
1 week ago

And if you’re wondering why I still support Windows in Kitten, the answer’s in the last paragraph of the comment on this issue: https://codeberg.org/kitten/app/issues/83#issuecomment-852771

But please, if you’re using Windows out of choice, know that your decision to legitimise it doesn’t just affect you. Your operating system should be working for you and you alone, not for a trillion-dollar corporation trying to exploit you any way it can and willing to use every dark pattern in the book to do so.

#Kitten #SmallWeb #Windows

Aral Balkan
1 week ago

Right, in what can only be described as masochism, I’ve added a step-by-step guide to installing Kitten under Windows¹ (on Linux and macOS, installation is seamless and takes seconds):

https://codeberg.org/kitten/app#install-kitten-on-windows-under-wsl-2

¹ As my reward, fucking #Microsoft threw every dark pattern in the book at me to try and sign me up for a Microsoft account. Also, the screenshots have minor artifacts because their screenshot tool is crap.

Anyway, it’s done.

What a horrible OS made by horrible people.

#Kitten #Windows

Screenshot of README on codeberg showing an excerpt of the installation instructions mentioned in the post:

“Heading 2: Install Kitten on Windows under WSL 2

Kitten runs on Windows under WSL with the following caveats:

    Requires WSL 2 (will not work with WSL 1).
    You must manually install Kitten’s local development-time certificate authority in your Windows browsers.

If you haven’t installed Kitten on Windows or used WSL 2 before, the instructions, below, take you through the whole process.

Heading 3: Instructions

    Open up a Windows Powershell tab in Terminal App.

        🪤 Windows comes with a couple of terminal apps and shells. Make sure you use the exact pair mentioned above.”
Steven Kennard
1 week ago

Yawn! Is it #Caturday already?

From Rupert and Me
Have a good one, everyone!

#Rupert #CornishRex #CornishRexCat #Cat #CatsOfMastodon #kitten #AnimalPhotography #StevenKPosts

A very young orange tabby cat or kitten  has his mouth wide open in a big yawn. His eyes are golden. He is against a dark background.
Mark Tisdale - Artist
1 week ago

Happy #Caturday y'all! This #DigitalArt #Painting is based on a kitten we had many years ago. He lived into his late teens. In the photo I used as a reference he had spotted me watching him thus the curious look.

Find it here: https://mark-tisdale.pixels.com/featured/little-blue-eyes-orange-tabby-kitten-mark-e-tisdale.html?product=art-print

#CatsOfMastodon #Cats #Kittens #GingerCat #GingerKitten #BlueEyes #Kitten #Curiosity #MastoArt #FediArt #ArtMatters #AYearForArt #MarkOnArt

Wide eyed ginger or orange tabby cat with deep blue eyes peeking between blades of grass.

raising from the shadows of the all encompassing #schrodinger #cat;
behold; the #doppler #kitten

happy #caturday

#meme #mamema #memes #dopplereffect

kitten chasing after a butterfly in full jump, head of kitten in bright blue color shifting to red at the tail.

text: doppler-kitten

meeooowwwwww
Matt Hoskins
1 week ago

For #Caturday here's an old photo of a friend's cat called Boris when he was a 6 week old kitten. His eyes were just starting to gain their colour (from the initial kitten blue).

His coat is a mix of tabby and white.

Shot using a Tamron 90mm macro lens on a Nikon D90.

#Kitten #CatPhotography #Kittens #CatsOfMastodon #PetPhotography

The front half of a 6 week old kitten. He's standing side-on but his head is turned to face the camera. His coat is a mix of white and tabby fur.
Ana Tudor 🐯
1 week ago

The Sumatran kitties were there, still practicing their stalking and attack skills on dad and tormenting him in general... https://www.youtube.com/watch?v=d9r1s8iMp5k they're just bigger now.

At one point, they left him alone and started wrestling each other. He must have hated his peace - he went to separate them and ended up with one biting his head and the other his hind legs and tail...

#cat #kitty #kitten #CatsOfMastodon #tiger #SumatranTiger #Berlin #TierparkBerlin #fluffy #CuteAnimals #BigCats #Caturday

Sumatran tiger cub stalking from behind a log.
Sumatran tiger cub preparing to pounce from behind a log.
Sumatran tiger cub sharing a moment with dad.
Sumatran tiger cub studying the rocks around their enclosure...

I guess I'll let the tuxedo crew sleep until Caturday. We now have a full cat-on-cat spooning, Mr. Minx is the large tail-less guy and Oreo, his adopted son on bottom. He's going to be a big boy one day too.

I won't post anymore, I promise. 🤞

Have a great evening 🌆 everyone! I'm working on it myself and doing well.👍 I've got to start dinner. 🙂👋

#ThursdayThoughts #cats #CatsOfMastodon #tuxedocats #manx #kitten

Two black and white tuxedo cats named Mr. Minx and Oreo spooning on a blue blanket on the end of a bed.

You've all heard of nesting dolls, well I've got nesting cats.

Mr. Minx and Oreo at their shenanigans again.

#CatsOfMastodon #cats #tuxedocat #kitten #manx

Two black and white tuxedo cats sleeping together on a blue blanket on the end of a bed.

Apparently it was a bath day for the cats. Mr. Minx gave his adopted son Oreo a bath this morning.

I hope everyone is having a good day so far! 🙂👋👍

#CatsOfMastodon #kitten #manx #tuxedocats

One tuxedo cat gives another tuxedo cat a bath.
Stef Isen
1 week ago

Oreo thought it was a good idea to attack Mr. Minx during his nap. Being a good sport Mr. Minx took it easy on him. It ended with Oreo pinned and getting his ear bit.

Have a good night friends and fellow Mastodon wanderers! I'm going to listen to some music and relax. 🌃😴💤

#goodnight #CatsOfMastodon #tuxedocat #kitten #manx

Two tuxedo cats playing on a bed. Mr. Minx is the large tail less cat and Oreo the kitten.

Oreo is sleeping through Whiskers Wednesday.

We're watching "Night at the Museum" tonight. My daughter is "discovering" all kinds of good movies. I've explained a ton of movies came out before she was born and recommended "Once Upon a Time in the West" and got shot down.

Have a great evening! 🌆🙂

#WhiskersWednesday #tuxedocat #CatsOfMastodon #kitten #ProudDad

I'm black and white tuxedo cat named Oreo sleeping on a bed.
Aral Balkan
1 week ago

So I went down a bit of a rabbit hole with Kitten’s HTML validation features today and… well… now you can click a link in your developer console and view all the validation errors in-place in your web page :)

:kitten:💕

https://vimeo.com/810697322

#Kitten #SmallWeb #HTML #validation #accessibility #web #standards #dev

Aral Balkan
1 week ago

HTML validation issues in Kitten now show a brief summary in your terminal with the full details available in your browser’s developer console.

https://codeberg.org/kitten/app

#Kitten #SmallWeb #HTML #validation #web #dev

Screenshot:

Terminal on left, Developer Tools open on small-web.org (https://localhost) on right.

Terminal content (abridged output):

Kitten v1.0.0
Domain version 1.0.0
HTML validation failed (1 error, 1 warning)
/index.page.js
(See your browser’s developer console for full details.)

Browser:

Navigated to https://localhost/

HTML Validation Warning: void-style
(https://html-validate.org/rules/void-style.html)
Element: #application > br 
Issue  : Expected omitted end tag <br> instead of self-closing element <br/>

HTML Validation Error: input-missing-label
(https://html-validate.org/rules/input-missing-label.html)

Element: #application > input 
Issue  : <input> element does not have a <label>

😸 Kitten: connected to development-time hot reload socket.

Tuxedo cat train.

Oreo and Mr. Minx my formal cats.

#CatsOfMastodon #kitten #manx #tuxedocat

Two black and white tuxedo cats named Oreo and Mr. Minx sleeping  on a bed.
Aral Balkan
2 weeks ago

Oh, would you look at that? Kitten passed 1,000 commits yesterday and I missed the occasion :)

https://codeberg.org/kitten/app/commits/branch/main

:kitten:💕

#Kitten #SmallWeb

Rae
2 weeks ago

I am trying to help my mom adopt a #kitten, which is why I've met these lovely cats.

After the visit, my mom said to me "You could really adopt any cat? And there's probably truth to that. I mean I adopted a cat who hid from and slapped me because he liked playing. (He now loves belly rubs)

My three cats and spouse would be quite mad if I brought home another, so someone else will have to give Hugh and his friends homes.

Aral Balkan
2 weeks ago

Did someone say slots in components?

Yes, Kitten has slots in components (as of about a minute ago in main).

Enjoy!

😺 💕

PS. The code snippet also shows the plain CSS idiom of scoping styles to components using class prefixes and how to override styles in slotted content. Remember, Kitten embraces HTML, CSS, and JS; it doesn’t try to abstract it away. So, as you learn Kitten, you’ll be learning HTML, CSS, and JS skills you can use anywhere.

https://codeberg.org/kitten/app

#Kitten #SmallWeb

Screenshot: Helix Editor running in terminal on left half of screen, browser running on right.

Code (index.page.js):

const Box = ({lineStyle, slot}) => html`
  <div class='Box'>
    ${slot}
  </div>

  <style>
    .Box {
      padding: 1em;
      border: 1px ${lineStyle} CornflowerBlue;
    }
    .Box em { color: DarkViolet; }
  </style>
`

export default _ => html`
  <h1>Page</h1>
  <p>This is the page.</p>

  <${Box} lineStyle=dashed>
    <h2>Slotted content</h2>
    <p class='override'>This is <em>slotted content</em> from the page.</p>
  </>

  <p>This is the page again.</p>

  <style>
    body { font-family: sans-serif; }

    /* Example of using the cascade to override styles */
    /* in components for slotted content. */
    .override em { color: DeepPink; }
  </style>
`

Result in browser:

Heading: Page
Paragraph: This is the page.

Bordered box in cornflower blue contains a h2 (Slotted content) and a paragraph, “This is slotted content from the page.” where “slotted content” is in deep pink italics.

Under (and outside of) the box is a paragraph that reads “This is the page again.”

I got up for five minutes, Mr. Minx and Oreo joined Pixie and all three are now sleeping in my spot. Their subtle way of saying "get your lazy ass up dad." Maybe I'll try the park...

#dogsofmastodon #kitten #manx #CatsOfMastodon #Mondog

A fawn red dog named Pixie and two black and white tuxedo cats Mr. Minx on the left and Oreo on the right sleeping on a bed.
Jenna
2 weeks ago

Good night from the snuggliest baby #kitten around 😻 #catsofmastodon

Aral Balkan
2 weeks ago

Been wanting this for a long time: finally got round to writing a little script¹ to find all the contributors in every package used in Kitten and combine it with a hand-maintained list of direct contributors and tadaaa…

https://codeberg.org/kitten/app/src/branch/main/CONTRIBUTORS.md

Folks might see you as the author of something but without the invaluable direct/indirect effort of hundreds of people (for Kitten, currently ~230 people) that thing would not exist.

:kitten:💕

¹ https://codeberg.org/kitten/app/src/branch/main/credits.js

#Kitten #SmallWeb #community

Screenshot of the CONTRIBUTORS.md file in Kitten’s Codeberg repo:

Heading: Contributors

Kitten is authored by Aral Balkan with the direct contributions of the people listed below as well as the 226 people, organisations, and teams that helped create the 350 packages that power it.

Heading: Kitten-specific contributors

This list is based on the All Contributors specification but is currently maintained by hand. If we’ve missed anyone, please open a pull request so we can update it 😸💕

Table:

Avatar: Photo of white-passing guy 
Name: Aral Balkan
Contributions: 😻 Kitten daddy.

Avatar: A pencil drawing of a bee 	Name: Andrew Chou 	
Contributions: 🤔 Thanks to Andrew’s idea, Kitten files have compound extensions (so what used to be .page is now .page.js, etc.)

This means Kitten no longer needs any specialised tooling and Kitten files automatically get syntax highlighted in source code repositories. We were also able to remove the ES Module Loader, simplifying Kitten further.

Avatar: Close-up of a white man with brown hair wearing glasses standing in front of trees with a white building in the background.
Name: Martijn de boer 	
Contributions: 🐛 Martijn’s bug report led to the implementation of cross-platform support for Kitten.
Aral Balkan
2 weeks ago

Huge breaking change just landed in Kitten thanks to @andrew_chou’s suggestion during Thursday’s Small is Beautiful live stream – update your projects if you’re playing with it:

All Kitten routes now end in .js (so .page becomes .page.js, .component becomes .component.js, etc.)

What this means:

- No tooling required (your editor of choice already has great JS support)
- Syntax highlighting in code repositories
- ES Module Loader no longer necessary

https://codeberg.org/kitten/app

#Kitten #SmallWeb

Stef Isen
2 weeks ago

4 tails, 8 eyes, 16 paws - and a whole lot of toe beans! 😻😻😻😻

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats #Caturday

Aral Balkan
2 weeks ago

Did someone say Markdown in components? Yep, you can now do that in Kitten (as of a few minutes ago in main).

Markdown support is now in the core renderer and every Kitten feature is now supported under Markdown as it is under HTML (Kitten conditionals, components, etc.)

Mix and match to your heart’s desire :)

:kitten:💕

https://codeberg.org/kitten/app

#Kitten #SmallWeb #Markdown #markup #html #web #dev

Screenshot with Helix Editor editing index.page on the left side of the screen and a browser showing the page rendered (it’s a mock blog example with a heading, a figure with my photo and the caption It’s-a me… Mario! Umm… Aral, an example of syntax highlighting in a code listing and a dynamic Comments section.

Excerpt of code in editor:

if (!db.comments) db.comments = []

const Footer = _ => markdown`
  <footer class='Footer'>

    ---
    Copyright (c) 2023-present, Aral Balkan.
    
    Released under [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)](https://creativecommons.org/licenses/by-nc-sa/4.0/)

  </footer>
  <style>
    .Footer { margin-top: 2em; margin-bottom: 3em; }
    .Footer p { text-align: center; font-size: small; }
  </style>
`

// This is a demonstration of using the markdown tagged template function.
export default _ => ({
  markup: markdown`
    # My lovely blog

    ![Black and white photo (close-up) of a white passing man](https://ar.al/images/aral-432.jpg "It’s-a me… Mario! Umm… Aral.")

    Lots of interesting things, including code snippets:

    [code js]
    function say (message) {
      console.log(message)
    }
    [code]

    <h2>Comments</h2>

    <if ${db.comments.length === 0}>
      <p>No one’s commented yet… be the first?</p>
    <else>
      <ul>
        ${db.comments.map(comment => html`
Stef Isen
2 weeks ago

Take it easy, girls!
Daisy, Freyja and Ursula 😻😻😻

#cat #cats #catsofmastodon #kitten #kittens #portugal #AdoptDontShop #rescuecats

Currently my wife has all three cats sitting in her lap with a dog to the side as she sleeps on the couch. The dog is Pixie and the cats are from right to left: Mr. Minx, Elsa and Oreo. (Oreo is yawning)

Have a wonderful rest of your night everyone! 🌃 Good morning to my friends on the other side of the world, 🫵you know who you are! 🌞☕🙂

#goodnight #goodmorning #CatsOfMastodon #kitten #manx #dogsofmastodon

Three cats, two black and white tuxedo cats and one gray diluted calico sitting in a lap.
Aral Balkan
2 weeks ago

Small Is Beautiful live stream starts in ~20 minutes :)

We’re going to make a silly little blog page in Markdown and then add commenting to it using Kitten. Feel free to follow along and ask questions during the stream.

https://owncast.small-web.org

#SmallIsBeautiful #SmallWeb #Kitten #web #dev

Aral Balkan
2 weeks ago

Small is Beautiful: live stream today at 5PM Irish Time (UTC)

What’s new in Kitten¹ this month?

:kitten: Markdown support
:kitten: New HTML validator
:kitten: HTML renderer improvements
:kitten: And more…

Watch live: https://owncast.small-web.org

(You can also follow our @owncast instance from your fediverse account from the link above to be notified when the stream goes live.)

More details: https://small-tech.org/events/#small-is-beautiful

¹ https://codeberg.org/kitten/app

#SmallIsBeautiful #SmallWeb #Kitten #web #dev

Aral Balkan
3 weeks ago

For a bit of fun, I made a version of the end-to-end encrypted Kitten chat example that animates part of the ciphertext descrambling into the plaintext. Because why not have a little fun along the way?

Video: https://vimeo.com/smalltech/kitten-animated-e2ee-chat

Source code: https://codeberg.org/kitten/app/src/branch/main/examples/animated-end-to-end-encrypted-kitten-chat/private%F0%9F%94%92

#Kitten #SmallWeb #encryption #e2ee #cryptography #animation #web #dev

Aral Balkan
3 weeks ago

Right, Kitten’s initial Markdown support implementation is now in main.

I’ll be adding better examples and comprehensive documentation as I go but if you want to have a play, these resources should help:

Kitten Count example in Markdown: https://codeberg.org/kitten/app#html-is-so-1991-introducing-markdown

Components example (which demonstrates nearly all the supported features): https://codeberg.org/kitten/app/src/branch/main/examples/components/index.page

PS. Huge thanks to the markdown-it folks & the various plugin authors for making this possible.

#Kitten #SmallWeb #markdown #web #dev

Helen H
3 weeks ago

This feline beauty named Princess, is a photography based digital art creation. She’s stopping by to say Happy #Caturday to all of her feline admirers, sisters and brothers. Her lacy coat & red mask over one eye brings her lots of compliments.
#cat #cats #feline #kitten #kitty #PersianCat #pets #CatsOfMastodon #MastoCats #art #artists #CatArt #DigitalArt #MastoArt #photography #FediArt #fediverse #BuyIntoArt #SupportTheArts #SpringIntoArt

Lacy Lady is available here: https://hhphotography.pixels.com/featured/lacy-lady-hh-photography-of-florida.html

A digitally manipulated photograph of a cat facing right that has a swirly, lacy fur coat of white and gold with a unique red mask over one eye.
Aral Balkan
3 weeks ago

Right, I just made the end tags for <then> and <else> optional so now you can also write your conditionals like this! :)

https://codeberg.org/kitten/app

#Kitten #SmallWeb #conditionals #markup

Screenshot of code:

<ul id='messages' @htmx:load='${js`
showPlaceholder = false
$el.scrollTop = $el.scrollHeight
`}'>
<if ${db.messages.length === 0}>
  <then>
    <li id='placeholder' x-show='showPlaceholder'>
      No messages yet, why not send one?
    </li>
  <else>
    ${db.messages.map(message => html`<${Message} message=${message} />`)}
</if>
</ul>
Aral Balkan
3 weeks ago

Oh I am very excited about this! Just implemented very neat support for conditionals in Kitten¹ (not in main yet).

Kitten embraces vanilla HTML, JS, and CSS as much as possible but this little extension to HTML improves authoring/readability so much that I’ve made an exception. The <then> and <else> tags are optional, by the way, so the following is perfectly valid markup:

<if ${true}>
<strong>This is true!</strong>
</if>

Enjoy! (Soon.) 💕

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb

Screenshot of source code:

if (db.kittens === undefined) db.kittens = {count: 1}

export default _ => {
  db.kittens.count++

  return html`
    <h1>Kitten count</h1>
    <p>${'😸️'.repeat(db.kittens.count > 20 ? 20 : db.kittens.count)}</p>

    <if ${db.kittens.count > 20}>
      <then>
        <p>(and <strong>${db.kittens.count - 20}</strong> more.)</p>
      </then>
      <else>
        <small>Keep refreshing, we need more kittens!</small>
      </else>
    </if>
  `
}
Aral Balkan
3 weeks ago

Trying my best to ensure that the authoring experience with Kitten¹ is going to be delightful… and that includes error messages :)

PS. This one isn‘t in the main branch yet.

PPS. The first two links lead to the respective sections of the HTML spec, the last link leads to https://caninclude.glitch.me/caninclude?child=div&parent=p

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #html #markup #authoring #design

Screenshot of Error 500 page in browser at URL https://localhost.

There is a minimalist illustration of a cute kitten playing with a ball of violet wool. Error code (500) is in large pink letters. Underneath that is the error mesage in violet: 

SyntaxError: Unexpected close tag (p): <p>Moo <div>can’t have a div here</div></p>

(Check you haven’t put flow content where phrasing content is expected (e.g., a <div> inside a <p> tag, etc.)

The words “flow content”, “phrasing content” and “a <div> inside a <p> tag” are hyperlinks.

Under the error message is a Stack trace:

While running htmlSyntaxError in /src/lib/html.js (line 149, column 42)

While running <anonymous> in /src/lib/html.js (line 128, column 11)

While running String.replace in <anonymous>

While running Function.htm in /src/lib/html.js (line 79, column 9)

  const firstOperand = Math.ceil(Math.random()*100)

(This is where the stack trace is cut off in the screenshot.)
Screenshot of same error message, scrolled down to show the whole stack trace. The stack frame that was cut off is shown in full:

While running Function.htm in /src/lib/html.js (line 79, column 9) 

Source code:
  const firstOperand = Math.ceil(Math.random()*100)
  const secondOperand = Math.ceil(Math.random()*100)

  return html` 
    <h1>Components</h1>

    <p>This example demonstrates use of components.</p>

(There is an error pointing to the start of the html tagged template string, where the error occured.)

The stack trace ends with:

While running PageRoute.default [as _handler] in /index.page (line 8, column 14)
While running PageRoute.lazilyLoadedHandler in /src/routes/PageRoute.js (line 72, column 31)
Aral Balkan
3 weeks ago

I’ve never understood dangerouslySetInnerHTML. Been working on the authoring/HTML rendering in Kitten and I’ve decided on the following model:

- Anything you interpolate into your templates is escaped. So you’re protected from script injection by default. (I’m a big fan of safe by default vs. blame after the fact.)

- To include HTML, you call safelyAddHtml(untrustedHtml) in your template. That sanitises it before adding.

Think I’m happy with that.

¹ https://codeberg.org/kitten/app

#Kitten #SmallWeb

Aral Balkan
4 weeks ago

Kitten now exposes a global `sanitise()` function you can use when adding untrusted content to your templates on the server (it’s an instance of https://github.com/apostrophecms/sanitize-html).

I’ve updated the examples and the documentation to reflect this. The underlying changes for this also mean that adding styles and scripts to your components, etc., is much nicer now at author-time and that HTML entities now render correctly.

https://codeberg.org/kitten/app

#Kitten #SmallWeb #web #dev