Search
Items tagged with: html
.@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
Testing HTML With Modern CSS
CSS can be a great HTML testing tool, especially in 2024Heydon Pickering (heydonworks.com)
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? #phishinggruene.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
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
SteveSounds - An Accessible Steve Faulkner Soundboard by @lloydi
#accessibility #webDev #HTML #CSUNatc2024
https://a11y-tools.com/steve/v3-fully-accessible.html
SteveSounds - An Accessible Steve Faulkner Soundboard
A soundboard put together as part of an accessibility presentation. This is the 'after' example, where it is fully accessible due to having real buttons and a description of each sound.a11y-tools.com
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
🍞 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:
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.Aral Balkan
A11yphant (https://a11yphant.com), a great little tool to learn accessibility, one step at a time, with a few easy, medium and hard challenges. #accessibility #html #css
🐦🔗: https://nitter.privacytools.io/vitalyf/status/1592246075569627138
a11yphant
a11yphant is the easy way to learn the basics of web accessibility. Learn step by step by completing short, interactive coding challenges and quizzes.a11yphant.com
(Nitter addon enabled: Twitter links via https://nitter.privacytools.io)