These are chat archives for FreeCodeCamp/Help

9th
Jul 2018
anthonygallina1
@anthonygallina1
Jul 09 2018 00:43
:wave:
Kyle Holm
@thekholm80
Jul 09 2018 00:51
@anthonygallina1 :wave:
Henry
@GitHub-Henry
Jul 09 2018 02:45
Anyone understand why Webpack is throwing this React error msg?
Kyle Holm
@thekholm80
Jul 09 2018 02:46
looks like it can't find your font
Henry
@GitHub-Henry
Jul 09 2018 02:47
Given that the font and reference are in the same directory, I'm wondering why though
Guess I'll be examining each reference.
Claudio Restifo
@Marmiz
Jul 09 2018 02:54
:wave:
Kyle Holm
@thekholm80
Jul 09 2018 03:04
@Marmiz :wave:
Prakash Kumar
@ThePrakashKumar
Jul 09 2018 04:36
@cmccormack Thanks for your concern but now I figured it out by my self. Thanks! :smile:
Yoon Hee-Ku
@heegu0311
Jul 09 2018 05:22

Hello, campers. I'm trying make a survey form for the following challenge "Responsive Web Design Projects:Build a Survey Form".

HERE is my question. I gave an attribute width: 100% to input tag but the right-hand side line is not exactly matched. (For ref., I used grid survey form as below)

Screen Shot 2018-07-09 at 2.04.57 PM.png
Can somebody help solve this problem?
Relevant part of my code is..
#survey-form {
        background-color: bisque;
        width:  1000px;
        display: grid;
        margin: auto;
        grid-column: 2;
        grid-template-columns: 300px 700px;
        grid-auto-rows: 60px;
        grid-template-areas: "Q-name name";
        }
<div id="Q-name">
                <h3>Name</h3>
            </div>
            <div>
                <label id="name-label" for="name">
                    <input id="name" type="text" name="name" placeholder="Input your name" required>
                </label>
            </div>
#Q-name {
        position: relative;
        background-color: yellow;
        text-align: right;
    }
Claudio Restifo
@Marmiz
Jul 09 2018 05:49
@heegu0311 it's hard to say but looks like that is the border. Could it be?
If so this means that the element is 100% and correctly aligned, is just not accounting for the extra pixel of the border
Do you have a live example that we can inspect?
Yoon Hee-Ku
@heegu0311
Jul 09 2018 05:51
What is "live example"?
Whole code??
Claudio Restifo
@Marmiz
Jul 09 2018 05:53
a live working example (or extract) of your page. Either on a website / codepen.
where are you developing it?
anyway if you want to see if it's just the box model you can try adding this to you css:
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
Yoon Hee-Ku
@heegu0311
Jul 09 2018 05:58

I'm coding with VS code program.
Of course, I can share the code to you.

https://codepen.io/heegu0311/pen/QBLjNv

I converted my html local file to codepen.
Thanks! I'll try what you sent above.
Claudio Restifo
@Marmiz
Jul 09 2018 05:59
@heegu0311 yep it's a boxing model, my CSS fixed it :)
if you want to know more (and why it works) head over box-sizing documentation
Yoon Hee-Ku
@heegu0311
Jul 09 2018 06:01
@Marmiz Wow! It works. I need to study more to understand what they are though.. Thank you so much!
Claudio Restifo
@Marmiz
Jul 09 2018 06:01

@heegu0311 also for future reference:

where are you developing it?

the answer is codepen :)

Aravind Sekar
@noblebatman
Jul 09 2018 06:03
I have a doubt here, If i give "text-align: center; " for a class containing images, the images are also getting aligned with the text...why is the image considered as text?
Yoon Hee-Ku
@heegu0311
Jul 09 2018 06:03
WELL... Did you mean my previous answer was wrong?
Claudio Restifo
@Marmiz
Jul 09 2018 06:05

@heegu0311 my bad, I missed this:

I converted my html local file to codepen.

sorry :smile:
slow brain today :coffee:

Yoon Hee-Ku
@heegu0311
Jul 09 2018 06:06
@Marmiz Oh, I was a little confused! haha :)
@noblebatman Actually, I am new and I just started coding for only a few days!
What point are you exactly talking about? I wonder..
Claudio Restifo
@Marmiz
Jul 09 2018 06:06
@noblebatman well, the name is misleading but the text-align control the content of the element, not just the "text content"
Yoon Hee-Ku
@heegu0311
Jul 09 2018 06:36

Questioning again...
What's wrong with my radio buttons? Please help!
The story I cannot jump over is this in the following challenge "Responsive Web Design Projects:Build a Survey Form".

(User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.)

MY CODEPEN is below..
Aravind Sekar
@noblebatman
Jul 09 2018 06:41
thank you @Marmiz :) and one more doubt here... lets say I am adding images to my site, each image is of different size.. for example the third image in this, It is different in size, Is there any way to make all the images fit in a specific block irrespective of their original size.... And the menu contents here "Site header", "About" and "Contact" they are floating outside the navbar area... If i add an overflow they are getting added to the navbar area with a scroll bar... I saw somewhere about the clearfix, i am not able to understand what is really happening there...
https://codepen.io/NobleBatman/pen/xJKwqM
Aravind Sekar
@noblebatman
Jul 09 2018 06:47
@heegu0311 thanks for the response... even I am new to html and css... I am not able to understand a few things, will be clear on what i am trying to communicate, Thank you... and if u are interested, we can coordinate and learn things together, I started with freecodecamp, its really great to learn, but I feel like i get deviated in the middle searching for solutions, So yea if interested, we can collaborate...
Yoon Hee-Ku
@heegu0311
Jul 09 2018 06:56
@noblebatman Thanks for your proposal! But for now I am trying to finish and learn through FCC first..
By the way, may I ask what kind of project you are thinking?
Aravind Sekar
@noblebatman
Jul 09 2018 07:08
@heegu0311 not a project exactly, some sample projects with responsive pages... and even i am learning through FCC, but felt that if some two or three people collab, the progress in learning ll be much faster... but yea, will finish FCC first, there is a lot to learn... if u are interested, we can collab and learn in real time, that would help us to explore a lot of things and improve the way we communicate... btw, I have taken this as my full time work till august first week... so I ll be available online all time
I love collabs
Claudio Restifo
@Marmiz
Jul 09 2018 07:22
@noblebatman your question is not really clear to me :/
you want all the images to be "as big as their parent" (so if all have the same parent they'll be same size) kind of?
Aravind Sekar
@noblebatman
Jul 09 2018 07:36
yes yes exactly... here I have put images inside the class "thumbnails" , all the three images are of different sizes, on applying style to the class "thumbnails" only the first two images take up the same size, not the third image...
@Marmiz my doubt here is.. whether all the images under class "thumbnails" ll be scaled on applying styles to them or it depends on each image separately?
and the second doubt was about float and clearfix, I am looking for solutions... If i get that ll proceed, And its very kind of u ppl to solve doubts... Thank u @Marmiz .... ll keep looking for it meanwhile... :)
Claudio Restifo
@Marmiz
Jul 09 2018 08:31

@noblebatman that's not a good approach at all.

1- Clearfix was a popular workaround when layouts were build using floats.
Thank god nowadays all major browsers support more intelligent ways to build layout like grid or flexbox. Please do yourself a favour and learn and use either (or better learn both)

2 - For images the "trick" to make them responsive is to have them always as big as the div they are inside. So as the div gets bigger/smaller so will the images.
To do so you need a structure like:

<div main cotainer for all images>
<div container for image #1>img 1</div>
<div container for image #2>img2</div>
</div container>

And to make the image responsive make them have this CSS

.myimagesclass {
     max-width: 100%;
     height: auto;
}
Then you can manually change either the main container / image container to achieve the proportion you seek
Aravind Sekar
@noblebatman
Jul 09 2018 08:46
@Marmiz I get it... I am actually learning float for the interview purpose... I understand the importance... ll learn grid and flexbox...
Regarding the image scaling, ll do it as u said... Thank u so much for clarifying things... :)
Claudio Restifo
@Marmiz
Jul 09 2018 09:30

I am actually learning float for the interview purpose

is there still people that write HTML with float? surprising

BuntyBru
@BuntyBru
Jul 09 2018 09:39

started the FCC challenges agian,
Done with Applied visual design

Applied Accessibility is next

:)
Yoon Hee-Ku
@heegu0311
Jul 09 2018 09:52

I've been stuck with the same issue for a few hours.
Hope somebody's attention to this..

The problem is below user story in bold font from FCC challenge "Responsive Web Design Projects:Build a Survey Form".

User Story #13: Inside the form element, I can select a field from one or more groups of radio buttons. Each group should be grouped using the name attribute.

With regard to that story, I have attempted 2 different codes at the bottom.
As you notice, the difference is the existence of value attribute.

Why do we need value attribute inside input tag to get the story #13 passed?

(I don't believe the codepen test form provided by FCC can be 100% complete.
If it's because of the incomplete test form, I will go to the next mission. Please just tell me.)

ACCEPTABLE Code on the test form

            <div id="Q-menu">
                    <h3>Favorite Bread</h3>
            </div>
            <div>
                <ul>
                    <li><label>Toast<input type="radio" value="1" name="Coffee"></label></li>
                    <li><label>Baguette<input type="radio" value="2" name="Coffee"></label></li>
                </ul>
            </div>

UN-ACCEPTABLE Code on the test form

            <div id="Q-menu">
                <h3>Favorite drink</h3>
            </div>
            <div id="menu">
                <ul>
                    <li><label><input type="radio" name="Coffee">Americano</label></li>
                    <li><label><input type="radio" name="Coffee">Cafe Latte</label></li>
                </ul>
            </div>
Aravind Sekar
@noblebatman
Jul 09 2018 09:59
@Marmiz eventhough they dont use float... they ll just test whether a person knows it.. kind of backward compatibility for browsers...
Claudio Restifo
@Marmiz
Jul 09 2018 10:07
@heegu0311 how can the user agent knows which one you select if they don't have a value?
Yoon Hee-Ku
@heegu0311
Jul 09 2018 10:16
@Marmiz Oh, it is the purpose of value. I couldn't think about it in that way.
The radio buttons without value attribute are useless in most of cases... Am I right??
Claudio Restifo
@Marmiz
Jul 09 2018 10:21
value is what is passed once the form submits. You may have radios without value, but they will serve no real purpose since they won't collect any data / user input
Yoon Hee-Ku
@heegu0311
Jul 09 2018 10:30
@Marmiz Okay. I got what you said.
But just a small hope.. It would be better for someone got lost if the story gives more straight-forward story to use value attribute when he/she uses radio buttons. T.T
@Marmiz Anyway, Thanks again for your answers many times today. :)
Claudio Restifo
@Marmiz
Jul 09 2018 10:39
@heegu0311 you can check how FCC test it to see if this is in fact an inconsistency in the test suite, or is intended (ie they don't want to feed you the whole answer but you have to figure it out yourslef)
Yoon Hee-Ku
@heegu0311
Jul 09 2018 11:47

@Marmiz I see. For now, I'm going to move forward to next challenge, not trying to check with FCC people.
As you said, it was definitely good to try to figure what's the problem in my code.

If I get to know something like REAL inconsistency in the future, I'll try to contact FCC.

BuntyBru
@BuntyBru
Jul 09 2018 12:32
Starting with Responsive Web design principles
John
@taloloy18
Jul 09 2018 12:35
hi guys
Can you help me with this code?
Lars
@Logiar
Jul 09 2018 13:23
Could use some suggestions. I'm working on something that delivers some javascript code to various sites and the code makes some widgets. Now I'm working on adding a feature for push notifications, I can't write to files on the sites where the code is used so the serviceworker has to be hosted on my domain. Now the issue is how can I request notification permission since I can't use an iframe and I don't want to redirect users or open a new window if they've already blocked or allowed push notifications. I first thought maybe I can check the permission in an iframe and only open a window to request if it's not been set, but Notification.permission in the iframe is always denied. Anyone got a suggestion for a unobtrusive solution?
Lars
@Logiar
Jul 09 2018 13:40
@taloloy18 what exactly do you need help with?
Aravind Sekar
@noblebatman
Jul 09 2018 13:49
which is the best practice?? using semantic tags or div tag everywhere instead of semantic tags??
I could see popular sites running either way.... just wanted to make sure which the best practice...?
balakrishna222111
@balakrishna222111
Jul 09 2018 13:50
@diomed @sjames1958gm @matrixersp this is what i tried
image.png
Mohammed Boudad
@matrixersp
Jul 09 2018 13:58
They provided you with a link, copy it and paste it in src
Daniel Simeonov
@dbsimeonov
Jul 09 2018 14:23
Guys unusual question, is there a chance I can use Android tablet as second screen on my Mac? As I have couple of tablets that I never use and my mac is only 13' so it will be good if I can split my dev tools to the tablet ?
Stephen James
@sjames1958gm
Jul 09 2018 14:35
@balakrishna222111 the URL they provide in the instructions should be used in the source element
Nazar
@IsaakNazar
Jul 09 2018 14:51
@sjames1958gm :wave: hi Stephen!
Stephen James
@sjames1958gm
Jul 09 2018 14:52
@IsaakNazar :wave:
May Kittens Devour Your Soul
@diomed
Jul 09 2018 14:54
@sjames1958gm make me json app creator
Nazar
@IsaakNazar
Jul 09 2018 14:54
@diomed hey Kitty!
May Kittens Devour Your Soul
@diomed
Jul 09 2018 14:54
hi Google colors
Nazar
@IsaakNazar
Jul 09 2018 14:55
heh
guys, cant figure out how to make it a single reusable function
fetch('http://159.65.153.5/api/v1/departments/')
            .then(res => res.json())
            .then(json => json.results.map(result => (
                {
                    id: result.id,//id will be used when we make POST request
                    name: result.name
                }
            )))
            .then(department => this.setState({
                department
            }))
            .catch(err => console.log('FAILED: ',err));


            fetch('http://159.65.153.5/api/v1/positions/')
            .then(res => res.json())
            .then(json => json.results.map(result => (
                {
                    id: result.id,
                    name: result.name
                }
            )))
            .then(developer => this.setState({
                developer
            }))
            .catch(err => console.log('FAILED: ',err));
Nazar
@IsaakNazar
Jul 09 2018 15:00
I've tried smth like this. but doesn work
etchDataAPI(url, data){
    fetch(url)
        .then(res => res.json())
        .then(json => json.results.map(result => (
            {
                id: result.id,
                name: result.name
            }
        )))
        .then(data => this.setState({
            data
        }))
        .catch(err => console.log('FAILED: ',err));
}
maybe I should pass setState as an argument?
Stephen James
@sjames1958gm
Jul 09 2018 15:05
you have an issue with "this"?
Not sure how you can pass data to this function and have it as a parameter in your callback for third then
Nazar
@IsaakNazar
Jul 09 2018 15:08
@sjames1958gm I have 4 similar requests, so I want to make a single reusable functoin
Stephen James
@sjames1958gm
Jul 09 2018 15:08
Maybe make your component the second argument and call component.setState
Or you could even fetchDataAPI.bind(this)('http://159.65.153.5/api/v1/departments/') to get the correct this value
Nazar
@IsaakNazar
Jul 09 2018 15:12
@sjames1958gm hmm, good idea, thanx :thumbsup:
Smootimus
@Smootimus
Jul 09 2018 15:43
:wave:
Kyle Holm
@thekholm80
Jul 09 2018 15:51
@Smootimus :wave:
Smootimus
@Smootimus
Jul 09 2018 15:55
Ay hows it goin
Kyle Holm
@thekholm80
Jul 09 2018 15:56
trying to get some work done. how's your world?
Smootimus
@Smootimus
Jul 09 2018 15:57
It's cool, just hanging out. I got this week out from school before the next quarter starts
Kyle Holm
@thekholm80
Jul 09 2018 15:57
oh nice
Smootimus
@Smootimus
Jul 09 2018 15:57
Trying to get some books read before then
Kyle Holm
@thekholm80
Jul 09 2018 15:58
fiction, or educational books?
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:07
educational fiction
Earth is Flat
Kyle Holm
@thekholm80
Jul 09 2018 16:08
lol
Smootimus
@Smootimus
Jul 09 2018 16:19
Educational
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:19
@thekholm80 masochist says "Hurt me! Hurt me!"
Smootimus
@Smootimus
Jul 09 2018 16:19
O'reilly stufs
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:19
u know what the sadist says?
Kyle Holm
@thekholm80
Jul 09 2018 16:20
"Okay"
@Smootimus that doesn't sound fun
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:20
he says : NO
Kyle Holm
@thekholm80
Jul 09 2018 16:20
lol
okay, you got me
Smootimus
@Smootimus
Jul 09 2018 16:20
It can be, it's not bad really
My next three core classes are HTML & Javascript, Intermediate Programming with C++, and Windows Networking Essentials
Ene Catalin
@EneCatalin
Jul 09 2018 16:23
Cat needs to try C++
that's a lot of fun
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:23
no thanks
@Smootimus that

books
Ene Catalin
@EneCatalin
Jul 09 2018 16:24
it's really fun cat
Smootimus
@Smootimus
Jul 09 2018 16:24
Yeah lol
Ene Catalin
@EneCatalin
Jul 09 2018 16:24
tots not the most convoluted language out there
Kyle Holm
@thekholm80
Jul 09 2018 16:24
i'd like to give c++ a shot
Smootimus
@Smootimus
Jul 09 2018 16:24
It's not bad
Kyle Holm
@thekholm80
Jul 09 2018 16:24
i think i'd like it better than java or c#
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:24
ostrich, stop believing I'm so gullible I'm gonna fall for your tricks
Ene Catalin
@EneCatalin
Jul 09 2018 16:24
take that back
java is nicer
Smootimus
@Smootimus
Jul 09 2018 16:25
A lot of people have negative things to say about it, but I dunno how much they've actually worked in it
Kyle Holm
@thekholm80
Jul 09 2018 16:25
java is oracle, oracle is cancer
Ene Catalin
@EneCatalin
Jul 09 2018 16:25
true
oracle is cancer
like holy f that company needs to die
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:25
isn't oracle some kind of bird
Ene Catalin
@EneCatalin
Jul 09 2018 16:26
it's a huge company which lives by suing others into the ground
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:26
isn't Oracle place of prophet of doom
Ene Catalin
@EneCatalin
Jul 09 2018 16:26
is he really doomy ?
Kyle Holm
@thekholm80
Jul 09 2018 16:26
they sued someone for naming their iOS app 'javascript editor' because it had 'java' in the name
Ene Catalin
@EneCatalin
Jul 09 2018 16:26
that def sounds like something they'd do
Smootimus
@Smootimus
Jul 09 2018 16:27
Yeah that's just insane
Ene Catalin
@EneCatalin
Jul 09 2018 16:27
let's not forget about them suing google over something android related
like they used a "concept" oracle had apparently coined
or some shit
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:27
so what they gonna just cash in on name java now? lol
Ene Catalin
@EneCatalin
Jul 09 2018 16:27
Oracle as a company is actually evil
like evil evil
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:27
damn, I wish I had their royalties
Ene Catalin
@EneCatalin
Jul 09 2018 16:27
I just want their lawyers
they generate money by breathing
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:28
Devil's advocates
Kyle Holm
@thekholm80
Jul 09 2018 16:28
makes me want to watch Suits again
Smootimus
@Smootimus
Jul 09 2018 16:28
THat show <3
Ene Catalin
@EneCatalin
Jul 09 2018 16:28
anyway java itself is ok as a language, despite this
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:28
do they defend guilty people?
Smootimus
@Smootimus
Jul 09 2018 16:28
I watched it recently
It's amazing
Kyle Holm
@thekholm80
Jul 09 2018 16:29
i loved it
Smootimus
@Smootimus
Jul 09 2018 16:29
Me too
I stumbled onto it too
Kyle Holm
@thekholm80
Jul 09 2018 16:29
i think i watched all 7 seasons in about 2 weeks lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:29
so... do they? do they?
Smootimus
@Smootimus
Jul 09 2018 16:29
lol Me too!
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:29
do they defend guilty people?
Ene Catalin
@EneCatalin
Jul 09 2018 16:29
binge watching is best watching
Kyle Holm
@thekholm80
Jul 09 2018 16:29
yes @diomed
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:29
agreed
Ene Catalin
@EneCatalin
Jul 09 2018 16:29
if they're proven innocent they're not guilty though
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:29
ah, so it's something like The Practice
that sometimes got really really dark
Kyle Holm
@thekholm80
Jul 09 2018 16:30
it's interesting, the way they try to do what's right and also what's best for their clients
sometimes falling short on both
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:31
are those 2 guys in suits, and a baldie?
Kyle Holm
@thekholm80
Jul 09 2018 16:31
i think everyone on the show is in suits
some of the women wear pantsuits lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:31
I think current princess was in Suits
if I'm not mistaken
Kyle Holm
@thekholm80
Jul 09 2018 16:31
yeah, she shows a lot of skin
Ene Catalin
@EneCatalin
Jul 09 2018 16:32
hopefully won't catch a cold :(
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:32
I just love Croatian sport's commentators
Ene Catalin
@EneCatalin
Jul 09 2018 16:32
why ?
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:33
Stuff like : his girlfriend, who's an actress now must be really proud of him, brightens my day
Kyle Holm
@thekholm80
Jul 09 2018 16:33
is Croatia still in the world cup?
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:33
yup
Kyle Holm
@thekholm80
Jul 09 2018 16:33
awesome
did they beat Russia?
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:33
yup
Kyle Holm
@thekholm80
Jul 09 2018 16:33
so now we know croatians > steroid-filled russians
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:33
then Putin invited them for some tea and now they're weakened
Kyle Holm
@thekholm80
Jul 09 2018 16:33
lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:33
unsure why he didnt invite them before
Aravind Sekar
@noblebatman
Jul 09 2018 16:34
hey anyone... this datetime html attribute... is it used only to specify the date or time or duration manually...? Or it can also be taking up some dynamic value and keep changing??
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:34
our president, who's there, wasting poor people's money, is proclaimed MILF
if it's datetime, pretty sure it specifies both
coz why the name then?
Kyle Holm
@thekholm80
Jul 09 2018 16:35
@noblebatman i'm not sure which html attribute you mean
Aravind Sekar
@noblebatman
Jul 09 2018 16:36
the datetime attribute of time element @thekholm80
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:36
between those tags can be some dynamic value , that's of js aka devil's language, that keeps changing
but by itself , html is not dynamic
it's just bunch of tags that screw up your life... once they pile up
unless u smart
Aravind Sekar
@noblebatman
Jul 09 2018 16:37
haaa haaa @diomed thank u so much... Thank u @thekholm80 ... 😂😆
Kyle Holm
@thekholm80
Jul 09 2018 16:37
@noblebatman according to mdn datetime will turn a datetime string into something more human-readable
if you want it to update dynamically you'll need some javascript (or php if you hate yourself)
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:38
lol, it just makes stuff bold.
oh, no wait. not even that
that's css
Aravind Sekar
@noblebatman
Jul 09 2018 16:39
oh... so this is like giving a value to the server, either dynamically or manually... thats the purpose of it ryt!? 🤔
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:40
u give it date, and it turns it into July 9th
silly tag
Aravind Sekar
@noblebatman
Jul 09 2018 16:40
just like how the way we use "Value" attribute for radiobuttons in the Input tags ryt @thekholm80 ?
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:40
not even a year
Aravind Sekar
@noblebatman
Jul 09 2018 16:40
oh hmmm
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:41
pretty useless, if u ask me
Kyle Holm
@thekholm80
Jul 09 2018 16:42
@noblebatman kind of
Aravind Sekar
@noblebatman
Jul 09 2018 16:42
hmmm cool... since I am just beginning with this and way far away from the devil's language... I am getting these doubts....
Kyle Holm
@thekholm80
Jul 09 2018 16:43
reading further, it seems this allows you to use machine-useful date/time strings, but present something usable to the users
Aravind Sekar
@noblebatman
Jul 09 2018 16:43
@thekholm80 hmmmm... I get it... Thank u so much dude
Kyle Holm
@thekholm80
Jul 09 2018 16:43
like <time datetime='2001-05-15T19:00'>May 15</time> would let me use the datetime attribute when interacting with my back end, but display May 15 to my users
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:43
actually I take that back
knowing Americans who complicated everything, this helps not to think that it's 4th of July on April 7th.
Kyle Holm
@thekholm80
Jul 09 2018 16:45
judging from my neighbor's fireworks, they all think july 4th runs from may to september
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:46
judging from my neighbor's fireworks, they think we're Americans
they keep the stash for when Croatia wins
did not know u live next to rednecks @thekholm80
Kyle Holm
@thekholm80
Jul 09 2018 16:47
unfortunately, it's not just the rednecks here
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:48
oh noes? it's hilbillies as well?
Kyle Holm
@thekholm80
Jul 09 2018 16:48
1/2 my state belongs to a religion that doesn't allow anything fun, so they latch onto the few things they're allowed. like fireworks
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:48
I like fireworks
Kyle Holm
@thekholm80
Jul 09 2018 16:49
i like sleeping lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 16:49
well most of us like sleeping :cat:
my name in Indian means : touches what works and makes it don't work
Lee Arnold
@nsanity1
Jul 09 2018 16:57
I'm guessing Utah @thekholm80
Kyle Holm
@thekholm80
Jul 09 2018 16:58
@nsanity1 why do you say that?
Stephen James
@sjames1958gm
Jul 09 2018 17:07
Idaho would be another guess - I think the assumption is Mormon
Kyle Holm
@thekholm80
Jul 09 2018 17:08
he's not wrong, i was just curious what led to that guess
generally, Utah's situation isn't widely known. at least in my experience
Stephen James
@sjames1958gm
Jul 09 2018 17:09
religion that doesn't allow anything fun if you include no coffee :)
Kyle Holm
@thekholm80
Jul 09 2018 17:10
can you imagine life without coffee? not worth living
Stephen James
@sjames1958gm
Jul 09 2018 17:13
@thekholm80 I cannot - I am house sitting for some friends that have a built in espresso maker :coffee: :coffee: :coffee: :coffee:
Kyle Holm
@thekholm80
Jul 09 2018 17:13
oh lucky
i just discovered dirty chai - who'd have thought adding tea to espresso would be so awesome?
Kaz Baig
@kbaig
Jul 09 2018 17:14
That sounds blasphemous
Kyle Holm
@thekholm80
Jul 09 2018 17:14
it's soooo good.
Mehdi Amlal
@mehdiamlal
Jul 09 2018 18:01
Hey guys! Is it better to create React components using classes or components?
Christopher McCormack
@cmccormack
Jul 09 2018 18:02
@mehdiamlal normally the class extends the React.Component, but you should only need the class when using state and/or lifecycle methods
Mehdi Amlal
@mehdiamlal
Jul 09 2018 18:03
Because I've seen many people using functions instead of classes
Christopher McCormack
@cmccormack
Jul 09 2018 18:06
@mehdiamlal functions are great to use if you don't need state. I believe they are also a bit faster to render than classes as well, so if you can break your components into classes where state is needed and functional components where it isn't, that should be ideal
It's not one OR the other is what I mean, use them each where necessary
Kyle Holm
@thekholm80
Jul 09 2018 18:14
in my own experience, i've found i use many, many more function components than class components
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:15
@thekholm80 ever tried Gatsby?
Kyle Holm
@thekholm80
Jul 09 2018 18:16
i haven't. i tried once to figure out why it was so popular, but i couldn't even manage that. i really don't know what problem it solves
Christopher McCormack
@cmccormack
Jul 09 2018 18:19
@thekholm80 I used React Context API in my last project and it made it so I really didn't need classes at all other than for lifecycle methods, it was great
Kaz Baig
@kbaig
Jul 09 2018 18:20
@diomed @thekholm80 I did the tutorial and really enjoyed it. Might try doing my portfolio in it soon
BuntyBru
@BuntyBru
Jul 09 2018 18:21
@thekholm80 @sjames1958gm
whenever i open the chatroom i find both of you always there
Since last 2 years i guess
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:24
this is their life now
Christopher McCormack
@cmccormack
Jul 09 2018 18:25
haha
Kyle Holm
@thekholm80
Jul 09 2018 18:25
@cmccormack the context api is awesome. i don't automatically add redux to every project now
Christopher McCormack
@cmccormack
Jul 09 2018 18:26
It feels kind of weird, like you just created a component for state, almost like cheating, but hey it works
Kaz Baig
@kbaig
Jul 09 2018 18:26
@thekholm80 I need to learn the context api. Is it just to bypass intermediary children when passing a parent's state down the tree?
Kyle Holm
@thekholm80
Jul 09 2018 18:27
@kbaig it creates (one or more) global state stores each component can subscribe to
then, yeah, you don't have to pass everything as props
Kaz Baig
@kbaig
Jul 09 2018 18:28
@thekholm80 can you for example subscribe to a parent but also have props received from a level in between?
Like if you assign a context to a child component, is that the only state it can have?
Kyle Holm
@thekholm80
Jul 09 2018 18:28
nope
you can mix and match
Kaz Baig
@kbaig
Jul 09 2018 18:29
Ah okay because that's what the term context kind of implied in my head
That you could only have the state from the parent you've subscribed to
Kyle Holm
@thekholm80
Jul 09 2018 18:29
i think i made a codesandbox to try it out, lemme see if i can find it
here you go ... the MyProvider is a HOC you wrap your project in, so any child (which is everything) will have access to that data
err, i guess MyContext is an HOC, MyProvider is a wrapper
words are hard
BuntyBru
@BuntyBru
Jul 09 2018 18:32
@diomed haha
Christopher McCormack
@cmccormack
Jul 09 2018 18:34
@kbaig I made this example using Context if you're interested
Kyle Holm
@thekholm80
Jul 09 2018 18:35
that's a lot of pink
Christopher McCormack
@cmccormack
Jul 09 2018 18:36
@thekholm80 yeah it is :)
red is too red
pink is the new red
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:36
If oxygen was healthy, you could put it in a syringe and inject it. Try it, you'll die.
Kyle Holm
@thekholm80
Jul 09 2018 18:36
@diomed you must be reading some anti-anti-vaxer stuff lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:37
u googled that real fast
Kyle Holm
@thekholm80
Jul 09 2018 18:37
nah, i spend a lot of time on reddit lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:39
am on r/facepalm right now
Kyle Holm
@thekholm80
Jul 09 2018 18:39
people never cease to amaze me
Kaz Baig
@kbaig
Jul 09 2018 18:42
@thekholm80 @diomed if I remember correctly, the response was asking you to inject water or something
Kyle Holm
@thekholm80
Jul 09 2018 18:43
i've seen a lot of variations
Kaz Baig
@kbaig
Jul 09 2018 18:44
@cmccormack @thekholm80 thanks for sharing the demos :smile:
Kyle Holm
@thekholm80
Jul 09 2018 18:44
you bet
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:44
funny how injecting air can kill you
Kyle Holm
@thekholm80
Jul 09 2018 18:45
i wish redux was that simple to use
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:45
why dont more people do this?
Christopher McCormack
@cmccormack
Jul 09 2018 18:46
@thekholm80 redux always felt like too much work for simple state management, I wish it wasn't so coupled with React in the user headspace
Kyle Holm
@thekholm80
Jul 09 2018 18:46
yeah
but i imagine there's a tipping point where management gets too complex for context api and redux starts looking good
not to mention thunk, saga, etc
Christopher McCormack
@cmccormack
Jul 09 2018 18:48
@thekholm80 agreed but you shouldn't give new users a precision tool when a hammer will suffice
Kyle Holm
@thekholm80
Jul 09 2018 18:49
trying to learn redux almost broke me. the learning curve was insane
Christopher McCormack
@cmccormack
Jul 09 2018 18:49
I think Context is a good balance - even though it requires understanding render props, it's not too bad
Render props are good to know anyway when jumping into React Router
@thekholm80 You got it down now though?
Kyle Holm
@thekholm80
Jul 09 2018 18:50
i don't think i learned render props until working through the react katas on codewars
I think so, it's been months since i used redux but i was very confident with it before then
Christopher McCormack
@cmccormack
Jul 09 2018 18:51
I ended up needing them a lot when using React Router, as a simple component prop wasn't enough
Kyle Holm
@thekholm80
Jul 09 2018 18:52
i moved away from react router. most everything i build now is single page with conditional rendering
i'm a simple man with simple ideas lol
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:52
I'd read it
Christopher McCormack
@cmccormack
Jul 09 2018 18:53
ohh a bespoke meme just for @thekholm80 !
Kyle Holm
@thekholm80
Jul 09 2018 18:53
lol
Because it's not a meme unless you reuse it :wink:
Christopher McCormack
@cmccormack
Jul 09 2018 18:58
haha nice
It will be a culturally significant piece if we keep sharing it, I just know it!
May Kittens Devour Your Soul
@diomed
Jul 09 2018 18:58
I like it. It even has Loki pics
Kyle Holm
@thekholm80
Jul 09 2018 19:30
what have you tried?
balakrishna222111
@balakrishna222111
Jul 09 2018 19:30
image.png
Kyle Holm
@thekholm80
Jul 09 2018 19:31
vw and vmin aren't css properties, you need width:
balakrishna222111
@balakrishna222111
Jul 09 2018 19:32
image.png
Kaz Baig
@kbaig
Jul 09 2018 19:33
@thekholm80 vmin is, according to the lesson
balakrishna222111
@balakrishna222111
Jul 09 2018 19:33
Solved @thekholm80 thank
Kaz Baig
@kbaig
Jul 09 2018 19:33
@balakrishna222111
  h2 {
      width: 80vw;
  }

  p {
      width: 75vmin;
  }
Kyle Holm
@thekholm80
Jul 09 2018 19:33
@kbaig right, width is the property, vmin is a unit of measure
Kaz Baig
@kbaig
Jul 09 2018 19:34
@thekholm80 wait I'm misreading the tutorial - I was doubting myself lol
Kyle Holm
@thekholm80
Jul 09 2018 19:34
your code is right
Kaz Baig
@kbaig
Jul 09 2018 19:34
I was like ...how have I never come across this before
balakrishna222111
@balakrishna222111
Jul 09 2018 19:36
every css properties is in between style tag?
Kyle Holm
@thekholm80
Jul 09 2018 19:37
i'm not sure what you're asking
<style>
  selector {
    property: value;
  }
</style>
balakrishna222111
@balakrishna222111
Jul 09 2018 19:39
every css properties and css selectors is in between style tag?
Kyle Holm
@thekholm80
Jul 09 2018 19:40
that's the usual way of doing it. some folks use inline styling, but i believe it's not considered best practice
Christopher McCormack
@cmccormack
Jul 09 2018 19:44
That and you can't do everything in inline, like nth-* or whatever
balakrishna222111
@balakrishna222111
Jul 09 2018 19:47
Ok guys meet u soon thanks for help
Earl Herdeybayor
@Herdeybayor02_twitter
Jul 09 2018 20:53
I have this problem, am a new programmer can someone help? The main element should have two paragraph elements as children.
Mehdi Amlal
@mehdiamlal
Jul 09 2018 20:54
What is the key prop in React?
Kyle Holm
@thekholm80
Jul 09 2018 20:54
<main><!-- this is the main element -->
  <p>This is a paragraph</p>
  <p>This is a second paragraph</p>
</main>
@mehdiamlal it's a prop key={ value of key }
just like any other prop, but it has to be unique
also, react will yell at you if you use the index from an array for the key value lol
Earl Herdeybayor
@Herdeybayor02_twitter
Jul 09 2018 20:55
@thekholm80 will try it again now and give u a feed back. thanks btw
Mehdi Amlal
@mehdiamlal
Jul 09 2018 20:56
And what should it be included?
Earl Herdeybayor
@Herdeybayor02_twitter
Jul 09 2018 20:59
I still don't get it
Kyle Holm
@thekholm80
Jul 09 2018 21:00
what part don't you get?
Earl Herdeybayor
@Herdeybayor02_twitter
Jul 09 2018 21:00
<p>Purr jump eat the grass rip the coiuch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p></main>
Kyle Holm
@thekholm80
Jul 09 2018 21:00
show all your code
Mehdi Amlal
@mehdiamlal
Jul 09 2018 21:00
So, basically keys are the way React keeps track of what item in the array was added/updated/removed so that it modifies only that item in the real DOM?
Kyle Holm
@thekholm80
Jul 09 2018 21:00
@mehdiamlal i believe so
Mehdi Amlal
@mehdiamlal
Jul 09 2018 21:06
And what might be a good key to use?
Kyle Holm
@thekholm80
Jul 09 2018 21:07
hard to say, really. lemme look through what i've done in the past
Mehdi Amlal
@mehdiamlal
Jul 09 2018 21:07
The documentation suggests to avoid array indexes and to use stringss
Kaz Baig
@kbaig
Jul 09 2018 21:07
@mehdiamlal the recommendation is usually something unique besides index arrays
Kyle Holm
@thekholm80
Jul 09 2018 21:08
looks like in my last project i used the id from my database
in mongodb it's _id
Kaz Baig
@kbaig
Jul 09 2018 21:08
So for example, in the polling app project, I would use the db id of each poll
Ahmed Tarek
@ahmedtarek2134
Jul 09 2018 23:39
basically what I did once i had four colors to render each one in a div so basically i had the key of each div the color hex code string not the id of the color, i believe the react documentation says this as that a key should be unique to each element and if you have multiple lists then they will have same key values because they would be two different arrays. to cut it short, set the key of the element to a string if possible to be more unique :)