These are chat archives for FreeCodeCamp/HelpJavaScript

9th
Jan 2019
Jason Luboff
@JLuboff
Jan 09 00:02
@bradtaniguchi Yup.. eventually.. lol I do have to make some changes to it..but have been putting it off and working on my other project
Brad
@bradtaniguchi
Jan 09 00:02
thats what they all say :P
Jason Luboff
@JLuboff
Jan 09 00:03
Nah...that one really does need some heavy duty browser tests (simulate form submissions)
Brad
@bradtaniguchi
Jan 09 00:04
Ah yea
Jason Luboff
@JLuboff
Jan 09 00:07
Looks like I'll need zombie or something similar
Although...it appears selenium-webdriver is much more popular...but documentation seems... lacking
Brad
@bradtaniguchi
Jan 09 00:17
a lot of stuff is built on selenium
Jason Luboff
@JLuboff
Jan 09 00:17
Do you use it at all?
Brad
@bradtaniguchi
Jan 09 00:27
I used to use protractor, which is built ontop of selenium, but I didn't get very far into it
I ran into issues when running against our build due to authentication guards, it was a huge pain
Jason Luboff
@JLuboff
Jan 09 00:27
Is that one specifically for Angular?
Brad
@bradtaniguchi
Jan 09 00:32
Yea, it comes with stuff that helps out with testing Angular
Jason Luboff
@JLuboff
Jan 09 00:33
Got it
Brad
@bradtaniguchi
Jan 09 00:33
after reading this, apparently you could still use it for React tho: https://www.testingexcellence.com/reactjs-test-automation-tools/
other alternatives are in there too
Jason Luboff
@JLuboff
Jan 09 00:34
Ah sweet, thanks
Brad
@bradtaniguchi
Jan 09 01:04
np :D
Blauelf
@Blauelf
Jan 09 08:24
Playing around with Selenium currently. Documentation has so many chapters consisting of captions only, missing content. Or documents are outdated. Not testing Angular, or not Angular specifically (we have some buggy AngularJS code costing us customers, but as there are no actual numbers, nobody is forced to touch it)
alpox
@alpox
Jan 09 08:43
@Blauelf selenium is awful. Try TestCafe instead :)
Blauelf
@Blauelf
Jan 09 10:21
Testing and support are somewhat... hard to defend here. They don't produce features. Not sure I can suggest an unknown tool in my position. If I were an ambitious worshipper of the boss (who shares with the pope that he's unfallible), that wouldn't be a problem, those can do anything :-P
Aditya
@ezioda004
Jan 09 10:52
@alpox @JLuboff @cmccormack Do you guys know any good data viz library for React? As I can see d3 is frame agnostic but I'd like something more React-y (with its own component)
React-vis looks cool
Theofanis Despoudis
@theodesp
Jan 09 12:32
I think react-vis is the best option for react-like visualizations
alpox
@alpox
Jan 09 12:44
@ezioda004 I just use D3 in my components :D
@ezioda004 Mostly because I almost never need the general known charts but rather custom datavis and animations
Mohammed Boudad
@matrixersp
Jan 09 13:29
@ezioda004 Take a look at https://www.npmjs.com/package/react-c3js
pika951170576
@pika951170576
Jan 09 13:48

function update(id, prop, value) {
if(value != ' ' && prop != 'tracks'){
collectionCopy[id][prop] = value;
}else if(value != ' ' && prop == 'tracks'){
collectionCopy[id][prop].push(value);
}else if(value == ' '){
delete collectionCopy[id][prop];
}

return collectionCopy;
}

Blauelf
@Blauelf
Jan 09 14:42
Use collection, not collectionCopy. An empty string is '', not ' '. There are four possible actions (what about non-existent "tracks" property?). The proper order would allow you to not test anything twice.
Jason Luboff
@JLuboff
Jan 09 16:07
@ezioda004 You gotta remember that I'm still very new to React so haven't ventured much outside of the basics :(
@alpox Psh...$500 for TestCafe! What do you think we're made of money?! :P
Aditya
@ezioda004
Jan 09 16:35
@JLuboff No worries
@alpox @matrixersp Thanks!
Kaz Baig
@kbaig
Jan 09 16:43
@ezioda004 ugh I'm struggling with finding a data vis lib as well
I might just do d3
Jason Luboff
@JLuboff
Jan 09 16:44
Whats up guys
Tom
@moT01
Jan 09 16:46
:koala:
@kbaig what are you trying to make?
Markus Kiili
@Masd925
Jan 09 16:49
@JLuboff Still trying to get Monte carlo to work on 5-in-a-row.
Jason Luboff
@JLuboff
Jan 09 16:49
@Masd925 Thats the algorithm which is similar to minimax right?
Markus Kiili
@Masd925
Jan 09 16:50
@JLuboff Same ballpark, yes.
Christopher McCormack
@cmccormack
Jan 09 16:51
@JLuboff yo
Jason Luboff
@JLuboff
Jan 09 16:52
Yo yo
Kaz Baig
@kbaig
Jan 09 16:52
@moT01 i just need to visualize votes for my voting app
Christopher McCormack
@cmccormack
Jan 09 16:53
@kbaig chart.js?
worked ok for me
Kaz Baig
@kbaig
Jan 09 16:53
@cmccormack I don't like the react version's api
Christopher McCormack
@cmccormack
Jan 09 16:54
@kbaig it's not too bad what didn't you like?
@kbaig that couldn't possibly be a response to what I said lol
Tom
@moT01
Jan 09 16:56
I would have recommended chart.js as well
Kaz Baig
@kbaig
Jan 09 16:56
@cmccormack https://github.com/jerairrest/react-chartjs-2 this is the react port and it has some weird behavior when you resize the page
Tom
@moT01
Jan 09 16:56
unless you're good with d3
Nate Mallison
@NJM8
Jan 09 16:56
👋
How's everyone doing today.
Kaz Baig
@kbaig
Jan 09 16:56
The chart just moves down the page every time you resize
@cmccormack sorry that message was meant for jason
Christopher McCormack
@cmccormack
Jan 09 16:57
you can try out Victory as well https://formidable.com/open-source/victory/
I didn't think it was as polished as chartjs last I used it though
@NJM8 :wave: hi!
Kaz Baig
@kbaig
Jan 09 16:57
@JLuboff monte carlo runs the simulation a large number of times to work out expected values while minimax scores all possible options afaik
Jason Luboff
@JLuboff
Jan 09 16:58
Got it
Nate Mallison
@NJM8
Jan 09 16:58
It's the bar chart
Probably just something wrong with the demo code
Kaz Baig
@kbaig
Jan 09 16:58
@cmccormack that site style is spicy
Christopher McCormack
@cmccormack
Jan 09 16:59
haha is that bad or good?
Kaz Baig
@kbaig
Jan 09 16:59
good
Jason Luboff
@JLuboff
Jan 09 17:00
like... a spicy meatball?
Kaz Baig
@kbaig
Jan 09 17:00
yeee
Jason Luboff
@JLuboff
Jan 09 17:04
Nice nice.
Aditya
@ezioda004
Jan 09 17:05
@kbaig I'm leaning towards react-vis, the API looks straightforward
Jason Luboff
@JLuboff
Jan 09 17:05
So whats everyone working on today? Seems like @kbaig is working on his voting app... @Masd925 is working on algo..
Nate Mallison
@NJM8
Jan 09 17:11
Kanban board and some small bug fixes
Kaz Baig
@kbaig
Jan 09 17:12
@JLuboff I'm actually working on my personal site
Nate Mallison
@NJM8
Jan 09 17:12
Also we just moved our repo out of gitlab to azure and will be using MS Teams issue tracker so moving all the issues over.
Kaz Baig
@kbaig
Jan 09 17:12
Gotta have something to show recruiters
Nate Mallison
@NJM8
Jan 09 17:12
Applying soon?
Kaz Baig
@kbaig
Jan 09 17:13
Soonish yeah. I don't anticipate being able to work for another couple months
Jason Luboff
@JLuboff
Jan 09 17:13
Cool cool
Nate Mallison
@NJM8
Jan 09 17:13
I wish I was doing more algo stuff. Not enough of that.
Jason Luboff
@JLuboff
Jan 09 17:16
So far...the apps I'm building don't have a lot of algo stuff.. I mean.. a bit but nothing crazy
Blauelf
@Blauelf
Jan 09 17:17
With the applications I had (OK, most of them were codingame challenges), I failed to construct the tree for monte carlo. Sure, it's made for those cases where you have tons of choices, but those exploded, and I had no idea how to enumerate the different choices.
But definitely interesting algorithm. 5 in a row is much more limited.
@Masd925 5 in a row is something without gravity, I guess?
interesting
LOC are not always accurate. I once rewrote 2,650 lines of C code as a seven line shell script. The previous programming team had written a data transfer program using their own implementation of ftp. I just used the one that was already on the computer. Best answer haha
Blauelf
@Blauelf
Jan 09 17:18
y combinator is something from lambda calculus, right?
Kaz Baig
@kbaig
Jan 09 17:19
you mean the company?
Markus Kiili
@Masd925
Jan 09 17:20
@Blauelf In a big board, 5-in-a-row (Renju or Gomoku) is a complex game. They still have computer tournaments in it.
Jason Luboff
@JLuboff
Jan 09 17:21
I use to love playing Gomoku
@Blauelf
Blauelf
@Blauelf
Jan 09 17:22
@kbaig I don't know which company you mean, but there is a "y combinator" (which I never understood), and I think it was in lambda calculus.
@NJM8 Whenever I see such stuff, my head explodes. Not sure why.
Nate Mallison
@NJM8
Jan 09 17:26
Same
It's too many unknown abstractions.
Blauelf
@Blauelf
Jan 09 17:26
@Masd925 I thought more of the 4-in-a-row with gravity. That one has much more limited choices. Yeah, if any field can be a possible move, that's a lot, both in breadth and depth.
Nate Mallison
@NJM8
Jan 09 17:27
I have some monte carlo done in JS somewhere but I don't know where I saved it.
Nope, python
Markus Kiili
@Masd925
Jan 09 17:32
@NJM8 Some random peeks here and there might be a good way to find it.
Kaz Baig
@kbaig
Jan 09 17:42
@Blauelf ycombinator is also a startup incubator. That's where that link was from
Brad
@bradtaniguchi
Jan 09 18:18
Wow these people are writing ~20 lines of code a day? Damn I must be doing something wrong :(
Christopher McCormack
@cmccormack
Jan 09 18:26
Maybe adding 100s but also deleting 100s -20?
Jason Luboff
@JLuboff
Jan 09 18:27
I have no clue how many lines I write
Brad
@bradtaniguchi
Jan 09 18:28
@JLuboff You can average it out from how many lines of code you current have, and when you started
Jason Luboff
@JLuboff
Jan 09 18:31
Ah..
But...I'd need to check each file to get the number of lines within my repo..no?
Christopher McCormack
@cmccormack
Jan 09 18:32
git also tells you
Jason Luboff
@JLuboff
Jan 09 18:33
git out of here!
Kaz Baig
@kbaig
Jan 09 18:34
git outta town
Jason Luboff
@JLuboff
Jan 09 18:37
git outta my head
Brad
@bradtaniguchi
Jan 09 18:38
you could use something like sloc (from npm) or on github under the insights > contributors tab shows a nice graph
Jason Luboff
@JLuboff
Jan 09 18:40
My private repos are in BitBucket...but might switch to github now that they have free private repos
Brad
@bradtaniguchi
Jan 09 18:40
Hehe, or just use sloc XD
Jason Luboff
@JLuboff
Jan 09 18:40
True
Jason Luboff
@JLuboff
Jan 09 18:47
I wish I could just tell sloc to exclude certain folders without having to use regex
Brad
@bradtaniguchi
Jan 09 19:32
Man my computer is still messed up, the only thing I could find out during my allotted time of looking into it, is a package is slightly "ahead" of all the other packages. Really dumb if you ask me
Jason Luboff
@JLuboff
Jan 09 19:40
Super dumb
alpox
@alpox
Jan 09 19:52
@JLuboff wrong website. TestCafe is free
At least to most part
@JLuboff What you saw is the old website before they opensourced it and made it freely available
@JLuboff https://devexpress.github.io/testcafe/ Thats the right one
@Blauelf Yes y combinator is from the labda calculus
And its also a website :D
Jason Luboff
@JLuboff
Jan 09 20:52
@alpox Shit.. we totally had this conversation before :joy:
Jason Luboff
@JLuboff
Jan 09 21:21
Is there a way to see what method gets passed into an onClick/onChange React component? React dev tools just show theres a function but doesn't show the actual function :(
Nevermind actually..I know the method is getting passed since I see it firing off.
Christopher McCormack
@cmccormack
Jan 09 21:26
@JLuboff We did it! :fireworks:
Jason Luboff
@JLuboff
Jan 09 21:27
lol
I'm determined to break apart my App class. But..encountering issues heh
Christopher McCormack
@cmccormack
Jan 09 21:28
you'll totally figure it out by the end of the year, I believe in you!
Jason Luboff
@JLuboff
Jan 09 21:28
:joy:
Jason Luboff
@JLuboff
Jan 09 21:34
@cmccormack Alright let me ask this.. I have a form which I have turned into a class and keeps the input values in its state. On submit, the method is in the parent (App) as it needs to keep state of what parts (three seperate work flow items) are complete for the ability to click back to the form to edit it. That works. But when you click back, all the inputs are empty, I assume becuase App is rerendering the form thus clearing the state...any way to avoid that?
Christopher McCormack
@cmccormack
Jan 09 21:34
Oh man I just found out I have to rush and create a new type of configuration for a device we haven't really tested to send to my CEOs house to use in a few days...
Jason Luboff
@JLuboff
Jan 09 21:35
Oh that sucks lol
Christopher McCormack
@cmccormack
Jan 09 21:35
yeah
lol
Are you initializing state in the form as empty strings, or assigning the values from this.props?
if the former, use the latter
can you clarify what click back means?
Jason Luboff
@JLuboff
Jan 09 21:38
I'm storing the input values in the Form Class, so using this.state for most (except a few that I get the data on App render)
And ya so
image.png
Christopher McCormack
@cmccormack
Jan 09 21:38
Are you re-rendering the form?
or just hiding it?
of the former then you can do what I said above
Jason Luboff
@JLuboff
Jan 09 21:38
If you check that you, you see the breadcrumb at the top. So, after the form submission, they're taken to the next step of the work flow which is Steps, but they can click back to Form
Christopher McCormack
@cmccormack
Jan 09 21:39
whatever value you store in the parent just assign it to the form when the form renders, if the parent was empty, so will the form be
Jason Luboff
@JLuboff
Jan 09 21:39
I get that.. but I'm trying to move it out of there.. but.. I guess I can always keep a local state and parent state... and keep my methods in my Form class..
Christopher McCormack
@cmccormack
Jan 09 21:40
move what out of where, specifically?
the form data in the parent?
Jason Luboff
@JLuboff
Jan 09 21:40
Ya. My parent (App) is huge. Its currently the only stateful component I have
I want to move methods out of there and create more stateful components
Christopher McCormack
@cmccormack
Jan 09 21:40
without using a state manager, your main App or wrapper components are probably going to have lots of state and methods in them
Jason Luboff
@JLuboff
Jan 09 21:41
oh :(
Christopher McCormack
@cmccormack
Jan 09 21:41
maybe time to give context api a shot :)
Jason Luboff
@JLuboff
Jan 09 21:41
I was trying before! lol
Christopher McCormack
@cmccormack
Jan 09 21:41
you can always create layers between App and the children that manage different methods
Jason Luboff
@JLuboff
Jan 09 21:42
sigh... I'll just go back to whats currently working lol
Worry about it later
Christopher McCormack
@cmccormack
Jan 09 21:42
A lot of how you manage it is going to be determined by what components need access to what - if no other components need the form data (maybe pushed into DB) then maybe you can move that logic into a container around your form component. I'm a pretty big fan of the Smart/Dumb component model where a smart component wraps a dumb component
A smart component will have your methods and state, dumb component will mostly be visual
although with a state manager that's pretty moot
maybe try redux?
the new hooks apis are also really cool for handling this but still in alpha or whatever
Jason Luboff
@JLuboff
Jan 09 21:44
Ya I'm looking at an example of Hooks right now. Looks interesting
Christopher McCormack
@cmccormack
Jan 09 21:45
yeah the ways you can just call context or whatever are great, I need to find time to play with it but I think it's a paradigm shift in React
Context is really useful, but passing a function as child component is awkard
Redux is a whole bunch of awkward
Jason Luboff
@JLuboff
Jan 09 21:48
I guess I'll keep with what I have... have to do moe React reading
Christopher McCormack
@cmccormack
Jan 09 21:50
can't hurt to make a small example project on codesandbox or something to play with each
Jason Luboff
@JLuboff
Jan 09 21:50
Very true
Risto Novik
@riston
Jan 09 22:03
Hello, has anyone experience with interval range algorithms?
Brad
@bradtaniguchi
Jan 09 22:21
Geerrr, I use the retry-axios lib and its crashing cuse someone didn't check for undefined :/
Pagnito
@Pagnito
Jan 09 22:52
hey how do i run a cluster with a database?, i get an error 'too many connections'
i was thinkin of connecting only on master but then i thought 'wait, then would the other cluster be able to interact with the databse'?
Idowu Wasiu
@Hoxtygen
Jan 09 22:53
hi guys, quick question
this doesnt work
const repo = function () {
    return {
        get: function (id) {
            console.log(`Getting task: ${id}`);
            return {
                name: 'New task from db'
            }
        },
        save: function (task) {
            console.log(`Saving ${task.name} to the database`);
        }
    }
}

//module.exports = repo();
const myName = {
    name: 'shaolin',
    age: 35,
    complexion: 'marinegreen'
}

repo.save(myName) //repo.save is not a function
but this works
this works

const repo = (function () {
    return {
        get: function (id) {
            console.log(`Getting task: ${id}`);
            return {
                name: 'New task from db'
            }
        },
        save: function (task) {
            console.log(`Saving ${task.name} to the database`);
        }
    }
}())

//module.exports = repo();
const myName = {
    name: 'shaolin',
    age: 35,
    complexion: 'marinegreen'
}

repo.save(myName)
Pagnito
@Pagnito
Jan 09 22:58
@Hoxtygen i think the first one doesnt work becuase its a function that is declared but isnt called, while the second one is a self calling function, thus it returns the object and becomes existent so to say
Idowu Wasiu
@Hoxtygen
Jan 09 23:00
@Pagnito oh, make sense
@Pagnito so I did this and it worked
const Repo = repo()

Repo.save(myName)
Pagnito
@Pagnito
Jan 09 23:02
yup
Brad
@bradtaniguchi
Jan 09 23:06
@Pagnito what do you mean cluster? Like seperate server instances?
Pagnito
@Pagnito
Jan 09 23:06
@bradtaniguchi ya
Brad
@bradtaniguchi
Jan 09 23:07
@Pagnito I would increase the number of connections the DB can handle at the same time, also make sure the cluster doesn't open to many, optimally each one should have like 1
Pagnito
@Pagnito
Jan 09 23:08
yea im only using as many as the amount cpus the system has.
I see, i think my free tier tho proly allows only one
but i gotta check
but is it a sure thing that each instance will require its own connection?
im asking because since they are all instances of the same port
Jason Luboff
@JLuboff
Jan 09 23:09
What kind of database system?
Pagnito
@Pagnito
Jan 09 23:10
postgres
im using elephantSQL
i got a free tier
Brad
@bradtaniguchi
Jan 09 23:11
@Pagnito I would think each instance uses the same port, but they are still different instances
Pagnito
@Pagnito
Jan 09 23:11
@bradtaniguchi ya would make sense
Jason Luboff
@JLuboff
Jan 09 23:11
Looking at the plans/pricing... it says 5 concurrent connections not five different clusters/instances
Brad
@bradtaniguchi
Jan 09 23:12
wait are we walking about clusters of database or clusters of apps/services using a database?
Pagnito
@Pagnito
Jan 09 23:12
whats teh difference tho? @JLuboff
Jason Luboff
@JLuboff
Jan 09 23:12
A connection is how many users can connect
Pagnito
@Pagnito
Jan 09 23:12
cluster of my server servin the app
Jason Luboff
@JLuboff
Jan 09 23:13
A cluster is an environment that has multiple servers aggregated into one (or it appears as one)
Pagnito
@Pagnito
Jan 09 23:14
@JLuboff so do u know if cluster connections is something thats not widely supported by cloud services?
Jason Luboff
@JLuboff
Jan 09 23:14
An instance when it comes to a SQL instance, its a seperate logical container of databases. That is, you can have multiple instances on the same SQL server but they wouldn't be connected. (Atleast for MS SQL but I imagine its similar in other SQL variants)
So where you are hosting your actual app, that is a cluster? Or is it a cluster you're creating?
ReesesLover123
@ReesesLover123
Jan 09 23:16
<!DOCTYPE html>
<html><head>
  <title>Shaka!</title>
  <style> 
    body { color:blue; } 
  </style>
<script>  
function mathit(){
var frenchSold = document.getElementById("frenchRoast").value;
var frenchFinal = parseFloat(frenchSold);
var morningSold = 
document.getElementById("morningBlend").value;
var morningFinal = Number(morningSold);
var summation = frenchFinal + morningFinal;
document.getElementById("poundTotal").innerHTML = parseFloat(summation);
}
return(summation);

</script>
</head><body>
<h1 id="total">You made this much today!</h1>
How much pounds of French Roast did you sell today?</br></br>
<input id="frenchRoast">
</br>
</br> 
How many pounds of Morning Blend did you sell today?</br></br> 
<input id="morningBlend">
</br> 
</br> 
</form>
<div id="results">
You sold <p id="poundTotal"></p> pounds of coffee today!
</br> 
</br> 
You made <p id="moneyTotal"></p> in sales today!
</div>
<button onclick="mathit()">Compute!</button>

</body></html>
When I fill in the fields I think the values are getting returned as strings instead of numbers.
For example, an answer of 6 in both fields returns 66 instead of 12.
How do I fix this?
Pagnito
@Pagnito
Jan 09 23:17
@JLuboff Right now its hosted on a single server instance, default. Im learning about clusters now and playin with it on localhost
Jason Luboff
@JLuboff
Jan 09 23:17
I don't think an input field is every not a string.. in your JS convert the number string to a number Number(myStringValue)
Pagnito
@Pagnito
Jan 09 23:17
@JLuboff what i meant tho, would cloud services support multiples server instances connecting to one instance of DB?
Jason Luboff
@JLuboff
Jan 09 23:18
I don't see why not
The server would still be seen as a single entity. That is, I try and connect to https://google.com, when I do that, my connection hits one of thousands of servers and returns a response
Pagnito
@Pagnito
Jan 09 23:20
@JLuboff hmm, i wonder why its throwing the error tho then
Unhandled rejection error: too many connections for role "...."
Jason Luboff
@JLuboff
Jan 09 23:21
What is throwing that error?
Pagnito
@Pagnito
Jan 09 23:22
node_modules/pg/lib/connection.js
Jason Luboff
@JLuboff
Jan 09 23:22
How many servers are in your cluster?
Pagnito
@Pagnito
Jan 09 23:23
4, and i have the deployed one running. I i brought it down to 2 instances and still getting that error
Jason Luboff
@JLuboff
Jan 09 23:24
Are you establishing a global database connection or opening/closing per each query?
Pagnito
@Pagnito
Jan 09 23:24
global
Jason Luboff
@JLuboff
Jan 09 23:24
That might be part of the problem
Pagnito
@Pagnito
Jan 09 23:25
i guess i see if i just connected per query would fix that, but wouldnt that make queries super slow?
Jason Luboff
@JLuboff
Jan 09 23:25
You'd have to test it, I'm not positive. I generally use a global connection as well
It shouldn't slow it down all that much though
Pagnito
@Pagnito
Jan 09 23:26
k thnx, im keep googlin for now tho. I wanna keep the global.
Jason Luboff
@JLuboff
Jan 09 23:27
So with the SQL module I use (https://www.npmjs.com/package/mssql), you can create a pool and set the max number of connections in the pool..
Not sure if whatever module you're using has that
Brad
@bradtaniguchi
Jan 09 23:28
The default might use to many (idk what is the set default)
Pagnito
@Pagnito
Jan 09 23:29
i found this
Jason Luboff
@JLuboff
Jan 09 23:30
@bradtaniguchi Ya...for the module I use the default is 10 which would be too many
@Pagnito Thats for clustering seperate databases it looks like
Pagnito
@Pagnito
Jan 09 23:30
ah
yea i was wondering that too