These are chat archives for FreeCodeCamp/Help

23rd
Mar 2018
BuntyBru
@BuntyBru
Mar 23 2018 06:52
@khaduch
Thanks , Will look into it
CamperBot
@camperbot
Mar 23 2018 06:52
buntybru sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3813 | @khaduch |http://www.freecodecamp.org/khaduch
Nazar
@IsaakNazar
Mar 23 2018 09:17
@thekholm80 Hi Kyle, you know, why React dev tools shows Components as Unknown?
unknown.jpg
Claudio Restifo
@Marmiz
Mar 23 2018 09:30
@IsaakNazar is it a builded and minified react app?
If so it's normal
Nazar
@IsaakNazar
Mar 23 2018 09:35
@Marmiz I installed manually, and in the bundle.js file codes are minified
I got this
warn.jpg
@Marmiz And how to show COmponent names?
Claudio Restifo
@Marmiz
Mar 23 2018 09:44
@IsaakNazar which app are you talking about? React DevTool extension?
But if you are inspecting an app that has been minified for production there's no way to inspect the names, since it's one of those things that gets removed during the minification process
Nazar
@IsaakNazar
Mar 23 2018 09:47
@Marmiz yes
@Marmiz and I have to set mode to development mode?
Nazar
@IsaakNazar
Mar 23 2018 09:56
@Marmiz I Unminified bundle.js webpack --mode development
but components are still unknown
Stephen James
@sjames1958gm
Mar 23 2018 09:59
@IsaakNazar Can you give an example of one of your "unknown" components?
Nazar
@IsaakNazar
Mar 23 2018 09:59
@sjames1958gm Hi Stephen
import React from 'react';

const Header = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <h2>{props.subtitle}</h2>
    </div>
  );
}

export default Header;
Claudio Restifo
@Marmiz
Mar 23 2018 10:05

@IsaakNazar you are probably missing some Babel presets.
In the meantime you can try a

Header.defaultName = "Header";

before the export

Nazar
@IsaakNazar
Mar 23 2018 10:06
@Marmiz babel-preset-react babel-preset-env installed both
Claudio Restifo
@Marmiz
Mar 23 2018 10:08
have you tried with the defaultName to see if it works? If so we have narrowed it to Babel. if not we still have to look for a reason
what about a classic component instead of a stateless function? No name on those as well?
Stephen James
@sjames1958gm
Mar 23 2018 10:10
Is it displayName, rather than defaultName?
Nazar
@IsaakNazar
Mar 23 2018 10:10
@Marmiz
defName.jpg
@Marmiz Action.defaultName = 'Action'
Now all COmponents are with no name :worried:
Claudio Restifo
@Marmiz
Mar 23 2018 10:12
it's displayName sorry @IsaakNazar
@sjames1958gm woopsie! :smile:
Nazar
@IsaakNazar
Mar 23 2018 10:13
@sjames1958gm @Marmiz hey guys, displayName works, but can I display names without displayName?
Stephen James
@sjames1958gm
Mar 23 2018 10:14
@IsaakNazar You are supposed to be able to by exporting by Name babel should derive the component name from the export.
Claudio Restifo
@Marmiz
Mar 23 2018 10:14
@IsaakNazar yes if your Babel works correctly. That's exactly what it should do.
You have some error inside your .babelrc perhaps?
Nazar
@IsaakNazar
Mar 23 2018 10:14
warn.jpg
@Marmiz only this kind of warnings
Claudio Restifo
@Marmiz
Mar 23 2018 10:15
@IsaakNazar no I mean your babelrc file. Or how else have you set up Babel.
(it's not eanough to install packages)
Nazar
@IsaakNazar
Mar 23 2018 10:16
@Marmiz
{
  "presets": ["env", "react"]
}
inside babelrc
@Marmiz Maybe I should run those presets?
I mean is it enough to install those presets, or I should do some commands?
Claudio Restifo
@Marmiz
Mar 23 2018 10:22
@IsaakNazar you should have the loader from webpack, but that's about it
"es15" preset?
Nazar
@IsaakNazar
Mar 23 2018 10:23
@Marmiz
"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "validator": "^9.4.1"
  }
Kevin
@kevinwr
Mar 23 2018 10:25
image.png
Hey, all. Noticing heading elements add space around the text. is there any way to fix this?
Nazar
@IsaakNazar
Mar 23 2018 10:32
@Marmiz
Without any configuration options, babel-preset-env behaves exactly the same as babel-preset-latest (or babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017 together).
babel-preset-env
Claudio Restifo
@Marmiz
Mar 23 2018 10:34
@IsaakNazar the only other thing that I have in mind is in your webpack.config are you using the babel-loaderfor your js or jsx file? I suppose so otherwise nothing would work
Stephen James
@sjames1958gm
Mar 23 2018 10:40
@kevinwr the browser has default padding/margin for elements. You can reset
https://cssreset.com/what-is-a-css-reset/
or something simple to test
body {
   margin: 0;
   passing: 0;
}
Nazar
@IsaakNazar
Mar 23 2018 11:01
@Marmiz sorry I was outside
{
         test: /\.js$/,
         exclude: /node_modules/,
         loader: "babel-loader"
       }
hensn5250
@hensn5250
Mar 23 2018 11:02
@IsaakNazar did you complete Frontend Cert?
Nazar
@IsaakNazar
Mar 23 2018 11:03
@hensn5250 nope, 3 projects left
hensn5250
@hensn5250
Mar 23 2018 11:03
Did you do Advanced Algoritms challenges?
Nazar
@IsaakNazar
Mar 23 2018 11:03
@hensn5250 yes
hensn5250
@hensn5250
Mar 23 2018 11:04
Could you help me with something really quick.
Nazar
@IsaakNazar
Mar 23 2018 11:04
@hensn5250 let's try
hensn5250
@hensn5250
Mar 23 2018 11:05
I'm doing the permutations challenge. #6 of the Advanced Algo challenges
I am able to complete the challenge but I was wondering how others did it cause it kicked my ass
Nazar
@IsaakNazar
Mar 23 2018 11:06
@Marmiz should be like this?
test: /\.jsx?$/
hensn5250
@hensn5250
Mar 23 2018 11:06
To complete it I created a function that gets all permutation via several loops
Aditya
@ezioda004
Mar 23 2018 11:07
@hensn5250 You can see various solutions to that problem here
hensn5250
@hensn5250
Mar 23 2018 11:08
The problem is my function is like 50 + lines of code and only meets bare minimums for the challenge
it doesn't work with more than 8 characters
Nazar
@IsaakNazar
Mar 23 2018 11:08
@hensn5250 this one?
function permAlone(str) {
  return str;
}

permAlone('aab');
Claudio Restifo
@Marmiz
Mar 23 2018 11:08

@IsaakNazar oh wow! I have noticed now that you are using Webpack 4.
They changed quite a lot in there, and one of the thing i remeber reading was the mode flag for the 0 configuration options.

Try adding a --mode flag into your package.json command.
eg:

start : webpack --mode developement

yarn start
hensn5250
@hensn5250
Mar 23 2018 11:08
yup
@ezioda004 thanks
CamperBot
@camperbot
Mar 23 2018 11:09
hensn5250 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 508 | @ezioda004 |http://www.freecodecamp.org/ezioda004
hensn5250
@hensn5250
Mar 23 2018 11:09
@IsaakNazar Yes, that one
Nazar
@IsaakNazar
Mar 23 2018 11:13

@Marmiz

"dev": "webpack --mode development"

npm run dev
result the same Unknown

Aditya
@ezioda004
Mar 23 2018 11:13
@hensn5250 For this I first made a permutation for the string and removed the occurrences via regex which had repeating letters in them.
Nazar
@IsaakNazar
Mar 23 2018 11:15
@hensn5250 one advice I can suggest, If you cant solve the task in 30 minutes, go to the link @ezioda004 sent you, then analyze it, understand it :+1:
@Marmiz cant get rid of this warning messages, even I make --mode development
warn.jpg
hensn5250
@hensn5250
Mar 23 2018 11:18
@IsaakNazar I checked it out will be useful for future and past challenges
BuntyBru
@BuntyBru
Mar 23 2018 11:19
Hi guys
can anyone tell me about this error
Refused to apply style from 'http://127.0.0.1:3000/public/stylesheets/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
hensn5250
@hensn5250
Mar 23 2018 11:19
@ezioda004 I used that approach as well, probably a far different application though
Aditya
@ezioda004
Mar 23 2018 11:21
@hensn5250 Can you show your code?
hensn5250
@hensn5250
Mar 23 2018 11:22
sure ... one sec
Claudio Restifo
@Marmiz
Mar 23 2018 11:23

@IsaakNazar well clearly the issue is with webpack.
The default mode is with production, if that's the case the name won't be displayed in any browser extensions.

The error means that the mode is not set correctly so just the flag is not enough.
Have you tried writing it in the webpack.config file?

I'm pretty sure that if you search for it you'll find why your mode is not being set.

Norvin Burrus
@ndburrus
Mar 23 2018 11:24
@BuntyBru these may be helpful: :sparkles:
hensn5250
@hensn5250
Mar 23 2018 11:26
@ezioda004 here's the code https://jsfiddle.net/gdaufdwj/12/
Claudio Restifo
@Marmiz
Mar 23 2018 11:27
@IsaakNazar also mind that it may just be the CLI being wrong:
webpack --mode=development
seems more correct to me than --mode development
Aditya
@ezioda004
Mar 23 2018 11:31
@hensn5250 At first glance looks hella complicated, and since you did it without recursion its quite big.
hensn5250
@hensn5250
Mar 23 2018 11:31
Yes
I figured it had to be done recursively but just couldn't come up with a pattern
Nazar
@IsaakNazar
Mar 23 2018 11:34
@Marmiz no luck
Aditya
@ezioda004
Mar 23 2018 11:34
Look at the link I sent earlier there's recursion solution there, recursion is not intuitive so its fine but if you can understand how recursion is used in heaps algorithm it'd be better
hensn5250
@hensn5250
Mar 23 2018 11:34
I checked it out
looks as if they put the chracters of the string into an array and sorted the array
yup thats what they did
so I started out on the wrong foot to begin with
Aditya
@ezioda004
Mar 23 2018 11:41
Its not sorting the array but generate() creates permutations and swaps the characters using swap()
I'd look into heaps algorithm, understand and try to implement that in JS
hensn5250
@hensn5250
Mar 23 2018 11:43
^^right. will check it out. They did some clever stuff on there. Makes sense in hindsight
Nazar
@IsaakNazar
Mar 23 2018 11:48
@Marmiz so my Babel and React are fine, the problem is webpack?
Roman Struna
@RomchyFCC
Mar 23 2018 11:53
What are best practices in React in regards to popups? Should be rendered on document load and when a button is clicked it would (show/hide) OR would it be better to call reactDOM render method and render it on click? and unmount it after the interaction is over
Roman Struna
@RomchyFCC
Mar 23 2018 12:05
@ndburrus ty
CamperBot
@camperbot
Mar 23 2018 12:05
romchyfcc sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2187 | @ndburrus |http://www.freecodecamp.org/ndburrus
Norvin Burrus
@ndburrus
Mar 23 2018 12:07
@RomchyFCC you're welcome! enjoy :+1:
Nick Jo
@TheNickjo_twitter
Mar 23 2018 12:07
Hello I'm Facing difficulty in completing the following challenge. https://www.freecodecamp.org/challenges/profile-lookup . CAN YOU PLEASE HELP?
MY CODE IS.

`
//Setup
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];

function lookUpProfile(firstName, prop){
// Only change code below this line

for(i=0;i<contacts.length;i++){
if(contacts[i].firstName===firstName){
if(contacts[i].hasOwnProperty(prop)==true){
return contacts[i].prop;

  }else if(contacts[i].hasOwnProperty(prop)==false){return "No such property";} else {return "No such contact";}
}

}
// Only change code above this line
}

// Change these values to test your function
lookUpProfile("Akira", "likes");
`

Stephen James
@sjames1958gm
Mar 23 2018 12:12
@TheNickjo_twitter If you return in your if, else if and else how will the loop ever progress past the first contact?
Recall return exits the function immediately
Aditya
@ezioda004
Mar 23 2018 12:12
@TheNickjo_twitter First return contacts[i].prop; you should use bracket notation for prop since its a variable.
Nick Jo
@TheNickjo_twitter
Mar 23 2018 12:12
okay ill try
Stephen James
@sjames1958gm
Mar 23 2018 12:14
@TheNickjo_twitter If you post again, don't need to provide the array and here is a link to
how to post formatted code. https://forum.freecodecamp.com/t/markdown-code-formatting/18391
Nick Jo
@TheNickjo_twitter
Mar 23 2018 12:14
thanks @ezioda004 @sjames1958gm it works!!!!!
CamperBot
@camperbot
Mar 23 2018 12:14
thenickjo_twitter sends brownie points to @ezioda004 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 509 | @ezioda004 |http://www.freecodecamp.org/ezioda004
:star2: 9126 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Nick Jo
@TheNickjo_twitter
Mar 23 2018 12:17
can i know why ```
      if(contacts[i].hasOwnProperty(prop)==true){
        return contacts[i][prop];


      }else if(contacts[i].hasOwnProperty(prop)!==true){return "No such property";} 
    } else if (contacts[i].hasOwnProperty(fisrtName)===false){return "No such contact";}
  }
doesnt work?
im sorry add a parent if loop with the condition if(contacts[i]hasOwnProperty(firstName)===true)
why doesnt that work?
Aditya
@ezioda004
Mar 23 2018 12:20
@TheNickjo_twitter If firstName does not correspond to any contacts then return "No such contact", your code will return "No such contact" even without looping through the whole array.
Nick Jo
@TheNickjo_twitter
Mar 23 2018 12:21
yes, of course, thanks
fortuen
@fortuen
Mar 23 2018 12:29
h
BuntyBru
@BuntyBru
Mar 23 2018 12:47

For MIME issues
Remember to attach this line in your app.js

app.use(express.static(__dirname + '/public'));

Nazar
@IsaakNazar
Mar 23 2018 12:53
@sjames1958gm @Marmiz thx
CamperBot
@camperbot
Mar 23 2018 12:53
isaaknazar sends brownie points to @sjames1958gm and @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1191 | @marmiz |http://www.freecodecamp.org/marmiz
:star2: 9128 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 23 2018 12:54
@IsaakNazar :+1:
Claudio Restifo
@Marmiz
Mar 23 2018 13:07
@IsaakNazar have you solved it?
Nazar
@IsaakNazar
Mar 23 2018 13:15
@Marmiz nope, I haven't
Apollo
@enigmacipher
Mar 23 2018 13:28
when specifying the href in a <a>, why doesn't it work if we don't add the https protocol.
ex href="www.google.com" vs href="https://google.com"
This message was deleted
Kyle Holm
@thekholm80
Mar 23 2018 13:57
@enigmacipher i tried it both ways and it seems at least in jsbin.com and chrome, the www.google.com gets interpreted as a relative link so the request gets sent to http://null.jsbin.com/www.google.com
good morning, /help
Ken Haduch
@khaduch
Mar 23 2018 13:58
@thekholm80 :wavy_dash: :wave:
Kyle Holm
@thekholm80
Mar 23 2018 13:59
@khaduch how's your morning, Ken?
Ken Haduch
@khaduch
Mar 23 2018 14:05
@thekholm80 - hi Kyle -- just getting started. I think I need a second cup of coffee... :coffee: :coffee:
how about you?
Kyle Holm
@thekholm80
Mar 23 2018 14:06
I'm looking forward to a relatively quiet day and a relaxing weekend
Nazar
@IsaakNazar
Mar 23 2018 14:20
@Marmiz Finally I've found the solution :smile:
Claudio Restifo
@Marmiz
Mar 23 2018 14:25
@IsaakNazar that was ?
Nazar
@IsaakNazar
Mar 23 2018 14:28
@Marmiz the solution was inside package.json
just have added this line --mode development, and components shows up :smile:
"scripts": {    
    "start": "webpack-dev-server --mode development --open", 
  },
Daniel
@dkapexhiu
Mar 23 2018 14:32
I am getting this error about cors:
Failed to load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=48.8587741,2.2069771000000173&radius=500&type=restaurant&key=key: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
how to solve it?
ido2267
@ido2267
Mar 23 2018 14:32
Hello. I was in the middle of a challenge - creating progect in codepen that will link to a quotes page. I had to leave it for a while and now, when I am using the "map" in my profile page I can't seem to find it again. Was this challenge removed?
Claudio Restifo
@Marmiz
Mar 23 2018 14:36
@IsaakNazar that was like the first thing I've suggested to you :smile: :smile: :smile:
https://gitter.im/FreeCodeCamp/Help?at=5ab4e03c27c509a774959ce6
Nazar
@IsaakNazar
Mar 23 2018 14:38
@Marmiz exactly, well, I'm stupid :smile:
Claudio Restifo
@Marmiz
Mar 23 2018 14:39
Just sorry you've wasted time :smile:
Nazar
@IsaakNazar
Mar 23 2018 14:39
@Marmiz whole day :smile:
@Marmiz thank you again :
Claudio Restifo
@Marmiz
Mar 23 2018 14:42
@IsaakNazar np. Happy coding :sparkles:
Nazar
@IsaakNazar
Mar 23 2018 14:43
@Marmiz :sparkles:
Ken Haduch
@khaduch
Mar 23 2018 15:10
@ido2267 - are you doing the beta or the "regular" site? I think that it's still there.
Ken Haduch
@khaduch
Mar 23 2018 15:12
@ido2267 - looks like you are on the "regular" site - look in the "Intermediate Front End Development Projects - https://www.freecodecamp.org/challenges/build-a-random-quote-machine might be the link? And if you already started the project in CodePen, then go to your CodePen dashboard to look for it...
Apollo
@enigmacipher
Mar 23 2018 16:26
to get an <img> in a new line, should I nest it in a <p>, a <div> or use display property to give it a value of block?
whats considered the best practice?
Gulsvi
@gulsvi
Mar 23 2018 16:41
@enigmacipher The <p> tag semantically represents a paragraph of text, so that's not a great practice for an image. Either a <div> or using the display property are preferred - which one of those to use depends on the overall code.
Maybe not the answer you're looking for, but there are often lots of options in HTML... I think an <article> tag could used be used (with H1,2,3... tags) to keep images each on their own line as well.
ido2267
@ido2267
Mar 23 2018 17:45
@khaduch thank you!!
CamperBot
@camperbot
Mar 23 2018 17:46
:star2: 3814 | @khaduch |http://www.freecodecamp.org/khaduch
ido2267 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
Daniel
@dkapexhiu
Mar 23 2018 23:28
@ndburrus thank you very much
CamperBot
@camperbot
Mar 23 2018 23:28
dkapexhiu sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2191 | @ndburrus |http://www.freecodecamp.org/ndburrus
Daniel
@dkapexhiu
Mar 23 2018 23:29
someone knows how to do an ajax request:
$.ajax({
    url: 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=48.8587741,2.2069771000000173&radius=500&type=restaurant&key=key',

    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",

    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    data: {
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});
it is returning: Uncaught SyntaxError: Unexpected token :
Stephen James
@sjames1958gm
Mar 23 2018 23:34
@dkapexhiu The error is in the response processing:
Don't you need an API key?
@dkapexhiu I threw that code into jsbin and got the same error, processing this response
{
   "error_message" : "The provided API key is invalid.",
   "html_attributions" : [],
   "results" : [],
   "status" : "REQUEST_DENIED"
}
Daniel
@dkapexhiu
Mar 23 2018 23:44
@sjames1958gm i have used this key: AIzaSyClo6C2PQkR5Tu8VO2lifNA1z3nZNUep5Q and it throws errors
Stephen James
@sjames1958gm
Mar 23 2018 23:53
@dkapexhiu Yeah, i am not sure google maps api supports jsonp
Daniel
@dkapexhiu
Mar 23 2018 23:55
yes, you are right! i have tested a solution from stackoverflow using ajax with jsonp but google maps api doesn't support it
@sjames1958gm thanks
CamperBot
@camperbot
Mar 23 2018 23:55
dkapexhiu sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9129 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 23 2018 23:55
@dkapexhiu no problem