Alright, this is a *glorious* bug in Firefox and Chrome but not Safari.

The Scene: In my webapp I can type ctrl-alt-b to get the "bandolier". It's a dev tools/admin panel. This works just fine in safari, but fails in Firefox and Chrome on OSX only.

The code, with a log:
Now, safari reports the following when I press some keys:
But, Firefox and Chrome report *this* when I do the same keys. See that ∫ there?
On OSX you get the ∫ character by holding alt and hitting b.

Safari does the right thing and reports ctrl-alt-b as ctrl, alt, and b.

Firefox and Chrome though must be handling the keys wrong such that the alt-b triggers first, turns into ∫, then reports ctrl-∫ instead.
I didn't notice this because I use Safari on the mac to make sure everything works there, then Chrome/Firefox on Windows. On Windows this isn't a problem, so only on OSX is it doing the alt-b translation wrong, AND, only in Firefox and Chrome. Other apps don't do this.
The solution is you have to check for the keyCode too (only?) since that's always 66, even if the key is ∫, which should also be a bug since keyCode should directly map to key in a 1:1 mapping, especially since Safari is made by Apple and that's what they do.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Zed A. Shaw, Writer

Zed A. Shaw, Writer Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @lzsthw

31 Jul
Given my recent Arch Linux debacle I think I should cover a few persistent FLOSS vs. Commercial software myths. These are usually put forward as some kind of defense when leaders of a FLOSS project screw over their users without consent.

#1) Commercial Whataboutism
"Commercial companies screw people over too. Why do FLOSS projects have to not screw people over?!"

That's whataboutism, and more importantly authoritarian whataboustism. I say there's two kinds of whataboutism:
You have whataboutism that is pointing out a bias that people in positions of authority have:

"Why do you punish this kind of person more than that kind?"

Then there's what I call Authoritarian Whataboutism:

"I'm allowed to harm that person because that other guy does too."
Read 14 tweets
31 Jul
Oh I hate myself right now. I wrote all this code for learnjsthehardway.com before I had to stop because Sapper died and it wouldn't work for students.

Now I'm trying to bring over the good stuff and I'm on WebTorrent...and it's a nightmare. I have no idea what I wrote.
I may have to just sit down for two days and re-read all the old code, but I just want to get WT working. I'm trying to load the JSON data I generate, and for some reason I can't figure out where I generate this one torrent hash. I scour all of my code, I can't find it.
That's because I'm *not* generating it. I'm just writing it in a header of the .md files like a loser. LOL. I think I was manually making these hashes to get going and planned on generating them but never got around to it.
Read 4 tweets
30 Jul
Read this article, but replace every utterance of "Programming" with "Painting" and "Geek/Hacker/Developer" with "Creative/Artist/Painter":

cacm.acm.org/magazines/2021…

Arts education has the exact same "innate ability/difficulty" problem but oddly nobody seems to be upset about it.
For example, when I was learning to draw formally I had *numerous* people comment on how I'm a programmer and probably can't learn to draw. When it was obvious I could ('cause anyone can, just like programming) these "artists" with "innate ability" thought I was "cheating".
I literally had to start recording my painting sessions and taking side-by-side photos just so people wouldn't claim I "cheated" at art. Never mind that they were zooming in 50MP photos on their their iPads to do their paintings.

I had to be cheating! """cheating"""
Read 9 tweets
29 Jul
Simulating someone hacking the input behind the slider to inject bad numbers. I gave a validation rule that limits to 20-50 to test how to disable the payments and show an error on both ends. Then on the backend I'll confirm it again. The reason for this limitation is carding.
For those of you who don't know, carding is the process of testing banks of stolen credit cards to see which ones are still valid and can be sold. They do this by finding unrestricted donation forms and use them to post a charge for $1. If it works they sell the card.
If you allow unrestricted donations then you can get hit by a huge whack of carders, then the chargebacks come rolling in, and you have to pay $15-30 to deal with each one, even if you just do a refund and don't contest it. Stripe is actually the *worst* for this.
Read 8 tweets
20 Jul
I'll use this to do a running commentary on a "style checkbox" in CSS. First trick is to put the label *after* the checkbox so you can use + to select it if the checkbox is :checked. Clicking the label activates the hidden input, so the label changes red/green.
Here's a demo of that first part working. Now to make the label look like a checked/unchecked box that's different.
The next trick is to use the :after to add content, *but* if you give an :after that has no content it still creates a block you can style. Here I'm just making a little square.
Read 11 tweets
18 Jul
Fixed images. I'm definitely going to recommend people start with a reset that removes the Andreessen Web from our CSS.

git.learnjsthehardway.com/zedshaw/zedsha…
I think the other thing that infuriates me about this kind of crap is how it happens randomly. Other places images showed just fine. Drop it in a random div somewhere else and suddenly I get phantom pixels I can't debug.

My biggest fix would be:

No more contextual footguns.
If I have an image, and in one place that image has no space on the bottom, then that image has no space *everywhere*.

If I set a position:absolute, then it's contained in its parent *everywhere*, no matter what the parent's position is.

This would be a vast improvement.
Read 4 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(