#SmallWeb

18 hours ago

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

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

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

Joel Sutton

2 days ago

Nice gemlog about Yahtzee 😊 - gemini://rawtext.club/~winter/gemlog/2023/3-27.gmi #gemini #SmallWeb #smolweb

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

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

#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' /> `$

3 days ago

Kitten has slots but what about named slots?

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

#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>$

#AmericanUniversity #AU #WashingtonDC #media #law #policy #technology #privacy #humanRights #democracy #SmallWeb

3 days ago

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.

ANALogico 🏳️‍🌈 :antifa:

5 days ago

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

#Kitten #SmallWeb #Windows

5 days 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

https://vimeo.com/810697322

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.

#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.

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

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

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

tiesselune :tiesseluneShiny:

$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.”$

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.

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

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…

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

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

pieceofthepie :coffefied:

#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`$

Small Technology Foundation

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.

#SmallWeb #SelfHost

#smallTech #smallWeb #web0 #owncast #streaming

We’re live!

Small is Beautiful

https://owncast.small-web.org

https://owncast.small-web.org

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.

#SmallIsBeautiful #SmallWeb #Kitten #web #dev

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

#SmallIsBeautiful #SmallWeb #Kitten #web #dev

@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.

#SmallWeb

tallship

@jason123santa Yes Jason, you'll be more than fine to do that. 🙂

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

⛵

.

aijooyoom

#ethicaldesign #smalltech #smallweb

@aral

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?

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

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.

#Kitten #SmallWeb #markdown #web #dev

C:\KKJ\>:idle:

#esp8266 #gemini #SmallWeb

☀️Sunny days are back! (Still cold tho).

I'm back to my solar powered projects 😎 🔋

More info soon.

C:\KKJ\>:idle:

#gemini #SmallWeb #textadventure #ChatGPT

"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! :)

#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>

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:

Enjoy! (Soon.) 💕

$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> ` }$

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

#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)

Ħannes Ħauswedell 🕊

https://hannes.hauswedell.net/

I finally(!!) updated my blog / homepage:

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.

#Blog #Hugo #SmallWeb

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.

Joel Sutton

Rave reviews for new Gemini utilities: NewsWaffle, Gemipedia, Stargate - gemini://gemini.ctrl-c.club/~lettuce/rave-reviews.gmi #gemini #smallweb

Tero Keski-Valkama

#StopBeingAnAss #ThinkAboutThePoorChatbots #AndTheBlind

#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.

#Kitten #SmallWeb #web #dev

Greensleeves Website

4 weeks ago

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!

https://codeberg.org/small-tech/vhtml

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¹.

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.

#vhtml #kitten #SmallWeb

https://github.com/nodejs/unofficial-builds/pull/59#issuecomment-1451256522

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).

#musl #nodeJS #arm64 #arm #kitten #SmallWeb #SmallTech

💻 Ana DaLerd 🦊

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/

#SmallWeb #kitten

Screenshot of Kitten serving examples/fetchiverse in a terminal app.

The file /index.page has 3 errors and 1 warning.

The visible errors/warnings are:

Warning (void-style): (#application > ul > li:nth-child(7) > div > p:nth-child(4) > br) Expected omitted end tag <br> instead of self-closing element <br/>
https://html-validate.org/rules/void-style.html

<br />² <a href="https://html-validate.org/" target="_blank" rel="nofollow noopener noreferrer">

(The closing slash in the br tag is underlined.)

Error (wcag/h37): (#application > ul > li:nth-child(7) > div > img) <img> is missing required "alt" attribute
https://html-validate.org/rules/wcag/h37.html

<img class="image" src="https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/109/943/507/891/679/570/original/7ef8ebaf00aa7d65.png">

(The img tag name is underlined.)

Error (wcag/h37): (#application > ul > li:nth-child(10) > div > img) <img> is missing required "alt" attribute
https://html-validate.org/rules/wcag/h37.html

<img class="image" src="https://s3-eu-central-1.amazonaws.com/mastodon-aral/cache/media_attachments/files/109/943/522/357/575/334/original/ffc0116f840771aa.png">

(The image tag name is underlined.)

Error (wcag/h37): (#application > ul > li:nth-child(13) > div > img) <img> is missing required "alt" attribute
https://html-validate.org/rules/wcag/h37.html

https://gitlab.com/html-validate/html-validate/-/issues/210

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:

Enjoy!

¹ https://html-validate.org

#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 #SmallWeb

Also, countless thanks to @developit for the excellent htm and vhtml (https://github.com/developit/vhtml) modules which have made developing Kitten immeasurably easier.

:kitten: 💕

#SmallWeb #Kitten #html #xhtm #htm #vhtml #markup #web #dev

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

#SmallWeb #Kitten #html #xhtm #htm #vhtml #markup #web #dev

gemma lynn

https://til.ello.tech/to-host-a-personal-imgur

in which i host myself a not-#imgur

#devops #webdev #docker #smallWeb #selfHost #pasteBin #nginx #writefreely

marie verdeil

@eleventy i just saw that! great to hear! Duplicating an 11ty repo had become a little annoying… #SmallWeb

#cryptography #postQuantumCryptography #pqc #pq #ed25519 #curve25519 #x25519 #SmallWeb #Kitten

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…

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! 💕

#SmallWeb #Kitten

https://ar.al/2020/08/07/what-is-the-small-web/

@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:

#SmallWeb

https://small-tech.org/videos/small-is-beautiful-27/

Bob Mottram :debian:

smallcircles (Humane Tech Now)

@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 ..

#Peopleverse 😃

Small Technology Foundation

#smallTech #smallWeb #web0 #owncast #streaming

We’re live!

Small is Beautiful

https://owncast.small-web.org

C:\KKJ\>:idle:

=> gemini://gemini.cyberbot.space/smolzine/smolzine-issue-36.gmi

My floppy capsule was featured in the smolzine issue 36 :)

#gemini #SmallWeb

Andrea Margiovanni

Well, I mean:

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)

Andrea Margiovanni

And so it seems that #IceCubesApp (@icecubesapp) exclusively supports #Mastodon-based instances. Sorry to see how many are focusing exclusively on the software that (of all) seems the least compatible with the #SmallWeb idea that the #fediverse is supposed to represent. So sorry 😔

max

I redesigned my website 🥳

https://tinybird.info/

#smallweb

Joel G. :blobcatderpy: