First version of #SPAish docs is online.

SPAish is a #progressive #enhancement #toolkit, made of a few small functionalities to make a site more interactive and modern without the need to use a full #SPA framework. It is **not a framework**, it is a set of tools to enhance your site.

https://picossg.dev/tools/spaish/

See it in action in the docs itself.

How to feed the <progress> real-time data without complex protocols or constant polling?

EventSource is a #Web #API that enables real-time communication from a server to a client using server-sent events (SSE). It establishes a persistent connection, allowing the server to send updates in a simple text format.

Wikipedia says that the "media type for SSE is text/event-stream" (SSE means Server-Sent Events). It had first been specified in 2004, wow.

https://picostitch.hashnode.dev/eventsource-native-browser-streaming-api

828 Bytes of three small #progressive #enhancement helpers, more coming.

#SPAish - progressive enhancer for your MPA, make it feel SPAish.

https://github.com/wolframkriesing/SPAish

// Restore scroll position
spaish.scroll.restore(...);

// Reopen the <details>
spaish.details.reopen(...);

// Restore the color scheme
spaish.colorScheme.restoreLast();

<button onclick="
spaish.colorScheme.toggle();"
>Toggle Color Scheme</button>

https://picossg.dev grew one version older, but just 10 lines of code.

v5.0.0 is out

See all the changes v5 brought https://picossg.dev/docs/changelog/#section-v5-0-0-349-loc

The most important one is probably the stats plugin. But more important I think is #SPAish a spinoff project https://codeberg.org/wolframkriesing/spaish – not yet documented and ready to use, but it has a clear direction see the docs https://codeberg.org/wolframkriesing/spaish/src/branch/main/docs/index.md

Sometimes the best tools are the simplest. This minimal "Copy to Clipboard" component demonstrates how far you can go with just standard web technologies. No build tools, no frameworks, no external dependencies—just a few lines of CSS and JavaScript. It works anywhere HTML works.

https://picostitch.com/blog/2025/05/allow2copy/

I've recently found that many confuse attributes and properties in web components and javascript. Here's a quick explainer with some opinions and life advice:

https://jschof.dev/posts/2025/4/attributes-are-not-properties/

Compare your #webapps and see how much memory and CPU they are using.
Oh wonder #SPAs are more prone to memory eating, by nature, there is more dynamic page content, more #JS. Already the base memory footprint is double that one of an MPA.
Just check out the your browser's task manager. #devtools
And in doubt #usetheplatform, or in other words: HTML and CSS are powerful tools and solve more problems than some may think. Try to think simple(r).

"SPA Feel – Pattern #1 – Restore Scroll Position"

Combine the inherent simplicity and performance of MPAs with the smooth user experience of SPAs, making SPAs often outdated.

https://picostitch.com/blog/2025/03/spa-feel1-restore-scroll/

Initially written about at https://mastodontech.de/@wolframkriesing/113147202566737199

if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
// Disable scroll position restoration
}

in case you need it. For example when you control the page positioning yourself, esp. useful in an MPA that shall feel like an SPA ;)

#usetheplatform #website #MPA #SPA

See also: https://mastodontech.de/@wolframkriesing/113147202566737199

did you know #CSS rule `column-count: 2`
I am sure its not that new, but I didn't know until now.

With modern #CSS there is so much flexibility, I just wrote this selector:

code.source:has(~ code.result) {...}

it applies "..." only when the current `<code class=source>` has a sibling `<code class=result>`. Isn't that lovely?

Down side of course, there is more logic in the CSS and changing the HTML structure impacts these and eventually even causes dead code, but see https://mastodontech.de/@wolframkriesing/114155636784835455 for how to find out if you have dead code lying around.

Shift+Cmd+P in #chrome #devtools and search for "CSS overview", pretty nice tool which also shows you unused CSS lingering around.
Best of course, if there is none ;)

#browser #webdev #useThePlatform
#development

No need to add the * manually behind required form fields anymore.
Just let CSS do it:

label:has(+ [required])::after {
content: " *";
}

The "+ ..." just means that <label> and the <input>, <select>, etc. are siblings.

I run a MPA (multi page app, old style non-SPA) and more than 80% of the traffic is cached, so basically the browser just uses what it has downloaded already once. It's just using the feature that browsers are really good at, rendering HTML+CSS fast. I already had the question "how is this so fast?".
#useThePlatform

Learned what again.
#webdev has just gained SO much good stuff lately, esp. control over the UI amazes me so often again. See this one:

https://developer.mozilla.org/en-US/docs/Web/CSS/env

Pretty useful, if not necessary when developing a mobile (web) app.

I really enjoy the #fullstack development, jumping from

- database: thinking about writing a stored procedure, throwing it away
- ux/ui/django: optimizing the user flow by creating a wizard like form
- HTML: using the least markup and be most sematic
- CSS: sprinkle some animation in there
- DOM: remove nodes when they are clicked
- HTML: using dialog in a progressive enhancement way
- JavaScript: use canvas to detect the color in an incoming video stream

#useThePlatform
Thanks powerful web

TIL: an <input list="mylist"> can be an input and select, in native HTML

<datalist id="mylist">
<option value="one"></option>
<option value="two"></option>
</datalist>

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#providing_default_options

#useThePlatform #HTML
one more reason for #noFramework