Skip to content

Instantly share code, notes, and snippets.

View nucliweb's full-sized avatar

Joan León nucliweb

View GitHub Profile
// Credit to Michal Mocny (https://twitter.com/mmocny)
//
// Copy and paste this into the console and click around to see all interactions, whether they would pass INP,
// and if you expand the entry you'll see the debug breakdown information.
//
// This is basically the same as the Core Web Vitals extension does: https://web.dev/debug-cwvs-with-web-vitals-extension/
const valueToRating = (score) => score <= 200 ? 'good' : score <= 500 ? 'needs-improvement' : 'poor';
const COLOR_GOOD = '#0CCE6A';
@malchata
malchata / inp-logging.js
Created May 2, 2023 14:18
Log INP details in the console
// Credit to Michal Mocny (https://twitter.com/mmocny)
let worstInp = 0;
const observer = new PerformanceObserver((list, obs, options) => {
for (let entry of list.getEntries()) {
if (!entry.interactionId) continue;
entry.renderTime = entry.startTime + entry.duration;
worstInp = Math.max(entry.duration, worstInp);
let i = document.querySelector('input.waterfall-transparency');
let up = true;
i.value = parseFloat(i.min);
i.dispatchEvent(new Event('change'));
function animate() {
const curr = parseFloat(i.value);
const max = parseFloat(i.max);
const min = parseFloat(i.min);
const step = parseFloat(i.step);
i.value = up ? curr + step : curr - step;
@PaulJuliusMartinez
PaulJuliusMartinez / record-screen-timelapse.rb
Created April 8, 2022 16:58
Simple macOS script for taking screenshots every X seconds on multiple displays
#! /usr/bin/env ruby
require 'time'
def usage
puts "USAGE: ./record-timelapse every 10 displays 1,2"
end
if ARGV[0] != "every" || ARGV[2] != "displays"
usage
@giacomozecchini
giacomozecchini / bfcachetest.js
Last active April 21, 2022 06:55
This script checks if a page is bfcache eligible and prints reasons if it isn't. It can be easily modified to check multiple pages.
// This script checks if a page is bfcache eligible and prints reasons if it isn't.
// It can be easily modified to check multiple pages.
// Chrome crbug: https://bugs.chromium.org/p/chromium/issues/detail?id=1312486
// Puppeteer issue: https://github.com/puppeteer/puppeteer/issues/8182
const puppeteer = require('puppeteer');
(async () => {
// Configuring and launching the browser
/*
* Mando pasadiapositivas (siguiente y anterior) por
* bluetooth, usando dos botones del Lolin32 (ESP32)
*/
#include <Bounce2.h>
#include <BleKeyboard.h>
#define PREV_GPIO 4
#define NEXT_GPIO 23
@sts10
sts10 / rust-command-line-utilities.markdown
Last active November 16, 2024 15:08
A curated list of command-line utilities written in Rust

A curated list of command-line utilities written in Rust

Note: I have moved this list to a proper repository. I'll leave this gist up, but it won't be updated. To submit an idea, open a PR on the repo.

Note that I have not tried all of these personally, and cannot and do not vouch for all of the tools listed here. In most cases, the descriptions here are copied directly from their code repos. Some may have been abandoned. Investigate before installing/using.

The ones I use regularly include: bat, dust, fd, fend, hyperfine, miniserve, ripgrep, just, cargo-audit and cargo-wipe.

  • atuin: "Magical shell history"
  • bandwhich: Terminal bandwidth utilization tool
@ChevyRay
ChevyRay / qoi.rs
Created November 24, 2021 22:49
QOI - Quote OK Image Format (Rust Port)
const INDEX: u8 = 0x0;
const RUN_8: u8 = 0x40;
const RUN_16: u8 = 0x60;
const DIFF_8: u8 = 0x80;
const DIFF_16: u8 = 0xc0;
const DIFF_24: u8 = 0xe0;
const COLOR: u8 = 0xf0;
const MASK_2: u8 = 0xc0;
const MASK_3: u8 = 0xe0;
@JoseJPR
JoseJPR / rxjs-custom-observable-and-operators.js
Last active September 19, 2021 06:57
🏗️ How to create Custom Observable and Operators with RxJS and Node.js. 👀 With this example I want to show how you can generate custom Observables and Operators with RxJS and Node.js.
/**
* Title: How to create Custom Observable and Operators with RxJS and Node.js.
*
* Description: With this example I want to show how you can generate custom
* Observables and Operators with RxJS and Node.js.
*/
import { Observable } from 'rxjs';
import { request } from 'undici';
@tkadlec
tkadlec / perf-diagnostics.css
Last active August 17, 2024 19:33
CSS used to highlight potential performance issues
:root {
--violation-color: red; /* used for clear issues */
--warning-color: orange; /* used for potential issues we should look into */
}
/* IMAGES */
/*
* Lazy-Loaded Images Check
* ====