These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Sep 2018
newmoon
@newmoon
Sep 10 2018 00:01

@Urketadic_twitter That's a fairly clever hack to preload your images :) I think the more elegant solution is to have a pre-loader icon in place of the image that gets replaced when the image finishes loading. You can do this by listening to the onload event:

const myImages = ["https://img1url", "https://img2url", "https://img3url", etc...]
myImages.forEach(imgUrl => {
  const img = new Image();
  img.onload = showMenuImage;
  img.src = imgUrl;
});

in the showMeuImage function, you would then hide the pre-loader icon and show the image in its place.

Some more details on the above: https://www.kirupa.com/html5/preloading_images.htm
Rob
@PGFracing
Sep 10 2018 19:32

```
@media only screen and (max-width: 1200px) {

h1 {font-size: 0.25em; text-align: center;}

.content {font-size: 1em}

ol {margin-left: 5px}

body {max-width: 1200px; padding: 10px; }

}
``` it’s not recognizing my h1 code for some reason?

@media only screen and (max-width: 1200px) {

h1 {font-size: 0.25em; text-align: center;}

.content {font-size: 1em}

ol {margin-left: 5px}

body {max-width: 1200px; padding: 10px; }

}
Christopher McCormack
@cmccormack
Sep 10 2018 19:37
@PGFracing did you check the browser dev console to see if a different selector has higher precedence?
Rob
@PGFracing
Sep 10 2018 19:37
it’s weird I’m using the CSS file for two different web pages and it works on one and not the other and no difference that I can tell so far
Christopher McCormack
@cmccormack
Sep 10 2018 19:38
did you apply the viewport to the head in the document that isn't working?
<meta name="viewport" content="width=device-width, initial-scale=1">
Rob
@PGFracing
Sep 10 2018 19:39
ya I have that the same on both pages
in the head
Christopher McCormack
@cmccormack
Sep 10 2018 19:39
validate that your CSS above is being applied to the element. Even if something else is overriding it, you should still see it in the dev tools
Rob
@PGFracing
Sep 10 2018 19:40
okay I’m not very good a DevTools will try that
Christopher McCormack
@cmccormack
Sep 10 2018 19:44
You should definitely play with them a lot and get familiar, will save so much time later
Keggatron
@Keggatron
Sep 10 2018 19:44
Hi guys, does anyone know if there's a CSS property similar to clip-path that would work on background color?
Rob
@PGFracing
Sep 10 2018 19:44
thanks
Keggatron
@Keggatron
Sep 10 2018 19:45
Essentially I want to add a background to a specific part of a dropdown box to make it appear as if it's a button
Rob
@PGFracing
Sep 10 2018 19:46
would it be crossed out if something is overiding it? Nothing is crossed out?
when you change the code in Developer how do you refresh it so it changes in the Developer Browser Resolution Screen
Rob
@PGFracing
Sep 10 2018 19:55
bootstrap was overriding in order of operations UG
Lia-Sue-Kim
@Lia-Sue-Kim
Sep 10 2018 21:34
when they say if you learn a programming language you learn concept that is the same for every programming language but a little different right
what exactly is the same concept behind every programming language
Brad
@bradtaniguchi
Sep 10 2018 21:40
@Lia-Sue-Kim I mean by definition, id say a concept isn't language specific, something like syntax is (how you write the code)
For example, like the concept of Object Oriented Programming
Brad
@bradtaniguchi
Sep 10 2018 21:43
The expression in question:
 this.state.input =='' && this.state.userAge === '' ? buttonOne : (this.state.userAge < 18 ? buttonThree : buttonTwo)
Johnny
@JohnnyBizzel
Sep 10 2018 21:43
@bradtaniguchi yep
Brad
@bradtaniguchi
Sep 10 2018 21:44
oops
Formatted for sanity ;P
this.state.input == '' && this.state.userAge === ''
  ? buttonOne
  :  this.state.userAge < 18 
    ? buttonThree 
    : buttonTwo
Is this logic correct? I threw out the parentheses too.
also is this.state.input == '' correct? Your not using ===
@JohnnyBizzel
I hate double ternaries. I avoid them like the plague.
I would rather write it out as 2 if else blocks
Brad
@bradtaniguchi
Sep 10 2018 21:49
I ALWAYS format my ternaries like what I posted. Just like what randel posted as a reply to your problem, if formatted correctly ternaries are very readable.
but then ultimately have their places, since there's no way to debug complex code
Johnny
@JohnnyBizzel
Sep 10 2018 21:52
Python stylee
Is it me or is the CSS borked on the curriculum page? https://learn.freecodecamp.org/
I can't read any of the challenges now
crap css.png
Guess no one is here...
Christopher McCormack
@cmccormack
Sep 10 2018 22:00
@JohnnyBizzel yeah it has been messed up for me all day too, in Chrome and Firefox
Johnny
@JohnnyBizzel
Sep 10 2018 22:17
@cmccormack Hmm :confused:
Rob
@PGFracing
Sep 10 2018 22:22
same here (Light light grey)
Jesse
@ki4jgt
Sep 10 2018 22:32
I'm wanting to replace RSS/ATOM with JSON. Do you guys have any protocol suggestions? https://github.com/ki4jgt/JOSS
I am unable to understand this concept. Can someone help me out please ?
Johnny
@JohnnyBizzel
Sep 10 2018 22:50
@mananshah51 What don't you understand?
Manan Shah
@mananshah51
Sep 10 2018 22:53
@JohnnyBizzel
FBPosts.filter(function(post) {
  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
What is this code doing ?
@JohnnyBizzel How Does .filter() work in JS?
@JohnnyBizzel I tried to search and read about it, tried to go through videos, but not able to get the hang of it.
Johnny
@JohnnyBizzel
Sep 10 2018 22:54
@mananshah51 I'm looking it up now because my code isn't working https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Even though I've done this challenge, the system doesn't save solutions so I've no clue how I did it :(
Manan Shah
@mananshah51
Sep 10 2018 22:55
@JohnnyBizzel I will refer the link that you sent,
and try my best to understand it, thank you so much for your time and consideration. Have a good rest of your week.
Johnny
@JohnnyBizzel
Sep 10 2018 22:57
@mananshah51 Ok, looks like the example is shit. You need to save the result of the filter into a new variable.
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); like this
Manan Shah
@mananshah51
Sep 10 2018 22:57
@JohnnyBizzel let me try
Johnny
@JohnnyBizzel
Sep 10 2018 22:58
Also you need to parseInt I believe
Manan Shah
@mananshah51
Sep 10 2018 22:59
Yeah I think so. @JohnnyBizzel
Johnny
@JohnnyBizzel
Sep 10 2018 22:59
@mananshah51 I use this to debug: http://pythontutor.com/javascript.html#mode=edit *not sure if you know about it
parseInt doesnt work. x%1===0 should work
Johnny
@JohnnyBizzel
Sep 10 2018 23:05
@mananshah51 So I'm doing it in 2 stages. First the filter, then the squaring of the numbers (using map)
God knows why parseInt doesn't work. Looks like a weird function.
@mananshah51 How's it going?
Johnny
@JohnnyBizzel
Sep 10 2018 23:10
Ah he must have gone...
Manan Shah
@mananshah51
Sep 10 2018 23:10
@JohnnyBizzel I was not able to figure it out. So I just looked at the solution
I am not able to figure the solution out too.
Johnny
@JohnnyBizzel
Sep 10 2018 23:11
Oh what are you struggling with?
  var newArr= arr.filter((x) => x > 0 && x%1===0)
  return squaredIntegers = newArr.map((y) => y*y);
filter can be confusing
Manan Shah
@mananshah51
Sep 10 2018 23:12
@JohnnyBizzel Let me take quick time out, I will be back shortly.
Johnny
@JohnnyBizzel
Sep 10 2018 23:12
It's like a for loop with a condition.
Manan Shah
@mananshah51
Sep 10 2018 23:12
@JohnnyBizzel Thank you so much for helping me out.
Johnny
@JohnnyBizzel
Sep 10 2018 23:13
@mananshah51 I am around for a bit longer if you need more help
Manan Shah
@mananshah51
Sep 10 2018 23:20
@JohnnyBizzel Thank you so much JOhnny. You are awesome. I will let you know.
Johnny
@JohnnyBizzel
Sep 10 2018 23:21
@mananshah51 :+1:
AbrisM
@AbrisM
Sep 10 2018 23:34
Hi all
Brad
@bradtaniguchi
Sep 10 2018 23:35
hello
AbrisM
@AbrisM
Sep 10 2018 23:53
Hi :D