mfehrenbach

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!

Nest Hub Max? Come on. I dropped a bunch of devices that were older and/or close to these dimensions. It obviously doesn’t cover everything (sorry Android/Chrome), but offers a decent spread/increments for common 2023/2024 viewports.

mattdesl

/**
 * 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");

CodyJasonBennett

/**
 * 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++}:`)

mattdesl

// 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);

diogocapela

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

ayamflow

1. Size components in px from mockup size

width: 300px;
height: 240px;

2. 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'

ayamflow

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)

witmin

//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;

paulirish

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

kranrao

///// Terminal /////

ls                              - list of files in directory
ls -a                           - list of *all files in directory
cd                              - move into directory
ls -a subl .bash_profile        - terminal shortcut editor
mkdir [dir name]                - make new directory
touch [file name]               - make new file
mv [file name] [new file name]  - changes file name
cp [file name]                  - copies file or directory