Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
View GitHub Profile
@WebReflection
WebReflection / heydonworks.md
Last active Dec 1, 2020
A privileged answer to a well known issue.
View heydonworks.md

This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.

The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.

However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".

That being said, as an exercise to see if I could surf it via JS, I've created this ti

View lru-map.js
// Least Recently Used
class LRUMap extends Map {
constructor(length) {
super().length = length;
}
_(key) {
const value = super.get(key);
super.delete(key);
super.set(key, value);
return value;
@WebReflection
WebReflection / attr.js
Created Nov 19, 2020
A dataset like behavior for any attribute
View attr.js
const proxies = new WeakMap;
const hyphen = name => name.replace(/([a-z])([A-Z])/g, '$1-$2');
const handler = {
get: (el, name) => el.getAttribute(hyphen(name)),
set: (el, name, value) => {
el.setAttribute(hyphen(name), value);
return true;
}
};
const set = el => {
@WebReflection
WebReflection / wm-inheritance.js
Last active Nov 17, 2020
WeakMap VS root classes
View wm-inheritance.js
WeakMap.prototype.hasInherited = function hasInherited(obj) {
let found = false;
while (obj && obj !== Object.prototype && !(found = this.has(obj)))
obj = Object.getPrototypeOf(obj);
return found;
};
WeakMap.prototype.setInherited = function setInherited(obj, value) {
let ref = obj;
while (ref && ref !== Object.prototype) {
View async-await.md

async / return await explained

This is yet another explanation of why async and return await is pointless, coming from this post.

// async means that this:
const fn = async (...args) => {/* stuff */};

// is basically the equivalent of this:
View useSWR.md

What's SWR?

It's React Hooks for Remote Data Fetching, a hook designed to render data on demand.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);
@WebReflection
WebReflection / uce-vs-lit-element.md
Last active Oct 15, 2020
A very simple comparison table between uce and lit-element.
View uce-vs-lit-element.md

uce vs lit-element

A very simple comparison table between these two libraries.

uce lit-element
version 1.11.9 2.4.0
license ISC (simplified MIT) BSD-3-Clause License
language JS w/ TS definition TS w/ JS transpilation
size ( brotli ) 9437b ES5 / 6811b ES2015+ 8634b ES5 / 6708b ES2015+
@WebReflection
WebReflection / electroff-oled.html
Last active Jul 11, 2020
Electroff Oled Example
View electroff-oled.html
<!DOCTYPE html>
<html lang="en">
<head>
<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
WebReflection / fe-vs-be.md
Last active Oct 28, 2020
Front End vs Back End in a nutshell.
View fe-vs-be.md

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) {
You can’t perform that action at this time.