These are chat archives for FreeCodeCamp/Help

7th
Feb 2018
byronholmes
@byronholmes
Feb 07 2018 01:43
Hi, everyone. I'm working through FCC beta and I'm working on the API/microservices challenges (backend). Everytime I try to complete the challenge by putting the glitch url in, I get an error 'unexpected token < in JSON at position 0". I looked online for a solution, and all I found was a closed issue discussed on a bug-finding website. I'd really appreciate some advice or help...
Manish Giri
@Manish-Giri
Feb 07 2018 02:09
Anyone here used React Router on codepen?
Claudio Restifo
@Marmiz
Feb 07 2018 02:36
@Manish-Giri that can cause problems bc codepen is rendered in an iframe, but is still picked up by the browser history.
In theory should work, but you can have difficulties along the way
Stephen James
@sjames1958gm
Feb 07 2018 03:06
@byronholmes Generally when I see that error the response is an HTML web page rather than a json file.
Teagan Rehard
@teaganrehard
Feb 07 2018 03:15
I'm just finishing the HTML/CSS section, and I was wondering if there's a technical reason to use RGB color codes vs hex. I've always used hex, and don't see a reason unless you need the extra bits per channel. Am I missing something?
Aditya
@ezioda004
Feb 07 2018 03:23
@teaganrehard You can manipulate alpha(opacity) with rgba, so thats one advantage. Other than that it's just preference I guess.
Claudio Restifo
@Marmiz
Feb 07 2018 03:23

Besides the fact that RBGA doesn't support hexadecimal there's no real reason.
It's a matter of preference/consistency.

For example if you/your designer is porting the palette from photoshop is likely that the format will be in decimals.
Maybe it's worth mention that using RGB or HSL is more readable in conjunction with javascript or a CSS preprocessor

Teagan Rehard
@teaganrehard
Feb 07 2018 03:24
That makes sense. Thanks!
Aditya
@ezioda004
Feb 07 2018 03:28
TIL- Theres 8 digit hex codes with alpha
Manish Giri
@Manish-Giri
Feb 07 2018 03:28
@Marmiz not sure what's going on, it's working partially I think
from the looks of it, <Switch> isn't working correctly
Claudio Restifo
@Marmiz
Feb 07 2018 03:28
link? or code @Manish-Giri
Manish Giri
@Manish-Giri
Feb 07 2018 03:29
the default 404 that shows up when the page loads is for any routes that don't match, and obviously / is the first match
:boom:
Kyle Holm
@thekholm80
Feb 07 2018 03:34
ugh no react dev tools in codepen
Claudio Restifo
@Marmiz
Feb 07 2018 03:35
@Manish-Giri it's 99% a codepen issue thing
more react friendly
Manish Giri
@Manish-Giri
Feb 07 2018 03:37
cool
thx @Marmiz
@thekholm80 how was the show
Kyle Holm
@thekholm80
Feb 07 2018 03:38
pretty freaking awesome
finally saw the new starwars
Manish Giri
@Manish-Giri
Feb 07 2018 03:39
:fire:
@Marmiz ty
CamperBot
@camperbot
Feb 07 2018 03:39
manish-giri sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1146 | @marmiz |http://www.freecodecamp.org/marmiz
Claudio Restifo
@Marmiz
Feb 07 2018 03:40

@Manish-Giri p.s.

exact={true}

can simply be written as

exact />

in jsx

also:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component attribute, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component.

Manish Giri
@Manish-Giri
Feb 07 2018 03:42
so what changes do you suggest
Claudio Restifo
@Marmiz
Feb 07 2018 03:44
either use classes or use the render method inside the router
(but you don't have to worry now)
it's a "thing" worth to know
Manish Giri
@Manish-Giri
Feb 07 2018 03:45
wouldn't the use of classes instead of SFC lead to the same overhead
esp. when I don't need state
Claudio Restifo
@Marmiz
Feb 07 2018 03:48

@Manish-Giri what do you mean?

p.p.s if you want to see the navigation props you can change your functions as:

const ExpenseDashboardPage = ({match, location}) => {
  console.log(match, location)
  return (<div>
    This is from my dashboard component
  </div>)
};
Manish Giri
@Manish-Giri
Feb 07 2018 03:55
@Marmiz currently my four components are stateless functional ones
should I be using classes for them instead?
Claudio Restifo
@Marmiz
Feb 07 2018 04:01

Nah. It's more a thing worth to know in case you want to perform some lifecycle method and wondering why your component gets destroyed.

But in reality, it's highly likely that your route will render classes since they are probably the starting point of something bigger, so they will probably hold some state, query... and pass them to some other components for the render.

I doubt you'll have for real a route that say:

<div> I'm the expenses </div>

:smile:

Manish Giri
@Manish-Giri
Feb 07 2018 04:01
lol
cool, thanks again :smile:
AJEET SINGH
@imajeet
Feb 07 2018 06:13
What's best way to save and organize the code snippet we use frequently?
Claudio Restifo
@Marmiz
Feb 07 2018 06:38
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 10:57

Folks.. I could use some help... I've applied for a job interview and I have been given this task as an assignement. Based on which the recruitment process would proceed.
This is similar to wikiviewer project on fcc. Just run it and try to fuck it up.
Note: styling is not considered in assessment (including responsiveness)
Help me find out cases where it would break

https://sweetcodinginc.github.io/FCCWikiViewer/#

Jamalle Connolly
@jamalle
Feb 07 2018 12:34
Hi, everyone. I have been learning to code on and off for a while now and have a basic knowledge of HTML, CSS and JS. Am starting to feel like I can't put together everything that I've learned and come to a brick wall. Does anyone have any tips on what I could focus on put me on the right path so feel like I am making progress? really appreciate any help or guidance.
Ken Haduch
@khaduch
Feb 07 2018 14:49
@SweetCodingInc - I see one problem that I commonly see with these wiki viewer projects - the results are returned with an index value to indicate the order of relevance related to the search term, and your results are not being presented in that order of relevance. My test search is "potato", but it looks like you are also doing a progressive search so maybe that makes the difference in how your final result list is presented. This is a link to the codebeautify tidying of search results. Not sure if it would help with the assessment of the project, and it's not really "broken" but it's a better way to present the information.
@SweetCodingInc - I didn't notice the tabbed viewer - that's nice! I would like it if it put the new tab to the front of the tab list, but I guess that's a personal preference. Nice project! (I see that someone recommended that in the CodeReview room - so you've got that now.)
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 15:01
@khaduch Thanks for the feedback,, I didn't notice the index thing... Will sort the results based on index then. Yes. That wouldn't help with assessment but the more accurate I make it the more advantage I gain over others. So I see no reason not to do it. :+1:
CamperBot
@camperbot
Feb 07 2018 15:01
sweetcodinginc sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3716 | @khaduch |http://www.freecodecamp.org/khaduch
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 15:02
The tab selection has already been implemented. The new result will be selected by default and will be placed first. Haven't pushed it to pages yet, though.
Thanks again for the feedback :+1:
Kyle Holm
@thekholm80
Feb 07 2018 15:02
@SweetCodingInc i had one little glitch but I can't replicate it. when i first opened up the page I typed in 'cats' and results were displayed, but when I hit enter they disappeared. I can't replicate it though
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 15:02
@thekholm80 Ah!!!!!
Kyle Holm
@thekholm80
Feb 07 2018 15:03
that was before coffee though, so maybe i dreamed it all
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 15:03
Right... I know that problem... It's with react's form component when you don't have action attribute specified. It will try to submit a form to non existent action end point.
No worries, adding novalidate and preventing default should fix it
Thanks @thekholm80
CamperBot
@camperbot
Feb 07 2018 15:04
sweetcodinginc sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1687 | @thekholm80 |http://www.freecodecamp.org/thekholm80
Kyle Holm
@thekholm80
Feb 07 2018 15:04
:+1:
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 15:10
@thekholm80 here's how you can replicate it. When you press enter, it will add ? at the end of the url.
And if you click on any link, it will add # at the end again. So if you end up getting url that ends with ?# pressing enter won't cause the page to refresh
Kyle Holm
@thekholm80
Feb 07 2018 15:10
ah, makes sense
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 15:10
just keep the url https://sweetcodinginc.github.io/FCCWikiViewer and then without clicking any link, hit enter when text field is in focus
you can replicate it as many times as you want
Thembisile
@Thembisile
Feb 07 2018 16:11

Good Day Beautiul Coders, I'm in need of great assistance. I'm doing an excercise on Loops in JavaScript and have a question that i'm stuck with in this excercise. The Question is as follows :
A friend of yours started playing WordCrush a really addictive word puzzle game on Facebook and he asked you to write him some functions to help him solve some word puzzles.

Given a sentence write some functions (function names in brackets) that can:

Find the longest word (longestWord) - the last one in the sentence.
find the shortest word (shortestWord) - the last one in the sentence.
find the sum of all the word lengths, in a sentence. (wordLengths).

Please help out a friend guys!

Aditya
@ezioda004
Feb 07 2018 16:22
@Thembisile Where are you stuck at?
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 16:28
function prepData(str){
  return str.split(' ').reduce((r, c) => {
    r.longest = r.longest ? r.longest.length > c.length ? r.longest : c : c;
    r.shortest = r.shortest ? r.shortest.length < c.length ? r.shortest : c : c;
    r.length = r.length ? r.length + c.length : c.length;
    return r;
  } , {})
}

const data = prepData(`Good Day Beautiul Coders, I'm in need of great assistance I'm doing an excercise on Loops in JavaScript and have a question that i'm stuck with in this excercise. The Question is as follows`);

console.log(data.longest); // assistance
console.log(data.shortest); // a
console.log(data.length); // 157
Thembisile
@Thembisile
Feb 07 2018 16:31
@ezioda004 It was with creating the whole function that i got stuck with, i was confused to either create 3 different functions for those 3 statements.
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 16:32
@Thembisile Share your code
you don't need to create 3 separate functions.
It can be done in a single iteration
Thembisile
@Thembisile
Feb 07 2018 16:39

@ezioda004 here it is then :
function Wordcrush(sentence){
var tWord = sentence.split(', '){

for ( i = 0; i<tWord.length; i++){
  var allWords = tWord[i];
  if( allWords === sentence)

I'm stuck and confused what to do now, I'm not even far with it.

Daniel
@dkapexhiu
Feb 07 2018 16:40
hi! why if the distance is more than 120 px the player continues to move in this game in javascript: https://dkapexhiu.github.io/board-game/? this is the code i have done in controls.js:
https://github.com/dkapexhiu/board-game/blob/master/js/controls.js
Aditya
@ezioda004
Feb 07 2018 16:47
@Thembisile Ok so first var tWord = sentence.split(',') is splitting the string at ,, you need to split them at whitespace. Second for the first function (longestWord) you'll need to compare words length, so you can store initial length in a variable and comparing each splited word and I suppose you can try to figure out further condition.
Thembisile
@Thembisile
Feb 07 2018 17:01

@ezioda004 how about this now
function Wordcrush(sentence){
var tWord = sentence.split("\s++")

for ( i = 0; n=tWord.length; i<n; i++){
var allWord = tWord[i]
if (allWord.startsWith('l')){
I'm sorry if I'm messing up your time. i"m a first time coder. Hope you understand the confusion.

Aditya
@ezioda004
Feb 07 2018 17:04
@Thembisile Thats not how you split, just do sentence.split(" ")
Dont worry, everyone here is to help ;)
Thembisile
@Thembisile
Feb 07 2018 17:05
@ezioda004 Okay thanks ,
CamperBot
@camperbot
Feb 07 2018 17:05
thembisile sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 442 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Feb 07 2018 17:06
if (allWord.startsWith('l')){ May I ask whats the purpose of this line?
Thembisile
@Thembisile
Feb 07 2018 17:07
@ezioda004 Honestly, i was coping from my previous questions in the same excercise. I don't know, i just included it. hahahaha sorry for being a dumb ass.
@ezioda004 Copying*
Aditya
@ezioda004
Feb 07 2018 17:08
Ah its alright, so now you're looping and you can get length of each splitted word with tWord[i].length
Try to think ifyou can come up with a way of comparing these length of words.
Ishaan Bhandari
@ishaanb5
Feb 07 2018 17:13
can someone please explain margins in css? the tutorial here makes no sense
Thembisile
@Thembisile
Feb 07 2018 17:13

@ezioda004 Yeah i did that too,

I think the way i can compare the length of thesee words is by comparing if the length is equal to probably 15 letters then it should return the longest word in the sentence.
Will send the code now for you to check but i'm not sure.

please bare with my difficulties :smile:

Aditya
@ezioda004
Feb 07 2018 17:17
@ishaanb5 Look at this image. Margin is the space outside the border.
@Thembisile Sure lets see what you come up with :P
Ishaan Bhandari
@ishaanb5
Feb 07 2018 17:49
@ezioda004 I get that. Negative margin is confusing, in the tutorial it says it increases the size of element which sounds weird and according to other websites it's something else(i don't get them either).
Kaz Baig
@kbaig
Feb 07 2018 18:44
:wave: you beautiful people
Kyle Holm
@thekholm80
Feb 07 2018 18:45
@kbaig hiya
Kaz Baig
@kbaig
Feb 07 2018 18:45
Howdy do
Kyle Holm
@thekholm80
Feb 07 2018 18:46
not having much fun today
ftp is an outdated technology that should be killed with fire
Kaz Baig
@kbaig
Feb 07 2018 18:46
What's the alternative for pushing a bunch of stuff to a server?
Kyle Holm
@thekholm80
Feb 07 2018 18:47
s3
aws s3 is pretty nifty
i just deal with around 400 ftp sites for work and it's not fun lol
Christopher McCormack
@cmccormack
Feb 07 2018 18:48
@kbaig heya
Kaz Baig
@kbaig
Feb 07 2018 18:50
Ah don't know how deployment works yet, have just had some hosting in the past so FTP was what we used
Kyle Holm
@thekholm80
Feb 07 2018 18:50
we use it just for file sharing
it's pretty common in the publishing world
Kaz Baig
@kbaig
Feb 07 2018 18:51
Why not use a cloud solution like dropbox or owncloud
Kyle Holm
@thekholm80
Feb 07 2018 18:51
lots of reasons, most involve money and/or time
Christopher McCormack
@cmccormack
Feb 07 2018 18:55
Since we're talking file transfer I have a question - what's the easiest way to push a build directory to a production server?
Kyle Holm
@thekholm80
Feb 07 2018 18:57
i think SSH is pretty standard?
i've not been involved in any of that though
Christopher McCormack
@cmccormack
Feb 07 2018 19:00
Yeah I'll have to figure it out, would be much easier to just use something like npm run push or something like that to copy it to the remote
Kyle Holm
@thekholm80
Feb 07 2018 19:05
I would guess you could write a script to deploy, then assign it to "push": yourScript in your package.json file
i've done that in the past to push to firebase
Avi Drucker
@avidrucker
Feb 07 2018 21:18
Hey all. Quick question: Anyone know why the map might not be showing completed exercises? I've finished 191, but on my map it now only displays 2 exercises as having been completed. Thank you in advance
Stephen James
@sjames1958gm
Feb 07 2018 21:29
@avidrucker Note: We have temporarily disabled viewing and sharing solutions, however they are safely stored in your profile. You can learn more about this here.
this message shows on my profile, maybe related to that.
Avi Drucker
@avidrucker
Feb 07 2018 21:30
@sjames1958gm I see that as well. Are your completed exercises still showing up with their "green completion" marks?
Alexander Jarman
@HeinousTugboat
Feb 07 2018 21:37
Anyone here familiar with the flux architecture?
I've a question about it, I'm curious if anyone can help me with it.
Not specifically React/Redux, just like.. theoretically.. I more or less understand how flux works, but I was just wondering how it's supposed to work for actions that take time. Like, say I have an action that's MOVE_LEFT, and every X amount of time, my state changes by Y amount.. how do you represent that in Flux?
Do you just fire off a boatload of actions?
Ken Haduch
@khaduch
Feb 07 2018 21:54
@avidrucker - the completed exercises should be showing with a green checkmark. The reason why they aren't showing the exercises (or running them) is that there was apparently some way to run XSS attacks on the site because of the way that the code was being run. You can read about it here
@avidrucker - if you are looking at the site on the same computer that you solved the exercises on, it will pull the code out of localstorage, if it's there.
Avi Drucker
@avidrucker
Feb 07 2018 22:23
@khaduch Thanks for the tip. I will switch back to my old laptop on which I completed most of my exercises and we'll see if I still have the local storage there. I'll also read up about that XSS business. Thanks!
CamperBot
@camperbot
Feb 07 2018 22:23
avidrucker sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3718 | @khaduch |http://www.freecodecamp.org/khaduch
Stephen James
@sjames1958gm
Feb 07 2018 22:30
@avidrucker No. All of there are not showing.
@HeinousTugboat an action that takes time is several actions in sequence and will have to be represented as such.
Avi Drucker
@avidrucker
Feb 07 2018 22:37
@sjames1958gm Thank you, too. I hope this gets fixed soon...
CamperBot
@camperbot
Feb 07 2018 22:37
avidrucker sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8947 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 07 2018 22:41
@avidrucker Yes.