Skip to content

Instantly share code, notes, and snippets.


Andrea Giammarchi WebReflection

View GitHub Profile
WebReflection / electroff-oled.html
Last active Jul 11, 2020
Electroff Oled Example
View electroff-oled.html
<!DOCTYPE html>
<html lang="en">
<title>Oled Update</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script type="module">
import CommonJS from '/electroff?module';
// works within an async closure, ofering some utils
WebReflection /
Last active Jun 24, 2020
Front End vs Back End in a nutshell.

FE vs BE

TL;DR enough of this kind of nonsense

I've been in the field for ~20 years and started as BE developer, and this is a reference for people thinking that because they are on the BE side, they're somehow entitled to:

  • earn more money
  • feel superior about FE developers
  • joke about JavaScript or minimize the FE effort in any way
View BlueJeansParticipants.js
// it notifies about the highest peak, and it logs it in console
// it also saves it to the window.participants property
(function () {
var max = 0;
var timer = 0;
var target = document.querySelector('[type="participants"]');
var Notification = self.Notification || {permission: 'denied'};
(new MutationObserver(() => {
var now = Math.max(parseInt(target.innerText.trim()), max);
if (max < now) {
WebReflection /
Last active Jun 18, 2020
Testing various CDN/Static files server on Raspberry Pi and others (ArchLinux here)
#!/usr/bin/env bash
echo ""
echo "benchmarking $(tput bold)$1$(tput sgr0)"
echo ""
case $1 in
nginx )
sudo systemctl start nginx.service ;;
express )
WebReflection /
Last active Jun 11, 2020
Markdown UX shenanigans

The following represents this typing:

1. this is parent
  1. this is child 1

* this is parent
  * this is child 1
WebReflection /
Last active May 15, 2020
A basic way to make any element accessible and anchorable on any page.

Anchorable Headers / Elements

Passing any element through this function, will make it navigable via keyboard.

function anchorAble(e) {
  /*! (c) Andrea Giammarchi - ISC */
  if ('currentTarget' in e) {
    if (/^(?:32|13|undefined)$/.test(e.keyCode)) {
WebReflection / hooked-style.js
Created Apr 27, 2020
A way to inject once per selector global styles, for more portable components.
View hooked-style.js
import {define as hookedDefinition} from 'hooked-elements'; // or wicked-
import css from 'ustyler';
export const define = (selector, definition) => {
// let the library throw on duplicated selectors
const result = hookedDefinition(selector, definition);
// add styles for this selector
if ( css(;
// return the wicked/hooked magic 🌈
return result;
View properties.css
/* CSS properties: a (probably horrible) @webreflection idea */
body, body *:not(script):not(style),
body::before, body *:not(script):not(style)::before,
body::after, body *:not(script):not(style)::after
--align-content: initial;
align-content: var(--align-content);
--align-items: initial;
align-items: var(--align-items);
--align-self: initial;
View weak-value.js
class WeakValue extends Map {
#registry = new FinalizationRegistry(key => {
if (this.has(key) && !this.get(key).deref())
get(key) {
const value = super.get(key);
return value && value.deref();
set(key, value) {
View abort-controller-dance.js
class Signal extends EventTarget {
#aborted = false;
constructor(controller) {
// one of those cases where unreachable listener
// is actually desired 'cause it's more secure
this.addEventListener('abort', event => {
if (event.detail !== controller)
You can’t perform that action at this time.