These are chat archives for FreeCodeCamp/Help

4th
Jul 2018
Henry
@GitHub-Henry
Jul 04 2018 00:23
I'm reading React documentation about event handling. Has anyone gotten this example to work. If so, could you explain what needs to be done to get it to work. I can get event handling to work with the Bind method, but getting it to work with arrow functions, so far, eludes me.
Kyle Holm
@thekholm80
Jul 04 2018 00:35
the example is in the Button file
the key thing to remember is this is bound automatically using an arrow function, so you don't have to manually bind in the constructor
that being said, i'm an old dog so i still manually bind
yuan843265197
@yuan843265197
Jul 04 2018 01:10
大家好
Henry
@GitHub-Henry
Jul 04 2018 03:24
@thekholm80 thank you. when I do the same in my environment I still get the error. I think I'm missing a package that needs to be added to my build.
Kyle Holm
@thekholm80
Jul 04 2018 03:24
it should be native, as i understand it
i think it came about with this
Henry
@GitHub-Henry
Jul 04 2018 03:26
@thekholm80 I get a syntax error on my = with the msg 'unexpected token' that's why I think I need to add an babel arrow package.
handleClick = () => { // stuff goes here}
Kyle Holm
@thekholm80
Jul 04 2018 03:29

also:

An arrow function does not have its own this; the this value of the enclosing execution context is used.

the only reason to bind the function is to get access to this
Claudio Restifo
@Marmiz
Jul 04 2018 03:41
@GitHub-Henry you have transform-class-property enabled in your babel?
Henry
@GitHub-Henry
Jul 04 2018 03:41
@thekholm80 thanks again. i when i read in the react comment that the arrow function was experimental, i wasn't sure if it could be done. your example shows it can. and since i'm getting a syntax error it most likely means i need a bable or eslint package.
@Marmiz checking
@Marmiz it is not there
i'll try adding
Claudio Restifo
@Marmiz
Jul 04 2018 03:45
anyway that's just to add backwards compatibility, that error is your linter, which is not set up properly (or bugged, that happens often as well)
Henry
@GitHub-Henry
Jul 04 2018 03:51
@Marmiz I added the package and copy and pasted the plugins portion to my .babelrc file, now getting missing class properties transform
at least it's more descriptive than syntax error
Claudio Restifo
@Marmiz
Jul 04 2018 03:52
wait, your JS is not compiling, or you have linter errors in your editor?
(compile is not the correct term, but you know what I mean)
Henry
@GitHub-Henry
Jul 04 2018 04:04
@Marmiz I cut and paste kyle's code which works in the sandbox, but doesn't compile in my editor. i'm thinking something is wrong with my babel or eslint config
also if i bind instead of arrow function it works
i'm just trying to get arrow functions to work
but i wasn't sure what the problem was until i started looking into it
that's my current theory
Claudio Restifo
@Marmiz
Jul 04 2018 04:09
but, it's a linter error (ie squiggles in your app, but the app stil is created, served, and works) or your app doesn't even start and crash with an error?
@GitHub-Henry
in my terminal
I'm using hot module replacement, so it tries to compile when I save
Henry
@GitHub-Henry
Jul 04 2018 04:19
looking at the error msg, looks like it's from babel
Claudio Restifo
@Marmiz
Jul 04 2018 04:22

Now it's quite tricky cos there's no a unique answer @GitHub-Henry.
A lot depends on your configuration.

So you need to look at your .babelrc and be sure it's picking the correct one,
The order of the presets (which is important)
How webpack is bundling the file

That's why is convenient to start prototyping from a boilerplate (like the official CRA), to avoid wasting time on all this stuff! :)

Kyle Holm
@thekholm80
Jul 04 2018 04:27
+1 for CRA
i thought i'd be all special and learn to do all the config myself - but when it takes 5 hours of reading docs every time i start a new project, at some point it just wasn't worth it anymore
life's too short to mess with webpack
Henry
@GitHub-Henry
Jul 04 2018 04:29
@Marmiz your suggestions sound similar to this. CRA is looking like a good alternative.
@Marmiz @thekholm80 thanks for the help
Kyle Holm
@thekholm80
Jul 04 2018 04:31
:+1:
Nazar
@IsaakNazar
Jul 04 2018 04:33
hey guys, TypeError: Cannot read property 'slice' of null wtf, user length = 3
const userSession = sessionStorage.getItem("user");

const user = JSON.parse(userSession);
const copyUser = user.slice();

console.log(copyUser);
Kyle Holm
@thekholm80
Jul 04 2018 04:33
console.log(user);
Nazar
@IsaakNazar
Jul 04 2018 04:34
@thekholm80 there are 3 elements inside user
Claudio Restifo
@Marmiz
Jul 04 2018 04:35
@GitHub-Henry somewhere in babel they specifically said that preset order is important, learned myself the hard way :)
Kyle Holm
@thekholm80
Jul 04 2018 04:36
@IsaakNazar console.log(typeof user);
Nazar
@IsaakNazar
Jul 04 2018 04:38
@thekholm80 thanx, :)
Kyle Holm
@thekholm80
Jul 04 2018 04:39
so you figured it out? or are you giving up on me lol
Nazar
@IsaakNazar
Jul 04 2018 04:42
@thekholm80 typeof showed object, I did Array.from(user) and log it, TypeError: Cannot convert undefined or null to object
Kyle Holm
@thekholm80
Jul 04 2018 04:42
and typeof userSession is String?
Nazar
@IsaakNazar
Jul 04 2018 04:42
also tried Object.values()
Aditya
@ezioda004
Jul 04 2018 04:43
typeof null //object?
Would explain this TypeError: Cannot convert undefined or null to object
Kyle Holm
@thekholm80
Jul 04 2018 04:43
but, null.length wouldn't be 3
it would be a TypeError
Aditya
@ezioda004
Jul 04 2018 04:46
@thekholm80 Ow yeah.
@IsaakNazar What does console.log(user); returns?
Nazar
@IsaakNazar
Jul 04 2018 04:47
Screenshot from 2018-07-04 10-46-01.png
@ezioda004 @thekholm80 log user returns
Aditya
@ezioda004
Jul 04 2018 04:48
Thats weird, it should work then.
Nazar
@IsaakNazar
Jul 04 2018 04:49
I was trying to get photo , name from google account, when user signs in, if I type user[0] it gives me typeerror
Kyle Holm
@thekholm80
Jul 04 2018 04:49
when you set your session storage, you should use an object, like:
const storageItem = {
  name: 'thekholm80',
  email: '123@abc.com',
  otherthing: 'www.google.com'
};
const itemStr = JSON.stringify(storageItem);
// then set this in session storage
JSON.parse() turns a string into an object
Nazar
@IsaakNazar
Jul 04 2018 04:50
@thekholm80 ok, letme try
Kyle Holm
@thekholm80
Jul 04 2018 04:50
i don't see how you're getting an array
Nazar
@IsaakNazar
Jul 04 2018 04:51
@thekholm80
signIn = (googleUser) => {
                const userData = googleUser.getBasicProfile();
                const prof = [userData.ig, userData.U3, userData.Paa];
        let tempStorage =  window.sessionStorage;
        tempStorage.setItem("user", JSON.stringify(prof));
        this.setState({
            session: userData
                })
                console.log(userData)
                console.log(tempStorage.user);

    }
and from another component I'm retrieving values from sessionStorage
Aditya
@ezioda004
Jul 04 2018 04:52
It should still work, with array too.
JSON.parse(JSON.stringify([1, 2, 3])).slice(1); //[2, 3]
Kyle Holm
@thekholm80
Jul 04 2018 04:52
well, i give up then
Aditya
@ezioda004
Jul 04 2018 04:53
Lol
Nazar
@IsaakNazar
Jul 04 2018 04:53
@thekholm80 pls dont :(
Aditya
@ezioda004
Jul 04 2018 04:53
Dual nature of array? Perhaps its a new discovery!
Kyle Holm
@thekholm80
Jul 04 2018 04:58
i've resorted to StackOverflow
wish me luck
Aditya
@ezioda004
Jul 04 2018 04:59
@IsaakNazar Do you have codepen or something of that snippet?
Claudio Restifo
@Marmiz
Jul 04 2018 04:59
@IsaakNazar you sure you are not doing anything async?
Kyle Holm
@thekholm80
Jul 04 2018 04:59
that's probably it
it reads session storage async
Aditya
@ezioda004
Jul 04 2018 04:59
Maybe .setState()is playing a role in it.
Nazar
@IsaakNazar
Jul 04 2018 05:00
@ezioda004 sorry, no. the snippet wont work in codepen
signIn = (googleUser) => {
                const userData = googleUser.getBasicProfile();
                //const prof = [userData.ig, userData.U3, userData.Paa];
                const prof = {
                    name: userData.ig,
                    photo: userData.Paa
                }
        let tempStorage =  window.sessionStorage;
        tempStorage.setItem("user", JSON.stringify(prof));
        this.setState({
            session: userData
                })
                console.log(userData)
                console.log(tempStorage.user);

    }
const userSession = sessionStorage.getItem("user");

const user = JSON.parse(JSON.stringify(userSession));

const username = user.name
console.log(username);
still typeerror
Claudio Restifo
@Marmiz
Jul 04 2018 05:01

like this:

const userData = googleUser.getBasicProfile();

is suspiciously async @IsaakNazar

Kyle Holm
@thekholm80
Jul 04 2018 05:01
so
async function getStorage() {
  const userSession = await sessionStorage.getItem("user");

  const user = JSON.parse(userSession);
  const copyUser = user.slice();

  console.log(copyUser);
}
Aditya
@ezioda004
Jul 04 2018 05:03
Is it async? I cant find anywhere in the docs.
Kyle Holm
@thekholm80
Jul 04 2018 05:04
i don't see it on mdn
Claudio Restifo
@Marmiz
Jul 04 2018 05:04
I think getProfile is async
the storage is not :)
Kyle Holm
@thekholm80
Jul 04 2018 05:04
the data is in session storage though
the problem is that he can't do anything with the array he's storing there
Henry
@GitHub-Henry
Jul 04 2018 05:24
@thekholm80 @Marmiz problem solved. I needed to add babel stage-0. Never heard of it until I read this SO article. Folks kept saying worked fine when they used three presets. I noticed I had two of the three.
I installed stage-0, then updated webpack and babel config files, compiled and ran just fine.
Nazar
@IsaakNazar
Jul 04 2018 05:33
@thekholm80 the problem was, session storage saves datas only after user signs in, thats why console was giving me an error
of null
陈致幸
@RZy5eHbFjOxTOic_twitter
Jul 04 2018 06:21
Does anyone know how to change the style of waypoints?
image.png
陈致幸
@RZy5eHbFjOxTOic_twitter
Jul 04 2018 06:32
I want to change the waypoints and routes of the Mission Planner, but I can't find a block of code that can change these.
Henry
@GitHub-Henry
Jul 04 2018 06:57

How to add Arrow Functions to React

I setup React and it was working OK. Then I tried to use an Arrow function
The only error message was simply syntax error. It was suggested I add
plugin: transform class properties

After installing Babel plugin, transform class properties, the error msg changed to missing class properties transform

That article suggested adding preset: stage-0.

So, after installing
plugin: transform class properties and preset: stage-0 and
after restarting VS Code, I could use Arrow Functions.

Hope this helps other React newbies.

Henry
@GitHub-Henry
Jul 04 2018 07:03
Happy Independence day to USA folks.
陈致幸
@RZy5eHbFjOxTOic_twitter
Jul 04 2018 07:08
ehhhh...
陈致幸
@RZy5eHbFjOxTOic_twitter
Jul 04 2018 07:59
啊?
我也不是很懂~
May Kittens Devour Your Soul
@diomed
Jul 04 2018 08:12
@RZy5eHbFjOxTOic_twitter https://gitter.im/FreeCodeCamp/chinese
fightinpeace
@fightinpeace
Jul 04 2018 08:12
racist
jk
jk
May Kittens Devour Your Soul
@diomed
Jul 04 2018 08:13
:house_with_garden: home
HERO
@Fengfujun
Jul 04 2018 08:14
blob
May Kittens Devour Your Soul
@diomed
Jul 04 2018 08:19
<h2 clas="red-text" img> :no_entry:
:no_good:
niechen
@niechenN
Jul 04 2018 08:22
could you update to pro?
May Kittens Devour Your Soul
@diomed
Jul 04 2018 08:25
what?
Aditya
@ezioda004
Jul 04 2018 08:30
could you update to pro?
May Kittens Devour Your Soul
@diomed
Jul 04 2018 08:34
doubt it. am not there yet. doubt that update will ever come out
Yoon Hee-Ku
@heegu0311
Jul 04 2018 09:04

Hi, campers.
I'd like to get some help from someone here. Please see what happened to <ul> on my first page. (From the challenge 'Responsive Web Design Projects - Build a Tribute Page')

The bullets generated by ul are very far from the text like below image. Can somebody explain it?

Screen Shot 2018-07-04 at 5.54.00 PM.png
Adish Jain
@Adishjain58
Jul 04 2018 09:06
@heegu0311 did u use text-align:center; ?
@heegu0311 can u tell me how you add the screen on files.gitter ?
Yoon Hee-Ku
@heegu0311
Jul 04 2018 09:07
@Adishjain58 Oh I used it in somewhere within my code
@Adishjain58 Let me double confirm the text-align is applied to that problematic part.
Adish Jain
@Adishjain58
Jul 04 2018 09:08
@heegu0311 for ul try using margin property instead of text-align property
Yoon Hee-Ku
@heegu0311
Jul 04 2018 09:09
@Adishjain58 To show the image, you can just copy & paste the image file , while your cursor is blinking here
@Adishjain58 Thanks! Lets me try that!
Adish Jain
@Adishjain58
Jul 04 2018 09:10
@heegu0311 ok thnx
Yoon Hee-Ku
@heegu0311
Jul 04 2018 09:13
@Adishjain58 Based on your advise.. It works. Thanks again.
Screen Shot 2018-07-04 at 6.12.07 PM.png
Adish Jain
@Adishjain58
Jul 04 2018 09:14
@heegu0311 Welcome
Henry
@GitHub-Henry
Jul 04 2018 09:18
Anyone understand why my SCSS isn't working?
Adish Jain
@Adishjain58
Jul 04 2018 09:19
@GitHub-Henry no idea
Henry
@GitHub-Henry
Jul 04 2018 09:19
My SCSS works just fine on my local machine.
There must be something wrong with the way I'm doing it for codesandbox.io
Henry
@GitHub-Henry
Jul 04 2018 09:26
Anyone notice there are two living dragons and two Targaryens?
Chanchal Saini
@sainichanchal__twitter
Jul 04 2018 09:35
Where to starting writing projects of free code camp?
Henry
@GitHub-Henry
Jul 04 2018 09:35
Just need final project to be available via URL
Chanchal Saini
@sainichanchal__twitter
Jul 04 2018 09:37
workspace?
Henry
@GitHub-Henry
Jul 04 2018 09:38
any workspace you want to use.
Chanchal Saini
@sainichanchal__twitter
Jul 04 2018 09:39
okay
Claudio Restifo
@Marmiz
Jul 04 2018 09:52
@GitHub-Henry you need to compile the sass file
May Kittens Devour Your Soul
@diomed
Jul 04 2018 09:56
@Marmiz hello. can u help me?
pen
looking for text to be replaced, not to be deleted upon click on toggle icon
Claudio Restifo
@Marmiz
Jul 04 2018 10:00

I saw the usage of innerHTML, you'd either

innerHtml = prev + new string

or keep creating nodes and setting new text for new node

Henry
@GitHub-Henry
Jul 04 2018 10:04
@Marmiz could you elaborate what needs to be done with codesandbox.io to make my scss accessible?
Claudio Restifo
@Marmiz
Jul 04 2018 10:05

@GitHub-Henry specifically with codesandbox? no idea.
But in general .scss files needs to be pre-processed.

You should do the exact same thing you are doing on your local machine there, (since codesanbox runs a docker with node I believe)

ie: add script to preprocess, compile and put in a dir your .css :)
Henry
@GitHub-Henry
Jul 04 2018 10:06
@Marmiz my question is specific to codesandbox. my local setup works just fine.
local and codesandbox are similar, but not exactly the same.
for example my local package.json file looks nothing like my codesandbox package.json file.
Claudio Restifo
@Marmiz
Jul 04 2018 10:10
I sincerely hope so
Henry
@GitHub-Henry
Jul 04 2018 10:11
hope that they should be the same or different?
Claudio Restifo
@Marmiz
Jul 04 2018 10:12
different
I can't imagine how you would prototype on a public sandbox with env, test, CI and all that jazz
have you checked if the sandbox supports parcelJS? may be easier than figuring out how to add scripts
Henry
@GitHub-Henry
Jul 04 2018 10:20
just started using codesandbox today. so i haven't figured it out yet. i haven't heard of parcel, but it looks like a good tool.
Daniel Simeonov
@dbsimeonov
Jul 04 2018 10:40
Guys is it possible with js to copy a text without even clicking anything, just on loading an event?
Stephen James
@sjames1958gm
Jul 04 2018 10:52
If you can attach a is function to an event then yes you can do most anything.
Daniel Simeonov
@dbsimeonov
Jul 04 2018 10:53
so can that be done without the user knows?
for example I have a task and when a button has appeared on page I want to copy text that is not from an element(custom one)
Jake
@JakeDVirus
Jul 04 2018 11:53
can i import scss partials in partials?
shall i add the underscore in the beggining of the filename(partial file which ll be imported)?
I've tried to import partials within another partials, it only worked when the underscore is omitted from the beggining of the filename, but it creates a redundancy by compiling the css of the partials, which ll be imported, if underscore is omitted.
Any advice will be appreciated
Daniel
@dkapexhiu
Jul 04 2018 14:35
Hello! I am using this script to make video play in background of a div:
https://www.jqueryscript.net/other/jQuery-Plugin-For-HTML5-Video-Background-vidbg-js.html
but it is not working in safari. does anyone know another plugin like this or how to make it work on safari browser?
alpox
@alpox
Jul 04 2018 14:49
@dkapexhiu What about it does not work?
Daniel
@dkapexhiu
Jul 04 2018 14:50
the video in background does not show in safari browser
alpox
@alpox
Jul 04 2018 14:53
@dkapexhiu Could it be because autoplay is generally disabled by safari and ignores that option?
Daniel
@dkapexhiu
Jul 04 2018 14:56
maybe but the video does not show and instead shows a photo
alpox
@alpox
Jul 04 2018 14:56
@dkapexhiu That could be due to that. A poster is shown when the video doesn't play yet as placeholder
I don't know of an option to make safari play the video automatically. Safari tries to protect users from auto-play vids
There are other libraries for background videos but they would have the same behavior
alpox
@alpox
Jul 04 2018 15:04
@dkapexhiu usually though, autoplay should work on safari without sound. You can check your settings in safari to see if you set it to always deactivate instead.
If a user sets it to always deactivate there is nothing much you can do
If it still not works if you activate autoplay in your settings, there must be another problem
https://github.com/daniellmb/vidbg would be another player
Daniel
@dkapexhiu
Jul 04 2018 15:07
great! thanks for the infos
gishy1
@gishy1
Jul 04 2018 15:10
@cmccormack let me have a read through bro.
alpox
@alpox
Jul 04 2018 15:17
@dkapexhiu http://vodkabears.github.io/vide/ yet another one
These two have quite some stars on github so maybe they are ok :D
But vide is not maintained anymore
gishy1
@gishy1
Jul 04 2018 15:29
@cmccormack not all heros wear capes!!
gishy1
@gishy1
Jul 04 2018 15:52
hello world !!
need help finishing this up
hello guys help me with aligning text input text box\
gishy1
@gishy1
Jul 04 2018 15:57
also my page looks horrible on smalller pages need help !! SOS
May Kittens Devour Your Soul
@diomed
Jul 04 2018 16:06
@gishy1 when you write properties justify-items: ; then you have to fill that properties with values, not leave them empty
gishy1
@gishy1
Jul 04 2018 16:07
i had it center before i just changed it
@diomed should i just eject the grid and justify-items properties
?
May Kittens Devour Your Soul
@diomed
Jul 04 2018 16:10
dont know. u probably know the grid more than I do
I barely ever used a grid
I know this - if you write property, you must have some value inside it, otherwise it's a bug, useless code
gishy1
@gishy1
Jul 04 2018 16:16
true thats why i had changed it, just before you replied,
let me try the @ media minmax width
gishy1
@gishy1
Jul 04 2018 16:23
also how do i submit my work the fcc site is not letting me post
hensn5250
@hensn5250
Jul 04 2018 16:48
hello
Lance
@texas2010
Jul 04 2018 17:52
@thekholm80 other day, i learned about promises. i realized fetch api is part of promises. it is so interesting. then. i learned about async/await. it is really nice.
Kyle Holm
@thekholm80
Jul 04 2018 17:52
@texas2010 promises and async/await are awesome
i dislike promises and callbacks, or .then() it's so cumbersome
Lance
@texas2010
Jul 04 2018 17:53
yeah. i was surprised about async is part of promises. i was like whatt.
Kyle Holm
@thekholm80
Jul 04 2018 17:54
my favorite of all that is Promise.all()
then you can use async/await in map()
Lance
@texas2010
Jul 04 2018 18:00
ohh
Henry
@GitHub-Henry
Jul 04 2018 18:46
I bet CRA doesn't support SCSS because the intent of the FB folks is to put all CSS into components
Daniel Simeonov
@dbsimeonov
Jul 04 2018 18:46
Guys I have a question, I've been given a task from a company as my test for interview and I can not understand quite clear what they are asking me for
When the button in the "Most Important Story" is added, change the copy to "This copy has been amended".
Can you explain me what exactly they are asking here? Thanks
Henry
@GitHub-Henry
Jul 04 2018 18:47
copy is a term for verbage
so change the copy of most important story to this copy has been amended, would be my interpretation
Daniel Simeonov
@dbsimeonov
Jul 04 2018 18:50
So the copy itself is nothing related to Ctrl+C like my thought?
Henry
@GitHub-Henry
Jul 04 2018 18:52
when it says change the copy i think it means change the verbage
because copy is another word for verbage
also they say the copy meaning it is used as a noun, not a verb
Daniel Simeonov
@dbsimeonov
Jul 04 2018 18:54
awesome man thanks
Henry
@GitHub-Henry
Jul 04 2018 18:54
good luck
Daniel Simeonov
@dbsimeonov
Jul 04 2018 18:55
thanks @GitHub-Henry <3
Smootimus
@Smootimus
Jul 04 2018 19:22
I heard BryanJS was in here
anthonygallina1
@anthonygallina1
Jul 04 2018 19:25
Hi @Smootimus
Smootimus
@Smootimus
Jul 04 2018 19:27
Ay hello
Happy 4th
For all US
Peeps
JJ Megma
@megma_jj_twitter
Jul 04 2018 19:28
@anthonygallina1 You are BryanJS?
@Smootimus Who told you to do your hair like that?
anthonygallina1
@anthonygallina1
Jul 04 2018 19:30
@Smootimus :fireworks:
Smootimus
@Smootimus
Jul 04 2018 19:32
I don't need to be told NUTHIN
anthonygallina1
@anthonygallina1
Jul 04 2018 19:32
@megma_jj_twitter nope
JJ Megma
@megma_jj_twitter
Jul 04 2018 19:40
@Smootimus shouldn't you be on Discord with all the other delinquents
Smootimus
@Smootimus
Jul 04 2018 19:59
Oh I'm there
SHouldn't you be as well
anthonygallina1
@anthonygallina1
Jul 04 2018 20:01
Is it like a AOL chat room?
Not that that is bad AOL got lots of PR was even a common household name.
:imp:
imp :point_up:
glitz20
@glitz20
Jul 04 2018 20:33
Hey guys, what is a good way to filter row of table in react?
alpox
@alpox
Jul 04 2018 20:35
@sabin20 .filter array method
glitz20
@glitz20
Jul 04 2018 20:36
@alpox so each of the row contains a name, which is associated with a category. So I am planning to create buttons with name of cateogry on it
Screenshot (114).png
and this is my tabrow function
 tabRow(){
      if(this.state.items instanceof Array){
        return this.state.items.map(function(object, i){
            return <TableRow obj={object} key={i} />;
        })
      }
Smootimus
@Smootimus
Jul 04 2018 20:48
Meh, not like an AOL chat more like this chat
But has differences, Discord was made for gamers to communicate
alpox
@alpox
Jul 04 2018 20:53
@sabin20 you can set a state for the category that should be filtered which is set through the buttons. Then you can filter the items before you map them
josecgomezvazquez
@josecgomezvazquez
Jul 04 2018 21:52
hey, can anyone help me with some fontawesome bullet points I'm trying to make
?
Kyle Holm
@thekholm80
Jul 04 2018 21:58
probably
Lee Arnold
@nsanity1
Jul 04 2018 22:03
i need a reminder of how to center a picture...i have tried float: center and it's not working....could someone guide me in the right direction of where to look in the lessons?
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:07
@nsanity1 Don't know about the lessons, but basicly you need a container that has 100% width and your picture inside that needs a left and right margin set to auto
Kyle Holm
@thekholm80
Jul 04 2018 22:08
ugh i can't remember anything that doesn't involve flexbox
stupid flexbox
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:08
lol
Lee Arnold
@nsanity1
Jul 04 2018 22:08
lol
I think I may have found the lesson.....let me try it out
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:08
With grid at hand I honestly don't need flexbox at all
Kyle Holm
@thekholm80
Jul 04 2018 22:09
i keep thinking i'll learn grid
i learned the basics, but never went beyond that
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:09
You should watch the YT vid about it on FCC's channel. It's very clear and easy to understand
Kyle Holm
@thekholm80
Jul 04 2018 22:09
i don't want to
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:09
Why not?
Kyle Holm
@thekholm80
Jul 04 2018 22:10
lol
i don't get a lot out of videos
it's easier for me to do the lessons
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:10
Ah ok
Lee Arnold
@nsanity1
Jul 04 2018 22:11
@bjorno43 it moves it but i need it to be centered for this last test to pass (working on my tribute page project)
Kyle Holm
@thekholm80
Jul 04 2018 22:12
.imageContainer {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
}
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:12
@nsanity1 You might want to check this one: http://www.tipue.com/blog/center-a-div/ It's for a div, but the principle is the same. I always use that website when I center something
@nsanity1 Sorry, wrong one
alpox
@alpox
Jul 04 2018 22:13

I like the:

.image {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

approach :sunglasses:

Kyle Holm
@thekholm80
Jul 04 2018 22:14
lol
Lee Arnold
@nsanity1
Jul 04 2018 22:14
@bjorno43 for the win...
project one in the books....open for input and suggestions....https://codepen.io/nsanity1/pen/OEGjry
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:15
Or you make a grid of 3 / 5 / 7 / 9 / 11 columns and put the img in the middle one :laughing:
alpox
@alpox
Jul 04 2018 22:15
@bjorno43 Thats an "oh my eyes" approach :D
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:16
@alpox Ghehe
Kyle Holm
@thekholm80
Jul 04 2018 22:16
how many fonts you got going there?
Lee Arnold
@nsanity1
Jul 04 2018 22:17
I brought in three and used two of them....still deciding if I like the layout but this is just the "pass the tests and make it look pretty in a bit" version
Kyle Holm
@thekholm80
Jul 04 2018 22:18
i can't offer any design tips, my UIs are probably the worst you'll see
Lee Arnold
@nsanity1
Jul 04 2018 22:18
lol
I doubt mine is much better
it's a good thing i married an artist to give me all the color and layout advice i need
Kyle Holm
@thekholm80
Jul 04 2018 22:19
i had one project (that passed all the tests) that was just 9 letters in a vertical column.
it was ... bad
Lee Arnold
@nsanity1
Jul 04 2018 22:19
that's awesome...lol
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:20
I've only recently decided to actually do the curriculum myself, ghehe. So I dont have any of the projects yet :P
Kyle Holm
@thekholm80
Jul 04 2018 22:20
@bjorno43 oh nice, then you'll know what you're talking about :stuck_out_tongue:
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:21
lol :stuck_out_tongue_closed_eyes:
Kyle Holm
@thekholm80
Jul 04 2018 22:21
i felt guilty for just turning in a stack of letters so i added a little css
still ugly though
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:22
Nah it just felt like a waste of my time as I pretty much know a lot of it already. Aside from a couple of libraries of course.
But then I was like: I'm part of the team here! I should at least know what the hell ppl are talking about when asking questions about the curriculum! :innocent:
Kyle Holm
@thekholm80
Jul 04 2018 22:24
seems valid
Lee Arnold
@nsanity1
Jul 04 2018 22:26
fair enough
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:27
You guys check the forum regulerly btw?
Kyle Holm
@thekholm80
Jul 04 2018 22:27
nope
there be dragons
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:27
lol
There was a post recently from Quincy announcing the FCC's top contributors 2018
Kyle Holm
@thekholm80
Jul 04 2018 22:28
i saw that on twitter
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:29
Ah cool :smile:
I was very surprised when he sent me a message that I made it to that list, haha
Kyle Holm
@thekholm80
Jul 04 2018 22:29
congrats :tada:
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:30
Thx
Kyle Holm
@thekholm80
Jul 04 2018 22:30
i should contribute
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:31
That'd be great! There are many ways in which you can contribute
Lee Arnold
@nsanity1
Jul 04 2018 22:31
Thanks for the help guys...I have to run to do 4th BBQ stuff....i'll be on later
Kyle Holm
@thekholm80
Jul 04 2018 22:31
@nsanity1 :wave:
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:31
@nsanity1 Sure m8, have a good one! :wave:
Kyle Holm
@thekholm80
Jul 04 2018 22:31
@bjorno43 it's a shame helping people on gitter doesn't count
except for the mods, they were on there
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:32
True. But if that's where you want to contribute the most, what's stopping you from becoming a mod?
Kyle Holm
@thekholm80
Jul 04 2018 22:33
i want to help people, not police people lol
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:34
That hardly ever happens. All the "policing" I do is ban an advertisement spammer once in a couple of days and ask ppl nicely to use Codepen when posting large walls of code. And ye, on rare occasions I have to ban someone for bad behaviour. But those rly are rare
Kyle Holm
@thekholm80
Jul 04 2018 22:35
fair enough
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:37
Being a Mod here and / or on the forums is much more about helping ppl than actually playing cop. That's why I like it. I know a Dutch chatsite with hundreds of thousends of members that would be more than happy to have me lead the team there. But there you ban at least 100 ppl a day. You hardly have time to do anything else. That's why I'm not interested
Kyle Holm
@thekholm80
Jul 04 2018 22:37
oh i'll do it
i don't speak dutch though so i'll have to just ban at random
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:38
:joy:
Kyle Holm
@thekholm80
Jul 04 2018 22:38
but i'm sure i can hit that 100-per-day quota
Bjorn van de Peut
@bjorno43
Jul 04 2018 22:39
Whaha ye that rly aint very hard to do. Rly, the shit those ppl post there..
Wait, I'll give you a link via IM @thekholm80