Tootfinder

Opt-in global Mastodon full text search. Join the index!

@johl@mastodon.xyz
2025-12-05 10:27:49

🎅 🌲 💫
Weihnachtlich erstrahlen Gassen
Auf zum Einkauf hasten Massen
Drinnen leuchten Kerzen hell
Nur Systemadministratoren
Lauschen bang dem Netz-Rumoren
Horch! Es naht #React2Shell!

@aral@mastodon.ar.al
2026-01-23 18:54:08

Added information on HTML, CSS, and Markdown Fragments to the Kitten Components and Fragments tutorial, including a little TypeScript type declarations file you can add to your projects so you don’t get type warnings for them when you import them in your projects:
k…

Screenshot of web browser at https://kitten.small-web.org/tutorials/components-and-fragments/#html-css-and-markdown-fragments.

Full text in next post as it hits Mastodon’s arbitrary character limit on alt text.
@zachleat@zachleat.com
2025-11-25 14:14:32

How to hallucinate using Web Components zachleat.com/web/hallucinate/

@leftsidestory@mstdn.social
2026-01-30 00:30:01

Some City Some Nature VII 🏙️🪾
一些城一些自然 VII 🏙️🪾
📷 Nikon F4E
🎞️ Fujifilm NEOPAN SS, expired 1993
#filmphotography #Photography #blackandwhite

NEOPAN SS 100 (FF)

English Alt Text:
A black-and-white photo of a cluttered workbench filled with tools and electronic components. Items include a squeeze bottle, a vented electronic device with wires, a roll of tape, screws, bolts, and disassembled mechanical parts. The background shows a vehicle and a wall, suggesting a garage or workshop setting. The scene conveys hands-on technical work in progress or paused.
中文替代文字:
这是一张黑白照片,展示了一个杂乱的工作台,上面堆满了工具和电子零件。可见物品包括尖嘴塑料瓶、有通风孔和电线的电子设备、胶带卷、螺丝、螺栓以及拆解的…
NEOPAN SS 100 (FF)

English Alt Text:
A black-and-white photo of a traditional Chinese archway with multiple ornate tiers of eaves. Each tier features intricate carvings and small figurines, typical of classical Chinese architecture. The structure is intersected by a web of overhead utility wires, creating a stark contrast between ancient design and modern infrastructure. The image evokes a sense of cultural heritage disrupted by urban development.
中文替代文字:
这是一张黑白照片,展示了一座传统的中国牌楼建筑。牌楼有多层飞檐,每层都雕刻着…
NEOPAN SS 100 (FF)

English Alt Text:
A black-and-white image of a narrow paved alleyway lined with trees and dense vegetation. On the left, fruit-bearing trees partially obscure a building wall. On the right, thick foliage and a wooden fence border the path. Overhead, utility poles and power lines stretch across the sky. The alley leads into the distance, creating depth and a quiet, secluded atmosphere.
中文替代文字:
这是一张黑白照片,描绘了一条狭窄的铺石小巷,两侧是茂密的树木和植被。左边的果树上挂着圆形果实,部分遮挡了后方的建筑墙体。右边是浓密的灌木和木栅栏。天空中布满了电线和电…
NEOPAN SS 100 (FF)

English Alt Text:
A black-and-white photo showing two large cylindrical stacks filled with corn cobs in front of a flat-roofed building. The building has several windows, an air conditioning unit, and hanging cables. A striped traffic cone sits on the ground amid debris. Overhead, power lines crisscross the sky. The image captures everyday urban life with elements of food storage and infrastructure.
中文替代文字:
这是一张黑白照片,画面中有两大圆柱形玉米堆,位于一座平顶建筑前。建筑有多个窗户、一个空调机和垂挂的电缆。地面上有一个黑白条纹的交通锥和一…
@zachleat@zachleat.com
2025-11-20 15:26:28

this is using a <squirm-inal> Web Component from 2021: github.com/zachleat/squirminal/
2021-vintage Web Components are React 17-era. No big refactors or rewrites required.

@aral@mastodon.ar.al
2025-12-11 14:46:51

I love how simple Kitten’s Streaming HTML workflow makes building features like this, especially when using class-based Kitten pages and components :)
#Kitten

Screen capture of the Team schedule interface from the Gaza Verified admin site. It is a table of names and days (Aral, Casey, Joy, Aseel, Fabio And Mondays … Fridays) with checkboxes at each name/day pair. It starts out greyed out. The Unlock to edit button is clicked and the interface comes alive (opacity returns to full and the checkboxes become green and clickable). The person toggles a few checkboxes and clicks the Lock button to lock the interface again and then repeats the process to und…
Screenshot of code (the lines editable=false and the button tag code are highlighted):

class TeamSchedule extends kitten.Component {
  editable = false

  html () {
    return kitten.html`
      <section>
        <h3>Team schedule</h3>
        <button
          name='toggle'
          connect
        >${this.editable ? 'Lock' : 'Unlock to edit'}</button>
        <table id='team-schedule' ${this.editable ? '' : 'inert'}>
          <caption id='caption'>
            <markdown>
              Show…
Screenshot of code, continuation of the same class, starting with the end of the html() method from the previous screenshot and going till the end of the class (the table[inert] style and the onToggle() method are highlighted:

          <style>
            table[inert] {
              opacity: 0.9;
              filter: grayscale(100%);
            }
          </style>
        </table>
      </section>
    `
  }

  onToggle () {
    this.editable = !this.editable
    console.log(this.editable)…
Screenshot of code (the <${TeamSchedule.connectedTo(this)} /> line is highlighted):

export default class InterviewsPage extends kitten.Page {
  html () {
    const today = db.calendar.today
    const futureDays = db.calendar.futureDays
    const pastDays = db.calendar.pastDays

    return kitten.html`
      <${MainLayout} page='/admin/interviews/'>
        <h2>Interviews</h2>

        <${SignUpsSwitch.connectedTo(this)} />
        <${InternalNav} />
        <${TeamSchedule.connectedTo(this)} /…
@zachleat@zachleat.com
2025-11-07 19:24:16

@… I somehow missed this crucial piece of web components lore but I also found it marcysutton.github.io/accessib

@leftsidestory@mstdn.social
2026-01-09 00:30:03

Urban Texture III 🧩
城市质地 III 🧩
📷 Nikon F4E
🎞️ ERA 100, expired 1993
#filmphotography #Photography #blackandwhite

ERA 100 (FF)

English Alt Text:
A black-and-white photo showing the edge of a rooftop lined with jagged glass shards embedded in cement, likely for security. The shards glint faintly against an overcast sky. In the background, utility poles with tangled electrical wires and ceramic insulators stretch across the frame. On the right, dried plant stems hang over the rooftop, their brittle texture contrasting with the hard glass and concrete. The image evokes a sense of urban decay and quiet tensio…
ERA 100 (FF)

English Alt Text:
A monochrome image of a fenced-off area, likely under construction or restricted. The metal fence bears handwritten Chinese characters: “No entry” and “No peddling.” Behind the fence are tall trees and a power line running horizontally. In the foreground, a covered object with a brick on top sits near a streetlamp. The scene feels quiet and controlled, with signs of urban regulation and exclusion.
中文替代文字:  
这是一张黑白照片,显示一个被金属围栏封锁的区域,可能是施工或限制通行的场所。围栏上手写着中文:“禁止通行”和“禁…
ERA 100 (FF)

English Alt Text:
A grayscale photo showing several concrete blocks arranged on a grassy patch. Some blocks stand upright, others lie flat. They are partially covered with coarse, weathered fabric—possibly burlap—with visible holes and frayed edges. The background includes tiled pavement and more grass. The scene suggests a temporary construction setup or abandoned materials, with textures of rough stone and worn cloth.
中文替代文字:  
这是一张灰度照片,画面中有几块混凝土砖块摆放在草地上,有的竖立,有的平躺。砖块部分被粗糙、风化的布料覆…
ERA 100 (FF)
English Alt Text:
A black-and-white image capturing a dense network of utility poles and electrical wires. Multiple concrete poles are fitted with insulators, transformers, and other components. Wires crisscross in various directions, forming a complex web. The monochrome palette emphasizes the geometry and industrial feel of the infrastructure. The image reflects the intricacy and importance of urban power distribution systems.
中文替代文字:  
这是一张黑白照片,展示了密集的电力基础设施网络。多个混凝土电线杆上安装有绝缘器、变压器…