Skip to content

Instantly share code, notes, and snippets.

View WebReflection's full-sized avatar
🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
2.2k followers · 2 following
View GitHub Profile
@WebReflection
WebReflection / useSWR.md
Last active April 30, 2022 04:14

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 January 8, 2024 07:16
A very simple comparison table between uce and lit-element.

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 August 17, 2022 04:05
Electroff Oled Example
<!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 March 27, 2021 19:51
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
@WebReflection
WebReflection / BlueJeansParticipants.js
Created June 18, 2020 14:04
// 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
WebReflection / jellyfish-cdn.sh
Last active June 18, 2020 09:11
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
WebReflection / shenanigans.md
Last active June 11, 2020 18:28
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
WebReflection / anchor-able.md
Last active November 29, 2020 17:27
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)) {
      e.preventDefault();
@WebReflection
WebReflection / hooked-style.js
Created April 27, 2020 14:37
A way to inject once per selector global styles, for more portable components.
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 (definition.style) css(definition.style);
// return the wicked/hooked magic 🌈
return result;
@WebReflection
WebReflection / properties.css
Created April 21, 2020 08:00
/* 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;