Alex dakumisu

Modern Device Dimensions for Chrome DevTools

These are modern “Emulated Devices” (a.k.a. responsive dimensions) for Chrome DevTools’ Mobile Device Viewport Mode.

They are specifically Apple devices, subtracting for recent Safari UI (as in window.innerWidth/Height), and cleverly sorted with some dark-arts unicode shenanigans. (This glitchy, unloved portion of the tools sorts lexicographically, because of course it would.) Ergonomics!

Note

Updated June 2025 with some notes from folks below! TL;DR: use Vibranium!

GPU Optimization for GameDev

Graphics Pipeline / GPU Architecture Overview

2011 - A trip through the Graphics Pipeline 2011
2015 - Life of a triangle - NVIDIA's logical pipeline
2015 - Render Hell 2.0
2016 - How bad are small triangles on GPU and why?
2017 - GPU Performance for Game Artists
2019 - Understanding the anatomy of GPUs using Pokémon
2020 - GPU ARCHITECTURE RESOURCES

Size components in px from mockup size

width: 300px;
height: 240px;

in resize, change component fontSize from default (16px) to ratio of "device size / mockup size")

el.style.fontSize = Math.min(width, height) / 360 * 16 + 'px'

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

	/**
	* General-purpose NodeJS CLI/API wrapping the Stable-Diffusion python scripts.
	*
	* Note that this uses an older fork of stable-diffusion
	* with the 'txt2img.py' script, and that script was modified to
	* support the --outfile command.
	*/

	var { spawn, exec } = require("child_process");
	var path = require("path");

	/**
	* Matches against GLSL shader outputs.
	*/
	const VARYING_REGEX = /[^\w](?:varying\|out)\s+\w+\s+(\w+)\s*;/g

	/**
	* Adds line numbers to a string with an optional starting offset.
	*/
	const lineNumbers = (source: string, offset = 0): string => source.replace(/^/gm, () => `${offset++}:`)

	// From the book: Graphics Shaders

	vec3 CMYKtoRGB (vec4 cmyk) {
	float c = cmyk.x;
	float m = cmyk.y;
	float y = cmyk.z;
	float k = cmyk.w;

	float invK = 1.0 - k;
	float r = 1.0 - min(1.0, c * invK + k);

	Africa/Abidjan
	Africa/Accra
	Africa/Addis_Ababa
	Africa/Algiers
	Africa/Asmara
	Africa/Asmera
	Africa/Bamako
	Africa/Bangui
	Africa/Banjul
	Africa/Bissau

	vec2 rotateUV(vec2 uv, float rotation)
	{
	float mid = 0.5;
	return vec2(
	cos(rotation) * (uv.x - mid) + sin(rotation) * (uv.y - mid) + mid,
	cos(rotation) * (uv.y - mid) - sin(rotation) * (uv.x - mid) + mid
	);
	}

	vec2 rotateUV(vec2 uv, float rotation, vec2 mid)

	//Simple media queries mixins for phone and tablet. Including variables of the basic mobile size, portrait and landscape orientation in sass. Can be quick applied in a mini site.
	// Author: Millie Lin
	// website: www.millielin.com

	// ***** Breakpoints for Responsive Screen
	// width scale for phone
	$phone-min-width: 320px !default;
	$phone-max-width: 504px !default;
	// height scale for phone
	$phone-min-height: 346px !default;