These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Sep 2017
Rafael Monroy
@rafaelmonroy
Sep 28 2017 03:32
can anyone tell me why my code only works when my second argument has only ONE property but not TWO properties?
function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];
  // Only change code below this line
  for (i=0;i<collection.length;i++){
    for (var j in source){
      if (source[j] === collection[i][j]){
        arr.push(collection[i]);
      }
    }
  }


  // Only change code above this line
  return arr;
}

whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "c": 2 });
Bryan Jay B. Panesa
@bryanpanesa
Sep 28 2017 03:34
Hey guys, so I have an html input element which accepts xlsx files for upload and when I upload large files like 500kb and above, the whole page freezes for some time. How can I fix this without touching the size of the excel?
heroiczero
@heroiczero
Sep 28 2017 04:01
@bryanpanesa you could probably do something like a loading animation maybe when you are uploading files.
Bryan Jay B. Panesa
@bryanpanesa
Sep 28 2017 04:17
@heroiczero yeah, I have a loading animation but since the page is freezing, it's also freezing and delayed.
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:30
Hi guys
heroiczero
@heroiczero
Sep 28 2017 04:31
@Raja-Sharma :wave:
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:31
I just had a quick question. Does anyone know why both chrome and safari devtools would load a page inconsistently? When I set the width to 320px sometimes by 2x3 grid is correct and sometimes it’s a wonky off center 3x2.
@heroiczero 👋🏽
heroiczero
@heroiczero
Sep 28 2017 04:33
@Raja-Sharma you may need vendor prefixes https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:35
I meant they’re both inconsistent but separately. Sometimes it’s perfect and sometimes it’s wrong. On both browsers. Without changing css.
heroiczero
@heroiczero
Sep 28 2017 04:37
Now i am confused if its consistent. Something would be wrong with the code but if it isnt then maybe you have an addon or something in your browser maybe?
Long Nguyen
@longnt80
Sep 28 2017 04:38
@bryanpanesa why is it freezed?
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:40
@heroiczero probably a better way to describe it is the layout randomly changes on reload
Using flex box if that matters
Long Nguyen
@longnt80
Sep 28 2017 04:41
@Raja-Sharma what do you mean by devtools would load a page?
if you don't turn the devtool on, are they consistent?
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:42
@longnt80 I’ve opened a page in device/responsive view at 320 px width
Above that width it’s all normal @longnt80
Long Nguyen
@longnt80
Sep 28 2017 04:43
so you see the inconsistency when resizing the device screen width, correct?
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:43
@longnt80 sometimes yes
Long Nguyen
@longnt80
Sep 28 2017 04:44
ok I think that could be a bug with the devtool
I also have experienced that sometimes
the layout is just wrong but not because of my css
Raja Sharma
@Raja-Sharma
Sep 28 2017 04:45
Wow
Thanks @longnt80
CamperBot
@camperbot
Sep 28 2017 04:45
raja-sharma sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 560 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Sep 28 2017 04:45
when I quit the tab and open again, it become normal
but I mostly experience that when using browsersync
Bryan Jay B. Panesa
@bryanpanesa
Sep 28 2017 06:00
@longnt80 that's what I don't know :worried:
Long Nguyen
@longnt80
Sep 28 2017 06:01
@bryanpanesa did you set async to false?
Bryan Jay B. Panesa
@bryanpanesa
Sep 28 2017 06:09
@longnt80 No
EpicTriffid
@EpicTriffid
Sep 28 2017 09:07
@EpicTriffid
Hello all. It's been a while since I last posted. Been trying to get through these algorithms by myself. Little stuck now though on this one: https://www.freecodecamp.org/challenges/smallest-common-multiple
Without telling me how, where should I start my thinking?
Graham Snowdon
@grahamsnowdon
Sep 28 2017 10:31

Guys I really don’t want to be “That guy” but I’ve searched for 3 hours now and watched loads of youtube videos on RegExpr and I still don’t thinkI get it, I’ve got some code ```
function palindrome(str) {
var pre = str.toLowerCase();
var newString = pre.replace(/ /g, '');
var a = newString.split('');
var b = a.reverse();
var c = b.join('');
if (c === str) {
return true;
} else {
return false;
}
}

palindrome("eye”);```
and I can’t figure out why it’s not replacing spaces with nothing. I’m still 6 tests away from completingthe challenge but banging my head on the desk has proved fruitless.

Markus Kiili
@Masd925
Sep 28 2017 10:32
@grahamsnowdon You could look at regexp metacharacters \w and \W.
You need to compare newString with c.
Graham Snowdon
@grahamsnowdon
Sep 28 2017 10:38
@Masd925 Thanks for the help, does this look better:
var newString = pre.replace(/\w_/g, '’);
CamperBot
@camperbot
Sep 28 2017 10:38
grahamsnowdon sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4513 | @masd925 |http://www.freecodecamp.com/masd925
Markus Kiili
@Masd925
Sep 28 2017 10:40
@grahamsnowdon Are you sure \w is the correct metacharacter?
Graham Snowdon
@grahamsnowdon
Sep 28 2017 10:43
Ha!!! @Masd925 Du bist ein genie!! thank you, I get it now, the stuff I’m trying to find and replace needs to be in parentheses!! I think now I’ve got the underscore sorted I can get the rest done… hopefully.
CamperBot
@camperbot
Sep 28 2017 10:43
grahamsnowdon sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
Graham Snowdon
@grahamsnowdon
Sep 28 2017 10:48
The system works! This is the first time I’ve got to the “Ask” part of search-read-ask and I’m v glad I did. Only three more tests to pass.
Graham Snowdon
@grahamsnowdon
Sep 28 2017 10:53
Screen Shot 2017-09-28 at 12.52.47.png
BOOOM Happy days!
Johnny
@JohnnyBizzel
Sep 28 2017 10:57
:boom:
mustimuu
@mustimuu
Sep 28 2017 11:20
Hello guys. I want to add a class to a p class in wordpress. If i make any changes i dont want to to affect all the p classes. what do i do?
arpitanand112
@arpitanand112
Sep 28 2017 11:25
@bryanpanesa Yes 1 yearr before i was working on project where I have to parse use 5 mb csv file in that, and also loop through all, For just parsing file you can use http://papaparse.com/ it can parse the data.
Bryan Jay B. Panesa
@bryanpanesa
Sep 28 2017 11:28
@arpitanand112 Cool mate. Did it also freeze upon upload? Thanks!
CamperBot
@camperbot
Sep 28 2017 11:28
bryanpanesa sends brownie points to @arpitanand112 :sparkles: :thumbsup: :sparkles:
api offline
arpitanand112
@arpitanand112
Sep 28 2017 11:34
@bryanpanesa as soon as you select the file after input popup it will freeze as it takes time for file to gets uploaded, if you just want to upload file user PAPAparse for using that file , you can import that in database and that query that make sure to convert file on json'
korzo
@korzo
Sep 28 2017 11:35
@bryanpanesa @arpitanand112 If I recall it correctly, you can use Workers to prevent page freeze
arpitanand112
@arpitanand112
Sep 28 2017 11:36
@korzo yes workers are even better option
@bryanpanesa Learn about web workers how it works and all.
Graham Snowdon
@grahamsnowdon
Sep 28 2017 12:07
@mustimuu can you give the specific p class an id? then apply the css just to that id.
@mustimuu Or create a new p class and apply that class to all the p classes you want to apply the CSS to?
Marouane R
@mrassili
Sep 28 2017 12:52
Hi guys
I'm stuck. I need help with my Portfolio page
Hello
rscales02
@rscales02
Sep 28 2017 13:30
@mrassili you also need to activate your bootstrap 4 javascript
What are you stuck with?
Lean Junio
@leanjunio
Sep 28 2017 13:34
Should AJAX requests to external APIs be made from the Front-End or the Back-End?
rscales02
@rscales02
Sep 28 2017 13:35
Your links should be inside a <head></head> as well
Don't forget to put basically everything inside a div element as well
rscales02
@rscales02
Sep 28 2017 13:42
@mrassili I would also get rid of any and all css until after you have filled in your html and html bootstrap classes as your css will cause unwanted effects to the bootstrap (I had a huge problem with that!)
Lean Junio
@leanjunio
Sep 28 2017 13:53
@mrassili You can probably add bootstrap.min.css and bootstrap.min.css in codepen's settings no? That way you don't have to explicitly put a link within your <head> tags
Eric Weiss
@eweiss17
Sep 28 2017 15:12
i'll be here for like 90 minutes if anyone needs help on this board
lfvpCO
@lfvpCO
Sep 28 2017 15:17
hello guys I need documentation about CSS GRID
Jon Maldia
@jmaldia
Sep 28 2017 15:24
weird, i just got an email from codecademy about their new class on CSS GRID. It's here if you're interested - https://www.codecademy.com/learn/learn-css-grid
Hi everyone, would anybody have some time to take a look at my codepen for the Simon Game ?
I have a rounded div in the middle displayed over 4 colored corners/buttons (also rounded). However, it seems as if my inner div still blocks the clicking of the 4 colored corners/buttons at some parts of the buttons.
Toni Shortsleeve
@KoniKodes
Sep 28 2017 16:05
@LeCoquille I don't have an issue with clicking the buttons, but I do have a problem seeing which buttons Simon chooses. Perhaps a slightly stronger shading on the highlights would help.
piteto
@piteto
Sep 28 2017 16:13
@LeCoquille If you want to be able to click through your .innercircle, you'll need to add pointer-events: none to that class in your CSS. Use pointer-events: auto on your on/off, start, and strict buttons so they can still be clicked.
.round-btn-start,
.round-btn-strict,
#onoff {
  pointer-events: auto;  
}
.innercircle {
  pointer-events: none;
}
rscales02
@rscales02
Sep 28 2017 16:13
@KoniKodes if you look closely there is a corner that sticks out into each of his colored buttons from the center circle (notice when the cursor changes) although the buttons are big enough that it is not really an issue I think that is what he is referring to. Agreed on the button selection color chane though
RakeshNerkar
@Rakesh18754
Sep 28 2017 17:30
x=1;
(function (){
   x=2;
if(true){
   var x= 3;
}
function f1(){
   x=4;
}
f1();

})();
console.log(x);
why does it logs x value as 1....whereas I am changeing it to 4?
Joran de Haan
@LeCoquille
Sep 28 2017 17:35
@KoniKodes @rscales02 that's it, yes.
@KoniKodes agree on the shades, thanks.
CamperBot
@camperbot
Sep 28 2017 17:35
lecoquille sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @konikodes |http://www.freecodecamp.com/konikodes
Joran de Haan
@LeCoquille
Sep 28 2017 17:36
@piteto that totally works. thanks a lot. I had already tried using pointer-events, but didn't think to use it on the buttons as well.
CamperBot
@camperbot
Sep 28 2017 17:36
lecoquille sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 160 | @piteto |http://www.freecodecamp.com/piteto
Toni Shortsleeve
@KoniKodes
Sep 28 2017 17:58
@rscales02 Thank you. Yes, now I see. It looks as though the click doesn't include the entire button. I can't why that's happening either.
CamperBot
@camperbot
Sep 28 2017 17:58
konikodes sends brownie points to @rscales02 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @rscales02 |http://www.freecodecamp.com/rscales02
Toni Shortsleeve
@KoniKodes
Sep 28 2017 17:59
@LeCoquille Thank you for the brownies :-)
CamperBot
@camperbot
Sep 28 2017 17:59
konikodes sends brownie points to @lecoquille :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @lecoquille |http://www.freecodecamp.com/lecoquille
ronald
@ronstarcool
Sep 28 2017 19:41
folks, anybody here to check my redux-thunk stuff???? im completely stuck on it
you tried it!
@you-tried-it
Sep 28 2017 20:37
hi
um...
piteto
@piteto
Sep 28 2017 20:38
name checks out
:)
you tried it!
@you-tried-it
Sep 28 2017 20:39
hi
piteto
@piteto
Sep 28 2017 20:39
hello
you tried it!
@you-tried-it
Sep 28 2017 20:40
i'm new :worried:
piteto
@piteto
Sep 28 2017 20:40
welcome! :)
you tried it!
@you-tried-it
Sep 28 2017 20:40
thnx :smile: :+1:
now where to start...
where can i find the java chat roooms?
piteto
@piteto
Sep 28 2017 20:43
rooms
CamperBot
@camperbot
Sep 28 2017 20:43

freeCodeCamp rooms:

:point_right: Here is a list of our official chat rooms
you tried it!
@you-tried-it
Sep 28 2017 20:43
@piteto where are the java chatroom
hi @piteto are you a robot?
piteto
@piteto
Sep 28 2017 20:44
camperbot is the robot
cbot
CamperBot
@camperbot
Sep 28 2017 20:44
you called?
piteto
@piteto
Sep 28 2017 20:44
we learn JavaScript here at Free Code Camp, not Java
you tried it!
@you-tried-it
Sep 28 2017 20:44
@piteto and yourself?
oh :(
piteto
@piteto
Sep 28 2017 20:44
how did you find this room?
you tried it!
@you-tried-it
Sep 28 2017 20:46
chance :confused:
it seems like no one is here
piteto
@piteto
Sep 28 2017 20:47
yeah, not very busy for 15,717 people in the room
questions get answered quickly though
Gersho
@Gersho
Sep 28 2017 20:49
come on @piteto , admit you're an AI :P
piteto
@piteto
Sep 28 2017 20:49
I am human brain
you tried it!
@you-tried-it
Sep 28 2017 20:49
@piteto prove it
Gersho
@Gersho
Sep 28 2017 20:50
reminds me of Boten Anna xD
piteto
@piteto
Sep 28 2017 20:50
okay. Ask me a question only a human can answer
you tried it!
@you-tried-it
Sep 28 2017 20:51
high league.PNG
what do you see in that picture
Moisés Man
@moigithub
Sep 28 2017 20:51
captcha img recognition :P
Gersho
@Gersho
Sep 28 2017 20:51
@piteto
Which of the following would you most prefer?
A: A puppy,
B: A pretty flower from your sweetie, or
C: A large properly formatted data file?
you tried it!
@you-tried-it
Sep 28 2017 20:51
;
piteto
@piteto
Sep 28 2017 20:51
I see happiness
you tried it!
@you-tried-it
Sep 28 2017 20:51
;)
piteto
@piteto
Sep 28 2017 20:51
;)
C
I wonder if there are any questions AI can't answer... hmmm
you tried it!
@you-tried-it
Sep 28 2017 20:52
@piteto hmm... what else?
Gersho
@Gersho
Sep 28 2017 20:53
Fry:Uh, is the puppy mechanical in any way?
Robot #2:No, it is the bad kind of puppy.
Leela:Then we'll go with that data file!
Robot #2:Correct!
Robot #1:The flower would also have been acceptable.
piteto
@piteto
Sep 28 2017 20:53
It's a person laughing at jokes on reddit, I'm gonna guess
you tried it!
@you-tried-it
Sep 28 2017 20:55
:clap:
Gersho
@Gersho
Sep 28 2017 20:55

I wonder if there are any questions AI can't answer... hmmm

depends if you expect an actual answer or something a philosopher would accept (like your earlier happiness answer)

it's like politics, you don't have to know what you're doing, you have to convince people you know what you're doing
you tried it!
@you-tried-it
Sep 28 2017 20:58
any java coders around?
piteto
@piteto
Sep 28 2017 20:59
@Gersho I think you have to get the AI into an infinite loop :p
Is the following true or false? "This sentence is false"
It's true that it's false or does that make it false?
Gersho
@Gersho
Sep 28 2017 21:00
if i asked you to give me 100€, would you answer to that question be the same than the answer to this question ?
piteto
@piteto
Sep 28 2017 21:01
lol, good one
Kent Saeteurn
@sansae
Sep 28 2017 21:07
hello. i'm working on the "Inventory Upate" challenge. the results are coming out as expected, but fcc is marking it as incorrect. can anyone take a look at my code for me? I don't know what 's wrong. i thought perhaps i had to json.stringify my returned array, but doing that didn't solve the problem. tia
here is my repl: https://repl.it/Ln48/30
Kris Baillargeon
@krisb1220
Sep 28 2017 21:07

http://kjrb-web.bss.design/

Thoughts, comments, issues, questions or concerns? Not sized for mobile yet

legendinraze
@legendinraze
Sep 28 2017 21:15
where can I post pictures to use them in a project
Kent Saeteurn
@sansae
Sep 28 2017 21:15
@krisb1220 i really like the design; it looks like an actual site
legendinraze
@legendinraze
Sep 28 2017 21:16
@krisb1220 check "book now" on your site
Kris Baillargeon
@krisb1220
Sep 28 2017 21:16
LOL, thank you :P I would hope so given that its going to go on my actual site :P
legendinraze
@legendinraze
Sep 28 2017 21:17
it's overlapping something
Gersho
@Gersho
Sep 28 2017 21:17
@krisb1220 when you click one of the navbar elements and remove the mouse, it stays white
legendinraze
@legendinraze
Sep 28 2017 21:17
where can I post pictures to use them in a project
Kris Baillargeon
@krisb1220
Sep 28 2017 21:17
@Gersho because the link doesnt take you anywhere :P
I was only asking about the design, I'll fix any bugs :P Thank you though!
@legendinraze is that in a smaller viewport youre talking about?
thanks @Gersho @legendinraze @sansae
CamperBot
@camperbot
Sep 28 2017 21:19
krisb1220 sends brownie points to @gersho and @legendinraze and @sansae :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @gersho |http://www.freecodecamp.com/gersho
:cookie: 314 | @sansae |http://www.freecodecamp.com/sansae
:cookie: 187 | @legendinraze |http://www.freecodecamp.com/legendinraze
legendinraze
@legendinraze
Sep 28 2017 21:19
it's one of your buttons. can someone answer my question
Kris Baillargeon
@krisb1220
Sep 28 2017 21:20
You cant use pictures in a project
Gersho
@Gersho
Sep 28 2017 21:20
look for free hosting, but i don't know any sorry
Kris Baillargeon
@krisb1220
Sep 28 2017 21:20
Well
Wait
You can
legendinraze
@legendinraze
Sep 28 2017 21:20
of course you can
Kris Baillargeon
@krisb1220
Sep 28 2017 21:20
Wording
I read it as him asking to submit pictures as his project :P LOL
imgur.com
legendinraze
@legendinraze
Sep 28 2017 21:21
it's cause my code won't pick up the pic from my PC. thnks @krisb1220
thanks*
Kris Baillargeon
@krisb1220
Sep 28 2017 21:21
upload pic & copy image url
make sure you copy the right url
legendinraze
@legendinraze
Sep 28 2017 21:21
yup
Gersho
@Gersho
Sep 28 2017 21:21
isn't imgur short term only ?
Kris Baillargeon
@krisb1220
Sep 28 2017 21:22
tbh i have no idea LOL
i dont think so?
Gersho
@Gersho
Sep 28 2017 21:22
well i don't know if it applies to imgur, but a lot of free hosting deletes stuff after a while
Kris Baillargeon
@krisb1220
Sep 28 2017 21:22
Imgur keep images for ever as long as they are receiving at least 1 view every six months.
Straight from my babygirl, Google.
Gersho
@Gersho
Sep 28 2017 21:23
it's nice of them to give the exact details of their policy
Kent Saeteurn
@sansae
Sep 28 2017 21:23
re: inventory update, never mind. i made a silly mistake with not generalizing the parameters
legendinraze
@legendinraze
Sep 28 2017 21:23
it wont post
any others
Kris Baillargeon
@krisb1220
Sep 28 2017 21:24
dude
google it lol;
legendinraze
@legendinraze
Sep 28 2017 21:25
got it
nvm still wont work
Moisés Man
@moigithub
Sep 28 2017 21:29
i used github to host imgs for my portfolio
+ rawgit if i recall
Adel
@AdelMahjoub
Sep 28 2017 21:33
@legendinraze https://imgsafe.org
Jerzz
@2cool4school
Sep 28 2017 21:37
Hi guys, I was wondering if anyone knew how to set a fixed amount of images on a line. I'm using the class "img-responsive" but the images stack before they start resizing. I want them to resize with the window and not stack at all. Here's a code pen mock up of what I have: https://codepen.io/shipfaced/pen/zEwVje?editors=1100
Moisés Man
@moigithub
Sep 28 2017 21:40
use the grid system (u already using bootstrap)
put each image on a column
vínαч puppαl
@vinaypuppal
Sep 28 2017 21:42
@legendinraze You can use this https://postimages.org/ or https://cloudinary.com/
@Gersho :point_up: September 29, 2017 2:52 AM
Yes thats true I found https://cloudinary.com/ easy to use and it’s free plan is sufficient for our usecases
Gersho
@Gersho
Sep 28 2017 21:48
@vinaypuppal indeed this plan seem nice , think i'll register there, thanks !
CamperBot
@camperbot
Sep 28 2017 21:48
gersho sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 712 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
piteto
@piteto
Sep 28 2017 21:56
@2cool4school You have a few options. Limit each row to 12 columns, which means a maximum of 6 images in a row using the col-md-2 class you have now. You could use bootstrap 4 and change col-md-2 to col. Or, you could use flexbox - add a class like 'image-row' to your row, and 'image-col' to your columns, then do:
.image-row {
  display: flex;
}
.image-col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
piteto
@piteto
Sep 28 2017 22:02

@krisb1220 @Gersho Imgur doesn't allow you to use their images on websites.

don't use Imgur to host image libraries you link to from elsewhere, content for your website, advertising, avatars, or anything else that turns us into your content delivery network.

Github is really a great place for free hosting, though cloudinary and postimages seem pretty nice too
vínαч puppαl
@vinaypuppal
Sep 28 2017 22:08
@Gersho @piteto @moigithub :point_up: September 29, 2017 2:59 AM
Along with rawgit, one more trick with github is you can create an issue in your portfolio repo and drag and drop images into issue content (https://help.github.com/articles/file-attachments-on-issues-and-pull-requests/) It will give you permanent public URL which you can use in your sites.
piteto
@piteto
Sep 28 2017 22:11
@vinaypuppal Do you know if those links are served over a global CDN like the production ones on rawgit?
vínαч puppαl
@vinaypuppal
Sep 28 2017 22:14

@piteto Yeah I think so, for this image url https://user-images.githubusercontent.com/8843216/30991518-fc343ce2-a4c2-11e7-8928-163feace5022.png from vinaypuppal/vinaypuppal.github.io#2
I see below response headers

X-Cache:HIT
X-Cache-Hits:1
X-Fastly-Request-ID:f8727652d44bcf28d55d8ea49b5dc9ece550c270
X-Served-By:cache-ams4443-AMS

So Its served from CDN only

piteto
@piteto
Sep 28 2017 22:16
hmmm thanks @vinaypuppal
CamperBot
@camperbot
Sep 28 2017 22:16
piteto sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 713 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Barbara Pentoney
@flyfishingbarbara
Sep 28 2017 22:21
is @skyc0der around...
lfvpCO
@lfvpCO
Sep 28 2017 22:52
Guys one question.. I’m new using css..
I want to know if css grid is working in all browsers. Also, if there are websites developed with this layout tool.?
piteto
@piteto
Sep 28 2017 22:55
@lfvpCO http://caniuse.com/#feat=css-grid
About 72.5% of browsers in use support it
Jorge
@OrangeKulture
Sep 28 2017 22:56
hey wazzup guys
@flyfishingbarbara sky is in a better place now .. :joy:
lfvpCO
@lfvpCO
Sep 28 2017 22:56
Cool
piteto
@piteto
Sep 28 2017 22:57
Hey, what's up @OrangeKulture :sparkles: :wave: :sparkles:
@lfvpCO The caniuse.com website is really useful for figuring out browser support
lfvpCO
@lfvpCO
Sep 28 2017 22:59
I wanna start using css grid instead of bootstrap. It works better for me for what I wanna do. What you think guys ?
piteto
@piteto
Sep 28 2017 23:00
CSS Grid is great - but whether or not you use it depends on who will be visiting your pages
Jorge
@OrangeKulture
Sep 28 2017 23:01
@piteto all good here, you?
piteto
@piteto
Sep 28 2017 23:02
Hanging in there!
lfvpCO
@lfvpCO
Sep 28 2017 23:02
Basically I wanna code a hobby website..
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:15
Howdy, howdy. I'm having some issues with Bootstrap navbars. Anyone available to answer a question or two?
Jorge
@OrangeKulture
Sep 28 2017 23:18
@NerdyNerves sure, whats up
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:20
@OrangeKulture So, it seems that no matter what I do, even just copy-pasting the direct source from Bootstrap's navbar documentation, I can't get my navbar to show properly. I've linked to my bootstrap.css file, and even the .js down at the bottom.
Jorge
@OrangeKulture
Sep 28 2017 23:21
@NerdyNerves are you working on codepen? or on a separate text editor?
@OrangeKulture There's my code. I'm just working locally, Sublime text editor and my browser.
Jorge
@OrangeKulture
Sep 28 2017 23:24
and what seems to be the problem?
are you not getting it to work properly, or is positioning?
it does work well for me on codepen ... @NerdyNerves
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:24
The navbar isn't showing as Bootstrap's navbar, just a bar at the top with an unordered list.
Jorge
@OrangeKulture
Sep 28 2017 23:25
Did you get the correct version of bootstrap?
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:25
Yep, the latest -- 4.0 alpha from their site.
If I change the code around a little bit, it will display the toggle version for mobile, but the button doesn't work and the brand is on the right. Also, there are no list items to choose from. It's really strange.
Jorge
@OrangeKulture
Sep 28 2017 23:27
@NerdyNerves this is what it looks like or me: Sample
is that how you wanted it to look? or are you looking for a flat navbar at the top?
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:29
I'm looking for it to be like the examples in Bootstrap's documentation. Here's a link: https://v4-alpha.getbootstrap.com/components/navbar/
Jorge
@OrangeKulture
Sep 28 2017 23:30
u mean the first one, with a faded bg
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:30
When you use the navbar-* classes, it should style it like the ones displayed depending on what you choose. Instead, all I see is a vertical unordered list.
Even here, when I copy their code from the documentation, it doesn't display: https://codepen.io/NerdyNerves/pen/dVRbOe
Jorge
@OrangeKulture
Sep 28 2017 23:32
u need to load jquery before loading bootstrap's jquery min file
if you do that, then the toggle works ..
i still find it strange tho, navbar rendering like that, it's kinda crazy. It has to be one of the classes you are using ..
to be completely honest, i use bootstrap 3 all the way, so im not all that familiar with B4 classes
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:34
On the pen above, I didn't even insert any of my CSS/classes, just the bootstrap4 CSS and JS. It's weird, right?
piteto
@piteto
Sep 28 2017 23:34
<ul class="nav navbar-nav">
should be:
<ul class="navbar-nav mr-auto">
and try the Beta now that it's out instead of the alpha
Jorge
@OrangeKulture
Sep 28 2017 23:35
ohh you are using alpha?
no bueno
:joy:
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:36
Oh, actually -- sorry, I'm using beta locally.
Not sure why I thought I was on alpha.
Jorge
@OrangeKulture
Sep 28 2017 23:36
if i use the code you provided, it does work me .. looks really weird, but it does work as intended
i have mr-auto as a class as well
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:37
Hmm... I switched it, and it just threw the list to the left next to the brand text.
piteto
@piteto
Sep 28 2017 23:37
the code in your gist is missing some elements, like the navbar toggle button
Jorge
@OrangeKulture
Sep 28 2017 23:38
is this how it's supposed to look? Pen
i usually code navbars from scratch .. bootstrap 4 pissed me off a little bit
piteto
@piteto
Sep 28 2017 23:41
they changed so much....and took like 3 years to build it
Jorge
@OrangeKulture
Sep 28 2017 23:42
yeah .. i guess it's a matter of preference, but eventually I'm going to have to sit down and read the docs so I can start using v4
piteto
@piteto
Sep 28 2017 23:43
@NerdyNerves Here's a fork of your code using Bootstrap 4 Beta: Codepen: https://codepen.io/anon/pen/veZBJV?editors=1001
Another thing I noticed is you're nesting containers inside of containers, which is not allowed
piteto
@piteto
Sep 28 2017 23:45
huh, handn't thought about that :) thanks @OrangeKulture
CamperBot
@camperbot
Sep 28 2017 23:45
piteto sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 468 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Sep 28 2017 23:45
in any case, you promised a screenshot, we are counting on that screenshot! :D
piteto
@piteto
Sep 28 2017 23:45
haha
codepen's promise not mine
Dominique Rollins
@NerdyNerves
Sep 28 2017 23:46
Wow... so I think maybe I copied the alpha file. Let me see if I can replicate. Thank you @piteto and @OrangeKulture
CamperBot
@camperbot
Sep 28 2017 23:46
nerdynerves sends brownie points to @piteto and @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 163 | @piteto |http://www.freecodecamp.com/piteto
:cookie: 469 | @orangekulture |http://www.freecodecamp.com/orangekulture
piteto
@piteto
Sep 28 2017 23:46
you were also missing the collapse elements + classes and they changed a few things between alpha and beta
Jorge
@OrangeKulture
Sep 28 2017 23:53
@NerdyNerves welcome!