Latest tips / 10

The Array.map() function allows to to map each value of an array to a new value. If you want to map an object - its keys, values or both - you can use Object.entries() and Object.fromEntries() to convert the object to an array and back to an object.

The Object.entries() function expects an object and returns an array with key-value pairs in the form of an array [key, value]. Then you can use Array.map() to map the keys and/or values.

The transformed array can be converted back to an object by using Object.fromEntries().

// 1. Create an object
const obj = { one: 1, two: 2, three: 3 };

// 2. Convert the object to an array of key-value pairs
const entries = Object.entries(obj);
// [ ["one", 1], ["two", 2], ["three", 3] ]

// 3. Map the array to new keys or values
const transformed = entries.map(([key, value]) => {
  // Change the value to a string and add leading zeros
  return [key, value.toString().padStart(3, "0")];
});

// 4. Convert the transformed array back to an object
const finalResult = Object.fromEntries(transformed);
// { one: "001", two: "002", three: "003" }

The Angular :host-context() selector allows you to style your component based on some conditions outside the component - for example based on a class set on the body element - without the need to set view encapsulation to none.

The selector will look for a matching element in any ancestor of your component up to the document root.

:host-context(.dark-theme) .my-component {
  /* Styles are applied when there is a 
     "dark-theme" class on any ancestor */
}

This is not limited to CSS class selectors but works with any valid CSS selector.

:host-context([theme="dark"]) .my-component {
  /* Styles are applied when there is an ancestor
     that has an attribute theme="dark" */
}

If you have a ul element in your HTML and you set list-style: none via CSS (via inline styles, a style tag or an external stylesheet), your list will not be announced as a list anymore with VoiceOver + Safari on macOS.

<!-- VoiceOver + Safari will not announce this as a list -->
<ul style="list-style:none">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Add the role attribute to the ul element to fix this behavior.

<!-- VoiceOver + Safari will now announce the list -->
<ul role="list" style="list-style:none">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Alpine.js uses the x- prefix for directives by default (e.g. x-if). This prefix can be customized using Alpine.prefix().

Alpine.prefix("xyz-"); // Define your custom prefix
Alpine.start();

<!-- Use your custom prefix for all directives -->
<template xyz-if="user">
  <a xyz-bind:href="user.profileUrl" xyz-text="user.name"></a>
</template>

This can be useful to prevent clashes when integrating Alpine into existing apps / markup or to get valid HTML markup that passes the W3C validator by using data-x- as prefix.

The rotate function of the CSS transform property supports the turn unit. This can be used as an alternative to deg. 360 degrees correspond to 1 turn.

.element {
  /* Instead of degrees ... */
  transform: rotate(90deg);

  /* ... you can use turn */
  transform: rotate(0.25turn);
}

Let's see it in action: