These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Dec 2017
Santiago Fernandez
@sf-jd
Dec 03 2017 00:00
what are you looking to practice?
mohammed-rabii
@mohammed-rabii
Dec 03 2017 00:00
javascript
Santiago Fernandez
@sf-jd
Dec 03 2017 00:00
yes i get that, but, beginner, intermediate, advanced?
for backend, for frontend? for solving algorithms?
mohammed-rabii
@mohammed-rabii
Dec 03 2017 00:01
beginner-intermediate for backend && frontend please
Santiago Fernandez
@sf-jd
Dec 03 2017 00:01
k, you can try this site www.freecodecamp.com
:3
jk, you can also look at sites like codewars
mohammed-rabii
@mohammed-rabii
Dec 03 2017 00:03
thanks bro :D
Liam Docherty
@ldocherty1
Dec 03 2017 00:13

When the user clicks on my font awesome icon within the JS how can I change the scroll down speed?

// transition from S1-S2 function
$(document).ready(function() {
    $(".fa.fa-angle-double-down").on('click', function(event) {
        event.preventDefault();
        debugger;
        if (this.parentElement.hash !== "") {
            event.preventDefault();
            // Store hash
            var hash = this.parentElement.hash;
            console.log(`hash = ${hash}`);
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 300, function() {
                window.location.hash = hash;
            });
        } // End if
        console.log(`hash2 = ${hash}`);
    });

I tried changing the value 300 however nothing happened.

Philip Orchard
@orshy
Dec 03 2017 00:15
Can anyone answer a question regarding hosting a react-app on git-hub pages please and thank you
Ken Haduch
@khaduch
Dec 03 2017 02:58
@ldocherty1 it seems that you should be able to change the value in the animate function - but what are you changing it to? You might have to make a significant change to make it noticeable? But how are you changing the scroll speed - a separate button? Or maybe I'm just confused about what you are attempting to do - but increasing that number should definitely slow down the animation.
Ken Haduch
@khaduch
Dec 03 2017 03:05
@ldocherty1 - if you change the value, make sure that you reload the page to get the new setting in place, like to click "Run" if you have automatic update disabled (if you're using CodePen). But if you play with the example on w3schools try it editor - https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll - change the value on the animate to something like 2000 and click the "Run" button on top of the editor panel to load the new changes, then click the link, you should see a much slower scroll.
Tom
@moT01
Dec 03 2017 03:21
@khaduch
you done anything with react/redux?
Ken Haduch
@khaduch
Dec 03 2017 03:29
@moT01 - I have been going through a course on Udemy for react/redux. I'm getting some understanding, but far from being really knowledgeable about it...
have you a question?
Tom
@moT01
Dec 03 2017 03:30
yea'
why is my crap broken
Ken Haduch
@khaduch
Dec 03 2017 03:31
I think that crap is always broken? That's why it's crap... LOL
Tom
@moT01
Dec 03 2017 03:32
do you have few minutes, i will try and explain if you want to take a look
Ken Haduch
@khaduch
Dec 03 2017 03:36
sure, I have a few minutes. I'll try to help, and it might be an interesting learning experience...
Tom
@moT01
Dec 03 2017 03:37
im on my pinterest clone
i get an array of all my things posted from my mongo
map it in a component
    return (
      <div className="manyBooksContainer">
        {this.props.postsToDisplay.map((post, index) =>
          <Post key={index} post={post}/>
        )}
      </div>
    );
so im mapping a bunch of post components
which display the posts
a picture
with a few buttons
one of them is a delete button
  remove() {
       console.log('delete clicked in component');
    this.props.deletePost(this.props.post._id, this.props.post.postedBy, this.props.username).then(res => {
        console.log(this.props.state);
      this.props.addFlashMessage({
        type: this.props.message.type,
        text: this.props.message.content
      });
    });
  }
that's the function that fires when you hit the delete button
this.props.deletePost is an action
so let me just post the action
export function deletePost(postID, postOwner, authenticatedUsername) {
  console.log('deletePost action');
  return dispatch => {
    return axios.patch('/api/posts/deletePost', { postID, postOwner, authenticatedUsername }).then(res => {
      console.log('deletePost action.then => dispatch');
      const postsToDisplay = res.data[0];
      const message = res.data[1];
      dispatch(postsPlusMessage(postsToDisplay, message));
    });
  }
}
Tom
@moT01
Dec 03 2017 03:43
so we hit delete -> fire this.props.deletePost -> go to the server -> delete it -> send back the new array and a message -> which updates the store -> which should see the new message -> and display it
I have other actions where this all works fine
but the delete one is like always one step behind
the message will say deleted or error or whatever
so the first time i click delete i dont get the message, - the function all works, db record gets deleted - store gets updated - but the message doesn't display
so the second time i click delete - i get the message from the first click
really tough to explain - and i dont blame ya if you're lost
that console log in the remove() shows the old state
Tom
@moT01
Dec 03 2017 03:49
but a console log from the parent component, shows the new state - and logs before
Tom
@moT01
Dec 03 2017 03:58
got nothin?
Ken Haduch
@khaduch
Dec 03 2017 03:58
@moT01 - yes, it's not a very simple sequence of events there.
So are you saying that when you delete, it still displays the items, including the one that was deleted, until the next time you delete, then it displays the items with the previous one that was deleted? And always one click behind.
When you remove the item, what actually causes the re-display of everything? Is there a database read involved to get the items again - maybe there is a synchronization problem with that. (This is a guess...)
Tom
@moT01
Dec 03 2017 04:02
when i delete, it actually does delete the item and no longer displays - but the message doesn't get displayed - and if i delete again - then same thing - item gets removed - but now i get the message from first last click
so i think the re-render comes from the array changing - when the item gets removed from the db and i send the new array of items back - the store gets updated with the new array - and the parent component re-maps the posts
Ken Haduch
@khaduch
Dec 03 2017 04:03
oh... so it's just the message. Let me look over it again and think it through a little more
the message coming from the remove() function? console.logging the state?
Tom
@moT01
Dec 03 2017 04:07
the message is a pop-up message
not console logging the state
that's just so i can see what the state is
username Link password link
so you can see what i mean by pop up message - if you want to look
its all the same on this project
i basically took that project and change the content
Ken Haduch
@khaduch
Dec 03 2017 04:11
@moT01 - using the Opera browser, I clicked on the "Trip to the zoo", and i got a message overlaying the screen "A trip to the zoo has been removed." First time. Then "Rockets and Spaceships" - also displayed a popup message that it was removed.
Tom
@moT01
Dec 03 2017 04:12
did you click the delete button
Ken Haduch
@khaduch
Dec 03 2017 04:12
yes, those were the first two books in the list (as I saw it) that had a "Delete" button...
Tom
@moT01
Dec 03 2017 04:12
yup
that's what's supposed to happen
but on this project - it has issues
Ken Haduch
@khaduch
Dec 03 2017 04:13
ah - but now I unrequested the "Harry Potter" book, and I tried to delete the last book on the list, and I have two messages about the Harry Potter book being unrequested.
Tom
@moT01
Dec 03 2017 04:14
fun
Ken Haduch
@khaduch
Dec 03 2017 04:15
and I X'ed those out on the screen, deleted the last remaining book with a delete button, and got the message for the previous book deletion, so that seems to be what you are seeing, I just had to do it after the unrequest, apparently?
Tom
@moT01
Dec 03 2017 04:15
i was on that site and hit a few buttons - possibly logged in on the same name - that might have cause an issue, but that sounds like my problem
Ken Haduch
@khaduch
Dec 03 2017 04:16
I did get one message (just checked the devtools console) Uncaught ReferenceError: bg is not defined at HTMLImageElement.<anonymous> don't know if that has any impact on this?
Tom
@moT01
Dec 03 2017 04:18
doesn't ring a bell - it might
Ken Haduch
@khaduch
Dec 03 2017 04:18
this is probably coming from the bowels of the translated JSX code.
Tom
@moT01
Dec 03 2017 04:24
yea, i dunno
Ken Haduch
@khaduch
Dec 03 2017 04:25
I'm not getting consistent behavior. I added three books, then deleted them all, and they all seemed to be synced up as far as removing them, and the messages were timely.
Tom
@moT01
Dec 03 2017 04:26
sounds like an async issue maybe
Ken Haduch
@khaduch
Dec 03 2017 04:26
but it seemed to be after an unrequest, then a delete, the message that was shown was from the unrequest? Is that a clue for you?
Tom
@moT01
Dec 03 2017 04:27
no
sounds like the same problem
i guess it's not - not a clue
maybe when my head clears up
i think i need some more tutorials on this
Ken Haduch
@khaduch
Dec 03 2017 04:31
well, my head is not going to hold up too much more. I'm going to have to sign off. It does seem to have come consistency with that sequence of unrequesting a book and then deleteing one - at least that message that is on the screen after the delete is the one that was generated from the unrequest.
Tom
@moT01
Dec 03 2017 04:32
yea, im spent for today
Daniel
@DanJP2016
Dec 03 2017 04:32
completed version of the shunting-yard algorithm ive been trying to build for the calculator project. this is without the user interface.
https://codepen.io/bones211/pen/JOxLPO?editors=0011
Tom
@moT01
Dec 03 2017 04:32
@khaduch thanks
CamperBot
@camperbot
Dec 03 2017 04:32
mot01 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3558 | @khaduch |http://www.freecodecamp.org/khaduch
Tom
@moT01
Dec 03 2017 04:32
maybe tomorrow we can take another look
@DanJP2016 what happened to the buttons
Daniel
@DanJP2016
Dec 03 2017 04:34
the power supply on my desktop went out, i'll build that in when the replacement gets here. to save time I just skipped it for now since I am using a friends system to work on it
Tom
@moT01
Dec 03 2017 04:37
looks like it works
Daniel
@DanJP2016
Dec 03 2017 04:39
I think so, but I have a flag set to check if the string is a decimal...thats bad practice right?
Visweswaran
@vishvaravi
Dec 03 2017 05:43
hi what to do to make an image to be centered in the page
Visweswaran
@vishvaravi
Dec 03 2017 06:12
hi hello anybody there
iso
@iso1048
Dec 03 2017 06:42
@vishvaravi you could give the div the img is nested in the css property text-align: center;
dinesh
@1532j0004kg
Dec 03 2017 08:07
can we able to access the javascript file (.js) using the ajax call ?
Ghost
@ghost~580ed9c0d73408ce4f309ef0
Dec 03 2017 08:49
hello
@Asjas hii
Anas Shad
@anasshad
Dec 03 2017 09:39
Hello all.
Anas Shad
@anasshad
Dec 03 2017 09:46
Anybody here
abraham anak agung
@padunk
Dec 03 2017 09:53
@anasshad hello
Anas Shad
@anasshad
Dec 03 2017 10:46
Hi @padunk
abraham anak agung
@padunk
Dec 03 2017 10:47
Hello @anasshad
ADIL KARMOUZI
@mradil16
Dec 03 2017 10:54
Did companies use CSS BEM naming convention in their projects ?
Anas Shad
@anasshad
Dec 03 2017 10:55
Hi, I have a question about React Router 4?
abraham anak agung
@padunk
Dec 03 2017 10:59
@anasshad yes, maybe i can help, maybe not. i'm new to React too.
Ivan Ngundela
@ingundela
Dec 03 2017 11:14
hello everyone... need some help with my projects...when testing my final project on different browsers they look different font size change even the layout change... what should I add to the html markup to make it look exactly the same in all browsers? Thank in advance
alpox
@alpox
Dec 03 2017 11:43
@ingundela Different browsers just support different things - some css is not aknowledged by other browsers as example. Thats why you'd usually test your project all time with different browsers and not just in the end. It can take quite some time to figure out where and why they behave differently and if another browser does not support something you used all over the place, you'd have to remake a lot. Lets not hope that :-)
Ivan Ngundela
@ingundela
Dec 03 2017 11:49
@alpox Thanks mate.. I see.
CamperBot
@camperbot
Dec 03 2017 11:49
ingundela sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1479 | @alpox |http://www.freecodecamp.org/alpox
Craig
@Ardrion
Dec 03 2017 11:53
I am working on my tribute page for the first couple of projects. I have created a <ul><li> set to make my timeline....I want to center the timeline, which I can do...but I want the left side of each line to line up to the left...it's all floaty...any advice? https://codepen.io/ardrion/full/KyrQrg/
heroiczero
@heroiczero
Dec 03 2017 11:59
@Ardrion you can put all your list in a div and center the div. try https://www.w3.org/Style/Examples/007/center.en.html
Craig
@Ardrion
Dec 03 2017 12:00
Oh, thank you so much. I have spent hours researching and trying various things..and never bumped into this bit of detail!
heroiczero
@heroiczero
Dec 03 2017 12:07
np :) good luck
primuscovenant
@primuscovenant
Dec 03 2017 12:09
@heroiczero tx
CamperBot
@camperbot
Dec 03 2017 12:09
primuscovenant sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 2088 | @heroiczero |http://www.freecodecamp.org/heroiczero
elad ben aderet
@eladonline
Dec 03 2017 12:43
hey guys i want to make a scrollButton inside a div that when i click the button the div scrolls by 100px all i know is window.scrollBy(0,0) wich scroll the window
Ivan Ngundela
@ingundela
Dec 03 2017 13:19
hello guys.. need some help with my project https://ingundela.github.io/annieeventos/ it looks the way I want in chrome but when I open the project in safari and firefox everything looks large ( font-size) I trying to understand and learning where and when to use rem and em when setting font-size and usually confortable using rem and most of the time moving away form using px... PLEASE ADVICE on the way forward to have it looking the same across browsers...THANK YOU...
when opening in safari I don't even have the full heith hero background image that I set (does not cover the the page) what is happening?
elad ben aderet
@eladonline
Dec 03 2017 13:41
do you use @media in the css?
@ingundela
alpox
@alpox
Dec 03 2017 13:42
@ingundela
#navbarNav {
    white-space: nowrap;
}
The rest looks the same to me on all those browsers
Ivan Ngundela
@ingundela
Dec 03 2017 13:45
@eladonline yes I did use media...
alpox
@alpox
Dec 03 2017 13:46
@ingundela fonts are the same
When looking at the values
But they somehow show a bit different
Ivan Ngundela
@ingundela
Dec 03 2017 13:47
@alpox Thank you but this is very annoying
CamperBot
@camperbot
Dec 03 2017 13:47
ingundela sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1480 | @alpox |http://www.freecodecamp.org/alpox
elad ben aderet
@eladonline
Dec 03 2017 13:47
@ingundela i had a problam with the max-width once it seems the chrome is very comfortable with max-width while others need min-width
past a link to your source code
alpox
@alpox
Dec 03 2017 13:50
@ingundela https://yuilibrary.com/yui/docs/cssreset/ could maybe help
Ivan Ngundela
@ingundela
Dec 03 2017 13:50
@alpox I totaly agree if the browsers don't show exactly the same... but also they don't have to differ a lot as I see on my case... I'm testing everthing on my mac laptop..... with different browsers and it look different, safari and firefox look the same with very large font-size....
alpox
@alpox
Dec 03 2017 13:51
@ingundela yea - but you cannot really change that
Ivan Ngundela
@ingundela
Dec 03 2017 13:51
@alpox will add it and see the changes...
alpox
@alpox
Dec 03 2017 13:51
its just the way the browsers treat your font
Ivan Ngundela
@ingundela
Dec 03 2017 13:53
@alpox I understand, I thing that I have to do something with regards the font-size maybe.. don't know....
Amir Saleem
@amirsaleem96
Dec 03 2017 14:00
Hi All
Ivan Ngundela
@ingundela
Dec 03 2017 14:29
@alpox check the browers zoom level and found that chrome was 80%, safari 75% and firefox 100%.. I've now set all my browsers to zoom 100% (default) but still look very large in safari and firefox... added reset css... I was using previously normalize.css (I think it that the same thing)... Still no luck...
alpox
@alpox
Dec 03 2017 14:36
@ingundela Did you set the class for the reset css?
Ivan Ngundela
@ingundela
Dec 03 2017 14:38
@alpox just added the <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
alpox
@alpox
Dec 03 2017 15:08
@ingundela the description told yoh that you also have to set a class to your root element
Ivan Ngundela
@ingundela
Dec 03 2017 15:17
@alpox wooo like this <div id="left-column" class="yui3-cssreset"><h1>Lorem Ipsum</h1></div>
@alpox should I do it for every element that I've set font-size? h1, h2, h3, p, etc?
alpox
@alpox
Dec 03 2017 15:23
@ingundela i think it said only in the root which contains all of those - so maybe you only need it once
Maybe right on the body element
Bartek Lewandowski
@Jabarlew
Dec 03 2017 15:42
thanks @moT01
CamperBot
@camperbot
Dec 03 2017 15:42
jabarlew sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 925 | @mot01 |http://www.freecodecamp.org/mot01
yardr
@yardr
Dec 03 2017 15:56
I have the jquery code which should change the css styles of each icon when I click on it and return the icon to the previous state when I click the next one. But now, when I click the next icon the styles of the previous one remain. How to fix this problem?
$('#bx-pager img').each(function(){
$(this).click(function(){
$(this).width(80).height(80);
});
});
Ken Haduch
@khaduch
Dec 03 2017 16:41
@yardr - how are you setting the styles back? There has to be some action to change the styles back. One way to do that is to define classes that set the styles, and you can either store a reference to the one that has the style to change it, or you can just globally remove the class from all icons by searching for it, and then assign the class to the one that is clicked. But you have to make the change back in some way.
Tiberiu
@tiberiuion
Dec 03 2017 20:43

Hi all, would anyone be able to help me witht he below please, I feel like I’m missing something and don’t know what?

I’m trying to set up a basic front end dev environment with npm/gulp/sass etc in order to work on FCC assignemnts locally.

I came across Zell’s Gulp-started-csstricks repo which I forked then cloned to my local machine.

Essentially I want to add bootstrap and jquery to the index file.

I downloaded bootstrap via npm npm install --save-dev bootstrap@3 then I just copied and pasted the bootstrap-min-css and js to their respective folders in the /app folder. These resources have been referenced in the index.html file like so

<link rel="stylesheet" href="css/bootstrap.min.css”> <script type="text/javascript" src="app/js/lib/bootstrap.min.js"></script>

I followed a similar process to install and use jQuery, however I get the following error for both jQuery and Bootstrap js files

Did not load script at 'http://localhost:3000/app/js/lib/jquery.js' because non script MIME types are not allowed when 'X-Content-Type: nosniff' is given.

I get that copying and pasting files like I did might not be the best approach but I don’t know of another way to use jQuery and Bootstrap via gulp? I don’t even know if this is the right questions to ask…

Johnny
@JohnnyBizzel
Dec 03 2017 21:23
@tiberiuion What does X-content-type: nosniff mean?
crpdomingues
@crpdomingues
Dec 03 2017 21:26
hey guys
im on the basic algorithm section on fcc. trying not to click the hint button stuck on the "Falsy Bouncer". They tell me to study Boolean Objects and array.filter. Can someone help me?
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 03 2017 21:44

@crpdomingues So the task is:

Remove all falsy values from an array.

First we will need a way to identify what falsy values are. For that the description of the Boolean Object is quite helpful.
Then you need to remove all elements which are falsy. For that the Array.filter function is pretty perfect.
Try to take a look at those resources and if you have any question, ask again :) (but I'll probably be sleeping by then... ^^)

Alvaro
@minutazos
Dec 03 2017 21:55
Anyone could tell me why at the portfolio in www.josepcano.com the height is bad computed? there is no floats but even so the div container doesn't fit to the img height contained
Ghost
@ghost~57b1df1e40f3a6eec05f92a8
Dec 03 2017 21:58

@minutazos Do you any of these styles (especially position absolute) here?

.masonry-bg {
    /* position: absolute; */
    /* z-index: -1; */
    /* top: 0; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    /* opacity: 1; */
    /* width: 100%; */
    /* min-height: 100%; */
}

Without it it looks fine

Alvaro
@minutazos
Dec 03 2017 22:28
yea, it was the absolute positioning that caused it
ive put the absolute to the text div like this the img is well displayed and i have the text on the photo
ty
Tiago Correia
@tiagocorreiaalmeida
Dec 03 2017 22:34
I would recommend set the height of the first image to 100vh, opened on mobileclooked strange
Alvaro
@minutazos
Dec 03 2017 22:35
100 vh?
just ive opened on mobile and it looks fine
Tiago Correia
@tiagocorreiaalmeida
Dec 03 2017 22:48
In mine the height of the images its two times the height of my screen so had to allvthat below, was just trying to help
Move
If you use vh it will be height of everyscreen
crpdomingues
@crpdomingues
Dec 03 2017 23:05
@Otto-AA thank you very much man!
CamperBot
@camperbot
Dec 03 2017 23:05
crpdomingues sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 401 | @otto-aa |http://www.freecodecamp.org/otto-aa
Tiberiu
@tiberiuion
Dec 03 2017 23:09
@JohnnyBizzel stackoverflow says it’s an HTTP header. Possibly something to do with the local browsersync server set up via gulp ?