Skip to content

Instantly share code, notes, and snippets.

@jonikorpi
jonikorpi / resize.js
Last active April 20, 2023 08:48
Resize canvas to match actual device pixels… mostly
const observer = new ResizeObserver((entries) => {
const entry = entries[0];
if (entry.devicePixelContentBoxSize) {
canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
canvas.height = entry.devicePixelContentBoxSize[0].blockSize;
} else if (entry.contentBoxSize) {
// Annoying fallback. Assumes window.devicePixelRatio includes browser zoom.
// Currently that's how it works in Chrome, but not in Safari.
// As a result current Safari will end up with the wrong size if browser zoom is in use.
@jonikorpi
jonikorpi / ReglEngine.js
Last active March 12, 2020 21:21
Messy react + regl framework for simple instanced and batched rendering
import React, {
useContext,
useEffect,
useRef,
createContext,
useState,
useCallback,
} from "react";
import createCamera from "perspective-camera";
@jonikorpi
jonikorpi / css.js
Last active September 4, 2021 01:38
Single-file components in React, using Constructable Stylesheets
// https://github.com/calebdwilliams/construct-style-sheets
import "construct-style-sheets-polyfill";
export default strings => {
if (document.readyState === "loading") {
window.addEventListener("DOMContentLoaded", () => adopt(strings));
} else {
adopt(strings);
}
};
@jonikorpi
jonikorpi / gist:af5a8362388cd28e9f6cdd9a82ebc5b6
Last active December 5, 2018 13:44
Getting the pointy hex coordinates of a hex region's center hex in this arrangement: https://www.redblobgames.com/grids/hexagons/#wraparound (Both the input and output are in "cube" hex coordinates. r is the radius of the regions.
const cubeCoordinatesToRegionCenter = (x, y, z, r) => {
const centerX = x * 2 * r + x + r * z;
const centerZ = z * -2 * r - z - x + -r * x;
return [centerX, -centerX-centerZ, centerZ];
};
@jonikorpi
jonikorpi / gist:78b228e46fe34e8f8879
Last active August 29, 2017 07:33
Getting nokogiri to work in Ruby 1.9.3
xcode-select --install
gem install nokogiri -v '1.7.0.1' -- --with-xml2-include=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.10.sdk/usr/include/libxml2 --use-system-libraries
@jonikorpi
jonikorpi / gist:bc98be0dfdaa92d99cc0
Last active August 29, 2015 14:19
Getting pg to work with Ruby 1.9.3
gem install pg -- --with-pg-config=/Applications/Postgres.app/Contents/Versions/9.4/bin/pg_config
If you run in to missing headers problem, try specifying the include directory of the app:
gem install pg -- --with-pg-include='/Applications/Postgres.app/Contents/Versions/9.4/include/'
The definition of a rathole:
My TV torrents stopped downloading.
Turns out my primary TV torrent feed changed to magnet links.
Turns out my autodownloader doesn't know how to pass magnet links to my torrent client.
Changed to another client.
*mysterious errors*
Turns out the client has to be installed in Program Files instead of Program Files (x86).
Uninstalling it and reinstalling it there.
*other mysterious errors*
Turns out the client has to be installed with the same version of Python as the autodownloader.
@jonikorpi
jonikorpi / styles.less
Last active September 7, 2016 16:23
Atom stylesheet based around Solarized Dark, Input Mono, and Input Sans Narrow
/*
I should probably have turned this into a theme…,
but who has time for that?
Installation:
1. Choose "Atom Dark" as your UI theme.
2. Choose "Solarized Dark" as your syntax theme.
3. Install Input from http://input.fontbureau.com/
(It's free for personal use.)
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
.fieldset-footer,
.hint,
input[type="submit"],
button,
.button,
.error,
;; User behaviors
;; -----------------------------
;; Behaviors are stored as a set of diffs that are merged together
;; to create the final set of functionality that makes up Light Table. You can
;; modify these diffs to either add or subtract functionality.
;;
;; Behaviors are added to tags, objects with those tags then automatically gain
;; whatever logic the behavior imparts. To see a list of user-level behaviors,
;; start typing a word related to the functionality you want in between the square
;; brackets (e.g. "theme").