Skip to content

Instantly share code, notes, and snippets.

@AshwinJay
Last active June 1, 2026 04:25
Show Gist options
  • Select an option

  • Save AshwinJay/5c118875dd9ac03b015209409c40fb4c to your computer and use it in GitHub Desktop.

Select an option

Save AshwinJay/5c118875dd9ac03b015209409c40fb4c to your computer and use it in GitHub Desktop.
Macbook setup
syntax on
set fileformat=unix
set encoding=UTF-8
set cursorline
set number
PS1='%F{blue}%~ %(?.%F{green}.%F{red})%#%f '
# ---
alias ll = 'lsd --tree --depth 2' or 'eza -T -L 2 -l'
function git-authors() { git log --pretty=format:"%h%x09%an%x09%ad%x09%s" $(pwd); }
function ai() { ollama run $(ollama ls | tail -n +2 | awk '{print $1}' | sk -m); }
function rg() { /opt/homebrew/bin/rg -P "$@" | less -RFX; }
function browse() { fzf --style minimal --preview 'fzf-preview.sh {}' --bind 'focus:transform-header:file --brief {}'; }
# ---
# Set up fzf key bindings and fuzzy completion
source <(fzf --zsh)
---
brew leaves
brew ls --casks | xargs brew desc --eval-all
---
bat
broot
coreutils
fd
firefox
font-fira-code
font-hack-nerd-font
font-monaspace
gh
ghostty || iterm2
gron
heynote
intellij-idea-ce
itsycal
jq
keka
latest
lsd
maccy
zsh && starship
ripgrep
scc || tokei
sk || fzf
glow
critique || difftastic
---
vscode
zed
taskpaper
https://github.com/heyman/heynote
https://github.com/vincode-io/Zavala
https://github.com/glushchenko/fsnotes
https://github.com/nuttyartist/notes
https://github.com/refactoringhq/tolaria
---
brew cleanup --prune=all -s && rm -rf "$(brew --cache)"
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>»</title>
<style>
body {
margin: 0;
min-height: 100vh;
font-family:
system-ui,
-apple-system,
sans-serif;
background-color: #f4e4bc;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.content {
text-align: center;
max-width: 800px;
width: 100%;
background: rgba(255, 255, 255, 0.3);
padding: 2rem;
border-radius: 50px;
}
h1 {
margin: 0;
word-break: break-word;
cursor: default;
outline: 2px solid transparent;
border-radius: 8px;
padding: 0.25rem 0.5rem;
transition: outline 0.15s;
}
h1.editing {
cursor: text;
outline: 2px solid rgba(0, 0, 0, 0.2);
background: rgba(255, 255, 255, 0.3);
}
.todo-input {
margin-top: 1.5rem;
width: 80%;
max-width: 600px;
padding: 0.5rem 0.75rem;
border: none;
border-bottom: 2px solid rgba(0, 0, 0, 0.15);
background: transparent;
font: inherit;
font-size: 1rem;
text-align: center;
outline: none;
color: #333;
}
.todo-input::placeholder {
color: rgba(0, 0, 0, 0.3);
}
.todo-input:focus {
border-bottom-color: rgba(0, 0, 0, 0.4);
}
.todo-list {
list-style: none;
padding: 0;
margin: 1rem auto 0;
max-width: 600px;
text-align: left;
}
.todo-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0;
font-size: 1rem;
color: #333;
border-radius: 6px;
transition:
background 0.1s,
opacity 0.1s;
}
.todo-item.dragging {
opacity: 0.4;
}
.todo-item.drag-over {
background: rgba(0, 0, 0, 0.06);
}
.drag-handle {
cursor: grab;
opacity: 0.2;
font-size: 1rem;
padding: 0 0.15rem;
user-select: none;
touch-action: none;
line-height: 1;
flex-shrink: 0;
}
.drag-handle:hover {
opacity: 0.5;
}
.drag-handle:active {
cursor: grabbing;
}
.todo-item span {
flex: 1;
cursor: pointer;
user-select: none;
word-break: break-word;
}
.todo-item.done span {
text-decoration: line-through;
opacity: 0.5;
}
.todo-del {
cursor: pointer;
opacity: 0.3;
font-size: 1.1rem;
background: none;
border: none;
padding: 0 0.25rem;
font: inherit;
color: inherit;
}
.todo-del:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<div class="content">
<h1 id="T">»</h1>
<input
class="todo-input"
id="I"
type="text"
maxlength="256"
placeholder="add a todo, press enter"
/>
<ul class="todo-list" id="L"></ul>
</div>
<script>
const T = document.getElementById("T");
const I = document.getElementById("I");
const L = document.getElementById("L");
let title = "( — )",
prev = "",
todos = [];
// --- URL ---
function load() {
const p = new URLSearchParams(window.location.search);
if (p.get("title")) title = p.get("title");
const d = p.get("d");
if (d)
todos = d.split("|").map((s) => {
const done = s.startsWith("~");
return { text: done ? s.slice(1) : s, done };
});
}
function save() {
const u = new URL(window.location);
u.searchParams.set("title", title);
if (todos.length)
u.searchParams.set(
"d",
todos
.map((t) => (t.done ? "~" : "") + t.text)
.join("|"),
);
else u.searchParams.delete("d");
history.replaceState(null, "", u);
}
// --- Title ---
function setTitle() {
T.textContent = title;
document.title = title;
let f = document.querySelector('link[rel="icon"]');
if (!f) {
f = document.createElement("link");
f.rel = "icon";
f.type = "image/svg+xml";
document.head.appendChild(f);
}
f.href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><circle cx=%2250%22 cy=%2250%22 r=%2240%22 stroke=%22%23586E75%22 stroke-width=%223%22 fill=%22%23FDF6E3%22/><text x=%2250%22 y=%2260%22 text-anchor=%22middle%22 fill=%22%23000000%22 font-size=%2240%22>${encodeURIComponent(title)}</text></svg>`;
}
T.addEventListener("dblclick", () => {
prev = title;
T.contentEditable = true;
T.classList.add("editing");
T.focus();
const r = document.createRange();
r.selectNodeContents(T);
const s = window.getSelection();
s.removeAllRanges();
s.addRange(r);
});
function commitTitle() {
T.contentEditable = false;
T.classList.remove("editing");
title = T.textContent.trim() || prev || "( — )";
setTitle();
save();
}
T.addEventListener("keydown", (e) => {
if (!T.isContentEditable) return;
if (e.key === "Enter") {
e.preventDefault();
commitTitle();
}
if (e.key === "Escape") {
title = prev || "( — )";
T.contentEditable = false;
T.classList.remove("editing");
setTitle();
}
});
T.addEventListener("blur", () => {
if (T.isContentEditable) commitTitle();
});
// --- Drag state ---
let dragIdx = null;
// --- Todos ---
function render() {
L.innerHTML = "";
todos.forEach((todo, i) => {
const li = document.createElement("li");
li.className = "todo-item" + (todo.done ? " done" : "");
li.draggable = true;
li.dataset.idx = i;
// Drag handle
const handle = document.createElement("span");
handle.className = "drag-handle";
handle.textContent = "⠿";
handle.title = "Drag to reorder";
const span = document.createElement("span");
span.textContent = todo.text;
span.onclick = () => {
todos[i].done = !todos[i].done;
render();
save();
};
const del = document.createElement("button");
del.className = "todo-del";
del.textContent = "×";
del.onclick = () => {
todos.splice(i, 1);
render();
save();
};
// --- Mouse drag events ---
li.addEventListener("dragstart", (e) => {
dragIdx = i;
li.classList.add("dragging");
e.dataTransfer.effectAllowed = "move";
});
li.addEventListener("dragend", () => {
dragIdx = null;
document
.querySelectorAll(".todo-item")
.forEach((el) => {
el.classList.remove("dragging", "drag-over");
});
});
li.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
if (dragIdx !== null && dragIdx !== i) {
document
.querySelectorAll(".todo-item")
.forEach((el) =>
el.classList.remove("drag-over"),
);
li.classList.add("drag-over");
}
});
li.addEventListener("dragleave", () => {
li.classList.remove("drag-over");
});
li.addEventListener("drop", (e) => {
e.preventDefault();
if (dragIdx === null || dragIdx === i) return;
const moved = todos.splice(dragIdx, 1)[0];
todos.splice(i, 0, moved);
render();
save();
});
// --- Touch drag events ---
let touchClone = null,
touchStartY = 0,
touchCurIdx = i;
handle.addEventListener(
"touchstart",
(e) => {
e.preventDefault();
dragIdx = i;
touchStartY = e.touches[0].clientY;
li.classList.add("dragging");
// Create a floating clone
touchClone = li.cloneNode(true);
touchClone.style.cssText = `
position: fixed; left: ${li.getBoundingClientRect().left}px;
top: ${li.getBoundingClientRect().top}px;
width: ${li.offsetWidth}px; opacity: 0.85;
pointer-events: none; z-index: 9999;
background: rgba(255,255,255,0.7); border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
`;
document.body.appendChild(touchClone);
},
{ passive: false },
);
handle.addEventListener(
"touchmove",
(e) => {
e.preventDefault();
if (!touchClone) return;
const touch = e.touches[0];
const dy = touch.clientY - touchStartY;
touchClone.style.top =
li.getBoundingClientRect().top + dy + "px";
// Find which item we're hovering over
touchClone.style.display = "none";
const el = document.elementFromPoint(
touch.clientX,
touch.clientY,
);
touchClone.style.display = "";
const overLi = el && el.closest(".todo-item");
document
.querySelectorAll(".todo-item")
.forEach((el) =>
el.classList.remove("drag-over"),
);
if (overLi) {
touchCurIdx = parseInt(overLi.dataset.idx);
if (touchCurIdx !== dragIdx)
overLi.classList.add("drag-over");
}
},
{ passive: false },
);
handle.addEventListener("touchend", () => {
if (touchClone) {
touchClone.remove();
touchClone = null;
}
li.classList.remove("dragging");
document
.querySelectorAll(".todo-item")
.forEach((el) => el.classList.remove("drag-over"));
if (dragIdx !== null && touchCurIdx !== dragIdx) {
const moved = todos.splice(dragIdx, 1)[0];
todos.splice(touchCurIdx, 0, moved);
render();
save();
}
dragIdx = null;
});
li.append(handle, span, del);
L.appendChild(li);
});
}
I.addEventListener("keydown", (e) => {
if (e.key !== "Enter") return;
const text = I.value.trim().slice(0, 256);
if (!text) return;
todos.push({ text, done: false });
I.value = "";
render();
save();
});
// --- Init ---
load();
setTitle();
render();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment