|
Kwolok posted:I am working on a spa at a new company. They are using the new Google Identity Services. I realize the server-side end of this is a pain because who knows what language you're using even. Something simple and convenient for the client end of the deal would be a great start. As far as I can tell, google and facebook both require the server-owner to register an API key and jump through hoops for the privilege of users being able to log in, which seems like it goes against the openid design which I thought was supposed to be "you can log in to anywhere with an ID from anywhere else that implements support for this, just tell the server which other server to ask", but maybe I'm missing something.
|
#
¿
Feb 24, 2023 06:08
|
|
|
|
| # ¿ May 16, 2024 08:54 |
|
|
quote:Passport can be unobtrusively dropped in to any Express-based web application I guess that does at least reveal the answer to my final question about properly open openid, which is as expected a big "gently caress you" from Google and Facebook. (Which also means the other goal of a simple library is going to be a no as well, because any such library necessarily has to handle everything as a special case because the big boys are assholes.) roomforthetuna fucked around with this message at 14:14 on Feb 24, 2023 |
|
#
¿
Feb 24, 2023 14:11
|
|
|
I was curious whether doing a bunch of drawImage to a single canvas, or having a bunch of canvas objects moving around, would be better for a game-style "redrawing the entire screen every frame" sort of thing, so I made a little test. Turns out drawing 2000 64x64 sprites from off-screen canvases with drawImage runs at 6fps on my machine, versus moving 2000 on-screen canvases with the same content runs at 20fps. (So obviously it would be even more-better to use moving elements if there's some part of the content that doesn't update.) Though now I feel like I should also test how it handles with a 3D context, making the sprites as textures associated with triangle-pairs, and refreshing a vertexbuffer to move them around. But for my purposes I'm pretty sure on-screen canvases is going to be adequate, and so much less annoying to code than the real high performance option. Edit: to be clear, "for my purposes" is a lot fewer than 2000 on-screen items. And probably also interacting with some vector-drawing. roomforthetuna fucked around with this message at 22:49 on Mar 11, 2023 |
|
#
¿
Mar 11, 2023 22:47
|
|
|
Data Graham posted:That makes total sense once you know about it, but now I'm just trying to imagine troubleshooting it without that knowledge code:roomforthetuna fucked around with this message at 01:40 on Mar 16, 2023 |
|
#
¿
Mar 16, 2023 00:49
|
|
|
gbut posted:I never even heard of it before this discussion, and it doesn’t even make that much sense. It’s a bit funny, yes, but if I was interviewing someone and they used that, I’d dock a point. Now that I know it's a thing, an interviewee could just do it and be fine.
|
|
#
¿
Mar 21, 2023 23:31
|
|
|
Jabor posted:How long does it take to render a single card once? I wouldn't expect it to be an issue to re-render all 200 cards within a single frame - what might be an issue is if you're updating all 200 cards once each, and each update ends up re-rendering all 200 cards, resulting in 40,000 renders (less than 1% of which are actually required). One thing I'd suggest is, if you're rendering cards as text etc. give them a "cache canvas" - render to the canvas only if the card (or canvas size) actually changed, otherwise just blit from the canvas, or reposition the canvas (depending on the underlying structure you have). Doing this was about a 5x speed improvement on my mahjong game where the tiles were originally rendered as fairly simple vector graphics.
|
|
#
¿
May 7, 2023 13:46
|
|
|
Vino posted:I'm the only one using this code, it's a small game. I don't usually write code straight into files but the one line in main.js is initializing stuff. You have to have at least one line of code in the top level or the game won't do anything right? i.e. no, you don't have to have at least one line of code in the top level. But I don't think that's what's causing your problem anyway, circular dependencies in JS suck. Here's a really long painful explanation.
|
|
#
¿
Jun 25, 2023 13:00
|
|
|
Vino posted:Thank you for the explanations. Makes a little bit more sense.
|
|
#
¿
Jun 25, 2023 21:38
|
|
|
Vino posted:This almost got me everything I need in that I managed to get a typescript + electron/webpack + i write my code with ESM and not CJS, but I can't seem to figure out how to preserve this build path and also regular running it on the web without webpack at the same time. Is that something I should aspire to or should I lean 100% into webpack? The main reason I'm hesitant to go 100% webpack is I'm skeptical of the debugging experience of a webpack'd app.
|
|
#
¿
Sep 22, 2023 04:14
|
|
|
go play outside Skyler posted:i went through the pain of getting an electron+ts+import app running and also had some problems with debug working but release failing. it took me a whole loving day of fiddling with webpack and i hope i never have to do it again
|
|
#
¿
Sep 25, 2023 13:35
|
|
|
MREBoy posted:
url="/map_tiles/{z}/{z}_{x}_{y}.png" should work and make it not dependent on the server address remaining unchanged - but it *does* make it dependent on the image files continuing to be served on the same domain as the html, versus the current very explicit URLs make it so if the html was moved to somethingelse.com and the images stayed where they were, it would still work. (Your mess of .. would probably also work, but only because .. from the top level path does nothing.)
|
|
#
¿
Oct 14, 2023 15:37
|
|
|
some kinda jackal posted:I've gotten a lot done with Node, and it's not like I'm flailing. I'm googling a lot, reading a lot of docs, but then I come across some cool concept I didn't know and I'm left wondering what else is useful that I could be making use of, even at a basic level. Absent finding anything above I still think I've had more fun programming in the past week and change than I have in the last 20 blindly groping around google for python snippets and it's really rewarding. I could probably continue blindly groping for node and TS stuff on google instead and be just fine, but I guess I find this valuable enough that I can dedicate at least some time to learn the basics. I just don't relish sitting through a 12 hour youtube video on JS. Some things that are good to know about, may not be familiar from other languages, and make a huge difference: 1. async/await (and using them without converting them into promises in almost every context) 2. if you're doing front-end, document.querySelectorAll is massive (though less so if you're also using some framework) 3. generics in typescript can solve a lot of typing problems 4. The magic of backtick strings for formatting (never do str1+" "+str2+" "+str3!) Fun thing I learned at work yesterday - react <div>{someBigIntVariable}</div> gives an empty div, but `${someBigIntVariable}` stringifies it like you'd expect.
|
|
#
¿
Nov 3, 2023 01:24
|
|
|
Lumpy posted:Meh, on the front end you just compress the giant background image marketing _has_ to have on the login screen by an extra 1% and you save the file size of Luxon in your bundle.
|
|
#
¿
Dec 13, 2023 01:20
|
|
|
Nolgthorn posted:I don't have anything to contribute but I want to compliment your easy to read well organized code. Leng posted:
|
|
#
¿
Feb 22, 2024 16:13
|
|
|
necrotic posted:One of the biggest lessons to learn from that help is to work at breaking down what you are doing into smaller chunks. One big function doing a lot of stuff is generally a signal that it can be broken down into smaller "units of work" that each individually solve a smaller part of the larger problem. If you have a three-line *condition*, on the other hand, that's something that is probably worth making a little function for, because if nothing else if (thing.smellsBad()) is much easier to quickly understand in passing when you're reading your code later than if (thing.scentRatio>0.8 && thing.scentType==ScentType.Bad && !dog.hasNoNose).
|
|
#
¿
Feb 24, 2024 01:46
|
|
|
Nolgthorn posted:You have to do something like render it on the page with no height or width, measure it, then adjust the size using a percentage. There's no easy way to do it because different fonts and operating systems and browsers and etc.
|
|
#
¿
Mar 28, 2024 00:25
|
|
|
I've just started migrating my big javascript game project from being bare javascript drawing everything on a canvas (which worked okay!) to using svelte, which in general feels like a simplicity improvement, except when I run into problems where css seems super reluctant to do the layout things I want. One in particular that seems to be a recurring bugbear for many people (such that stackoverflow answers seem to mostly end with "here's a poo poo option that kinda vaguely worked for this one specific situation") and which I can't find a good answer to, is I frequently want to make an element have a fixed aspect ratio and [otherwise] take up all the space available to it. (e.g. a square element in a wide rectangle should be square with equal height, centered, and in a tall rectangle should be a square with equal width, centered.) css has an aspect-ratio style but it seems to be lower precedence than width and height, so width: 100%, height: 100%; aspect-ratio: 1, for example, just ignores the aspect ratio. You can get what I want in the *full screen* by doing width: 100vw; height: 100vh; max-width: 100vh; max-height: 100vw, but there doesn't seem to be an equivalent of vw and vh for "the size of the container you're in". max-width: 100%; max-height: 100%; aspect-ratio: 1 works for *some* situations (where the child elements want to be big and also square) but doesn't work if the child elements are also wanting to decide their size based on the available space. I guess one option would be to bind the width and height of the parent element and change the style between `width: 100%` if parentHeight>parentWidth and `height: 100%' if parentWidth>parentHeight (with a fixed aspect-ratio either way), but I want to do this layout style quite frequently and all that binding would be a loving mess. Is there a way that works? (Parent element is often a cell of a display:grid element which may be making this better or worse since there's style elements for centering like that, but a grid element with width/height 100% seems frustratingly willing to break outside of the constraints it was given. In a pinch I could bind parent element dimensions and just do a lot of absolute positioning instead, but that would end up more like my old canvas app and I'm *trying* to take advantage of things that one would expect to make life easier!)
|
|
#
¿
Apr 9, 2024 03:49
|
|
|
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. 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:
|
|
#
¿
Apr 10, 2024 01:35
|
|
|
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 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 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. (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 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. 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
|
|
|
Is there a css thing for associating some style with a #shadow-root node itself? Specifically, I'm curious if I can do code:code:
|
|
#
¿
May 5, 2024 16:23
|
|
|
biznatchio posted:You can use the CSS selector :root in a stylesheet within a shadow DOM to refer to the shadow-root pseudo element.
|
|
#
¿
May 5, 2024 22:54
|
|
|
Hm, is there dynamic styling for shadowRoot too somehow? Typescript complains about code: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 posted:You can mutate the CSSStyleSheet you've already given it and have those changes take effect, yeah? 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
|
|
|
|
| # ¿ May 16, 2024 08:54 |
|
|
Combat Pretzel posted:Does anyone happen to know a package that implements a BST with sort of getNextSmallest/getNextLargest methods? 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
|
|