|
fs is a node module, it won’t exist in browser environments.
|
# ? Jul 9, 2021 23:22 |
|
|
# ? May 16, 2024 18:30 |
|
Something like that's I'd still use WordPress as the backend cms using wpgraphql and then next as the front end if I don't want to bother with pho.
|
# ? Jul 9, 2021 23:57 |
|
I'm trying to use a webscoket library in a react App (specifically react-actioncable-provider), but I'm having some problems with the React life cycle in functional components. I've got it working with classical components with something similar to this: code:
If I don't include the code:
I thought I would be able to replicate this in a functional component using a ref: code:
I thought I would be able to get around this with useEffect with 'messages' as a dependency but that causes a new connection to the web socket after every time messages updates. I don't think this is a react-action-cable-provider problem or even a web socket problem rather just me missing something about the component life cycle in react. I can deal with having the odd classical component if need be but I'd really like to keep everything as functional components if possible. Tea Bone fucked around with this message at 14:14 on Jul 13, 2021 |
# ? Jul 13, 2021 13:20 |
|
Tea Bone posted:I'm trying to use a webscoket library in a react App (specifically react-actioncable-provider), but I'm having some problems with the React life cycle in functional components. Looks like you're passing this.handleRecieved still, but you changed that to a regular const, so you should just pass handleRecieved instead. Also, you may need to have the function declaration before the usage. e: Also if you're just starting out it's probably not worth it yet, but as you get more comfortable Typescript can catch issues like this for you, and I highly recommend it.
|
# ? Jul 13, 2021 13:44 |
|
Ah sorry, no that's just from where I was copy and pasting in the post. In my app I do indeed just pass handleReceived. I assume it's something to do with the handleReceived function using the messages state from when it was passed to the ActionCableConsumer component in the ref
|
# ? Jul 13, 2021 14:17 |
|
Tea Bone posted:Ah sorry, no that's just from where I was copy and pasting in the post. In my app I do indeed just pass handleReceived. Correct, you are simply re-rendering the exact same "initial" component there there that is stored in the ref, which will never update. That library is very old, and whole it may work now, it is using lots of deprecated syntax / lifecycle methods. Looks like there are open issue reports on that in the repo (https://github.com/cpunion/react-actioncable-provider/issues/27) and a fix someone submitted two years ago (https://github.com/cpunion/react-actioncable-provider/pull/26) that has not been merged, since the project looks abandoned. If I were doing something like this, ActioncableConsumer would not be a component, but a hook, and my code would likely look akin to: JavaScript code:
Lumpy fucked around with this message at 16:33 on Jul 13, 2021 |
# ? Jul 13, 2021 16:31 |
|
Lumpy posted:Correct, you are simply re-rendering the exact same "initial" component there there that is stored in the ref, which will never update. This is great thanks. I figured at some point I'd need to ditch the library and implement my own, which I still might but this looks like it should simplify things for the time being.
|
# ? Jul 13, 2021 17:16 |
|
Fixins posted:Something like that's I'd still use WordPress as the backend cms using wpgraphql and then next as the front end if I don't want to bother with pho. Would you still do that if you weren't using a blog? Like is there a benefit to using WP to hold the HTML for the pages? Right now I don't even do that, I have a custom-built plugin in WP to load HTML into the main loop for pages, with WP itself just providing everything in the head tag. So the only people that really concern themselves with WP's backend are the SEO team who configures Yoast and all that.
|
# ? Jul 13, 2021 19:55 |
|
Tea Bone posted:I'm trying to use a webscoket library in a react App (specifically react-actioncable-provider), but I'm having some problems with the React life cycle in functional components. Tea Bone posted:This is great thanks. I figured at some point I'd need to ditch the library and implement my own, which I still might but this looks like it should simplify things for the time being. I've been learning about useCallback and useMemo. If you are using a functional component, and you were having problems with re-rendering would that be a good use case for useMemo? Additionally for code:
To be clear: 1) I've never had to do anything remotely related to websockets so I don't know anything about writing code for it. 2) I've only started reading up on useCallback and useMemo the other day, so I was just wondering if that would apply in this case.
|
# ? Jul 14, 2021 00:49 |
|
LifeLynx posted:Would you still do that if you weren't using a blog? Like is there a benefit to using WP to hold the HTML for the pages? Right now I don't even do that, I have a custom-built plugin in WP to load HTML into the main loop for pages, with WP itself just providing everything in the head tag. So the only people that really concern themselves with WP's backend are the SEO team who configures Yoast and all that. I've never really used it to hold HTML, instead I've used it for data management. So for example I have CPTUI and ACF installed on that WordPress and I use wpgraphql to expose that data and use it to dynamically make pages in nextjs. I guess it's still essentially a "blog" type website though. https://search.nhlovescampers.com/camps?city=all&campfeatures=all®ion=all&camptype=all Here's the NextJS site I made that utilizes this to store the campgrounds and coordinates for the map. It seems to be working okay.
|
# ? Jul 15, 2021 03:30 |
|
UtahIsNotAState posted:I've been learning about useCallback and useMemo. If you are using a functional component, and you were having problems with re-rendering would that be a good use case for useMemo? Additionally for Thanks, yeah I was thinking wrapping handleReceived in useCallback might be along the lines of what I want, with the messages as a dep, but I expect that will just cause the re-connection to happen since it will pass the function in as a new prop. It's working exactly as needed in a classical component with: code:
|
# ? Jul 15, 2021 11:34 |
|
|| is or so if the left hand this.consumer is defined already, it never looks at the right side of the or operator if the left hand this.consumer is undefined, it looks at the right side of the or operator and performs the assignment operation. So the first time it runs, this.consumer on the left side is undefined. It looks at the right side and performs the assignment operation, assigning the value of <ActionCableConsumer .../> to this.consumer. On all other lifecycles of the component this.consumer is already defined (as <ActionCableConsumer .../>) so it doesn't do anything with the right side of the || operator. If you wanted to do that on a functional component, I'd use useEffect code:
Sous Videodrome fucked around with this message at 22:48 on Jul 20, 2021 |
# ? Jul 20, 2021 22:42 |
|
Yeah, moving it to useEffect was one of my first inclinations but that had the same problem where handleReceived would never access the updated state. I get that the "||" is an "or" and what that's doing. What I don't understand is how "this.consumer" in a class component is scoped differently to putting the consumer in a state in a functional component which allows the class variant to access the updated sate in handleReceived. It doesn't matter too much, as was suggested earlier I should probably switch to a newer library anyway but I'm just curious now what's going on under the hood.
|
# ? Jul 21, 2021 14:10 |
|
Anyone familiar with Angular? I was trying to help a student working with it and, boy howdy, am I not experienced with this framework enough to figure out what we are doing wrong here. So, we get all content dynamically from a backend API. This works great up to a point. The main menu, for instance, is getting everything generated fine, but when we access the routerLink for a topic from this menu, on the first time it activates what's on ngOnInit and loads the data correctly (there's an Angular service call here, which gets the data from an Observable, which I gather is the correct way to do this), but after that, every other click on the menu does nothing even though the URL parameters change in the browser. ngOnInit is only called once and never again after the first click in the menu, even though we are accessing different pages in this route. My assumption is that ngOnInit is not supposed to be used in this way, then. The Angular tutorials I found don't seem to point out what we should be doing instead though, and what few StackOverflow answers I found were people hacking and hammering things around this limitation. Saoshyant fucked around with this message at 15:16 on Aug 3, 2021 |
# ? Aug 3, 2021 15:13 |
|
Saoshyant posted:Anyone familiar with Angular? I was trying to help a student working with it and, boy howdy, am I not experienced with this framework enough to figure out what we are doing wrong here. You might have better luck in the Modern Front-end Development thread, but I'll put in my two cents. If the URL parameters are changing, you need to subscribe to said changes. ngOnIt only fires once, so that's why no future clicks are doing anything. this should be a quick enough explanation. Whatever you want to happen when the menu is clicked, would go in place of the console.log(param)
|
# ? Aug 3, 2021 15:30 |
Saoshyant posted:Anyone familiar with Angular? I was trying to help a student working with it and, boy howdy, am I not experienced with this framework enough to figure out what we are doing wrong here. ngOnInit is only ever called once according to the docs. It looks like you're trying to respond to the routing data changing? I'm not quite clear what your desired behaviour is exactly. Please provide a bit more detail about the app structure, and what changes/actions you expect to propagate. Maybe have a look here: https://ultimatecourses.com/blog/exploring-angular-lifecycle-hooks-onchanges
|
|
# ? Aug 3, 2021 15:30 |
|
Osmosisch posted:ngOnInit is only ever called once according to the docs. It looks like you're trying to respond to the routing data changing? I'm not quite clear what your desired behaviour is exactly. Please provide a bit more detail about the app structure, and what changes/actions you expect to propagate. The desired behavior is exactly what you described: responding to the routing data changing. There's a main menu being loaded in the app.component. That main menu routes to different components depending on what kind of subsection is listed, and every one of those components makes a call to a service (which calls a backend API to collect the data). Clicking once on a link like /dongs/Dong-1 works the first time, but if the user clicks on /dongs/Dong-2 nothing happens because the service call is in ngOnInit and it only fires once (and our unfamiliarity with the framework just got us as far as, "this is probably not the right way to do this"). I'll review the onchanges hooks stuff you linked and see if I can take it from here. The Merkinman posted:this should be a quick enough explanation. Edit: actually, this may be right answer. That pipe/subscribe over the queryParamMap may be the missing piece of the puzzle on how this stuff should work. Gonna test it out. Saoshyant fucked around with this message at 15:48 on Aug 3, 2021 |
# ? Aug 3, 2021 15:45 |
|
Saoshyant posted:The desired behavior is exactly what you described: responding to the routing data changing. There's a main menu being loaded in the app.component. That main menu routes to different components depending on what kind of subsection is listed, and every one of those components makes a call to a service (which calls a backend API to collect the data). Clicking once on a link like /dongs/Dong-1 works the first time, but if the user clicks on /dongs/Dong-2 nothing happens because the service call is in ngOnInit and it only fires once (and our unfamiliarity with the framework just got us as far as, "this is probably not the right way to do this"). What I posted was for query parameters /?dong=1, /?dong=2. What you are showing, /dongs/Dong-1, /dongs/Dong-2 are route changes, which are different but similar The Merkinman fucked around with this message at 18:03 on Aug 3, 2021 |
# ? Aug 3, 2021 15:56 |
|
Alright, I'm trying to do this the React way and not seeing a good way to do it. In the non-React world, I've done things like this:code:
What I want is to be able to do something like this: code:
Am I thinking about this the wrong way? It took me a while to accomplish my previous goal of getting WPGraphQL to cooperate, so my brain is mush.
|
# ? Aug 4, 2021 20:37 |
|
I recently got frustrated at the bullshit in Path of Exile where most English speaking players never reply to you when trading for low value items. Path of Exile does everything through a webpage. Here is my tampermonkey script to remove all English sellers from bulk item search.code:
For https://www.pathofexile.com/trade/exchange/Expedition Before After This is the site where the page works. You need to select what currency you want and what currency/currencies you have. The api will be called and then render all the offers. This script is very simple since there is a convenient img alternate text with "en_US" and I use Jquery to remove it. Now to put where my experience is as a "developer", I am not a developer. I use javascript to attack iphone/android phones, find hidden "secrets" in application pentesting (the worst was some dev putting all the server u/p in a base64 string that had to be decoded), and write regex to automatically use javascript functions to expose "sensitive" actions. What I haven't actually learned is programming good javascript. Now the issue. The other half of the trade page. https://www.pathofexile.com/trade/search/Expedition/dVKOIJ The search for an "Astramentis" unique amulet looks like this. The render does not include that convenient flag icon but it does include the "Whisper" button which, when clicked (and only when clicked), will copy to your clipboard a message in the user's language. This information is fetched from the DOM array that comes from one to many previous API calls (https://www.pathofexile.com/api/trade/fetch/[comma seperated list of first ten userIDs selling the item]?query=dVKOIJ[/u]) Writing a one liner script is basically impossible. I need to either a) read the JSON and link up that userId (which is a div with an attribute data-id of the users ID) so I know which to hide (or unhide) or b) run javascript as the CSS loads (which I don't know how to inject into running JS) and skip all rendering that has the id in function so I can check each as they load but that sounds it would slow down the site immensely. For A, the issue would be there are many API calls depending how far down you scroll and the array could be giant. The B the issue would be my unfamiliarity with inserting the tampermonkey actions (or know which run-at would actually do this. documentation is... not very descriptive of this to me) as the javascript of the page runs. What say you, masters of javascript?
|
# ? Aug 5, 2021 16:34 |
LifeLynx posted:Alright, I'm trying to do this the React way and not seeing a good way to do it. In the non-React world, I've done things like this: Maybe throw up a fiddle/codepen with the minimal attempt you describe above? In general setting classes and other properties via react isn't an issue, and the hook listed in the package you linked should do what you want.
|
|
# ? Aug 5, 2021 16:57 |
|
LifeLynx posted:Alright, I'm trying to do this the React way and not seeing a good way to do it. In the non-React world, I've done things like this: This does not directly answer your question, but I do things like this using react-hook-inview: JavaScript code:
Lumpy fucked around with this message at 21:53 on Aug 5, 2021 |
# ? Aug 5, 2021 21:48 |
|
Lumpy posted:This does not directly answer your question, but I do things like this using react-hook-inview: Thanks for sharing, it made me see something similar between react-intersection-observer and react-hook-inview. I think I'm supposed to wrap each element I want to animate in a component, or use a component for each element. RIO has a "use as" feature, like InView as="section". I'm wondering if I'd need to do that instead of trying to simply toggle a class on an existing element, because of the way React handles state? Maybe isVisible doesn't update for each component, just everything with ref={ref} as a whole? I admit I'm not up to date with the whole state stuff.
|
# ? Aug 6, 2021 20:37 |
|
EVIL Gibson posted:For A, the issue would be there are many API calls depending how far down you scroll and the array could be giant. The B the issue would be my unfamiliarity with inserting the tampermonkey actions (or know which run-at would actually do this. documentation is... not very descriptive of this to me) as the javascript of the page runs. Just try A and prevent your script from hammering the API too hard by caching IDs in localStorage or sessionStorage (if you're worried the players will change languages often) IMO
|
# ? Aug 6, 2021 20:58 |
|
Is there a way to beep the PC speaker via javascript?
|
# ? Aug 6, 2021 21:10 |
|
Tunicate posted:Is there a way to beep the PC speaker via javascript? Begone, demon!
|
# ? Aug 6, 2021 21:28 |
|
Tunicate posted:Is there a way to beep the PC speaker via javascript? What do you mean by a PC speaker? I don't think you can tell if someone is using speakers or headphones. You can use <audio> to play a beep.
|
# ? Aug 6, 2021 21:30 |
|
Tunicate posted:Is there a way to beep the PC speaker via javascript? JavaScript code:
|
# ? Aug 6, 2021 21:31 |
|
Biowarfare posted:What do you mean by a PC speaker? I don't think you can tell if someone is using speakers or headphones. I think he's referring to that obsolete little pulse signal driven speaker in old PCs that just beeps, or produces harsh 1-bit noise if you really want to have a go at it.
|
# ? Aug 6, 2021 21:32 |
|
gbut posted:I think he's referring to that obsolete little pulse signal driven speaker in old PCs that just beeps, or produces harsh 1-bit noise if you really want to have a go at it. I have not experienced this, who builds a speaker into the computer itself? Laptops? I know some VMs I have will play some sounds on boot but they play via the regular audio stack.
|
# ? Aug 6, 2021 21:35 |
|
Biowarfare posted:I have not experienced this, who builds a speaker into the computer itself? Laptops? I know some VMs I have will play some sounds on boot but they play via the regular audio stack. In the olden times, all IBM Compatibles (TM) came with a built in beeper (a piezzo speaker usually) that would beep the boot error codes and such. If you had a sound card, and maybe a CD rom drive, it would have been a Multimedia PC (TM) but those were expensive and rare early on. There's a package for doing beeps, but I doubt anyone bothers maintaining something that would allow you to send custom signals via node. https://www.npmjs.com/package/node-beep E: the speaker was not necesarily limited to PC compats. Even earlier systems used ASCII "bell" (code 7 I posted above) that would produce audible "warning". On macs it was replaced by that default "boink" sound coming from the sound card. I haven't touched PC hardware internals in a decade or so, but I believe motherboards should come with a tiny piezzo speaker for the boot issue signaling, as it would be useful when stuff goes sideways. gbut fucked around with this message at 21:43 on Aug 6, 2021 |
# ? Aug 6, 2021 21:38 |
|
now my question becomes how is anything that legacy and historical even capable of running modern javascript
|
# ? Aug 6, 2021 21:40 |
|
It's still all higher or lower voltage that gets interpreted as ones and zeroes, when you look deep enough. Even your node/browser code. Just like ENIAC and the like.
|
# ? Aug 6, 2021 21:46 |
|
LifeLynx posted:Thanks for sharing, it made me see something similar between react-intersection-observer and react-hook-inview. I think I'm supposed to wrap each element I want to animate in a component, or use a component for each element. RIO has a "use as" feature, like InView as="section". I'm wondering if I'd need to do that instead of trying to simply toggle a class on an existing element, because of the way React handles state? Maybe isVisible doesn't update for each component, just everything with ref={ref} as a whole? I admit I'm not up to date with the whole state stuff. I took a quick look at their docs, and if you want each component to animate on it's own when coming into view (by changing the class name) you can do it via hooks in every individual component if they need different classes applied: JavaScript code:
JavaScript code:
You can also do the same stuff inline using their InView component which uses the (yucky, in my opinion) render prop pattern: JavaScript code:
|
# ? Aug 6, 2021 22:23 |
|
gbut posted:I think he's referring to that obsolete little pulse signal driven speaker in old PCs that just beeps, or produces harsh 1-bit noise if you really want to have a go at it. Yeah the one that's used for beep codes at boot. Usually built into the motherboard nowadays but I just kept calling it the PC speaker
|
# ? Aug 7, 2021 00:38 |
Biowarfare posted:I have not experienced this, who builds a speaker into the computer itself? Laptops? I know some VMs I have will play some sounds on boot but they play via the regular audio stack. thanks for making me feel old, jerk
|
|
# ? Aug 7, 2021 02:31 |
|
That reminded me of the pinball games which had amazing sound quality for PC speaker. https://www.youtube.com/watch?v=yb8mLBa3dcg https://www.youtube.com/watch?v=ts069msIzg0
|
# ? Aug 8, 2021 22:18 |
|
Biowarfare posted:I have not experienced this, who builds a speaker into the computer itself? Laptops? I know some VMs I have will play some sounds on boot but they play via the regular audio stack. This is from the manual of a reasonably new motherboard - X570 chipset, so probably came out about a year ago. It's still there, but a lot of people won't hook it up, partially because it could usually still make noise even if the OS volume was muted.
|
# ? Aug 9, 2021 14:28 |
|
Biowarfare posted:now my question becomes how is anything that legacy and historical even capable of running modern javascript My computer beeps when I turn it on and manages to run javascript
|
# ? Aug 9, 2021 17:11 |
|
|
# ? May 16, 2024 18:30 |
|
This thread is making me consider writing a floppy drive rattle node package.
|
# ? Aug 9, 2021 17:21 |