toad.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Mastodon server operated by David Troy, a tech pioneer and investigative journalist addressing threats to democracy. Thoughtful participation and discussion welcome.

Administered by:

Server stats:

381
active users

#dev

26 posts21 participants0 posts today
Astrarium Games<p>Have you played MINI MERCHANT yet? Our <a href="https://mastodon.social/tags/classic" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>classic</span></a> <a href="https://mastodon.social/tags/casual" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>casual</span></a> <a href="https://mastodon.social/tags/openworld" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>openworld</span></a> <a href="https://mastodon.social/tags/collectathon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>collectathon</span></a> <a href="https://mastodon.social/tags/RPG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>RPG</span></a> is on <a href="https://mastodon.social/tags/Steam" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Steam</span></a>!<br> <br><a href="https://store.steampowered.com/app/3473760/Mini_Merchant/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">store.steampowered.com/app/347</span><span class="invisible">3760/Mini_Merchant/</span></a></p><p><a href="https://mastodon.social/tags/game" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>game</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/newgame" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>newgame</span></a> <a href="https://mastodon.social/tags/indie" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>indie</span></a> <a href="https://mastodon.social/tags/indielaunch" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>indielaunch</span></a> <a href="https://mastodon.social/tags/indiedev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>indiedev</span></a><br><a href="https://mastodon.social/tags/indierev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>indierev</span></a> <a href="https://mastodon.social/tags/pixel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>pixel</span></a> <a href="https://mastodon.social/tags/loz" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>loz</span></a> <a href="https://mastodon.social/tags/botw" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>botw</span></a> <a href="https://mastodon.social/tags/totk" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>totk</span></a> <a href="https://mastodon.social/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://mastodon.social/tags/art" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>art</span></a> <a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a><br><a href="https://mastodon.social/tags/chiptune" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>chiptune</span></a> <a href="https://mastodon.social/tags/audio" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>audio</span></a> <a href="https://mastodon.social/tags/unity" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>unity</span></a> <a href="https://mastodon.social/tags/asesprite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>asesprite</span></a> <a href="https://mastodon.social/tags/labchirp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>labchirp</span></a></p>
Absolute Memery 🎭<p><a href="https://tribe.net/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programming</span></a> <a href="https://tribe.net/tags/Coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Coding</span></a> <a href="https://tribe.net/tags/Programmer" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programmer</span></a> <a href="https://tribe.net/tags/Programmers" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programmers</span></a> <a href="https://tribe.net/tags/ProgrammerLife" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ProgrammerLife</span></a> <a href="https://tribe.net/tags/Dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Dev</span></a> <a href="https://tribe.net/tags/Bug" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Bug</span></a> <a href="https://tribe.net/tags/Bugs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Bugs</span></a> <a href="https://tribe.net/tags/CodingStruggles" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CodingStruggles</span></a> <a href="https://tribe.net/tags/SoftwareDeveloper" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SoftwareDeveloper</span></a> <a href="https://tribe.net/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SoftwareDevelopment</span></a> <a href="https://tribe.net/tags/Git" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Git</span></a>.</p><p><a href="https://tribe.net/tags/Meme" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Meme</span></a> <a href="https://tribe.net/tags/Memes" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Memes</span></a> <a href="https://tribe.net/tags/Humour" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Humour</span></a> <a href="https://tribe.net/tags/Humor" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Humor</span></a></p>
Aral Balkan<p>Sometimes I’m playing with Kitten and something makes me smile. This time, it’s an error message. Always nice when you get a little hat-tip from past you to current you. Thanks for putting in the work, past me ;)</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.ar.al/tags/design" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>design</span></a> <a href="https://mastodon.ar.al/tags/usability" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>usability</span></a> <a href="https://mastodon.ar.al/tags/errors" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>errors</span></a></p>
CodeFreezR (he/him)<p>Früher war alles </p><p><a href="https://chaos.social/tags/FBI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FBI</span></a> 🕵️ &lt; 😎 </p><p>heute ist alles </p><p><a href="https://chaos.social/tags/FAIR" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FAIR</span></a> 🌱 &lt;- 🤩 </p><p>Ohkey das hinkt n bissel. FBI ist für Services, FAIR eher so für Daten.</p><p>\__<br><a href="https://chaos.social/tags/UDDI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UDDI</span></a> <a href="https://chaos.social/tags/ServiceMesh" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ServiceMesh</span></a> <a href="https://chaos.social/tags/WSDL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WSDL</span></a> <a href="https://chaos.social/tags/SOAP" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SOAP</span></a> <a href="https://chaos.social/tags/GRPC" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GRPC</span></a> <a href="https://chaos.social/tags/ServiceDiscover" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ServiceDiscover</span></a> <a href="https://chaos.social/tags/SideCar" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SideCar</span></a> <a href="https://chaos.social/tags/grpc" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>grpc</span></a> <a href="https://chaos.social/tags/rest" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>rest</span></a> <a href="https://chaos.social/tags/OpenResearch" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenResearch</span></a> <a href="https://chaos.social/tags/Meta" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Meta</span></a> <a href="https://chaos.social/tags/OpenData" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenData</span></a> <a href="https://chaos.social/tags/API" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>API</span></a> <a href="https://chaos.social/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>100DaysOfCode</span></a> <a href="https://chaos.social/tags/OpenSource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>OpenSource</span></a> <a href="https://chaos.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Licho<p><span class="h-card" translate="no"><a href="https://mastodon.online/@jarofgreen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>jarofgreen</span></a></span> why am I only able to retoot this once? I want to amplify it more!<br>I know! I'll add tags<br><a href="https://kolektiva.social/tags/software" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>software</span></a> <a href="https://kolektiva.social/tags/linux" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>linux</span></a> <a href="https://kolektiva.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://kolektiva.social/tags/hardware" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hardware</span></a> <a href="https://kolektiva.social/tags/tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tech</span></a> <a href="https://kolektiva.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://kolektiva.social/tags/enshittification" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>enshittification</span></a></p>
Aral Balkan<p>New Kitten release</p><p>• Minor fix: Styles automatically gathered and de-duplicated from the body into the head are now placed _after_ other items in the &lt;head&gt; slot. Since you would expect styles added to the body of the page to override ones in the head, this now brings Kitten’s behaviour in-line with authoring expectations.</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Bugs | Kyoto yoSkrll<p>Buenas pessoas!</p><p>Escrevi uma pequena reflexão sobre uso da IA no processo de aprendizado de programação, no blog da CumbucaDev. Gostaria de ter a opinião de vocês também sobre isso e assuntos relacionados, comenta lá! :blobcatflower: <br><a href="https://cumbuca.dev/2025/03/28/nao-deixe-a-ia-pensar-por-voce/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">cumbuca.dev/2025/03/28/nao-dei</span><span class="invisible">xe-a-ia-pensar-por-voce/</span></a></p><p>:BoostOK: <br><a href="https://bolha.us/tags/Tech" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Tech</span></a> <a href="https://bolha.us/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://bolha.us/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a> </p><p>(da um share no linkedin tbm?) <a href="https://www.linkedin.com/posts/cumbucadev_post-novo-no-nosso-blog-colaborativo-activity-7311415511576186881-J2WU" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">linkedin.com/posts/cumbucadev_</span><span class="invisible">post-novo-no-nosso-blog-colaborativo-activity-7311415511576186881-J2WU</span></a><br>---<br>:DM: Se você quer escrever para o blog, entre em contato! :heartemo:</p>
elloh<p><a href="https://www.jeveuxaider.gouv.fr/missions-benevolat/69664/benevolat-ethiciel" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">jeveuxaider.gouv.fr/missions-b</span><span class="invisible">enevolat/69664/benevolat-ethiciel</span></a></p><p><a href="https://www.jeveuxaider.gouv.fr/missions-benevolat/69674/benevolat-ethiciel-1" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">jeveuxaider.gouv.fr/missions-b</span><span class="invisible">enevolat/69674/benevolat-ethiciel-1</span></a></p><p>Voici les deux missions de bénévolat proposées actuellement par l'association Éthiciel après validation de notre candidature en tant qu'association loi 1901 auprès du site jeveuxaider.gouv.fr</p><p><a href="https://framapiaf.org/tags/association" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>association</span></a> <a href="https://framapiaf.org/tags/ethiciel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ethiciel</span></a> <a href="https://framapiaf.org/tags/hackahon" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hackahon</span></a> <a href="https://framapiaf.org/tags/hackathondulibre" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>hackathondulibre</span></a> <a href="https://framapiaf.org/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://framapiaf.org/tags/devops" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>devops</span></a> <a href="https://framapiaf.org/tags/aventurecommune" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>aventurecommune</span></a> <a href="https://framapiaf.org/tags/april" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>april</span></a> <a href="https://framapiaf.org/tags/framasoft" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>framasoft</span></a> <a href="https://framapiaf.org/tags/chatonsorg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>chatonsorg</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>
Richie Khoo<p>Package Manager for Markdown</p><p>I'm working on a project that is intended to encourage folk to make markdown text files which can be bundled together in different bundles of text files using a package manager. </p><p>Question for coders; Which package manager would you suggest I use?</p><p>Main criterias (in order) are:</p><p>1. Easy for someone with basic command line skills to edit the file and update version numbers and add additional packages.</p><p>2. All being equal, more commonly and easy to setup is preferred.</p><p><a href="https://hachyderm.io/tags/Markdown" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Markdown</span></a> <a href="https://hachyderm.io/tags/CommonMark" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CommonMark</span></a> <a href="https://hachyderm.io/tags/PackageManager" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PackageManager</span></a> <a href="https://hachyderm.io/tags/Programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Programming</span></a> <a href="https://hachyderm.io/tags/Dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Dev</span></a> <br><a href="https://hachyderm.io/tags/NPM" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NPM</span></a> <a href="https://hachyderm.io/tags/RubyGems" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>RubyGems</span></a> <a href="https://hachyderm.io/tags/Cargo" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Cargo</span></a> <a href="https://hachyderm.io/tags/PickingAMastodonInstance" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>PickingAMastodonInstance</span></a> <br><a href="https://hachyderm.io/tags/Ruby" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Ruby</span></a> <a href="https://hachyderm.io/tags/Python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Python</span></a> <a href="https://hachyderm.io/tags/Rust" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Rust</span></a> <a href="https://hachyderm.io/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Javascript</span></a> <a href="https://hachyderm.io/tags/NodeJs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJs</span></a> <a href="https://hachyderm.io/tags/Lisp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Lisp</span></a> <a href="https://hachyderm.io/tags/CommonGuide" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CommonGuide</span></a></p>
Aral Balkan<p>New Kitten update</p><p>• 🥳 Kitten HTML templates and kitten.Component render functions can now be async.</p><p><a href="https://kitten.small-web.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">kitten.small-web.org</span><span class="invisible"></span></a></p><p>This is quite a big one and it took me finally biting the bullet and getting my head around generators in JavaScript to implement properly.</p><p>So now you can mix synchronous and asynchronous components as you like and if there are any asynchronous components in your templates they will automatically be awaited (even if you forget to use await) ;)</p><p>I’ll write a proper post/tutorial/documentation for it soon but for the time being enjoy the screenshots where a layout template gets the latest three posts from my mock fediverse public timeline service and displays them on the page.</p><p>The kitten.Component version also has a refresh button that streams a different three to the page.</p><p>For those of you unfamiliar with Kitten, this is all the code in either example. No scaffolding, nothing. Pop either into a file called index.page.js and run kitten in that folder and visit https://localhost to see the example run.</p><p>Enjoy!</p><p>:kitten:💕</p><p><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Kitten</span></a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SmallWeb</span></a> <a href="https://mastodon.ar.al/tags/async" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>async</span></a> <a href="https://mastodon.ar.al/tags/components" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>components</span></a> <a href="https://mastodon.ar.al/tags/templates" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>templates</span></a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>NodeJS</span></a> <a href="https://mastodon.ar.al/tags/generators" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>generators</span></a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Dusk To Don :raccoon:<p>I think (?) that Conventional Commits are used by plenty of folk (but if you haven't, check 'em out! Link at bottom)</p><p>Related: Conventional Comments!<br>For many software engineers, we spend a lot of time reviewing code. Here's a cool method of ensuring our feedback is communicated with clarity.</p><p><a href="https://conventionalcomments.org/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">conventionalcomments.org/</span><span class="invisible"></span></a></p><p>[here's the Conventional Commits spec]<br><a href="https://www.conventionalcommits.org/en/v1.0.0/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">conventionalcommits.org/en/v1.</span><span class="invisible">0.0/</span></a></p><p>[and Commitizen can help you work with Conventional Commits]</p><p><a href="https://commitizen-tools.github.io/commitizen/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">commitizen-tools.github.io/com</span><span class="invisible">mitizen/</span></a></p><p><a href="https://todon.eu/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://todon.eu/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://todon.eu/tags/git" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>git</span></a></p>
pvergain (framapiaf)<p>- <a href="https://plainframework.com" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">plainframework.com</span><span class="invisible"></span></a></p><p>A web framework for building products with Python</p><p>This project is too new to really teach any of these concepts. </p><p>There's no harm in cloning a starter kit and messing around, but you aren't going to find a lot of help here if you get stuck.</p><p><a href="https://framapiaf.org/tags/plain" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>plain</span></a> <a href="https://framapiaf.org/tags/django" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>django</span></a> <a href="https://framapiaf.org/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://framapiaf.org/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a></p>
Kai Klostermann<p>New tool to <a href="https://floss.social/tags/learn" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>learn</span></a> <a href="https://floss.social/tags/git" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>git</span></a>! </p><p><a href="https://www.gitmastery.me/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">gitmastery.me/</span><span class="invisible"></span></a></p><p><a href="https://floss.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://floss.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a></p>
Ana Tudor 🐯<p>Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.</p><p>Live 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/XJWxLWV" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJW</span><span class="invisible">xLWV</span></a></p><p>cc <span class="h-card" translate="no"><a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>bramus</span></a></span> </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/scroll" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scroll</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scrollAnimation</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/cssAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/gradientText" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>gradientText</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>Want to give a responsive irregular shape depending on text content/ viewport rounded corners? Here's a super simple pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> + <a href="https://mastodon.social/tags/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> demo 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> doing it <a href="https://codepen.io/thebabydino/pen/KwKGrjR" 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">GrjR</span></a></p><p>Heavily commented. See also <a href="https://mastodon.social/@anatudor/114185324674119212" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1141</span><span class="invisible">85324674119212</span></a> for details about some of the filter primitives.</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/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> <a href="https://mastodon.social/tags/concave" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>concave</span></a></p>