These are chat archives for FreeCodeCamp/HelpFrontEnd

8th
Apr 2018
Corey Lewis
@cursiv3
Apr 08 2018 01:20
what do you mean by custom js files?
kerafyrm02
@kerafyrm02
Apr 08 2018 03:04
hi ppl
anyone need help
roxxlen
@roxxlen
Apr 08 2018 03:20
using url: 'https://simple-weather.p.mashape.com/weatherdata?lat=' + coords[0] + '&lng=' + coords[1],
so when i sent the setRequestHeader
get a feedback of an array of coords?
porject local weather
zootechdrum
@zootechdrum
Apr 08 2018 03:23
hey guys I am trying to improve my personal profile free code camp challenge
Dhaval Vira
@dhavalveera
Apr 08 2018 03:23
oh
ohk
zootechdrum
@zootechdrum
Apr 08 2018 03:24
I want the background image to cover everything but I am having an issue where the right side has a white space
heres the link
Dhaval Vira
@dhavalveera
Apr 08 2018 03:25
@zootechdrum use
background-size: cover;
background-size: cover;
this will cover your BackGround Image complete & will remove white space
check it
zootechdrum
@zootechdrum
Apr 08 2018 03:26
@dhavalveera ga ga ga gangster
@dhavalveera thanks man
CamperBot
@camperbot
Apr 08 2018 03:26
zootechdrum sends brownie points to @dhavalveera :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @dhavalveera |http://www.freecodecamp.org/dhavalveera
Dhaval Vira
@dhavalveera
Apr 08 2018 03:26
@zootechdrum your welcome. it works ?
zootechdrum
@zootechdrum
Apr 08 2018 03:27
@dhavalveera hell yeah it looks beautiful
Dhaval Vira
@dhavalveera
Apr 08 2018 03:27
@zootechdrum Cool
anyone can explain where did he get latitude and longitude ?
from the feedback of setRequestHeader?
Ken Haduch
@khaduch
Apr 08 2018 03:33
@roxxlen - see the function call navigator.geolocation.getCurrentPosition(success, error); - that is the call to the geolocation function to get the current position. The latitude and longitude are set through that. It is around line 140
roxxlen
@roxxlen
Apr 08 2018 03:40
got it ,thanks
Ken Haduch
@khaduch
Apr 08 2018 04:07
@roxxlen - you're welcome...
Ryan Williams
@Ryanwfile
Apr 08 2018 05:17

I'm trying to generate a few rectangles with text in the corners, I have all of the text set as position:absolute and they are centered using left, right, top, bottom, I'm wondering if there's a more efficient way to do this so I don't have to edit each rectangles text when I create a new rectangle with different text. The css is here

.rect{
position:relative;
background-color:blue;
height:300px;
width:250px;
margin:auto;
}

.cardName{
position:absolute;
left:19%;
font-size:56px;
}

.cardCost{
position:absolute;
left:40%;
top:95px;
font-size:56px;
}

.cardAttack{
position:absolute;
bottom:0px;
left:10px;
font-size:42px;
}

the pen is here https://codepen.io/Ryanwfile/pen/BrqrPr

coderNewby
@coderNewby
Apr 08 2018 06:51
@DarrenfJ another question for you. thanks in advance
CamperBot
@camperbot
Apr 08 2018 06:51
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2454 | @darrenfj |http://www.freecodecamp.org/darrenfj
Abhijeet Singh
@abhijeetps
Apr 08 2018 08:41
Hey guys, I was just wondering, what happened to https://gitter.im/FreeCodeCamp/FreeCodeCamp?
TJ Hardin
@AndroidNinjaX
Apr 08 2018 08:49
@aps120797 I was wondering the exact same thing. Just tried to get here and got a 404
Abhijeet Singh
@abhijeetps
Apr 08 2018 08:51
Yeah. Don't know what happened to those awesome channel.
alpox
@alpox
Apr 08 2018 09:47
It was closed down in favor of the forum
But there is an unofficial discord channel
Most people from the main channel are now there
Daniel Simeonov
@dbsimeonov
Apr 08 2018 11:11
Morning guys, quick question. I'm trying to create some css effects for my portfolio, so my question is should I create the animations toggling a classes or to control it true javascript? I did the animation with javascript for now but realized its not the best approach I think?
Naris R
@KittenHero
Apr 08 2018 11:13
I think css classes are pretty good for simple animations
Samir Sakanovic
@SagiSan
Apr 08 2018 11:17
anyone good in react here ?
Daniel Simeonov
@dbsimeonov
Apr 08 2018 11:17

hmm though so, and I have just one more question regarding UX not sure which one would look better, https://dbsimeonov.github.io/

Thats what I have so far, so the idea is when its clicked the Experiments link to have effect like slider thru projects section or just to slide straight to the section itself

P.S. Only the Home/logo link and projects is working so far. Contact me as well

Naris R
@KittenHero
Apr 08 2018 11:18
It's beautiful
Daniel Simeonov
@dbsimeonov
Apr 08 2018 11:21
@KittenHero glad you liked the effect, so just need to make it with css classes ;) Keep you guys posted for it
mustimuu
@mustimuu
Apr 08 2018 12:46
any wordpress guys in here ?
LydaTech
@lydatech
Apr 08 2018 14:27
@mustimuu yeah whats up?
John
@tertiaryidentifier
Apr 08 2018 14:52
folks, I am so confused by regular expressions. let's say I have a string "I am a string, I have many characters". I want a regular expression that will find all "a"s and all "n"s, but they don't have to be next to each other. what is the correct syntax?
David Vondrovic
@sindat
Apr 08 2018 14:52
heyo :)
Hoang Duc Quan
@BlazingRockStorm
Apr 08 2018 14:53
I'm using D3 to read API like this but it doesn't work :(
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      description: ''
    };
  }

  componentWillMount() {
    d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", response => {
      this.setState({ description: response.description });
    });
  }

  render() {
    return (
    <div className="container">  
      <div className="header">Gross Domestic Product</div>
      <svg className="chart"></svg>
      <div className="notes">{this.state.description}</div>
      <div className="tooltip"><b>Header</b><br /><span>Val</span></div>
    </div>

    );
  }
David Vondrovic
@sindat
Apr 08 2018 14:53
what are you guys working on today?
Hoang Duc Quan
@BlazingRockStorm
Apr 08 2018 14:53
anyone here know the d3+React?
Naris R
@KittenHero
Apr 08 2018 14:54
@tertiaryidentifier do they have to be in one match or multiple matches is fine?
John
@tertiaryidentifier
Apr 08 2018 14:54
multiple matches, I want to target every instance of either of those characters
John
@tertiaryidentifier
Apr 08 2018 14:56
ohhh so, the or does work. thanks!
Naris R
@KittenHero
Apr 08 2018 14:57
any time
Moisés Man
@moigithub
Apr 08 2018 15:12
@BlazingRockStorm tested ur code .. works fine.. (render the APP component missing, and a closing } but i guess u didnt copypaste all ? )
Hoang Duc Quan
@BlazingRockStorm
Apr 08 2018 15:13
Christopher McCormack
@cmccormack
Apr 08 2018 15:13
@BlazingRockStorm I have used D3 with React for the visualization projects, what's your question?
Moisés Man
@moigithub
Apr 08 2018 15:14
too lazy to read github repo :(
put code in https://stackblitz.com/fork/react or https://codesandbox.io/s/new :D
Hoang Duc Quan
@BlazingRockStorm
Apr 08 2018 15:15
@cmccormack well I can't use d3.json to get data
Christopher McCormack
@cmccormack
Apr 08 2018 15:16
@BlazingRockStorm are you getting an error?
I believe you should do your api calls in componentDidMount not componentWillMount https://reactjs.org/docs/react-component.html#componentdidmount
Hoang Duc Quan
@BlazingRockStorm
Apr 08 2018 15:18
@cmccormack nope. the console log is totally empty
Christopher McCormack
@cmccormack
Apr 08 2018 15:18
But you should test your d3 code and verify it works first, then test it within react
@BlazingRockStorm that doesn't mean anything to us as you don't have the log statements in your code on github far as I can tell. Where are you logging
@moigithub that's cool I'll have to save those
I think medium often uses codesandbox these days but it's a bear to read on mobile
Hoang Duc Quan
@BlazingRockStorm
Apr 08 2018 15:23
@cmccormack well I want to use d3 to get the api above. {this.state.desciption} should return the description in the data, not the blank
Christopher McCormack
@cmccormack
Apr 08 2018 15:27
One thing I see wrong @BlazingRockStorm is your callback function parameters - I believe it should be (error, response)
Another issue you may be running into is that github does not serve application/json as far as I remember, you can use https://cdn.rawgit.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json instead
Christopher McCormack
@cmccormack
Apr 08 2018 15:44
@BlazingRockStorm you can see the code working here
Moisés Man
@moigithub
Apr 08 2018 15:44
@BlazingRockStorm tested on codepen which uses d3 version 4 and works ok
changed to v5 and json method dont pull data
Christopher McCormack
@cmccormack
Apr 08 2018 15:45
@moigithub ahh that could explain it
I was testing in stackblitz and couldn't get it to do anything with the api callback
v5 you have to use .then, and the error is moved from the first parameter to the .catch method

@BlazingRockStorm try this if you're using v5:

  componentDidMount() {
    d3.json("https://cdn.rawgit.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json")
    .then( response => {
      this.setState({ description: response.description });
    }); 
  }

@moigithub thanks for figuring that out :)

CamperBot
@camperbot
Apr 08 2018 15:50
cmccormack sends brownie points to @blazingrockstorm and @moigithub :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @blazingrockstorm |http://www.freecodecamp.org/blazingrockstorm
:star2: 3737 | @moigithub |http://www.freecodecamp.org/moigithub
krckyboy
@krckyboy
Apr 08 2018 16:45
Hey, guys. I need a good resource / tutorial on how to make a rating with stars functionality with JS, so if someone has a recommendation, please share with me. Thank you. :)
krckyboy
@krckyboy
Apr 08 2018 16:51
@lydatech Thanks a lot, I'll take a look!
CamperBot
@camperbot
Apr 08 2018 16:51
krckyboy sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2768 | @lydatech |http://www.freecodecamp.org/lydatech
krckyboy
@krckyboy
Apr 08 2018 16:52
@lydatech But this requires changing the HTML, unfortunately and no JS is used. :/
krckyboy
@krckyboy
Apr 08 2018 16:55
@ndburrus Thank you. :)
CamperBot
@camperbot
Apr 08 2018 16:55
krckyboy sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2198 | @ndburrus |http://www.freecodecamp.org/ndburrus
Norvin Burrus
@ndburrus
Apr 08 2018 16:55
@krckyboy you're welcome! enjoy :+1:
David Vondrovic
@sindat
Apr 08 2018 18:02
Hey guys!
What are you working on?
Eric Weiss
@eweiss17
Apr 08 2018 18:09
learning react
alpox
@alpox
Apr 08 2018 18:29
Curing my flu
Norvin Burrus
@ndburrus
Apr 08 2018 18:30
@tertiaryidentifier these may be helpful: :sparkles:
David Vondrovic
@sindat
Apr 08 2018 18:54
I got a question
Is there a way to secure my ajax API call?
The twitch API wants my client ID
which is right there exposed lol
anyone can take it and use it for whatever and that'll tie to my account..
I have no idea how do I avoid that to be honest
Stephen James
@sjames1958gm
Apr 08 2018 18:59
@sindat You can only secure that by using it on your own back end.
Corey Lewis
@cursiv3
Apr 08 2018 18:59
sending data over ajax you just want to do https
David Vondrovic
@sindat
Apr 08 2018 19:00
Thanks for the answers guys
Corey Lewis
@cursiv3
Apr 08 2018 19:00
for sensitive
David Vondrovic
@sindat
Apr 08 2018 19:00
Well it's on codepen you know
Corey Lewis
@cursiv3
Apr 08 2018 19:00
storing ANYTHING sensitive on the front end is bad idea since it's super insecure
David Vondrovic
@sindat
Apr 08 2018 19:00
Nothing sensitive it is for the frontend project
Getting channel information you know
Stephen James
@sjames1958gm
Apr 08 2018 19:01
@sindat Your API key is the sensitive data.
David Vondrovic
@sindat
Apr 08 2018 19:01
Yes that's what I was going to mention
Stephen James
@sjames1958gm
Apr 08 2018 19:01
@sindat That is part of the reason that FCC created a alternate twitch URL
David Vondrovic
@sindat
Apr 08 2018 19:02
Oh they did? I'll read up on that
I see
Update September 29, 2016: Twitch has changed their API and now requires an API key in order to run queries. If you are using CodePen or GitHub pages to build these, we do not recommend adding an API key to your project for security reasons.
This right?
Corey Lewis
@cursiv3
Apr 08 2018 19:03
yup
David Vondrovic
@sindat
Apr 08 2018 19:03
I see I see
Thanks :) I'll use that
Stephen James
@sjames1958gm
Apr 08 2018 19:04
@sindat https://wind-bow.glitch.me/twitch-api/streams/freecodecamp for example
David Vondrovic
@sindat
Apr 08 2018 19:08
amazing
thanks
so I'm getting rid of the header
and it works!
Thanks a bunch
Another question
should I always be using jsonp?
I read up that it overcomes restrictions in all browsers
David Vondrovic
@sindat
Apr 08 2018 19:13
Also, when referring to the twitch API through kraken, I included a type: "GET"
since it seemed neccessary
Now I've noticed that it works without it aswell
alpox
@alpox
Apr 08 2018 19:16
@sindat whenever you can, dont use jsonp. The restrictions that it overcomes are the ones which the browser put in place for security
Meaning that with using jsonp you go a pretty insecure route
David Vondrovic
@sindat
Apr 08 2018 19:42
Oh snap
I see
Thanks alpox
creator0323
@Amasian
Apr 08 2018 19:48
is there any ways I can change icon images into HTML components so that I can apply CSS style directly on it? I am trying to make social media button and I want to apply style directly on the icon rather than revise the icon images on the Photoshop.
Serenity
@qmikew1
Apr 08 2018 20:00
@Amasian you can trace a a bitmap in illustrator or inkscape and save it as svg - and act on it with css; however, svg has a bit of a learning curve - it might be more trouble than it's worth for the specific context/use case (that I think) you're going for
Serenity
@qmikew1
Apr 08 2018 20:08
if you're doing something with font-awesome or whatever you can change color with css like:
.fa-camera-retro {
  color:red;
}
Corey Lewis
@cursiv3
Apr 08 2018 20:12
yeah you'd have to use something already made like font-awesome mentioned by @qmikew1
or make the icon yourself using html components and transforming/positioning, etc
creator0323
@Amasian
Apr 08 2018 20:16
@qmikew1 thank you so much for your clear advice! thank you
CamperBot
@camperbot
Apr 08 2018 20:16
amasian sends brownie points to @qmikew1 :sparkles: :thumbsup: :sparkles:
:star2: 3763 | @qmikew1 |http://www.freecodecamp.org/qmikew1
creator0323
@Amasian
Apr 08 2018 20:17
@cursiv3 I think second option sounds like time consuming work lol I think stick to the first option for now. thank you!
CamperBot
@camperbot
Apr 08 2018 20:17
amasian sends brownie points to @cursiv3 :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @cursiv3 |http://www.freecodecamp.org/cursiv3
Daniel Simeonov
@dbsimeonov
Apr 08 2018 23:03
@ndburrus Man all of those links are priceless. Thanks a lot. Have lots of reading to do now :D
CamperBot
@camperbot
Apr 08 2018 23:03
dbsimeonov sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 2200 | @ndburrus |http://www.freecodecamp.org/ndburrus
Norvin Burrus
@ndburrus
Apr 08 2018 23:03
@dbsimeonov you're very welcome! enjoy :+1:
creator0323
@Amasian
Apr 08 2018 23:56
is 'if(arr[i]==true)' valid comparison?
eeflores
@eeflores
Apr 08 2018 23:57
I think so: it's checking if arr[i] is a boolean value, equal to true
Stephen James
@sjames1958gm
Apr 08 2018 23:57
@Amasian If the array contains booleans If you are comparing to true then you don't need == true
@Amasian this would be the same if (arr[i])