#f00 — Public Fediverse posts

@CmykStudent No, there's no odd behaviour like that. Just that the cross doesn't honour CSS colours and is bigger.

If I use the GTK Inspector and add the rule `.close.titlebutton image { color: #f00 }` then the colour changes in Geany and other apps but not Gimp.

"Red" #f00

"Red" #f00

Estas fotos son de la primera vez que me subí en un Talgo Avril. Un avlo desde Santiago hasta Coruña que convirtió la media hora de trayecto en eterna.

Lo de que hace ruido no es una sugestión, me lo pareció en ese momento antes de ni siquiera saber de qué iba ese tren.

Las imágenes:
1. Nada más subir la pantalla no mostraba las teselas del mapa
2. Detalle del horrible diseño. Los colores (#000, #F00, #0F0 y #00F) no ayudan. Tampoco lo hacen las teselas genéricas de OSM, buenas para otras cosas, feas aquí, ni el texto que está todo el rato deslizándose por debajo
3. Recuerda, en caso de emergencia sigue las instrucciones de seguridad
4. Más texto deslizándose horrible

Estas fotos son de la primera vez que me subí en un Talgo Avril. Un avlo desde Santiago hasta Coruña que convirtió la media hora de trayecto en eterna.

Lo de que hace ruido no es una sugestión, me lo pareció en ese momento antes de ni siquiera saber de qué iba ese tren.

Las imágenes:
1. Nada más subir la pantalla no mostraba las teselas del mapa
2. Detalle del horrible diseño. Los colores (#000, #F00, #0F0 y #00F) no ayudan. Tampoco lo hacen las teselas genéricas de OSM, buenas para otras cosas, feas aquí, ni el texto que está todo el rato deslizándose por debajo
3. Recuerda, en caso de emergencia sigue las instrucciones de seguridad
4. Más texto deslizándose horrible

Estas fotos son de la primera vez que me subí en un Talgo Avril. Un avlo desde Santiago hasta Coruña que convirtió la media hora de trayecto en eterna.

Lo de que hace ruido no es una sugestión, me lo pareció en ese momento antes de ni siquiera saber de qué iba ese tren.

Las imágenes:
1. Nada más subir la pantalla no mostraba las teselas del mapa
2. Detalle del horrible diseño. Los colores (#000, #F00, #0F0 y #00F) no ayudan. Tampoco lo hacen las teselas genéricas de OSM, buenas para otras cosas, feas aquí, ni el texto que está todo el rato deslizándose por debajo
3. Recuerda, en caso de emergencia sigue las instrucciones de seguridad
4. Más texto deslizándose horrible

Estas fotos son de la primera vez que me subí en un Talgo Avril. Un avlo desde Santiago hasta Coruña que convirtió la media hora de trayecto en eterna.

Lo de que hace ruido no es una sugestión, me lo pareció en ese momento antes de ni siquiera saber de qué iba ese tren.

Las imágenes:
1. Nada más subir la pantalla no mostraba las teselas del mapa
2. Detalle del horrible diseño. Los colores (#000, #F00, #0F0 y #00F) no ayudan. Tampoco lo hacen las teselas genéricas de OSM, buenas para otras cosas, feas aquí, ni el texto que está todo el rato deslizándose por debajo
3. Recuerda, en caso de emergencia sigue las instrucciones de seguridad
4. Más texto deslizándose horrible

Estas fotos son de la primera vez que me subí en un Talgo Avril. Un avlo desde Santiago hasta Coruña que convirtió la media hora de trayecto en eterna.

Lo de que hace ruido no es una sugestión, me lo pareció en ese momento antes de ni siquiera saber de qué iba ese tren.

Las imágenes:
1. Nada más subir la pantalla no mostraba las teselas del mapa
2. Detalle del horrible diseño. Los colores (#000, #F00, #0F0 y #00F) no ayudan. Tampoco lo hacen las teselas genéricas de OSM, buenas para otras cosas, feas aquí, ni el texto que está todo el rato deslizándose por debajo
3. Recuerda, en caso de emergencia sigue las instrucciones de seguridad
4. Más texto deslizándose horrible

@xero nice code!

I see you're actually calculating things rather than rendering them with a browser (see nf.color2hex in nofus.js, which I use mostly for userscripts). I assume your way is significantly faster.

Given your goal of minification, do you want red to gain a byte with #f00? I see transparent maps to rgba(0,0,0,0) but it could be #0000.

Idea for you: a configurable maximum distance (default=0) per color channel to permit rounding, e.g. 4 means #ff362f becomes #f33 since 0x33 is within 4 of both 0x36 and 0x2f.

(I suppose it'd be better to use the sum of differences or some more sophisticated combination, perhaps keyed to a percent, but that's a dangerous rabbithole of researching color perception (e g. OKLCH). Determining a sane thresholding system and ideal values won't be easy.)

"Red" #f00

@troy_s

So from the rough example math in the previous, with #f00, the L cone is receiving 3.5 times more than M.

With the grey, L receives 1.33 times more than M (L cones are more populous).

With the grey, the ganglion cells are switched to where the signal is sent to light/dark.

With the red #f00, the L gets 26% more luminance than the grey, and also L is not really competing with M as here, L is getting 71% more than M.

Point: there are clearly a number of places where the physiology favors a vibrant red vs a grey of same luminance.

@troy_s

Okay, so in the normal eye, there are more L cones than any other. Stim the L cones only, with the L cones making up the majority of the luminance signal (with L cone peak being a greenish yellow).

And meanwhile the S cones are not contributors to the luminance channel (any luminance from the display blue primary is due to the stim of the M and L cones).

The sRGB red primary creates about 21% luminance.

The first image is a neutral grey of 21% luminance #868686 against #f00 .(equal Ys, 0 C vs red 104 C)

The second image is #f00 v #860000 (Lc25)

The third is #009494 vs #f00
(equal Ys — 33 C v 104 C)

The 4th is #d11 v #06f
(equal Ys & equal chroma)

Note: Ys is "screen luminance"

----
Some very rough calcs:

#f00 mostly stims L cone to Ys=21.3%

#868686, the values are
R Ys= 4.5
G Ys=15.3
B Ys= 1.5

So #f00
L 16.6%
M 4.7%
L gets 3.5 x more than M

#868686
R
L cone 3.5%
M gets 1.0%,

G & B
Remaining 16.8%:
L 9.7%
M 8.9%
=
L for the Grey 13.2%
M for the Grey 9.9%

L 1.33 more than M

Huh! Did you know, it's possible to style highlighted text fragments?

For example:

example.com#:~:text=hello

The word "hello" can be highlighted with:

`::target-text{ background:#f00; }`

https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Fragment/Text_fragments#styling_matched_text_fragments

@anatudor @codepen

Here is a fix to poor text selection color with the filter trick:

```css
/* inner span helps fix background-letter overlap */
span { isolation: isolate; }

::selection {
background: #0ff;
color: #f00;
}
```

古くから色変数をr,g,bに分けて定義し、

color: rgba(var(--r), var(--g), var(--b), 1);

I can set the start position of a CSS `linear-gradient` with an angle, a starting position & direction, or a rotation from 0,0.

Is there a logical property value to set the start position / edge instead?

Like `inset-inline-start` to start from the left in LTR languages but from the right in RTL langs?

I want:

```
background:
linear-gradient(
inset-inline-start,
transparent 0%,
transparent calc(100% - 0.1em),
#f00 calc(100% - 0.1em),
#f00 100%
);

```

#CSS #i18n

@khalidabuhakmeh @sarajw with Sass, you can extend CSS classes like:
```scss
.error {
border: 1px #f00;
background-color: #fdd;

&--serious {
@extend .error;
border-width: 3px;
}
}
```
https://sass-lang.com/documentation/at-rules/extend/

Which sorta seems like what you are looking for, but yeah as @sarajw mentioned - the CSS results in something like this:

```
.error, .error--serious {
// same styles in both classes
}

.error-serious {
// class specific
}
```

@nilsbinder Absolutely! Looking forward to it! :-)

(Also, small easter egg with your colors: I like to pronounce them as words, so #f00 is "foo". So #f09 is "fog" and #90f is "gof". And if you would excuse my inner 10-year old, the colors combined are "fog gof" :D)

アイコン変わって鍵投稿に気が付かないので適当に色付けた。
.icon-unlock{
color: #999;
}
.icon-lock{
color: #f00;
}
.icon-at{
color: #00f;
}

アイコン変わって鍵投稿に気が付かないので適当に色付けた。
.icon-unlock{
color: #999;
}
.icon-lock{
color: #f00;
}
.icon-at{
color: #00f;
}

Schon länger nichts Neues aus der #Frontend Welt gepostet:

text-wrap: balance und text-wrap: pretty:
- nur in Chrome/Edge ab v117
- balance: bis zu 6 Zeilen ausgewogen verteilen
- pretty: Einzelnes Wort in letzter Absatz-Zeile vermeiden
https://bleech.de/en/blog/the-ups-and-downs-of-text-wrap-balance-and-a-polyfill/

light-dark() – Funktion für Farben im Light-/Dark-Mode ohne extra Weiche: color: light-dark(#f00, #0f0);
- color-scheme-Angabe wird berücksichtigt und ist min. auf Root-Ebene 1x nötig
- bisher nur FF ab v120
https://www.bram.us/2023/10/09/the-future-of-css-easy-light-dark-mode-color-switching-with-light-dark/

@rgadellaa Try `color(from #f00 display-p3 r g b)`

https://drafts.csswg.org/css-color-5/#funcdef-color

@jensimmons quick question, I'm trying to do relative css syntax with display-p3 but running into some issues w/Safari.

As I understand, I need to use color() fn to define a p3 color:
`color( display-p3 0 0 0 )`

So if I want to make that relative, that would become:
`color( display-p3 from #f00 r g b )`

but Safari doesn't seem to support color() fn with relative syntax:
`CSS.supports('color: color( display-p3 from #f00 r g b );')`
> `false`

Am I messing up the syntax?

@templatemaker Out of curiosity, have you considered a setting (via a cookie or localstorage or something) that would customize the color of the cut and fold lines? I've been using K40Whisperer to laser cut them, but I always need to manually recolor to match its specifications of #F00 for vector cut and #00F for vector engrave (fold).

@templatemaker Out of curiosity, have you considered a setting (via a cookie or localstorage or something) that would customize the color of the cut and fold lines? I've been using K40Whisperer to laser cut them, but I always need to manually recolor to match its specifications of #F00 for vector cut and #00F for vector engrave (fold).

@templatemaker Out of curiosity, have you considered a setting (via a cookie or localstorage or something) that would customize the color of the cut and fold lines? I've been using K40Whisperer to laser cut them, but I always need to manually recolor to match its specifications of #F00 for vector cut and #00F for vector engrave (fold).

@templatemaker Out of curiosity, have you considered a setting (via a cookie or localstorage or something) that would customize the color of the cut and fold lines? I've been using K40Whisperer to laser cut them, but I always need to manually recolor to match its specifications of #F00 for vector cut and #00F for vector engrave (fold).

@templatemaker Out of curiosity, have you considered a setting (via a cookie or localstorage or something) that would customize the color of the cut and fold lines? I've been using K40Whisperer to laser cut them, but I always need to manually recolor to match its specifications of #F00 for vector cut and #00F for vector engrave (fold).

How to check something isn't an email address?
https://shkspr.mobi/blog/2023/09/how-to-check-something-isnt-an-email-address/

In web-development circles, it is a well-known fact that trying to validate an email using a regular expression is… complex.

The full set of modern email standards allows for such wonderful addresses as:chief.o'brien+ds9@spásárthach.भारत

So determining whether or not your user has entered a valid email address becomes an ever-increasing challenge.

But what if you have the opposite issue? Suppose you have a form which takes something which mustn't be an email address?

For example - imagine you have a login form which requires a username. And yet your stupid users keep entering their email addresses instead! How can you quickly, cheaply, and simply detect email addresses?

Well, no matter whatever else is in an email address, there will always be an @ somewhere. The @ is necessary but not sufficient for an email address.

So you can use HTML5's pattern attribute.

Here it is in action:

<input type="text"        pattern="^[^@]+$">

That says "don't accept anything with the @ symbol in it".

We can take it a bit further and add some more attributes to help our users

<input type="text"        pattern="^[^@]+$"       required       placeholder="Your username (which is NOT your email address)"       title="Don't use your email address!!!!!"       id="notemail">

Try it out!

As soon as you type an @ the form will go into an invalid state and can't be submitted. You won't be able to click the login button.

Should You Use This?

Well… perhaps in a pinch. The real solution is to be agnostic towards your users' choice of login. Some may prefer to use an email, some a username. Some may expect their username to start with an @. Be tolerant of their needs and desires.

https://shkspr.mobi/blog/2023/09/how-to-check-something-isnt-an-email-address/

#0f0 #f00 #HTML5 #notemail

I still need to fix the "next/older" links on https://schizo.social and add "back/newer", but it's been brought to my attention that my favorite color (#f00) is "eye gougey", so maybe adding a theme color setting should be higher on my list of priorities.

What do you think is the next most obviously missing thing in my ugly little #mastodon client?

Among the things I learned today is how to lower opacity of a color that is stored as a CSS variable in hex notation.

body {
--fg-color: #f00;
}

div {
color: #fff;
background-color: color-mix(in srgb, var(--fg-color), transparent 40%) ;
}

#CSS

Fixed a glitch with the brighter palette and added a saturated palette since posting this, for those who care.

I should probably also note that it'll only spit out sets that are relevant to the input colour. #f00 can't get any lighter, darker, or more saturated for example, but can go brighter. #900 on the other hand can go lighter and those swatches will differ to the brighter set.

I'm editing an image containing the french and german flags and its quite funny looking up the colours. The french flag is like "hm, we need a blue, lets take this shade, its kinda nice. Now for red, how about this shade?" while the german flag is "#000, #F00, #FC0, this is our flag, black stripe top or left", which encapsulates stereotypes so well

@florian @khaled So the only way to do *anything* with the current text color is to hardcode it to 0xffff for that glyph in the COLR table, and have the additional colors in the CPAL table. Then from CSS you have to set both colors in a convoluted way: one with `color: #f00` on the element or a parent, and the other through a n`@font-palette-values` and a `font-palette` on the element.

At least, that's how far I got with my tests 😄

chroma.scale(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#f00']).mode('lab').colors(9).slice(0, 8).map(c => [chroma(c).darken(), chroma(c)]).flat()
['#c20000', '#ff0000', '#c7a000', '#ffd100', '#78cb00', '#aeff00', '#00ca32', '#3aff65', '#00cbcc', '#00ffff', '#0030cb', '#485aff', '#7300ca', '#ab00ff', '#c70091', '#ff00c2']

chroma.scale(['#f00', '#ff0', '#0f0', '#0ff', '#00f', '#f0f', '#f00']).mode('lab').colors(9).slice(0, 8).map(c => [chroma(c).darken(), chroma(c)]).flat()
['#c20000', '#ff0000', '#c7a000', '#ffd100', '#78cb00', '#aeff00', '#00ca32', '#3aff65', '#00cbcc', '#00ffff', '#0030cb', '#485aff', '#7300ca', '#ab00ff', '#c70091', '#ff00c2']