#nojs — Public Fediverse posts

#SmolFedi is a lightweight, no-JavaScript Fediverse web client written in PHP.

v1.2.7 is available

• Add thread indentation and goto parent link
• Better page style
• Add profile banner ratio in prefs
• Add missing translation in aria
• Add RSS feeds discovery for profiles and tags
• Add instance info page
• Stay on profile and post pages when switching account

Source/download

Demo instance

#smolweb #fediverse #nojs

#SmolFedi is a lightweight, no-JavaScript Fediverse web client written in PHP.

v1.2.6 is available

• Localized in English, German, Spanish and French 🌍
• Add Explore page: trending posts, trending hashtags, trending links, and suggested accounts
• Add scheduled post feature

Source/download

Demo instance

#smolweb #fediverse #nojs

#SmolFedi is a lightweight, no-JavaScript Fediverse web client written in PHP.

v1.2.5 is available

• Optimize profile loading
• Change default posts filter on profile page, due to gotosocial performances
• Display media of a profile in a gallery
• Manage new post failure
• Add profile banner image
• Add DEBUG_MODE constant in config.php to log api calls
• Fix link to account in snac2 user mentions
• Add 'Here since [date]' in profile page
• Display nested quoted post (if available on the instance)
• Add quoting post feature
• Add card preview of links if provided by the instance
• Add CW field in reply
• Add font family selector in prefs
• Correct Apache .htaccess help in README
• Display [locked] info on profile page

Source/download

Demo instance

#smolweb #fediverse #nojs

Heyy kids!

Could you please drop me a quick comment to this form on my web?

(#cli accesible #nojs #php #html)

Theme is:

Your favorited #solarpunk (primarly), #steampunk #atompunk #dieselpunk whatever #punk works of #visualart #writing #games etc...

I'm being too socio-economically sarcastic about the genre and need references for long winter nights, and possible essay on stuff.

#society #economics #literature #art #gaming #comic #sciencefiction #science

https://caryo.space/plaintextcomment.php

THKS

Great benefit of going #nojavascript #nojs on your #SmallWeb is being able to have full access to your web over experimental or retro #os. I just did a merry #solstice status update on mine. From #mothra. Running on #9front in #qemu running on top of #twm in #termux running on low end #android tablet. And yes, you can have decent user experience on mouse oriented system without a mouse using just trackpad / touchscreen.

So, merry Solstice. May your knitting and your code flow freely.

Synchronised updates between browser windows without JavaScript! KTor, @htmx_org and ServerSentEvents! #htmx #ktor #nojs

Full blog here: https://blog.f12.no/wp/2024/11/11/htmx-sse-easy-updates-of-html-state-with-no-javascript/

If you're in Oslo I am doing a talk on Wednesday: https://www.meetup.com/meetup-group-nwerbymu/events/304303659/

Dear @nixCraft,

Your website isn't accessible without JS. 😭

#NoJS #AccessibleWeb #TextBrowser #Lynx #Links #eLinks #w3m

Stavo quasi per finire la parte di base del bridging di messaggi oggi in #WinDog, che grazie alla API cross-platform che ho costruito dovrebbe in realtà essere questione di poco conto… perché si tratta di usare funzioni già esistenti per elaborare strutture dati già pronte, ma in modo diverso. Peccato che c’è qualche inconveniente per come i messaggi vengono sdoppiati, oltre al fatto che per le varie piattaforme ho ancora da implementare una marea di metodi (su tutte mancano modifica e cancellazione dei messaggi, pensa te), quindi mi sono scocciata oggi pomeriggio e ho pensato… ma quasi quasi ci vuole un bel proof-of-concept della futura versione #web del #bot, totalmente funzionante senza #JavaScript… 👽️

Non so se lo lascerò ancora prima di sistemare estetica e codice, ma nel dubbio, dovrebbe stare su WinDog.octt.eu.org. Il meccanismo per cui la pagina si aggiorna senza script e senza flickering, lo spiego meglio, è fighissimo: con l’header HTTP Content-Encoding: chunked, il browser è forzato a renderizzare l’HTML senza aspettare che la connessione si chiuda; dall’altro lato, il server non termina mai la connessione (infatti c’è un loop infinito che preleva dati da una coda, e wow, quella struttura ritorna dopo appena un giorno…), inviando via via frammenti di #HTML che vengono appesi in fondo alla pagina. Stranamente, questo comportamento si vede funzionare correttamente solo collegandosi con normali browser o client TCP grezzi (netcat)… curl semplicemente si blocca, invece. E, ancora, il Content-Type deve essere esattamente text/html; charset=UTF-8, basta anche solo omettere il charset per rompere tutto! La casella di invio, invece, è banalmente dentro un iframe. Direi allora che questo è abbastanza #HTTP 1.1 per oggi… 🥰️

https://octospacc.altervista.org/2024/07/01/wincane-no-js/

#HTML #bot #web #JavaScript #demo #HTTP #hack #WinDog #POC #noJs #sansJs #chatbot

6⃣ This big collection of pure #CSS, no SVG 1 div #spinners https://codepen.io/thebabydino/pen/WNrbGBz

They are all different - can you spot the differences between similar ones?

#pureCSS #noJS #loader #cssVariables #code #coding #frontend #web #webDev #dev #webDevelopment

5⃣ Pure CSS icosahedron candy https://codepen.io/thebabydino/pen/xxwveWZ

Fair warning: it now looks broken in Chrome until bringing up DevTools or resizing the result panel or switching to another CodePen editor layout. Should have found time to file a bug... Still love it.

#3d #geometry #maths #solid #3Dgeometry #mathematics #code #coding #CSS #noJS #cssVariables #frontend #web #dev #webDevelopment #webDev

4⃣ Pure CSS sphere of randomly positioned, non-intersecting spheres https://codepen.io/thebabydino/pen/LYXJPEb

Uses the spherical distribution tactic described here https://mastodon.social/@anatudor/110745736820689528 and then makes sure no two spheres intersect. Also: pure CSS 3D shading!

#CSS #3D #pureCSS #css3d #transform #sphere #maths #geometry #3dGeometry #noJS #shading #code #coding #frontend #web #webDev #dev #webDevelopment

3⃣ Pure CSS morphing polyhedra: dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron https://codepen.io/thebabydino/pen/gOjGyby

Positions & makes faces morph using CSS transforms. Which depend on CSS vars to keep code compact https://css-tricks.com/logical-operations-with-css-variables/

#CSS #3D #pureCSS #noJS #booleanLogic #cssVariables #transform #css3d #code #coding #frontend #web #dev #webDev #webDevelopment #polyhedra #maths #geometry #3dGeometry #mathematics #platonicSolids #Archimedean

I released reactions for my blog exactly 24 hours ago. But it didn't had any check if the visitor had made an reaction or not. Now it does!

And the best part is that the feature do not use any JavaScript. In fact, as of today, airikr.me do not use any JS what so ever!

Go to any blog post on my website to check it out 🙂 Example post: https://airikr.me/blog/202406041253?lang=en&thm=dark

Read the privacy policy if you want to know what happens when you react on a post.

#StaticWebsites #blog #privacy #opensource #nojs

We do that by setting `animation-timeline: scroll()`.

We also remove the `animation-iteration-count`. We could also remove the `animation-duration`... except it doesn't work in Firefox without it for some reason.
¯\_(ツ)_/¯

A Firefox bug is also why the `animation-fill-mode`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

It *still* doesn't look right, so we change the end state background width from `100%` to `calc(var(--n)*1ch)`.

We also add in a `background-color`. We now have our char by char text reveal!

But this just runs infinitely on its own, so we still need to tie it to page scroll.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Let's animate the `background-size` of this gradient (which we also make non-repeating) along the x axis.

Then we clip this background to `text`.

We make the animation go char by char by using `steps(var(--n))`, where n is the text length, set by an HTML preprocessor as `--n`.

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation

Adding a gradient! There's a difference between block and inline elements when it comes to horizontal gradients.

Block element: gradient goes from left to right edge of the box.

Inline element: gradient wraps/ progresses with the wrapping text.

You may be seeing where this is going...

#CSS #pureCSS #noJS #scroll #scrollAnimation #text #textEffect #revealEffect #code #coding #frontend #webDev #web #webDevelopment #dev #cssAnimation