digitalcourage.social

Reuben Walker aka mobileatomHow to Build Simpler Accordion Menus with HTML . <a href="https://flipboard.com/tag/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a><a href="https://www.freecodecamp.org/news/how-to-build-simpler-accordion-menus-with-html-details/?utm_source=flipboard&utm_medium=activitypub" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.freecodecamp.org/news/how-to-build-simpler-accordion-menus-with-html-details/?utm_source=flipboard&utm_medium=activitypub </a>Posted into Coding is Living <a href="https://flipboard.com/@mobileatom/coding-is-living-5g0jmckdz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@coding-is-living-mobileatom</a>

Inautilo<a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Development</a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Guides</a> A friendly introduction to SVG · Learn SVG essentials through interactive demos <a href="https://ilo.im/165jid" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/165jid</a>_____ <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/Shapes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Shapes</a> <a href="https://mastodon.social/tags/Animations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Animations</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a>

Steve Faulkner👁️ super short note: placeholder perfidy"I made the mistake in a recent article of using the placeholder attribute content to illustrate when a label is not correctly associated the text label does not provide an accessible name."<a href="https://mastodon.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/UX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#UX</a> <a href="https://html5accessibility.com/stuff/2025/07/21/super-short-note-placeholder-perfidy/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://html5accessibility.com/stuff/2025/07/21/super-short-note-placeholder-perfidy/</a>

harriet (they/them)Heads up <a href="https://mas.to/tags/Bristol" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Bristol</a>! Do you love <a href="https://mas.to/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> ?? Of course you do! QueerTech Bristol are doing some last minute organising to celebrate <a href="https://mas.to/tags/HTMLDay" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTMLDay</a> on August 2nd ☼☼☼☼ Venue and registration TBA v soon - save the date! it will be a low key hang in the park or at an indoor venue :) <a href="https://mas.to/tags/HTMLEnergy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTMLEnergy</a> <a href="https://mas.to/tags/permacomputing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#permacomputing</a> <a href="https://mas.to/tags/lowtech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lowtech</a> <a href="https://mas.to/tags/smallweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#smallweb</a> <a href="https://mas.to/tags/selfhosting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#selfhosting</a>

DailyHTML⚠️ DEPRECATED: <content> An obsolete part of the Web Components suite of technologies—was used inside of Shadow DOM as an insertion point.undefined<a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/DailyHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DailyHTML</a>

linkdropGitHub - BenjaminAster/CSS-Minecraft: A Minecraft clone made with pure HTML & CSS – no JavaScript. <a href="https://github.com/BenjaminAster/CSS-Minecraft" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/BenjaminAster/CSS-Minecraft</a> <a href="https://troet.cafe/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenSource</a> <a href="https://troet.cafe/tags/minecraft" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#minecraft</a> <a href="https://troet.cafe/tags/GitHub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GitHub</a> <a href="https://troet.cafe/tags/online" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#online</a> <a href="https://troet.cafe/tags/game" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#game</a> <a href="https://troet.cafe/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://troet.cafe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

linkdropCSS Minecraft <a href="https://benjaminaster.com/css-minecraft/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://benjaminaster.com/css-minecraft/</a> <a href="https://troet.cafe/tags/minecraft" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#minecraft</a> <a href="https://troet.cafe/tags/online" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#online</a> <a href="https://troet.cafe/tags/game" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#game</a> <a href="https://troet.cafe/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://troet.cafe/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

Web AxeWhy use Able Player instead of `video`? - Joe Dolson Web Accessibility <a href="https://www.joedolson.com/2025/07/why-use-able-player-instead-of-video/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.joedolson.com/2025/07/why-use-able-player-instead-of-video/</a> <a href="https://a11y.info/tags/video" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#video</a> <a href="https://a11y.info/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://a11y.info/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://a11y.info/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://a11y.info/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://a11y.info/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a>

DailyHTML Represents a word break opportunity.<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/wbr" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/wbr</a><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/DailyHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DailyHTML</a>

SynchronIs there a tool or script to check every link on a webpage (with all subpages) if it's dead or alive?Thanks<a href="https://norden.social/tags/linux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#linux</a> <a href="https://norden.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://norden.social/tags/help" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#help</a> <a href="https://norden.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://norden.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://norden.social/tags/tool" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tool</a> <a href="https://norden.social/tags/script" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#script</a> <a href="https://norden.social/tags/question" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#question</a>

Steve Faulkner🆕 👕 People ask me where i learned about <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> and <a href="https://mastodon.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> "Was it Deque University?" "Was it Level Access Academy??" my reply: "No, I went to HTML HIGH!"<a href="https://www.etsy.com/uk/listing/4338450427/html-high-short-hair" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.etsy.com/uk/listing/4338450427/html-high-short-hair</a>

Sara Soueidan📢 The State of HTML Survey is live <a href="https://survey.devographics.com/en-US/survey/state-of-html/2025" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://survey.devographics.com/en-US/survey/state-of-html/2025</a>The <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> and <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> surveys are the only web surveys I don't want to miss. Thank you <a href="https://front-end.social/@sachagreif" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@sachagreif</a> for making them, and <a href="https://front-end.social/@leaverou" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@leaverou</a> for curating.Please take a few minutes to fill the survey if/when you can. ✨

DailyHTML<button> An interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology.<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button</a><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/DailyHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DailyHTML</a>

KoosUntil recently, I just used YouTube when I had to embed a video. There are all kinds of UX, technical and business reasons to use the native HTML video element though. A big one is responsive video!It's kind of easy to implement, but doing this the first time, I encountered all kinds of little snags. I'm sharing my solutions here with you! <a href="https://www.kooslooijesteijn.net/blog/responsive-video-easy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.kooslooijesteijn.net/blog/responsive-video-easy</a> <a href="https://mastodon.green/tags/video" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#video</a> <a href="https://mastodon.green/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mastodon.green/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</a> <a href="https://mastodon.green/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a>

Terence Eden🆕 blog! “1KB JS Numbers Station”Code Golf is the art/science of creating wonderful little demos in an artificially constrained environment. This year the js1024 competition was looking for entries with the theme of "Creepy".I am not a serious bit-twiddler. I can't create JS shaders which produce intricate 3D worlds in a scrap of code. But I can use slightly obscure JavaScript…👀 Read more: <a href="https://shkspr.mobi/blog/2025/07/1kb-js-numbers-station/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://shkspr.mobi/blog/2025/07/1kb-js-numbers-station/</a> ⸻ <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#javascript</a> <a href="https://mastodon.social/tags/tts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tts</a>

DailyHTML<aside> Represents a portion of a document whose content is only indirectly related to the document's main content.<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside</a><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/DailyHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DailyHTML</a>

Pascal Duez“production-ready, clean, semantic code” <a href="https://www.linkedin.com/posts/anthropicresearch_claude-figma-connector-activity-7352049946734284800-ct4V" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.linkedin.com/posts/anthropicresearch_claude-figma-connector-activity-7352049946734284800-ct4V</a><a href="https://mamot.fr/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mamot.fr/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://mamot.fr/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a>

Frontend DogmaA Label and a Name Walk Into a Bar, by <a href="https://mastodon.social/@SteveFaulkner" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@SteveFaulkner</a>:<a href="https://html5accessibility.com/stuff/2025/07/14/a-label-and-a-name-walk-into-a-bar/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://html5accessibility.com/stuff/2025/07/14/a-label-and-a-name-walk-into-a-bar/</a><a href="https://mas.to/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://mas.to/tags/labels" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#labels</a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://mas.to/tags/concepts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#concepts</a> <a href="https://mas.to/tags/examples" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#examples</a>

Jesse JurmanAfter a long while tinkering with smaller and smaller ways to build re-usable pieces of HTML, I've landed on something that is simple, and uses the browsers built-in abilities to upgrade elements.Introducing "ShadowRoot Injector" 🎉 <a href="https://github.com/Tram-One/shadowroot-injector" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/Tram-One/shadowroot-injector</a>ShadowRoot Injector is a way to declaratively define HTML, that will automatically insert when custom elements appear in the DOM. 🪡Check out the link and examples, and let me know what y'all think! <a href="https://fosstodon.org/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebComponents</a> <a href="https://fosstodon.org/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://fosstodon.org/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ShadowDOM</a> <a href="https://fosstodon.org/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a>

DailyHTML<form> Represents a document section containing interactive controls for submitting information.<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/form</a><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/DailyHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#DailyHTML</a>

Recent searches

Search options

Administered by:

Server stats:

#html