The .every method i discovered today

Looking on react-redux example i found the following line:

  if (user && requiredFields.every(key => user.hasOwnProperty(key))) {
    console.log('no need to call "fetch"')
    return null
  }

Notice the usage of "every" statement.

Every

So, what is the advantage of "every"?
consider you have the following array:

const arr = [{name:'yoyo', active:true}, {name:'momo', active:true}, {name:'bobo', active:false}]

How can you quickly know if all users are active?
So, you can loop through the array with "forEach", like this

let everybodyIsActie = true;
arr.forEach(user => {
   if(!user.active) { // if even one is not active
     everybodyIsActie = false;
   }
})
if(everybodyIsActie) {
 console.log('everybody dance now!')
}

But, much more awesome is to use "every" statement:

if(arr.every(user => user.active)) {
 console.log('everybody dance now!')
}

No need to use any variables
Unlike "forEach" (which doesnt returns enything) "every" returns true if every array item fills the condition
See you in my next post!

Playing With Css Grid - Part 2

One of most interesting features of CSSGrid - is
grid-template-areas feature. It makes you able to define layout areas and to associate the HTML element with specific layout parts.
Lets try to build following layout with css grid:

First lets divide the layout to the parts that will explain how much rows and columns each element will occupy:

.container{
  ...
  grid-template-areas:
      "nav header"
      "nav main"
      "nav footer";
}

Now We only need to 'explain' to each element - what the area it should belong to:

header{
  grid-area:header;
}

Clear and simple: