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 »

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

LifeLynx posted:

Could I use WordPress for the same effect? I know PHP is kind of disdained here, but I know it well. I know I can read from the API, but post to?

You probably could but I've never heard of anyone using wordpress just as a backend before.

Heres a rails tutorial that goes over exactly what you're trying to do https://scotch.io/tutorials/build-a-restful-json-api-with-rails-5-part-one

Probably should have read your initial question before responding ahaha. TBH if you're just starting out in actual http request stuff in react, it might be overkill to learn rails right now. Firestore or firebase (two different real time db google offers) is a good starting point to get used to requesting and saving data from the front end, and their inadequacies in relational data will help you in knowing what you want something like rails or django to do (theres more than those two in the relational db world as well).

I would take a look at that tutorial and see if its interesting to you, learning even the basics of an actual production ready backend system will help even if you dont plan on going into the backend world.

ddiddles fucked around with this message at 17:05 on Apr 26, 2019

# ? Apr 26, 2019 17:01

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 22:39

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

ddiddles posted:

Firestore or firebase (two different real time db google offers)

So Google.

# ? Apr 26, 2019 18:23

Volguus: Mar 3, 2009

Lumpy posted:

The JSON fields on PostGRE make it so good that unless there is a compelling reason *not* to use it, you should use it. Gives you the "just throw unstructured data in there" ability of NoSQL things, but it's easily searchable and you have all the good stuff you want a relational DB for as well.

You should always prefer to use the relational DB as a relational DB, don't just throw crap into JSON columns. Use JSON if and when you need to, consciously and with great care.

# ? Apr 26, 2019 18:24

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

ddiddles posted:

You probably could but I've never heard of anyone using wordpress just as a backend before.

It came up in... one of the five webdev threads. Apparently it has either a built-in JSON API or a plugin that does that.

# ? Apr 26, 2019 18:48

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

Thermopyle posted:

So Google.

AWS also has one but I would never willingly point someone towards that UI.

# ? Apr 26, 2019 20:35

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Volguus posted:

You should always prefer to use the relational DB as a relational DB, don't just throw crap into JSON columns. Use JSON if and when you need to, consciously and with great care.

Correct. I was pointing out that the ability to handle unstructured data in a sane(r) manner should you need it was a selling point of PostGRE vs MySQL.

# ? Apr 26, 2019 22:50

spiritual bypass: Feb 19, 2008; Grimey Drawer

Wordpress ends up being pretty slow as an API backend. Each request fires all the same hooks as a full pageload. I've heard of better experiences doing headless Drupal, but I don't really like using CMSes in general myself.

# ? Apr 26, 2019 23:10

susan b buffering: Nov 14, 2016

Lots of talk about postgres and mysql but sqlite is quite alright for most websites. I tend to use it because it's one less server process to worry about / configure and the db itself being just a file that can be versioned and easily moved around is extremely good, to me.

# ? Apr 28, 2019 07:47

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

Yeah, sqlite is great for small sites, especially read heavy.

# ? Apr 28, 2019 17:27

RC Cola: Aug 1, 2011; Dovie'andi se tovya sagain

Question about firebase. I'm trying to make a multiplayer rock paper scissors game.

There is a form and when the user enters their user name it saves it in this users folder.

How do I have it so once the user enters their name, it locks their client into that name so when they click on a button it registers that user1 clicked it, and saves it into that same users's folder?

https://github.com/Royal-Crown-Cola/Pokefite-Multiplayer

This is what I have so far. I have it saving usernames but I can't pull the names that are entered.

Any advice would be appreciated. I'm just learning firebase and its my first time really working with a database

# ? Apr 29, 2019 19:09

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Not being able to use traditional if/else statements inside a return in React is throwing me. How do I make it so .price-usd just says "N/A" if cardName.prices.usd is undefined?

code:

return (
        <section id="price-check-body">
        <form id="price-check-search" onSubmit={(searchSubmit) => {searchSubmit.preventDefault();}}>
            <input id="search-field" type="text" onFocus={handleClick} value={searchInput} onChange = {
                (searchCard) => {
                setSearchInput(searchCard.target.value);
                console.log("Searched");
                }
            }
            ></input>
        </form>
        
        <aside id="search-results-box">
            <span id="price-check-num-results">{searchResultData.total_cards} Results Found</span>
            <ul id="price-check-list">
                <li id="price-check-key">
                    <span>NAME</span>
                    <span>SET</span>
                    <span>PRICE</span>
                    <span>FOIL</span>
                </li>

                {
                    cardNames
                        .map(
                            (cardName) => {
                                return (
                                <li key={cardName.id}>
                                    <span className="price-name">{cardName.name}</span>
                                    <span className="price-set">{cardName.set}</span>
                                    <span className="price-usd">${cardName.prices.usd}</span>
                                    <span className="price-usd_foil">${cardName.prices.usd_foil}</span>
                                </li>
                                )
                            }
                        )
                }
            </ul>
        </aside>
        </section>
      )

# ? Apr 29, 2019 21:46

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

Not being able to use traditional if/else statements inside a return in React is throwing me. How do I make it so .price-usd just says "N/A" if cardName.prices.usd is undefined?

JavaScript code:

<span className="price-usd">
{cardName.prices.usd ?  `$${cardName.prices.usd}` : "N/A"}
</span>

# ? Apr 29, 2019 21:55

The Fool: Oct 16, 2003

Why double $$ ?

# ? Apr 29, 2019 22:01

Ahz: Jun 17, 2001; PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

Lumpy posted:

JavaScript code:

<span className="price-usd">
{cardName.prices.usd ?  `$${cardName.prices.usd}` : "N/A"}
</span>

Or you derived the rendered value before the return as another var and just render that.

# ? Apr 29, 2019 22:02

LifeLynx: Feb 27, 2001; Dang so this is like looking over his shoulder in real-time; Grimey Drawer

Lumpy posted:

JavaScript code:

<span className="price-usd">
{cardName.prices.usd ?  `$${cardName.prices.usd}` : "N/A"}
</span>

Thanks, that worked! I'm having trouble parsing it though, like I'm not sure what that statement is doing in plain English. Is there another way to write it?

Ahz posted:

Or you derived the rendered value before the return as another var and just render that.

I thought about doing that before the return, but since it's in a map I'm not sure if that's even possible, because whatever function I'm writing above the return to check would have to sync up somehow?

# ? Apr 29, 2019 22:06

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Fool posted:

Why double $$ ?

The first one is a dollar sign, the second one is the "Hey, this is a variable" flag in the template string.

# ? Apr 29, 2019 22:26

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

LifeLynx posted:

Thanks, that worked! I'm having trouble parsing it though, like I'm not sure what that statement is doing in plain English. Is there another way to write it?

JavaScript code:

<span className="price-usd">
{cardName.prices.usd ?  `$${cardName.prices.usd}` : "N/A"}
</span>

It's the ternary operator and it is logically sot of equivalent to:

JavaScript code:

<span className="price-usd">
{ 
   if(cardName.prices.usd) {  
      return `$${cardName.prices.usd}`  // template string that uses your value
    } else {
      return "N/A" // plain old string
   }
</span>

Very handy in React.

# ? Apr 29, 2019 22:33

The Fool: Oct 16, 2003

Lumpy posted:

The first one is a dollar sign, the second one is the "Hey, this is a variable" flag in the template string.

I thought that was what the curly braces indicated.

edit: nm, it's because of the backtick. otherwise you would need to do something like this:

code:

{cardName.prices.usd ? "$" + cardName.prices.usd : "N/A"}

The Fool fucked around with this message at 22:48 on Apr 29, 2019

# ? Apr 29, 2019 22:37

geeves: Sep 16, 2004

ddiddles posted:

Just use rails and enjoy your life...

...while you can because you will put knives to your wrists within a year that you didn't choose Kotlin.

# ? Apr 30, 2019 03:35

SimonChris: Apr 24, 2008; The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.; Grimey Drawer

Lumpy posted:

JavaScript code:

<span className="price-usd">
{cardName.prices.usd ?  `$${cardName.prices.usd}` : "N/A"}
</span>

It's the ternary operator and it is logically sot of equivalent to:

JavaScript code:

<span className="price-usd">
{ 
   if(cardName.prices.usd) {  
      return `$${cardName.prices.usd}`  // template string that uses your value
    } else {
      return "N/A" // plain old string
   }
</span>

Very handy in React.

If you really like the look of classic if/else, you can use a self-executing function:

JavaScript code:

<span className="price-usd">
  {(() => {
     if(cardName.prices.usd) {  
        return `$${cardName.prices.usd}`  // template string that uses your value
      } else {
        return "N/A" // plain old string
     }
  })()}
</span>

I like to use this syntax for more complicated conditions, that are nonetheless simple enough that I want to keep them inline.

You can easily add nested conditions, switch statements and stuff like that in this way.

# ? Apr 30, 2019 10:27

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

geeves posted:

...while you can because you will put knives to your wrists within a year that you didn't choose Kotlin.

This may be the first time I've ever heard anyone advocate for using Kotlin to develop web application servers.

# ? Apr 30, 2019 17:39

huhu: Feb 24, 2006

code:

    const [downVotes, setDownVotes] = useState([])
    const [upVotes, setUpVotes] = useState([])
    const [currentItem, setCurrentItem] = useState()

    const setupEventListeners = () => {
        window.addEventListener('keydown', event => {
            const LEFT_ARROW = '37'
            const RIGHT_ARROW = '39'
            if (event.keyCode == LEFT_ARROW) {
                handleDownVote()
            } else if (event.keyCode == RIGHT_ARROW) {
                handleUpVote()
            }
        })
    }
    useEffect(setupEventListeners, [])

    const componentDidMount = () => {
        getNextItem()
    }
    useEffect(componentDidMount, [])

    const getNextItem = () => {
        setCurrentItem(contentQueue.pop())
    }

    const handleDownVote = () => {
        const modifiedDownVotes = [...downVotes, currentItem]
        setDownVotes(modifiedDownVotes)
        getNextItem()
    }

    const handleUpVote = () => {
        const modifiedUpVotes = [...upVotes, currentItem]
        console.log(upVotes, currentItem)
        setUpVotes(modifiedUpVotes)
        getNextItem()
    }

    return (
        <div>
            <DownVoteButton onClick={handleDownVote}>Down</DownVoteButton>
            <UpVoteButton onClick={handleUpVote}>Up</UpVoteButton>
            <Card color={currentItem} />
        </div>
    )

I've got the above snippet of code inside of a React function component. When I press the DownVoteButton or UpVoteButton, their respective functions get called correctly. If I press the arrow keys, `console.log(upVotes, currentItem)` spits out `[] undefined`. Any ideas why

# ? May 1, 2019 01:16

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

huhu posted:

code:

    const [downVotes, setDownVotes] = useState([])
    const [upVotes, setUpVotes] = useState([])
    const [currentItem, setCurrentItem] = useState()

    const setupEventListeners = () => {
        window.addEventListener('keydown', event => {
            const LEFT_ARROW = '37'
            const RIGHT_ARROW = '39'
            if (event.keyCode == LEFT_ARROW) {
                handleDownVote()
            } else if (event.keyCode == RIGHT_ARROW) {
                handleUpVote()
            }
        })
    }
    useEffect(setupEventListeners, [])

    const componentDidMount = () => {
        getNextItem()
    }
    useEffect(componentDidMount, [])

    const getNextItem = () => {
        setCurrentItem(contentQueue.pop())
    }

    const handleDownVote = () => {
        const modifiedDownVotes = [...downVotes, currentItem]
        setDownVotes(modifiedDownVotes)
        getNextItem()
    }

    const handleUpVote = () => {
        const modifiedUpVotes = [...upVotes, currentItem]
        console.log(upVotes, currentItem)
        setUpVotes(modifiedUpVotes)
        getNextItem()
    }

    return (
        <div>
            <DownVoteButton onClick={handleDownVote}>Down</DownVoteButton>
            <UpVoteButton onClick={handleUpVote}>Up</UpVoteButton>
            <Card color={currentItem} />
        </div>
    )

Could be since you aren�t clearing your event handlers in useEffect it�s calling ones from the first render so it�s still the initial value. Then again it�s late and I�m phone posting.

# ? May 1, 2019 01:27

huhu: Feb 24, 2006

Lumpy posted:

Could be since you aren�t clearing your event handlers in useEffect it�s calling ones from the first render so it�s still the initial value. Then again it�s late and I�m phone posting.

I tried the following and got the same result:

code:


    const handleKeyDown = event => {
        const LEFT_ARROW = '37'
        const RIGHT_ARROW = '39'
        if (event.keyCode == LEFT_ARROW) {
            handleDownVote()
        } else if (event.keyCode == RIGHT_ARROW) {
            handleUpVote()
        }
    }

    const setupEventListeners = () => {
        window.addEventListener('keydown', handleKeyDown)

        return () => window.removeEventListener('keydown', handleKeyDown)
    }
    useEffect(setupEventListeners, [])

# ? May 1, 2019 01:51

Roadie: Jun 30, 2013

JS will probably also have do expressions eventually do make that ternary stuff easier in React-like contexts, though I imagine it'll take a while to get there.

# ? May 1, 2019 02:00

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

huhu posted:

code:

    const [downVotes, setDownVotes] = useState([])
    const [upVotes, setUpVotes] = useState([])
    const [currentItem, setCurrentItem] = useState()

    const setupEventListeners = () => {
        window.addEventListener('keydown', event => {
            const LEFT_ARROW = '37'
            const RIGHT_ARROW = '39'
            if (event.keyCode == LEFT_ARROW) {
                handleDownVote()
            } else if (event.keyCode == RIGHT_ARROW) {
                handleUpVote()
            }
        })
    }
    useEffect(setupEventListeners, [])

    const componentDidMount = () => {
        getNextItem()
    }
    useEffect(componentDidMount, [])

    const getNextItem = () => {
        setCurrentItem(contentQueue.pop())
    }

    const handleDownVote = () => {
        const modifiedDownVotes = [...downVotes, currentItem]
        setDownVotes(modifiedDownVotes)
        getNextItem()
    }

    const handleUpVote = () => {
        const modifiedUpVotes = [...upVotes, currentItem]
        console.log(upVotes, currentItem)
        setUpVotes(modifiedUpVotes)
        getNextItem()
    }

    return (
        <div>
            <DownVoteButton onClick={handleDownVote}>Down</DownVoteButton>
            <UpVoteButton onClick={handleUpVote}>Up</UpVoteButton>
            <Card color={currentItem} />
        </div>
    )

I think your setupEventListeners effect is closing over the handleDownVote and handleUpVote function calls. Add upVotes, downVotes, and currentItem to the "dependency array" of the effect so that every time those values change, you create new closures with the updated values. Also yeah, make sure to return a cleanup function from the effect. The computational cost of adding and removing a couple of event listeners every update is totally marginal.

code:

const setupEventListeners = () => {
        window.addEventListener('keydown', handleKeyDown)

        return () => window.removeEventListener('keydown', handleKeyDown)
    }
    useEffect(setupEventListeners, [upVotes, downVotes, currentItem])

A much less great & more hacky way to do it would be to use setCurrentItem with an updater function to read the current value of currentItem and then another updater function for setUp/DownVotes to read/set that.

code:

    // Would be similar for handleUpVote...
    const handleDownVote = () => {
        setCurrentItem(currentItem => {
          setDownVotes(downVotes => {
            const modifiedDownVotes = [...downVotes, currentItem]
            getNextItem()
            return modifiedDownVotes;
          });
          return currentItem;
        });
    }

Note you have to explicitly return currentItem even though it hasn't changed or else the function will return undefined and set currentItem to that.

# ? May 1, 2019 09:15

Nakedyoghurt: Apr 27, 2015

I'm trying to create a webscraper that fetches my hand history from a poker web app, using the selenium module with python. I'm passing js code to the selenium module to execute, but im getting kind of stuck.
so far i have been able to log in and navigate to the history page. But for some reason i can't seem navigate through the dates.

The snippet below works fine and takes me to the history page shown below:

code:

driver.execute_script("document.getElementsByClassName('menu-item')[3].click()")

checking class names

trying click() on the arrow classes. I have checked that the correct object/class was selected before trying the click() method.

Any help is appreciated.

# ? May 1, 2019 14:19

reversefungi: Nov 27, 2003; Master of the high hat!

Anyone know why I'm having some issues with the flow of this code?

JavaScript code:

// ... inside a class
async run() {
	const results = await getDataFromApi();
	results.forEach(async result => {
		console.log(`Begin processing data for ${result.id}`);
		await this.doStuffWithData1(result);
		console.log(`Finish processing data for ${result.id}`);
	})
}

async doStuffWithData1(result) {
	if(something) {
		const theThing = await this.getMoreData(result.id);
		console.log(theThing);
	}
}

async getMoreData(id) {
	const results = await getMoreApiData(id);
	return results;
}

I always thought that await would basically the flow of logic until it finished, but it seems to be non-linear. I was hoping to get:
"Begin processing data for 0"
"theThing"
"Finish Processing data for 0"

But instead Begin and Finish go through, followed by "theThing". As soon as I get to "getMoreApiData(id)" in the last function, node seems to jump to the next iteration of the forEach loop. Is there any way to get it to not do that and have a more linear program flow? I've tried moving/removing/adding async and await where needed but to no success. I also tried getting rid of the await/async in doStuffWithData1 but then this.getMoreData returns a promise. If I try to await that promise, I get moved to the next iteration in the forEach and the rest of the logic doesn't run until the rest of the program has finished executing, seemingly putting it on the event loop.

# ? May 2, 2019 18:47

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

Using async/await in a forEach will not do what you expect. You need to use a for loop, as forEach is not promise/async aware.

# ? May 2, 2019 18:53

SimonChris: Apr 24, 2008; The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.; Grimey Drawer

The Dark Wind posted:

Anyone know why I'm having some issues with the flow of this code?
JavaScript code:
// ... inside a class
async run() {
	const results = await getDataFromApi();
	results.forEach(async result => {
		console.log(`Begin processing data for ${result.id}`);
		await this.doStuffWithData1(result);
		console.log(`Finish processing data for ${result.id}`);
	})
}

async doStuffWithData1(result) {
	if(something) {
		const theThing = await this.getMoreData(result.id);
		console.log(theThing);
	}
}

async getMoreData(id) {
	const results = await getMoreApiData(id);
	return results;
}
I always thought that await would basically the flow of logic until it finished, but it seems to be non-linear. I was hoping to get:
"Begin processing data for 0"
"theThing"
"Finish Processing data for 0"

But instead Begin and Finish go through, followed by "theThing". As soon as I get to "getMoreApiData(id)" in the last function, node seems to jump to the next iteration of the forEach loop. Is there any way to get it to not do that and have a more linear program flow? I've tried moving/removing/adding async and await where needed but to no success. I also tried getting rid of the await/async in doStuffWithData1 but then this.getMoreData returns a promise. If I try to await that promise, I get moved to the next iteration in the forEach and the rest of the logic doesn't run until the rest of the program has finished executing, seemingly putting it on the event loop.

Replace forEach with for( let ... of .... )

JavaScript code:

// ... inside a class
async run() {
	const results = await getDataFromApi();
       for( let result  of results ) {
		console.log(`Begin processing data for ${result.id}`);
		await this.doStuffWithData1(result);
		console.log(`Finish processing data for ${result.id}`);
	})
}

# ? May 2, 2019 18:55

reversefungi: Nov 27, 2003; Master of the high hat!

Y'all are amazing, thank you!

Edit: So is it standard practice that if you have awaited something in a child of a child of a child, it's pretty much async/awaits up the tree?

reversefungi fucked around with this message at 19:08 on May 2, 2019

# ? May 2, 2019 19:04

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Async is contagious, yeah

# ? May 2, 2019 19:28

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Yeah, and that's not really exclusive to Javascript.

In other languages, if you need to you can put all your async stuff in another thread or process, but otherwise it's async all the way down.

# ? May 2, 2019 19:50

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!

The Dark Wind posted:

Edit: So is it standard practice that if you have awaited something in a child of a child of a child, it's pretty much async/awaits up the tree?

Except if you at any point in the chain don't care to wait for the result, like you might have...

code:

onButtonClick() { doSomeStuff(); }
doSomeStuff() { getValueFromServerIntoSomeBox(); }
async getValueFromServerIntoSomeBox() { someBox.contents = await getValueFromServer(); }
async getValueFromServer() { return await doSomeAjaxShit(); }
etc.

# ? May 3, 2019 04:08

Osmosisch: Sep 9, 2007; I shall make everyone look like me! Then when they trick each other, they will say "oh that Coyote, he is the smartest one, he can even trick the great Coyote."; Grimey Drawer

Nakedyoghurt posted:

I'm trying to create a webscraper that fetches my hand history from a poker web app, using the selenium module with python. I'm passing js code to the selenium module to execute, but im getting kind of stuck.
so far i have been able to log in and navigate to the history page. But for some reason i can't seem navigate through the dates.

The snippet below works fine and takes me to the history page shown below:
code:
driver.execute_script("document.getElementsByClassName('menu-item')[3].click()")
checking class names

trying click() on the arrow classes. I have checked that the correct object/class was selected before trying the click() method.

Any help is appreciated.

I don't see any event handlers on either of those elements so it seems to me that whatever javascript is causing mouse clicks to trigger date changes is hidden somewhere else. Maybe have a look in their script code?

# ? May 3, 2019 09:22

huhu: Feb 24, 2006

Edit: decided to go with jwt instead.

huhu fucked around with this message at 22:22 on May 4, 2019

# ? May 4, 2019 01:51

Newf: Feb 14, 2006; I appreciate hacky sack on a much deeper level than you.

"Do not block the main thread" is a thing in javascript for the web. I assume it's also the case for an express app that handles client requests.

Is this as simple as making sure that all of the stuff I do is via methods marked async?

Can anyone describe or link to an auditing process to ensure that code is non-blocking? Are there tools (in the TS ecosystem, maybe?) that can lint for it?

# ? May 4, 2019 07:31

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!

Newf posted:

"Do not block the main thread" is a thing in javascript for the web. I assume it's also the case for an express app that handles client requests.

Is this as simple as making sure that all of the stuff I do is via methods marked async?

Can anyone describe or link to an auditing process to ensure that code is non-blocking? Are there tools (in the TS ecosystem, maybe?) that can lint for it?

No, async doesn't prevent you from blocking, an infinite loop in an async function will still stop everything.

It's actually as simple as making sure all of the stuff you do doesn't have an infinite or long-running loop (I guess this is why I think it was Airbnb has a style guide that forbids loop style flow control entirely, only allowing forEach style iterator loops). There are basically no blocking functions in the ecosystem, so the only way to block is to not come out of a loop.

There is no linting for this, because it's basically the Halting problem. But you can do like Airbnb and forbid all flow control if you're a nutcase.

Edit: unit testing with 100% coverage is fairly good for ensuring no infinite loops too, but there are ways you could trick it.

Edit2: vvvv I didn't want to address actual threads in JS, because the question was fundamentally misled enough that it clearly wasn't about advanced concepts like WebWorkers.

roomforthetuna fucked around with this message at 23:08 on May 4, 2019

# ? May 4, 2019 15:29

MrMoo: Sep 14, 2000

Newf posted:

"Do not block the main thread" is a thing in javascript for the web. I assume it's also the case for an express app that handles client requests.

Is this as simple as making sure that all of the stuff I do is via methods marked async?

Easiest way to think of it is that JS has processes, via WebWorker, not threads. There is no sharing between processes and you must use message passing of some flavour. In browsers the Worker model is quite limited as you cannot spawn sub-workers outside of Firefox and worker-to-worker communication has to manually route through the main renderer thread.

# ? May 4, 2019 22:42

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 22:39

huhu: Feb 24, 2006

I just converted my project to Typescript. Almost done playing whack-a-mole but I'm stumped by the following errors:

code:

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:36:15 
    TS2300: Duplicate identifier 'FormData'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:107:14 
    TS2300: Duplicate identifier 'RequestInfo'.

ERROR in [at-loader] ./node_modules/@types/react-native/globals.d.ts:249:14 
    TS2300: Duplicate identifier 'XMLHttpRequestResponseType'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9561:18 
    TS2717: Subsequent property declarations must have the same type.  Property 'geolocation' must be of type 'Geolocation', but here has type 'GeolocationStatic'.

ERROR in [at-loader] ./node_modules/@types/react-native/index.d.ts:9564:11 
    TS2451: Cannot redeclare block-scoped variable 'navigator'.

A few reasons why I'm confused:
1. My tsconfig.json file contains "exclude": ["node_modules", "build", "scripts"]
2. I'm doing a React project and I'm not really sure where react-native stuff came from.

What should I be Googling because I'm pretty sure I'm searching in the wrong direction.

And a second issue. I've got the following:

code:

class Rate extends Component<any, any> {
    constructor(props) {
        super(props)
        this.state = {
		...
        }
        this.queue = new Queue()
    }
}

What do I do so that Typescript doesn't yell about this.queue.

huhu fucked around with this message at 22:09 on May 5, 2019

# ? May 5, 2019 22:00

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

«‹›277 »