Mathstodon

2 posts2 participants0 posts today

Frontend DogmaCreate an HTML Dialog When You Click an Image, by <a href="https://notacult.social/@cassidoo" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@cassidoo</a>:<a href="https://cassidoo.co/post/html-dialog-on-image-click/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://cassidoo.co/post/html-dialog-on-image-click/</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/images" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#images</a> <a href="https://mas.to/tags/modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#modals</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/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Techniques</a> How to open and close HTML dialogs · You’ll use a little JS today but none in the future <a href="https://ilo.im/163b4u" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/163b4u</a>_____ <a href="https://mastodon.social/tags/Dialogs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Dialogs</a> <a href="https://mastodon.social/tags/Modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Modals</a> <a href="https://mastodon.social/tags/Invokers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Invokers</a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Browser</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>

Frontend DogmaCool Native HTML Elements You Should Already Be Using, by @hrrsnbbnt.bsky.social:<a href="https://harrisonbroadbent.com/blog/cool-native-html-elements/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://harrisonbroadbent.com/blog/cool-native-html-elements/</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/modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#modals</a> <a href="https://mas.to/tags/forms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#forms</a> <a href="https://mas.to/tags/progressindicators" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#progressindicators</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/Examples" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Examples</a> Cool native HTML elements · “There’s something new here for you too.” <a href="https://ilo.im/162ub4" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/162ub4</a>_____ <a href="https://mastodon.social/tags/Modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Modals</a> <a href="https://mastodon.social/tags/Disclosures" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Disclosures</a> <a href="https://mastodon.social/tags/RangeInputs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RangeInputs</a> <a href="https://mastodon.social/tags/ProgressBars" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ProgressBars</a> <a href="https://mastodon.social/tags/SearchableDropdowns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SearchableDropdowns</a> <a href="https://mastodon.social/tags/GroupedLists" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GroupedLists</a> <a href="https://mastodon.social/tags/KeyCombinations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#KeyCombinations</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>

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/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Techniques</a> The different ways to toggle content · State-of-the-art disclosures, modals, and overlays <a href="https://ilo.im/160s0u" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ilo.im/160s0u</a>_____ <a href="https://mastodon.social/tags/Disclosures" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Disclosures</a> <a href="https://mastodon.social/tags/Modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Modals</a> <a href="https://mastodon.social/tags/Overlays" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Overlays</a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Content</a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Accessibility</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>

Kagan MacTane (he/him)The nice thing about Substack URLs is, even if it's a different domain name, it still goes "domainname.tld/p/short-slug", and that structure with the /p/ and the slug lets you know that if you click on it, it'll throw that goddamn "wouldn't you like to subscribe?" modal in your face just when you've read the first few sentences and are starting to get interested, so the URL lets you know to just skip the whole goddamn thing.<a href="https://wandering.shop/tags/Substack" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Substack</a> <a href="https://wandering.shop/tags/BadUX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#BadUX</a> <a href="https://wandering.shop/tags/modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#modals</a> <a href="https://wandering.shop/tags/ModalsSuck" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ModalsSuck</a>

Web AxeThe aria-modal attribute is just terrific. Now we need TalkBack and Narrator to support it. The spec: <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-modal" rel="nofollow noopener noreferrer" target="_blank">https://www.w3.org/TR/wai-aria-1.1/#aria-modal</a> Support: <a href="https://a11ysupport.io/tech/aria/aria-modal_attribute" rel="nofollow noopener noreferrer" target="_blank">https://a11ysupport.io/tech/aria/aria-modal_attribute</a> <a href="https://a11y.info/tags/aria" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#aria</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/modals" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#modals</a> <a href="https://a11y.info/tags/dialogs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dialogs</a>

Recent searches

Search options

Administered by:

Server stats:

#modals