Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

N.Z.'s Champion posted:

If the element is an <img> or <canvas> etc you can use CSS object-fit to format it like a background image (contain, cover, etc.) to fit the container. Another approach is to size with a CSS unit that's the same horizontally and vertically (ie vw or vh but not both) so your code might look like <div style="width: 5vw; height: 5vw">...</div>. I'm guessing the hacky approaches you've found are those old padding-bottom-based approaches and yeah, I don't like those either.

The thing that makes it extra awkward is that I'm trying to stack two canvas objects the same size (the upper one being to intercept inputs, the underlying idea being that when you're done drawing on it, the lower one moves on and retains what you were drawing and the input one goes away - could be achieved by conditionally binding events instead but this way feels cleaner, apart from the css!)

So what I'm aiming for is *either* the container object being sized to available space and both canvases expand-centered into it, or the container object being expand-centered into *its* available space, and the canvases just 100% sized.

Though actually, now I mention it, I'm already doing dynamic width= and height= on the canvases based on the size of the parent, so image-style scaling might work, if you can do object-fit at the same time as position: absolute/relative. (Or, since I'm doing dynamic sizing anyway, I could just plain set the position and size for those ones.)

The worse case is trying to get a grid of 7x3 squares to appear in one cell of a parent grid, scaled up to the biggest size that fits, while not spacing out the contents.
i.e.

code:

I want

+-------------+
|   XXXXXXX   |
|   XXXXXXX   |
|   XXXXXXX   |
+-------------+

or

+-------+
|       |
|XXXXXXX|
|XXXXXXX|
|XXXXXXX|
|       |
+-------+

but I keep getting

+-------------+
|X X X X X X X|
|X X X X X X X|
|X X X X X X X|
+-------------+

or even worse

+-------------+
|x x x x x x x|
|x x x x x x x|
|x x x x x x x|
+-------------+

(where lowercase x indicates the sub-squares are smaller even though there is room)

# ? Apr 10, 2024 01:35

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 05:35

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

Hmm could you combine the canvases? ie make a single composition canvas draw ctx.drawImage(otherCanvas);ctx.drawImage(anotherCanvas) in your requestAnimationFrame render loop, and dispatch events to offscreen/unmounted canvases

Then with a single canvas I'm guessing the sizing problem would be easier

# ? Apr 10, 2024 05:26

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

N.Z.'s Champion posted:

Hmm could you combine the canvases? ie make a single composition canvas draw ctx.drawImage(otherCanvas);ctx.drawImage(anotherCanvas) in your requestAnimationFrame render loop, and dispatch events to offscreen/unmounted canvases

Then with a single canvas I'm guessing the sizing problem would be easier

It's really more the getting a thing to size-and-position as I want in a grid cell, it turns out. I can put the canvases inside one element so they can do absolute positioning relative to that element, but even if there's no canvases involved, getting that one element to be positioned and sized right is a problem.
If I inspect the grid I can see that the cells are the expected shape, but I just cannot get a rectangular cell to contain a centered square child element scaled to "fit".
(Current state: I gave up and just put a scaled-up rectangle in the cell then bound the size of that to some variables and bound calculations on those variables to top, left, width and height of the child element, which gets it right but fucks up the first frame.)

Edit: Extra fun - I had a grid in a grid cell where both grids were width:100% height:100%, then I scaled up the window, they would grow as expected, but if I then shrunk the window (still bigger than its original size), the grids would end up outside the bounds of the window - I think the inner grid forced the outer grid to stay "big", which in turn kept the inner grid from being scaled down because it was scaled to 100% of the available size, which didn't shrink because...

roomforthetuna fucked around with this message at 05:39 on Apr 10, 2024

# ? Apr 10, 2024 05:35

biznatchio: Mar 31, 2001; Buglord

I would have answered a couple days ago but I was on the road, but this does what I think you were asking for. There's a resize handle on the blue container div to resize it to test the behavior.

# ? Apr 10, 2024 21:37

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

biznatchio posted:

I would have answered a couple days ago but I was on the road, but this does what I think you were asking for. There's a resize handle on the blue container div to resize it to test the behavior.

Nice, thanks, that looks like it does the trick, even with nested grids involved. https://playcode.io/1831865

(Bit of weirdness in there, the chessboard-grid is somehow sometimes 1 pixel "down" relative to what should be its constraints. I guess the translate -50% operation does its math not quite the same as the left/top 50%, maybe resulting in rounding the other way.)

# ? Apr 10, 2024 22:57

biznatchio: Mar 31, 2001; Buglord

roomforthetuna posted:

Nice, thanks, that looks like it does the trick, even with nested grids involved. https://playcode.io/1831865

(Bit of weirdness in there, the chessboard-grid is somehow sometimes 1 pixel "down" relative to what should be its constraints. I guess the translate -50% operation does its math not quite the same as the left/top 50%, maybe resulting in rounding the other way.)

I do see that behavior at some zoom levels. It's a result of the layout calculations working on floating point pixels which get snapped to whole device pixels during rendering; and I don't think there's any good controls in CSS for avoiding it.

But it's easy enough to hack in some more precise custom layout logic instead; but it does require some Javascript.

edit: Or a more efficient, but more complex version.

biznatchio fucked around with this message at 04:08 on Apr 11, 2024

# ? Apr 11, 2024 03:26

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

biznatchio posted:

I do see that behavior at some zoom levels. It's a result of the layout calculations working on floating point pixels which get snapped to whole device pixels during rendering; and I don't think there's any good controls in CSS for avoiding it.

But it's easy enough to hack in some more precise custom layout logic instead; but it does require some Javascript.

edit: Or a more efficient, but more complex version.

Noice. I had working javascript positioning already but I *think* I prefer the css "less interpreted more automatic" version even with the pixel miss. I'm mostly not having visible grids and the intent is just to lay things out dynamically in a way that makes a single-screen view usable in portrait or landscape, and look reasonable and use most of the space regardless of overall aspect ratio - being off by one pixel therefore won't tend to meaningfully show up, because it will be a one pixel difference in "gap" not (as in the example) a one pixel difference where edged rectangles overlap and it looks like a mistake.

Related but changing topic, Svelte has some magic css animation support that tries to do a smooth positional animation when you change the location of a thing (e.g. as in this tutorial - click solve then some of the todo items to see what it does easily); I'll be super impressed if it manages to perform a clean positional animation when the item gets repositioned between totally distinct multilayered layout monstrosities. But it seems like it might do it, since the things it's positioning between in that tutorial don't have any direct relationships.

I'm curious whether I'll be able to persuade the css animation automation to do the high-math animation technique I previously implemented in flutter (I might have done it in js as well, I don't remember), as some sort of custom easing - the effect I wanted was to animate based on *maximum acceleration* rather than merely easing between positions. A simple example difference is if you moved an item from 0 to 100 it would accelerate until it reaches 50 then start decelerating, just like an easing curve, but then if, for example, when it's at position 25 in that animation, you reset its target position to 25, standard easing-style animation would just make a new curve, say "it's already there" and you'd get a janky sudden stop. My animation goes "the new track is starting at 25,0 with velocity n,0, so it has to decelerate first", then recalculates the subsequent curve from where it will be when velocity-x equals zero - each animation consists of one to four curves depending on how many stages it has to do to smoothly stop at its destination. (It also tries to get the motion duration to be equalized so x and y fully resolve at the same time, because if you just animate x and y independently then you get stupid arcs instead of straight lines.)

# ? Apr 11, 2024 05:20

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

vite-node is pretty awesome for running Typescript stuff that's in the middle of a huge rewrite. I've been going over some old codebase, commenting out top level calls and doing broad variable name, function and type changes bit by bit (and then uncommenting relevant calls), that always left things in some kind of broken state for the Typescript compiler. So I just ran tests with vite-node, which just transpiles things away without type-checking, until everything was done and tsc happy.

# ? Apr 12, 2024 19:59

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

Is there a css thing for associating some style with a #shadow-root node itself?
Specifically, I'm curious if I can do

code:

<custom-element>
  #shadow-root
    <style> ??? </style>
    some text in Verdana font
</custom-element>

versus having to do

code:

<custom-element>
  #shadow-root
    <style>span {font-family: Verdana;}</style>
    <span>some text in Verdana font</span>
</custom-element>

# ? May 5, 2024 16:23

necrotic: Aug 2, 2005; I owe my brother big time for this!

Yup, can have a <link> to a stylesheet as well.

There�s also Constructed Stylesheets which can be attached to multiple shadow DOMs for reuse.

# ? May 5, 2024 17:25

biznatchio: Mar 31, 2001; Buglord

roomforthetuna posted:

Is there a css thing for associating some style with a #shadow-root node itself?

You can use the CSS selector :root in a stylesheet within a shadow DOM to refer to the shadow-root pseudo element.

And as necrotic mentioned, if your <style> or <link rel="stylesheet"> elements for all instances of a custom element are identical, you can save memory and processing time by loading the stylesheet into a CSSStyleSheet object instead and assigning it in an array to the shadow root's adoptedStylesheets property; that way you can share one in-memory stylesheet among multiple shadow DOMs; which is very highly recommended if you're making lots of instances of your custom element.

# ? May 5, 2024 21:02

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

biznatchio posted:

You can use the CSS selector :root in a stylesheet within a shadow DOM to refer to the shadow-root pseudo element.

And as necrotic mentioned, if your <style> or <link rel="stylesheet"> elements for all instances of a custom element are identical, you can save memory and processing time by loading the stylesheet into a CSSStyleSheet object instead and assigning it in an array to the shadow root's adoptedStylesheets property; that way you can share one in-memory stylesheet among multiple shadow DOMs; which is very highly recommended if you're making lots of instances of your custom element.

Awesome, thank you. Googling this just kept turning up loads of results saying stick <style>bla</style> into a shadow root, and all of the examples only styling child elements. Sharing the stylesheet will be good too (I don't think it really matters for my use-case where the whole thing is tiny, but I always love a good micro-optimize!)

# ? May 5, 2024 22:54

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

Hm, is there dynamic styling for shadowRoot too somehow?
Typescript complains about

code:

this.shadowRoot!.style.font = whatever;

(Property style does not exist on type ShadowRoot)

The other answer simplified one of my custom elements, but looks like maybe this one is still gonna have to have a span inside it.

# ? May 5, 2024 23:05

Jabor: Jul 16, 2010; #1 Loser at SpaceChem

You can mutate the CSSStyleSheet you've already given it and have those changes take effect, yeah?

# ? May 5, 2024 23:48

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

Jabor posted:

You can mutate the CSSStyleSheet you've already given it and have those changes take effect, yeah?

Ah, that would probably work, but seems likely to be more expensive than having a child element, right? (And especially problematic if I'm sharing the style sheet between multiple elements and mutating them individually.)

In this case I'm migrating a custom element from being main-style-sheeted by type name, e.g. my-element {fixed formatting} and scaling it by doing this.style.fontSize=fittedSize in the custom element. Probably makes more sense to put the text in a span, style it as span{whatever} rather than :root{whatever}, and then be able to apply the font size override the simple way. Just a shame that using shadow dom for this is making the tree two elements deeper than it was with a "globally styled" custom element.

# ? May 6, 2024 00:16

biznatchio: Mar 31, 2001; Buglord

Have one globally shared stylesheet object with the base properties for your component, and then have each instance of the component create its own private stylesheet object (which ideally would be initially empty since all the default rules should be in the global stylesheet already); then register them both into adoptedStylesheets with the global one first, and the per-instance one second. That way you can share the common/default styles, and each instance can add whatever rules it needs to its private stylesheet, and regular CSS precedence will handle it from there.

# ? May 6, 2024 12:19

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Does anyone happen to know a package that implements a BST with sort of getNextSmallest/getNextLargest methods?

I'm implementing some scheduling stuff that mixes vacation, holiday, shift and exception calendars and I need a way to look up things fast. However when I'm like "it's today, when the next exception", I'm currently doing a linear search for every chunk I compute, and the longer the list of exceptions, the bigger the performance problem obviously. The few packages I checked always search for exact values.

# ? May 10, 2024 22:27

roomforthetuna: Mar 22, 2005; I don't need to know anything about virii! My CUSTOM PROGRAM keeps me protected! It's not like they'll try to come in through the Internet or something!

Combat Pretzel posted:

Does anyone happen to know a package that implements a BST with sort of getNextSmallest/getNextLargest methods?

I'm implementing some scheduling stuff that mixes vacation, holiday, shift and exception calendars and I need a way to look up things fast. However when I'm like "it's today, when the next exception", I'm currently doing a linear search for every chunk I compute, and the longer the list of exceptions, the bigger the performance problem obviously. The few packages I checked always search for exact values.

Not aware of a package, but a binary search is simple enough that you can pretty much just copy-paste one, e.g. https://www.geeksforgeeks.org/binary-search-in-javascript/ - I'd take the iterative one, have it return an index (mid instead of true, start instead of false), and maybe have it take a target comparison function instead of === x and < x.

That's if you're okay with sorting the data in a linear structure as a precursor to search. If you need fast insert/remove as well then you probably want a redblack tree which is quite a bit more involved.

# ? May 11, 2024 04:47

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Thanks for the pointers. I guess I'll give doing a BST an attempt.

Meanwhile I fudged around making a skiplist, because new-fangled data structures are cool or something. But it worked :woop:

--edit:
Nah, the skiplist works better. If I make a simple BST, and I insert (datetime) keys in sequential order like the database would spit them out, I get practically a linked list.

Combat Pretzel fucked around with this message at 20:52 on May 11, 2024

# ? May 11, 2024 20:19

Combat Pretzel: Jun 23, 2004; No, seriously... what kurds?!

Yikes, null vs. undefined certainly makes a difference. I didn't know it was that much. I am returning undefined nilly-willy in all my projects whenever something's not found or available.

I do the same in my skiplist. When I made a linear search module backed by an array as a control to benchmark against it, it was way faster than my skiplist. Eventually I stumbled upon the info, learning that V8 does type lookups or something when checking against undefined, and converted it all to null checks instead. Now the skiplist is faster than the linear search.

Doing a million lookups in the test scenario was 200ms with undefined vs 35ms with null.

# ? May 11, 2024 22:41

Bruegels Fuckbooks: Sep 14, 2004; Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Combat Pretzel posted:

I am returning undefined nilly-willy in all my projects whenever something's not found or available.

From the ecma2015 spec, undefined means "has not been assigned a value", and null means "absence of a value." Returning undefined in this instance doesn't match the intended meaning of undefined from language specification, which might annoy people who care about things like that.

# ? May 12, 2024 15:54

MrMoo: Sep 14, 2000

The CacheStorage.match() API is odd, can anyone explain how a Request object can fail, but a clone with all matching options passes?

Setting ignoreVary works, but doesn't really make an informative difference

JavaScript code:

await self.caches.match(temp1, { ignoreVary: true })
Response�{type: 'cors', �}

The cache oddly has mode: 'no-cors':

But the cache response is pretty basic:

(edit) I think it is missing, assumed headers of Origin , as when pulling from S3 you get Vary: Origin and Vary: Accept-Encoding back.

MrMoo fucked around with this message at 17:56 on May 25, 2024

# ? May 25, 2024 16:10

kneelbeforezog: Nov 13, 2019

I tried to learn how this chrome extension works: https://chromewebstore.google.com/detail/twitter-video-downloader/akmdionenlnfcipmdhbhcnkighafmdha

so I put it in here: https://robwu.nl/crxviewer/?crx=htt...ghafmdha%2526uc

code:

(() => {
    var t = {
            591: (t, e, r) => {
                var n = r(8)
                    .default;

but content.js looks like that. I asked chatgpt if the code is being obfuscated, and it said no, just minimized. Is this right? Id like to see how it works but if this is what code looks like, im amazed anyone can write like that.

# ? Jun 4, 2024 20:12

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

I don�t thing anyone writes code like that (though I did work with some Perl/C olds who def would).

It�s probably �transpiled� by one of the packagers, shortening the variables and function names to a bare minimum (thus �minimized�). Saves bandwidth in the long run.

e: also, don�t trust anything chatGPT says

gbut fucked around with this message at 20:19 on Jun 4, 2024

# ? Jun 4, 2024 20:16

Roadie: Jun 30, 2013

gbut posted:

e: also, don�t trust anything chatGPT says

# ? Jun 4, 2024 20:24

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 05:35

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

kneelbeforezog posted:

I tried to learn how this chrome extension works: https://chromewebstore.google.com/detail/twitter-video-downloader/akmdionenlnfcipmdhbhcnkighafmdha

Here's the original pre-compilation source code: https://github.com/mstfsnc/twitter-video-downloader-extension

# ? Jun 4, 2024 20:34

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »