Skip to content

Instantly share code, notes, and snippets.

View myfonj's full-sized avatar

Michal Čaplygin myfonj

View GitHub Profile

Cascade Layers, a Proposal

A syntax proposal for Cascade Layers #4470. This does not include full discussion of the Cascade Layer purpose and use-cases, which can be found in the various linked issues, but attempts to answer many of the outstanding questions about how we might implement a layering feature.

Collaborators:

  • Elika Etemad
  • Florian Rivoal
  • Miriam Suzanne
  • Tab Atkins Jr.
commit 9f676b29d4a49356e756048ff249d17e552b5faa (HEAD -> master, origin/master)
Author: Gary Bernhardt <[email protected]>
Date: Sun Mar 15 13:36:55 2020 -0700
cache public dir between deploys (note)
Problem:
1. A deploy starts.
2. A browser starts loading a page.
3. The deploy finishes.
@rauschma
rauschma / README.md
Last active December 31, 2019 18:16

Automatically generated result table

const s='##-#';

const r=/#/g; r.lastIndex=1;
r.exec(s)             .index=1       .lastIndex updated  
r.test(s)             true           .lastIndex updated  
s.replace(r, 'x')     "xx-x"         .lastIndex reset    
s.replaceAll(r, 'x')  "xx-x"         .lastIndex reset    
@myfonj
myfonj / 0_html-sandbox-2.0.6.datauri.txt
Last active April 19, 2025 15:58
HTML sandbox - editor in data URI 1176 b, with live preview and persistence.
data:text/html;charset=utf-8;verbatim,<!doctype html><html style="color-scheme:dark light"><title>HTML sandbox 2.0.6</title><meta name=viewport content=width=device-width,initial-scale=1><body style=margin:0;display:flex;height:100vh onload="OT=(DC=document).title,H=(L=location).hash.slice(1)||'',RX=/(^data:.+?(;verbatim)?,)?([^]*)/,A.value=H.match(RX)[2]?H:decodeURIComponent(H)||A.value;T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=()=>{if(W!=(V=A.value))W=V,M=V.match(RX),I.src=M[2]?V:(M[1]||D)+encodeURIComponent(M[3]),DC.title=NT=((TM=V.match(/<title\b[^]*?\x3E([^]*?)<\/title\b/m))&&(NT=TM[1])&&(NT=NT.trim())&&(DC.title=NT+' @ '+OT))||OT};F()"><textarea autocapitalize=off style=resize:horizontal;width:50vw autofocus id=A onkeyup=clearTimeout(T);T=setTimeout(F,400) onblur=try{history.pushState({},NT,'\u0023'+(S=I.src.replace(E,'')))}catch(e){L.hash=S}><!doctype html><html lang="en" style="color-scheme: dark light;">%0A<meta name="viewport" content="width=device-width, initial-scale=1">%0A<title>%

Algorithmic layouts

You are looking at the most important, and most abundant thing on the web. You can't see it, unfortunately, because it's very small… aaaaand it's invisible — so having a magnifying glass doesn't really help here. But still.

I'm talking, of course, about U+0020; not to be confused with the band U2, who are just as ubiquitous, but far less useful.

This unicode point, representing the humble space character, is between every word, in every run of text, on every page of the web. And it has a very special characteristic: it's not sticky like glue. If two words are neighbors but there's not enough room for both of them, the space will free the second word to wrap around and start a new line.

Before getting into flexible containers, viewport meta tags, and @media breakpoints this humble character is what makes the web fundamentally 'responsive'. That is: able to change the layout of its content to suit different devices, contexts, and settings. Browser text does this automa

@jscher2000
jscher2000 / showAsPrint.js
Last active March 26, 2024 10:50
Emulate print media in Firefox 62 (userscript work in progress)
// For Firefox's Web Console, creates the functions showAsPrint() and undoShowAsPrint()
// to roughly emulate print media and revert
function showAsPrint(){
var docSS = document.styleSheets, ss, oldMedia, newMedia, rules;
var p2s = function(media){
if (media.indexOf('all') > -1) return media; //no need to change
if (media == 'print') return 'all, wasprint'; //show on screen, too
if (media.indexOf('print') > -1 && media.indexOf('screen') > -1) return media; //no need to change
if (media == 'screen') return 'wasscreen'; //hide these rules
if (media.indexOf('screen') > -1) return media.replace('screen', 'wasscreen'); //hide these rules
@securityMB
securityMB / scrollbar.md
Created February 24, 2018 23:21
Scrollbar

CSS Scrollbar attack

Image we have the following code:

<script>
var TOKEN="abcdef";
</script>
@xsot
xsot / instructions.md
Last active March 3, 2024 13:42
sed maze solver

Usage

sed -E -f solver.sed input where input is a file containing the maze.

For best results, resize your terminal to match the height of the maze. To disable animations, delete the lines containing p.

Maze format

The solver assumes the following:

  • The maze only contains the characters # \nSE
  • Every line has the same number of characters
  • There is only one start (S) and end (E)
@adactio
adactio / minimal-serviceworker.js
Last active August 18, 2023 09:15
An attempt at a minimal viable service worker.
// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/
// HTML files: try the network first, then the cache.
// Other files: try the cache first, then the network.
// Both: cache a fresh version if possible.
// (beware: the cache will grow and grow; there's no cleanup)
const cacheName = 'files';
@ebidel
ebidel / sw_caching_size.js
Last active November 16, 2022 11:31
Print service worker cache sizes and overall bytes cached.
/**
* @author ebidel@ (Eric Bidelman)
* License Apache-2.0
*/
// Prints the bytes cached by service worker. Breaks out each cache
// overall in-memory bytes used by the Cache Storage API for the site.
async function getCacheStoragesAssetTotalSize() {
// Note: opaque (i.e. cross-domain, without CORS) responses in the cache will return a size of 0.