These are chat archives for FreeCodeCamp/Help

29th
May 2018
ehutchllew
@ehutchllew
May 29 2018 03:56
@khaduch Oh cool, I'm doing his Advanced web Dev bootcamp
Dionisis Terzios
@ElJimador
May 29 2018 06:00
Hello. In line 28, I tried to console.log the stream game but I doesn't show and I don't know why. Please advice me.
Link: https://codepen.io/Terzio/pen/zjPBoq?editors=1112
Dionisis Terzios
@ElJimador
May 29 2018 07:23
Hello. In line 28 (JS), I tried to console.log the stream game but I doesn't show and I don't know why. Please advice me.
Link: https://codepen.io/Terzio/pen/zjPBoq?editors=1112
Pieter Stokkink
@forkerino
May 29 2018 07:41
@ElJimador Uncaught TypeError: Cannot read property 'game' of null
If you just log stream, you'll see that the stream prop on those objects are all null.
Pieter Stokkink
@forkerino
May 29 2018 07:47
which means none of them are currently streaming.
So you should probably check for that
And only display channel info if there is no stream going on
Dionisis Terzios
@ElJimador
May 29 2018 07:51
@forkerino Thanks.
CamperBot
@camperbot
May 29 2018 07:51
eljimador sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 3000 | @forkerino |http://www.freecodecamp.org/forkerino
Dionisis Terzios
@ElJimador
May 29 2018 07:57
@forkerino I opened Developer tools and I saw in Network that it gets information only from one channel. (Noobs2ninjas)
Pieter Stokkink
@forkerino
May 29 2018 08:25
3k!
@ElJimador if I console.log(channel) I get info on all the channels, but I need to change the other console log as well, because that errors now.
Nick Karlis
@st4t1k
May 29 2018 08:27
Hello
Anyone knows a way to display a popup message ,like the ones that ask for cookie consent, on a wordpress page?
Dionisis Terzios
@ElJimador
May 29 2018 08:39
@forkerino I am stuck though 1 week in this project because I can't display the streamer is playing when he is online.
Dionisis Terzios
@ElJimador
May 29 2018 09:02
@forkerino It's ok. I fixed it.
Pieter Stokkink
@forkerino
May 29 2018 10:17
:+1:
Mehdi Amlal
@mehdiamlal
May 29 2018 10:43
Which one is better: Bootstrap or Materialize?
Bjorn van de Peut
@bjorno43
May 29 2018 11:02
@mehdiamlal Neither. Both have the same requirements and both offer pretty much the same functionalities. One simply has a different approach towards styling than the other. Oh and I think Materialize offers more colors with styling by default. Anyway. It's a matter of preference, nothing else
Kranti Nebhwani
@darkphotonKN
May 29 2018 11:28

Anybody who knows react can explain to me why you use

constructor(props) { super(props); this.state = { value: null } }

At the beginning of a class? What does this set up for the class and what is props argument for?

Pieter Stokkink
@forkerino
May 29 2018 12:29
@darkphotonKN it has nothing to do with React, it is a regular constructor function that you can find in any class. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Kranti Nebhwani
@darkphotonKN
May 29 2018 12:31
@forkerino thanks yeah I read that, but I don't understand what its doing in react, where there is "this.state". What state is it setting and how does this link to it's constructor. And the constructor for react classes are different than the ones you make yourself it's preset somewhere and I didn't understand when I tried looking that up
CamperBot
@camperbot
May 29 2018 12:31
darkphotonkn sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 3001 | @forkerino |http://www.freecodecamp.org/forkerino
Kranti Nebhwani
@darkphotonKN
May 29 2018 12:32
@forkerino i know you can use a constructor in classes, and you must use super but what it does is dependent on the main class where there is the main constructor right? That is what super is for. Well I don't know what that does for react, and also why it needs the constructor to then have this.state = {} object and what that does in react. This is specific to react
Pieter Stokkink
@forkerino
May 29 2018 12:33
@darkphotonKN when you use a component, it is an instance of the class, so this.state is the state linked to that instance. I'm not sure it is necessary to have a state on a component, but definitely very common. The constructor function is run once at initialization. The super class is the React.Component, I believe.
Kranti Nebhwani
@darkphotonKN
May 29 2018 12:34
@forkerino thanks so much that's exactly what I was looking for, it's more clear now :D
CamperBot
@camperbot
May 29 2018 12:34
darkphotonkn sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
api offline
Kranti Nebhwani
@darkphotonKN
May 29 2018 12:35
@forkerino i think it's not always necessary you're right I think the example I'm learning now needs to track the state of a certain component so its used
Pieter Stokkink
@forkerino
May 29 2018 12:35
Very well possible.
If you want to check out the source code for React.Component: https://github.com/facebook/react/blob/master/packages/react/src/ReactBaseClasses.js
Kranti Nebhwani
@darkphotonKN
May 29 2018 12:36
@forkerino much appreciated :)
Pieter Stokkink
@forkerino
May 29 2018 12:36
There you can see how .setState() is implemented for example
Mehdi Amlal
@mehdiamlal
May 29 2018 12:42
Can I use materialize/bootstrap or any other library to design a social media app to make the process faster?
Pieter Stokkink
@forkerino
May 29 2018 12:53
Yes, you can @mehdiamlal
Usually only done to get something on the page fast. Usually styling is customized once the design of the app stabilizes
Danny Chan
@chandanny
May 29 2018 13:59
hello
how you dressing on interview? semi-formal or just casual?
May Kittens Devour Your Soul
@diomed
May 29 2018 15:50
pijamas
Kyle Holm
@thekholm80
May 29 2018 16:36
this is why @diomed is at home on a weekday
Christopher McCormack
@cmccormack
May 29 2018 16:46
@chandanny it will depend on where you are interviewing. Generally business casual is fine but you can use Glassdoor or a search on the company and interview dress
Laura Veee
@Cyclokitty
May 29 2018 17:02
@chandanny I go with business casual on interviews.
@diomed one piece footie pyjamas? Preferably super hero themed. Or, with bunny ears.
Kyle Holm
@thekholm80
May 29 2018 17:18
i haven't been to a job interview in over 10 years ... i dread the thought of ever going through that again
Aditya
@ezioda004
May 29 2018 17:21
@thekholm80 Do you use space or tab for indentation?
Kyle Holm
@thekholm80
May 29 2018 17:21
tabs
Aditya
@ezioda004
May 29 2018 17:22
Great, you're hired!
Kyle Holm
@thekholm80
May 29 2018 17:22
lol
May Kittens Devour Your Soul
@diomed
May 29 2018 17:27
n1 appreciates :cat: 's pijamas anymore.
Why can't we live in an onesie world? all soft and fuzzy
Bjorn van de Peut
@bjorno43
May 29 2018 18:32
Or.. use a text editor that supports "replace tab characters with spaces" when needed :P
Henry
@GitHub-Henry
May 29 2018 18:38
@diomed star trek next gen, the federation of onesies
Lance
@texas2010
May 29 2018 19:44
umm
ahsan waseem
@ahsanwaseem
May 29 2018 19:47
hi guys i got a question, whats the difference between these codes

function destroyer(arr) {
var array = [];
for(var i=1; i< arguments.length;i++){
array.push(arguments[i]);
}
function values(val){
for(var j = 0;j < array.length;j++){
if(val === array[j]){
return false;
}else{
return true;
}}
}
return arr.map(values);

}

May Kittens Devour Your Soul
@diomed
May 29 2018 19:47
do you guys know that now you can have as much templates on codepen as you like? :scream:
ahsan waseem
@ahsanwaseem
May 29 2018 19:47

function destroyer(arr) {
var array = [];
for(var i=1; i< arguments.length;i++){
array.push(arguments[i]);
}
function values(val){
for(var j = 0;j < array.length;j++){
if(val === array[j]){
return false;
}}
return true;
}
return arr.map(values);

}

when i try to return true without else statement, it solves the algorithm but with else statement it doesnt
can anyone tell me whats the difference
May Kittens Devour Your Soul
@diomed
May 29 2018 19:50
sounds like smth @thekholm80 would know
Kyle Holm
@thekholm80
May 29 2018 19:50
i know nothing
May Kittens Devour Your Soul
@diomed
May 29 2018 19:51
you only say that
Sulaiman
@suli-g
May 29 2018 20:07
@ahsanwaseem your code hurts my eyes:
use backticks (`) for code please - it helps a lot:
{code}
ahsan waseem
@ahsanwaseem
May 29 2018 20:24
function destroyer(arr) {
  var array = [];
  for(var i=1; i< arguments.length;i++){
    array.push(arguments[i]);
  }
  function values(val){
    for(var j = 0;j < array.length;j++){
    if(val === array[j]){
      return false;
    }else{
    return true;
    }}
  }
  return arr.map(values);

}
```
function destroyer(arr) {
  var array = [];
  for(var i=1; i< arguments.length;i++){
    array.push(arguments[i]);
  }
  function values(val){
    for(var j = 0;j < array.length;j++){
    if(val === array[j]){
      return false;
    }} 
    return true;
  }
  return arr.map(values);

}
```
Kyle Holm
@thekholm80
May 29 2018 20:27
i don't think the second code will ever reach the return arr.map(values);
wait, i'm wrong. didn't see the for() statement
ahsan waseem
@ahsanwaseem
May 29 2018 20:28
actually the second one works
Kyle Holm
@thekholm80
May 29 2018 20:28
formatting your code properly makes it much easier to get help
ahsan waseem
@ahsanwaseem
May 29 2018 20:29
will do so from now on
Kyle Holm
@thekholm80
May 29 2018 20:31
so the first code returns from for(var j = 0;j < array.length;j++){ on the first loop
the second code waits until the loop completes before return true;
inside the values() function
ahsan waseem
@ahsanwaseem
May 29 2018 20:32
hmmm
Kyle Holm
@thekholm80
May 29 2018 20:33
    for(var j = 0;j < array.length;j++){
      if(val === array[j]){
        return false;
      } else {
        return true;
      }
    }
there isn't any way this loop can go beyond a single iteration
ahsan waseem
@ahsanwaseem
May 29 2018 20:37
@thekholm80 i understand now i think, so basically it needs to confirm every false value, by adding the else statement, if it find anything true after first false, the iteration will stop.
Kyle Holm
@thekholm80
May 29 2018 20:40
any time a return statement is reached, the current function stops, so returning outside the loop will make it so you evaluate the full loop before returning the default value (true in this case), like you did in the second example
returning false inside the loop is a good thing because you don't need to continue evaluating the array if that condition is met
Henry
@GitHub-Henry
May 29 2018 20:44
does this message mean if I add use 'esverion:6'; at the top of my solution i can use es6 ?
image.png
Kyle Holm
@thekholm80
May 29 2018 20:44
where are you seeing that?
ahsan waseem
@ahsanwaseem
May 29 2018 20:44
@thekholm80 thankyou for the explanantion :+1:
Kyle Holm
@thekholm80
May 29 2018 20:45
@ahsanwaseem sorry i can't explain it better. i'm kinda bad with words
Henry
@GitHub-Henry
May 29 2018 20:46
@thekholm80 how's it going Kyle?
Kyle Holm
@thekholm80
May 29 2018 20:46
@GitHub-Henry i'm good, you?
Henry
@GitHub-Henry
May 29 2018 20:46
Not bad, started my tool transfer from gulp to webpack
ahsan waseem
@ahsanwaseem
May 29 2018 20:46
@thekholm80 no need for sorry, you explained it just fine, thanks
Kyle Holm
@thekholm80
May 29 2018 20:47
@GitHub-Henry i've given up on webpack. i'm tired of spending 4 hours trying to understand the latest changes every time i start a new project - so i'm using create-react-app now and letting it do all the config for me
life is too short to configure webpack
Henry
@GitHub-Henry
May 29 2018 20:48
I got the basics to work, not much more
babel, sass
I need to add vs code debug configurations for it next
Kyle Holm
@thekholm80
May 29 2018 20:49
the breaking point for me is last time i tried doing it myself it didn't grab all the dependencies it needed when i did npm install --save-dev webpack webpack-dev-server i kept getting unmet dependency errors when i tried to start my dev server
if you're using sass you can't really get away with create-react-app
unless they've updated it so you don't have to eject anymore
Gulsvi
@gulsvi
May 29 2018 20:51
@GitHub-Henry Yeah, you can add that to the FCC challenges to use es6 without getting any warning messages
// jshint esversion:6
Henry
@GitHub-Henry
May 29 2018 20:51
@gulsvi thanks for the tip
Gulsvi
@gulsvi
May 29 2018 20:52
Sure thing
Henry
@GitHub-Henry
May 29 2018 20:52
@thekholm80 i definitely was reading the docs as i was going along
Kyle Holm
@thekholm80
May 29 2018 20:53
@GitHub-Henry i think if i wanted to use react professionally i'd stick with trying to learn webpack, but it's not worth it to me just doing this as a hobby
Henry
@GitHub-Henry
May 29 2018 20:55
@thekholm80 it's also good if you want to use import/export
need browserify/webpack for those commands
Kyle Holm
@thekholm80
May 29 2018 20:56
i use babel for that
Henry
@GitHub-Henry
May 29 2018 20:57
when i use babel for my import/export statements, i get an error, some how it's not making the convert to js with require statements. i bet i need to tweek a babel configuration for it to work
Kyle Holm
@thekholm80
May 29 2018 20:58
it's kind of a pain. you have to get babel-cli along with the presets, and your start script has to have the babel command in it
it's not worth the trouble for me
Henry
@GitHub-Henry
May 29 2018 20:59
look at that, i don't have babel-cli
thanks
Kyle Holm
@thekholm80
May 29 2018 20:59
lemme see if i can find the how-to i used
Henry
@GitHub-Henry
May 29 2018 20:59
cbot
eightball is cbot dead?
looks like both are down
this kind of takes you through it
you can trim down your start script with a .babelrc file for your options
Henry
@GitHub-Henry
May 29 2018 21:01
@thekholm80 appreciate the help, thanks
Kyle Holm
@thekholm80
May 29 2018 21:03
the packages:
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-polyfill": "^6.26.0",
    "babel-preset-stage-3": "^6.24.1"
  }
your start script changes to something like "start": "node --exec babel-node yourFile.js"
and your .babelrc would be:
{
  "presets": [
    "stage-3"
  ]
}
it's a lot of crap to go through just for import and export so i don't even bother now
Adegoke Fred
@Frediflexta
May 29 2018 21:08
Hi guys, So i am just here practicing how to use caesar cipher to shift characters to the right and left of the /[a-z]/. I have a basic working encipher and decipher funtion. The thing is, i want to make it a bit interactive with html css n JS. the idea is i have a text field that accepts messages, an option field with numeric keys and a button, for encrypting and decrypting. I want the decrypted or encrypted msg to show in a modal box.
my 1st challenge now is my modal box, for some reasons i don't know, it's the styling that makes it display: none;
This message was deleted
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
image.png
But the modal box is still showing
Can anybody please help with this?
Christopher McCormack
@cmccormack
May 29 2018 21:13
share the pen @Frediflexta
Often it's what is not shared that is the actual issue :D
Adegoke Fred
@Frediflexta
May 29 2018 21:13
Lol, okay
Christopher McCormack
@cmccormack
May 29 2018 21:15
@Frediflexta be more specific with this selector: .container > div {
your modal is getting display: flex
You can see that if you inspect the element and view the css properties in your developer console
Henry
@GitHub-Henry
May 29 2018 21:17
@thekholm80 Wow, thank you for sharing. You are right, that's a whole lotta configuration just for import/export.
Kyle Holm
@thekholm80
May 29 2018 21:18
@GitHub-Henry i goofed, you don't need babel-loader for that. i thought i trimmed out the react-specific stuff
Adegoke Fred
@Frediflexta
May 29 2018 21:18
@cmccormack Thanks, fixed, Thank
Christopher McCormack
@cmccormack
May 29 2018 21:19
@Frediflexta :thumbsup:
Henry
@GitHub-Henry
May 29 2018 21:20
@thekholm80 :+1:
Adegoke Fred
@Frediflexta
May 29 2018 21:21
@cmccormack i made it .modal > div { }
but now, clicking on the encrypt or decrypt buttons don't pop up the modal box
Christopher McCormack
@cmccormack
May 29 2018 21:36
@Frediflexta why not just target your modal if you're applying classes to it anyway?
@Frediflexta I feel like you're making it too complicated using child selectors like that, and it has side-effects, which you should always try to avoid
Adegoke Fred
@Frediflexta
May 29 2018 21:40
Okay, so how do i target it? i already tried .modal {}
or are you suggesting i get rid of .container > div
?
Christopher McCormack
@cmccormack
May 29 2018 21:44
@Frediflexta the latter, yes
I would suggest only targeting child elements like that if you have many of the same type of elements nested, but even then using a class is probably better
Adegoke Fred
@Frediflexta
May 29 2018 21:46
Okay, i did that cause i am using css grid to position contents
Christopher McCormack
@cmccormack
May 29 2018 21:49
@Frediflexta you can still make it work that way but it may be more difficult
Adegoke Fred
@Frediflexta
May 29 2018 21:50
Aii, so i got rid of it and did this instead .container, .header{ }
But the modal box doesn't still pop up when i click encrypt or decrypt
Christopher McCormack
@cmccormack
May 29 2018 21:58
@Frediflexta you still have work to do targeting the proper selectors. You're hiding elements but not showing them again in your JS
Adegoke Fred
@Frediflexta
May 29 2018 22:20

But `encryptBtn.onclick = () => {

modal.style.display = 'block';
}` is suppose to get it to show?

right?
Quincy Larson
@QuincyLarson
May 29 2018 22:22

Quick heads-up on Camperbot

Hey everyone, we're doing some database migrations in preparation for launching the new curriculum and learning platform. We're taking CamperBot down temporarily until we have time to update it to work with our new schema. We will bring CamperBot back up as soon as possible. In the meantime the "thanks" feature and other features won't be available. Thanks for your patience!
Kyle Holm
@thekholm80
May 29 2018 22:23
rip cbot
Albert Cardona II
@daddycardona
May 29 2018 22:31
I don't like Camperbot s on wwii lol
Kyle Holm
@thekholm80
May 29 2018 22:52
@daddycardona lol
Albert Cardona II
@daddycardona
May 29 2018 22:53
@thekholm80 yeah working is good but almost done with school so I will be starting over, is learnfreecodecamp.com new
Kyle Holm
@thekholm80
May 29 2018 22:54
i'm not seeing anything on learnfreecodecamp.com
Albert Cardona II
@daddycardona
May 29 2018 22:55
or .org or something
Kyle Holm
@thekholm80
May 29 2018 22:55
the current site is freecodecamp.org, the beta is beta.freecodecamp.org
Albert Cardona II
@daddycardona
May 29 2018 22:55
oh okay
Kyle Holm
@thekholm80
May 29 2018 22:55
it sounds like beta might be close to wrapping up
Albert Cardona II
@daddycardona
May 29 2018 22:55
I thought they updated that
this?
Albert Cardona II
@daddycardona
May 29 2018 23:01
yeah
@thekholm80
Kyle Holm
@thekholm80
May 29 2018 23:02
i should finish my last project before beta is done
Albert Cardona II
@daddycardona
May 29 2018 23:03
Awesome I stopped to long lol still on calculator even though its done