Mastodon.cc

Ana Tudor 🐯Hi, mastodon 🦣 I have a new article out!A Deep Dive into the Inline Background Overlap Problem: <a href="https://frontendmasters.com/blog/overlapping-inline-backgrounds/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://frontendmasters.com/blog/overlapping-inline-backgrounds/</a>How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?Answer in article, but think a bit about it first. 😼<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blendMode</a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blending</a>

Chris Ferdinandi ⚓️📺 New Video: WTF is the CSS :is() pseudo-class!?! <a href="https://www.youtube.com/watch?v=hKGX1jRpp6I" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.youtube.com/watch?v=hKGX1jRpp6I</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/FrontEndDeveloper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEndDeveloper</a> <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#100DaysOfCode</a> <a href="https://mastodon.social/tags/CodeNewbie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodeNewbie</a>

Chris Ferdinandi ⚓️⚓️ New Article: Reducing CSS complexity with the :is() pseudo-class <a href="https://ift.tt/QFgSdMH" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ift.tt/QFgSdMH</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/FrontEndDeveloper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEndDeveloper</a> <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#100DaysOfCode</a> <a href="https://mastodon.social/tags/CodeNewbie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodeNewbie</a>

Retro Gerryim looking for a <a href="https://mastodon.gamedev.place/tags/blog" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#blog</a> system for my personal website. preferably php that is very basic and doesnt use lot of javascript or external libraries, im trying to keep it as lightweight as possible, trying to avoid external bloated libraries that arenet needed. Ideally I should just write something but I dont feel the need to reinvent the wheel. Plus theres the time factor. I've seen a couple but just wanted other peopels recommendations to try as well. <a href="https://mastodon.gamedev.place/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SmallWeb</a> <a href="https://mastodon.gamedev.place/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.gamedev.place/tags/php" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#php</a>

CX-7CSS devs when a new foldable drops...<a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://mastodon.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/meme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#meme</a> <a href="https://mastodon.social/tags/funny" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#funny</a>

Ana Tudor 🐯Ever wanted to get the number of auto-fit columns in CSS?``` --u: 5em; grid-template-columns: repeat(auto-fit, minmax(var(--u), 1fr)) ```It's now possible! Using registered <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> vars, the tan division hack and container query units! Here's a little test on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/JojpBJr" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/JojpBJr</a><a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#layout</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Python Weekly 🐍Flask Hosting: Cold starts and restarts<a href="https://wisefool.xyz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://wisefool.xyz</a>Discussions: <a href="https://discu.eu/q/https://wisefool.xyz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://discu.eu/q/https://wisefool.xyz</a><a href="https://mastodon.social/tags/flask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#flask</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#python</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Golang WeeklyMicrosoft is making TypeScript 10x faster with native implementation in Go | Bigger TypeScript projects should now become much more manageable in all code editors<a href="https://www.techspot.com/news/107139-microsoft-making-typescript-10x-faster-native-implementation-go.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://www.techspot.com/news/107139-microsoft-making-typescript-10x-faster-native-implementation-go.html</a>Discussions: <a href="https://discu.eu/q/https://www.techspot.com/news/107139-microsoft-making-typescript-10x-faster-native-implementation-go.html" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://discu.eu/q/https://www.techspot.com/news/107139-microsoft-making-typescript-10x-faster-native-implementation-go.html</a><a href="https://mastodon.social/tags/golang" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#golang</a> <a href="https://mastodon.social/tags/news" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#news</a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> <a href="https://mastodon.social/tags/technology" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#technology</a> <a href="https://mastodon.social/tags/typescript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#typescript</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a>

Ana Tudor 🐯Because I saw a <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...Here's a super simple modern <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> grid + clip-path + mathematical functions responsive version with no breakpoints <a href="https://codepen.io/thebabydino/pen/QwWQqeR" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QwWQqeR</a><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipPath</a> <a href="https://mastodon.social/tags/hexagon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#hexagon</a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssMaths</a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#containerQueryUnits</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssVariables</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

alexanderadamPSA to my fellow 🤓 <a href="https://ruby.social/tags/nerds" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#nerds</a> who like <a href="https://ruby.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#programming</a> in <a href="https://ruby.social/@ruby" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@ruby</a> and/or <a href="https://ruby.social/tags/webprogramming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webprogramming</a> who would also like to visit ⚛️ CERN in 🇨🇭 <a href="https://ruby.social/tags/geneva" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#geneva</a> — the place where <a href="https://w3c.social/@timbl" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@timbl</a> invented the 🌐 <a href="https://ruby.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a>.If you need a reason to visit <a href="https://ruby.social/tags/cern" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cern</a>, maybe also for the <a href="https://ruby.social/tags/largehadroncollider" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#largehadroncollider</a>, then this might be it.<a href="https://ruby.social/@helvetic_ruby/114179005684458096" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ruby.social/@helvetic_ruby/114179005684458096</a>And keep in mind that <a href="https://ruby.social/@helvetic_ruby" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@helvetic_ruby</a> is switching places each year. So if you'd like to have this combo then 2025 is the year for you.<a href="https://ruby.social/tags/rubylang" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#rubylang</a> <a href="https://ruby.social/tags/ruby" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#ruby</a> <a href="https://ruby.social/tags/RubyProgramming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#RubyProgramming</a> <a href="https://ruby.social/tags/lhr" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#lhr</a> <a href="https://ruby.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://ruby.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdevelopment</a>

Ana Tudor 🐯Because this quick <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner <a href="https://codepen.io/thebabydino/pen/LEYObpy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LEYObpy</a>Some grid + shape-outside + container query units <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> magic + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> magic.¯\_(ツ)_/¯ <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/containerQueryUnits" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#containerQueryUnits</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯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.<a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo, but remember, it only works in Safari <a href="https://codepen.io/thebabydino/pen/XWxdyro" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/XWxdyro</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Chris Ferdinandi ⚓️⚓️ New Article: Unwieldy code bases <a href="https://ift.tt/edU9x0T" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://ift.tt/edU9x0T</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/FrontEndDeveloper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FrontEndDeveloper</a> <a href="https://mastodon.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#100DaysOfCode</a> <a href="https://mastodon.social/tags/CodeNewbie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CodeNewbie</a>

Ana Tudor 🐯Made this a couple of years ago on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> 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 noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qBJENKM</a>Based on a thing at a now dead link which did something of the kind with a huge div soup.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#js</a> <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#a11y</a> <a href="https://mastodon.social/tags/dropdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dropdown</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯Someone hearted this button ripple effect demo on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> (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! 🥳🎉<a href="https://codepen.io/thebabydino/pen/LYZpEVy" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/LYZpEVy</a><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a>

Ana Tudor 🐯A super simple little <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#subgrid</a> example on <a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a>: <a href="https://codepen.io/thebabydino/pen/QwWNwOz" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/QwWNwOz</a><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssLayout</a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssGrid</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a>

Ana Tudor 🐯<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> wish: for browsers to implement the `src()` (<a href="https://drafts.csswg.org/css-values/#funcdef-src" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://drafts.csswg.org/css-values/#funcdef-src</a>) and `filter()` (<a href="https://github.com/web-platform-tests/interop/issues/717" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://github.com/web-platform-tests/interop/issues/717</a>) functions.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.<a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#filter</a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssFilter</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a>

Angelika CathorIn the last 6 months of using Astro in SSR mode, I have learned a lot about HTML streaming and how it breaks the expectations I had for full-stack apps, coming from Phoenix/Ruby on Rails.I have written down a short blog post about it so you can learn from my mistakes instead of repeating them 🚀 <a href="https://angelika.me/2025/03/16/implications-of-astro-html-streaming/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://angelika.me/2025/03/16/implications-of-astro-html-streaming/</a><a href="https://mas.to/tags/Astro" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Astro</a> <a href="https://mas.to/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mas.to/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#HTML</a> <a href="https://mas.to/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Frontend</a>

DaveI'm still thinking of getting back in-the-game re: **WebDev**, tried *normal boring jobs* and they just aren't cutting it. So if anyone knows of people looking for a seasoned Web Developer, esp. if part time and have WordPress requirements please put in a good word for me. Cheers! <a href="https://mastodon.social/tags/WordPress" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WordPress</a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> <a href="https://mastodon.social/tags/Jobs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Jobs</a> <a href="https://mastodon.social/tags/GetFediHired" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#GetFediHired</a> <a href="https://mastodon.social/tags/FediHire" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#FediHire</a>

Ana Tudor 🐯Know how border-image & border-radius don't play nice together?(interactive <a href="https://codepen.io/thebabydino/pen/jxZyed" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/jxZyed</a>)<a href="https://mastodon.social/tags/tinyCSStip" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#tinyCSStip</a> there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!clip-path: inset(0 round $r)<a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@codepen</a> demo: <a href="https://codepen.io/thebabydino/pen/qBELJGY?editors=1100" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://codepen.io/thebabydino/pen/qBELJGY?editors=1100</a>(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 noreferrer" translate="no" target="_blank">https://x.com/anatudor/status/1219916121341644807</a> )<a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/clipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipPath</a> <a href="https://mastodon.social/tags/cssClipPath" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#cssClipPath</a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#coding</a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#web</a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#dev</a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDev</a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webDevelopment</a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#code</a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#frontend</a> <a href="https://mastodon.social/tags/borderImage" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderImage</a> <a href="https://mastodon.social/tags/borderRadius" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#borderRadius</a>

Recent searches

Search options

Administered by:

Server stats:

#webdev