These are chat archives for FreeCodeCamp/HelpJavaScript

11th
Jan 2019
abdellah hariti
@a-hariti
Jan 11 00:20

hey @ReesesLover123 , what you need is called type coercion, you're trying to convert a variable of a certain type to another type. in javascript you have a handful of ways to convert strings to numbers:
1) using the + operator :

// notice the prepended `+`
var meow =   +red ;

2) using the parseInt function:

// the second parameter `10` is called the `radix` or `base`, in your case it's the decimal base, it could be binary (base 2), hexadecimal (base 16), ...
var meow = parseInt( red, 10);

3) using the Number function:

var meow  = Number(red);

my favorite one is the first option, it is both concise and fast.

Jason Luboff
@JLuboff
Jan 11 00:30
@alpox Just starting to play around with testcafe (just did the example) and.. WOW this seems awesome
Brad
@bradtaniguchi
Jan 11 01:20
@JLuboff Gotta tell me what testCafe is and how awesome it is when you get a chance haha
abraham anak agung
@padunk
Jan 11 01:24
What's the difference between type coercion and typecasting?
Garrus Napp
@GarrusNapp
Jan 11 08:32
@padunk in what terms? 2 + "2" = "22" this is coercing 2 to type string. String(2) is type casting
Karma Drukpa
@coderkarma
Jan 11 08:46
@coderkarma
how can I update node v8 to 10 .
these commands didn't work
brew update
brew upgrade node
npm update -g npm
alpox
@alpox
Jan 11 08:48
@coderkarma use the nvm version manager or n
With that you can install specific node versions easily and even switch between them comfortably
Karma Drukpa
@coderkarma
Jan 11 08:50
nvm install node ?
alpox
@alpox
Jan 11 08:52
The curl is for installing nvm on your system
Karma Drukpa
@coderkarma
Jan 11 08:52
is that command that i need to run for node ?
Zaza
@ForkInSpace
Jan 11 08:52
nvm install 10.0.0 @coderkarma
alpox
@alpox
Jan 11 08:52
With nvm install you can choose a specific version
Karma Drukpa
@coderkarma
Jan 11 08:52
I see. so I could @ForkInSpace @alpox nvm install 10.0.0
to get node v10
alpox
@alpox
Jan 11 08:54
Yes
I would specify a patched version of 10 though
I nvm chooses the best version if you just write 10 instead of 10.0.0
I believe*
Karma Drukpa
@coderkarma
Jan 11 08:55
stable version is 10.15.1
alpox
@alpox
Jan 11 08:55
Then you can use that one
Karma Drukpa
@coderkarma
Jan 11 08:59
Screen Shot 2019-01-11 at 12.55.28 AM.png
that didn't work
alpox
@alpox
Jan 11 09:38
nvm install 10.15.1?
tundeiness
@tundeiness
Jan 11 12:15
so guys here is the update on my project https://codepen.io/highness/pen/ebNYVX?editors=0011 however I need to fix just a lil thing; the red button (upper right) seems to control both rendering of the component. If I click on the red button on the editor the previewer hides but if I click the button on the previewer the previewer hides instead of the editor hiding. How do I solve this?
Mohammed Boudad
@matrixersp
Jan 11 15:36
@tundeiness Create a class hidden in CSS with display set to none then use it like this className={this.state.editor ? '' : 'hidden'}
tundeiness
@tundeiness
Jan 11 15:43
@matrixersp yeah i have thought about using the CSS approach as well but i do not know how it will work well when I will eventually come up with 3 states. for example state 1 default that is both the previewer and the editor is visible, state 2 only the editor is visible state 3 only the previewer is visible.
Mohammed Boudad
@matrixersp
Jan 11 15:47
@tundeiness Use two separate methods, one for the editor and the other for the previewer
<Editor className={this.state.editor ? '' : 'hidden'} onClick={this.toggleEditor} />
<Previewer className={this.state.editor ? '' : 'hidden'} onClick={this.togglePreviewer} />
tundeiness
@tundeiness
Jan 11 15:50
@matrixersp okay...this should work though.
Kaz Baig
@kbaig
Jan 11 15:51
@matrixersp conditional rendering is a better solution here no?
tundeiness
@tundeiness
Jan 11 15:52
@matrixersp is it also possible to do inline styling in this approach as well?
Mohammed Boudad
@matrixersp
Jan 11 15:52
You can also use a single method and then check event.target.nameto toggle them
@kbaig Yes that's also possible
Kaz Baig
@kbaig
Jan 11 15:54
He's already managing state so why not do it through conditional rendering rather than put in more logic and also add css styling for it
You're still triggering renders if you do it via styling
Mohammed Boudad
@matrixersp
Jan 11 15:55
Yeah I think that would be better
Jason Luboff
@JLuboff
Jan 11 17:12
@bradtaniguchi https://devexpress.github.io/testcafe/ e2e automated testing
Kaz Baig
@kbaig
Jan 11 17:12
any of you guys use netlify?
I just used it for the first time and it's a great experience
Christopher McCormack
@cmccormack
Jan 11 17:13
Just for the JAMstack thing, looks really nice
Kaz Baig
@kbaig
Jan 11 17:14
what thing
Kaz Baig
@kbaig
Jan 11 17:17
oh you mean they recommend netlify to deploy jam stack app?
Yeah I put my personal site in gatsby up there
Christopher McCormack
@cmccormack
Jan 11 17:18
yeah
it was a pretty simple experience
Kaz Baig
@kbaig
Jan 11 17:18
1-click ssl hnnng
Christopher McCormack
@cmccormack
Jan 11 17:18
other than I think gatsby using a plugin that requires python 2
Karma Drukpa
@coderkarma
Jan 11 17:18
@cmccormack I am not able to update node version
nvm install 10.15.1
Christopher McCormack
@cmccormack
Jan 11 17:20
shouldn't it be nvm install node 10.15.1?
oh nm
@kbaig that's hosted on their server right?
Karma Drukpa
@coderkarma
Jan 11 17:31
worked, i just had to do nmv 10
that automatically install latest stable version
thanks again.
Christopher McCormack
@cmccormack
Jan 11 17:34
np
BP
@bgq007
Jan 11 18:50
Ive been thinking of something interesting. Maybe I will let other ponder as well….
So if you make a container div and give it a display of “grid” (CSS)
display: grid; grid-template: repeat(auto-fill, 1vh) / repeat(auto-fill, 1vw); width: 100vw; height: 100vh; box-sizing: border-box;
This basically makes a bunch of tiny boxes. If you could then use JS to assign grid-area to create a grid map of interesting shapes, you could make a pretty cool design.
BP
@bgq007
Jan 11 18:57
Screen Shot 2019-01-11 at 10.57.09 AM.png
Brad
@bradtaniguchi
Jan 11 19:10
@bgq007 that looks scary
BP
@bgq007
Jan 11 19:11
@bradtaniguchi It’s bring back 8-bit!
Brad
@bradtaniguchi
Jan 11 19:12
Yea your right, lots of potential
tundeiness
@tundeiness
Jan 11 21:54
hi guys!! thanks for the help so far! it has been awesome! but I just need a little push to achieve what i want. Now here is the project so far: https://codepen.io/highness/pen/ebNYVX?editors=0011 The default state should show both the editor and the previewer but so far I only end up with the editor at first. However If I don't click on the red button the previewer won't show up. Now I know it's the ternary condition in the render method but I have tweaked it show much so that I have ran out of ideas and so I need help on how to tweak it appropriately to get the result I want. looking forward to the help. Thanks.
BP
@bgq007
Jan 11 22:52
@tundeiness I see both when going to the page
tundeiness
@tundeiness
Jan 11 22:54
@bgq007 yeah, it's been fixed. Thanks.