These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Apr 2018
Amit Patel
@AmitP88
Apr 30 2018 00:01
@sjames1958gm it works, but it shakes a lot for the first 1-2 seconds, almost like it's vibrating
Stephen James
@sjames1958gm
Apr 30 2018 00:02
@AmitP88 YEah, maybe the combination with the bounce is not great :) You can adjust the stagger in the setTimtout
Amit Patel
@AmitP88
Apr 30 2018 00:04
@sjames1958gm hmmm, kinda tricky, but I'll definitely study your code. thanks bro :)
I still tend to build my solutions using for loops and if statements lol
looks like I still have a long way to go when it comes to JavaScript
Stephen James
@sjames1958gm
Apr 30 2018 00:05
@AmitP88 Just keep coding - the more patterns you see the more that you can draw on later
Amit Patel
@AmitP88
Apr 30 2018 00:06
@sjames1958gm will do :)
Amit Patel
@AmitP88
Apr 30 2018 00:18
@sjames1958gm I just looked at your solution some more and it seems so simple now. I thought it seemed complicated at first
Stephen James
@sjames1958gm
Apr 30 2018 00:18
@AmitP88 :)
There are probably even better ways to do the same (maybe even with pure CSS)
Amit Patel
@AmitP88
Apr 30 2018 00:20
I was thinking of that (finding a pure CSS way), but the way I had it setup with the results being appended, I figured it would be difficult to target each individual .single-result div at a time
I definitely need to work on my javascript more though
after I complete the front end certification, I was thinking of doing the Javascript30 challenge to sharpen up my js
Stephen James
@sjames1958gm
Apr 30 2018 00:21
But, a few months ago, you wouldn't have been able to find the simplicity here - that's progress
Amit Patel
@AmitP88
Apr 30 2018 00:21
that's true :)
Stephen James
@sjames1958gm
Apr 30 2018 00:21
I used this pattern of spacing out the processing of an array for my simon game, where I had an array of buttons/sounds I wanted to play out over time
Amit Patel
@AmitP88
Apr 30 2018 00:22
I mean, from what I see, essentially you just wrapped the appended result call in a function and wrote if statement conditionals to control when the function executes (based on list length), then you used setTimeout to execute the function after each second (1000ms)
ahhhh I see. that's a good idea actually
the challenge for me would now be to try to come up with solutions like yours. like now I'm at the point where I can read those kind of solutions and understand better what's going on, but coming up with them out of thin air is another story lol
Paul Borawski
@iAmNawa
Apr 30 2018 02:48
I have a question about the front-end, not in react specifically but it general. Say I needed to make 100 xhr requests seperately, all which will modify one small part of the DOM as a child. Each response will change the state which will also render that child. On the initial load, let’s say that all the data we have requested is empty so every element will render with NaN or loading… the responses start coming in and soon every 100 child elements have filled with the data they have requested. My question is… If I want to constantly update all 100 children every one second or so, what is the most effecient way to continue updating the children? Staggered? Also, what would be the most efficient way to load 100 DOM elements which all get their data from an xhr?
To provide context let’s say that I am loading the prices of cryptocurrency coins. These prices are coming from different APIs and tons of requests and responses are going to be thrown around.
fxceptioN
@fxceptioN
Apr 30 2018 04:01
is freecodecamp down for anyone else?
Dhaval Vira
@dhavalveera
Apr 30 2018 04:06
what ?
Gregory Orton
@ortonomy
Apr 30 2018 04:39

Hi, all.

Take a look at this pen: https://codepen.io/ortonomy/pen/wjgyqa?editors=0100

anyone tell me why the animation doesn't work?
@keyframes grow1 {
    from {
        transform: scale(0);
        // width: 0;
        // height: 0;
    }

    to {
        transform: scale(1.0);
        // width: 50px;
        // height: 50px;
    }
}
As far as I can tell that syntax is bang on. and in 2018, you don't need vendor prefixes for @keyframes in chrome
zootechdrum
@zootechdrum
Apr 30 2018 04:48
hey guys
how do i get my two purple circles to sit next to eachoter
Dhaval Vira
@dhavalveera
Apr 30 2018 04:48
hey
zootechdrum
@zootechdrum
Apr 30 2018 04:48
other
Gregory Orton
@ortonomy
Apr 30 2018 05:02
got it working. Z-index screws up keyframes
...
Daniel
@dbsimeonov
Apr 30 2018 06:24
Guys do you know any js plugin for smooth scrolling when you have links to the same page?
kirbyedy
@kirbyedy
Apr 30 2018 06:26
no need for plugin I think, just a couple of javascript lines
Daniel
@dbsimeonov
Apr 30 2018 06:50
This one is using css property of scroll-behavior. Its not supported to most of the browsers.. I was using it and then realized to check it from caniuse :D
try this then
hensn5250
@hensn5250
Apr 30 2018 07:01

@dbsimeonov check out BootStrap's scroll-spy: https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

Otherwise you would need to write code to do the smooth scrolling

Daniel
@dbsimeonov
Apr 30 2018 07:06
I thought there might be a plugin.. thanks
Daniel
@dbsimeonov
Apr 30 2018 07:12
@ndburrus Own you my life man
Norvin Burrus
@ndburrus
Apr 30 2018 07:13
@dbsimeonov onward and upward! :+1:
ijhar
@ijhar8
Apr 30 2018 07:35
https://codepen.io/ijhar8/pen/YaMbOx why clearInterval is not working in my code
Claudio Restifo
@Marmiz
Apr 30 2018 07:54
@ijhar8 what's stoper? Are you sure it's defined inside the function?
Daniel
@dbsimeonov
Apr 30 2018 07:54
Hey guys :) With lots of help I finally (at least I think that) finished it!
Can you spend a couple of minutes to give me a feedback, will help me a lot :)
https://github.com/dbsimeonov/dbsimeonov.github.io
ijhar
@ijhar8
Apr 30 2018 07:56
@Marmiz stoper= setInterval(tim,1000); yeh its inside function
is this problem related to scope ..?
hensn5250
@hensn5250
Apr 30 2018 08:08
@ijhar8 yes, it's scope related
ijhar
@ijhar8
Apr 30 2018 08:09
@hensn5250 stoper ..?
hensn5250
@hensn5250
Apr 30 2018 08:09
you define the timer-id in one function and try to use that variable in another function
@ijhar8 yes
stoper's scope is limited to the function it was defined in, its not a global variable
well it's actually limited to the if statement it's defined in
Claudio Restifo
@Marmiz
Apr 30 2018 08:24

@dbsimeonov Looks and behave good :)
links are not working (but I assume you are aware of that).

The only bit that I don't like from a UX perspective is the fact that in mobile view the side menu with the link don't close on click.
I can see the page scrolling, but I have to manually close the menu to be able to see the page.
small detail tho.

good job nonetheless :+1:

also code looks clean! maybe add some comment, people love when you comment your code
Daniel
@dbsimeonov
Apr 30 2018 08:26
@Marmiz Thanks for the feedback really! What about the mobile nav - so the trigger for closing it doesn't work?
About the links for the projects are not linked yet I know
aaaa when you click doesn't close! Got it thanks for that(i missed it)
Claudio Restifo
@Marmiz
Apr 30 2018 08:36
:+1: also props for using a bit of ES6 syntax :)
hensn5250
@hensn5250
Apr 30 2018 08:37
@dbsimeonov Yea the page looks nice. Very animated.
Daniel
@dbsimeonov
Apr 30 2018 08:38
Affirmative! I was trying to stay only on vanilla but the plugin for the animations or literally all of them are with jquery hope that doesnt look so ugly.
Claudio Restifo
@Marmiz
Apr 30 2018 08:38
@dbsimeonov forgot before, the "work with arrow" link point to the top of the page instead of the work section. is kinda misleading :)
hensn5250
@hensn5250
Apr 30 2018 08:39
@dbsimeonov Only suggestion I would give is to remove the flashing/highlight? on the numbers when the list items are hovered
Daniel
@dbsimeonov
Apr 30 2018 08:39
really appreciate it guys (y)
hensn5250
@hensn5250
Apr 30 2018 08:39
its a cool effect but there are already other effects going on so its kinda distracting
just my two cents
hensn5250
@hensn5250
Apr 30 2018 08:47
@dbsimeonov that form is pretty nice too, just noticed it. Great color scheme.
Daniel
@dbsimeonov
Apr 30 2018 08:48
@hensn5250 My biggest fear is how I can get it working but will figure it out step by step. And I kind of used the idea from other websites. My design skills are not so good
Claudio Restifo
@Marmiz
Apr 30 2018 08:51
@dbsimeonov you need a backend to handle the form-submit request :)
hensn5250
@hensn5250
Apr 30 2018 08:51
@dbsimeonov looks good to me. I mean that's what you are suppose to do when learning. Duplicate other sites.
hensn5250
@hensn5250
Apr 30 2018 09:01
@dbsimeonov did you use CSS grid on the bike shop project?
Daniel
@dbsimeonov
Apr 30 2018 09:02
umm yes but those projects I'm about to continue them
and the grid is not the best because its really simple
hopefully by the end of May I will have them ready and start applying for a job
hensn5250
@hensn5250
Apr 30 2018 09:05
impressive stuff.
Claudio Restifo
@Marmiz
Apr 30 2018 09:11
@dbsimeonov what other projects do you have?
Daniel
@dbsimeonov
Apr 30 2018 09:17
@Marmiz https://github.com/dbsimeonov?tab=repositories You can see the repositories. But I think not all of them are worth showing. Right now I'm starting Hennessy which has a nice modals on top and Bike Shop which has some nice UI.
Claudio Restifo
@Marmiz
Apr 30 2018 09:18
@dbsimeonov I looked briefly at those, anything more JS heavy?
don't want to sound like a douche, but as someone who's sometimes asked to review code @ work for potential new applicants, I would definitely ask you some JS stuff at the interview :smile:
Daniel
@dbsimeonov
Apr 30 2018 09:19
@Marmiz Unfortunately no, js is really bad side of mine and planning to do few codepens with something like to do app or calculators but nothing too heavy
Most my js is dom manipulation but planning to learn more and more of course
Esteban Borai
@estebanborai
Apr 30 2018 14:33
@dbsimeonov maybe you are interested in a FS Js tiny project of a TodoList?
Nicolas Ramirez
@kamatheuska
Apr 30 2018 15:39

So, I am doing the Validate US Numbers algorithm challenge, this is how much I got:


function telephoneCheck(str) {
  var reg =/^(1\s?)*\(*\d{3}(-|\s|\)\s?)*\d{3}(-|\s)*\d{4}$/;
  return reg.test(str);
}

I am missing the following tests:

telephoneCheck("1 555)555-5555")
telephoneCheck("555)-555-5555")
telephoneCheck("(555-555-5555")

Which should return false. Here is the challenge url:
https://www.freecodecamp.org/challenges/validate-us-telephone-numbers

Nate Mallison
@NJM8
Apr 30 2018 15:44
@estebanborai You have to make sure if you meet a close paren but no open to fail, then if you have an open paren there needs to be a close paren.
I couldn't get it in one regex, although it can be done
Nicolas Ramirez
@kamatheuska
Apr 30 2018 15:58
@NJM8 Are you talking about my issue? :)
Esteban Borai
@estebanborai
Apr 30 2018 15:59
@NJM8 Sorry sir, wrong user
Nate Mallison
@NJM8
Apr 30 2018 16:00
oop
sorry
yes @kamatheuska
Nicolas Ramirez
@kamatheuska
Apr 30 2018 16:02
Not sure how to test it with two regexp...maybe somethind like return reg.test(reg1) && reg.test(reg2)? PS: I don't really like this subject...
Nate Mallison
@NJM8
Apr 30 2018 16:10
I did several if statements to test for each case then reject
yes regex aren't easy, but it doesn't have to be a one liner,
Stephen James
@sjames1958gm
Apr 30 2018 16:23
@kamatheuska If you want it to match one of a set of regex use || not &&
Amit Patel
@AmitP88
Apr 30 2018 16:30
hey guys, I just finished polishing up my Twitch Channels project. What do you think of it?
https://amitp88.github.io/Twitch-Channels/
Christopher McCormack
@cmccormack
Apr 30 2018 16:32
@AmitP88 awesome, glad you added the streams :)
Amit Patel
@AmitP88
Apr 30 2018 16:33
@cmccormack thank you! :) I'll admit, a part of me still wonders if it works correctly lol
Christopher McCormack
@cmccormack
Apr 30 2018 16:33

They took out a user story but you can try ensuring your app passes this one:

User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.

Amit Patel
@AmitP88
Apr 30 2018 16:34
@cmccormack oh yeah, I remember that one. I'll try it out now
Christopher McCormack
@cmccormack
Apr 30 2018 16:36
From a UX standpoint I'd recommend adding links on the avatars and the user name, I know I tried to click it and others probably will too
Amit Patel
@AmitP88
Apr 30 2018 16:36
user_story.png
@cmccormack oh yeah, I originally had the links on the channel names, but the user story said
User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.
I get undefined as the channel name if I add brunofin and cornster404 to my channel list array
Christopher McCormack
@cmccormack
Apr 30 2018 16:41
yup you'll have to add placeholders
Amit Patel
@AmitP88
Apr 30 2018 16:41
does that mean my app isn't working right though? if the placeholders don't automatically show up?
Daniel
@dbsimeonov
Apr 30 2018 16:42
@estebanborai FS js tiny project? Definitely interested to do a TodoList(even have ideas for it)
Amit Patel
@AmitP88
Apr 30 2018 16:42
oh nvm, my question was dumb lol
Christopher McCormack
@cmccormack
Apr 30 2018 16:43
:grinning:
Amit Patel
@AmitP88
Apr 30 2018 16:51
@cmccormack I kinda don't wanna do the placeholder thing lol, since it's a user story that was taken out
Stephen James
@sjames1958gm
Apr 30 2018 16:54
@AmitP88 Does the user story of filtering on online and offline still exist?
Amit Patel
@AmitP88
Apr 30 2018 16:54

@sjames1958gm

User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv.

User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.

User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.

Stephen James
@sjames1958gm
Apr 30 2018 16:55
@AmitP88 Ah, so that has changed
Amit Patel
@AmitP88
Apr 30 2018 16:55
I think I've fulfilled all of them
Stephen James
@sjames1958gm
Apr 30 2018 16:56
@AmitP88 :+1:
Amit Patel
@AmitP88
Apr 30 2018 16:56
@sjames1958gm do you think this is good-to-go?
Stephen James
@sjames1958gm
Apr 30 2018 16:57
@AmitP88 Yes
Amit Patel
@AmitP88
Apr 30 2018 16:57
@sjames1958gm thank you :)
@sjames1958gm I still gotta polish up my Local Weather app (for some reason it's extremely slow to display the data or sometimes it doesn't work at all), so I wanted to make sure my Twitch app was done n dusted lol
Stephen James
@sjames1958gm
Apr 30 2018 16:59
@AmitP88 I have seen instances where the API is slow, so watch for that.
Amit Patel
@AmitP88
Apr 30 2018 16:59
@sjames1958gm yeah, i've heard others say the same thing. Do you think I should try switching to another weather API?
Christopher McCormack
@cmccormack
Apr 30 2018 17:00
which API did you use?
Christopher McCormack
@cmccormack
Apr 30 2018 17:02
darksky is pretty fast and easy to use
have to get an API key though
Amit Patel
@AmitP88
Apr 30 2018 17:03
@cmccormack oh yeah, I've heard of that one. I'll give it a shot. Might as well get practice working with API keys right? :)
Christopher McCormack
@cmccormack
Apr 30 2018 17:03
@AmitP88 yes! always good to test out something you may actually need to use later
Amit Patel
@AmitP88
Apr 30 2018 17:04
@cmccormack yup, plus I don't want the app to be slow if I plan on showing it to employers later ;)
Nate Mallison
@NJM8
Apr 30 2018 17:13
@AmitP88 Just make sure whatever weather service you use is a free key with no CC sign up, doing it all front end like this your key will be exposed so others can take it and use it.
Amit Patel
@AmitP88
Apr 30 2018 17:14
@NJM8 hmmm I see. so I have to find a way to hide my key when I use it in JS?
Nate Mallison
@NJM8
Apr 30 2018 17:15
with a static app the way one usually does those front end apps I don't know of a way. It would have to be something on a server with some backend that safely stores the key then serves the front end
Cory Johnson
@CygnusSW
Apr 30 2018 17:15
Afraid not. You would require some backend logic to "hide" that kind of setting.
Nate Mallison
@NJM8
Apr 30 2018 17:16
@AmitP88 it usually isn't a big deal, I doubt hackers are scanning the web for our exposed weather api keys, haha, no value in it.
Amit Patel
@AmitP88
Apr 30 2018 17:17
@NJM8 lol for sure. @Rom2711 hmmm, I haven't done any backend stuff so far lol
I would think DarkSky API would have a way for developers to prevent this though?
Nate Mallison
@NJM8
Apr 30 2018 17:18
but if say someone here used your key by mistake while learning from your app it could charge you if you have it set up that way. I think most apis don't require some form of payment stored, they just limit the number of calls you can make with a free key. I have come across some though that require a CC then charge if you make more than the free tier of api calls
looks like you can sign up without a CC and they will suspend if more than 1000 calls a day. don't worry about it, I just wanted to make you aware that with a key that you plan to use in a real app it needs to be hidden somehow
Cory Johnson
@CygnusSW
Apr 30 2018 17:22
Like Nate said, I wouldn't worry about it. FCC has picked very low-risk API-types for campers to use. Just keep it in mind before you do a personal project with something like a payment-API :). You did give me an idea for a personal project though :)
Amit Patel
@AmitP88
Apr 30 2018 17:22
@NJM8 oh yeah I've heard about that too. I think the paid ones are only if you plan on making > 1000 or so calls a day or something like that, for a large scale app
Cory Johnson
@CygnusSW
Apr 30 2018 17:23
Most APIs are a freemium model, so you can develop in your dev/local environment fine, but then as you release to a larger audience, then they can start billing you.
Nate Mallison
@NJM8
Apr 30 2018 17:23
yup
Amit Patel
@AmitP88
Apr 30 2018 17:24

@Rom2711

You get 1,000 API calls for free each day. After that, we prorate each additional call at a rate of $0.0001 per call. The counter resets every day at midnight UTC. As long as you make fewer than 1,000 calls each day, the API is free.

I think it would take a ton of calls per day to get billed even a $1, so I should be safe right? :D

Nate Mallison
@NJM8
Apr 30 2018 17:25
@AmitP88 I have a group of users ready to go just let me know when the app is published. :smile: 😂😂
just kidding
Amit Patel
@AmitP88
Apr 30 2018 17:25
@NJM8 lol I think 30 users should be fine :P
as long as it's not like a million ppl haha
Michael Cordero
@CyberPutty
Apr 30 2018 18:32
has anyone done the force directed graphs challenge
Gulsvi
@gulsvi
Apr 30 2018 19:05
At least 1,167 people have done it according to: https://about.freecodecamp.org
Brian
@BrianCodes33
Apr 30 2018 19:13
i ran into some wordpress problems . does anyone have wp experience here mind lending me a hand
Jonathan Tey
@jontey
Apr 30 2018 19:37
@BrianCodes33 what kind of wp problem?
Brian
@BrianCodes33
Apr 30 2018 19:44
@jontey i sent you a DM
amare16
@amare16
Apr 30 2018 21:20
someone has a skill on Angular 5 please?
Brad
@bradtaniguchi
Apr 30 2018 21:38
@amare16 Whats up :D