These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Jun 2018
Norvin Burrus
@ndburrus
Jun 17 2018 00:15
@DarkxPunk @gbsimon87 this may be useful :sparkles:
DarkxPunk
@DarkxPunk
Jun 17 2018 00:20
@ndburrus ???
Weird way to be linking mate...
Simon Cordova
@gbsimon87
Jun 17 2018 00:33
Ive got a layout component that basically renders the different components in my app.
One of these components, the form component, Ive currently got a fn that sets a state property (named teamHasBeenCreated) to true once the form is completed correctly.
Only then do I want to render the next component.
Simon Cordova
@gbsimon87
Jun 17 2018 00:39
I know I need one single source of truth, just struggling passing the info over.
abraham anak agung
@padunk
Jun 17 2018 00:47
@gbsimon87 you could lift up state into your layout component and pass the state teamHasBeenCreated to form component as props. Once the state set to true, tell your layout comp to render next component.
Simon Cordova
@gbsimon87
Jun 17 2018 00:52
Thanks @padunk, if you dont mind Ill ezpand a bit.
abraham anak agung
@padunk
Jun 17 2018 00:53
@gbsimon87 sure, if i don't get it might be someone can help tough :smile:
Simon Cordova
@gbsimon87
Jun 17 2018 00:55
My layout component has the form component and the statsTable component. In the form, the user creates a team name and adds players, both of which are stored in the form state.
Once the user succesfully creates the team, I want to unmount the form and mount the statsTable component. However this component needs access to the team name and players, which currently exist in the form component
You are recommending I place that state in the layout (parent) component?
Simon Cordova
@gbsimon87
Jun 17 2018 01:04
I think I may just dedicate an hour or two tomorrow re reading the lifting state part of the docs. Back to the drawing board!
abraham anak agung
@padunk
Jun 17 2018 01:04
@gbsimon87 yes, since you can't pass state as props to siblings component. So you need to lift it up to layout component.
and then you can have stateless component for form and statsTable
Simon Cordova
@gbsimon87
Jun 17 2018 01:06
@padunk yeah it seems thats the only route available. Ill play with it a bit. I guess I just wanted to keep that state info away from my layout component
abraham anak agung
@padunk
Jun 17 2018 01:08
@gbsimon87 i don't hv much experience, but the lowest comp that i want to render is always a stateless component, so that way i can re-use it if i want to. happy coding btw :smile:
Simon Cordova
@gbsimon87
Jun 17 2018 01:19
Thanks for your help @padunk @cursiv3
Corey Lewis
@cursiv3
Jun 17 2018 01:57
@gbsimon87 if I follow correctly, you have a parent component that renders everything, and that is where state is? and when something changes in one of the components that is a child of the parent you want the state in the parent to change to true?
if I think you
Corey Lewis
@cursiv3
Jun 17 2018 02:27
if I have it correct what I'd always do to keep one state would be make functions inside that main component that modify state that take arguments to put into the state, then pass those functions down as props, that way in the child you give that function the argument from the child and the parent applies it to state
I threw together a quick codesandbox, is this similar to what you're asking to do?
Ryan Williams
@Ryanwfile
Jun 17 2018 03:28
I am trying to create a multi level dropdown menu in React and most tutorials I've found are either not done in React or have incomplete instructions with imports from other code without explanations, are there any resources out there for this, seems like such a simple task and without react it takes 5 mins, any help is greatly appreciated.
Lallo Vigil
@lalov1
Jun 17 2018 03:58
Can someone give me an idea of how to append and item to my state using React:
https://codepen.io/lalov1/pen/97756811476267a589a730dc15f881a1?editors=0010
Bjorn van de Peut
@bjorno43
Jun 17 2018 04:06
@Ryanwfile I can find plenty of examples with multilevel dropdown menus done in react, but no tutorials. I did find a recent and comprehensive tutorial on a single level dropdown menu in React. Perhaps you could expand the multilevel part upon it yourself?
Ryan Williams
@Ryanwfile
Jun 17 2018 04:13
@bjorno43 Thank you for the help, I've tried doing it myself but without Bootstrap I spend too much time on it with little advancement, seems like such an overwhelmingly common task I'm surprised there isn't a simple tutorial for it yet
Bjorn van de Peut
@bjorno43
Jun 17 2018 04:14
@Ryanwfile Actually there are. I found them. The naming used is different :smile:
@Ryanwfile Appearently they're called "Nested Drowdown Menu / Component". Here's one of the tutorials: https://engineering.tripping.com/building-an-recursive-nested-dropdown-component-in-react-b1c883e06ac4
Ryan Williams
@Ryanwfile
Jun 17 2018 04:16
@bjorno43 Thank you yea, I already did that one, it doesn't work in codepen
Bjorn van de Peut
@bjorno43
Jun 17 2018 04:19
@Ryanwfile Hmm. Ye you're right. I mean, I see plenty of other tutorials. But they're complete crap. Like a few theories and good luck
Ryan Williams
@Ryanwfile
Jun 17 2018 04:20
@bjorno43 Thank you
include*engine
@newtothat
Jun 17 2018 10:21
is after and before sceudo class for older version of css
do people use it nowodays
and it can create another box for example in 1 div
how is that possible?
include*engine
@newtothat
Jun 17 2018 10:36
here is an example
hensn5250
@hensn5250
Jun 17 2018 10:42
@newtothat yes people use ::after and ::before alot
Phil
@mremotoo
Jun 17 2018 10:43
Why does my code doesn't return the numbers properly?
function newColor(){
    var c1 = {
        r: Math.floor(Math.random()*255),
        g: Math.floor(Math.random()*255),
        b: Math.floor(Math.random()*255)
    };
    var c2 = {
        r: Math.floor(Math.random()*255),
        g: Math.floor(Math.random()*255),
        b: Math.floor(Math.random()*255)
    };
    c1.rgb = 'rgb('+c1.r+', '+c1.g+', '+c1.b+')';
    c2.rgb = 'rgb('+c2.r+', '+c2.g+', '+c2.b+')';
    return "linear-gradient(to right, '+c1.rgb+', '+c2.rgb+')";
include*engine
@newtothat
Jun 17 2018 10:43
it doesnt make sense
that from one box
creating another like clon
Phil
@mremotoo
Jun 17 2018 10:49
This is ridiculous! lol I think I discovered by error. My return statement's quotes.
hensn5250
@hensn5250
Jun 17 2018 10:50
/*
I believe you are mixing up your string values and variable values:
It would be best if you looked into how string literals work, they'd make what you 
are trying to do less complicated.
*/
function newColor(){
    var c1 = {
        r: Math.floor(Math.random()*255),  
        g: Math.floor(Math.random()*255),
        b: Math.floor(Math.random()*255)
    };
    var c2 = {
        r: Math.floor(Math.random()*255),
        g: Math.floor(Math.random()*255),
        b: Math.floor(Math.random()*255)
    };
    c1.rgb = `rgb(  ${c1.r},  ${c1.g},  ${c1.b})`;
    c2.rgb = `rgb(  ${c2.r},  ${c2.g},  ${c2.b})`;
    return `linear-gradient( to right,   ${c1.rgb} ,   ${c2.rgb} )`;
}
hensn5250
@hensn5250
Jun 17 2018 11:03
@mremotoo did you get it working?
If you don't want to use string literals you can replace all single quotes with double quotes in your return statement to fix the string issue
Phil
@mremotoo
Jun 17 2018 11:33

Thanks @hensn5250 . I got it to work. Another challenge I've ran into though, I've tried animating the effect with no joy with animate() and other methods. How could I ease in the transition of colors? Here's my code:

```function newGradient(){
var c1 = {
r: Math.floor(Math.random()255),
g: Math.floor(Math.random()
255),
b: Math.floor(Math.random()255)
};
var c2 = {
r: Math.floor(Math.random()
255),
g: Math.floor(Math.random()255),
b: Math.floor(Math.random()
255)
};
c1.rgb = 'rgb('+c1.r+', '+c1.g+', '+c1.b+')';
c2.rgb = 'rgb('+c2.r+', '+c2.g+', '+c2.b+')';
return 'linear-gradient(to right, '+c1.rgb+', '+c2.rgb+')';
}

function rollColor() {
$('body').css('background', newGradient());
}
```

function newGradient(){
var c1 = {
r: Math.floor(Math.random()255),
g: Math.floor(Math.random()255),
b: Math.floor(Math.random()255)
};
var c2 = {
r: Math.floor(Math.random()255),
g: Math.floor(Math.random()255),
b: Math.floor(Math.random()255)
};
c1.rgb = 'rgb('+c1.r+', '+c1.g+', '+c1.b+')';
c2.rgb = 'rgb('+c2.r+', '+c2.g+', '+c2.b+')';
return 'linear-gradient(to right, '+c1.rgb+', '+c2.rgb+')';
}

function rollColor() {
$('body').css('background', newGradient());
}
TonyRednil
@TonyRednil
Jun 17 2018 12:05
How do I pass my cumulative project through FCC to have it tell me whether or not I've passed all the tests? I just submitted my code pen url it accepted it no problem but someone on here before told me that my code failed 13 of the user stories.
julien Demarque
@JulienDemarque
Jun 17 2018 13:42
@RAJKUMAR18 #welcome-section{height : vh;} should do it.
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:15
nope didn't do the trick
julien Demarque
@JulienDemarque
Jun 17 2018 14:15
@RAJKUMAR18 I am looking now
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:15
whats the problem?
Also the flex items are acting weird. For debug purpose i have assigned different color to the flex
abraham anak agung
@padunk
Jun 17 2018 14:20
@RAJKUMAR18 FCC test suite is pain... set your height to 100vh and remove the padding.
and give top: 0 to your navbar
I never like that test suite, it take away freedom of design
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:22
should i remove all the padding-top
julien Demarque
@JulienDemarque
Jun 17 2018 14:22
@RAJKUMAR18 yes like Abraham said, removet the padding and the media querie in the end
@RAJKUMAR18 You can replace the padding on the welcome-section by a margin-top on the h1 element.
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:24
yes that did it
also can you check my flex items
abraham anak agung
@padunk
Jun 17 2018 14:24
@RAJKUMAR18 what flex?
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:24
In the projects section I have used flex
so try resizing the output window they act weird
abraham anak agung
@padunk
Jun 17 2018 14:27
@RAJKUMAR18 in your projects id?
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:27
yup
julien Demarque
@JulienDemarque
Jun 17 2018 14:28
@RAJKUMAR18 You have display:flex on #projects and .project-tile. I guess that's not what you are trying to do.
display: flex should be given to the container.
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:28
okay let me go through it
abraham anak agung
@padunk
Jun 17 2018 14:29
@RAJKUMAR18 what you trying to do?
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:31
i am trying to create 2 flex rows each having 2 flex items
julien Demarque
@JulienDemarque
Jun 17 2018 14:34
You can then do 2 containers one after the other (not one in the other).
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:35
ok i will try
and let you know
abraham anak agung
@padunk
Jun 17 2018 14:36
@RAJKUMAR18 remove your height: 450px
julien Demarque
@JulienDemarque
Jun 17 2018 14:36
@RAJKUMAR18 You had display: flex on your items. display flex should only be use on the container.
Rajkumar
@RAJKUMAR18
Jun 17 2018 14:36
Ok
abraham anak agung
@padunk
Jun 17 2018 14:40

@RAJKUMAR18 you need

<div id="projects">
  <div id="project-tile-left">
    put your projects here
  </div>
  <div id="project-tile-right">
    put your projects here
  </div>
</div

it is ok to have nested display: flex

I guess its done
Thanks for help
abraham anak agung
@padunk
Jun 17 2018 14:49
@RAJKUMAR18 try udacity responsive web design. It is a free course
niknows
@niknows
Jun 17 2018 17:52

Hello people, can anybody give me advice on how I can improve my web design skills? Resources as courses, books, blogs and tips would be profoundly appreciated.

Last thing, what you think about learning graphic design skills(and software like gimp and inkscape) does it add to the game or not? Thanks!

Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:04
@niknows hey there. there isn't one course or a blog that will make you improve. it's everything. there is no one topic you have to study. you have to study everything.
also, nothing is better than actually making something. you will learn so much by making something.
for example, let's say you want to go for a frontend / web design position (this is assuming that you want to find a job as a dev). the best way to practice would be cloning an existing design.
you are on gitter right now. try cloning gitter frontend. make a site, and make it look exactly like the page you are currently on. that is definitely something you would do as a web developer. you would be provided a design, and you have to produce a pixel-perfect implementation.
niknows
@niknows
Jun 17 2018 18:09
Thanks for your reply @kevinkiklee, I'm really grateful for your tips!
I've already thought about replicating sites, but I usually lose track when it's a complex project.
How should I approach the process of cloning something like https://atom.io/?
Could you share some tips of how I could organize the process? Thank you very much!
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:12
heh, atom would be an extremely complicated app to clone. making a code editor is an advanced topic in computer science, so you can try it later! =)
niknows
@niknows
Jun 17 2018 18:12
I was thinking about just trying to clone their landing page though
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:13
that's perfect!
niknows
@niknows
Jun 17 2018 18:13
I fell in love about its design
and animations.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:13
i would say creating a wireframe would be a great place to go
it is a great design! i like it too, and you will learn a lot from cloning it.
i would say creating a wireframe is a good place to start
go alllllll the way to the bottom. you will see a wireframe there.
niknows
@niknows
Jun 17 2018 18:14
OK, wait.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:15
try to break that page down to boxes. try to understand how the CSS is structured. that will help you think about the next steps.
niknows
@niknows
Jun 17 2018 18:15
Okay! Really, thank you! :D
So, let me see if I understood: I look at the website, build a wireframe for understanding it's architecture, and after that I start to code
Is that right?
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:20
hmm. heh, yes, it is actually that simple in the big picture. =D
how comfortable are you with html and css?
have you had the chance to play around with css flexbox and grid?
niknows
@niknows
Jun 17 2018 18:23
Yes, I have some experience building simple web pages using flexbox and grid . My main goal(at least for layouts) is to use mainly native solutions (i'm avoiding frameworks right now).

Well I've taken a udemy course that taught to build this website: https://www.ianposton.com/omnifood/index.html

I can do stuff similar to that without much hassle by now.

Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:25
yes!!! i agree!
yes, avoid frameworks. build with native solutions. that is the best way to learn.
and that site looks great.
i think you can tackle the atom frontpage then.
it would be difficult, but you will totally learn a lot
niknows
@niknows
Jun 17 2018 18:26
Do you think that it is a good way to spend most of my study time cloning stuff then?
I have never done that before, I'm generally tackling stuff in a fragmented way, and It seems not to be the best way to get the big picture.
I take some time to study js for example, and some times I forget about layout for a while. Then it seems my skills are getting out of balance.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:28
yea, def clone several more.
also, what kind of stuff do you want to go into?
are you interested in the web design aspect of coding, or the software engineering aspect of it?
niknows
@niknows
Jun 17 2018 18:33
Well I don't know if it will answer your question but, I see myself interested in css layout/animations. When i get my hands on javascript, it's also for animation purposes, libraries like paper.js get a lot of my attention.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:34
ooo paperjs looks cool.
i highly suggest going through the fCC frontend module entirely, especially the javascript section.
that knowledge will help you a lot, no matter what you are doing.
niknows
@niknows
Jun 17 2018 18:36
Thanks a lot! Your tips really expanded my mind. hahaha :D
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:36
and also, keep cloning and find more and more advanced ones to clone.
niknows
@niknows
Jun 17 2018 18:36
I'm going to organize myself to tackle atom's webpage :D
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:37
also, chrome devtools is extremely important. really become comfortable with the "elements" tab in devtools.
open devtools on the atom page, and study how they structure the code.
learning to read someone else's code is important also.
niknows
@niknows
Jun 17 2018 18:38
I'm really taking notes here . :D
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:43
the important thing is not to waste too much time thinking about what to study. there is a lot to study, and you have to learn all of them. that's the difficult, and the fun part of all this.
find something to build, and study what you have to learn to build that thing. keep on finding different things to build, and study accordingly.
Steve Warren
@interactivenyc
Jun 17 2018 18:46
What's the best way to handle CSS for responsive design? I've used a bit of SASS in my projects, but went back to pure CSS as I didn't understand a lot of what SASS was delivering. Now I'm trying to do complicated media queries to target different form factors - Desktop/Laptop/Tablet/Phone. What's the best way to handle this using any derivative of CSS? It seems like there should be a well accepted solution for this by now, but when I Google it, I get lots of information that conflicts.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:47
=D there is no really consensus!
Steve Warren
@interactivenyc
Jun 17 2018 18:47
Do you have a strong opinion of your own?
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:47
heh, and oh gee, my favorite way is kinda difficult to explain, and it's hard to see its benefits until you have worked with the system for a lil bit.
Steve Warren
@interactivenyc
Jun 17 2018 18:48
haha... big surprise.
Is it based on SASS?
just give me a couple clues...
to help me Google onward...
I just had a problem targeting my iPhone 6 vs a Desktop machine. The min-width on the iPhone is quite high - about that of a desktop machine, though the pixel density is much higher too. I found I could use this, but have no idea how this selector will affect other devices...
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:51
no, it's just a structural thing. it's defining the mobile first, then overwriting with tablet, then desktop.
.container: {
  width: 300px
}

@media(some tablet size) {
  .container {
    width: 768px
  }
}

@media(desktop size) {
  .container {
    width: 1200px
  }
}

@media(reeeeal wide size) {
  .container {
     width: 1600px
  }
}
Steve Warren
@interactivenyc
Jun 17 2018 18:51
@media screen and (-webkit-min-device-pixel-ratio: 2)
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:51
it's starting from mobile first, then overwriting with desktop
hmm. that's an interesting problem.
Steve Warren
@interactivenyc
Jun 17 2018 18:52
I get that approach, but the horizontal width - as I was just describing - makes it hard to target the right platforms.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:52
yea got it. my thing wasn't for the your question.
hmm
Steve Warren
@interactivenyc
Jun 17 2018 18:52
I think all desktops and laptops will have a pixel ratio of 1. I presume most tablets and phones are higher than 1.
or rather 1 or higher...
I just don't want to reinvent the wheel here if it's a problem that's been solved somewhere. It gets complicated quick.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:53
googling "css media queries iphone retina" got me lots of good results
have you tried out those solutions?
Steve Warren
@interactivenyc
Jun 17 2018 18:54
that's where I found the pixel ratio trick, but as of yet no full solution.
Steve Warren
@interactivenyc
Jun 17 2018 18:55
Ooh, that's pretty good, thanks!
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:55
i think this might be one of those things where you copy-paste all the solutions on the web until you find something that works.
Steve Warren
@interactivenyc
Jun 17 2018 18:55
Yeah... totally.
Kevin K. Lee
@kevinkiklee
Jun 17 2018 18:56
which is totally ridiculously for something this simple and important. you are right, there should be some standard way.
Steve Warren
@interactivenyc
Jun 17 2018 18:57
Or at least an "industry standard" set of acceptable solutions. I'm making a website to help me find work, so want it to address these issues in at least an acceptable way.
I'm not working on a commercial product, so it doesn't have to be perfect. But I assume solutions might be emerging, and I have the luxury of trying out the latest and greatest, and not being stuck on a tech stack adopted by someone else months or years ago ;-)
Anyway - thanks for your input. Are there any other chatrooms or forums you frequent that I might try for this sort of question? I guess it could be a StackOverflow question, but sometimes questions get booted for not being specific enough. They don't want to start any platform wars over there...
Kevin K. Lee
@kevinkiklee
Jun 17 2018 19:00
@interactivenyc sent you a dm
Bjorn van de Peut
@bjorno43
Jun 17 2018 19:02
@interactivenyc I think you might also want to read this: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag As it'll help solve you the pixel issue
Steve Warren
@interactivenyc
Jun 17 2018 19:04
Thanks Bjorn! That's useful.
Bjorn van de Peut
@bjorno43
Jun 17 2018 19:10
@interactivenyc You're welcome. Aside from that I'd recommend a CSS framework like Materialize. Personally I think it's much better than Bootstrap as it doesn't mess around with your structure (no pushing around elements) and allowes you to control elements on a device specific base.
Corey Lewis
@cursiv3
Jun 17 2018 19:54
I love me some viewport meta tag
Nadia
@nadiaschutz
Jun 17 2018 21:28
hey guys is there any Ionic 3 developers ? anyone knows how to place tabs on top and bottom at the same time?
richRocksCodeBlocks
@richRocksCodeBlocks
Jun 17 2018 22:07
@bjorno43 I second that. I actually just used Materialize for the first time on my Survey Form and was pleasantly surprised. You can see it live here: https://richrockscodeblocks.github.io/SurveyForm-IffyFish/
Of view the code in the repo: https://github.com/richRocksCodeBlocks/SurveyForm-IffyFish
include*engine
@newtothat
Jun 17 2018 22:13
im looking for background: url's
fit content or cover
when you add to the body how to shrink or resize background when image is small
i tried w3schools but couldnt find
TonyRednil
@TonyRednil
Jun 17 2018 22:45
How do I pass my cumulative project through FCC to have it tell me whether or not I've passed all the tests? I just submitted my code pen url it accepted it no problem but someone on here before told me that my code failed 13 of the user stories.
Bjorn van de Peut
@bjorno43
Jun 17 2018 22:46
@newtothat background-size:contain; will fit the background inside the element. background-size:cover; will resize it to cover the entire element, however, if the dimensions don't fit, part of the background will be cut.
Megan Taylor
@megantaylor
Jun 17 2018 22:47
@TonyRednil make sure this is at the top of your html: <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
it will create a little green hamburger icon on the top left of your page, that's how the tests are run
Bjorn van de Peut
@bjorno43
Jun 17 2018 22:48
@newtothat If you actually want the image to stretch in either direction to always make it "fit", you're going to need JS. With JS you simply retrieve the size of the element and set the CSS of the image to match.
Bjorn van de Peut
@bjorno43
Jun 17 2018 22:53
@richRocksCodeBlocks Nicely done :) I've been using Materialize for a couple of weeks now and I'm still surprised with how well it works
But then again, Materialize is created and maintained by Google. I'd expect nothing less from a company like that, ghehe
include*engine
@newtothat
Jun 17 2018 23:14
@bjorno43 thanks