fpapado

import {useLayoutEffect, useState} from 'react';

/**
 * React Hook to measure a DOM element and set its `position` depending on
 * whether it would overflow left or right.
 *
 * Uses useLayoutEffect for batched DOM measurements and painting.
 *
 * @param toggle a boolean on whether to run the effect. Runs cleanup when it changes.
 * You might want a toggle if the element is always present in the DOM, and its display toggled.

fpapado

---js
{
  pagination: {
    // Go over the roaster data
    data: "roasters",
    // Convert the list of roaster to {[state]: {name: string, roasters: Array<Roaster>}}
    // (You could do without the {name, roasters} and only have data, but then the iteration is uglier imo)
    before: function(roasters) {
      let roastersByState = {};
      for (let roaster of roasters) {

fpapado

Validating URLs is hard! On the face of it, you could use a RegEx to match on the URL structure, but that is likely only going to match a narrow subset of URLs, whether intentionally or accidentally.

Beyond having a "valid" URL, an application might be applying extra conditions on top. For example, accepting only http: or https: URLs, but not file: and others. This might be ok depending on the application, but knowing that takes some active design work to figure out. For the purpose of handling user errors, and offering suggestions, it also helps to know in what manner the URL failed validation. For example, we might be able to offer precise suggestions for our application-specific errors, while general URL parsing issues can be out of scope.

To make life easier, let's separate the term "valid" and "invalid" into a few different ones:

• Valid URL: a URL that can be parsed successfully according to the standard (which, uhm, I am reluctant to dive into, or rather I feel unqualified to give you an overvi

fpapado

Find the full post on fotis.xyz

:focus-visible is a standard way of only showing focus styles for keyboard and focus-based modalities. When using it, however, you must take care to not remove :focus altogether, where :focus-visible is not supported.

With CSS, we can achieve progressive enhancement of :focus to :focus-visible:

/* Styles where only focus is supported */
button:focus,

fpapado

Installation

To install this stylesheet, you will need a userstyle extension. For example:

• Stylus for Firefox, Chrome or Opera.
  
• xStyle for Firefox or Chrome.

Then, you will need to open the link below, which the extension will pick up and prompt you to install: