#SmallWeb
: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:
: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
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: 💕
Nice gemlog about Yahtzee 😊 - gemini://rawtext.club/~winter/gemlog/2023/3-27.gmi #gemini #SmallWeb #smolweb
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 has slots but what about named slots?
Yep, Kitten has those too (as of a few minutes ago in main) :kitten:🎉

</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>](https://assets.toot.cafe/cache/media_attachments/files/110/095/929/037/937/637/small/2fb18d03c22e331d.png)
Looking forward to chatting (virtually) to @aram’s grad students on privacy, human rights, and the Small Web this Friday at my alma mater in DC. It’s for their Media, Law, and Policy course as part of their PhD and MA programs in Media, Technology, and Democracy.
#AmericanUniversity #AU #WashingtonDC #media #law #policy #technology #privacy #humanRights #democracy #SmallWeb
And if you’re wondering why I still support Windows in Kitten, ...: 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 https://mastodon.ar.al/@aral/110084475422790843
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.
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:💕
#Kitten #SmallWeb #HTML #validation #accessibility #web #standards #dev
HTML validation issues in Kitten now show a brief summary in your terminal with the full details available in your browser’s developer console.

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:💕
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.

Moi l'impact que j'espère avoir aujourd'hui dans mon domaine pro:
- développer l'esprit critique des étudiants en leur montrant que le #SmallWeb existe, est possible et est préférable, que le #GreenIT est une nécessité
- aider à mettre en place des solutions adaptées pour des systèmes informatiques légers et moins gourmands en ressources
- faire contrepoids au maximum dans la direction pédagogique car les étudiants d'aujourd'hui sont les décisionnaires de demain.
Si je pars vivre en mongolie avec des chèvres, quelqu'un d'autre me remplacera, et mon impact sera sans doute inférieur à celui que je peux avoir là tout de suite.
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

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
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:💕
Is anyone aware of software that would provide commenting/likes/shares on a blog that is driven by #ActivityPub?
I've had a hunt but have come up short.
I'm thinking a Disqus like service that can be dropped into an existing static site and provide similar functionality driven by the interactions with a linked ActivityPub note.
This would be similar to #WebMentions via #IndieWeb but potentially more accessible to users who would simply be responding to a toot/post.
We’re live!
Small is Beautiful
#smallTech #smallWeb #web0 #owncast #streaming
https://owncast.small-web.orgSmall 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.
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
@akib One thing I’m trying to do is to democratise ownership and control (https://ar.al/2020/08/07/what-is-the-small-web/). Whether or not it works, we’ll see together in the coming years.
Videos, of course will take a bit to load but you'll be fine. 👍
If you have #privacy concerns related to your Home #ISP or having to do funky things with #firewalling, like opening ports and such, you can even push your perceived presence out to anywhere in the Internet by getting a cheap, ~$5/mo #VPS and just setting up a #Wireguard tunnel between your home and that VPS - it won't speed anything up since the bottleneck is at your home but it will keep your Internet providers nose out of your business and your general home location secure as well.
https://www.wireguard.com/
I hope that helps!
#tallship #FOSS #Fediverse #Pleroma #Soapbox #Akkoma #smallweb #VPN
⛵
.
Are you familiar with the ethical design manifesto? https://ind.ie/about/manifesto/
The people behind indi.ie seem to be into similar things as you. Do you happen to know how I can follow them on the fediverse?
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
#Kitten #SmallWeb #encryption #e2ee #cryptography #animation #web #dev
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.
"Welcome to "The Doorway," a thrilling text adventure that will test your wits and bravery. "
A very simple and short text-adventure for gemini made 100% by ChatGPT.
=> gemini://floppy.p1x.in/text-adventure/
=> Web Proxy https://floppy.p1x.in/text-adventure/
Right, I just made the end tags for <then> and <else> optional so now you can also write your conditionals like this! :)
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.) 💕
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
I finally(!!) updated my blog / homepage:
https://hannes.hauswedell.net/
I wanted to go with a theme that is modern and a bit retro at the same time.
What do you think?
Will be submitting new posts soon.
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.
Rave reviews for new Gemini utilities: NewsWaffle, Gemipedia, Stargate - gemini://gemini.ctrl-c.club/~lettuce/rave-reviews.gmi #gemini #smallweb
#SmallWeb and #SmallInternet are experiencing a renaissance. Making #SelfHosted, small and blindingly fast #web pages instead of platform-based lazy loading #JavaScript #CSS transition hellscapes has more benefits than just speed, #accessibility and search engine ranking.
There is a new kid on the block; #LLM #chatbots. They read the web much like #SearchEngines, #crawlers, #scrapers and #indexers do, and are easily foiled by programmatic web pages, interlaced #ads, interstitials, overlays and #paywalls.
The chatbots read the web like blind people do, through plain text. Make your site and your information accessible, and you will do great! Make the information of whatever you want to publish available in easy, clear tables instead of whatever that is that is in vogue now.
If you stop defaulting to hostile design, and consider accessibility, the information you want to publish will be available to chatbots when they advice their users.
Do you think chatbots will know about recent history and current events by reading the #news sites? Think again! If they even get through the paywalls, they are foiled by interlaced ads and other hostile design. Whatever we consider current events won't be read or learned by chatbots because we have made the information super highway into a huge pile of toxic waste where information goes to die in the complex tangle of copyrights, licenses and DRM.
The chatbots will not trawl social media either, although that would likely be a good source for data. Companies doing this sort of training won't want to take chances of personal data of non-celebrities ending up in the models.
I asked #LLaMA model for a text completion of a random thing. You know how the completion ended? "Download EBOOK ... Online free".
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.
2/2
I don’t have much experience as a #WebDev but I joined indieweb.social to join the community, learn out loud, get help along the way. I believe in the #smallweb and #openweb movements and will mostly be making this website from #HTML, #CSS and #javascript.
The internet can be a cool place and I want to add something good, something weird to it.
There are as many versions of this tune as there are people in the world, so follow this account to join the journey into #greensleeves!
This is a niche one but if anyone needs a hyperscript renderer more geared for an HTML-based workflow than JSX, I forked @developit’s excellent vhtml to implement a few things I need for Kitten¹.
https://codeberg.org/small-tech/vhtml
Main differences so far:
- Style tags are no longer escaped
- Boolean HTML attributes are emitted correctly (without ="true")
You probably want Jason’s original but putting this out there in case it helps anyone else.
Sadly, it looks like no one was able to solve the issues around creating a Node.js binary for Musl on arm64, so it looks like Kitten¹ won’t be available on @postmarketOS on mobile phones, etc., in the foreseeable future (unless someone with the necessary knowledge and time can step up right away before this commit is reverted).
https://github.com/nodejs/unofficial-builds/pull/59#issuecomment-1451256522
Does any "indie web search engine" already exist ? Even just a project ?
// Edit : yes ! Check the answers below :blob_heart_eyes:
I've been thinking about that idea since a few weeks when I first read a toot about how the web was once a place where to find brilliant answers to our requests, pages of homemade documentations and wikis, and is now full of SEO-bot/AI-generated-content.
Since that dynamic doesn't seem to be reversible, wouldn't it be awesome to have an Anti-SEO search engine ? Something that'd only crawl deeper and index #SmallWeb sites ?
If no such thing already exist, let's start talking : what would be your web redflags for such an engine ?
Just implemented basic HTML and accessibility validation in Kitten¹ (using html-validate²).
For now, validation results are written out to the Node.js console. I do have a few ideas about how to improve that in the future, though :)
PS. The image validation errors you see are from posts coming in from my Mastodon federated timeline with images that don’t have alt text. Please folks, write text descriptions for your images.
¹ https://codeberg.org/kitten/app
² https://html-validate.org/
html-validate¹ is an awesome offline HTML validator written in Node.js (with accessibility validation, etc.) I just started looking into it and whipped up a little example to test it out.
In case it helps someone else get started with it, here’s the code:
https://gitlab.com/html-validate/html-validate/-/issues/210
Enjoy!
#html #validation #markup #web #dev #SmallWeb #accessibility
As of the latest commit, Kitten now deduplicates/combines all styles on a page into a single style tag in the head.
(So don’t worry about returning styles from your components which are used multiple times in the page. The styles will only be added once. Unless you‘re fetching just the component over the wire via htmx, in which case they’ll still be sent but there’s also no harm in that. I’m looking at improving component authoring further as we go.)
Kitten¹ ❤️ HTML :)
Over the weekend, I migrated Kitten from htm (https://github.com/developit/htm) to xhtm (https://github.com/dy/xhtm).
Among other things, you no longer have to close all your tags (<hr> instead of <hr />).
I want to take the opportunity to thank Dmitry Ivanov for working with me over the weekend and making eight releases over the last four days based on issues I uncovered while testing in #Kitten
in which i host myself a not-#imgur
https://til.ello.tech/to-host-a-personal-imgur
#devops #webdev #docker #smallWeb #selfHost #pasteBin #nginx #writefreely
It’s 2023 and you’re designing a decentralised system based on public-key cryptography where a person’s identity(ies) are their public key(s).
Do you…
#cryptography #postQuantumCryptography #pqc #pq #ed25519 #curve25519 #x25519 #SmallWeb #Kitten
Further to last week’s stream on implementing end-to-end encryption in Kitten, a big thank-you to @paulmillr whose noble cryptography libraries underpin it.
Specifically, Kitten uses:
- ed25519-keygen: https://github.com/paulmillr/ed25519-keygen
- noble ed25519: https://github.com/paulmillr/noble-ed25519
- noble hashes: https://github.com/paulmillr/noble-hashes
- micro-aes-gcm: https://github.com/paulmillr/micro-aes-gcm
Watch the recording: https://ar.al/2023/02/20/end-to-end-encrypted-kitten-chat/
Learn more about the Noble libraries: https://paulmillr.com/noble/
Thank you, Paul! 💕
@Hamishcampbell It’s what I spend every day working on. At least one version of it that doesn’t/hasn’t existed yet and which I feel must:
@witchescauldron The last exodus hardly impacted me, other than a few more followers. My timeline is about the same as before, because I'm still following the same people. The signal to noise ratio is still high, and it's not like an eternal September. Server bandwidth is about the same.
The secret is to build small and scale horizontally. Not to create giant noisy metropolises which then become hard/expensive to administer.
#SmallWeb #TinyWeb
@deadsuperhero @codesmith @hrefna
Yes! Theory of Smallness, #SmallTech, #SmallWeb.. build stuff not for scale. Small communities, yet interconnected. Heterogenous federated services in many different application domains. Every online interaction where multiple people engage is a #SocialNetworking use case. Personal social networking ..
We’re live!
Small is Beautiful
#smallTech #smallWeb #web0 #owncast #streaming
https://owncast.small-web.orgMy floppy capsule was featured in the smolzine issue 36 :)
=> gemini://gemini.cyberbot.space/smolzine/smolzine-issue-36.gmi

The best way to build a #reliable #fediverse is through small #instances. And because of storage, cpu and ram consumption, #Mastodon is IMHO the least sensible choice in this regard. The living cost of a #GoToSocial / #Pleroma / #Akkoma / #Rebased instance is significantly lower and therefore more sustainable by #individuals and small groups.
Regarding a more general idea of #SmallWeb, take a look here: https://ar.al/2020/08/07/what-is-the-small-web/ (/cc @aral)
Yet another blogpost with some more rambling on #webrings, the #smallweb, #neocities and stuff like that, following my sudden obsession with web buttons :blobcatderpy:
https://joelchrono12.xyz/blog/webrings-and-the-small-web/
Day 36 of #100DaysToOffload
Also join the #fediring people!