veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.

Administered by:

Server stats:

297
active users

#progressiveenhancement

0 posts0 participants0 posts today
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<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>
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>
Elly Loel<p>Miriam Suzanne – Hints and Suggestions: The Design of Web Design – beyond tellerrand Berlin 2024</p><p>🔖 <a href="https://youtu.be/s2rqYu6jqWY" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">youtu.be/s2rqYu6jqWY</span><span class="invisible"></span></a><br>🔗 <a href="https://www.ellyloel.com/bookmarks/miriam-suzanne-hints-and-suggestions-the-design-of-web-design-beyond-tellerrand-berlin-2024/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">ellyloel.com/bookmarks/miriam-</span><span class="invisible">suzanne-hints-and-suggestions-the-design-of-web-design-beyond-tellerrand-berlin-2024/</span></a></p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/Browsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browsers</span></a> <a href="https://front-end.social/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>A11y</span></a> <a href="https://front-end.social/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Design</span></a> <a href="https://front-end.social/tags/Web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Web</span></a> <a href="https://front-end.social/tags/WebDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDesign</span></a> <a href="https://front-end.social/tags/WebStandards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebStandards</span></a> <a href="https://front-end.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
Elly Loel<p>If Not React, Then What? - Infrequently Noted</p><p>🔖 <a href="https://infrequently.org/2024/11/if-not-react-then-what/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">infrequently.org/2024/11/if-no</span><span class="invisible">t-react-then-what/</span></a><br>🔗 <a href="https://www.ellyloel.com/bookmarks/if-not-react-then-what-infrequently-noted/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">ellyloel.com/bookmarks/if-not-</span><span class="invisible">react-then-what-infrequently-noted/</span></a></p><p><a href="https://front-end.social/tags/BuildingWebsites" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BuildingWebsites</span></a> <a href="https://front-end.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://front-end.social/tags/Performance" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Performance</span></a> <a href="https://front-end.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
Elly Loel<p>A Framework for Evaluating Browser Support • Josh W. Comeau</p><p>🔖 <a href="https://www.joshwcomeau.com/css/browser-support/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">joshwcomeau.com/css/browser-su</span><span class="invisible">pport/</span></a><br>🔗 <a href="https://www.ellyloel.com/bookmarks/a-framework-for-evaluating-browser-support-josh-w-comeau/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">ellyloel.com/bookmarks/a-frame</span><span class="invisible">work-for-evaluating-browser-support-josh-w-comeau/</span></a></p><p><a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://front-end.social/tags/Browsers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Browsers</span></a> <a href="https://front-end.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
bignose<p>Thank you for stopping to think about this, <span class="h-card" translate="no"><a href="https://mastodon.social/@AppleJuiceNerd" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>AppleJuiceNerd</span></a></span>.</p><p>The approach that I'd recommend is termed <a href="https://fosstodon.org/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a>.</p><p>Your site should work entirely without <a href="https://fosstodon.org/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a>, load all the information and render just with HTML and CSS.</p><p>Then, if you have enhancements which *require* scripting, add those. If there are relatively-new features you want to use, make sure nothing crucial depends on that new version.</p><p>This can be more work, you may have to duplicate a feature or two; be sparing.</p>
Timo Tijhof<p>Microsoft Mgmt Deteriorates GitHub UX - Goodbye Perf and Progressive Enhancement?</p><p>Mu-An Chiou writes <span class="h-card" translate="no"><a href="https://mastodon.social/@muan" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>muan</span></a></span>:</p><p>"React got pushed down from Microsoft management and most of us on the [GitHub] front-end team quit."</p><p><a href="https://muan.co/posts/javascript" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">muan.co/posts/javascript</span><span class="invisible"></span></a></p><p><a href="https://fosstodon.org/tags/webperf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webperf</span></a> <a href="https://fosstodon.org/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://fosstodon.org/tags/github" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>github</span></a> <a href="https://fosstodon.org/tags/Microsoft" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Microsoft</span></a></p>
Pelle Wessman<p><span class="h-card" translate="no"><a href="https://mastodon.online/@octothorpe" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>octothorpe</span></a></span> <span class="h-card" translate="no"><a href="https://front-end.social/@jensimmons" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>jensimmons</span></a></span> If browsers then provided a way in their dev tools to degrade their browsers to the <a href="https://mastodon.social/tags/MinimalViableWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>MinimalViableWeb</span></a> subset, then we could once again have an easy way to test <a href="https://mastodon.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> and <a href="https://mastodon.social/tags/GracefulDegradation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GracefulDegradation</span></a>, just like we had back when one could expect <a href="https://mastodon.social/tags/InternetExplorer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>InternetExplorer</span></a> to represent that smallest common denominator among browser implementations</p>
Bramus<p>A common piece of feedback I receive on this one is “it’s Chrome-only, so I won’t use it”.</p><p>Here’s the kicker: that doesn’t really matter here, as it’s a nice <a href="https://front-end.social/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a>: Browsers without support get the status quo. Browsers with support get the nice transition.</p><p>At worst you make the experience better in browsers with support.</p><p><a href="https://developer.chrome.com/docs/css-ui/animate-to-height-auto/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.chrome.com/docs/css-</span><span class="invisible">ui/animate-to-height-auto/</span></a></p><p><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://front-end.social/tags/EmbraceThePlatform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>EmbraceThePlatform</span></a></p>
Simon Dassow<p>While closing tabs one stood out that I'd like to share, because it symbolizes much more than it's own usefulness in the web context: a carousel/slideshow that works with pure CSS, only slightly improved with JS, like the web we've been promised back in the day: <a href="https://markus.oberlehner.net/blog/super-simple-progressively-enhanced-carousel-with-css-scroll-snap/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">markus.oberlehner.net/blog/sup</span><span class="invisible">er-simple-progressively-enhanced-carousel-with-css-scroll-snap/</span></a></p><p><a href="https://masto.ai/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://masto.ai/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://masto.ai/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://masto.ai/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
Timo Tijhof<p>Oh my,<br>a web component?<br>on jquery dot com?</p><p>minibar is a 2kB standalone search widget. Accessible and progressively-enhancing (works without JavaScript!). An alternative to the popular 100kB DocSearch.js widget.</p><p>It goes well with Typesense, an awesome FLOSS open-source alternative to Algolia. And it's (if you want, and yes we do) self-hostable!</p><p><a href="https://github.com/jquery/typesense-minibar" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/jquery/typesense-mi</span><span class="invisible">nibar</span></a></p><p>Demo: <a href="https://jquery.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">jquery.com/</span><span class="invisible"></span></a><br>or <a href="https://qunitjs.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">qunitjs.com/</span><span class="invisible"></span></a></p><p><a href="https://fosstodon.org/tags/webperf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webperf</span></a> <a href="https://fosstodon.org/tags/typesense" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>typesense</span></a> <a href="https://fosstodon.org/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a> <a href="https://fosstodon.org/tags/algolia" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>algolia</span></a> <a href="https://fosstodon.org/tags/jquery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>jquery</span></a> <a href="https://fosstodon.org/tags/qunit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>qunit</span></a></p>
Nathan Knowler<p>Write your custom element’s JS in such a way that when the declarative form of custom elements show up you get to delete all or most of your code (or keep it around as a polyfill). How do you do that? Pay close attention to how HTML elements work and keep the weird shit to a minimum. The weird shit is your tech debt that the web platform isn’t going to forgive you for.</p><p>Until then your custom element is a progressive enhancement for something else. And remember that’s not about providing the same experience, but an equitable one. When you start with a base experience that’s proven to work, sometimes you realize you don’t need an enhanced one. Win-win.</p><p><a href="https://sunny.garden/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> <a href="https://sunny.garden/tags/ProgressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgressiveEnhancement</span></a></p>
🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<p><span class="h-card" translate="no"><a href="https://mas.to/@schizanon" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>schizanon@mas.to</span></a></span> sort of a philosophical question:</p><p>If I'm rendering posts on the client-side, should I remove server-side rendering in order to speed up the initial page load? Currently it sometimes timesout. </p><p>This would make the app essentially useless with <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> disabled, which is kind of why I've put this off this long. I'm kind of proud of my No-JS <a href="https://mastodon.social/tags/Mastodon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Mastodon</span></a> client.</p><p><span class="h-card" translate="no"><a href="https://indieweb.social/@kristoferjoseph" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>kristoferjoseph</span></a></span> <span class="h-card" translate="no"><a href="https://indieweb.social/@tbeseda" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>tbeseda</span></a></span> <span class="h-card" translate="no"><a href="https://sunny.garden/@knowler" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>knowler</span></a></span> <span class="h-card" translate="no"><a href="https://mastodon.online/@colepeters" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>colepeters</span></a></span> <span class="h-card" translate="no"><a href="https://mastodon.online/@macdonst" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>macdonst</span></a></span> <span class="h-card" translate="no"><a href="https://indieweb.social/@brianleroux" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>brianleroux</span></a></span> <span class="h-card" translate="no"><a href="https://fosstodon.org/@enhance_dev" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>enhance_dev</span></a></span> </p><p><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></p>
Aral Balkan<p>New blog post: Streaming HTML</p><p><a href="https://ar.al/2024/03/08/streaming-html/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">ar.al/2024/03/08/streaming-htm</span><span class="invisible">l/</span></a></p><p>Let me show you how easy it is to create a simple counter web app using the new Streaming HTML workflow in Kitten before peeling away the magic layer by layer so you learn how to make the same app using:</p><p>• HTMX &amp; WebSockets<br>• Plain old JavaScript, and, finally, <br>• Without Kitten in pure Node.js.</p><p>Enjoy + let me know what you think.</p><p>:kitten: 💕 </p><p><a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/StreamingHTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StreamingHTML</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/HTMX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTMX</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/progressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>progressiveEnhancement</span></a></p>
Helmut Hummel 🐝<p><span class="h-card" translate="no"><a href="https://mastodon.social/@Tommy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>Tommy</span></a></span> <span class="h-card" translate="no"><a href="https://front-end.social/@matuzo" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>matuzo</span></a></span> </p><p>I had quite the opposite impression when I learned about this a few months ago.</p><p>It is a great API for <a href="https://chaos.social/tags/progressiveEnhancement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>progressiveEnhancement</span></a> of a form with JS. It makes it possible to emulate user initiated submit of a button, while still letting other <a href="https://chaos.social/tags/javaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javaScript</span></a> code intercept the submit event. </p><p>Perfect companion for <a href="https://chaos.social/tags/hotwire" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hotwire</span></a> <a href="https://chaos.social/tags/turbo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>turbo</span></a></p>