New Kitten release
• Minor fix: Styles automatically gathered and de-duplicated from the body into the head are now placed _after_ other items in the <head> slot. Since you would expect styles added to the body of the page to override ones in the head, this now brings Kitten’s behaviour in-line with authoring expectations.
Enjoy!
Just have to share this, the babies are purring and snoozing curled up together because they love each other so much.
New Kitten update
• 
Kitten HTML templates and kitten.Component render functions can now be async.
This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.
So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)
I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.
The kitten.Component version also has a refresh button that streams a different three to the page.
For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.
Enjoy!
![const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/812/670/834/838/original/228733ad125b57f4.png "const BasicLayoutTemplate = async ({ title, SLOT }) => {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(0, 3)
return kitten.html`
<main>
<page css>
<h1>${title}</h1>
${SLOT}
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</main>
`
}
export default async () => await kitten.html`
<${BasicLayoutTemplate} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`")
![class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/114/258/813/076/463/648/original/22f714259e01b4f8.png "class BasicLayoutTemplate extends kitten.Component {
async html ({title, SLOT}) {
return kitten.html`
<main id='page' morph>
<page css>
<h1>${title}</h1>
${SLOT}
<${FediversePosts.connectedTo(this)} />
</main>
`
}
}
class FediversePosts extends kitten.Component {
async html () {
const posts = (await (await fetch('https://streamiverse.small-web.org/public/')).json()).splice(Math.floor(Math.random()*6), 3)
return kitten.html`
<div id='posts' morph>
<h2>Fediverse posts</h2>
<ul>
${posts.map(post => kitten.html`
<li><img src='${post.account.avatar}'> ${[post.content]}</li>
`)}
</ul>
<button name='refresh' connect>Refresh</button>
<style>
li { display: flex; gap: 1em; margin-bottom: 1em; }
img { width: 5em; height: auto; }
</style>
</div>
`
}
onRefresh () { this.update() }
}
export default class MyPage extends kitten.Page {
async html () {
return kitten.html`
<${BasicLayoutTemplate.connectedTo(this)} title='Async components are fun!'>
<markdown>
Oh, isn’t this __nice?__
</markdown>
</>
`
}
}")
I was feeling so frustrated and anxious lately about my art and what I do with my life, so I decided to just let myself draw whatever I feel like. Without planning and worrying about the “correctness” of each line. And it was such a joy! Just like in my childhood. But with the added bonus of all my skills and knowledge 
Thought I'd share sweet Oreo for Caturday, have a good one!
Available here..https://tina-lecour.pixels.com/featured/lady-yorkie-tina-lecour.html
I have decided living with a #kitten is very similar to living with an agile, sharp toddler #CatsOfMastodon
The first couple of days after adoption all she wanted were cuddles. Now the initial worries must be gone because this kitten wants to play! #CatsOfMastodon #kitten
Wootz and Merle send their best big kitten wishes for your #caturday #CatsOfMastodon #tabby #kitten #kittens
Our family’s newest member - Sweet Pea. She arrived yesterday to what we hope will be her forever home. We’re all smitten. 9yo can’t believe her dreams have come true. And the dog is pretty chill about it so far (but they are still separated) #CatsOfMastodon #kitten
A sweet little ballet kitten for Caturday!
Available here..https://tina-lecour.pixels.com/featured/ballet-kitten-tina-lecour.html
A sweet little ballet kitten for Caturday, have a good one!
Available here...https://tina-lecour.pixels.com/featured/ballet-kitten-2-tina-lecour.html
It's probably too early for my #Caturday offering.... nah, it's never too early for that! So here she is.
Happy Caturday!
Black cat sitting in the light - handmade watercolor painting
Find it here:
https://karen-kaspar.pixels.com/featured/black-cat-sitting-in-the-light-karen-kaspar.html
The original painting has already found a new home - prints are available in my shops.
Have a relaxed day!
Sleeping tabby cat - handmade soft pastels painting
--> https://karen-kaspar.pixels.com/featured/sleeping-tabby-cat-karen-kaspar.html
Would anyone be willing to help me with something like $30-50 to get some more dewormer/flea meds from the vet?
Poor Zèle has had a bit of a yucky relapse. Apparently it can take more than one dose to get rid of them, especially for a cat that had been a stray.
Without giving too much detail, he has worms again, and he's back to spending all his time shut in the bathroom while I clean. His next scheduled visit wasn't until another couple weeks, and I'm short on money.
(I know, I took in a stray kitten when I'm still working to get it together for myself. He's a ball of love and character, his little personality already shines so brightly. He can't help that he's still a bit gross.)
Boosts appreciated!
#mutualAid #mutualAidRequest #cats #kitten
Cute & Funny Animals 
