Skip to content

Instantly share code, notes, and snippets.

View cvan's full-sized avatar
🚌
🌊

Christopher Van cvan

🚌
🌊
407 followers · 551 following
View GitHub Profile
@cvan
cvan / actions_debugging.md
Created April 13, 2023 19:16
debug show print reveal github secrets in github actions workflows jobs
@cvan
cvan / fix_package-lock_git_merge_conflict.md
Created March 16, 2023 17:53
regenerate package-lock.json when package.json packages change in a pull request
git merge/rebase conflicts:

how to correctly re-generate package-lock.json w/ package.json changes

when a package is changed in the package.json, the lockfile (package-lock.json, yarn.lock.json`, etc.) will be out of sync without manual intervention.

running this command to get the lockfile up to sync is considered best practices according to the npm v6+ docs:

@cvan
cvan / debug-tailwind.md
Created February 16, 2023 04:55
debug tailwind

show me all the Tailwind CSS classes to use in my project

which CSS selectors to use? this shows all the (non-dynamic) options generated from your project's tailwind.config.js.

rogden/tailwind-config-viewer is the best. run from the command line:

npx tailwind-config-viewer -o
@cvan
cvan / git_pair.js
Created September 28, 2022 07:50
extract user/repo pair from a GitHub URL
#!/usr/bin/env node
const fs = require("fs");
const path = require("path");
// Copy this file into a file into $HOME/.local/bin/ (or a similar directory in `$PATH`)
//
// 1. pbpaste > ~/.local/bin/git_pair.js
// x-sel --clipboard --output > ~/.local/bin/git_pair.js
// 2. Run commands above to generate an executable file called `git_pair`
@cvan
cvan / css-debug.css
Last active October 27, 2023 03:03
css debug hierarchy of nodes
* {
outline: 2px dotted red;
}
* * {
outline: 2px dotted green;
}
* * * {
outline: 2px dotted orange;
}
* * * * {
@cvan
cvan / firefox-launch.sh
Last active June 5, 2023 06:04
/Applications/Firefox\ Developer\ Edition.app/Contents/MacOS/firefox -P
alias fxdl="'/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox' -P'"
alias fxdo="'/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox' -new-tab $@"
@cvan
cvan / export-chrome-synced-tabs.js
Created September 27, 2021 13:17
export list of URLs from mobile <-> PC synced tabs
// ensure password syncing enabled on both Chrome devices
//
// from Chrome desktop, load chrome://history/syncedTabs
// select "Tabs from other devices" link on sidebar
//
// once list loads, inspect the element of a link
// paste into the Console:
//
containerEl = $0.closest('div#history-item-container');
@cvan
cvan / open-exported-tabs-from-onetab.md
Last active December 12, 2021 22:48
a VSCode search-and-replace pattern to convert OneTab exported bookmarks to Linux xdg-open commands to open in browser tabs

Requirements

Steps

  1. Open browser with OneTab extension installed.
  2. Open OneTab manager (via context menu: right-click on a page, click OneTab > Display OneTab).
  3. In the top-right corner, tap on Export / Import URLs.
@cvan
cvan / commands.js
Last active June 23, 2023 15:40
cypress disable basic css transitions + animations
// Custom Cypress No-Motion helper
//
// To reduce flakiness in Cypress tests caused by motion,
// force disable all CSS transitions and animations.
//
// revised: 2023-03-15
// credits: @ypresto
function disableMotion(win) {
const injectedStyleEl = win.document.getElementById('__cy_disable_motion__');
@cvan
cvan / with-dynamic-route-hydrated.js
Created January 1, 2021 18:11
next.js dynamic routes wait for hydration to complete
import React, { useEffect, useState } from 'react';
import { withRouter } from 'next/router';
// @example `"/films/[slug]"`
const IS_DYNAMIC_ROUTE = urlPathname => String(urlPathname).includes('[');
// Usage in your dynamic-route components:
// @example
// export default withDynamicRoute(Page);