.@heydon shares how he uses recent advances in CSS to perform detailed HTML testing without JavaScript. The technique is useful for accessibility audits, and can be applied independently across stacks.

https://heydonworks.com/article/testing-html-with-modern-css/

Hat tip: @pablolarah #frontend #html #CSS #testing

On Cloud Computing And Learning to Say No

#internethacks #networkhacks #html #servers #webhosting #hackaday
posted by pod_feeder_v2

Brian Ó Donnell / pod_feeder_v2 · GitLab

Publishes RSS/Atom feeds to Diaspora*

^GitLab

Hey, all! On stream today we'll be making more updates to the Andromeda website, making use of Eleventy - check them out at @eleventy, and come hang out with us in chat!

https://www.twitch.tv/martine_dowden

#webdev #Eleventy #11ty #HTML #CSS #JavaScript

Martine_Dowden - Twitch

Award winning CTO, UX / UI designer & developer / international speaker and author focusing on web interfaces that are beautiful, functional, accessible, and usable.

^Twitch

This is so f***** up!! O_O

Be aware when you receive HTML emails (who doesn't?)!

https://gruene.social/@weddige/112190338668045392

#HTML #HTMLmail #CSS
#Phishing #SCAM
#SocialEngineering
#Thunderbird #Outlook
#KoboldLetters

Konstantin Weddige (@weddige@gruene.social)

Attached: 1 image Welcome to another edition of "Is this phishing?" Assume the email is in principle plausible and the transaction ID exists. What is the worst that can happen if you press send? #phishing

^{gruene.social}

Let’s build Draw Together… umm, together.

Video: https://vimeo.com/927628184

Blog post: https://ar.al/2024/03/26/draw-together/

Play with it: https://draw-together.small-web.org

💕

#DrawTogether #Kitten #SmallWeb #web #dev #HTML #CSS #JavaScript #htmx #hypermedia #WebSocket #idiomorph #tutorial #howTo

Draw Together

Join me as I take you through building Draw Together – a little collaborative drawing toy I made and released over the weekend – from scratch.

^{Aral Balkan}

I’ve also updated the readme with instructions on how to run Draw Together yourself (you could have it up and running locally in under a minute by installing Kitten, cloning the repository, and running the kitten command) and links to where you can learn more about the Streaming HTML magic in Kitten that means that the whole app is ~60 lines of code :)

https://codeberg.org/aral/draw-together#draw-together

#DrawTogether #Kitten #SmallWeb #web #dev #StreamingHTML #html #css #JavaScript #htmx #WebSocket

draw-together

A very simple Kitten toy in ~60 lines of code for drawing together on a 20×20 grid.

^Codeberg.org

soupault

https://soupault.app/

#indieweb #blogging #HTML

Minor Kitten¹ update: Even if your page routes now return nothing (e.g., null, undefined, empty string), a proper page will be rendered that includes the development-time WebSocket that powers hot reloads.

So the shortest valid page route is now:

```js
export default () => ''
```

And, more importantly, e.g.,

```js
export default () => kitten.html`
<page css>
`

Will also render.

💕

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

#Kitten #SmallWeb #HTML #CSS #JavaScript #htmx #hypermedia #web #dev

app

A web development kit that’s small, purrs, and loves you.

<sup>Codeberg.org</sup>

SteveSounds - An Accessible Steve Faulkner Soundboard by @lloydi

#accessibility #webDev #HTML #CSUNatc2024

https://a11y-tools.com/steve/v3-fully-accessible.html

Update: I forgot to make the toast message `div` into an `aria-live` region so toast messages are read out when they arrive for people who use screen readers.

Now fixed.

Source code: https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

Thanks to @hi_mayank for catching that one. Appreciate it!

💕

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast #accessibility #a11y

PS. Those 42 lines are all the source code.

That’s it.

No scaffolding. No npm create this-or-that.

1. Create a folder called toast.
2. Add those 42 lines of code to a file called index.page.js in that folder.
3. Run kitten¹.

Now hit https://localhost in your browser and you will see the example running just like in the video in the first post.

💕

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

# Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

app

A web development kit that’s small, purrs, and loves you.

<sup>Codeberg.org</sup>

🍞 Kitten toast, anyone?

A fifteen-second demo of how you can create a toast message in 42 lines of code¹ without writing any client-side JavaScript using Streaming HTML² in Kitten³.

Video:

https://vimeo.com/925828491

Source code:

https://codeberg.org/kitten/app/src/branch/main/examples/streaming-html/toast/index.page.js

Enjoy!

💕

¹ Almost half of which is CSS.
² https://ar.al/2024/03/08/streaming-html/
³ https://codeberg.org/kitten/app

#Kitten #SmallWeb #StreamingHTML #web #dev #htmx #hypermedia #WebSocket #html #css #JavaScript #toast

Streaming HTML

Building the Streaming HTML counter example. Estimated reading time: 25 minutes. Kitten has a new experimental workflow for creating web apps called Streaming HTML that I want to introduce you to today.

<sup>Aral Balkan</sup>

(Nitter addon enabled: Twitter links via https://nitter.privacytools.io)