clifff @clifff

3 posts3 participants1 post today

**Ana Tudor** @anatudor@mastodon.social · 4h

Ana Tudor @anatudor@mastodon.social

Know how border-image & border-radius don't play nice together?

(interactive https://codepen.io/thebabydino/pen/jxZyed)

#tinyCSStip there's a workaround IF corner radius ≤ border-width: use inset() clip-path + a round value!

clip-path: inset(0 round $r)

@codepen demo: https://codepen.io/thebabydino/pen/qBELJGY?editors=1100

(and yes, this is a tip I first shared on twitter over half a decade ago https://x.com/anatudor/status/1219916121341644807 )

Screenshot showing the interactive demo showing that setting a `border-image` on an element with `border-radius` makes the `border-radius` be ignored.

Screenshot of the solution when the desired corner rounding is not bigger than the border-width:
```
border: solid $r;
border-image: linear-gradient(90deg, purple, orange) 1;
clip-path: inset(0 round $r)
```

#CSS #clipPath #cssClipPath

**Ana Tudor** @anatudor@mastodon.social · 6d

Ana Tudor @anatudor@mastodon.social

Because someone just hearted a 5 year old @codepen demo https://codepen.io/thebabydino/pen/GRooBJm?editors=0100 I made using a #Sass function + looping to generate a #CSS : we don't need *any* Sass for this anymore!

We can now do it with

background:
linear-gradient(in hsl longer hue 90deg,
hsl(0, 95%, 65%) 0 0)

Comparative look at the old Sass code vs. the new and much simpler plain CSS code, both producing the same result (a nice-looking rainbow) shown before both of them.

Old SCSS solution:

```
@function get-rainbow($n: 12, $sat: 90%, $lum: 65%) {
$unit: 360/$n;
$s-list: ();

@for $i from 0 through $n { $s-list: $s-list, hsl($i*$unit, $sat, $lum) }

@return $s-list
}

html { background: linear-gradient(90deg, get-rainbow()) }
```

New plan CSS solution:

```
html {
background:
linear-gradient(in hsl longer hue 90deg, hsl(0, 95%, 65%) 0 0)
}
```

#SCSS #loop #looping

**Alvaro Montoro** @alvaromontoro@front-end.social · 6d

Alvaro Montoro @alvaromontoro@front-end.social

Step 1: Take a previously single-div drawing

Step 2: Copy the code into a custom toggle switch

Step 3: ???

Step 4: Profit

---

Source code on https://codepen.io/alvaromontoro/pen/ZYEXGeB

GIF

#css #html #webdevelopment

**Leanpub** @leanpub@mastodon.social · Mar 7

Mar 7

Leanpub @leanpub@mastodon.social

Game Studio Starter Kit (6 Game Collection) http://leanpub.com/set/leanpub/ugsskitc by Stephen Gose is the featured Track on the Leanpub homepage! https://leanpub.com #ProjectManagement #GameDevelopment #Html #Javascript #WebDevelopment #Education #Diy #gaming #contentcreator

**Fedi.Garden** @FediGarden@social.growyourown.services · Mar 6

Mar 6

Fedi.Garden @FediGarden@social.growyourown.services

Drupal.community is a Mastodon server focused on Drupal, free and open source software and web development, but any content is welcome as long as it adheres to the Drupal Code of Conduct.

https://drupal.community

Find out more at https://drupal.community/about or contact the admin @pcambra

Mastodon hosted on drupal.communityDrupal MastodonMastodon instance focused on the Drupal CMS.

#FeaturedServer #Drupal #WebDev

**Caravana Blues** @caravana@mastodon.social · Mar 6

Mar 6

Caravana Blues @caravana@mastodon.social

Good practices for API design. https://chat-to.dev/post?id=TTkrbGpwS1dmS0Y3eUlOdVFEeGF4dz09&redirect=/new #api #backend #programming #SoftwareDevelopment #WebDevelopment

**PloneConf 2025** @ploneconf@plone.social · Mar 4

Mar 4

PloneConf 2025 @ploneconf@plone.social

Plone Conference 2025 will be held in Jyväskylä, Finland on October 13-19, 2025!

The brightest open source event of the year at the darkest time of the year Stay tuned for more info soon!

#plone #ploneconf2025 #CMS

**Hacker News** @h4ckernews@mastodon.social · Mar 1

Mar 1

Hacker News @h4ckernews@mastodon.social

OpenGL to WASM, learning from my mistakes — https://uds5501.github.io/mindpalace/2025/03/01/opengl-webgl-porting.html
#HackerNews #OpenGL #WASM #learning #mistakes #webdevelopment #gamedev

Uddeshya’s Musings · Mar 1My experiments with WASM and OpenGLIntroduction

Continued thread

**Ana Tudor** @anatudor@mastodon.social · Feb 28 *

Feb 28 *

Ana Tudor @anatudor@mastodon.social

Made a gallery of such #SVG gradient + #filter effects blobs on @codepen
https://codepen.io/thebabydino/full/YPzNWoR

Also includes an explanation of the how behind and interaction: the focal point of the `radialGradient` the blobs start from follows the cursor on hover.

Different blobs for light/ dark mode.

Comparative screenshot of a few of the blobs in both light and dark mode.

$Demo screen with the info section. Each distorted blob starts out as a circle, tightly fit inside its parent svg element (which has its viewBox set so its 0,0 point is dead in the middle). This circle then gets a radialGradient fill. Choosing the SVG radial gradient over the CSS one as it also allows setting focal point coordinates (fx,fy) distinct from cx,cy - hover a blob to see how its focal point follows the cursor. <radialGradient id='g' gradientUnits='objectBoundingBox' fx='.35' fy='.65'> <stop stop-color='var(--c0)'/> <stop stop-color='var(--c1)' offset='.5'/> <stop stop-color='rgba(from var(--c1) r g b/ 0)' offset='1'/> </radialGradient> The circle with the gradient is then blurred, distorted & given a grainy/ dithered look. The last two actions make use of the same concept of altering the input using noise generated by feTurbulence as a displacement map. The displacement used for distortion is relative to input size. The noise used for dithering is finer (larger baseFrequency). <filter id='distort' primitiveUnits='objectBoundingBox' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='.00713'/> <feDisplacementMap in='SourceGraphic' scale='.3' yChannelSelector='R'/> </radialGradient> <filter id='grain' x='-50%' y='-50%' width='200%' height='200%'> <feTurbulence type='fractalNoise' baseFrequency='7.13'/> <feDisplacementMap in='SourceGraphic' scale='32' yChannelSelector='R'/> </radialGradient>$

#svgGradient #cssGradient #blob

**Ana Tudor** @anatudor@mastodon.social · Feb 28

Feb 28

Ana Tudor @anatudor@mastodon.social

Grainy distorted gradient blob: 1 #SVG `radialGradient` (setting a focal point `fx,fy`) vs. multiple #CSS `radial-gradient()` layers (no option to control focal point).

Using filters for distortion & grain effect.

A bit more detail on this https://www.reddit.com/r/css/comments/1j03iyv/comment/mf89ri9/

Comparative result of the SVG radialGradient vs. the CSS radial-gradient() blob.

#svgGradient #cssGradient #blob

**.:\dGh/:.** @darkghosthunter@mastodon.social · Feb 27

Feb 27

.:\dGh/:. @darkghosthunter@mastodon.social

I wonder what PHP would win if the codebase was rewritten entirely in Rust.

My bet? Given the Rust ecosystem, we would be months away of truly async, green threads, non blocking IO, and a complete performant web server implementation.

Cc @thephpf @php @phpfig @phpc

#PHP #Rust #Programming

**DennisL** @dennisl@mastodon.social · Feb 25

Feb 25

DennisL @dennisl@mastodon.social

Moving on from React, a Year Later

"Our server-rendered, JavaScript-light approach has delivered a faster and more reliable experience."

https://kellysutton.com/2025/01/18/moving-on-from-react-a-year-later.html

Kelly Sutton · Jan 18Moving on from React, a Year LaterA retrospective on making the switch from React to StimulusJS at Scholarly

#webdev #webdevelopment #reactJS

**Ana Tudor** @anatudor@mastodon.social · Feb 25

Feb 25

Ana Tudor @anatudor@mastodon.social

Someone asked how to get such an offset grid for any number of items, so here's my take on it https://www.reddit.com/r/css/comments/1ixnjjr/comment/menz0yk/ - define a 2 col grid via grid-template-columns, make all items span 3 rows, then offset down the 2nd item (placed on the second column) by one row to start from the 2nd.

Screenshot showing the result with the grid overlays on top. The DevTools panel is open on the right, showing the CSS for the second item. In case the grid container is at least as wide as the base width for two columns plus the gap between them, then offset this item on the second column by one row down.

#CSS #cssGrid #cssLayout

**Steven Hilton** @mshiltonj@mastodon.online · Feb 24

Feb 24

Steven Hilton @mshiltonj@mastodon.online

The #deno docs are pretty danged good! I love the https://docs.deno.com/examples/ page. Reminds of the old O'Reilly "Cookbook" books with tons of short examples on how to do a specific thing without much fuss. Nice. #programming #webdevelopment #javascript #typescript #ecmascript #development #developers

DenoDeno examples and tutorialsIn-depth documentation, guides, and reference materials for building secure, high-performance JavaScript and TypeScript applications with Deno

**Kattni** @kattni@social.afront.org · Feb 23

Feb 23

Kattni @kattni@social.afront.org

My First Major Open Source Project Contribution - In which I join up with BeeWare and end up with an amazing experience https://kattni.com/my-first-major-open-source-project-contribution #Personal #Programming #OpenSource #Python #WebDevelopment #Learning

kattni.comMy First Major Open Source Project Contribution · kattni:decoded

**Dunc** @dunc@epn.life · Feb 23

Feb 23

Dunc @dunc@epn.life

Introductory post on this new GotoSocial account implemented for $3.75/month hosting from knthost.com

I'm a bit of a grumpy old man who still loves hiking in the mountains and playing about with technology. My Mastodon site details my current mountain adventures whilst this #GotoSocial account will talk about my advances (or otherwise!) with #Linux, #de-Googling, #Reticulum, #LoRa, #OpenSource, #FOSS etc. Also enjoy #webdevelopment using #eleventy #11ty