alcinnz
alcinnz boosted
Joe Crawford
@artlung@xoxo.zone  ·  activity timestamp 4 days ago

Thursday is the 35th instance of #IndieWeb Front End Study Hall. In a time of trouble gathering with others to learn to make better websites with #HTML and #CSS with folk of all skill levels is terrific. Bring www wishes & confusions and let's learn together. https://events.indieweb.org/2025/08/front-end-study-hall-035-bkD9G9V4HZaz

alcinnz
alcinnz boosted
Samuel Plumppu
@Greenheart@fosstodon.org  ·  activity timestamp 5 days ago

Wow! You know that #Web#Tech is getting really good when you are able to replace significant amounts of #JavaScript with a few lines of #HTML and #CSS. Best part is the fact that you get #a11y out of the box with native widgets 🙌

A few examples: <dialog closedby="any">, stylable <select> and even HTML autocomplete/typeahead using the <datalist>.

#WebDev#UseThePlatform
Samuel Plumppu
@Greenheart@fosstodon.org  ·  activity timestamp 5 days ago

Wow! You know that #Web#Tech is getting really good when you are able to replace significant amounts of #JavaScript with a few lines of #HTML and #CSS. Best part is the fact that you get #a11y out of the box with native widgets 🙌

A few examples: <dialog closedby="any">, stylable <select> and even HTML autocomplete/typeahead using the <datalist>.

#WebDev#UseThePlatform
Roy Tang 🇵🇭
@roytang@indieweb.social  ·  activity timestamp 6 days ago

Shared: The Server Doesn't Render Anything https://unplannedobsolescence.com/blog/the-server-doesnt-render/.

> "When I advise people on how they should structure a web service, I always start from the same place: make a server that responds to HTTP requests with HTML text.
>
> That is the most durable, cost-effective, and user-friendly way to build a web service. Most web services should be built this way absent an excellent reason not to."

#Web#Html
Roy Tang 🇵🇭
@roytang@indieweb.social  ·  activity timestamp 6 days ago

Shared: The Server Doesn't Render Anything https://unplannedobsolescence.com/blog/the-server-doesnt-render/.

> "When I advise people on how they should structure a web service, I always start from the same place: make a server that responds to HTTP requests with HTML text.
>
> That is the most durable, cost-effective, and user-friendly way to build a web service. Most web services should be built this way absent an excellent reason not to."

#Web#Html
Terence Eden
@Edent@mastodon.social  ·  activity timestamp last week

🆕 blog! “What about using rel="share-url" to expose sharing intents?”

Let's say that you've visited a website and want to share it with your friends. At the bottom of the article is a list of popular sharing destinations - Facebook, BlueSky, LinkedIn, Telegram, Reddit, HackerNews etc.

You click the relevant icon and get taken to the site with the…

👀 Read more: https://shkspr.mobi/blog/2025/08/what-about-using-relshare-url-to-expose-sharing-intents/
⸻
#HTML #standards #webdev
Terence Eden
@Edent@mastodon.social  ·  activity timestamp last week

🆕 blog! “What about using rel="share-url" to expose sharing intents?”

Let's say that you've visited a website and want to share it with your friends. At the bottom of the article is a list of popular sharing destinations - Facebook, BlueSky, LinkedIn, Telegram, Reddit, HackerNews etc.

You click the relevant icon and get taken to the site with the…

👀 Read more: https://shkspr.mobi/blog/2025/08/what-about-using-relshare-url-to-expose-sharing-intents/
⸻
#HTML #standards #webdev
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

Coming soon (likely this afternoon, I’m writing tests and docs and updating examples as we speak)…

This is the sort of thing you’ll be able to do with Markdown pages. Just pop any arbitrary JavaScript you want in the new script block in the front matter and then import and use components as well as plain old JavaScript tagged template variable interpolation (not shown in this example) inside your Markdown.

The screen has all the code (sans the end of the last line of CSS and the closing tags for the

Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Aral Balkan
@aral@mastodon.ar.al replied  ·  activity timestamp 2 weeks ago

OK, so here’s likely the simplest possible example demonstrating:

• The same route, implemented as both a Kitten JavaScript Page (.page.js) and as a Kitten Markdown Page (.page.md)

• How to persist to the default Kitten JSDB¹ database.

(That first line with the nullish coalescing operator creates a “table” on the database with a default value for the count if it doesn’t already exist.)

kitten.small-web.org

¹ kitten.small-web.org/tutorials

Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
Three windows: top-left, source of page.js version of Kitten count example, bottom-left, source of page.md version, and on the right, the output in a browser. Top-left: kitten.db.kittens ??= { count: 0 } export default () => kitten.html` <h1>Kitten count</h1> <p>${'🐱️'.repeat(++kitten.db.kittens.count)}</p> ` Bottom-left: --- script: | kitten.db.kittens ??= { count: 0 } --- # Kitten count ${'🐱️'.repeat(++kitten.db.kittens.count)} Right: Kitten count (heading) and 15 🐱️ emojis.
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

Coming soon (likely this afternoon, I’m writing tests and docs and updating examples as we speak)…

This is the sort of thing you’ll be able to do with Markdown pages. Just pop any arbitrary JavaScript you want in the new script block in the front matter and then import and use components as well as plain old JavaScript tagged template variable interpolation (not shown in this example) inside your Markdown.

The screen has all the code (sans the end of the last line of CSS and the closing tags for the

Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Screenshot: three windows: left side: Source of index.page.md, top-right browser showing running web app, bottom-right, source of Button and Reactions components. Contents of windows: index.page.md: --- title: An interactive markdown page script: | import Reaction from './Reaction.fragment.js' // Initialise database if necessary. kitten.db.reactions ??= {} kitten.db.reactions.Heart ??= 0 kitten.db.reactions.Confetti ??= 0 kitten.db.reactions.Smiley ??= 0 let page export function onConnect (data) { page = data.page } export function onReaction (data) { kitten.db.reactions[data.type]++ page.send(kitten.html`<${Reaction} />`) } --- <page css> # Hello! While this is a __markdown__ page, I can easily layer interactivity by adding a simple component in a script block. ## Reactions{id=your-reactions} <${Reaction} /> Browser (output): Hello! While this is a markdown page, I can easily layer interactivity by adding a simple component in a script block. Reactions Heart button: 5 Confetti button: 4 Smiley button: 3
Aral Balkan
@aral@mastodon.ar.al  ·  activity timestamp 2 weeks ago

Rewriting the Windows section of Kitten’s installation instructions.

Update: it’s live now.

kitten.small-web.org/

Screenshot of web browser showing https://localhost. It’s a detail of the Kitten web site’s main page, with the Install section highlighted: Install Latest version released last Tuesday at 5:28 PM Europe/Dublin (view source). Tabs: Linux, macOS, Windows (selected) Tab contents of Windows tab: Sorry, no. Microsoft is complicit in Israel’s genocide of the Palestinian people. (link) Small Technology Foundation (link) stands in solidarity with the Boycott, Divestment, and Sanctions (BDS) movement (link). Callout with exclamation mark: Windows is an ad-infested and surveillance-ridden dumpster fire of an operating system and, alongside supporting genocide, you are putting both yourself and others at risk by using it.
Screenshot of web browser showing https://localhost. It’s a detail of the Kitten web site’s main page, with the Install section highlighted: Install Latest version released last Tuesday at 5:28 PM Europe/Dublin (view source). Tabs: Linux, macOS, Windows (selected) Tab contents of Windows tab: Sorry, no. Microsoft is complicit in Israel’s genocide of the Palestinian people. (link) Small Technology Foundation (link) stands in solidarity with the Boycott, Divestment, and Sanctions (BDS) movement (link). Callout with exclamation mark: Windows is an ad-infested and surveillance-ridden dumpster fire of an operating system and, alongside supporting genocide, you are putting both yourself and others at risk by using it.
Screenshot of web browser showing https://localhost. It’s a detail of the Kitten web site’s main page, with the Install section highlighted: Install Latest version released last Tuesday at 5:28 PM Europe/Dublin (view source). Tabs: Linux, macOS, Windows (selected) Tab contents of Windows tab: Sorry, no. Microsoft is complicit in Israel’s genocide of the Palestinian people. (link) Small Technology Foundation (link) stands in solidarity with the Boycott, Divestment, and Sanctions (BDS) movement (link). Callout with exclamation mark: Windows is an ad-infested and surveillance-ridden dumpster fire of an operating system and, alongside supporting genocide, you are putting both yourself and others at risk by using it.