Shubham Tiwari<p>🚀 Mastering API Handling in React & Vanilla JS – One Step at a Time!</p><p>This week, I deep-dived into handling APIs in React and Vanilla JavaScript – not just fetching data, but doing it efficiently and securely which includes: Fetch, CRUD, Query Params, Auth, and AbortController Explained</p><p><a href="https://mastodon.social/tags/ReactJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ReactJS</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/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDevelopment</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/APIs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>APIs</span></a> <a href="https://mastodon.social/tags/AbortController" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AbortController</span></a> <a href="https://mastodon.social/tags/Authentication" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Authentication</span></a> <a href="https://mastodon.social/tags/Authorization" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Authorization</span></a> <a href="https://mastodon.social/tags/AsyncAwait" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AsyncAwait</span></a> <a href="https://mastodon.social/tags/LinkedInLearning" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LinkedInLearning</span></a> <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>100DaysOfCode</span></a></p><p><a href="https://dev.to/shubhamtiwari909/handling-apis-in-frontend-a-complete-guide-fmo" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dev.to/shubhamtiwari909/handli</span><span class="invisible">ng-apis-in-frontend-a-complete-guide-fmo</span></a></p>
Recent searches
No recent searches
Search options
Only available when logged in.
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.
Administered by:
Server stats:
252active users
shakedown.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.3.7
#frontend
9 posts · 9 participants · 0 posts today
Kaye Menner Photography<p><a href="https://mastodon.social/tags/ROKnROL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ROKnROL</span></a> by Kaye Menner <a href="https://mastodon.social/tags/Photography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Photography</span></a> Wide variety <a href="https://mastodon.social/tags/Prints" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Prints</span></a> & lovely <a href="https://mastodon.social/tags/Products" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Products</span></a> at:</p><p><a href="https://kaye-menner.pixels.com/featured/roknrol-kaye-menner.html" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">kaye-menner.pixels.com/feature</span><span class="invisible">d/roknrol-kaye-menner.html</span></a></p><p><a href="https://mastodon.social/tags/car" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>car</span></a> <a href="https://mastodon.social/tags/oldcar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>oldcar</span></a> <a href="https://mastodon.social/tags/painted" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>painted</span></a> <a href="https://mastodon.social/tags/yellow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>yellow</span></a> <a href="https://mastodon.social/tags/purple" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>purple</span></a> <a href="https://mastodon.social/tags/headlights" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>headlights</span></a> <a href="https://mastodon.social/tags/grill" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grill</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/bright" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>bright</span></a> <a href="https://mastodon.social/tags/colorful" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>colorful</span></a> <a href="https://mastodon.social/tags/homedecor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>homedecor</span></a> <a href="https://mastodon.social/tags/mastoart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>mastoart</span></a> <a href="https://mastodon.social/tags/fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fediverse</span></a> <a href="https://mastodon.social/tags/fediart" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fediart</span></a> <a href="https://mastodon.social/tags/fedigiftshop" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fedigiftshop</span></a> <a href="https://mastodon.social/tags/giftideas" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>giftideas</span></a> <a href="https://mastodon.social/tags/wallartforsale" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>wallartforsale</span></a> <a href="https://mastodon.social/tags/Art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Art</span></a> <a href="https://mastodon.social/tags/artforsale" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>artforsale</span></a> <a href="https://mastodon.social/tags/BuyIntoArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BuyIntoArt</span></a> <a href="https://mastodon.social/tags/AYearForArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AYearForArt</span></a> <a href="https://mastodon.social/tags/Artist" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Artist</span></a> <a href="https://mastodon.social/tags/FineArtAmerica" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FineArtAmerica</span></a> <a href="https://mastodon.social/tags/PhotographyFeed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PhotographyFeed</span></a> <a href="https://mastodon.social/tags/VisualArts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VisualArts</span></a> <a href="https://mastodon.social/tags/CreativeArts" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CreativeArts</span></a></p>
xoron :verified:<p>File encryption with a browser.</p><p>I've been exploring the <a href="https://infosec.exchange/tags/WebCryptoAPI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebCryptoAPI</span></a> and I'm impressed!</p><p>When combined with the <a href="https://infosec.exchange/tags/FileSystemAPI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FileSystemAPI</span></a>, it offers a seemingly secure way to <a href="https://infosec.exchange/tags/encrypt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>encrypt</span></a> and <a href="https://infosec.exchange/tags/store" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>store</span></a> files directly on your device. Think <a href="https://infosec.exchange/tags/localstorage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>localstorage</span></a>, but with <a href="https://infosec.exchange/tags/encryption" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>encryption</span></a>!</p><p>I know <a href="https://infosec.exchange/tags/webapps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webapps</span></a> can have <a href="https://infosec.exchange/tags/security" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>security</span></a> vulnerabilities since the code is served over the web, so I've <a href="https://infosec.exchange/tags/OpenSourced" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenSourced</span></a> my demo! You can check it out, and it should even work if <a href="https://infosec.exchange/tags/selfhosted" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>selfhosted</span></a> on <a href="https://infosec.exchange/tags/GitHubPages" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GitHubPages</span></a>.</p><p>Live Demo: <a href="https://dim.positive-intentions.com/?path=/story/usefs--encrypted-demo" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">dim.positive-intentions.com/?p</span><span class="invisible">ath=/story/usefs--encrypted-demo</span></a></p><p>Demo Code: <a href="https://github.com/positive-intentions/dim/blob/staging/src/stories/05-Hooks-useFS.stories.js" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/dim/blob/staging/src/stories/05-Hooks-useFS.stories.js</span></a></p><p>Hook Code: <a href="https://github.com/positive-intentions/dim/blob/staging/src/hooks/useFS.js" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/dim/blob/staging/src/hooks/useFS.js</span></a></p><p>IMPORTANT NOTES (PLEASE READ!):<br> * This is NOT a product. It's for <a href="https://infosec.exchange/tags/testing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>testing</span></a> and <a href="https://infosec.exchange/tags/demonstration" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>demonstration</span></a> purposes only.<br> * It has NOT been reviewed or audited. Do NOT use for sensitive data.<br> * The "password encryption" currently uses a hardcoded password. This is for demonstration, not security.<br> * This is NOT meant to replace robust solutions like <a href="https://infosec.exchange/tags/VeraCrypt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VeraCrypt</span></a>. It's just a <a href="https://infosec.exchange/tags/proofofconcept" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>proofofconcept</span></a> to show what's possible with <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>browser</span></a> <a href="https://infosec.exchange/tags/APIs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>APIs</span></a>.</p><p><a href="https://infosec.exchange/tags/Encryption" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Encryption</span></a> <a href="https://infosec.exchange/tags/Cryptography" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Cryptography</span></a> <a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://infosec.exchange/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://infosec.exchange/tags/Privacy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Privacy</span></a> <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Security</span></a> <a href="https://infosec.exchange/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDevelopment</span></a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Coding</span></a> <a href="https://infosec.exchange/tags/Developer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Developer</span></a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tech</span></a> <a href="https://infosec.exchange/tags/FOSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FOSS</span></a> <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenSource</span></a> <a href="https://infosec.exchange/tags/GitHub" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GitHub</span></a> <a href="https://infosec.exchange/tags/MastodonDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>MastodonDev</span></a> <a href="https://infosec.exchange/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programming</span></a> <a href="https://infosec.exchange/tags/WebStandards" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebStandards</span></a> <a href="https://infosec.exchange/tags/FileSystem" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FileSystem</span></a> <a href="https://infosec.exchange/tags/WebAPI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebAPI</span></a> <a href="https://infosec.exchange/tags/ProofOfConcept" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProofOfConcept</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/Debates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Debates</span></a><br>Who really owns accessibility? · Accessibility is a team effort of designers and developers <a href="https://ilo.im/164q3l" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/164q3l</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/Responsibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Responsibility</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/Workflows" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Workflows</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/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/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</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></p>
aaron ~# :blinkingcursor:<p>Today i've nearly finished the transition to <a href="https://infosec.exchange/tags/Vue" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Vue</span></a>.</p><p>Next steps are adding more <a href="https://infosec.exchange/tags/API" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>API</span></a> <a href="https://infosec.exchange/tags/endpoints" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>endpoints</span></a>, implementing the pages in the <a href="https://infosec.exchange/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> and finally <a href="https://infosec.exchange/tags/dockerizing" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dockerizing</span></a> and publishing it 🔥 </p><p><a href="https://infosec.exchange/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://infosec.exchange/tags/developement" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>developement</span></a> <a href="https://infosec.exchange/tags/docker" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>docker</span></a> <a href="https://infosec.exchange/tags/linux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>linux</span></a> <a href="https://infosec.exchange/tags/sysadmin" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>sysadmin</span></a> <a href="https://infosec.exchange/tags/selfhosting" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>selfhosting</span></a> <a href="https://infosec.exchange/tags/homelab" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>homelab</span></a> <a href="https://infosec.exchange/tags/homeserver" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>homeserver</span></a> <a href="https://infosec.exchange/tags/server" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>server</span></a></p>
Mark Wyner Won’t Comply :vm:<p>Here’s a question for front-end developers about accessibility.</p><p>If you hide an element with “aria-hidden,” the element and all of its children are hidden from screen readers. If one of those child elements is an image, the alt text is moot because a screen reader will ignore it.</p><p>Example:</p><p><button aria-hidden="true"><br><img src="/img/icon.svg"><br></button></p><p>Do you:</p><p><a href="https://mas.to/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Accessibility</span></a> <a href="https://mas.to/tags/A11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>A11y</span></a> <a href="https://mas.to/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://mas.to/tags/Design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Design</span></a> <a href="https://mas.to/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FrontEnd</span></a> <a href="https://mas.to/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mas.to/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</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/Comics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Comics</span></a><br>Sheriff vs. Sans-Sheriff · When web typography goes wild west <a href="https://ilo.im/164hwm" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/164hwm</span><span class="invisible"></span></a></p><p>_____<br><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/Typeface" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Typeface</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/Website" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Website</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/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</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>
Kagan MacTane (he/him)<p>UX designers (which includes nearly anyone developing front-end code, whether it's in your job title or not), remember that real people will have to use your interface. It will affect them. It can have a serious impact on their quality of daily life.</p><p>Don't drive your users to this: <a href="https://mastodon.online/@nikitonsky/114672417919925192" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.online/@nikitonsky/11</span><span class="invisible">4672417919925192</span></a></p><p><a href="https://wandering.shop/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://wandering.shop/tags/UX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UX</span></a> <a href="https://wandering.shop/tags/UIUX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UIUX</span></a> <a href="https://wandering.shop/tags/UXDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UXDesign</span></a> <a href="https://wandering.shop/tags/BadUX" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BadUX</span></a> <a href="https://wandering.shop/tags/BadUXDesign" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>BadUXDesign</span></a> <a href="https://wandering.shop/tags/FrontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FrontEnd</span></a> <a href="https://wandering.shop/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> <a href="https://wandering.shop/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDevelopment</span></a></p>
W33DEV | Alex<p>👋 Hey, ich bin Alex von <a href="https://w33dev.net" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">w33dev.net</span><span class="invisible"></span></a> – ich baue kostenlose Dev-Tools mit Fokus auf Design, Effizienz & Spaß.</p><p>Checkt mein Archive aus: <a href="https://archive.w33dev.net" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">archive.w33dev.net</span><span class="invisible"></span></a></p><p>Alle Tools sind frei nutzbar – mehr folgen!</p><p><a href="https://mastodon.social/tags/buildinpublic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>buildinpublic</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/webtools" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webtools</span></a> <a href="https://mastodon.social/tags/indiedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>indiedev</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/fediverse" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>fediverse</span></a></p>
Chee Aun 🤔<p>👏💪👍 <a href="https://github.com/mastodon/mastodon/pull/34907" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/mastodon/mastodon/p</span><span class="invisible">ull/34907</span></a></p><p><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/StoryBookJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>StoryBookJS</span></a></p>
Steve Frenzel<p>Today I saw someone coming up with their own <a href="https://mastodon.online/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> tags. At first I thought they were <a href="https://mastodon.online/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> but the naming was off:</p><p><holiday>, <employee>, <month> and many more</p><p>Looked at it in the <a href="https://mastodon.online/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>accessibility</span></a> tree, they're all generic elements.</p><p>What really amazes me is the browser still rendering the content inside and simply not giving a fuck if it's fantasy HTML 🤯</p><p>(I would be shocked if someone shows me a link to the specs for these elements in the comments 😂)</p><p><a href="https://mastodon.online/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.online/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.online/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Joe Crawford<p>Time flies! Front End Study Hall number 029 is Tuesday. I and a motley assortment of www folk from experienced to novice invite YOU to come inspect code; ask "why"; and make web pages more awesome with HTML, CSS, etc.! Check it. <a href="https://events.indieweb.org/2025/06/front-end-study-hall-029-TcOqvxf7kMgv" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">events.indieweb.org/2025/06/fr</span><span class="invisible">ont-end-study-hall-029-TcOqvxf7kMgv</span></a> <a href="https://xoxo.zone/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>IndieWeb</span></a> <a href="https://xoxo.zone/tags/frontEnd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontEnd</span></a> <a href="https://xoxo.zone/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a></p>
GNOME<p>🖼️ "A study in reactive UI toolkits"<br>with Jan Fooken at <a href="https://floss.social/tags/GUADEC2025" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GUADEC2025</span></a><br>📅 24 July 🕒 09:40 CEST 📍 Brescia<br>🧪 Can GTK feel like React or SwiftUI? Let’s explore modern takes on building Linux UIs.</p><p>🔗 <a href="https://events.gnome.org/event/259/contributions/1227/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">events.gnome.org/event/259/con</span><span class="invisible">tributions/1227/</span></a></p><p><a href="https://floss.social/tags/GTK" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GTK</span></a> <a href="https://floss.social/tags/Linux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Linux</span></a> <a href="https://floss.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://floss.social/tags/ReactiveUI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ReactiveUI</span></a></p>
Ana Tudor 🐯<p>🔟 521 ❤️ Pure <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/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> toggle with a single `input[type=checkbox]` and its `label` - check it out on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/ajpqYW" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/ajp</span><span class="invisible">qYW</span></a></p><p><a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Anselm Hannemann<p>💻 I’ll be open to work with your team starting July and can help with making the team more effective, building more robust code or make it accessible to comply with the “new” EU law.</p><p>In the past year I helped a couple of companies transforming their teams and making their web apps accessible and they effect was huge!</p><p>Send me a PM if you’re interested or have questions.</p><p><a href="https://mastodon.social/tags/openforwork" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>openforwork</span></a> <a href="https://mastodon.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>accessibility</span></a> <a href="https://mastodon.social/tags/agile" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>agile</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>9️⃣ 593 ❤️ Cycling gradient glow with no text duplication - see it on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/rNPOpJK" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/rNP</span><span class="invisible">OpJK</span></a></p><p>A super simple, but cool <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> trick.</p><p>We create the gradient text.</p><p>The filter creates a blurred copy of it and places it underneath.</p><p>We then animate the <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/gradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gradient</span></a> stops... magic! 🪄✨ </p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/glow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>glow</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/filterEffect" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filterEffect</span></a> <a href="https://mastodon.social/tags/gradientGlow" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gradientGlow</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>8️⃣ 736 ♥️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> 1 div card patterns (no SVG, no images other than CSS gradients) - see it on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/NWxBzRv" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/NWx</span><span class="invisible">BzRv</span></a></p><p>A bunch of variations on the pure CSS <a href="https://mastodon.social/tags/halftone" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>halftone</span></a> technique detailed in this article <a href="https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/pure-</span><span class="invisible">css-halftone-effect-in-3-declarations/</span></a></p><p><a href="https://mastodon.social/tags/cssPattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssPattern</span></a> <a href="https://mastodon.social/tags/cssPatterns" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssPatterns</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/halftonePattern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>halftonePattern</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/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>7️⃣ 749 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> Möbius 6hedrons <a href="https://codepen.io/thebabydino/pen/mJojKd" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/mJo</span><span class="invisible">jKd</span></a></p><p>The how behind I live coded it in 30 minutes <a href="https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/how-i-live-code</span><span class="invisible">d-my-most-hearted-codepen-demo/</span></a></p><p>Could be improved with CSS variables nowadays, see <a href="https://css-tricks.com/simplifying-css-cubes-custom-properties/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/simplifying-css</span><span class="invisible">-cubes-custom-properties/</span></a> as well as by using CSS trigonometric functions.</p><p><a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/Maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Maths</span></a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssTransforms</span></a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>trigonometry</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</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/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>6️⃣ 816 ❤️ no sprite, no JS twitter 🤍 animation <a href="https://codepen.io/thebabydino/pen/RRRRZE" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/RRR</span><span class="invisible">RZE</span></a></p><p>Behind the demo <a href="https://css-tricks.com/recreating-the-twitter-heart-animation/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/recreating-the-</span><span class="invisible">twitter-heart-animation/</span></a></p><p>Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!</p><p><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/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</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/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>A little thing I made on @codepen.io: breathing with `shape()` <br><a href="https://codepen.io/thebabydino/pen/vEEqMWo" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/vEE</span><span class="invisible">qMWo</span></a></p><p>`shape()` is supported in Chrome 135+ and Safari 18.4+.</p><p>Firefox 126+ supports it for simple shapes (but not for this demo) when setting thelayout.css.basic-shape-shape.enabled to true in about:config.</p><p><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/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssClipPath</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/cssShapes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssShapes</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/clipping" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>clipping</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</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></p>
ExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload