Skip to content

Instantly share code, notes, and snippets.

Avatar

grant GrantCuster

View GitHub Profile
@GrantCuster
GrantCuster / userChrome.css
Last active Apr 3, 2022
My minimal, gruvbox inspired Firefox customization
View userChrome.css
/* Check out https://www.reddit.com/r/FirefoxCSS/ for an explanation on how to customize */
/* This hides a ton of buttons because I use Vimium for most navigation */
/* Screenshot at https://feed.grantcuster.com/post/1596224341/ */
:root {
--base00: #282828;
--base01: #3c3836;
--base02: #504945;
--base04: #bdae93;
--base05: #d5c4a1;
@GrantCuster
GrantCuster / userChrome.css
Created May 4, 2020
Minimal gruvbox skin for firefox.
View userChrome.css
#navigator-toolbox { font-family: 'JetBrains Mono' !important; border-bottom: none !important; } #navigator-toolbox #back-button { display: none; } #navigator-toolbox #forward-button { display: none; } #navigator-toolbox toolbarspring { display: none; } #navigator-toolbox .tab-line { display: none; } #navigator-toolbox #urlbar-container {
padding: 0 !important;
margin: 0 !important;
}
#navigator-toolbox #urlbar {
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
#navigator-toolbox #PanelUI-button {
@GrantCuster
GrantCuster / toc-active.js
Created Oct 25, 2019
Add an active class to the table of contents link when the heading is visible. For me, this was on top of html generated through markdown-it and markdown-it-table-of-contents, but similar things could work in lots of other situations.
View toc-active.js
window.addEventListener(
"load",
() => {
let headings = document.querySelectorAll("h2, h3, h4");
let links = document.querySelectorAll(".table-of-contents ul li a");
observer = new IntersectionObserver(
(entry, observer) => {
if (entry[0].intersectionRatio === 1) {
for (let link of links) {
@GrantCuster
GrantCuster / inline-gatsby-footnotes.js
Created Aug 15, 2018
Create inline footnotes in markdown files in Gatsby.js
View inline-gatsby-footnotes.js
// Put in gatsby-browser.js
exports.onRouteUpdate = ({ location }) => {
setTimeout(function() {
let og_footnotes = document.querySelector('.footnotes')
if (og_footnotes) {
let footnotes = document.querySelectorAll('.footnotes ol li')
for (let i = 0; i < footnotes.length; i++) {
let f_content = footnotes[i]
let link = f_content.querySelector('a')
let href = link.getAttribute('href')
View web-colors.css
.bg-white { background: #FFFFFF; }
.white { color: #FFFFFF; }
.bg-silver { background: #C0C0C0; }
.silver { color: #C0C0C0; }
.bg-hray { background: #808080; }
.hray { color: #808080; }
.bg-black { background: #000000; }
.black { color: #000000; }
.bg-red { background: #FF0000; }
.red { color: #FF0000; }
@GrantCuster
GrantCuster / .block
Last active Oct 3, 2017 — forked from mbostock/.block
Pan & Zoom I
View .block
license: gpl-3.0
@GrantCuster
GrantCuster / .block
Last active Oct 3, 2017 — forked from mbostock/.block
Pan & Zoom II
View .block
license: gpl-3.0
@GrantCuster
GrantCuster / .block
Created Oct 3, 2017 — forked from mbostock/.block
Pan & Zoom II
View .block
license: gpl-3.0
@GrantCuster
GrantCuster / README.md
Last active Jul 21, 2021
Three.js with D3-style Pan and Zoom
View README.md

This example recreates the zoom and pan behavior from the Pan and Zoom II D3 example. I'm using Three.js in a 2D data-visualization project because I'm hoping its WebGL render can handle more points than canvas. I had a hard time finding an example that zoomed and panned like I'm used to, so I made this.

This stack overflow answer by WesleyJones and the getCurrentScale function from anvaka's three.map.controls code was essential to me actually getting this working.

The scroll zoom is currently inverted compared to the D3 example, I'd like to match it but apparently there's some easing happening in the D3 scroll behavior that slows things down as you zoom in. That makes it feel weird if I just invert the zoom.

If you have suggestions on how to make this better, message me on [Twitter](htt