These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Jun 2018
Gulsvi
@gulsvi
Jun 05 2018 00:01
Replace lets us use a function to determine how to replace the character that gets matched. So, in that regex, it looks for any a-z character in the string. For every character that matches, if it's a 'z', replace it with an 'a' otherwise replace the letter with the next letter in the alphabet. @markclynch
markclynch
@markclynch
Jun 05 2018 00:03
@gulsvi Thanks.
Jonathan Albert Cunanan
@jcunanan05
Jun 05 2018 03:53
hello i just have a curious question. is my way of offsetting my form correct or there's other way to offset this? this is my codepen link https://codepen.io/jcunanan05/pen/ERKmYg
i used a position: relative to offset it
markclynch
@markclynch
Jun 05 2018 04:49
can anyone give me a hint how I can get the individual divs to change color to red when clicked in this codepen? React based. Eventually I want to make it so when clicked it reformats the entire screen to a larger window with thumbnails of other greenhouses at bottom.
https://codepen.io/markclynch/pen/KezmXd?editors=0011
want to change the doSomething function to do that instead of console.log div names
Claudio Restifo
@Marmiz
Jun 05 2018 05:03

@markclynch there are a lot of different ways you can do it:
you can dynamically add a class
you can render a different div based on certain condition

(and probably many more)

I like the 2nd approach, but it's a personal preference:

class Parent
 state = { actives = [1, 3], data: [...] }

 changeActive = () => setState with different active

render() {
  data.map(d => {
    if(d is active) render RedComponent

    else render basecomponent
})
}
if you plan on having lots of style changing based on prop I suggest a fantistic library called
styled component
markclynch
@markclynch
Jun 05 2018 05:04
@Marmiz I have heard of it. Just watched a youtube from the creator.
I'm just playing around with React
trying to learn it and how things work with it
Do you need to integrate Redux immediately or can you wait?
Eventually it will be difficult
Well, my app is going to be bigger eventually.
Trying to do sort of a sandbox type approach now.
I really have very little idea of what and how to do things, I can barely get it to do anything without asking questions.
Claudio Restifo
@Marmiz
Jun 05 2018 05:06

@markclynch you actually don't have to use Redux.

even the creator say that you know you'll know need a store manager when the time is right.
The fact that you are asking the question means it's not that time yet

markclynch
@markclynch
Jun 05 2018 05:07
Gotcha.
So if I'm going to go for your approach there then I'll need to build out a different component called RedComponent?
Or since I'm changing how my code operates then I need to make it a class in stead of a stateless classless component?
@Marmiz
markclynch
@markclynch
Jun 05 2018 05:26
@Marmiz Can you or anyone recommend Stephen Grider's Udemy react course? Is it good?
Claudio Restifo
@Marmiz
Jun 05 2018 05:28
@markclynch not really, you can render the same component perhaps with an active props.
If that is true give the color
markclynch
@markclynch
Jun 05 2018 05:28
aha
Claudio Restifo
@Marmiz
Jun 05 2018 05:28

also can't recommend anything, besides React official documentation.

That and be good at javascript

:wink:
markclynch
@markclynch
Jun 05 2018 05:29
I'm trying to get good at Javascript while learning react :)
I'm horrible with ES6
Claudio Restifo
@Marmiz
Jun 05 2018 05:29
so you're good :)
but whatever works for you.
markclynch
@markclynch
Jun 05 2018 05:29
Need to learn very quickly.
Nazar
@IsaakNazar
Jun 05 2018 05:41
@Marmiz :wave: , is it ok? instead of callback anonymous function , I'm passing function name
functoin myFunction(data){
         console.log(data);

       }
        $.get('somelink.com', myFunction)
Nazar
@IsaakNazar
Jun 05 2018 05:47
in official docs examples only with anonymous functions
$.get('somelink.com', function(data){console.log(data)})
Claudio Restifo
@Marmiz
Jun 05 2018 05:53
absolutely
Nazar
@IsaakNazar
Jun 05 2018 05:55
@Marmiz thanx
@Marmiz where's your brownie points? camperbot is on its weekends?
Claudio Restifo
@Marmiz
Jun 05 2018 06:02
¯_(ツ)_/¯
Nazar
@IsaakNazar
Jun 05 2018 06:15
@Marmiz repos has an array that hold only 10 element, if array exceeds 10 elements, then repos has next property that holds api link, where another array with 10 elements and so on, so I need a function that will do this work recursively, but my function doesnt work, help
 $.getJSON(repoApiLinks, function(repos){
              //console.log(repos);
              getNextPage(repos)
              function getNextPage(d){
                if(d.next){
                  getNextPage()
                  $.get(d.next, function(data){
                    console.log(data);                    
                  })
                }
              }

            });
Claudio Restifo
@Marmiz
Jun 05 2018 07:40
@IsaakNazar why getNextPage is declared in the scope of the success function?
Nazar
@IsaakNazar
Jun 05 2018 07:47
@Marmiz I wanted to work that function recursively, please look at this code codepen
the function goes only 1 level deep, gotta make it as deep as there's next property
Claudio Restifo
@Marmiz
Jun 05 2018 07:55
why the recursive function is inside map? what's the logic here?
Nazar
@IsaakNazar
Jun 05 2018 08:05
@Marmiz when I request data from api, the response is values array, which holds datas of repositories, so i'm mapping through each element of an array, and get request from each element
Claudio Restifo
@Marmiz
Jun 05 2018 08:19
so you know that you need to perform extra fetch only looking inside of each value, or is it outside that's written somewhere
David Young
@dayvidwhy
Jun 05 2018 10:10
@IsaakNazar if your going to send off 10 api requests, you can do them in parallel using $.when https://api.jquery.com/jquery.when/
to track when they’ve all finished
instead of maybe doing a slightly more confusing recursive $.get
Aita Kane
@aita-kane
Jun 05 2018 10:10
Hello how to fix the Php.exucutable.path for Intellisense , I change the value from null to php.exe path but everytime VS ask me to set it please help me .
David Young
@dayvidwhy
Jun 05 2018 10:13
let requestUrls = [
    "https://google.com",
    "https://facebook.com"
];

let requests = [];

requestUrls.forEach((url) => {
    requests.push($.getJSON(url));
})

$.when(...requests).done((/* args */) {
    // do stuff with request responses
    // access them via arguments[0].. etc
})
something like this @IsaakNazar
David Young
@dayvidwhy
Jun 05 2018 10:24
here it is in codepen form https://codepen.io/dayvidwhy/pen/RJaJRy?editors=1111 if that helps
Nazar
@IsaakNazar
Jun 05 2018 11:16
@dayvidwhy perfect, thank you :+1:
@dayvidwhy then what do you suggest $.get $.getJSON fetch() axios.get() ? I tried all of them, dont know the difference
David Young
@dayvidwhy
Jun 05 2018 11:20
uh that’s a pretty big question
the $. methods are jquery wrappers around xmlhttprequests, so if your using jquery, and want to use xml etc, seems like a good choice
Nazar
@IsaakNazar
Jun 05 2018 11:20
$.get is only 5 characters, thats why I'm using it right now :)
David Young
@dayvidwhy
Jun 05 2018 11:20
fetch is native code and not xmlhttprequest based, fetch is a new browser api
so works only in newer browsers
axios.get im pretty sure is xmlhttprequests, but lets you do promise chaining, if your into that, like axios.get().then(do something)
axios does something similar though, i use axios the most in my work/personal stuff, you can do axios.all([lots of request urls])
Nazar
@IsaakNazar
Jun 05 2018 11:24
@dayvidwhy my request gives me only 10 pages length , the docs says the maximum length is 100. To get maximum length what kind of argument I gotta pass to?
David Young
@dayvidwhy
Jun 05 2018 11:25
i don’t know, do the docs say anything?
Nazar
@IsaakNazar
Jun 05 2018 11:26
only minimum and maximum allowance of page length
bitbucket docs I mean
nevermind
KingKongg
@KingKongg
Jun 05 2018 11:49
Hi, i'm stuck at a react challenge.
<ReturnTempPassword tempPassword={tempPassword}.length>8 />
is this how you give ReturnTempPassword a prop of tempPassword and assign it a value of a string that is at least 8 characters long ?
David Young
@dayvidwhy
Jun 05 2018 12:06
no because you need to put all of the javascript inside the { }
like you could pass down the length of tempPassword by doing like <ReturnTempPassword tempPassword={tempPassword.length} />
KingKongg
@KingKongg
Jun 05 2018 12:14
@dayvidwhy Thank you. But i not sure why am I getting an error of tempPassword being undefined
David Young
@dayvidwhy
Jun 05 2018 12:14
wheres tempPassword being stored?
KingKongg
@KingKongg
Jun 05 2018 12:15
I'm suppose to give ReturnTempPassword a property of tempPassword
Donnie
@Donnie-D
Jun 05 2018 12:36
On FCC new way of sign in do we have to enter our email ID and then go to our email inbox to receive the sign in code and enter that on FCC every single time? :confounded:
Tom
@moT01
Jun 05 2018 13:33
@Donnie-D it should save in the browsers cookies or something - so if you use the same browser and don't clear/delete wherever it's stored - it should login
KingKongg
@KingKongg
Jun 05 2018 16:57
Hi, how do i pass a prop for a component that should be equal to a string of at least 8 characters for react?
Aita Kane
@aita-kane
Jun 05 2018 17:00
Hi can someone help me with my login form please ?
Tom
@moT01
Jun 05 2018 17:00
@aita-kane whats the problem
Aita Kane
@aita-kane
Jun 05 2018 17:01
@moT01 when I submit wrong e-mail and password or even no information there is no alert-message, even though the connection with the DB working
Tom
@moT01
Jun 05 2018 17:04
k
Aita Kane
@aita-kane
Jun 05 2018 17:06
@moT01 it's PHP . are you going to be able to help me ?
Tom
@moT01
Jun 05 2018 17:09
i can take a look - no promises
is there a repo or a live page or something more you can share?
Aita Kane
@aita-kane
Jun 05 2018 17:12
@moT01 okay... the project 'name in github : https://github.com/aita-kane/HelpLogin
Tom
@moT01
Jun 05 2018 17:21
yea, im not sure how much i can help here...
<input type="email" id="email" class="form-control" placeholder=" email" value="<?= (isset($enteredData['email']))? htmlspecialchars($enteredData['email']) : null?>
can you put that in the value area?
what is it supposed to do
Aita Kane
@aita-kane
Jun 05 2018 17:24
@moT01 it's when the user entered wrong information so he/she won't have to re-enter the email
Tom
@moT01
Jun 05 2018 17:24
so is it php code?
Aita Kane
@aita-kane
Jun 05 2018 17:25
@moT01 yes
Tom
@moT01
Jun 05 2018 17:25
can you run php like that in a .html file?
dont they need a .php extension
Brad
@bradtaniguchi
Jun 05 2018 17:29
^
Aita Kane
@aita-kane
Jun 05 2018 17:33
@moT01 I'm a beginner i thoug so actually. Let me verify . But you can see in my defaultTemplate, in the beginning I defined a condition that, if the if(empty($user)) then show the login form, that's why I have the loginform in the beginning
Tom
@moT01
Jun 05 2018 17:37
is that stuff running?
if so - then you probly don't need the php extension
Aita Kane
@aita-kane
Jun 05 2018 17:40
@moT01 actually i removed the condition in php tag and it still redirects me to my login form which mean that i need to change it into .php
@moT01 Actually this is a code i did based on a github project(Aroma CLone ) . and their default template has .phtml as extension .
Aita Kane
@aita-kane
Jun 05 2018 18:13
@moT01 u still here ?
Tom
@moT01
Jun 05 2018 18:23
@aita-kane
DarkxPunk
@DarkxPunk
Jun 05 2018 18:23
R U STILL THERE glados
Steve Warren
@interactivenyc
Jun 05 2018 18:37

Hey folks - I'm building a "Kitchen Sink" app using React, and am having an issue I described here once before. Now I have a functional site and code to show, and wonder if I could get some guidance.

https://inyc-react-app.herokuapp.com/ImageOverlay

The Router code is in my main App.js file: https://github.com/interactivenyc/inyc-react-app/blob/react-router-menu/src/App.js

and the href links are set in my ExamplesMenu.js file: https://github.com/interactivenyc/inyc-react-app/blob/react-router-menu/src/components/ExamplesMenu.js

I know I should be using the Link class, but don't know how to properly apply that in my ExamplesMenu.js file so that it works with the Router in App.js.

The problem is that whenever I go to a new Example via an href, the whole page reloads, and you see the Facebook Login button appear every time. I believe if I'm using the Link class, it won't reload the whole page, but just refresh the Virtual DOM.
Charlie Waite
@charliearlie
Jun 05 2018 18:54
Why can't you use the Link component in the ExamplesMenu.js?
@interactivenyc - I always forget to tag people
Aita Kane
@aita-kane
Jun 05 2018 19:01
@moT01 yes sorry iwas away
Steve Warren
@interactivenyc
Jun 05 2018 19:03
@charliearlie I tried this a while ago, and asked for help on another board, and they told me that the Links had to be in the same Router as the Routes.
Do you know if this is true/false?
Charlie Waite
@charliearlie
Jun 05 2018 19:05
I wrap my whole app with a Router so Link's would always be a child of that. I'm not sure of your use case that you may need multiple routers?
if not, wrap your component with the withRouter component and you may be able to use links then
Steve Warren
@interactivenyc
Jun 05 2018 19:07
OK - I'll try that.
Thanks, and thanks for the source code reference!
I've never seen withRouter...
Charlie Waite
@charliearlie
Jun 05 2018 19:09
I'm not entirely sure of it's functionality because my Links are usually just children of a Router wrapping the whole app, as I mentioned. But it definitely gives you access to the react router history and location objects
and props.history.push('/route') in an onClick can also be a workaround
Steve Warren
@interactivenyc
Jun 05 2018 19:10
awesome, thanks!
Alexandar B
@ace1122sp
Jun 05 2018 19:15
@interactivenyc check out this if you are interested in react router https://reacttraining.com/react-router/web/guides/philosophy
Steve Warren
@interactivenyc
Jun 05 2018 19:19
Thanks @ace1122sp !
Alexandar B
@ace1122sp
Jun 05 2018 19:20
you're welcome :+1:
Aita Kane
@aita-kane
Jun 05 2018 19:23
can someone help me with min login form in php please ?
Helio Goncalves
@srlhyo
Jun 05 2018 19:56
what is the best image file format for web?
I always get confused between png and svg
Mark Kubik
@KUBIX90
Jun 05 2018 20:04
@DarkxPunk Not sure its anything specific, just churning them out quickly and effectively. Don't think my knowledge of Grid and Flexbox was up to scratch either so been working on that mainly.
DarkxPunk
@DarkxPunk
Jun 05 2018 20:08
@KUBIX90 How you enjoying learning it?
Mark Kubik
@KUBIX90
Jun 05 2018 20:11
@DarkxPunk Enjoying it a lot, makes life so much easier for layouts. Got some templates I'm going to recreate just to practice some more.
Steve Warren
@interactivenyc
Jun 05 2018 21:03
@srlhyo PNG is a bitmap format, and SVG is a vector format. Like the difference between Photoshop and Illustrator files. PNG is certainly more widely supported than SVG these days.
Helio Goncalves
@srlhyo
Jun 05 2018 21:06
@interactivenyc thanks :smile:
DarkxPunk
@DarkxPunk
Jun 05 2018 21:44
@KUBIX90 I would love to see some of your work. Shoot it over to me :)