Recent searches

No recent searches

Search options

Not available on lingo.lol.
lingo.lol is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for linguists, philologists, and other lovers of languages.

Administered by:

Server stats:

66
active users

lingo.lol: AboutProfiles directoryPrivacy policy

Mastodon: AboutGet the appKeyboard shortcutsView source codev4.4.1

#WebDevelopment

3 posts3 participants0 posts today
Zuri (he/him) 🕐 CET<p>I scored 13/28 on <a href="https://jsdate.wtf" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">jsdate.wtf</span><span class="invisible"></span></a> and all I got was this lousy text to share on social media.</p><p>But jokes aside, I had great fun—and quite a few headscratches, yaw drops, and sighs 😅 </p><p><a href="https://jsdate.wtf/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">jsdate.wtf/</span><span class="invisible"></span></a></p><p><a href="https://mastodon.online/tags/amCoding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>amCoding</span></a> <a href="https://mastodon.online/tags/amProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>amProgramming</span></a> <a href="https://mastodon.online/tags/softwareDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>softwareDevelopment</span></a> <a href="https://mastodon.online/tags/softwareEngineering" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>softwareEngineering</span></a> <a href="https://mastodon.online/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.online/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.online/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.online/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.online/tags/ECMAScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ECMAScript</span></a> <a href="https://mastodon.online/tags/js_dates" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>js_dates</span></a> <a href="https://mastodon.online/tags/wtfjs" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>wtfjs</span></a></p>
Fedi.Garden 🌱<p>Drupal.community is a Mastodon server focused on Drupal, free open source software and web development, but any content is welcome as long as it adheres to the code of conduct:</p><p>:Fediverse: <a href="https://drupal.community" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">drupal.community</span><span class="invisible"></span></a></p><p>You can find out more at <a href="https://drupal.community/about" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">drupal.community/about</span><span class="invisible"></span></a> or contact the admin <span class="h-card" translate="no"><a href="https://drupal.community/@pcambra" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>pcambra</span></a></span> </p><p>cc <span class="h-card" translate="no"><a href="https://a.gup.pe/u/drupal" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>drupal</span></a></span></p><p><a href="https://social.growyourown.services/tags/FeaturedServer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FeaturedServer</span></a> <a href="https://social.growyourown.services/tags/Drupal" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Drupal</span></a> <a href="https://social.growyourown.services/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://social.growyourown.services/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://social.growyourown.services/tags/FOSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FOSS</span></a> <a href="https://social.growyourown.services/tags/Mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Mastodon</span></a> <a href="https://social.growyourown.services/tags/Fediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Fediverse</span></a> <a href="https://social.growyourown.services/tags/FreeFediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FreeFediverse</span></a></p>
Amber Weinberg<p>I've noticed a persistent issue with using grid and aspect-ratio on mobile. Basically the aspect-ratio, even a basic 4/3, is overflowing the grid instead of resizing with it. I either have to replace grid w/ flex in mobile (and it works) or remove the aspect-ratio completely (and it works).</p><p>Has anyone else noticed this??</p><p><a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css</span></a> <a href="https://front-end.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://front-end.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdevelopment</span></a> <a href="https://front-end.social/tags/webdeveloper" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdeveloper</span></a> <a href="https://front-end.social/tags/grid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>grid</span></a></p>
Erik L. Midtsveen🏳️‍⚧️🏳️‍🌈<p>I run a poorly made website on Codeberg. You can check it out at the link below. Please turn your phone sideways (landscape mode) for a better view, or visit it on a desktop browser for the best experience.</p><p><a href="https://midtsveen.codeberg.page" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">midtsveen.codeberg.page</span><span class="invisible"></span></a></p><p><a href="https://social.linux.pizza/tags/Codeberg" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Codeberg</span></a> <a href="https://social.linux.pizza/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenSource</span></a> <a href="https://social.linux.pizza/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://social.linux.pizza/tags/PersonalWebsite" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PersonalWebsite</span></a> <a href="https://social.linux.pizza/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieWeb</span></a> <a href="https://social.linux.pizza/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://social.linux.pizza/tags/Website" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Website</span></a> <a href="https://social.linux.pizza/tags/Developer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Developer</span></a> <a href="https://social.linux.pizza/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDesign</span></a></p>
.:\dGh/:.<p>Finally! Next <a href="https://mastodon.social/tags/Laravel" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Laravel</span></a> version will include a way to find a value between two table columns.</p><p><a href="https://mastodon.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PHP</span></a> <a href="https://mastodon.social/tags/SQL" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SQL</span></a> <a href="https://mastodon.social/tags/Database" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Database</span></a> <a href="https://mastodon.social/tags/Databases" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Databases</span></a> <a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programming</span></a> <a href="https://mastodon.social/tags/Programmer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programmer</span></a> <a href="https://mastodon.social/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://mastodon.social/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Code</span></a> <a href="https://mastodon.social/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SoftwareDevelopment</span></a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/ApplicationDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ApplicationDevelopment</span></a> <a href="https://mastodon.social/tags/AppDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AppDev</span></a></p>
Yavo<p>Lesson of the week for me is that:</p><p>(as an IT guy) </p><p>I should never give up tinkering in favor of more work. </p><p>It was my interests that lead to paid work, not the other way around.</p><p><a href="https://fosstodon.org/tags/linux" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>linux</span></a> <a href="https://fosstodon.org/tags/gnu" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gnu</span></a> <a href="https://fosstodon.org/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://fosstodon.org/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://fosstodon.org/tags/WordPress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WordPress</span></a> <a href="https://fosstodon.org/tags/writing" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>writing</span></a></p>
Ana Tudor 🐯<p>2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - check it out on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/full/QWopRMK" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/QW</span><span class="invisible">opRMK</span></a></p><p>An interactive, responsive demo illustrating how `feColorMatrix` can be used to swap channels. Another very special one.</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/interactive" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>interactive</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> </p><p>Behind the demo <a href="https://mastodon.social/@anatudor/112242678457752295" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1122</span><span class="invisible">42678457752295</span></a></p>
Ana Tudor 🐯<p>You can find all demos made for &amp; mentioned in the article gathered up in this <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> collection <a href="https://codepen.io/collection/yyNzVe" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">codepen.io/collection/yyNzVe</span><span class="invisible"></span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!</p><p>Consider this problem: you are given 2 hex codes + a number of steps. How would you code a step gradient? Think about it, then see my solution <a href="https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">frontendmasters.com/blog/step-</span><span class="invisible">gradients-with-a-given-number-of-steps/</span></a></p><p>Hope you enjoy, a lot of work went into it.</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a></p>
Ana Tudor 🐯<p>Please tell me if I'm hallucinating or is this the WTAF of the day: do the two rectangles look the same for you in Chromium browsers or does the first have thicker and more faded lines (screen 1)?</p><p>They look the same in Firefox and Epiphany for me (screen 2).</p><p><a href="https://codepen.io/thebabydino/pen/gbpymQq" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/gbp</span><span class="invisible">ymQq</span></a></p><p>Thank you!</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>Help? 😟</p><p>Stupid <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>layout</span></a> question: why isn't my <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>subgrid</span></a> respected?</p><p><a href="https://codepen.io/thebabydino/pen/xbGeReB" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/xbG</span><span class="invisible">eReB</span></a></p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a></p>
Jon Henshaw<p>After two decades of stagnation with the PNG image standard, it's back with a new version to rival the innovations made by WebP and AVIF.</p><p><a href="https://coywolf.com/news/web-development/new-version-of-png-to-challenge-avif-and-webp-for-image-dominance-on-the-web/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">coywolf.com/news/web-developme</span><span class="invisible">nt/new-version-of-png-to-challenge-avif-and-webp-for-image-dominance-on-the-web/</span></a></p><p><a href="https://henshaw.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a></p>
Ana Tudor 🐯<p>Stupid <a href="https://mastodon.social/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>a11y</span></a> question: is it okay to have this structure?</p><p>I need a filter on the img, but not on the figcaption too, so I can't apply it on the figure.</p><p>Also can't apply it on the img because the img has a mask, which applies *after* filter, but I need it applied *before* <a href="https://bsky.app/profile/anatudor.bsky.social/post/3lmgrfcnbsc2k" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">bsky.app/profile/anatudor.bsky</span><span class="invisible">.social/post/3lmgrfcnbsc2k</span></a></p><p><a href="https://mastodon.social/tags/accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>accessibility</span></a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>html</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a></p>
.:\dGh/:.<p>It grinds my gears when I use a library that is already testing their next major version.</p><p><a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programming</span></a> <a href="https://mastodon.social/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://mastodon.social/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Code</span></a> <a href="https://mastodon.social/tags/Software" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Software</span></a> <a href="https://mastodon.social/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SoftwareDevelopment</span></a> <a href="https://mastodon.social/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://mastodon.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PHP</span></a> <a href="https://mastodon.social/tags/Golang" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Golang</span></a> <a href="https://mastodon.social/tags/Rust" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Rust</span></a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/Backend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Backend</span></a></p>
Ana Tudor 🐯<p>If a grid has `n` columns, it has `n - 1` gaps in between them. Enjoy this interactive <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo illustrating the concept: <a href="https://codepen.io/thebabydino/pen/LEVqOpZ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEV</span><span class="invisible">qOpZ</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a></p>
Ana Tudor 🐯<p>I turn 13 on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> today, so after my most hearted demos (<a href="https://mastodon.social/@anatudor/114499264888606204" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1144</span><span class="invisible">99264888606204</span></a>)... here are 13 of MY personal faves!</p><p>1️⃣ Pure CSS music toy - this one's a really special one for me <a href="https://codepen.io/thebabydino/pen/WNGPjLx" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/WNG</span><span class="invisible">PjLx</span></a><br><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> transforms for the <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a>, CSS variables for the dynamic shading.</p><p>The how 😼 <a href="https://www.youtube.com/watch?v=_CV364uqP3U" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">youtube.com/watch?v=_CV364uqP3U</span><span class="invisible"></span></a></p><p><a href="https://mastodon.social/tags/css3d" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>css3d</span></a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>transform</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>1️⃣3️⃣ 480 ❤️ Pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 1 element <a href="https://mastodon.social/tags/rainbow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rainbow</span></a> 🌈 spinner 2017 <a href="https://codepen.io/thebabydino/pen/YNjrRo" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/YNj</span><span class="invisible">rRo</span></a> - 1st remake of a thing I first coded in 2013.</p><p>I've since made 2 more versions with more modern (and better!) CSS:</p><p>2023 <a href="https://codepen.io/thebabydino/pen/poGyEyg" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/poG</span><span class="invisible">yEyg</span></a><br>2019 <a href="https://codepen.io/thebabydino/pen/exwyby" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/exw</span><span class="invisible">yby</span></a></p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>In general, we can vary any of the four RGBA channels from 0% to 100% along the gradient line while keeping the other three fixed (custom chosen, but having that same custom value everywhere along the gradient line).</p><p>Interactive demo on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/full/ByNVrKL" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/full/By</span><span class="invisible">NVrKL</span></a></p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JS</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a></p>
Ana Tudor 🐯<p>So what else could we do? Use an SVG filter!✨</p><p>Set the <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> gradient as one with two end stops and no steps and apply a super simple <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> (same idea as here <a href="https://mastodon.social/@anatudor/114703583973454917" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mastodon.social/@anatudor/1147</span><span class="invisible">03583973454917</span></a> ) that makes it stepped.</p><p>Works for all gradient types - see this <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pen/raVrZQN" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/raV</span><span class="invisible">rZQN</span></a> 😼</p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a></p>
Ana Tudor 🐯<p>Using CSS variables solves both these problems, but we cannot use <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> variables inside the <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> `mix()` function, we have to use the CSS `color-mix()`. This means the compiled output looks way uglier.</p><p>You can check it out in this <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo <a href="https://codepen.io/thebabydino/pres/bNdjKwJ" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pres/bN</span><span class="invisible">djKwJ</span></a></p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a></p>
TrendingLive feeds
About