|
thank you all for the above help. I ended up giving up on React and just doing it all in Vue, which seemed to work! https://sheltered-mesa-21696.herokuapp.com/ Caution: Will autoplay music unless your browser blocks it.. Now I need to figure out how to get transitions to occur between API calls and then play a video as the in-between but i'm happy i've atleast been able to get it up and working lol. Thanks goons
|
# ? May 7, 2022 18:51 |
|
|
# ? May 16, 2024 17:14 |
|
If I do bitwise operations on indexes on an UInt32Array, do I get largely the same semantics as in "proper" typed languages, or will I get hosed by JavaScript number quirks? This is mostly about maintaining a huge bitmap of flags.
|
# ? May 9, 2022 18:14 |
|
JavaScript bitwise operations coerce all arguments to 32-bit signed integers beforehand and return a new 32-bit signed integer. If you're operating on the members of a UInt32Array then beware. Maximum array length is 2^32 - 1 so if you're operating on indices then, again, beware.
|
# ? May 9, 2022 18:47 |
|
I'm not even sure how to articulate this, but basically I'm wondering if it's possible to "instantiate" an Angular component from a string? Like if I have a component:code:
code:
code:
I've also tried: code:
I feel like this has to be possible but my GoogleFu is failing me
|
# ? May 12, 2022 19:02 |
|
Sab669 posted:I'm not even sure how to articulate this, but basically I'm wondering if it's possible to "instantiate" an Angular component from a string? Like if I have a component: Do you mean you want to have more control over dynamically loading a component? If so, look at this example, using createComponent
|
# ? May 12, 2022 19:18 |
|
That sounds like what I'm looking for, yes. Thank you.
|
# ? May 12, 2022 19:23 |
|
Can someone tell me why this doesn't work (or at least didn't work for me, and I spent way too much time on it before going with separate strings rather than an array):TypeScript code:
This was in a component which had 2 separate operations, each of which could succeed or fail separately, so my normal use of mui alerts was not appropriate, and I decided to go with a modal dialog with the messages mapped from the array. I'm using React hooks, version 18 Thanks! (by the way, the Awful app really doesn't like empty brackets)
|
# ? May 13, 2022 00:24 |
|
we might need some more code/clues for this one. it should be working I've had an issue similar to this, but it was around using react-tables which was caching old data and not updating the UI even when the state changed, but this might not be relevant.
|
# ? May 13, 2022 00:28 |
|
I haven’t done React in a while, but I’m guessing that at some point there are duplicate strings in the array which causes the key error and after that the component just shows wrong data
|
# ? May 13, 2022 11:04 |
|
teen phone cutie posted:we might need some more code/clues for this one. it should be working I ripped out all the array stuff when I gave up and went with individual strings, but I'll try to reconstruct it here: TypeScript code:
|
# ? May 13, 2022 14:21 |
|
LongSack posted:I ripped out all the array stuff when I gave up and went with individual strings, but I'll try to reconstruct it here: Did you try using something like _.cloneDeep? I have had issues where setting a variable equal to the state array just creates a reference to the state array, so when you manipulate what you think is the copy you're actually manipulating the original and can get all kinds of weird bugs. CloneDeep (and related solutions) create a brand new array in memory, which React likes much better. e: so like: code:
camoseven fucked around with this message at 14:45 on May 13, 2022 |
# ? May 13, 2022 14:35 |
|
LongSack posted:I ripped out all the array stuff when I gave up and went with individual strings, but I'll try to reconstruct it here: If you're just adding to existing state, use some form like this: TypeScript code:
|
# ? May 13, 2022 14:52 |
|
Yeah, I spent way too much time banging my head against it before finally giving up and moving on. Oh well, what I have now works just fine, so ... Also, is there an equivalent CSS shorthand property like margin-inline that sets the top and bottom margins? I can't seem to frame my google queries properly and all I'm getting is references to the four standard "margin-xxx" properties. I think the left/right and top/bottom shorthands are pretty new, since VS Code doesn't highlight them properly, but they do work (except in IE, of course).
|
# ? May 13, 2022 20:38 |
|
CSS code:
CSS code:
e: oh lol i misunderstood the question sorry teen phone cutie fucked around with this message at 22:04 on May 13, 2022 |
# ? May 13, 2022 20:56 |
|
LongSack posted:Yeah, I spent way too much time banging my head against it before finally giving up and moving on. Oh well, what I have now works just fine, so ... margin-inline / margin-inline-start / margin-inline-end = horizontal margin-block / margin-block-start / margin-block-end = vertical
|
# ? May 13, 2022 22:02 |
|
Thank you.
|
# ? May 13, 2022 23:11 |
|
HexiDave posted:Granted, I'm not sure why your function is failing the way it is - the "setMessages([...messages, msg])" should work as it's creating fresh state. JavaScript code:
JavaScript code:
|
# ? May 15, 2022 14:33 |
|
fakemirage posted:messages won't actually contain the value you expect in this case (see https://dev.to/adamklein/we-don-t-know-how-react-state-hook-works-1lp8#the-update-queue-and-lazy-computation). That describes exactly the behavior i was seeing, so thanks. I’ll read up on those links.
|
# ? May 15, 2022 23:03 |
|
Is there a way to detect whether a stream has been written to?code:
|
# ? May 16, 2022 13:21 |
|
I've created a PWA with react. I've installed the app to my phone (android) but as soon as the splash screen clears it launches the app in chrome rather than stand-alone. I've tried it in an android emulator and everything works great there. I also have other PWAs on my phone and they work as expected so I suspect it's some kind of configuration I've missed?
|
# ? May 17, 2022 12:35 |
|
Tea Bone posted:I've created a PWA with react. I'm not familiar with React, but what does the manifest.json look like?
|
# ? May 17, 2022 12:44 |
|
Thanks, it's just the standard manifest that's generated by create-react-app:code:
|
# ? May 17, 2022 12:59 |
|
Tea Bone posted:Thanks, it's just the standard manifest that's generated by create-react-app: It's hosted somewhere via https right? Can you run it through Google Lighthouse, specifically the PWA section, to see if something is missing there?
|
# ? May 17, 2022 13:19 |
|
The Merkinman posted:It's hosted somewhere via https right? Can you run it through Google Lighthouse, specifically the PWA section, to see if something is missing there? Ah this might be it. No, I'm still running it off local host at the moment and setting the 'treat as secure' flag in chrome. Thanks for your help.
|
# ? May 17, 2022 15:13 |
|
Nolgthorn posted:Is there a way to detect whether a stream has been written to? stream.write() will return a boolean when called. If you declare a null or undefined variable first and assign the value of stream.write() to it, as long as the value is boolean you’ll know something was written. JavaScript code:
|
# ? May 17, 2022 19:26 |
|
Usage of `.write` is out of my hands, that's why I want to check the stream object directly. The purpose is for my webapp library, I want to handle cases where the developer wrote something to the outgoing stream but didn't call `.end` for any reason. I guess there's no way to do it. The downside to not being able to check is the 'Content-Length` header being set to `0` and the status code being changed from `200` to `204`, even though there might be a body that was sent to the client. Probably not too big a deal. Nolgthorn fucked around with this message at 21:53 on May 18, 2022 |
# ? May 18, 2022 21:11 |
|
Make a wrapper object around the outstream that does these checks instead of passing around the outstream directly.
|
# ? May 19, 2022 02:15 |
|
Jabor posted:Make a wrapper object around the outstream that does these checks instead of passing around the outstream directly. That would make sense, completely. Unfortunately I'm a stick in the mud and I specifically want not to touch any of the native node tools. Your solution makes perfect sense I'm just not gonna do it. I'll maybe mention it in the documentation to "hold the phone correctly" so to speak.
|
# ? May 19, 2022 09:07 |
|
Would using a Proxy object for the stream wrapper be an option? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
|
# ? May 19, 2022 10:30 |
|
Node doesn't seem to want us to be able to inspect what's going on with a stream, maybe there's a good reason for that. If I start checking the `write()` method for use then I should also check `pipe()` or so on... I don't actually know how many ways there are to write to a stream. That might be all. It feels like it gets hairy, I just don't like hacky code. If a stream is meant to be an enigma then so it is, as long as I'm not working for someone who tells me differently.
|
# ? May 19, 2022 11:06 |
|
Not sure whether to put this question here, the front-end thread, of the web development thread, but I figure I'll start here. I have a React app that I just moved to an Azure web app host. The problem is that I'm using Auth0 for authentication, and Auth0 needs direct access to two URIs: /signin-callback and /signout-callback. It works locally when redirecting to localhost:3000/signin-callback, for example, but when trying the same thing to the Azure URL (https://jimcoemployeeportal.azurewebsites.net/signin-callback) it fails with a 404. I should note that this happens if I try to directly access any path other than "/". If I go there "internally" (say via <Link /> or useNavigate()) everything works great. Even on the employee portal, you can click either button on the "/" page (About or Disclaimer) and it navigates just fine, but if I try to navigate directly to /About it also 404s. I understand, I think, why it's happening - the "pages" in react aren't really pages in the traditional HTML sense, but I need a workaround. Google is telling me I need to do something with a web.config, but those answers are several years old, and I don't know if they are still applicable, and if so exactly what I need to put in there. Any ideas? Thanks.
|
# ? May 20, 2022 18:58 |
|
In a vanilla web page, when you click a link then the browser sends that URL to the web server and returns a response. However in a React Single-Page-App with routes configured, the React SPA will intercept the URL change event to scan the link to see if it matches a known route, and if it finds a match then the router code will update the browser page + URL client side, and no request is sent to the web server. (If there's no match then it gets sent to the web server as normal). So if you visit "/myapp/someroute" before the SPA is loaded, the SPA has no chance to intercept the request and render the page locally. The web server will be sent the "/myapp/someroute" request, and it'll shrug and give you a 404 because it doesn't know anything about that URL. If you visited "/" beforehand, then the SPA is loaded and intercepts the "/myapp/someroute" link click, and it works. To make it so "/myapp/someroute" works regardless of whether the SPA is loaded or not, you need to configure your webserver so that if it receives a request for either "/" or "/myapp/someroute" (or any other possibly SPA route), the server will respond with the same HTML/JS that loads your SPA. And the first thing your SPA should do when it loads is parse the current URL (don't assume it's "/") and render the appropriate sub-page. Your webserver config will need to look like: 1. If the URL matches "/sign-in-callback", return the "/sign-in-callback" HTML page 2. If the URL matches "/sign-out-callback", return the "/sign-out-callback" HTML page 3. Anything else, return the contents of "load_my_spa.html". Edit: on re-reading, it sounds like your "/sign-in-callback" and "/sign-out-callback" are also sub-pages within your SPA, in which case you can ditch (1) and (2) in the steps above and just have a simple blanket URL pattern match that always loads your SPA. minato fucked around with this message at 19:53 on May 20, 2022 |
# ? May 20, 2022 19:49 |
|
minato posted:3. Anything else, return the contents of "load_my_spa.html". And is this done in web.config? I've seen reponses that say to use this for a web.config: XML code:
That is to say, I don't know what to put in web.config to accomplish what I need to do.
|
# ? May 21, 2022 19:42 |
|
LongSack posted:This looks like it's rewriting URLs but neither of the examples listed (file, directory) look like a match. I'm not really handy with the operation and configuration of the actual web servers, and the few times I have messed with it it's been Apache, so IIS is a whole new thing.
|
# ? May 21, 2022 21:16 |
|
roomforthetuna posted:I'm not familiar with this form of config, but it looks to me like negate=true means "don't do this action when these conditions are met", i.e. rewrite to / if the given path *doesn't* point at a file or directory. Which it seems like is what you want. FWIW, adding that web.config to the public directory fixed the problem.
|
# ? May 22, 2022 14:15 |
|
I'm trying to write a function which will automatically update components based on a firebase realtime database updating. This is so two people could work on something simultaneously (a workout builder). The issue I'm running into is that each 'onValue' triggers a re-render, which re-triggers 'onValue' etc.. I've tried wrapping the onValue in a useEffect, which works but means it only updates once and doesn't 'setData' on a change. So I'm trying this which is very bodgy, but while it doesn't trigger an infinite loop it's not updating 'data', although I can see in the logs that it's returning the updated data on the value change. Any help appreciated if there's a more logical way to do this.JavaScript code:
|
# ? May 24, 2022 21:42 |
|
Rockybar posted:I'm trying to write a function which will automatically update components based on a firebase realtime database updating. This is so two people could work on something simultaneously (a workout builder). The issue I'm running into is that each 'onValue' triggers a re-render, which re-triggers 'onValue' etc.. I've tried wrapping the onValue in a useEffect, which works but means it only updates once and doesn't 'setData' on a change. So I'm trying this which is very bodgy, but while it doesn't trigger an infinite loop it's not updating 'data', although I can see in the logs that it's returning the updated data on the value change. Any help appreciated if there's a more logical way to do this. Not familiar with the onValue that seems be coming from firebase, so there might be something that needs to be figured out with that and useEffect. However, this line is suspect: code:
|
# ? May 25, 2022 00:52 |
|
I apologize in advance the the length of this post. I have a react app hosted on azure app service. It uses Auth0 for authentication. It works as expected on any desktop I've tried: Windows, Mac Catalyst, even Open-SUSE Linux. It does not work on any mobile device. I've tried my iPhone, iPad and even my office television (it's an android device with a web browser). What appears to happen is that in my authorization context, it hits a certain line and just stops. No error message, nothing on the console, it just ... stops. Trimmed code below: TypeScript code:
|
# ? May 25, 2022 14:53 |
|
If you create a new Auth0Client via the constructor and call getTokenSilently yourself, instead of using createAuth0Client, does that give you more insight into which part is breaking?
|
# ? May 25, 2022 15:05 |
|
|
# ? May 16, 2024 17:14 |
|
The Dark Wind posted:Not familiar with the onValue that seems be coming from firebase, so there might be something that needs to be figured out with that and useEffect. However, this line is suspect: Thanks, this was one issue out of a few. Took a few hours of head scratching but came up with this solution: JavaScript code:
|
# ? May 25, 2022 16:36 |