Med-Mastodon

OblomovLet's say you have an <a href="https://sociale.network/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> table. Each `tr` has an attribute (say, `data-name`) whose value is indicative of the row contents (for the curious: this is a heavily customized Apache directory listing, and the data-name is a normalized version of the file/dir name, but it could be anything). There is also an `input` field. We want to only show the rows whose data-name contains the contents of the input field.<a href="https://sociale.network/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>2/n

OblomovSpeaking of <a href="https://sociale.network/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webDev</a>, what the <a href="https://sociale.network/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> and <a href="https://sociale.network/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> standards need is some way to style nodes based on DOM values of other modes. Unless I'm missing something, we still need <a href="https://sociale.network/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> to achieve the following, but I'm open to recommendations or suggestions about things I might have missed, so let's make this an <a href="https://sociale.network/tags/askFedi" class="mention hashtag" rel="nofollow noopener" target="_blank">#askFedi</a> The intent here is to develop a JS-free “quick filter” over a list or table. Here's what I've done:1/n

LeanpubGame Studio Starter Kit (6 Game Collection) <a href="http://leanpub.com/set/leanpub/ugsskitc" rel="nofollow noopener" translate="no" target="_blank">http://leanpub.com/set/leanpub/ugsskitc</a> by Stephen Gose is the featured Track of online courses on the Leanpub homepage! <a href="https://leanpub.com" rel="nofollow noopener" translate="no" target="_blank">https://leanpub.com</a> <a href="https://mastodon.social/tags/ProjectManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#ProjectManagement</a> <a href="https://mastodon.social/tags/GameDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#GameDevelopment</a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDevelopment</a> <a href="https://mastodon.social/tags/gaming" class="mention hashtag" rel="nofollow noopener" target="_blank">#gaming</a> <a href="https://mastodon.social/tags/videogames" class="mention hashtag" rel="nofollow noopener" target="_blank">#videogames</a> <a href="https://mastodon.social/tags/contentcreator" class="mention hashtag" rel="nofollow noopener" target="_blank">#contentcreator</a>

David O'BrienOh, and I am unconvinced of the wisdom of using a definition list for navigation. That's not what it was intended for, and assistive tech support is patchy.A simple <ul> or <ol> inside a <nav> landmark is probably a better option.<a href="https://mastodon.scot/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://mastodon.scot/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mas.to/@markwyner" class="u-url mention" rel="nofollow noopener" target="_blank">@markwyner</a>

Noah LiebmanHas anyone made this giant table of dialog/popover behaviors in different configurations? ’cause it’s hard to keep track 😅 <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

Mark Wyner Won’t Comply :vm:Question for accessibility folks and people who rely on screen readers.I code nav so there’s no link when you’re on a respective page. Like this:<dd>One</dd> <dd><a href="/two">Two</a></dd>But the aria-current attribute can be used with persistent links:<dd><a href="/one" aria-current="page">One</a></dd> <dd><a href="/two">Two</a></dd>Which of these, or using aria-current on a non-linked item, feels the most accessible?<a href="https://mas.to/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#Accessibility</a> <a href="https://mas.to/tags/A11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#A11y</a> <a href="https://mas.to/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#UI</a> <a href="https://mas.to/tags/Development" class="mention hashtag" rel="nofollow noopener" target="_blank">#Development</a> <a href="https://mas.to/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#Code</a> <a href="https://mas.to/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mas.to/tags/ScreenReaders" class="mention hashtag" rel="nofollow noopener" target="_blank">#ScreenReaders</a>

Alexandre B A Villares 🐍In order to publish my personal projects/pages (and most of my teaching materials, hundreds of pages) on <a href="https://ciberlandia.pt/tags/Codeberg" class="mention hashtag" rel="nofollow noopener" target="_blank">#Codeberg</a>, I need to convert <a href="https://ciberlandia.pt/tags/markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#markdown</a> files into <a href="https://ciberlandia.pt/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> and sprinkle some CSS & JS from a layout template, like <a href="https://ciberlandia.pt/tags/GitHub" class="mention hashtag" rel="nofollow noopener" target="_blank">#GitHub</a>'s Pages <a href="https://ciberlandia.pt/tags/Jekyll" class="mention hashtag" rel="nofollow noopener" target="_blank">#Jekyll</a> does, but I dread the complexity of installing and tending to Jekyll or Hugo or other static site generators, and I can't even imagine going near Forejo Actions or any sort of CI intergration. Should I be brave and do the Jekyll /static generator thing? Any other ideas for poor, overworked, stressed out, clumsy people? :(

Dan Q🧑‍🏫 Clever nerds: Rules for accessible, high-performance, non-brittle <a href="https://m.danq.me/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#frontend</a> <a href="https://m.danq.me/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://m.danq.me/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>: 1. Don't use <a href="https://m.danq.me/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> to do something you can do in <a href="https://m.danq.me/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>. 2. Don't rely on CSS to do break <a href="https://m.danq.me/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>.🍺 Me: Hold my beer. I'm gonna use the <details> element to build a lightbox...<a href="https://danq.me/details-summary-lightboxes-in-pure-html-css" rel="nofollow noopener" translate="no" target="_blank">https://danq.me/details-summary-lightboxes-in-pure-html-css</a>

Frontend DogmaA Few Things About the Anchor Element’s “href” You Might Not Have Known, by <a href="https://mastodon.social/@jimniels" class="u-url mention" rel="nofollow noopener" target="_blank">@jimniels</a>:<a href="https://blog.jim-nielsen.com/2025/href-value-possibilities/" rel="nofollow noopener" translate="no" target="_blank">https://blog.jim-nielsen.com/2025/href-value-possibilities/</a><a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mas.to/tags/attributes" class="mention hashtag" rel="nofollow noopener" target="_blank">#attributes</a> <a href="https://mas.to/tags/links" class="mention hashtag" rel="nofollow noopener" target="_blank">#links</a> <a href="https://mas.to/tags/dataurls" class="mention hashtag" rel="nofollow noopener" target="_blank">#dataurls</a>

DailyHTML<meter> Represents either a scalar value within a known range or a fractional value.<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter" rel="nofollow noopener" translate="no" target="_blank">https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter</a><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/DailyHTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#DailyHTML</a>

Steve Faulkner👁️ Set heading level based on HTML computed heading level - <a href="https://indieweb.social/@keithamus" class="u-url mention" rel="nofollow noopener" target="_blank">@keithamus</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/WebStandards" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebStandards</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a><a href="https://github.com/w3c/aria/pull/2598" rel="nofollow noopener" translate="no" target="_blank">https://github.com/w3c/aria/pull/2598</a>

Aral BalkanThe new integrated Markdown parser I’ve been implementing in Kitten has been kicking my ass for the past few weeks but I think I finally have it fully working and seamlessly so. Expect a new release this/next week that brings the parsing of Markdown pages (.page.md files) in your apps up to the standard of the recently-improved runtime Markdown parsing in Kitten HTML tagged-template strings (within `<markdown>…</markdown>` blocks).The coolest thing is I was able to implement this without introducing any new syntax. In fact, I was able to simplify things so that you can now add arbitrary JavaScript to your Markdown pages within a multi-line script block in the YAML front matter (`script: |`) and use JavaScript string interpolation syntax in your Markdown (and, of course, Kitten components and conditionals, which, themselves, rely on string interpolation).The only place where you have to deviate from standard Markdown in your Markdown pages is if you have JavaScript string interpolations or Kitten components/conditionals in code fences within your Markdown. In that case, you’ll have to escape them (e.g., `<\${Component} />`, `\<if \${something}>something\</if>`, etc.). And, to be fair, the person most impacted by this is likely me as the Kitten documentation at <a href="https://kitten.small-web.org" rel="nofollow noopener" translate="no" target="_blank">https://kitten.small-web.org</a> is written in Kitten so I had a lot of escaping to do. But for any other use case, it means that things should just work and work exactly as they do in JavaScript pages (page.js files).Anyway, so this is going to be a breaking change so I thought I’d give you (the three of you playing with Kitten right now?) a heads up. Of course, I’ll be updating the documentation to reflect all this.(Remember, Kitten is in pre-release and it’s the framework I’m building/using to create Catalyst – the Small Web hosting solution – and Yarn – a small web – peer to peer – personal site app. So Kitten isn’t the means, not the end. And, at least until the Version 1 API freeze, things can and will break. That said, there’s nothing stopping you from playing with it now and, to be fair, at this point, such breaking changes should become rarer and rarer).:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/Markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#Markdown</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#NodeJS</a>

CSS by T. Afif :verified:💡 CSS Tip!Similar to the :nth-child() trick, we can implement media queries using if() and calculation!<a href="https://css-tip.com/dynamic-queries/" rel="nofollow noopener" translate="no" target="_blank">https://css-tip.com/dynamic-queries/</a>Why reinvent the wheel? With this trick, you can update the width value on the fly (using variables for example). You cannot do it with native queries.<a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>

Digital Mark λ ☕️ 🕹 🙄WTFpotomus. I added "<html lang='en'>" to my pages, hoping it'd stop Safari from its stupid "translation available" thing. And it changed my fucking fonts!It's not Fira Sans/Code, which uses a dot 0 and has open 4.HARD DRUGS.Why is this happening? I'm happy to take the lang back off, but I don't know why it did this.<a href="https://appdot.net/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a>

Hacker News 50How to safely escape JSON inside HTML SCRIPT elementsLink: <a href="https://sirre.al/2025/08/06/safe-json-in-script-tags-how-not-to-break-a-site/" rel="nofollow noopener" translate="no" target="_blank">https://sirre.al/2025/08/06/safe-json-in-script-tags-how-not-to-break-a-site/</a> Discussion: <a href="https://news.ycombinator.com/item?id=44842442" rel="nofollow noopener" translate="no" target="_blank">https://news.ycombinator.com/item?id=44842442</a><a href="https://social.lansky.name/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a>

A. Lee Bennett Jr.I've seen toots recently celebrating the beauty of simple <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> sites, especially those with zero <a href="https://mastodon.social/tags/CMS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CMS</a>. Just <a href="https://mastodon.social/tags/plain" class="mention hashtag" rel="nofollow noopener" target="_blank">#plain</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>.Admittedly I'm happy with my current WordPress-powered sites (self-hosted, NOT dotcom mess).But the posts I've encountered made me super nostalgic about the meticulously hand-coded sites I used to build. My favorite was v2.0 of D.T.P. by Lee (see it at <a href="http://2001.dtpbylee.com" rel="nofollow noopener" translate="no" target="_blank">http://2001.dtpbylee.com</a>).I think I wrote some rather nicely formatted, tabbed, and annotated code, didn't I?

Aral Balkan🥳 New Kitten ReleaseHousekeeping: • Updated runtime version to Node version 22.18.0 (latest LTS). • Removed `--experimental-global-customevent` in node launch command (as `CustomEvent` is no longer behing the CLI flag since Node v19.0.0) • Renamed `--experimental-loader` flag to `--loader` as the experimental prefix is no longer required.<a href="https://kitten.small-web.org" rel="nofollow noopener" translate="no" target="_blank">https://kitten.small-web.org</a>Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/KittenRelease" class="mention hashtag" rel="nofollow noopener" target="_blank">#KittenRelease</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#NodeJS</a>

Jens Oliver MeiertIt’s not appropriate to use the `search` element just for presenting search results—true or false?<a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a>

RyeGonna write some html tomorrow. You got some cool samples of html doing weird things? Like drawings in tables ? <a href="https://ioc.exchange/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://ioc.exchange/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://ioc.exchange/tags/indieweb" class="mention hashtag" rel="nofollow noopener" target="_blank">#indieweb</a>

Deyan GinevYou have 4 days:The State of HTML 2025 survey covers <math> for the first time.Have thoughts? Engage! Survey closes August 15th.<a href="https://survey.devographics.com/en-US/survey/state-of-html/2025" rel="nofollow noopener" translate="no" target="_blank">https://survey.devographics.com/en-US/survey/state-of-html/2025</a><a href="https://mathstodon.xyz/tags/math" class="mention hashtag" rel="nofollow noopener" target="_blank">#math</a> <a href="https://mathstodon.xyz/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a>

Recent searches

Search options

Administered by:

Server stats:

#html