These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Jun 2018
Stephen
@stephepush
Jun 26 2018 02:17
Lol, private variables brought up in the ES6 section... The only reason I know the term is because someone asked me what it was during an interview
Also using map/functional JS too... this is way off the rails relative to the rest of the FCC curriculum for the most part
Stephen
@stephepush
Jun 26 2018 02:50
Its useful, maybe a bit advanced, but maybe the ES6 section should come later or possible be split up in ES6 basic and ES6 intermediate?
Uriel Guzmán
@Burinson
Jun 26 2018 05:52
Hey, guys. So I finally obtained the legacy front end development certificate
My question is, is it actually worth anything?
dominikradko
@dominikradko
Jun 26 2018 08:01

https://codepen.io/dvmvnvq/pen/KexaVy

anyone can tell me why inline-block is not working here?

Jacob Colborn
@jcolborn-dropdeadgames
Jun 26 2018 13:12
Yes, you need to have the display: inline-block; associated with the list elements that make up the header.
Since the list element is what we want blocked, that is what we need to have it applied to.
Omar Tan
@wheelhot
Jun 26 2018 13:30

Can anyone help me debug this, it's such an odd bug. It works on Chrome, but not on Safari.

The odd part is, if you open Dev Tools in Safari, it'll work correct (similar to Chrome)

https://jsfiddle.net/kem51zsj/30/

can't figure out why and how should I debug since turning on Dev Tools will "hide" the bug
I've tested the same jsfiddle on Chrome, Opera, Firefox and Safari, only Safari has this "bug"
Tom
@moT01
Jun 26 2018 13:53
so whats the bug? @wheelhot
@Burinson it's definitely something you could put on the resume
Steve Warren
@interactivenyc
Jun 26 2018 14:05

Hi! I want to find a way to colorize a PNG image with CSS. I've Googled this for a whole day now, and have yet to find a reasonable solution. I find examples, using things like handling the ::after pseudo class using mix-blend-mode but they aren't working for me. Here's the best example I could find that sort of works, but I need the transparent background to actually be transparent...

https://codepen.io/steve-warren/pen/jKvZZr

Omar Tan
@wheelhot
Jun 26 2018 14:10
@moT01 If all checkbox is unchecked, the red line will appear, if a single box is checked, green line
if you open in Chrome and Safar
you'll see the issue
On Safari, it'll show green line even when all the checkbox is unchecked
Omar Tan
@wheelhot
Jun 26 2018 14:16
But if you open Safari Dev Tools, the green line will turn to red (all checkbox unchecked) if you click on the checkbox label/text
Tom
@moT01
Jun 26 2018 14:31
its the syntax of your switch statement @wheelhot must not be supported like that in safari
check the syntax there where it says case compared to yours
@interactivenyc you need to edit the image in an image editor and make the white transparent
or find an image with an already transparent background
there's icons and characters you can use for hamburger menus if that's what you want
Rob
@PGFracing
Jun 26 2018 15:54
how do you look at different browswer sizes with developer tools?
found it never mind, sorry
Omar Tan
@wheelhot
Jun 26 2018 16:06
@moT01 oh wow, thanks! Didn't realise I got the case format wrong, odd that StandardJS linting didn't flag that
and odd that it'll work if I turn on Safari Dev Tools but will not work once the Dev Tools window is closed
is this a bug? and if so, to whom do I report this to?
Barbara Pentoney
@flyfishingbarbara
Jun 26 2018 16:32
@PGFracing ....hi, im curious of the answer to your question..."how do you look at..??"
Barbara Pentoney
@flyfishingbarbara
Jun 26 2018 16:39
@NJM8 ...thnks
Steve Warren
@interactivenyc
Jun 26 2018 16:58
@moT01 Thanks for your comment. I have a black on transparent png, a white on transparent, and a black on white image I'm working with... I don't want a font solution - I want a design solution, where I can hire someone to make a custom PNG for the site, and target it with a color from our design scheme. It's important to be able to select the outline of the image and have it lay against a background color of any type, and select the foreground color of the PNG. I come from a Flash developer background and this sort of thing was super easy there. I'm not sure why I have to spend a whole day searching for this answer on how to do this with HTML. Maybe I sound like a whiny child, but things with Flash were so easy and in HTML there's even no simple library for colorizing PNG's that I can simply download... I don't want to reinvent the wheel again. This seems so basic!
Nate Mallison
@NJM8
Jun 26 2018 17:26
I'm not 100% sure how it works but maybe you can get it to work for your use
Lorrie Pearson
@Lorrie01
Jun 26 2018 17:29
Screen Shot 2018-06-26 at 1.26.27 PM.png
Screen Shot 2018-06-26 at 1.25.58 PM.png
Screen Shot 2018-06-26 at 1.26.14 PM.png
hensn5250
@hensn5250
Jun 26 2018 17:30
@interactivenyc I don't know how it would work with a png but I know that you can colorize and svg image via css . I've search for ways to change the color of icons that were png images in the past but could not find a way.
Lorrie Pearson
@Lorrie01
Jun 26 2018 17:30

Hope you're having a great day.
I need some help solving this Regular Expressions Challenge: https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end

The challenge and the issue are shown
Thanks

Stephen James
@sjames1958gm
Jun 26 2018 17:34
@Lorrie01 What have you tried?
Lorrie Pearson
@Lorrie01
Jun 26 2018 17:35
@sjames1958gm
Screen Shot 2018-06-26 at 1.26.27 PM.png
Stephen James
@sjames1958gm
Jun 26 2018 17:36
the first s doesn't have \ so it will be treated as an 's' not space - the g is inside the // so it will be treated as a 'g' not a flag
Lorrie Pearson
@Lorrie01
Jun 26 2018 17:37
@sjames1958gm I have tried to right this code several times. I have researched via Stackoverflow, and Regex in addition to the FCC forum
Thank you, @sjames1958gm I appreciate your advice. I will re-look at this a bit more.
hensn5250
@hensn5250
Jun 26 2018 17:38
@Lorrie01 check out regexr.com
Lorrie Pearson
@Lorrie01
Jun 26 2018 17:39
Thanks @hensn5250
Tom
@moT01
Jun 26 2018 17:57
@interactivenyc did you get it figured out?
Rob
@PGFracing
Jun 26 2018 18:30
www.pgfracing.com/secondcomingverses.html why on mobile is it only half the width of the screen?
Rob
@PGFracing
Jun 26 2018 18:45
@flyfishingbarbara missed your question could you please repeat?
Barbara Pentoney
@flyfishingbarbara
Jun 26 2018 18:58
@PGFracing i wanted the answer to your question about seeing diff sizing on diff browsers...
Rob
@PGFracing
Jun 26 2018 18:59
I corrected it with a css file
and media query, it was acting different then I suspected because I was also using viewport
Barbara Pentoney
@flyfishingbarbara
Jun 26 2018 18:59
@PGFracing i got the answer from someone else...no worries
include*engine
@newtothat
Jun 26 2018 19:08
why can't I cut its edge??
Moisés Man
@moigithub
Jun 26 2018 19:09
? what edge
Rob
@PGFracing
Jun 26 2018 19:09
the border is radius, the image isn't
Moisés Man
@moigithub
Jun 26 2018 19:10
overflow:hidden maybe ?
Rob
@PGFracing
Jun 26 2018 19:10
just make your image radius
include*engine
@newtothat
Jun 26 2018 19:10
i cut the corner or edge of wrapper which wraps everything but
Rob
@PGFracing
Jun 26 2018 19:11
img {
border-radius: whatever
}
include*engine
@newtothat
Jun 26 2018 19:11
.pic img {
width: 100%;
height: 100%;
border-radius: 40%;
}
i already have them
look at corners around the wrapper
Rob
@PGFracing
Jun 26 2018 19:12
ya i see that your image isn’t border-radius
include*engine
@newtothat
Jun 26 2018 19:12
background of light blue is outside of the wrapper
what do you mean?
Rob
@PGFracing
Jun 26 2018 19:13
try giving your pic a different class name
for the image one
.testing img {
width: 100%;
height: 100%;
border-radius: 40%;
}
.testing {
width: 100%;
height: 100%;
border-radius: 40%;
}
i meant
include*engine
@newtothat
Jun 26 2018 19:16
edge.png
Moisés Man
@moigithub
Jun 26 2018 19:16
add overflow:hidden to ur wrapper class
include*engine
@newtothat
Jun 26 2018 19:17
@moigithub thanks it worked
why i could not figure it out myself?
Moisés Man
@moigithub
Jun 26 2018 19:18
need more practice maybe :)
copycat some random websites (i need to start doing this too but im lazy)
include*engine
@newtothat
Jun 26 2018 19:19
@PGFracing thanks for your help too.actually i gave red border around picture to see and position it
@moigithub you mean rebuilding a website?
copying is not good if you dont actually learn from them
Moisés Man
@moigithub
Jun 26 2018 19:20
yep.. example.. go amazon.com (without seeing its source code) and try to implement the first page on ur own, u can use some random placeholder images
Bjorn van de Peut
@bjorno43
Jun 26 2018 19:21
"Expertly drawn screenshot" :joy:
include*engine
@newtothat
Jun 26 2018 19:21
lol i am still taking it and pc courses
so for now I can only use paint lol
Bjorn van de Peut
@bjorno43
Jun 26 2018 19:21
Hahaha :P
include*engine
@newtothat
Jun 26 2018 19:22
IT and pc courses beside coding**
markclynch
@markclynch
Jun 26 2018 22:53
What's the best way to control background color of a div in React?
Should it be a toggle boolean in state to render based on the value?
include*engine
@newtothat
Jun 26 2018 23:44
the way they teach as about responsiveness is by changing the way depending on device
but the way facebook it has at least its nav bar isit shrinks according to the size of browser?
how it works?
like what they teach us is depending on device it should change the view totally to something else
but facebook nav bar is cool it shrinks