Masthash

#SmallWeb

Aral Balkan
14 hours 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

Aral Balkan
18 hours 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

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

#Kitten #SmallWeb

Joel Sutton
2 days ago
Aral Balkan
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:💕

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' />
`
Aral Balkan
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:🎉

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>
Aral Balkan
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.

#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

Aral Balkan
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

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

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.
Aral Balkan
1 week 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

Aral Balkan
1 week 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.”

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.

Aral Balkan
1 week 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

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`
pieceofthepie :coffefied:
2 weeks ago

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

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
2 weeks ago

@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
2 weeks ago
@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
2 weeks ago

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

#ethicaldesign #smalltech #smallweb

Aral Balkan
2 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
2 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

C:\KKJ\>:idle:
3 weeks ago

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

I'm back to my solar powered projects 😎 🔋

More info soon.

#esp8266 #gemini #SmallWeb

C:\KKJ\>:idle:
3 weeks ago

"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/

#gemini #SmallWeb #textadventure #ChatGPT

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)

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.

#Blog #Hugo #SmallWeb

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

Joel Sutton
3 weeks ago

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

#StopBeingAnAss #ThinkAboutThePoorChatbots #AndTheBlind

Aral Balkan
3 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

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!

Aral Balkan
1 month ago

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.

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

#vhtml #kitten #SmallWeb

Aral Balkan
1 month ago

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

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

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

💻 Ana DaLerd 🦊
1 month ago

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 ?

Aral Balkan
1 month ago

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
Aral Balkan
1 month ago

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!

¹ https://html-validate.org

#html #validation #markup #web #dev #SmallWeb #accessibility

Aral Balkan
1 month ago

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

https://codeberg.org/kitten/app

#kitten #SmallWeb

Aral Balkan
1 month ago

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

Aral Balkan
1 month ago

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

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

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

marie verdeil
1 month ago

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

Aral Balkan
1 month ago

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

Aral Balkan
1 month ago

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

Aral Balkan
1 month ago

@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://ar.al/2020/08/07/what-is-the-small-web/

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

Bob Mottram :debian:
1 month ago

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

C:\KKJ\>:idle:
1 month ago

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

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

#gemini #SmallWeb

Andrea Margiovanni
2 months ago
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
2 months ago
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
2 months ago

I redesigned my website 🥳

https://tinybird.info/

#smallweb

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!