Dimitris Karagiannis mkarajohn

ASCI art characters for creating diagrams

Characters:

Single line

ASCII code 191 = ┐ ( Box drawing character single line upper right corner )
ASCII code 192 = └ ( Box drawing character single line lower left corner )
ASCII code 193 = ┴ ( Box drawing character single line horizontal and up )
ASCII code 194 = ┬ ( Box drawing character single line horizontal down )

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

To run this, you can try:

curl -ksO https://gist.githubusercontent.com/nicerobot/2697848/raw/uninstall-node.sh
chmod +x ./uninstall-node.sh
./uninstall-node.sh
rm uninstall-node.sh

	// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
	// Example using the Next.js App Router.
	import { useRouter } from 'next/navigation';
	import { useEffect } from 'react';

	function useLinkHandler() {
	let router = useRouter();

	useEffect(() => {
	let onClick = e => {

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	// Create our server
	var server;
	server = http.createServer(function(req,res){
	// Set CORS headers
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader('Access-Control-Request-Method', '*');
	res.setHeader('Access-Control-Allow-Methods', 'OPTIONS, GET');
	res.setHeader('Access-Control-Allow-Headers', '*');
	if ( req.method === 'OPTIONS' ) {
	res.writeHead(200);