Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
Block or report user

Report or block WebReflection

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View abort-controller-dance.js
class Signal extends EventTarget {
#aborted = false;
constructor(controller) {
super();
// one of those cases where unreachable listener
// is actually desired 'cause it's more secure
this.addEventListener('abort', event => {
if (event.detail !== controller)
event.stopImmediatePropagation();
else
View abort-controller-dance.js
class Signal extends EventTarget {
#aborted = false;
#controller = null;
constructor(controller) {
super();
this.#controller = controller;
this.addEventListener('abort', this);
}
handleEvent(event) {
if (event.detail !== this.#controller)
View fancy-idl-indeed.js
customElements.define('any-element', class extends Element {
get data() {
return this.dataset;
}
set data(value) {
// more or less this operation, but previously known keys,
// not found in value, should be dropped from the dataset
Object.assign(this.dataset, value);
}
get aria() {
@WebReflection
WebReflection / dom-libraries.md
Last active Apr 4, 2020
A recap of my FE / DOM related libraries
View dom-libraries.md

My FE/DOM Libraries

a gist to recap the current status

Minimalistic Libraries

do one thing only and do it well

  • µhtml (HTML/SVG auto-keyed and manual keyed render)
  • augmentor (hooks for anything)
  • wickedElements (custom elements without custom elements ... wait, what?)
@WebReflection
WebReflection / handle-event-doodle.md
Last active Feb 27, 2020
The `handleEvent` ASCII doodle
View handle-event-doodle.md

About This Gist

This gist summarizes the handleEvent(event) pattern features, something standard, something described by me many times, written in my tiny book, tweeted about, and yet it's something most Web developers ignore.

The handleEvent ASCII Doodle

                  ┌---------------------------------┐
var handler = {   | any object that inherits or     |
@WebReflection
WebReflection / local-storage-vs-compression.js
Created Feb 19, 2020
A benchmark to see how many items can be stored using WebCompressor
View local-storage-vs-compression.js
const findLimit = async (type, create) => {
console.log(
`%c ${type} benchmark `,
`font-weight:bold;color:white;background-color:black`
);
localStorage.clear();
let i = 0;
let length = 0;
while (true) {
try {
View how-to-file-a-github-issue.md

How to file a GitHub/Lab issue

helping each others


Original Medium post


Filing an issue is not about delegating your problem to another developer, it’s about helping maintainers solve issues they haven’t encountered yet.

View static.email.public.index.recaptcha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>A Static Email Form Example + reCAPTCHA</title>
<link rel="stylesheet" href="css/index.css">
<script defer src="//unpkg.com/static.email"></script>
<script defer src="js/index.js"></script>
<!-- this script, after all others, will bring in reCAPTCHA -->
View static.email.public.js.index.recaptcha.js
// nullify the global reference while instrumenting the form
StaticEmail = (function (StaticEmail) {
// we don't know when window.recaptcha will be called,
// so we use a promise to simplify our workflow
var captcha = new Promise(function (resolve) {
window.recaptcha = function () {
// resolve passing the widget id along
resolve(
grecaptcha.render('recaptcha', {
// the SITE KEY reCAPTCHA provided
View static.email.public.js.index.js
// nullify the global reference while instrumenting the form
StaticEmail = (function (StaticEmail) {
contact.addEventListener('submit', function (event) {
event.preventDefault();
var from = contact.from.value.trim();
var md = contact.md.value.trim();
if (from && md) {
contact.submit.disabled = true;
StaticEmail({
path: '/api/paperboy',
You can’t perform that action at this time.