bolha.us is one of the many independent Mastodon servers you can use to participate in the fediverse.
We're a Brazilian IT Community. We love IT/DevOps/Cloud, but we also love to talk about life, the universe, and more. | Nós somos uma comunidade de TI Brasileira, gostamos de Dev/DevOps/Cloud e mais!

Server stats:

252
active users

#code

66 posts48 participants21 posts today
Ana Tudor 🐯<p>How would you create this in such a way that its individual parts can be scaled independently, including via <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> animations/ transitions?</p><p>Here's my take on it <a href="https://www.reddit.com/r/css/comments/1jp1cgu/comment/mkw30mh/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1jp1</span><span class="invisible">cgu/comment/mkw30mh/</span></a> </p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <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> <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/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>
Ana Tudor 🐯<p>Single `img` element squircle + inner shadow with <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> magic 🪄</p><p>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/MYgNgBa" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/MYg</span><span class="invisible">NgBa</span></a></p><p><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/squircle" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>squircle</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/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</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/ebDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ebDevelopment</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Ana Tudor 🐯<p>Here's another such example 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/azbLBJy" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/azb</span><span class="invisible">LBJy</span></a></p><p>Concave rounding, gradient background, shape drop-shadow, responsivity... all in one demo. Also using an <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> + <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/grid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grid</span></a>.</p><p><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/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Artiholics<p>The Shirley Fenette SR** is a delightful addition to the Code Geass: Lelouch of the Rebellion set from Union Arena. Known for her charm and unwavering devotion to Lelouch, Shirley’s card is a fan-favorite for players and collectors alike. Whether you’re a die-hard Code Geass fan or a Union Arena enthusiast, this card is a gem. Keep reading to learn more! 😎👌🔥</p><p><a href="https://mastodon.social/tags/ShirleyFenetteSR" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ShirleyFenetteSR</span></a>** <a href="https://mastodon.social/tags/ShirleyFenette" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ShirleyFenette</span></a> <a href="https://mastodon.social/tags/Code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Code</span></a> </p><p><a href="https://artiholics.com/shirley-fenette-sr-from-code-geass-lelouch-of-the-rebellion/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">artiholics.com/shirley-fenette</span><span class="invisible">-sr-from-code-geass-lelouch-of-the-rebellion/</span></a></p>
Ana Tudor 🐯<p>Little <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> demo: stacked avatars <a href="https://codepen.io/thebabydino/pen/ogNQryV" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/ogN</span><span class="invisible">QryV</span></a></p><p>Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> and very little of it, just some <a href="https://mastodon.social/tags/flexbox" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>flexbox</span></a> magic. 🪄</p><p><a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>layout</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/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>Here's a gradient background version 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> too <a href="https://codepen.io/thebabydino/pen/KwKrJGp" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/KwK</span><span class="invisible">rJGp</span></a></p><p>Shape depends on how the text content naturally wraps.</p><p><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> <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/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gooey</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Harry W.<p>Anyone know of a good Schedular in <a href="https://mstdn.social/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a>? Trying to move away from agenda (<a href="https://github.com/agenda/agenda" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">github.com/agenda/agenda</span><span class="invisible"></span></a>) as it's not been updated in years, and we want to use Postgres as our backing store. </p><p>Any suggestions?</p><p><a href="https://mstdn.social/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Javascript</span></a> <a href="https://mstdn.social/tags/Node" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Node</span></a> <a href="https://mstdn.social/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programming</span></a> <a href="https://mstdn.social/tags/Code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Code</span></a> <a href="https://mstdn.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a></p>
Ana Tudor 🐯<p>This effectively pushes all pixels except for those with alphas originally in the [.4, .6] interval (which now stretch across the [0, 1] interval) to either 0 or 1, whichever is closer.</p><p>Now you may be wondering why not do this from the start instead of those first two primitives.</p><p>Well, because without knowing the blur radius in px (something that's not really possible without JS if we set it in container query or viewport units), we can't know what interval to map to.🤷‍♀️</p><p><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/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>To fix this, we give the assembly a tiny blur.</p><p>We don't want blurry edges👇 either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].</p><p><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> <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/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssBlur</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> <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/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a></p>
Ana Tudor 🐯<p>Enter the <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>!</p><p>`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).</p><p>This makes edges jagged. 💀 </p><p>Maybe not so noticeable in some cases, but it often won't cut it.</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/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</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/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssBlur</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/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/webDevelpment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelpment</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/goo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>goo</span></a> <a href="https://mastodon.social/tags/gooey" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gooey</span></a> <a href="https://mastodon.social/tags/blobs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blobs</span></a> <a href="https://mastodon.social/tags/metalball" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>metalball</span></a></p>
Ana Tudor 🐯<p>How the assembly alpha is computed is something I've detailed in 👉 <a href="https://css-tricks.com/adventures-in-css-semi-transparency-land/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">css-tricks.com/adventures-in-c</span><span class="invisible">ss-semi-transparency-land/</span></a></p><p>Keep in mind that where we have overlap, two corresponding pixels from the two layers may both have an alpha below .5, but their overlap can still give the assembly an alpha above .5!</p><p>For example:</p><p>.4 + .3 - .4*.3 = .7 - .12 = .58</p><p>Both .4 and .3 are smaller than .5, but the overlap alpha .58 is bigger than .5!</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/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssBlur</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>As you can see in the recording 👆 blurring makes the pixels around the edges semitransparent. The bigger the blur radius, the more pixels become transparent.</p><p>When the particles get closer, their semitransparent areas overlap. This increases the assembly alpha there.</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/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/cssBlur" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssBlur</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> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>What's going on here?</p><p>We have particles moving around inside a `.goo` assembly. How we do that (layout, animation) doesn't matter.</p><p>We blur these particles with 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/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> (same blur radius or not). CSS allows us to use whatever unit we need for the blur radius. rem, cqi, lh. </p><p><a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</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/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></p>
Ana Tudor 🐯<p>A little spinner I made years ago 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> but never shared publicly <a href="https://codepen.io/thebabydino/pen/OJQKbKW" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/OJQ</span><span class="invisible">KbKW</span></a></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/loader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>loader</span></a> <a href="https://mastodon.social/tags/spinner" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>spinner</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/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/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</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/cssMask" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>conicGradient</span></a> <a href="https://mastodon.social/tags/cssSpinner" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssSpinner</span></a> <a href="https://mastodon.social/tags/cssLoader" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLoader</span></a> <a href="https://mastodon.social/tags/singleDiv" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>singleDiv</span></a> <a href="https://mastodon.social/tags/oneDiv" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>oneDiv</span></a></p>
Pyrzout :vm:<p>Golang On The PS2 <a href="https://hackaday.com/2025/03/31/golang-on-the-ps2/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">hackaday.com/2025/03/31/golang</span><span class="invisible">-on-the-ps2/</span></a> <a href="https://social.skynetcloud.site/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SoftwareDevelopment</span></a> <a href="https://social.skynetcloud.site/tags/PlaystationHacks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PlaystationHacks</span></a> <a href="https://social.skynetcloud.site/tags/playstation2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>playstation2</span></a> <a href="https://social.skynetcloud.site/tags/golang" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>golang</span></a> <a href="https://social.skynetcloud.site/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://social.skynetcloud.site/tags/ps2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ps2</span></a> <a href="https://social.skynetcloud.site/tags/Go" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Go</span></a></p>
IT News<p>Golang On The PS2 - A great many PlayStation 2 games were coded in C++, and there are homebrew SDKs th... - <a href="https://hackaday.com/2025/03/31/golang-on-the-ps2/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">hackaday.com/2025/03/31/golang</span><span class="invisible">-on-the-ps2/</span></a> <a href="https://schleuss.online/tags/softwaredevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>softwaredevelopment</span></a> <a href="https://schleuss.online/tags/playstationhacks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>playstationhacks</span></a> <a href="https://schleuss.online/tags/playstation2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>playstation2</span></a> <a href="https://schleuss.online/tags/golang" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>golang</span></a> <a href="https://schleuss.online/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://schleuss.online/tags/ps2" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ps2</span></a> <a href="https://schleuss.online/tags/go" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>go</span></a></p>
Expertenkommision Cyberunfall<p>Which <a href="https://mastodon.social/tags/license" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>license</span></a> is the right one to <a href="https://mastodon.social/tags/publish" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>publish</span></a> my <a href="https://mastodon.social/tags/genetic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>genetic</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> as <a href="https://mastodon.social/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>opensource</span></a>, so no <a href="https://mastodon.social/tags/company" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>company</span></a> is <a href="https://mastodon.social/tags/allowed" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>allowed</span></a> to make <a href="https://mastodon.social/tags/profit" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>profit</span></a> or create <a href="https://mastodon.social/tags/closedsourced" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>closedsourced</span></a> <a href="https://mastodon.social/tags/products" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>products</span></a> from it?</p>
ScriptFanix ❤️ ⏚ ⸫<p>Getting there... <a href="https://framagit.org/atom/AtOM/-/compare/master...17-read-and-copy-replaygain?from_project_id=112745" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">framagit.org/atom/AtOM/-/compa</span><span class="invisible">re/master...17-read-and-copy-replaygain?from_project_id=112745</span></a></p><p><a href="https://maly.io/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://maly.io/tags/bash" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>bash</span></a> <a href="https://maly.io/tags/script" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>script</span></a></p>
Alexey Skobkin<p>За вечер с Cursor написал в один свой пет-проектик столько, сколько не написал за последние полгода-год 🙄</p><p>Если бы его ещё можно было напрямую использовать в IDEA - это было бы мегабожественно. А так это просто божественно.</p><p><a href="https://lor.sh/tags/log" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>log</span></a> <a href="https://lor.sh/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://lor.sh/tags/LLM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LLM</span></a> <a href="https://lor.sh/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://lor.sh/tags/performance" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>performance</span></a> <a href="https://lor.sh/tags/Cursor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Cursor</span></a> <a href="https://lor.sh/tags/agent" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>agent</span></a></p>
Texas Technician<p>Is there anyone else who learned how to <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> specifically because they hated available <a href="https://mastodon.social/tags/software" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>software</span></a> option, and decided to build their own tool?</p><p>Currently thinking about building an expense tracker. Because I just don't like any of the ones I've tried. 🫠</p>