Aral’s fediverse server

jfmblinux :jeditux:🇫🇷 selfh.st/icons Une collection d'icônes et de logos au format SVG, PNG, WEBP pour vos projets 😉🇬🇧 selfh.st/icons A collection of icons and logos in SVG, PNG, WEBP format for your projects 😉<a href="https://selfh.st/icons/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://selfh.st/icons/</a><a href="https://mastodon.jfmblinux.fr/tags/Html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Html</a> <a href="https://mastodon.jfmblinux.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.jfmblinux.fr/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.jfmblinux.fr/tags/PNG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PNG</a> <a href="https://mastodon.jfmblinux.fr/tags/WEBP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WEBP</a> <a href="https://mastodon.jfmblinux.fr/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mastodon</a> <a href="https://mastodon.jfmblinux.fr/tags/Fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fediverse</a> <a href="https://mastodon.jfmblinux.fr/tags/Pixelfed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pixelfed</a> <a href="https://mastodon.jfmblinux.fr/tags/Nextcloud" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Nextcloud</a>

Blain SmithWe're weeks away from being feature complete and we're still JavaScript free in our app. Even our delete confirmations are just regular server rendered HTML and form POST actions. <a href="https://fosstodon.org/tags/SmolWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmolWeb</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/WebApp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebApp</a> <a href="https://fosstodon.org/tags/NoJavaScriptNeeded" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#NoJavaScriptNeeded</a>

Patrick LeavyQuestion for you <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> peeps:I've made a site and it's totally in dark mode. How I like it 😊But some people mentioned that I should offer a light mode toggle because "some people are not used to dark mode and won't like it".Do you think that's valid? (Someone else said that there's also potentially an accessibility issue with dark mode - is that true?)<a href="https://mastodon.social/tags/websitedesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#websitedesign</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/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://mastodon.social/tags/darkmode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#darkmode</a> <a href="https://mastodon.social/tags/lightmode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lightmode</a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://mastodon.social/tags/mastodev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#mastodev</a>

Reilly Spitzfaden (they/them)Liked | In defense of unpolished personal websites ⭐ <a href="https://ohhelloana.blog/in-defense-of-unpolished-websites/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ohhelloana.blog/in-defense-of-unpolished-websites/</a> 🔗 <a href="https://reillyspitzfaden.com/interactions/2025/04/liked-in-defense-of-unpolished-personal-websites/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://reillyspitzfaden.com/interactions/2025/04/liked-in-defense-of-unpolished-personal-websites/</a><a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a href="https://hachyderm.io/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programming</a>

Feral Thoughts<a href="https://pkm.social/@ellane" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@ellane</a> <a href="https://c.im/@jeffbronks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jeffbronks</a> <a href="https://fosstodon.org/@pauby" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@pauby</a> <a href="https://graz.social/@publicvoit" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@publicvoit</a> I think the arguments made in favour of <a href="https://union.place/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> in this November 2016 Adam Hyde post in the context of book production platforms also apply to <a href="https://union.place/tags/notes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#notes</a> production and management software, primarily because I feel a local <a href="https://union.place/tags/website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#website</a> is the best way to create and manage notes (as I hinted earlier).<a href="https://www.adamhyde.net/building-book-production-platforms-p2/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.adamhyde.net/building-book-production-platforms-p2/</a>We need copyleft software that will make it simple for the average user.

Feral Thoughts<a href="https://pkm.social/@ellane" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@ellane</a> <a href="https://c.im/@jeffbronks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jeffbronks</a> <a href="https://fosstodon.org/@pauby" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@pauby</a> <a href="https://graz.social/@publicvoit" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@publicvoit</a> I have alluded to the problems with <a href="https://union.place/tags/markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#markdown</a> across various posts in this thread. For an overview of the severe limitations of markdown, and the issues with markdown as a proxy for <a href="https://union.place/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>, check out this October 2014 blog post by Adam Hyde.<a href="https://www.adamhyde.net/whats-wrong-with-markdown/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.adamhyde.net/whats-wrong-with-markdown/</a>(continues)

adamghillThis explains an approach I’ve been dabbling with here and there for <a href="https://indieweb.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>. Nice middle ground between “div soup” and the “all utility classes” approaches. <a href="https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://jordanbrennan.hashnode.dev/tac-a-new-css-methodology</a> <a href="https://indieweb.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>

Reilly Spitzfaden (they/them)I hadn't heard of it before, but it turns out there's a style format called XSLT that allows the browser to translate an XML file into HTML with CSS styling for display purposes. Since my feed is Atom rather than RSS, I had a bit of trouble, but this post was helpful:<a href="https://andrewstiefel.com/style-atom-xsl/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://andrewstiefel.com/style-atom-xsl/</a><a href="https://hachyderm.io/tags/RSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RSS</a> <a href="https://hachyderm.io/tags/Atom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Atom</a> <a href="https://hachyderm.io/tags/XML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XML</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/XSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSL</a> <a href="https://hachyderm.io/tags/XSLT" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSLT</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a>

Reilly Spitzfaden (they/them)I figured out how to get my RSS feed to be human-readable and nice-looking! I'd been wanting to do this to give people who aren't familiar with RSS an easier on-ramp to the stuff I care about. I figure if someone new to RSS clicks on the link and just gets raw XML, they might think something is “broken” and not stick around, but now there's something human-readable and with instructions on how to follow it in a reader.<a href="https://reillyspitzfaden.com/feed.xml" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://reillyspitzfaden.com/feed.xml</a><a href="https://hachyderm.io/tags/RSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RSS</a> <a href="https://hachyderm.io/tags/Atom" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Atom</a> <a href="https://hachyderm.io/tags/XML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XML</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://hachyderm.io/tags/XSL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSL</a> <a href="https://hachyderm.io/tags/XSLT" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#XSLT</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a>

Adrian RoselliNew post: “Mainlining Mains” <a href="https://adrianroselli.com/2025/04/mainlining-mains.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://adrianroselli.com/2025/04/mainlining-mains.html</a><a href="https://toot.cafe/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://toot.cafe/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://toot.cafe/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://toot.cafe/tags/ARIA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ARIA</a>

Feral Thoughts<a href="https://fosstodon.org/@pauby" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@pauby</a> <a href="https://pkm.social/@ellane" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@ellane</a> <a href="https://graz.social/@publicvoit" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@publicvoit</a> <a href="https://c.im/@jeffbronks" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@jeffbronks</a> My previous comment was half in jest, but...If someone wants to truly "own their full data" as <a href="https://union.place/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a>, and also keep the "rich markup" parts accessible long-term without porting to a <a href="https://union.place/tags/notes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#notes</a> app, they can consider adapting for themselves the approach discussed in this link.<a href="https://alexwlchan.net/2024/static-websites/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://alexwlchan.net/2024/static-websites/</a>I understand this is technical and not easy to adapt for note-taking.AFAIK, there isn't a ready-to-use <a href="https://union.place/tags/FOSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FOSS</a> solution around.<a href="https://union.place/tags/PKM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PKM</a> <a href="https://union.place/tags/PIM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PIM</a> <a href="https://union.place/tags/Obsidian" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Obsidian</a>

David O'BrienThis is a nice approach to <a href="https://mastodon.scot/tags/responsive" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#responsive</a> <a href="https://mastodon.scot/tags/tables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tables</a> in <a href="https://mastodon.scot/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> from the BBC<a href="https://www.bbc.co.uk/sport/football/scottish-championship/table" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.bbc.co.uk/sport/football/scottish-championship/table</a>At wider screen sizes, you see the whole thing. Narrower screen sizes have a 'freeze columns' Excel-type effect.I haven't tested it with ATs myself, I assume they have ;)<a href="https://mastodon.scot/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#A11y</a> <a href="https://mastodon.scot/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Accessibility</a>

Dylan </closingtags.com><a href="https://front-end.social/@joshwcomeau" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@joshwcomeau</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/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

RyeGimmie your old html zebras in tables please. <a href="https://ioc.exchange/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a> <a href="https://ioc.exchange/tags/handweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#handweb</a> <a href="https://ioc.exchange/tags/indieweb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#indieweb</a>

Dan Morgan :ksu:I'm sure there's hundreds of CSS files floating around that mimic classic Mac OS and HyperCard buttons, but I'm trying to redouble my efforts to teach myself frontend development—at least for giggles—and need to do it myself.I imagine there's better tools than me pasting screenshots into Figma to measure my attempts. (I actually have xScope installed but never played with it yet. Sorry IconFactory folks, I guess I need to purchase a license, huh?)At any rate, I'm very pleased with my css buttons (on the right). <a href="https://vmst.io/tags/hypercard" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hypercard</a> <a href="https://vmst.io/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#html</a>

Reilly Spitzfaden (they/them)RSVP | Front End Study Hall 025🗓️ <a href="https://events.indieweb.org/2025/04/front-end-study-hall-025-WKu1yLDGBbMm" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://events.indieweb.org/2025/04/front-end-study-hall-025-WKu1yLDGBbMm</a> 🔗 <a href="https://reillyspitzfaden.com/interactions/2025/04/rsvp-front-end-study-hall-025/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://reillyspitzfaden.com/interactions/2025/04/rsvp-front-end-study-hall-025/</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a> <a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Coding</a> <a href="https://hachyderm.io/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Programming</a> <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a>

Ronalds VilciņšIf you're a web designer or developer, this might be just what you need! I've created a website showcasing the most beautiful and inspiring web designs. Check it out here: <a href="https://thecolophon.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://thecolophon.com/</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/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#design</a> <a href="https://mastodon.social/tags/webdesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdesign</a> <a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</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/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/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/marketing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#marketing</a> <a href="https://mastodon.social/tags/development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#development</a> <a href="https://mastodon.social/tags/developers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#developers</a> <a href="https://mastodon.social/tags/hugo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hugo</a> <a href="https://mastodon.social/tags/ssg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ssg</a> <a href="https://mastodon.social/tags/static" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#static</a> <a href="https://mastodon.social/tags/images" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#images</a> <a href="https://mastodon.social/tags/gallery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#gallery</a> <a href="https://mastodon.social/tags/showcase" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#showcase</a> <a href="https://mastodon.social/tags/curated" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#curated</a> <a href="https://mastodon.social/tags/ai" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ai</a>

jfmblinux :jeditux:SVG and PNG tech iconsDownload, copy and paste tech icons in SVG and PNG format for your projects. <a href="https://mastodon.jfmblinux.fr/tags/Html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Html</a> <a href="https://mastodon.jfmblinux.fr/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.jfmblinux.fr/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.jfmblinux.fr/tags/PNG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#PNG</a> <a href="https://mastodon.jfmblinux.fr/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Mastodon</a> <a href="https://mastodon.jfmblinux.fr/tags/Fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Fediverse</a> <a href="https://mastodon.jfmblinux.fr/tags/Pixelfed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Pixelfed</a> <a href="https://mastodon.jfmblinux.fr/tags/Nextcloud" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Nextcloud</a> <a href="https://techicons.dev/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://techicons.dev/</a>

James ScholesRecent datepicker experience: 1. Control is presented as three separate spin controls, supporting the Up/Down Arrow keys to increment and decrement the value as well as manual typing. But because they're not text inputs, I can't use the Left/Right Arrow keys to review what each separate one contains, only to move between day, month, and year. 2. I tab to year. 3. I press Down Arrow, and the value is set to 2075. I'm unclear how many use cases require the year to be frequently set to 2075, but I can't imagine it's many so this seems like a fairly ridiculous starting point. 4. I press Up Arrow, and the value gets set to 0001. The number of applications for which 0001 is a valid year is likewise vanishingly small. 5. I delete the 0001, at which point my <a href="https://dragonscave.space/tags/screenReader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#screenReader</a> reports that the current value is "0". Also not a valid year. 6. Out of curiosity, I inspect the element to see which third-party component is being used to create this mess... only to find that it's a native `<input>` with `type="date"` and this is just how Google Chrome presents it.A good reminder that <a href="https://dragonscave.space/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> is not always the most <a href="https://dragonscave.space/tags/accessible" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessible</a> or user-friendly.<a href="https://dragonscave.space/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#accessibility</a> <a href="https://dragonscave.space/tags/usability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#usability</a>

Aral BalkanNew Kitten update• 🥳 Kitten HTML templates and kitten.Component render functions can now be async.<a href="https://kitten.small-web.org" target="_blank" rel="nofollow noopener noreferrer" translate="no">https://kitten.small-web.org</a>This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.The kitten.Component version also has a refresh button that streams a different three to the page.For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.Enjoy!:kitten:💕<a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="tag">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="tag">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/async" class="mention hashtag" rel="tag">#async</a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="tag">#components</a> <a href="https://mastodon.ar.al/tags/templates" class="mention hashtag" rel="tag">#templates</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="tag">#HTML</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="tag">#CSS</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="tag">#JavaScript</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="tag">#NodeJS</a> <a href="https://mastodon.ar.al/tags/generators" class="mention hashtag" rel="tag">#generators</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="tag">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="tag">#dev</a>

Recent searches

Search options

Administered by:

Server stats:

#html