The Nineteenth Byte

4:02 PM

Making a custom library for DOM stuff for RTO because JS somehow managed to do it as badly has humanly possible despite JS literally existing for the purpose of DOM manipulation :|

pxeger

I don't think modern JS' DOM interface is too bad

the only major thing it lacks is parent selectors

Radvylf Programs

Also TIL sock² has a really bad memory leak, it was using 1.4 GB and I've done minimal web browsing today

@pxeger Parent selectors?

Not sure what you mean by selectors, there's parentNode

pxeger

Something like querySelector and querySelectorAll, but instead of selecting children, it selects parents

Radvylf Programs

@pxeger Wdym by modern? Nothing significant has changed in the last like three decades other than like, querySelector being added.

pxeger

so x.querySelector('.a') === x.querySelector('.a').firstChild.queryParentSelector('.a')

@RadvylfPrograms That, in combination with other modern JS features like [...x], forEach, filter etc. which make it usable and pretty concise

Radvylf Programs

4:06 PM

It's still ridiculously verbose and painful to do anything, you need like five statements that are all really stupidly named to just like...add a list item to a list

@pxeger hahahahahahahahahahahhaha what?!?!?!?!

Concise?!

Are you using jQuery or something without noticing?

pxeger

I mean, obviously what it really needs is an embedded declarative DSL like JSX and a thin component management layer like React

but I think even for creating new elements it's not too bad

For example, I think none of github.com/pxeger/pn/blob/main/static/script.js is really that bad

Radvylf Programs

var div = document.createElement("div"); div.textContent = "Hi!"; div.classList.add("xyz"); document.getElementById("parent").appendChild(div);

var div = document.createElement("div"); div.textContent = "Hi!"; div.classList.add("xyz"); document.getElementById("parent").appendChild(div);

This should be one or two lines. Something like dom.byId("parent").add(dom.build("div.xyz", "Hi!"));

(Sorry for the long delays between messages and duplicates, chat is literally unusable with this wifi. I'm getting tens of bytes per second upload speed.)

pxeger

where are you?

Radvylf Programs

My school

ophact

or newEl = new dom.Element('div.xyz', {text: "Hi!"}); dom.get("parent").append(newEl) is something that I would still be fine with

pxeger

4:14 PM

@RadvylfPrograms It's not normally this bad, though, right?

Radvylf Programs

Who would have guessed that they messed up something wifi related

@ophact Too many es

pxeger

@RadvylfPrograms Ideally I'd like something like $"parent" += <div class="xyz">"Hi!"</div>

ophact

what do you mean too many "e"s`? did oyu mean the misspelling? @RadvylfPrograms

@pxeger what?

new syntax?

so $ is a keyword?

Radvylf Programs

@pxeger That's the ugliest syntax I've ever seen, going to stab my eyes out now

@ophact No, I just hate the letter e :p

pxeger

@ophact Radvylf has synaesthesia, and doesn't like the colour of the letter e (‽)

ophact

4:16 PM

Just seeing HTML outside a string gives me a headache

and so does $ followed by a " or any other quote

Radvylf Programs

Let's just make JS entirely XML based, easy answer. Don't know why we've been making this so hard for two decades /s

pxeger

@ophact yes, JS is supposed to be a web language, so having dedicated syntax for web things doesn't seem too bad to me

Aug 17, 2021 at 16:38, by pxeger

(no joke, the first programming language I tried to make used XML)

Radvylf Programs

@pxeger Sure, and I was just about to say that. But make it good syntax

pxeger

@RadvylfPrograms Well I was just trying to mimic HTML. Do you want something better than HTML (because, I admit, HTML doesn't have a great syntax)

Radvylf Programs

Embedding HTML in JS is an awful idea IMO. Maybe a type of string that can handle things like quotes in attributes without escaping would be cool, but but "here's some HTML deal with it" is ugly, hard to read, and will undoubtedly create ambiguity

pxeger

4:18 PM

@RadvylfPrograms JSX already does this and it works fine

Radvylf Programs

How would you parse var x = y<z>w;?

ophact

I don't like the look of JSX frankly

@RadvylfPrograms I'd raise an error

that is if the HTML-in-JS feature is implemented

Radvylf Programs

Why? That means you can't use var < var > var any more

pxeger

@RadvylfPrograms same as ((y<z)>w)

ophact

@RadvylfPrograms if you separate with whitespace I will allow it

it's like how a++5 errors but a + +5 doesn't

something along those lines

I would allow y < z > w to be parsed as (y < z) > w

pxeger

4:20 PM

@RadvylfPrograms github.com/attempt-this-online/attempt-this-online/blob/main/…

Radvylf Programs

Requiring whitespace between operators and identifiers but-only-sometimes is just really wack IMO

pxeger

@RadvylfPrograms It's how C does it too

Radvylf Programs

Add another reason then

pxeger

@ophact although in a perfect language, y < z > w should mean y < z && z > w

ophact

True. I find that really helpful

Radvylf Programs

4:21 PM

@pxeger Was that supposed to be a case for the readability of that?

ophact

> onClick={
        (event: any) => {
          if (event.target === event.currentTarget && language !== null) {
              setLanguageSelectorOpen(false);
          }
        }
      }

Ahhh

Romanp

@ophact Actually, why shouldn't a++5 be something like a=5*(a+1)?

Just go all implicit everything /s

pxeger

@RadvylfPrograms It's a case for showing you that this syntax has been implemented and works

and yes, I find it pretty readable

not perfect, definitely, but better than the equivalent with document.createElement or whatever

ophact

For me I just work with HTML, but with strings

and I insert them so that the elements are not overwritten

Radvylf Programs

@pxeger Sure, it's better than document.createElement, because literally anything is lol

pxeger

4:24 PM

currentHTMLdocument.createNewElementWithTagName?

ophact

I don't use innerHTML (except to delete everything from an element) but I insertAdjacentHTML which (at least in my experience) preserves everything else

@pxeger Ahh no, even worse

Radvylf Programs

@ophact That causes a ton of problems

pxeger

@ophact that's a good way to get an XSS

Radvylf Programs

@ophact Oh nvm

ophact

@pxeger XSS how?

Radvylf Programs

4:25 PM

@pxeger Not if it's HTML you control which it often is

pxeger

If you're using dynamic strings

Radvylf Programs

tf is a dynamic string

ophact

Could you give an example of how an XSS would work with dynamic strings?

pxeger

but if you're only using literals then that's fine

ophact

does the attacker "inject" strings into my code?

pxeger

4:25 PM

@RadvylfPrograms I just mean one where you construct a string with some user input in it

Radvylf Programs

Ah

Usually you can just get around that trivially with JSON.stringify or some replaces

ophact

@pxeger Well in my case the string is built either from data from an API or user input

so I guess I'm vulnerable

but how?

pxeger

If you do something like el.insertAdjacentHTML("<p>Your name is: " + userInput + "</p>")

ophact

well not usually like that, but if the user clicks on something then I display some text

pxeger

then if userInput is something like <script>alert("hello maybe I can now execute arbitrary code on another user's browser")</script>,

you'll get an XSS

ophact

4:27 PM

Oh I see

but it doesn't affect the backend does it?

unless I stupidly create some API calls to manipulate the backend

in ways that cannot be done from the frontend

as long as I implement secure defenses on the backend it should be fine right?

Radvylf Programs

@ophact No, but running arbitrary code on users' browsers still ranges from fairly bad to really bad

Unless it's purely a self-XSS, but that's just a problem that isn't currently exploitable, not not a problem

ophact

@pxeger But that doesn't affect the other user's browser, it only alerts on the attacker's browser.

Radvylf Programs

And it'd be annoying if I wanted to type in a string with <s and stuff and it broke the page

ophact

but now there's a problem not just with security, but with user experience too

pxeger

@ophact If you can somehow save that user input in the site database, or if it can be somehow included in the URL parameters, and the attacker sends the link to the user

Radvylf Programs

4:31 PM

Yeah, and even if it's only a self-XSS now, there's always a risk you'll implement some sort of feature that saves the string on the back-end, and allows various attacks

pxeger

what exactly do you mean by "self-XSS"?

Radvylf Programs

An XSS where you can only XSS yourself

ophact

If I'm understanding this correctly, it goes something like "attacker inputs malicious code -> submits in a form (perhaps) whose data gets saved in a database -> other user opens page that relates to the content in that form -> HTML is generated dynamically from that data -> malicious code included -> malicious code is run (?) and causes catastrophic damage"

pxeger

To me a self-XSS is where the attacker convinces the user to paste some malicious code in the browser console or something

ophact

(^^^ in response to @pxeger's reply to my message)

Radvylf Programs

4:32 PM

@ophact Yeah, sort of

@pxeger That's a self-XSS too, yeah

One where the user's the one running the code, regardless of whether it's intentional or as part of a social engineering thing like you mentioned

ophact

This sounds pretty bad, so I think I'll have to implement a defense on the website I'm currently building

putting the user input in a pre tag should work

Radvylf Programs

@RadvylfPrograms But a self-XSS where it's "haha make your username <script>...</script> and something funny happens" is way easier to pull off than "hey paste this into your console"

pxeger

@ophact What if the attacker puts </pre> in their input?

You need to HTML-escape it properly

like replace < with < etc

Radvylf Programs

@ophact The normal way to do it is to escape what they type in. Just replacing < with < is all you really need.

ophact

yeah, that's another potential solution

Radvylf Programs

4:35 PM

Escaping the input is the only real solution other than not using innerHTML or its variantsd

pxeger

@ophact putting it in <pre> isn't gonna work, you really need to escape it

@RadvylfPrograms if you want to ensure the input is unchanged, you should also replace & with &

and if you're putting user-generated content inside an attribute, you also need to escape " into &dquot; (or whatever that is), and maybe ' into '

Radvylf Programs

@pxeger Oh true

pxeger

really you should just use an existing library

ophact

clear star on Ginger's 2 hour old message?

ik it's completely unrelated to the topic at hand but just noticed it

Radvylf Programs

@pxeger I agreed with you until this part

Libraries are almost always stupid, especially for things you can write in 10m

ophact

4:37 PM

especially JSX...

pxeger

JSX isn't really a library

it's a syntax layer on top of JS, but it's part of React, which is a library

Radvylf Programs

oh (on top of JS) (which is part of react) not (on top of (JS which is a part of react) lol

pxeger

@RadvylfPrograms but for security things like this, you might write it wrong

This is the same reason you're told not to roll your own crypto

Radvylf Programs

Middle names are so weird

Like, I just have this random thing in my name that I only really need to remember exists on legal documents and standardized tests

@pxeger True, security stuff is really the only time they're mandatory. But for a few .replaces, if you know to actually bother with it, you already know enough about the danger to likely do it right

And I trust myself more than whoever wrote some random NPM package

ophact

thanks to both of you for pointing out security issues in my website ;)

Radvylf Programs

4:47 PM

Not really a fan of how convenient innerHTML makes introducing security vulnerabilities and performance and usability issues

And if it does exist, the ordinary DOM manipulation should be made nice enough that innerHTML is the uglier choice, not practically the forbidden gold standard of readability

pxeger

The practice of naming dangerous functions with unsafe in them should have been invented earlier

Like dangerouslySetInnerHTML

ophact

5:06 PM

Henceforth, I shall be more careful about my choices in frontend JavaScript (and backend too)

got a ton of security libraries to install.

caird coinheringaahing

5:25 PM

@RadvylfPrograms This is how I feel about both my first and middle names, given that I don't go by either of them :P

"Oh, you want my legal name? Ugh, sure, lemme remember that"

Radvylf Programs

Legal names are overrated, illegal ones are way better :p

caird coinheringaahing

5:55 PM

Is O((2x+2)^n) the same as O((2x)^n)?

Radvylf Programs

Aren't constants ignored entirely? So it's just O(x^n)?

Wait, is n a constant or a second input

caird coinheringaahing

But 2^n isn't a constant

x is constant, n is the input

pxeger

@cairdcoinheringaahing Is O(2^n) the same as O(3^n)?

~~I don't think so~~ wait yes

caird coinheringaahing

@pxeger I feel like this is a question you ask to get someone to realise something, but I legit don't know :P

pxeger

so therefore the base is not important

caird coinheringaahing

6:02 PM

@pxeger Ah ok, good to know. My Jelly answer to your powers question can be even more inefficient then :P

pxeger

because 3^n = 2^(log2(3) * n)

and log2(3) is constant

so their big-O notations are equivalent

caird coinheringaahing

¯\_(ツ)_/¯ Honestly, at this point, I don't think I can be bothered to simplify the big-O notation :P

pxeger

(2x+2)^n = (2x) ^ ((log_{2x}(2x+2)) * n), which is just (2x)^n' where n' is a linear function of n

and big-O notation is the same under linear transformations, right?

right?

I'm really confused now

Wheat Wizard

@pxeger The multiplication has to go on the output, not the input.

pxeger

Well that's what made me doubt myself

Wheat Wizard

6:09 PM

They are not the same, there are some functions which are O(3^n) but not O(2^n). But often in cases where we apply big O asymptotic analysis we actually don't care.

pxeger

6:25 PM

@pxeger Oh look, more pointlessly starred messages

Whoever's starring random messages, please stop

7

DLosc

^

caird coinheringaahing

Any feedback?

Radvylf Programs

The purpose of stars is to highlight particularly useful information, or other things worth highlighting, like things which are funny, sufficiently on-topic, and are both of these things both with and without context. Starring things like "hmm" or messages in ordinary discussions is an abuse of the starboard, and hides things actually worth highlighting.

11

DLosc

@cairdcoinheringaahing Looks fine, my main issue is that describing the challenge in terms of shuffling poker chips had me a bit confused about what was actually being asked. Reversing a shuffle seems like it ought to give two stacks which could have been the original stacks that were shuffled to give the input, whereas the challenge is to give one stack with all the chips of each color together.

caird coinheringaahing

@DLosc Yeah, I wasn't sure how to best describe the process, and given that I got the idea while shuffling poker chips, I went with that. I think I'll try to reframe it before posting

pxeger

7:01 PM

TIL mods can move chat messages to a new room, but normal users can't

Hmm, the trivia you learn from reverse-engineering the chat JS

Radvylf Programs

My favorite is the debug commands

//test

pxeger

chat users have two different privileges called is_moderator and can_moderate with bizarre subtle differences between them

e.g. you have a diamond next to your name in popups iff you can_moderate, but you have a diamond next to your name in chat messages iff you is_moderator

also, there are some references to "[easter-?]eggs" and "asteroids"

maybe to do with past april fools' jokes?

@RadvylfPrograms there's also //cash

Radvylf Programs

7:16 PM

Yeah

It logs a bunch of garbage to the console though

pxeger

Interestingly, that means it's impossible to send either //test or //cash on an unmodified chat client (without editing the message)

aha, easter eggs: cdn-chat.sstatic.net/chat/Js/eggs.js?v=3

caird coinheringaahing

@pxeger Nope, these are to actual easter eggs :P

pxeger

> https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454

lmao

caird coinheringaahing

If you go to any SO chat room, and enter a message that "looks like" an attempt to parse HTML with regex, you get a bunch of weird symbols and text floating around

91

Q: What Easter eggs do the chat sites have?

According to balpha, the SE chat sites may have individual Easter eggs, depending on the site. If you find them, please post. Because it's so easy to make this stuff up, a screenshot as proof would be nice. (Although Photoshop isn't that hard either...)

pxeger

chat.stackexchange.com/search?q=egg&room=240

caird coinheringaahing

7:22 PM

I literally got one message from that, saying

> The sun may rise in the east, at least it settles in a final location

Is chat search run by some dying god? :P

pxeger

caird coinheringaahing

That is not a reference I would expect to see in a chat.SE easter egg :P

Sandbox Posts

0

A: Sandbox for Proposed Challenges

Storing a band matrix code-golf matrix Related A band matrix is a matrix whose non-zero entries fall within a diagonal band, consisting of the main diagonal and zero or more diagonals on either side of it. (The main diagonal of a matrix \$A\$ consists of all entries \$A_{i,j}\$ for which \$i=j\$....

7:40 PM

Okay I give up trying to implement the cookie spec properly

pxeger

there barely is a spec lol

Radvylf Programs

It'd be a lot easier if I didn't subconsciously try to change all of the variable names to not include es

Adám

CMC: ASCII art portrait of Marilyn Monroe, minimum 32×64 chars.

(Does Mathematica have a built-in for that?)

pxeger

I couldn't OCR it successfully

Adám

@pxeger I'm getting websocket connection errors on this.

pxeger

7:54 PM

@Adám Yep, the old unexplainable intermittent ATO error

Staging works: staging.ato.pxeger.com/…

Adám

Looks nice when rendered in Ubuntu Mono at size 3:

pxeger

@pxeger It happens occasionally on f007320, and very often on 6fea956, and I wish I knew why

The underlying error is that the directory /run/ATO/{invocation ID}/ is not created

somehow

but the code is Right There! github.com/attempt-this-online/attempt-this-online/blob/…

Radvylf Programs

Maybe your server is on fire

pxeger

But why would my server mysteriously extinguish itself when I rollback the version?

Adám

Couldn't you try a couple of times, rather than error immediately?

@pxeger What did the code for that look like?

Radvylf Programs

8:01 PM

@Adám If it's something that only works sometimes, that's the problem, not how many chances you give it to probabilistically succeed.

pxeger

@Adám I've tried inserting a sleep, to see if it's somehow that the directory isn't created yet, but that doesn't help

And because it's intermittent, not purely random, I don't think retrying would be helpful

Adám

Dyalog APL sometimes fails to delete a directory, but succeeds upon a subsequent try.

How long do such outages typically last?

If you can recognise the situation, you could tell the user to try in X seconds.

pxeger

What really annoys me is that it's not "I haven't worked out what is causing it to not be there", but "I have worked out that there is no reason for it not to be there"

The only way it could possibly not be there is if it somehow gets removed by github.com/attempt-this-online/attempt-this-online/blob/… before the command executes

but that simply can't happen

I have honestly pored over this for hours

@Adám it looked like "open up google and type in 'Marylin Monroe ascii art'"

Radvylf Programs

@pxeger How much logging of stuff did you have? If in doubt, add more prints.

Adám

@pxeger That's forbidden by default loopholes ;-)