These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Jun 2018
Stephen
@stephepush
Jun 20 2018 00:02
@Abott1222 I think we have to wait for someone to invent that wheel (python via web assembly)
unless that already happened. I assume you have to start from scratch? Web Assembly C then Web Assembly python, lol?
This es6 exercise... I dont even think it knows what it's doing:
const source = [1,2,3,4,5,6,7,8,9,10];
function removeFirstTwo(list) {
  "use strict";
  // change code below this line
  arr = list; // change this
  // change code above this line
  return arr;
}
const arr = removeFirstTwo(source);
console.log(arr); // should be [3,4,5,6,7,8,9,10]
console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];
abraham anak agung
@padunk
Jun 20 2018 00:27
@stephepush you have to remove first two elements in array without mutating the original array. I think you can use .slice for that
Alexander R Bott
@Abott1222
Jun 20 2018 01:40
@stephepush haha I know it is early... I just watched this: https://www.youtube.com/watch?v=ITksU31c1WY
Stephen
@stephepush
Jun 20 2018 03:29
@padunk I thought the whole point was to not use slice and to instead use destructuring assingments in lieu of something that slice can easily do
@Abott1222 Haven’t watched the video but I look forward to the day that you can make web pages with python… jeesh
anthonygallina1
@anthonygallina1
Jun 20 2018 03:34
:)
Simon Cordova
@gbsimon87
Jun 20 2018 07:53
var state = {
    currentPlayer: '',
    teamRoster: [
        { name: 'GB', age: 30, location: 'London'},
        { name: 'Maren', age: 36, location: 'London'},
        { name: 'Daniel', age: 31, location: 'Toronto'},
    ]
}
Hey all, was wondering if anyone could offer some insight, I think I'm on the right track using Object.keys and map, but can't quite achieve it.
I've got an object, which one of the keys is an array of objects.
I need to get into one specific key and change the properties there...
For example, I'd like to click a button in the DOM which will increase age for the name 'GB'
mpmaan
@mpmaan
Jun 20 2018 07:57
let oldAge = state.teamRoster[0].age ;
state.teamRoster[0].age = oldAge + incrementCount;
this might work
Simon Cordova
@gbsimon87
Jun 20 2018 08:00
@mpmaan The thing is I can't use a number index, I need to find the index by the name value
mpmaan
@mpmaan
Jun 20 2018 08:05
let nameToFind = 'GB';
let total = state.teamRoster.length;
for(let i = 0; i < total; i++){
    if(nameToFind === state.teamRoster[i].name){
       let oldAge = state.teamRoster[i].age ;
      state.teamRoster[i].age = oldAge + incrementCount;
      break;
    }
}
try this
once a name is matched , it will update the age and break the loop
Simon Cordova
@gbsimon87
Jun 20 2018 08:12
@mpmaan thank you very much I will give that a shot :)
mpmaan
@mpmaan
Jun 20 2018 08:13
how do you get name by clicking button?
Simon Cordova
@gbsimon87
Jun 20 2018 08:13
It's in React, so I'll be saving the currently clicked player's name in the state
PS: That code worked well ;)
mpmaan
@mpmaan
Jun 20 2018 08:14
ok..i don't know react
Simon Cordova
@gbsimon87
Jun 20 2018 08:15
All good, this really helped me out, I truly appreciate it
I was overcomplicating it trying to use Object.keys, map, and reduce
mpmaan
@mpmaan
Jun 20 2018 08:15
can you tell me where to learn react apart from fcc
i like to use inbuilt functions as few times as possible
Vladislav Ivanov
@developer4eto
Jun 20 2018 08:42
@mpmaan you can check the react site - https://reactjs.org/
Simon Cordova
@gbsimon87
Jun 20 2018 09:00
@mpmaan the youtube channel academind has some great content to get you started, using ES6 as well
In my opinion, from all the studies I've done, as @developer4eto mentioned, the React docs, and that channel, are some of the best free resources I've found out there
mpmaan
@mpmaan
Jun 20 2018 09:36
thanks @developer4eto , @gbsimon87
Vladislav Ivanov
@developer4eto
Jun 20 2018 09:50
@mpmaan no problem
Stephen James
@sjames1958gm
Jun 20 2018 10:08

@gbsimon87

state = { ..state, teamRoster.map(r => (r.name !== nameToFind ? r : { ...r, age: r.age + incrementCount }))}

If you don;'t want to mutate the existing state

Alexandar B
@ace1122sp
Jun 20 2018 10:22
hey guys.. is it considered a bad practice to put an expression in place of object's property value? Which is a better approach? Does it matter?
// Approach A
let obj = {
  totalPoints: someFunction(32)
}

// Approach B
let calculatedValue = someFunction(32);
let obj = {
  totalPoints: calculatedValue
}
Aditya
@ezioda004
Jun 20 2018 10:33
@ace1122sp I think Approach A is better because it follow Principle of least privilege and the data is encapsulated so less chance of global conflict.
Stephen James
@sjames1958gm
Jun 20 2018 11:00
@ace1122sp I also prefer approach A as you don't have to create a variable that is only used once.
Alexandar B
@ace1122sp
Jun 20 2018 11:50
@ezioda004 @sjames1958gm thanks guys.. yeah, i also like A more than B, but I wasn't sure.. :+1:
Rob
@PGFracing
Jun 20 2018 13:53
on desktop I’m trying to get the video to the right of the other video http://www.pgfracing.com/newsite.html not sure what’s up
Rob
@PGFracing
Jun 20 2018 14:07
how do i get rid of the white space between the left big video and the right videos? www.pgfracing.com/newsite.html ?
mpmaan
@mpmaan
Jun 20 2018 14:08
<div class="row"><div class="col-md-6"style="padding-left: 0px; padding-top: 10px; padding-right: 10px;> there is no closing " for the style tag
are you using some framework?
Rob
@PGFracing
Jun 20 2018 14:08
mmm I got rid of that should look like this now
<div class="main-container">

        <!-- ROW 1 HEADER -->
        <div class="header-container">
            <div class="row">
                <div class="col-6">
                    <div class="embed-responsive embed-responsive-16by9">
                    <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen></iframe>
                    </div>
                </div>    

                <div class="col-6">
                    <div class="col-6">
                        <div class="embed-responsive embed-responsive-16by9">
                        <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen></iframe>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="embed-responsive embed-responsive-16by9">
                        <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen></iframe>
                        </div>
                    </div>    

                </div>    


            </div>        
        </div>            
    </div>
mpmaan
@mpmaan
Jun 20 2018 14:10
do you want to get rid of space in between or on the right of the last column?
Rob
@PGFracing
Jun 20 2018 14:11
okay I got rid of the gap, www.pgfracing.com/newsite.html but not sure why the bottom video isn’t going up to the top row?
mpmaan
@mpmaan
Jun 20 2018 14:12
second small video should be on right side of first small video?
Rob
@PGFracing
Jun 20 2018 14:12
correct
mpmaan
@mpmaan
Jun 20 2018 14:13
try to give a rowin second column which will contain the other two columns for smaller videos
row
       col
       row
              col
              col
something like this if you can understand
Rob
@PGFracing
Jun 20 2018 14:15
ya I get that but the row won’t float to the left it will be another row then?
mpmaan
@mpmaan
Jun 20 2018 14:16
can you try this?
<div>
    <div class="row">
                    <div class="col-6">
                        <div class="embed-responsive embed-responsive-16by9">
                        <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen=""> 
                               </iframe>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="embed-responsive embed-responsive-16by9">
                        <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen=""> 
                               </iframe>
                        </div>
                    </div>    

                </div>
</div>
Rob
@PGFracing
Jun 20 2018 14:18
that’s just two videos I’m trying to do 3?
mpmaan
@mpmaan
Jun 20 2018 14:19
wait a minute
    <div class="header-container">
            <div class="row">
                <div class="col-6">
                    <div class="embed-responsive embed-responsive-16by9">
                    <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen></iframe>
                    </div>
                </div>    

                <div class="col-6" style="margin-left: -40px;">
                    <div class="row">
                    <div class="col-6">
                        <div class="embed-responsive embed-responsive-16by9">
                        <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen></iframe>
                        </div>
                    </div>

                    <div class="col-6">
                        <div class="embed-responsive embed-responsive-16by9">
                        <iframe src="https://www.youtube.com/embed/tHrZW11XAJw" frameborder="0" allow="autoplay; enypted-media" allowfullscreen></iframe>
                        </div>
                    </div>    

                </div>    
            </div>


            </div>        
        </div>
this is complete
i put a row in <div class="col-6" style="margin-left: -40px;">
you just need to adjust margin now
Rob
@PGFracing
Jun 20 2018 14:23
nice work there :)
mpmaan
@mpmaan
Jun 20 2018 14:23
did it work?
yeah..looking good on website
thanks a BILLION @mpmaan
mpmaan
@mpmaan
Jun 20 2018 14:25
that's what this room is for : HelpFrontEnd
what are you building?
Rob
@PGFracing
Jun 20 2018 14:26
gonna change the layout of my site www.pgfracing.com to be more video based, just working on the layout now
doesn’t look like it works on mobile should stack on top of each other, bummer back to the drawing board
mpmaan
@mpmaan
Jun 20 2018 14:28
i feel like everything is fitted in a small box
Rob
@PGFracing
Jun 20 2018 14:29
ya lol I’ve had that happen before can’t remember how I fixed it
mpmaan
@mpmaan
Jun 20 2018 14:32
for those 6 steps above at your website you can create somethibg like cards..keeping each icon in centre at top with a slightly bigger size and giving some space to text of each card from the icon
Rob
@PGFracing
Jun 20 2018 14:37
got it figured out you helped me get it
thanks @mpmaan
mpmaan
@mpmaan
Jun 20 2018 14:38
:+1:
Rob
@PGFracing
Jun 20 2018 15:25
you were wondering what it was going to be http://www.pgfracing.com/bible.html this is basically it might change a little but again thanks for your help
mpmaan
@mpmaan
Jun 20 2018 15:37
would be better if you could remove horizontal scroll bar
Alexander R Bott
@Abott1222
Jun 20 2018 16:19
@anthonygallina1 I havent heard of webpy yet! Awesome
@anthonygallina1 how are you?
Ali Bulut
@ali27001
Jun 20 2018 17:41
I need to check the login on the server with javascript. How can I send data to the server
corychaise
@corychaise
Jun 20 2018 17:42
I am thinking about using bulma for the front end projects for FCC
Thoughts?
Brad
@bradtaniguchi
Jun 20 2018 17:45
@corychaise Sure why not, but why not something more main-stream tho? I never heard of bulma until now
corychaise
@corychaise
Jun 20 2018 17:48
It is pure CSS, no JS or jQuery so it is appealing in that regard
Christopher McCormack
@cmccormack
Jun 20 2018 17:48
bulma is pretty popular @bradtaniguchi :D
Brad
@bradtaniguchi
Jun 20 2018 17:48
never knew haha
then yea should be fine, please excuse my ignorance :P
Christopher McCormack
@cmccormack
Jun 20 2018 17:49
haha
the responsive web design projects recommend coding the CSS yourself but for frontend I don't think it matters
corychaise
@corychaise
Jun 20 2018 17:52
I want to use bulma for those projects as well. I know how to code CSS,html,JS and Java so I want to try using a framework
spice things up a bit
Christopher McCormack
@cmccormack
Jun 20 2018 17:55
I dunno, I used frameworks for a long time and lately i've been using pure css just to try out stuff I hadn't before. Up to you though
midnitedev101
@midnitedev101
Jun 20 2018 18:23
Hey guys, i finished my dungeon crawler game a while back. Looking for some feedback and some help looking for bugs or whatnot so I can optimize it further. Can you guys help me out? Here's the link: https://codepen.io/qwirkyrabbit/full/ZRBXqz/
@ndburrus. Thanks!
Christopher McCormack
@cmccormack
Jun 20 2018 18:27
@midnitedev101 wow you put a lot of work into that!
@midnitedev101 maybe reduce the amount of blinking, the character blinks, the tile blinks, the current status text blinks
midnitedev101
@midnitedev101
Jun 20 2018 18:42
@cmccormack yeah i did, phew. i did the blinking animation to make the player visually aware of the character, since when i was testing it out initially, it was hard to keep track of the character. As for the text, the blinking is always on the last activity to let the players know the latest action that was taken. I could try testing to slow it down. Thanks @cmccormack
Christopher McCormack
@cmccormack
Jun 20 2018 18:45
@midnitedev101 maybe blink a few times then stay solid a different color? or maybe don't go to 0 opacity, 50% or something instead
midnitedev101
@midnitedev101
Jun 20 2018 18:50
@cmccormack You're right, it looks better: https://codepen.io/qwirkyrabbit/full/zaWqgv/
on 50% opacity
Christopher McCormack
@cmccormack
Jun 20 2018 18:53
@midnitedev101 yeah that looks good
another recommendation - when you hover over a character in character select, maybe keep the text displaying even when you mouseout, until you hover over another character
your canvas also appears to be slightly bigger than the viewport - this this dynamic or static?
midnitedev101
@midnitedev101
Jun 20 2018 18:57
Im not using html canvas. Is that what you mean?
I just scaled the grid at 200% to make it seem larger.
Christopher McCormack
@cmccormack
Jun 20 2018 19:06
Just meant canvas in the generic term
but I would recommend not making a user scroll if they need to get to an edge that's off screen
midnitedev101
@midnitedev101
Jun 20 2018 19:12
hmm. are you using firefox? im using chrome right now and everytime the player moves, it centers on the character thereby making scrolling unnecessary. thats probably what it is.
Christopher McCormack
@cmccormack
Jun 20 2018 19:14
I am and that's a fair point , it does center nicely
midnitedev101
@midnitedev101
Jun 20 2018 19:25
apparently its some issue with the scrollIntoView() function i implemented. it has some issues with firefox. gotta find one of those alternatives, if any :D
Christopher McCormack
@cmccormack
Jun 20 2018 19:27
@midnitedev101 maybe just get rid of the border color and have the game background match your body background so the user doesn't even know
midnitedev101
@midnitedev101
Jun 20 2018 19:28
yeah, ill try that
Christopher McCormack
@cmccormack
Jun 20 2018 19:28
I'd also recommend making the player select static, as clicking then slightly moving the mouse causes the window to move instead of selecting the character
But these are all minor things, it looks good!
midnitedev101
@midnitedev101
Jun 20 2018 19:32
Tested that out. Also, updated Firefox version to 60.0.2 and behavior is now similar to chrome's
Thank you! and thank you very much for helping me improve it!
Christopher McCormack
@cmccormack
Jun 20 2018 19:37
@midnitedev101 no problem!
midnitedev101
@midnitedev101
Jun 20 2018 21:03
For anyone else checking the project, I updated my changes in here: https://codepen.io/qwirkyrabbit/full/ZRBXqz/
Thank you!
Alexander R Bott
@Abott1222
Jun 20 2018 21:38
@midnitedev101 that is legit!
richRocksCodeBlocks
@richRocksCodeBlocks
Jun 20 2018 22:12
@midnitedev101 That's pretty sweet.
Daniel Simeonov
@dbsimeonov
Jun 20 2018 23:20
Guys is there a way I can configure/edit a page for printable/downloadable file. For example - I want to create a grocery list, which to be displayed one way, and printable/downloadable with different styling. Lol hope you can understand what i'm trying
DarkxPunk
@DarkxPunk
Jun 20 2018 23:22
@dbsimeonov Yes
@dbsimeonov Actually yes to printable not to downloadable.
@dbsimeonov At lease not without first converting to printable
Daniel Simeonov
@dbsimeonov
Jun 20 2018 23:24
@DarkxPunk So can it be done with javascript ? About downloadable it might be possible after converting it to printable I think.
Bjorn van de Peut
@bjorno43
Jun 20 2018 23:24
@midnitedev101 Very nice job! Finished the game and now I hate you! :laughing:
DarkxPunk
@DarkxPunk
Jun 20 2018 23:24
@dbsimeonov Nope, you use CSS and @media print
Daniel Simeonov
@dbsimeonov
Jun 20 2018 23:25
@DarkxPunk loool, did not know about that! Something new, thanks will read further !
DarkxPunk
@DarkxPunk
Jun 20 2018 23:26
@dbsimeonov No problem. Bascially whatever is gonna convert it for download just apply the print style sheet first then convert and download
Daniel Simeonov
@dbsimeonov
Jun 20 2018 23:26
Will try to do it once I build it :D Just one of those ideas before bed :D
Bjorn van de Peut
@bjorno43
Jun 20 2018 23:26
@dbsimeonov You could also look at jsPDF: https://github.com/MrRio/jsPDF Which is generating PDF files with Javascript
Daniel Simeonov
@dbsimeonov
Jun 20 2018 23:27
@bjorno43 Amazing, thanks ! @DarkxPunk
DarkxPunk
@DarkxPunk
Jun 20 2018 23:27
@dbsimeonov Sleep well mate
Daniel Slatkin
@DSlatkin
Jun 20 2018 23:34
Hey all. Someone who can help me with a css grid question? :smiley:
Trying to figure out how to make a grid template width be normally content-max of the column as long as it's less than 8em, otherwise it stays at 8em