myfonj (u/myfonj) - Readit News

myfonj commented on CSS Optical Illusions alvaromontoro.com/blog/68... · Posted by u/ulrischa

myfonj · 25 days ago

These "dots appearing only while (not) focused" are known as "extinction illusions", namely

    "25 - Appearing Dots"

is "McAnany's type" [1], and

    "26 - Disappearing Dots"

is known as "Ninio's type" [2], according Akiyoshi Kitaoka's materials. (I have recreated them too few years ago [3][4], before getting to the source.)

[1] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...

[2] https://www.psy.ritsumei.ac.jp/akitaoka/kieru3e.html#:~:text...

[3] https://codepen.io/myf/full/XjdmJy ( scintillation warning)

[4] https://codepen.io/myf/full/jMqoMW ( scintillation warning)

myfonj commented on Show HN: An interactive guide to how browsers work howbrowserswork.com/... · Posted by u/krasun

krasun · a month ago

It is a good one to fix. Thank you!

myfonj · a month ago

The "guesswork" done by browsers is actually pretty nuanced and not standardised in a slightest way. Some defaults are pretty common, and could be maybe considered de-facto standard, but I wouldn't want to draw the line where "most" browsers agree or should agree.

Personally, I have my browser set up to "guess" as little as possible, never do the search from the URL bar unless explicitly told to do so using a dedicated search keyword (plus I still keep separated auto-collapsing search bar). I have disabled all guessing for TLDs, auto prepending www. In short, when I enter "whatever" into my URL bar, my browser tries to load to "http://whatever/", what could be my local domain and I could get an answer -- it is is a valid URL after all. In a related note, I strongly doubt that any browser does the web search for "localhost".

The rabbit hole could naturally go even deeper: for example most browser still interpret top-level dataURIs. It is not that long browsers interpreted top-level `javascript:` URIs entered into URL bar, now surviving in bookmarklets but taken from all users for the sake of a pitiful "self-XSS prevention".

So I would be really careful telling what happens -- or, god forbid, should happen -- when someone types something into their URL bar: "whatever" could be a search keyword with set meaning: - it could be bound to http URL (bookmark), - the bookmark URL could have a `%s` or `%S` and then it would do the substitution, - it could be a `javascript:…` bookmark ("bookmarklet"/"favelet"; yes, most browser still let you do that, yet alas, mostly fail to treat CSP in a way it would remain operational). - It could be a local domain.

The fact that, statistically, "most" browsers will do a web search using some default engine is probably correct but oversimplifying claim that glosses over quite a lot of interesting possibilities.

myfonj commented on Pixnapping Attack pixnapping.com/... · Posted by u/kevcampb

myfonj · 4 months ago

> I am an app developer. How do I protect my users? > We are not aware of mitigation strategies to protect apps against Pixnapping. If you have any insights into mitigations, please let us know and we will update this section.

IDK, I think there are obvious low-hanging attempts [0] such as: do not display secret codes in stable position on screen? Hide it when in background? Move it around to make timing attacks difficult? Change colours and contrast (over time)? Static noise around? Do not show it whole at the time (not necessarily so that user could observe it: just blink parts of it in and out maybe)? Admittedly, all of this will harm UX more or less, but in naïve theory should significantly raise demands for the attacker.

[0] Provided the target of the secret stealing is not in fact some system static raster snapshot containing the secret, cached for task switcher or something like that.

myfonj commented on gsay: Fetch pronunciation of English vocabulary from Google github.com/pvonmoradi/gsa... · Posted by u/pooyamo

IAmBroom · 4 months ago

Dubiously, I clicked. Yeah, I could listen to her read the dictionary as I waft off to sleep...

myfonj · 4 months ago

Ha ha, really glad to hear that. (The fact is, I am kinda freak/junkie about human voices, and that particular one stands really high on my list of irresistible tingles-inducing specimens. So happy to hear I am not alone.)

myfonj commented on gsay: Fetch pronunciation of English vocabulary from Google github.com/pvonmoradi/gsa... · Posted by u/pooyamo

myfonj · 4 months ago

I've made something (probably) very similar for quick GB vs US pronunciation check that also leeches on Google's snapshot of what I believe is a licensed copy of the Oxford collection the same way the shell script does, but mine "runs in browser's URL bar" instead. It's a super tiny dataURI HTML document, intended to be bookmarked with a keyword (say, "say"):

    data:text/html;charset=utf-8,<title>US-GB pronunciation 2.0.2</title><body onload=x='https://ssl.gstatic.com/dictionary/static/sounds/20160317/' text=snow bgcolor=black><button onfocus=click() onclick=a.src=x+i.value+'--_us_1.mp3';a.play()>US</button><input id=i placeholder=(shift+)tab value="%s"><button onfocus=click() onclick=a.src=x+i.value+'--_gb_1.mp3';a.play()>GB</button><audio id=a onplay=i.focus()></audio>

so when I do

    Alt+D, "say something", Enter

then hitting Tab plays it in British and Shift+Tab plays it in US English. It uses older 2016 batch, because I totally adore the US voice in it: just listen to "music" [1] and tell it isn't pure ASMR.

(I'm afraid it just a matter of time they will prevent our mischief, though.)

[0] oxfordlearnersdictionaries.com uses the same collection. [1] https://ssl.gstatic.com/dictionary/static/sounds/20160317/mu...

myfonj commented on The least amount of CSS for a decent looking site (2023) thecascade.dev/article/le... · Posted by u/loughnane

SquareWheel · 4 months ago

> While this is really handy, it is a best practice to allow users to manually toggle the color-scheme as well. Some people prefer a dark system theme, but light website themes, and vice-versa.

It can make sense for a theme selector that works on the server, since you can serve specific HTML when building the page. However, if using a JavaScript-based solution that fetches the theme preference from localStorage, I find this almost always results in a "flashbang" in dark mode, as the retrieval is slower than the first browser paint.

I've been implementing (and recommending) pure CSS-based theming to avoid this problem. Users seem much happier with them, and I haven't heard anybody ask for a theme switcher. We just respect their existing preference. However, I can see this being a problem if you offer multiple color schemes (beyond just light and dark).

I'd be curious to know if anybody has found a way to avoid this issue with JS switchers -- ideally without needing to delay the initial paint.

I do think an interesting approach would be a browser extension that lets you override the prefers-color-scheme property on a per-domain basis, similar to the toggle in dev tools.

myfonj · 4 months ago

> I do think an interesting approach would be a browser extension that lets you override the prefers-color-scheme property on a per-domain basis, similar to the toggle in dev tools.

Presumably, most users wanting flashbang-less browsing experience use Dark Reader extension or similarly radical solutions.

The sad truth is that the user preferences and per-site persistence for stuff like this should always have been browser's responsibility to begin with: just the same way like the font-size/page zoom already is, and likewise some (blatantly limited) security settings. (Bitterly) amusing fact is that there was (and still is) concept of "alternate stylesheets" from the beginning of CSS (still part of the spec [0], no support outside Gecko), that also fade into obsolescence for it's lack of persistence. So to this days, Firefox, for example, has View → Page Style menu, where user can choose alternate stylesheet but the choice is not preserved across navigations, so is pretty useless on its own.

Similarly userstyles: specifications dictate there is like CSS origin level and how they should behave and that all "user agents" are supposed to give user a way to enter the cascade this way, but does not give any official way how to scope individual recipes to concrete origins. That's what the unofficial `@-moz-document` extension was that, and briefly had a chance to be formalised [1]. But I digress.

(Likewise all the "European" cookies banners: tragic example of regulation applied on the wrong level. Instead of putting users in charge with help of their "user agents": implicitly blocking pretty much everything and using permissions system that actually would have a chance to be more than "pinky promise we will not track you if you don't click this toggle inside our banner". But I digress even more, sorry.)

> I'd be curious to know if anybody has found a way to avoid this issue with JS switchers -- ideally without needing to delay the initial paint.

At this point, when browsers do not support per-site user preference for that natively, pragmatic (most robust) way would be to respond with properly set HTML payload straight away. There is even specified HTTP header for this, so once adopted in browsers, we could even ditch HTTP cookies [2] for the persistence, but it seems quite demanding on the server (IIUC negotiating these "Client Hints" takes extra initial request round-trip).

Pragmatically, I guess having early running JS in the HEAD that ensures the proper color-scheme is set on the root not and only proper stylesheets load should pretty much prevent most flashbangs, provided the relevant bit would arrive early enough from the server. I think there does not exist any good no-JS-no-Cookie (or any JS-less persistence) solution that supports navigations, sadly.

[0] https://html.spec.whatwg.org/multipage/links.html#rel-altern...

[1] https://www.w3.org/TR/2012/WD-css3-conditional-20121213/#cha...

[2] https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/...

myfonj commented on Modern Font Stacks modernfontstacks.com/... · Posted by u/surprisetalk

hu3 · 4 months ago

> Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable.

Does this nuke icon fonts? I presume yes.

myfonj · 4 months ago

Good question! Actually (to my minor dismay): not completely. Disabling "font support" in Firefox surprisingly still has a hatch for "well-known" icon fonts, with intention to prevent "blind" icons in webpages. I believe it is driven by the pref

    browser.display.use_document_fonts.icon_font_allowlist

that contains "FontAwesome" and (Google) Material Icons and Symbols (many, presumably all, variants). So to truly disable all "non-preferred" fonts, we have to both wipe that pref and also change for the

    browser.display.use_document_fonts

to zero. But that's what the GUI checkbox controls, so no need to go to about:config for this one.

myfonj commented on Modern Font Stacks modernfontstacks.com/... · Posted by u/surprisetalk

reaperducer · 4 months ago

they just throw a bunch of common typeface names at the wall and they can't even tell what sticks because it's so random.

Anytime someone on HN doesn't understand CSS, they throw up their hands and call it random. Just because you don't understand what's happening doesn't mean it's random.

I don't understand the SAM76 programming language, but I don't pretend that

  !%ii,*,1,1,!%mu,*,%F,%su,*,1//////////=

is "random."

the user might have a prefered fallback font set that they prefer over any of the ones in the font stack

Great! Then the user gets his preferred font, as requested, instead of the one the page specified. Sounds like a win, so I'm not sure what you're complaining about. I expect you'd also complain if the web page overrode the user's choice.

I disagree with the notion that common browser configuration options available for users to change through the main/general browser settings UI would in any way be esoteric.

Of the six billion or so people on the web, the number of people manually overriding fonts isn't even a rounding error. It's not even a rounding error's rounding error. Get out of the tech bubble.

myfonj · 4 months ago

> Great! Then the user gets his preferred font, as requested, instead of the one the page specified.

No. You've misread the main point. The user would have gotten his preferred font if the font stack was either just plain

    font-family: monospace;

or

    font-family: <list of fonts their system does *not* support or does *not* allow to be used>, monospace;

. But the case is that the suggested font stack contains some "unwanted" font that their system both supports and allows to be used, that precedes the generic `monospace` font family the user actually prefers, or, more precisely, have assigned their typeface to. Is it more clear now?

I agree it is not a huge "bug" on the first sight, and as it seems even this is somewhat solvable without disabling font support completely. But since it takes some effort and expertise on the user's side, it adds the "bug" some weight nonetheless.

myfonj commented on Modern Font Stacks modernfontstacks.com/... · Posted by u/surprisetalk

tln · 4 months ago

I don't think web pages should stay away from font stacks just to handle people with changed esoteric browser prefs. If you as a user want to see different fonts everywhere, you'll need invasive tools that block font face etc. Or Firefox (where this message comes from) has a setting to "Allow pages to choose their own fonts, instead of your selections above"

myfonj · 4 months ago

> esoteric browser prefs

That hurts. I see where you are standing, and can confirm you expressed opinion of the contemporary majority of browser users, but man, how sad it that. The attitude diverged by a light years, when "Setting preferred fonts for generic font families" is now "esoteric". (Web) browsers ("user agents") came to existence with these capabilities in mind, and even now are build around the principle of "preferences reconciliation" between defaults, author and user (as opposed to simple "display what author dictates"). And default font choice is probably the very first aspect it ever had to handle.

(Or were you referring to some other "pref"?)

myfonj commented on Modern Font Stacks modernfontstacks.com/... · Posted by u/surprisetalk

krono · 4 months ago

An example of something to keep in mind with this technique is that you might actually end up causing the browser to render a different font than either you or the user intended.

For a practical example:

Environment

  - Latest Firefox on Windows 10.
  - Manually installed fonts 'Cascadia Code' and 'JetBrains Mono NL'.
  - Firefox default 'monospace' font set to 'JetBrains Mono NL'.

Setting `font-family: monospace;` would end up rendering 'JetBrains Mono NL' - the user-configured default monospace font.

Setting `font-family: 'Cascadia Code', monospace;` would also render 'JetBrains Mono NL' - privacy features prevent pages from querying non-standard system fonts and this will also be reflected as a console warning message: 'Request for font "Cascadia Mono" blocked at visibility level 2 (requires 3)".'

Now, if you were to use he "Monospace Code" font stack listed on this page `font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;`, you will render... Yup, 'Consolas'!

  1. `ui-monospace` - remains unsupported by Firefox which is lame (would also render 'Consolas').

  2. `Cascadia Code` - see above, access denied because it isn't natively available on Windows 10 (also, coding ligatures... more like illigatures, amirite?).

  3. `Source Code Pro` - skipped due to unavailability.

  4. `Menlo` - skipped due to unavailability.

  5. `Consolas` - next option in line, this one is available and is the one that will be chosen.

  6. `DejaVu Sans Mono`  - skipped, font already determined.

  7. `monospace` - skipped, font already determined.

These modern font stacks suck. Please, if you want to render font and it has to be something specific, then use an actual web font and simply fall back to the default 'monospace' which is controlled by the user.

myfonj · 4 months ago

This is excellent analysis, but I think you've forgot to mention one particular detail in your environment description:

    - Firefox Browser Privacy Enhanced Tracking Protection setting changed to "Strict".

It is not default, and explicitly indicates this kind of outcome can potentially happen. But truly agree that the situation here is suboptimal in all aspects.

Also maybe worth noting that we can always force our (three) font faces everywhere simply by unchecking the "Allow pages to choose their own fonts" in settings. Yes, this is nuclear option, but I can attest that I use it time to time, and it is quite usable.

BTW, I have somewhat softer workaround that interestingly makes the (local) Cascadia on modernfontstacks work even in the Strict Tracking Protection mode: I have a "userstyle" [0] (more precisely userCSS in Stylus) that "remaps", among other things, "Consolas" to a @font-face of the same name but loading `src: local("Cascadia Mono")` instead. Not sure why exactly this circumvents that (I don't think that Stylus-injected styles have more privileges than page styles), but I am glad it works nonetheless.

[0] https://userstyles.world/style/23838