All the New ES2019 Tips and Tricks

Reference

• Object.entries: Translates an object into its array representation. These can then make the objects use Array methods such as map, filter, and reduce.

let students = {
  amelia: 20,
  beatrice: 22,
}

Object.entries(students)
// [
//  [ 'amelia', 20 ],
//  [ 'beatrice', 22 ],
// ]

• Object.fromEntries: Turns multidimensional array back into an object. Problem is, switching back causes a data loss.
• Array.prototype.flat: Flattens, with an optional argument of depth. (Default depth is one (!)). Can use Infinity as argument to ensure always flattening. No support in IE.
• Array.prototype.flatMap: Does a map, then flattens once. No support in IE.
• String.trimLeft and String.trimRight to make things more explicit. No support in IE.
• Arguments in try-catch blocks are now optional.
• function.toString() now shows the function representation in source code.

Sass Maps

Reference

$variable: (
  key1: value1,
  key2: value2,
  key3: value3
);

$colors: (
  black: #000,
  white: #fff
);

a {
  color: map-get($colors, white);
  background: map-get($colors, black);
}

• Abstract with function over:

@function color($color-name) {
  @return map-get($colors, $color-name);
}

a {
  color: color(white);
  background: color(black);
}

• Requires Sass >= 3.3.

Organizing z-index with Sass

Reference

• You can use the maps data type in Sass to keep track of your z-index by having them all in one place.

$z-index: (
  modal              : 200,
  navigation         : 100,
  footer             : 90,
  triangle           : 60,
  navigation-rainbow : 50,
  share-type         : 41,
  share              : 40,
);

• The key is to never a declare a z-index value in the CSS itself, but instead add another key-value pair to your map.
• Custom function + mixin to solve z-indexes.
• Then add a file just for storing the z-index map.

@function z-index($key) {
  @return map-get($z-index, $key);
}

@mixin z-index($key) {
  z-index: z-index($key);
}

.navigation {
  @include z-index(navigation);
}

• Maps are already in use in Bootstrap.