feedle
@feedle@mastodon.social  ·  activity timestamp yesterday

🔁 From our "Digital Crossroads" collection:

Using TikTok could be making you more politically polarized, new study finds - https://theconversation.com/using-tiktok-could-be-making-you-more-politically-polarized-new-study-finds-258791?ref=feedle.world

---
See other stories like this one here: https://feedle.world/digital-crossroads

#web #internet #socialmedia #blogging
feedle
@feedle@mastodon.social  ·  activity timestamp yesterday

🔁 From our "Digital Crossroads" collection:

New US Visa Rule Requires Applicants To Set Social Media Accounts to ‘Public’ - https://www.tokyoweekender.com/japan-life/news-and-opinion/new-us-visa-rule-requires-social-media-accounts-to-be-public/?ref=feedle.world

---
See other stories like this one here: https://feedle.world/digital-crossroads

#web #internet #socialmedia #blogging
Daniel
@puresick@social.hnnng.space  ·  activity timestamp 2 days ago

It's kind of astonishing and sad at the same time how much money all the big AI companies earn but how bad parts of their UIs are.

A few quick example from the top of my head:

The Claude web UI for example takes multiple seconds to load.
For a simple input interface.

Mistral uses checkboxes for their libraries which are styled like radio buttons. Basic UX mistake.

Are they vibe coding all their frontend code or what?

#ai #llm #claude #mistral #ui #ux #web #design
Ana Tudor 🐯
@anatudor@mastodon.social  ·  activity timestamp 3 days 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 days 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) } ```
Jon S. von Tetzchner
@jon@social.vivaldi.net  ·  activity timestamp 4 days ago

I was on a new podcast called WTF Now. My episode is called How the internet went wrong. Sad title, but you will understand when you listen.

This is really back to my strong belief that we need regulation when it comes to user profiling. IMHO it should just be banned. Have a listen and let me know what you think!

#Vivaldi#Browser#AI#SurveillanceCapitalism#Meta#Politics #internet#Web

https://www.youtube.com/watch?v=NxvqCwu2cI0