corteximplant.com is one of the many independent Mastodon servers you can use to participate in the fediverse.
CORTEX IMPLANT - an international cyberpunk'ish LGBTQIA+ friendly Fediverse instance for edgerunners, netrunners and cyberpunks and all who want to become one.

Administered by:

Server stats:

237
active users

#code

40 posts25 participants1 post today
IT News<p>Speeding Up Your Projects With Direct Memory Access - Here’s the thing about coding. When you’re working on embedded projects, it’s quit... - <a href="https://hackaday.com/2025/03/18/speeding-up-your-projects-with-direct-memory-access/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">hackaday.com/2025/03/18/speedi</span><span class="invisible">ng-up-your-projects-with-direct-memory-access/</span></a> <a href="https://schleuss.online/tags/directmemoryaccess" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>directmemoryaccess</span></a> <a href="https://schleuss.online/tags/microcontrollers" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>microcontrollers</span></a> <a href="https://schleuss.online/tags/embedded" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>embedded</span></a> <a href="https://schleuss.online/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://schleuss.online/tags/dma" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dma</span></a></p>
doboprobodyne<p><span class="h-card" translate="no"><a href="https://circumstances.run/@davidgerard" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>davidgerard</span></a></span> </p><p>"There's still no substitute for knowing what you're doing". 🤣 ❤️ </p><p>A tremendous video! Thank you for making it.</p><p><a href="https://mathstodon.xyz/tags/AI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AI</span></a> <a href="https://mathstodon.xyz/tags/LLM" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>LLM</span></a> <a href="https://mathstodon.xyz/tags/vibeCoding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>vibeCoding</span></a> <a href="https://mathstodon.xyz/tags/MBA" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>MBA</span></a> <a href="https://mathstodon.xyz/tags/Business" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Business</span></a> <a href="https://mathstodon.xyz/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://mathstodon.xyz/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Code</span></a></p>
Ana Tudor 🐯<p>Hi, mastodon 🦣 I have a new article out!</p><p>A Deep Dive into the Inline Background Overlap Problem: <a href="https://frontendmasters.com/blog/overlapping-inline-backgrounds/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/overl</span><span class="invisible">apping-inline-backgrounds/</span></a></p><p>How do you get the below result (semi-transparent background on inline span) with large padding &amp; no overlap?</p><p>Answer in article, but think a bit about it first. 😼</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>blending</span></a></p>
Metin Seven 🎨<p>Pleasant retro demo-scene vibes… 💚</p><p><a href="https://collidingscopes.github.io/liquid-shape-distortions/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">collidingscopes.github.io/liqu</span><span class="invisible">id-shape-distortions/</span></a></p><p>💡 You can unfold a menu with controls at the top right.</p><p><a href="https://graphics.social/tags/effects" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>effects</span></a> <a href="https://graphics.social/tags/FX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FX</span></a> <a href="https://graphics.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://graphics.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://graphics.social/tags/math" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>math</span></a> <a href="https://graphics.social/tags/science" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>science</span></a> <a href="https://graphics.social/tags/graphics" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>graphics</span></a> <a href="https://graphics.social/tags/CGI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CGI</span></a> <a href="https://graphics.social/tags/retro" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>retro</span></a> <a href="https://graphics.social/tags/RetroComputing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RetroComputing</span></a> <a href="https://graphics.social/tags/RetroTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>RetroTech</span></a> <a href="https://graphics.social/tags/demoscene" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>demoscene</span></a> <a href="https://graphics.social/tags/commodore" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>commodore</span></a> <a href="https://graphics.social/tags/amiga" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>amiga</span></a> <a href="https://graphics.social/tags/realtime" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>realtime</span></a> <a href="https://graphics.social/tags/shader" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>shader</span></a> <a href="https://graphics.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://graphics.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a></p>
Ana Tudor 🐯<p>Ever wanted to get the number of auto-fit columns in CSS?</p><p>```<br>--u: 5em;<br>grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr))<br>```</p><p>It's now possible! Using registered <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> vars, the tan division hack and container query units! Here's a little test on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span>: <br> <a href="https://codepen.io/thebabydino/pen/JojpBJr" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Joj</span><span class="invisible">pBJr</span></a></p><p><a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
.:\dGh/:.<p>You want a crazy idea? Add an "__outScope" built-in method for classes.</p><p>It will run when the scope of the variable that holds the class instance ends.</p><p>Imagine the possibilities.</p><p><a href="https://mastodon.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PHP</span></a> <a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programming</span></a> <a href="https://mastodon.social/tags/Software" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Software</span></a> <a href="https://mastodon.social/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SoftwareDevelopment</span></a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/ApplicationDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ApplicationDevelopment</span></a> <a href="https://mastodon.social/tags/AppDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AppDevelopment</span></a> <a href="https://mastodon.social/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://mastodon.social/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Code</span></a></p>
st1nger :unverified: 🏴‍☠️ :linux: :freebsd:<p><a href="https://infosec.exchange/tags/Xbox" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Xbox</span></a> 360 modders have discovered a new way to get homebrew apps and games running on the console. A new software-only exploit known as <a href="https://infosec.exchange/tags/BadUpdate" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BadUpdate</span></a> allows you to use a <a href="https://infosec.exchange/tags/USB" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>USB</span></a> key to hack past <a href="https://infosec.exchange/tags/Microsoft" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Microsoft</span></a> <a href="https://infosec.exchange/tags/Hypervisor" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Hypervisor</span></a> protections and run unsigned <a href="https://infosec.exchange/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> and <a href="https://infosec.exchange/tags/games" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>games</span></a> <a href="https://github.com/grimdoomer/Xbox360BadUpdate" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/grimdoomer/Xbox360B</span><span class="invisible">adUpdate</span></a></p>
Ana Tudor 🐯<p>Because I saw a <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...</p><p>Here's a super simple modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> grid + clip-path + mathematical functions responsive version with no breakpoints <a href="https://codepen.io/thebabydino/pen/QwWQqeR" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QwW</span><span class="invisible">QqeR</span></a></p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/hexagon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>hexagon</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerQueryUnits</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Axel Rauschmayer<p><span class="h-card" translate="no"><a href="https://mamot.fr/@pygy" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>pygy</span></a></span> I’d like to hide implementation details, so I’d do: <a href="https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqCXlCzhkAXmQAGBmgxYZYQiXLIsYZSLIUKVOiZs2lKvGADUbgNymKnADSm3NxAA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqCXlCzhkAXmQAGBmgxYZYQiXLIsYZSLIUKVOiZs2lKvGADUbgNymKnADSm3NxAA</span></a></p><p>(Looking at the code right now, I realize that I should change the interface because with only .inc():void there is no way to retrieve the current counter. But that doesn’t change the basic challenge.)</p>
Harald<p><span class="h-card" translate="no"><a href="https://fosstodon.org/@rauschma" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>rauschma</span></a></span> Use a proper class instead of fumbling objects and be done. 😃 </p><p>Whether you then still want to have the factory method instead of just calling the constructor is up to you.</p><p><a href="https://www.typescriptlang.org/play/?#code/LAKALgngDgpgBASQHYGMBOMC2MlgPZpwC8cA3qHHAJaoAUAlAFxwBueVAJgDSgC+A3KBQAbAIYBncXADKYAK4AzBWQqU4KPEnFg0clPjS0ocgEbCqKdXjm4YhEgAZ6ZXqso0UDZm04qQagLgwAAsqcQA6DRswOzgAahIARkF-NVcQdNAFG30qTTgoYTlxAGZaKmZkdCwcAyZWdg4-AKpwjwYUlra6ek61VvbeviFNbWpiOCQYAHcZeSVaEqGQQuKyqmWNLTxhGHDhPABzWgAiKgmT+OpI61s0ZaA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/LAKALgngDgpgBASQHYGMBOMC2MlgPZpwC8cA3qHHAJaoAUAlAFxwBueVAJgDSgC+A3KBQAbAIYBncXADKYAK4AzBWQqU4KPEnFg0clPjS0ocgEbCqKdXjm4YhEgAZ6ZXqso0UDZm04qQagLgwAAsqcQA6DRswOzgAahIARkF-NVcQdNAFG30qTTgoYTlxAGZaKmZkdCwcAyZWdg4-AKpwjwYUlra6ek61VvbeviFNbWpiOCQYAHcZeSVaEqGQQuKyqmWNLTxhGHDhPABzWgAiKgmT+OpI61s0ZaA</span></a></p>
Axel Rauschmayer<p><span class="h-card" translate="no"><a href="https://toot.cafe/@dotproto" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>dotproto</span></a></span> Alternative: only `as any` at the end of the `return`.</p><p>But there is one significant downside: `this` now has the type `any` (line A): <a href="https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vQJDw4NCABXwAB2gwAE8AEXwIRQA5fDAAUQAPULBYuOQAekbkagBBWkTOLwpOZDhFfpBchM4gA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vQJDw4NCABXwAB2gwAE8AEXwIRQA5fDAAUQAPULBYuOQAekbkagBBWkTOLwpOZDhFfpBchM4gA</span></a></p>
Axel Rauschmayer<p><span class="h-card" translate="no"><a href="https://mastodon.social/@hcschuetz" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>hcschuetz</span></a></span> Have you removed the (a)ts-expect-error?</p><p><a href="https://www.typescriptlang.org/play/?#code/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vZE4vCk5kOEV9aTxjKATOIA" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">typescriptlang.org/play/?#code</span><span class="invisible">/JYOwLgpgTgZghgYwgAgJIgVCBbC4D2UyA3gFDLKgIAUAlAFzIBu+wAJqQL6kwCuGYYPhDJMEOJHRjcBKACZqAZzBwoYZAF5kABgZoMWGWEIlyyLGF5QRZChQT5+kKI2WqwAGjMUqdU3bswAAtgRQA6BydoAGpogG5vZE4vCk5kOEV9aTxjKATOIA</span></a></p>
Ana Tudor 🐯<p>Because this quick <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner </p><p><a href="https://codepen.io/thebabydino/pen/LEYObpy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEY</span><span class="invisible">Obpy</span></a></p><p>Some grid + shape-outside + container query units <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> magic + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> magic.</p><p>¯\_(ツ)_/¯ </p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>containerQueryUnits</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Safari supports the `filter()` function, which allows us to apply a filter to just the `border-image-source`. It's not ideal, as we still need to have the image link twice, once in the `src` attribute and once in a custom property set on the same `img`. Oh, well... at least it doesn't require any extra elements, just the `img` suffices.</p><p><span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo, but remember, it only works in Safari <a href="https://codepen.io/thebabydino/pen/XWxdyro" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XWx</span><span class="invisible">dyro</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Made this a couple of years ago on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown <a href="https://codepen.io/thebabydino/pen/qBJENKM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBJ</span><span class="invisible">ENKM</span></a></p><p>Based on a thing at a now dead link which did something of the kind with a huge div soup.</p><p><a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>js</span></a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dropdown</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>Someone hearted this button ripple effect demo on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> (coded about half a decade ago) and made me notice it still said "only works in Chromium" - as of last summer, it's cross-browser! 🥳🎉</p><p><a href="https://codepen.io/thebabydino/pen/LYZpEVy" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LYZ</span><span class="invisible">pEVy</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>A super simple little <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> example on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span>: </p><p><a href="https://codepen.io/thebabydino/pen/QwWNwOz" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/QwW</span><span class="invisible">NwOz</span></a></p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a></p>
Ana Tudor 🐯<p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> wish: for browsers to implement the `src()` (<a href="https://drafts.csswg.org/css-values/#funcdef-src" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">drafts.csswg.org/css-values/#f</span><span class="invisible">uncdef-src</span></a>) and `filter()` (<a href="https://github.com/web-platform-tests/interop/issues/717" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/web-platform-tests/</span><span class="invisible">interop/issues/717</span></a>) functions.</p><p>Combined with the improved `attr()`, this would allow us to give images borders that are gradient versions of themselves using a `border-image` CSS declaration.</p><p><a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>Know how border-image &amp; border-radius don't play nice together?</p><p>(interactive <a href="https://codepen.io/thebabydino/pen/jxZyed" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/jxZ</span><span class="invisible">yed</span></a>)</p><p><a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCSStip</span></a> there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!</p><p>clip-path: inset(0 round $r)</p><p><span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo: <a href="https://codepen.io/thebabydino/pen/qBELJGY?editors=1100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qBE</span><span class="invisible">LJGY?editors=1100</span></a></p><p>(and yes, this is a tip I first shared on twitter over half a decade ago <a href="https://x.com/anatudor/status/1219916121341644807" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">x.com/anatudor/status/12199161</span><span class="invisible">21341644807</span></a> )</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>clipPath</span></a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssClipPath</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/borderImage" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>borderImage</span></a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>borderRadius</span></a></p>
Ana Tudor 🐯<p>Please don't do this for a marquee effect 😭 </p><p>So many problems with it. 2 animations are completely unnecessary. You should animate translation, not left.</p><p>+it's possible without duplication, especially in non-clickable icons case like here, where the idea was to emulate the Jamstack infinitely sliding longos - see this <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pen/bGPzdaM" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/bGP</span><span class="invisible">zdaM</span></a> </p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/marquee" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>marquee</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>