mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.

Administered by:

Server stats:

809
active users

#progressiveenhancement

1 post1 participant0 posts today
Nathan Knowler<p>Targeting an `&lt;iframe&gt;` element is an interesting technique for progressive enhancement (e.g. showing search results in the iframe that updates when the user submits a filter form), however, the lack of feedback for screen readers when the frame navigates makes me think it should be avoided. <a href="https://sunny.garden/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://sunny.garden/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>accessibility</span></a> <a href="https://sunny.garden/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>a11y</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guidelines" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Guidelines</span></a><br>Baseline, more than a rule of thumb? · “Don’t use Google’s Baseline to decide which web features to use.” <a href="https://ilo.im/1636ud" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1636ud</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Baseline" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Baseline</span></a> <a href="https://mastodon.social/tags/Interoperability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Interoperability</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/API" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>API</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Guides</span></a><br>Simplify sharing · How to make content sharing effortless on your website <a href="https://ilo.im/16350b" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/16350b</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Sharing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Sharing</span></a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Content</span></a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Webpage</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Releases" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Releases</span></a><br>CSS customization for the ‘select’ element · Chrome 135 brings the new property ‘appearance: base-select’ <a href="https://ilo.im/162yuz" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/162yuz</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Styling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Styling</span></a> <a href="https://mastodon.social/tags/Form" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Form</span></a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Chrome</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>The bare minimum for CSS view transitions · An instant win for your website’s user experience <a href="https://ilo.im/162voy" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/162voy</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/CssViewTransitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CssViewTransitions</span></a> <a href="https://mastodon.social/tags/Transitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Transitions</span></a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Webpage</span></a> <a href="https://mastodon.social/tags/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Website</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Introductions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Introductions</span></a><br>The customizable select (part 1) · Easier styling of an HTML ‘select’ with CSS <a href="https://ilo.im/162sdu" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/162sdu</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/SelectElement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SelectElement</span></a> <a href="https://mastodon.social/tags/Form" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Form</span></a> <a href="https://mastodon.social/tags/Animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Animation</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Chrome</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Philipp Lunch<p>Trying to do a css only proximity hover effect with variable fonts. </p><p>I was nearly there and only than understood, that without javascript my variable font is not loading. </p><p>aww damn. 😄 </p><p><a href="https://social.anoxinon.de/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://social.anoxinon.de/tags/variablefont" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>variablefont</span></a> <a href="https://social.anoxinon.de/tags/progressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>progressiveEnhancement</span></a> <a href="https://social.anoxinon.de/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Approaches" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Approaches</span></a><br>Building websites with LLMS · (L)ots of (L)ittle ht(M)l page(S) is a game changer <a href="https://ilo.im/162myf" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/162myf</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ViewTransitions</span></a> <a href="https://mastodon.social/tags/Navigation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Navigation</span></a> <a href="https://mastodon.social/tags/Filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Filter</span></a> <a href="https://mastodon.social/tags/Webpage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Webpage</span></a> <a href="https://mastodon.social/tags/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Website</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Nils Hörrmann<p>Does anyone know a site collecting web components that focus on progressive enhancement and don't recreate everything known to the browser already with just another custom element? I'm interested in approaches to form handling as well as UI interactions like sorting items, drag and drop. Thanks!</p><p><a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/CustomElements" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CustomElements</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/KeepItSimple" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>KeepItSimple</span></a></p>
James Nash<p>Pleased to be sneaking some <a href="https://mstdn.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> into the <a href="https://mstdn.social/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DesignSystem</span></a> we're building at Investec.</p><p>Currently making an Accordion component using <a href="https://mstdn.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> &lt;details&gt; &amp; &lt; summary&gt;, which requires zero client-side <a href="https://mstdn.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a>. Until <a href="https://mstdn.social/tags/interop2025" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>interop2025</span></a> brings ::details-content support to Firefox &amp; Safari, the opening / closing won't be animated in those browsers. But, we're cool with that. It's still perfectly usable without animations.</p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>Font weight based on user’s screen DPI · Improving the display of a font on low-DPI screens <a href="https://ilo.im/16263z" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/16263z</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Icon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Icon</span></a> <a href="https://mastodon.social/tags/Font" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Font</span></a> <a href="https://mastodon.social/tags/Typography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Typography</span></a> <a href="https://mastodon.social/tags/Screen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Screen</span></a> <a href="https://mastodon.social/tags/DPI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>DPI</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Design</span></a> <a href="https://mastodon.social/tags/Explorations" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Explorations</span></a><br>Extending the cursor · “The future of cursors holds some exciting possibilities.” <a href="https://ilo.im/1625y7" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/1625y7</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Cursor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Cursor</span></a> <a href="https://mastodon.social/tags/Figma" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Figma</span></a> <a href="https://mastodon.social/tags/Collaboration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Collaboration</span></a> <a href="https://mastodon.social/tags/Tools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tools</span></a> <a href="https://mastodon.social/tags/Games" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Games</span></a> <a href="https://mastodon.social/tags/ProductDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProductDesign</span></a> <a href="https://mastodon.social/tags/UxDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UxDesign</span></a> <a href="https://mastodon.social/tags/UiDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UiDesign</span></a> <a href="https://mastodon.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
bignose<p><span class="h-card" translate="no"><a href="https://fosstodon.org/@florimond" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>florimond</span></a></span> <br>&gt; Am I crazy for pushing back on "<a href="https://fosstodon.org/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a> <a href="https://fosstodon.org/tags/SPA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SPA</span></a> frontend by default"?</p><p>If it's "by default, before even describing the purpose of the site"? You're right to push back against mandatory <a href="https://fosstodon.org/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> and <a href="https://fosstodon.org/tags/SPA" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SPA</span></a>, etc.</p><p>One relatively bright line I find useful: Are we building a site for *presenting information* or for people to *actively do something*?</p><p>The latter *can* be a web application. Information sites *must* be HTML + CSS, with some <a href="https://fosstodon.org/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> JavaScript.</p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Guides</span></a><br>Transitioning top-layer entries · Handy ways to animate the CSS ‘display’ property <a href="https://ilo.im/162317" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/162317</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Animation</span></a> <a href="https://mastodon.social/tags/Transition" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Transition</span></a> <a href="https://mastodon.social/tags/Layers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Layers</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
bignose<p>Harry Roberts (<span class="h-card" translate="no"><a href="https://webperf.social/@csswizardry" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>csswizardry</span></a></span>):</p><p>“Every layer of abstraction made in the browser moves you further from the platform, ties you further into framework lock-in, and moves you further away from fast.</p><p>“I’m not against front-end frameworks, and, believe me, I’m not naive enough to believe that the only thing a front-end framework provides is soft navigations, but if you’re going to use one, I shouldn’t be able to smell it.”</p><p><a href="https://csswizardry.com/2025/01/build-for-the-web-build-on-the-web-build-with-the-web/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">csswizardry.com/2025/01/build-</span><span class="invisible">for-the-web-build-on-the-web-build-with-the-web/</span></a></p><p><a href="https://fosstodon.org/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDevelopment</span></a> <a href="https://fosstodon.org/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://fosstodon.org/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
Otto Rask | Ehdokas 2025 Espoo<p>I can't think of a single reason why a textbox and a list of links with descriptions and basic pagination would require JavaScript.</p><p><a href="https://techcrunch.com/2025/01/17/google-begins-requiring-javascript-for-google-search/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">techcrunch.com/2025/01/17/goog</span><span class="invisible">le-begins-requiring-javascript-for-google-search/</span></a></p><p><a href="https://piipitin.fi/tags/Google" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Google</span></a> <a href="https://piipitin.fi/tags/GoogleSearch" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GoogleSearch</span></a> <a href="https://piipitin.fi/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://piipitin.fi/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDevelopment</span></a> <a href="https://piipitin.fi/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Techniques" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Techniques</span></a><br>6 CSS snippets to know in 2025 · “AI is not going to give you this CSS.” <a href="https://ilo.im/161x4n" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/161x4n</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ModernCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ModernCSS</span></a> <a href="https://mastodon.social/tags/Layers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Layers</span></a> <a href="https://mastodon.social/tags/Animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Animation</span></a> <a href="https://mastodon.social/tags/ViewTransitions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ViewTransitions</span></a> <a href="https://mastodon.social/tags/CustomProperties" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CustomProperties</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Releases" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Releases</span></a><br>CSS scroll-state() · Chrome 133 introduces scroll state container queries <a href="https://ilo.im/161umo" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/161umo</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/ContainerQueries" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ContainerQueries</span></a> <a href="https://mastodon.social/tags/Scrolling" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Scrolling</span></a> <a href="https://mastodon.social/tags/ScrollDrivenAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ScrollDrivenAnimation</span></a> <a href="https://mastodon.social/tags/Animation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Animation</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Chrome</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a></p>
FluConf<p>We're still accepting submissions for the <a href="https://social.cryptography.dog/tags/fluConf2025" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fluConf2025</span></a> track on <a href="https://social.cryptography.dog/tags/inclusivity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>inclusivity</span></a> and <a href="https://social.cryptography.dog/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>accessibility</span></a> in tech. Broad interpretations of the topics are welcome, ranging from the technical implementation details of how to build for and with assistive technologies, to the many cultural factors that act as barriers to adoption of free/open software and participation in the wider ecosystem.</p><p>Share your insights on designing hiring processes, identifying biases in data and barriers to access, the lost art of progressive enhancement, and whatever else the themes mean to you.</p><p>Apply up until midnight of January 19th, 2025 (anywhere on Earth)</p><p><a href="https://fluconf.online/apply/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">fluconf.online/apply/</span><span class="invisible"></span></a></p><p><a href="https://social.cryptography.dog/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>a11y</span></a> <a href="https://social.cryptography.dog/tags/assistiveTechnology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>assistiveTechnology</span></a> <a href="https://social.cryptography.dog/tags/progressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>progressiveEnhancement</span></a> <a href="https://social.cryptography.dog/tags/audioDescription" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>audioDescription</span></a> <a href="https://social.cryptography.dog/tags/FOSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FOSS</span></a> <a href="https://social.cryptography.dog/tags/openSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>openSource</span></a> <a href="https://social.cryptography.dog/tags/BeingDisabledInPublic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BeingDisabledInPublic</span></a> <a href="https://social.cryptography.dog/tags/ableism" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ableism</span></a> <a href="https://social.cryptography.dog/tags/disability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>disability</span></a> <a href="https://social.cryptography.dog/tags/altText" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>altText</span></a> <a href="https://social.cryptography.dog/tags/queer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>queer</span></a> <a href="https://social.cryptography.dog/tags/lgbtq" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>lgbtq</span></a> <a href="https://social.cryptography.dog/tags/neurodiversity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>neurodiversity</span></a> <a href="https://social.cryptography.dog/tags/actuallyAutistic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>actuallyAutistic</span></a> <a href="https://social.cryptography.dog/tags/ADHD" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ADHD</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Evolutions" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Evolutions</span></a><br>Progressive enhancement brings everyone in · “An idea that has lasted for two decades, and will continue.” <a href="https://ilo.im/161pxm" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/161pxm</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/History" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>History</span></a> <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://mastodon.social/tags/GracefulDegradation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GracefulDegradation</span></a> <a href="https://mastodon.social/tags/BrowserSupport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BrowserSupport</span></a> <a href="https://mastodon.social/tags/Browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browser</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>