Skip to content

Instantly share code, notes, and snippets.

@jfmdev
jfmdev / flex-utilities.css
Created May 8, 2024 01:36
Flexbox utility classes
/* --- Display --- */
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
@jfmdev
jfmdev / pie-chart-web-component.md
Last active September 4, 2023 12:19
A web component to display pie charts

Pie Chart web component

A web component for display simple pie charts.

The component accepts four attributes:

  • backcolor: a string indicating the color of the background (by default light gray).
  • forecolor: a string indicating the color of the slide (by default dark gray).
  • size: a number indicating the size, in pixels, of the chart (by default the chart takes all available space).
  • value: a number between 0 and 100 indicating the size of the foreground slide (by default 35).
@jfmdev
jfmdev / cancelable-promises.md
Last active November 1, 2023 23:10
Javascript functions to create cancelable Promises

Cancelable promises

Sometimes it's need to cancel a promise, i.e. to stop the execution of the underlying action (and force the associated handlers to be invoked).
However, by design, promises don't offer this feature because most asynchronous actions can't be canceled nor stopped once started (for example, although you can abort an AJAX request, there is no guarantee that the server won't execute the request anyway).

Nevertheless, a common workaround used to achieve a cancel-like behavior is to invoke the promise's handlers before the associated asynchronous action has finished, and later (when the action finish) discard the action's result.
This workaround is useful mainly for read actions (like GET requests), that don't modifies data (since ignoring the result of write actions might produce unexpected results).

For example, let's say there is a single-page application that displays tabs whose content is loaded dynamically using AJAX. If an user clicks on a tab and then, before the tab's con