These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Aug 2018
newmoon
@newmoon
Aug 23 2018 00:04
@AJ-Brommy That should be bug in their HTML :) but the tests seem to pass for me with <li> as the direct child: https://codepen.io/anon/pen/rZVGWj?editors=1010
That's a fork of https://codepen.io/freeCodeCamp/pen/NdrKKL?editors=1000 with the <a><li> switched around
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:06
Seems you are right :D
So going back to my Tribute issue with the padding/margin thing. Should I use *{}?

I used to do that and default things to 0. But when I read:

"// PLEASE NOTE: Adding global style rules using the selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: { color: red }, for a quick example!"

I avoided doing so. However, reading it again, I think I miss read and panic'd lol, it's just a warning to be careful with the testing.

newmoon
@newmoon
Aug 23 2018 00:08
I don't think that will help out with the collapsing margins
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:08
no? oh
I thought it would default all browsers to use the same. 0, or what I state it to be.
newmoon
@newmoon
Aug 23 2018 00:10
Collapsing margins are consistent across all browsers - it's a controversial design in CSS
You may be thinking of something like normalize.css or reset.css - those are options to add in codepen Settings -> CSS
They normalize the default size of all elements across browsers - but unfortunately, margins will still collapse
Morchid Chellali
@Morched23MJ
Aug 23 2018 00:11
Is it mandatory to keep the test suite in my pens? Or it's a pain to the folks who are gonna check my projects for the certificate to add this test suites later on? And thus, I could remove them once I would get my certificate?
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:14
Ok, I see. Yes I just read the link you sent me. But most if it went over my head lol. I'm gunna have to disect it slowly me thinks. Thanks tho. I think this could involve one of the things that has bugged me for years, I may finally come to understand it!!
I think you only need to add it for yourself, to make sure you have passed the criteria. If you are not using it, take it out. I can't see it being a problem. I didn't use it last year with my old tribute you page and portfolio.
@Morched23MJ
Morchid Chellali
@Morched23MJ
Aug 23 2018 00:18
I thought perhaps it would help the developers who are gonna check my projects for the certification, it ease their work.
newmoon
@newmoon
Aug 23 2018 00:18
@AJ-Brommy This is another good example of margins collapsing. The <h3> elements have a margin on top that makes this white space appear between sections. Add padding: 1px to the sections and it all goes away: https://codepen.io/anon/pen/qMdPXo?editors=1100
br3ntor
@br3ntor
Aug 23 2018 00:22
@newmoon thank you
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:23
Ok - but I still don't understand why the white disappears, but the word "section" doesn't move up!? You only add 1px, techinically 2, top and bottom, so why the big space. It's as if the grey box suddenly grows
@Morched23MJ if that's the case I think they would just add it themselves :)
newmoon
@newmoon
Aug 23 2018 00:24
It appears that the gray space grows, but actually the margin above the <h3> elements collapses
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:25
i dont get it lol
newmoon
@newmoon
Aug 23 2018 00:25
Hard to explain lol ¯\_(ツ)_/¯
I don't fully get it either
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:26
to be if it collapses - disappears - then surely everything should just move up. its as if it swaps it for padding
lol
So how does one ever get a 1 pixel padding
newmoon
@newmoon
Aug 23 2018 00:27
This does the same thing:
section h3 {
  margin: 0;
}
Bjorn van de Peut
@bjorno43
Aug 23 2018 00:27
padding: 1px;, not that hard..
:innocent:
newmoon
@newmoon
Aug 23 2018 00:28
I don't know how to explain it any better than with that example. The space between sections collapses by setting h3 to a margin: 0 or setting the section to have 1px of padding
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:29
@bjorno43 goto the link @newmoon sent, go to section, add padding: 1px; and see what happens lol
newmoon
@newmoon
Aug 23 2018 00:30
To answer your question about how someone gets 1px of padding. Most people use a reset css of some type. The third way to remove the spacing between sections is to go to Settings -> CSS and select the radio button for "Reset"
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:30
Yeah no worries, I really do appreciate how you laid that out to show me. I will play with it and try make as much sense of it as i can :) its really helpful so thank you
newmoon
@newmoon
Aug 23 2018 00:30
Always happy to add more confusion lol
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:30
lolololol
but these things are important. I've been dabbling for years, and every now n then something would throw me, things wouldn't go as expected, and I could never figure it out, i didn't know about collapsing margins. I think this is the key. I think this is important!
newmoon
@newmoon
Aug 23 2018 00:33
OK, so some spacing walks into a bar, trips and falls on the floor. The bartender asks if he should be cut off and the spacing replies, "No, I'm just a collapsed margin."
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:36
Hmmmm ok thats interesting
So it's as if it's there, we just can't see it
"On a more serious note, collapsing margins are real and they can be a real pain in the neck if you're not aware of what they are and how they behave. Here are a couple of scenarios where we'd see these little buggers come into play." --- YES!!! I wish I knew this years ago, but no course, or no book, ever told me! :( lol
Bjorn van de Peut
@bjorno43
Aug 23 2018 00:39

@AJ-Brommy That's actually pretty normal. All objects have default margins and paddings. When you override them, they disappear. So if the default was 10 and you change that to 1, it looks like it becomes a lot smaller. These days most ppl use Normalizers to fix this. In the earlier days of CSS ppl used:

* {
    padding: 0;
    margin: 0;
}

To fix that issue. But that's considered bad practise now.

AJ Brommy
@AJ-Brommy
Aug 23 2018 00:40
Why is it considered bad practice? its short concise and does the job :(
Bjorn van de Peut
@bjorno43
Aug 23 2018 00:41
Because it overrides all objects. Not just the ones you want to override. It means coding a whole lot more when the project becomes bigger
AJ Brommy
@AJ-Brommy
Aug 23 2018 00:41
ah because there are many, so best to just include a present pre written normalize style sheet
Bjorn van de Peut
@bjorno43
Aug 23 2018 00:42
Exactly
alpox
@alpox
Aug 23 2018 07:21
@yashwp You may want to use clientHeight instead of offsetHeight as those are calculated slightly different. The scrollHeight calculates like clientHeight
@yashwp MDN even has your exact case written out
Yashwardhan Pauranik
@yashwp
Aug 23 2018 08:33
@alpox can you answer on SO for the changes you want me to do...
alpox
@alpox
Aug 23 2018 08:35
@yashwp No, I'm not active on SO
Yashwardhan Pauranik
@yashwp
Aug 23 2018 08:35
Ohh, so can point out the changes here?
alpox
@alpox
Aug 23 2018 08:36
@yashwp The link I showed you already shows them
Yashwardhan Pauranik
@yashwp
Aug 23 2018 08:36

  @HostListener('document:scroll', ['$event'])
  onScroll(event: any) {
    const elm = this.el.nativeElement;
    console.log(document,)
    if (elm.clientHeight + elm.scrollTop >= elm.scrollHeight) {
      console.log('End');
    }
  }
Christopher
@bradley1492
Aug 23 2018 19:11
@newmoon thanks for the overflow issues tip!
newmoon
@newmoon
Aug 23 2018 19:15
Yeah, no problem @bradley1492 add that word-break property to your code CSS and it should stop overflowing. Or, perhaps you can put an overflow on your <code> elements instead.
Christopher
@bradley1492
Aug 23 2018 19:19
@newmoon what is code?
or code css?
newmoon
@newmoon
Aug 23 2018 19:20
@bradley1492 CSS for the <code> element, is what I meant to say. Sorry about that ;)
<code></code>
Christopher
@bradley1492
Aug 23 2018 19:21
@newmoon I never use that
newmoon
@newmoon
Aug 23 2018 19:21
@bradley1492 Line 34 of your CSS
and in lots of places in your HTML
Christopher
@bradley1492
Aug 23 2018 19:22
@newmoon ahhhh
@newmoon hahahah yesss sorry you're right
newmoon
@newmoon
Aug 23 2018 19:22
No problem :)
Christopher
@bradley1492
Aug 23 2018 19:23
@newmoon hm but it still doesn't work
https://codepen.io/bradley1492/pen/aabLzY?editors=0100
newmoon
@newmoon
Aug 23 2018 19:24
@bradley1492 That's because you have word-break: normal for your code element further down in your CSS(line 76), so it gets overwritten.
Christopher
@bradley1492
Aug 23 2018 19:27
@newmoon hm it's still not working here altough I deleted the one on line 76
https://codepen.io/bradley1492/pen/aabLzY?editors=0100
newmoon
@newmoon
Aug 23 2018 19:30
Hmm, a lot of code changed. Remove white-space: pre from your code element's CSS too. That makes it better, but still overflows under 600px. @bradley1492
Christopher
@bradley1492
Aug 23 2018 19:31
@newmoon Are other people able to write into my pen?
newmoon
@newmoon
Aug 23 2018 19:32
No, not without your password and email used to log in to codepen @bradley1492
Christopher
@bradley1492
Aug 23 2018 19:32
@newmoon alright
@newmoon I'll delete white-space: pre
newmoon
@newmoon
Aug 23 2018 19:34
I think the remaining issue for it underflowing under 570px has something to do with all the absolute and relative positioning you added.
display: inline-block is a great way to get two elements side by side rather than using margins and absolute positioning.
Christopher
@bradley1492
Aug 23 2018 19:36
@newmoon ahh ok so thats what I'll do in the future then I guess, but where am I having two things showing up side by side?
In general is there a way to prevent overflow issues from happening?
newmoon
@newmoon
Aug 23 2018 19:36
Your navbar and your main-doc are side by side until you switch to mobile.
In general, try to avoid specific widths in pixels, large margins, and watch for word wrapping properties, but most of the time, overflow issues are kind of unique depending on the code.
Christopher
@bradley1492
Aug 23 2018 19:41

@newmoon ooh yes thats right I thought I was smart using grid to line up those too :D

okok so I guess I'll have to learn to deal with them

@newmoon thanks for the help
newmoon
@newmoon
Aug 23 2018 19:47
Any time @bradley1492 This is an alternate approach with inline-block elements. No grid, flex, or absolute + relative positioning: https://codepen.io/anon/pen/JaYRqb?editors=1100
Christopher
@bradley1492
Aug 23 2018 19:47
@newmoon oh very interesting
@newmoon so it's not always the best to use grid or flexbox, but as least as possible?!
newmoon
@newmoon
Aug 23 2018 19:49
They're great tools, nothing wrong with using them, but they do add more stuff to learn and know how to use on top of the basics. Sometimes the basics are all that's needed. @bradley1492
Christopher
@bradley1492
Aug 23 2018 19:51
@newmoon Alright makes sense
@newmoon Would you consider the example to be more advanced than a flexbox grid method?
AJ Brommy
@AJ-Brommy
Aug 23 2018 22:05
I just added Normalize to my pen thinking it would help me space things as I want... nope.. still getting problems with these collapsing margins. I just don't get it. nor why others don't seem to be having this problem!? lol
AJ Brommy
@AJ-Brommy
Aug 23 2018 22:23
So it turns out Normalize doesn't default heading margins to 0px; because as soon as I put margin :0; on my h3 poof the problem has gone. tho also i need to do it on hr to get things exact. but i think i've no come up with a better page layout which will remove hr so lets see how that goes.