alcinnz
alcinnz boosted
Martin Owens :inkscape:
@doctormo@floss.social  ·  activity timestamp last month

Apparently there are no good #gcc tools to find unnecessary header includes in #CPP while using ninja/cmake (and NOTE not being the author of the build system)

...

A lot of you guys are #programmers what's the right tool here?

I don't need something that complains about every external include not found, just local symbols without having to recompile everything.

EDIT: Good Answers everyone!

#code #codeQuality

alcinnz
alcinnz boosted
David August
@davidaugust@mastodon.online  ·  activity timestamp 6 days ago

I know I'm late to the party on this, but when people say "headless CMS" do they kinda mean the database part of the "database publishing" of 20 years ago?

Like it is storing content separately from the HTML/CSS or app interface so one doesn't have to munge that stuff when making content, or munge content when making a site or app or something, right?

Or is there some new magic in "headless CMS" I'm missing?

#code #webdev#HeadlessCMS
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 2 weeks ago

2️⃣ feColorMatrix: swap channels ☆ interactive demo, adaptive layout - check it out on @codepenhttps://codepen.io/thebabydino/full/QWopRMK

An interactive, responsive demo illustrating how feColorMatrix can be used to swap channels. Another very special one.

#SVG #filter #svgFilter#JS #interactive #javascript #code #coding #frontend#CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo https://mastodon.social/@anatudor/112242678457752295

Demo illustrating the feColorMatrix used to swap two individual RGB channels. Offers multiple comparison and test image options. Viewport adaptive.
Demo illustrating the feColorMatrix used to swap two individual RGB channels. Offers multiple comparison and test image options. Viewport adaptive.
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 3 weeks ago

I wrote a new article for Frontend Masters: Step Gradients with a Given Number of Steps!

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 https://frontendmasters.com/blog/step-gradients-with-a-given-number-of-steps/

Hope you enjoy, a lot of work went into it.

#CSS#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 3 weeks ago

Using CSS variables solves both these problems, but we cannot use #CSS variables inside the #Sass mix() function, we have to use the CSS color-mix(). This means the compiled output looks way uglier.

You can check it out in this @codepen demo https://codepen.io/thebabydino/pres/bNdjKwJ

#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment #cssVariables

``` @use 'sass:math'; // $n: number to round to a certain precision // $p: rounding precision, how many decimals to keep @function round-to($n, $p: 2) { @return round($n*math.pow(10, $p))*math.pow(10, -$p) } // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops @for $i from 0 to $n { $l: $l, if($i > 0, if($i < $n - 1, color-mix(in srgb, $c1 round-to($i*100%/($n - 1), $p), $c0), $c1), $c0) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round-to(($i + 1)*100%/$n, $p), unquote('')) } @return $l } p { background: linear-gradient(90deg, stop-list(var(--c0), var(--c1), 10)) } ``` ``` p { background: linear-gradient(90deg, var(--c0) 10%, color-mix(in srgb, var(--c1) 11.11%, var(--c0)) 0 20%, color-mix(in srgb, var(--c1) 22.22%, var(--c0)) 0 30%, color-mix(in srgb, var(--c1) 33.33%, var(--c0)) 0 40%, color-mix(in srgb, var(--c1) 44.44%, var(--c0)) 0 50%, color-mix(in srgb, var(--c1) 55.56%, var(--c0)) 0 60%, color-mix(in srgb, var(--c1) 66.67%, var(--c0)) 0 70%, color-mix(in srgb, var(--c1) 77.78%, var(--c0)) 0 80%, color-mix(in srgb, var(--c1) 88.89%, var(--c0)) 0 90%, var(--c1) 0) } ```
``` @use 'sass:math'; // $n: number to round to a certain precision // $p: rounding precision, how many decimals to keep @function round-to($n, $p: 2) { @return round($n*math.pow(10, $p))*math.pow(10, -$p) } // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops @for $i from 0 to $n { $l: $l, if($i > 0, if($i < $n - 1, color-mix(in srgb, $c1 round-to($i*100%/($n - 1), $p), $c0), $c1), $c0) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round-to(($i + 1)*100%/$n, $p), unquote('')) } @return $l } p { background: linear-gradient(90deg, stop-list(var(--c0), var(--c1), 10)) } ``` ``` p { background: linear-gradient(90deg, var(--c0) 10%, color-mix(in srgb, var(--c1) 11.11%, var(--c0)) 0 20%, color-mix(in srgb, var(--c1) 22.22%, var(--c0)) 0 30%, color-mix(in srgb, var(--c1) 33.33%, var(--c0)) 0 40%, color-mix(in srgb, var(--c1) 44.44%, var(--c0)) 0 50%, color-mix(in srgb, var(--c1) 55.56%, var(--c0)) 0 60%, color-mix(in srgb, var(--c1) 66.67%, var(--c0)) 0 70%, color-mix(in srgb, var(--c1) 77.78%, var(--c0)) 0 80%, color-mix(in srgb, var(--c1) 88.89%, var(--c0)) 0 90%, var(--c1) 0) } ```
``` @use 'sass:math'; // $n: number to round to a certain precision // $p: rounding precision, how many decimals to keep @function round-to($n, $p: 2) { @return round($n*math.pow(10, $p))*math.pow(10, -$p) } // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops @for $i from 0 to $n { $l: $l, if($i > 0, if($i < $n - 1, color-mix(in srgb, $c1 round-to($i*100%/($n - 1), $p), $c0), $c1), $c0) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round-to(($i + 1)*100%/$n, $p), unquote('')) } @return $l } p { background: linear-gradient(90deg, stop-list(var(--c0), var(--c1), 10)) } ``` ``` p { background: linear-gradient(90deg, var(--c0) 10%, color-mix(in srgb, var(--c1) 11.11%, var(--c0)) 0 20%, color-mix(in srgb, var(--c1) 22.22%, var(--c0)) 0 30%, color-mix(in srgb, var(--c1) 33.33%, var(--c0)) 0 40%, color-mix(in srgb, var(--c1) 44.44%, var(--c0)) 0 50%, color-mix(in srgb, var(--c1) 55.56%, var(--c0)) 0 60%, color-mix(in srgb, var(--c1) 66.67%, var(--c0)) 0 70%, color-mix(in srgb, var(--c1) 77.78%, var(--c0)) 0 80%, color-mix(in srgb, var(--c1) 88.89%, var(--c0)) 0 90%, var(--c1) 0) } ```
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 3 weeks ago

Given the end steps (00272b & e0ff4f) + a number n of steps, create a gradient with n equal & equidistant steps.

Generating them in a #Sass loop is always an option, but every gradient with different end steps gets its own long stop list & modifying an end step in DevTools doesn't change ALL steps. 🥴

You can see it in the live demo https://codepen.io/thebabydino/pen/xbxeyOM

#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

sass-mix-with-hex.scss file: ``` @use 'sass:math'; // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops, initially empty @for $i from 0 to $n { $l: $l, mix($c1, $c0, $i*100%/($n - 1)) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round(($i + 1)*100%/$n*math.pow(10, $p))*math.pow(10, -$p), unquote('')) } @return $l } .step { background: linear-gradient(90deg, stop-list(#00272b, #e0ff4f, 10)) } ``` Compiled sass-mix-with-hex.css file: ``` .step { background: linear-gradient(90deg, #00272b 10%, #193f2f 0 20%, #325833 0 30%, #4b6f36 0 40%, #64873b 0 50%, #7c9f3f 0 60%, #95b743 0 70%, #aecf47 0 80%, #c7e74b 0 90%, #e0ff4f 0) } ```
sass-mix-with-hex.scss file: ``` @use 'sass:math'; // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops, initially empty @for $i from 0 to $n { $l: $l, mix($c1, $c0, $i*100%/($n - 1)) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round(($i + 1)*100%/$n*math.pow(10, $p))*math.pow(10, -$p), unquote('')) } @return $l } .step { background: linear-gradient(90deg, stop-list(#00272b, #e0ff4f, 10)) } ``` Compiled sass-mix-with-hex.css file: ``` .step { background: linear-gradient(90deg, #00272b 10%, #193f2f 0 20%, #325833 0 30%, #4b6f36 0 40%, #64873b 0 50%, #7c9f3f 0 60%, #95b743 0 70%, #aecf47 0 80%, #c7e74b 0 90%, #e0ff4f 0) } ```
sass-mix-with-hex.scss file: ``` @use 'sass:math'; // $c0: gradient start // $c1: gradient end // $n: number of steps // $p: rounding precision, how many decimals to keep @function stop-list($c0, $c1, $n, $p: 2) { $l: (); // list of stops, initially empty @for $i from 0 to $n { $l: $l, mix($c1, $c0, $i*100%/($n - 1)) // 1st stop position for each stop // not set (empty '') for very first stop if($i > 0, 0, unquote('')) // 2nd stop position for each stop // not set (empty '') for very last stop if($i < $n - 1, round(($i + 1)*100%/$n*math.pow(10, $p))*math.pow(10, -$p), unquote('')) } @return $l } .step { background: linear-gradient(90deg, stop-list(#00272b, #e0ff4f, 10)) } ``` Compiled sass-mix-with-hex.css file: ``` .step { background: linear-gradient(90deg, #00272b 10%, #193f2f 0 20%, #325833 0 30%, #4b6f36 0 40%, #64873b 0 50%, #7c9f3f 0 60%, #95b743 0 70%, #aecf47 0 80%, #c7e74b 0 90%, #e0ff4f 0) } ```
alexandra
@xandra@tilde.zone  ·  activity timestamp 2 months ago

this is it -- GOOD INTERNET magazine is LIVE, BABY~ 🥂 🎊 🥳

https://goodinternetmagazine.com/
https://goodinternetmagazine.com/
https://goodinternetmagazine.com/

i present the spring 2025 issue of GOOD INTERNET, featuring stories by @binarydigit, @internetarchive, @Leilukin, @greg, @surprisetalk, and SO MUCH MORE!

with only 6.5 hours to go before my surgery, the website is now launched! you can order physical or digital copies of the magazine! 😊 there are some initial stories on the website now, but more are coming over the next week, so keep an eye on your RSS feeds!!

‼️quick note: pre-ordered print editions will begin shipping out this week (!!!) and digital editions will go out this week as well to emails!

🙏 THANK YOU SO MUCH to EVERYONE who helped with this. thank you to the contributors (like @robb/ @echofeed, & @adam/ @omgdotlol). thank you to the writers, thank you to everyone who thought about this project, shared it with others, and got the word out. i am so so so stoked to bring y'all this.

🕛 issue 2 is in the fall! 😊 get your submission ideas in!!

#html #css #web #indieweb#smallweb #socialmedia #internet #enshittification #website #webdev #webdesign #neocities #indie #zine #coding #code #personalweb #blog #blogging