Latest tips / 10

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:

The Array.from function has a second parameter that lets you map each item to a new value.

The first argument of the map function is the current value or undefined if you don't have an existing list (as in the example below). The second argument is the index.

const items = Array.from({ length: 5 }, (value, idx) => idx + 1);
console.log(items); // [1, 2, 3, 4, 5]

A newly created Git repo (git init) has a default branch with the name master. You can configure that name for all new repositories with the following command:

git config --global init.defaultBranch main

Now every new Git repository will automatically create a branch main instead of master.