Skip to content

Instantly share code, notes, and snippets.

View nucliweb's full-sized avatar

Joan León nucliweb

View GitHub Profile
@nucliweb
nucliweb / async-defer-module.md
Created May 21, 2024 19:54 — forked from jakub-g/async-defer-module.md
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@nucliweb
nucliweb / rust-command-line-utilities.markdown
Created September 6, 2023 19:20 — forked from sts10/rust-command-line-utilities.markdown
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
@nucliweb
nucliweb / ffmpeg-mp4-to-animated-webp.md
Created August 10, 2023 05:24 — forked from witmin/ffmpeg-mp4-to-animated-webp.md
Convert MP4 file to animated WebP in ffmpeg

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation:

@nucliweb
nucliweb / CumulativeLayoutShiftBookmarklet.js
Last active February 13, 2023 07:53 — forked from anniesullie/CumulativeLayoutShiftBookmarklet.js
Bookmarklet for showing Cumulative Layout Shift
/**
* A bookmarklet for viewing shifted elements while debugging
* Cumulative Layout Shift (web.dev/cls). Works in Chrome 84+
* Shows the previous position of shifted elements in yellow,
* and the new position in red.
*
* To install:
* 1. Copy the code starting from the line beginning `javascript:`
* 2. Add a new bookmark in Chrome, and paste the code in as the URL.
**/
@nucliweb
nucliweb / download_all_branches.sh
Created September 18, 2022 17:47 — forked from doulmi/download_all_branches.sh
Download All branches
#!/bin/bash
set -x #echo on
remote_url=$(git config --get remote.origin.url)
for branch in $(git branch --all | grep '^\s*remotes' | egrep --invert-match '(:?HEAD|master)$'); do
branch_name=$(echo $branch| cut -d'/' -f 3)
git clone -b $branch_name $remote_url $branch_name
done
@nucliweb
nucliweb / Resource Hints
Created September 10, 2021 09:34 — forked from droom/Resource Hints
Hints to the browser that might prime the pump for resources you will need. PreLoad is the only exception here, being more of an instruction than just a hint.
by Addy Osmani (@addyosmani)
https://twitter.com/addyosmani/status/743571393174872064
———
Preresolve DNS hostnames for assets
<link rel="dns-prefetch" href="https://my-site.com">
Begin a connection handshake in the background
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@nucliweb
nucliweb / custom-metrics.js
Created June 15, 2020 06:34 — forked from addyosmani/custom-metrics.js
custom-metrics.js
[lcp]
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;
[cls]
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);
@nucliweb
nucliweb / meta-tags.md
Created April 3, 2020 07:07 — forked from whitingx/meta-tags.md
Complete List of HTML Meta Tags

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>
@nucliweb
nucliweb / index.html
Created October 19, 2018 07:30 — forked from yuanchuan/index.html
Alien land
<css-doodle>
:doodle {
@grid: 20x1 / 60vmin;
overflow: hidden;
}
:container {
transform: scale(25);
filter: @svg-filter(<svg>
<filter>
<feTurbulence baseFrequency="@r(.016, .056, .001)" seed="@r(100)" numOctaves="@r(8, 15)" />
@nucliweb
nucliweb / getAverageColourAsRGB.js
Created January 21, 2018 13:46 — forked from olvado/getAverageColourAsRGB.js
Get the average colour of an image in javascript using getImageData in CANVAS
function getAverageColourAsRGB (img) {
var canvas = document.createElement('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
rgb = {r:102,g:102,b:102}, // Set a base colour as a fallback for non-compliant browsers
pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
count = 0,
i = -4,
data, length;
// return the base colour for non-compliant browsers