-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnotes.html
81 lines (75 loc) · 148 KB
/
notes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="en" class="min-h-full">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="./_app/immutable/assets/0.BIJMqV3L.css" rel="stylesheet">
<link href="./_app/immutable/assets/NoteGridStatusFilter.eq4K4R-6.css" rel="stylesheet">
<link href="./_app/immutable/assets/MDSveXNoteLayout.fO7cJVK6.css" rel="stylesheet">
<link href="./_app/immutable/assets/4.pzj5IkyR.css" rel="stylesheet">
<link rel="modulepreload" href="./_app/immutable/entry/start.BYTGewrw.js">
<link rel="modulepreload" href="./_app/immutable/chunks/entry.DT5pBbIT.js">
<link rel="modulepreload" href="./_app/immutable/chunks/scheduler.ewBkyc9q.js">
<link rel="modulepreload" href="./_app/immutable/entry/app.8UFY0431.js">
<link rel="modulepreload" href="./_app/immutable/chunks/preload-helper.C1FmrZbK.js">
<link rel="modulepreload" href="./_app/immutable/chunks/index.DpmaPz1F.js">
<link rel="modulepreload" href="./_app/immutable/nodes/0.ptpxay9R.js">
<link rel="modulepreload" href="./_app/immutable/chunks/each.DRjyAD6E.js">
<link rel="modulepreload" href="./_app/immutable/chunks/NoteGridStatusFilter.svelte_svelte_type_style_lang.ujj1qoQH.js">
<link rel="modulepreload" href="./_app/immutable/nodes/4.Cryka-5x.js">
<link rel="modulepreload" href="./_app/immutable/chunks/NoteGrid.CfLqeLLg.js"><!-- HEAD_svelte-cpyj77_START --> <meta name="theme-color" content="dark"><!-- HTML_TAG_START --><script nonce="%sveltekit.nonce%">(function setInitialMode(defaultMode, themeColors2) {
const rootEl = document.documentElement;
const mode = localStorage.getItem("mode-watcher-mode") || defaultMode;
const light = mode === "light" || mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches;
rootEl.classList[light ? "remove" : "add"]("dark");
rootEl.style.colorScheme = light ? "light" : "dark";
if (themeColors2) {
const themeMetaEl = document.querySelector('meta[name="theme-color"]');
if (themeMetaEl) {
themeMetaEl.setAttribute("content", mode === "light" ? themeColors2.light : themeColors2.dark);
}
}
localStorage.setItem("mode-watcher-mode", mode);
})("system", {"dark":"dark","light":"light"});</script><!-- HTML_TAG_END --><!-- HEAD_svelte-cpyj77_END -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-86124920-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'UA-86124920-1');
</script>
</head>
<body
data-sveltekit-preload-data="hover"
data-sveltekit-preload-data="viewport"
class="h-full min-h-[100vh] bg-base-100">
<div style="display: contents"> <div class="h-full min-h-[100dvh]"><div class="toaster svelte-jyff3d" role="alert"> </div> <div class="navbar bg-base-100 print:hidden"><div class="navbar-start"><div class="dropdown"><button tabindex="0" class="btn btn-ghost sm:hidden" data-svelte-h="svelte-o7egld"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path></svg></button> <ul tabindex="0" class="dropdown-content menu rounded-box menu-sm mt-3 w-52 bg-base-100 p-2 shadow"><li><a href="/">Home</a></li><li><a href="/notes">Notes</a></li><li><a href="/devlog">Devlog</a></li></ul></div> <a class="btn btn-ghost text-xl normal-case" href="/">Allan Deutsch</a></div> <div class="navbar-center hidden sm:flex"><ul class="menu menu-horizontal px-1 text-base"><li><a href="/">Home</a></li><li><a href="/notes">Notes</a></li><li><a href="/devlog">Devlog</a></li></ul></div> <div class="navbar-end"> <div class="h-8" data-svelte-h="svelte-1hosge2"><a href="https://twitter.com/AllanDeutsch" class="group"><svg height="24" width="24" class="mr-1.5 inline fill-base-content transition-colors duration-300 group-hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258a250.714 250.714 0 01-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 01-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"></path></svg></a> <a href="https://github.com/masstronaut" class="group"><svg height="24" aria-hidden="true" viewBox="0 0 16 16" version="1.1" width="24" data-view-component="true" class="mr-1.5 inline fill-base-content transition-colors duration-300 group-hover:fill-primary"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg></a></div> </div></div> <div class="h-full p-1 sm:p-4"><div class="w-full"><div class="flex w-full flex-col items-center"><h2 class="my-6 self-center text-5xl text-base-content">My notes</h2> <div class="flex items-center"><button class="filter seedling m-3 p-2 svelte-rk0j1p">seedling 🌱 </button><button class="filter budding m-3 p-2 svelte-rk0j1p">budding 🌿 </button><button class="filter evergreen m-3 p-2 svelte-rk0j1p">evergreen 🌲 </button></div> <div class="col-auto grid w-full grid-cols-[repeat(auto-fill,_minmax(300px,_1fr))] justify-items-center gap-3"><a href="/notes/gifts" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Gifts</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Gifts can be an unwanted obligation or a fun way to show some love. This is my attempt at shifting them towards the latter.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 11, 2025</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/cozumel-travel-guide" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Cozumel travel guide</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A brief guide on having a successful trip to the SCUBA diving island paradise of Mexico, Cozumel.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 5, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/classy-javascript" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Classy coding - JavaScript OOP through the ages</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Embark on a journey to learn about how OOP has been done throughout JavaScript's history, with our destination set on understanding how we should do it today and what all the modern syntax is doing for us under the hood.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 14, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/focus-edgy-view" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Open neovim edgebar with focus set</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A deep dive into neovim config, controlling focus, pane management with edgy.nvim, and a little open source contribution to boot!</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 10, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/use-neovim" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">I use Neovim btw</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Imagine a world where something as simple as editing text becomes a fun and challenging puzzle to be solved.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jul 30, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/thinking-channels" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Thinking channels</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Thinking about the same concept in a different way is often a big unlock to deeper and clearer understanding</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jun 20, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/identity-functions" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Identity functions</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Identity functions make it possible to provide a much better developer experience at API boundaries by improving the type</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 19, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/total-typescript-notes" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Total Typescript notes</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">I've learned a lot from this course, and use this note to record bits I want to remember and riff on some of my observations.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 19, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/dynamic-ts-playground-links" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Dynamically generate TypeScript Playground links</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">TypeScript playground has a URL param to specify the code content. This makes it possible to always have up-to-date playground links for example code!</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 11, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/code-block-tsplay-demo-link" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Add a demo link to TypeScript code blocks</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Seeing example code with syntax highlighting is great, but sometimes you've just gotta run the code and see what happens...</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 9, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/make-example-code-interactive" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Make example code interactive</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Whenever possible, make code interactive. Interaction is the single most effective way to teach anything, including code!</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 9, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/branded-types" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Branded Types</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">TypeScript is a structurally typed language, but can have nominal typing semantics using a technique called type branding</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 8, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/theory-practice" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Theory and practice</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Theory and practice are often at tension with each other, but they shouldn't be. Each benefits from a health dose of the other.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 28, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/svelte-shiki-twoslash" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Beautifully render code in Svelte</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">How I transform the code in my markdown files into beautifully rendered snippets on this site.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 24, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/lint-format-svelte" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Linting and formatting a svelte project</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Pulling together a bunch of language tools can be a bother, but I find automated formatting & code review tools are worth the hassle.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 24, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/structural-branded-types-nominal" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Type branding removes structural type compatibility</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A structural type can be "branded" to add context to values by using the type system for annotations as is done with nominal types. Doing so makes them incompatible with structurally equivalent types.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 6, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/sveltekit-cors" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Resolving CORS errors in SvelteKit</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Cross-origin resource sharing requests let a user access resources on one site from another, but only if the server performs the secret CORS handshake with the browser.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Mar 30, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/pasta-arabica" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Pasta Arabica</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">An improvised pasta dish made to drawn inspiration from the flavors and sounds of the Middle East. It is hearty and surprisingly bright.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Mar 6, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/assertion-functions" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">TypeScript assertion functions increase type safety</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Assertion functions let the programmer narrow types using a named function, making type narrowing much more readable.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Feb 16, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/make-api-misuse-hard" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Make API misuse hard</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Being hard to misuse is an underrated characteristic of exceptional APIs, especially when the possibility needs to be exposed to the client for advanced scenarios.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Feb 13, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/publishing-this-site" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The publishing pipeline for allandeutsch.com</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">An overview of how I avoided needing to copy+paste my notes into blogging software to publish them.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Feb 7, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/svelte-component-apis" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Svelte component APIs</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">There are many ways to Svelte a component...</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Feb 6, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/slugs-make-links-readable" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Slugs make links readable</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Special characters aren't valid in URLs, so custom slugs are used to make links easier to read.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Feb 4, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/structural-types-increase-compatibility" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Structural types increase data compatibility</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Structural types are only concerned with the shape of data, rather than the names of types. This makes data types more compatible.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Feb 4, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/pdc-travel-guide" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Playa del Carmen travel guide</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Tips from my travels to PDC, including where to eat, stay, and visit!</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 1, 2024</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/mac-tips" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Mac tips</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Various tips, hotkeys, and software I use on my Mac that I find to be broadly helpful and think everyone should know about.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Dec 30, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/customer-teams-lucia" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Adding users to new teams with Lucia auth and Prisma</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">When building a B2B product, most customers will want to invite their team members. This post explores how I added support for that to Doc Duck, a documentation feedback solution I'm building.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 22, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/value-proposition" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Value proposition</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The way(s) a product or service benefits its target customers and the statement describing it.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 14, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/seattle-cafes" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Seattle area cafés I like</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A curated list of my favorite Seattle area cafes to sit, sip, and relax or work.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 14, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/restaurants" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Restaurants I like</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A list of some of my favorite places to get a meal in the Seattle area.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 19, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/smaller-phone" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">I want a smaller phone</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">As a tech guy, I'm often interested in the latest and greatest gadget. This has historically meant the biggest and best smart phone, but no longer...</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jul 9, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/git-cheatsheet" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">git-cheatsheet</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Some common scenarios and how to resolve them using git.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jun 28, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/evaluating-startup-idea" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">10 questions to evaluate a startup idea</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">10 questions to ask about any startup idea that will help you evaluate if it's worth pursuing.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jun 17, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/work-life-balance" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Reflections on work-life balance</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">These are my reflections on how I view work-life balance, and how that view has changed over time.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 5, 2023</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/positioning-statement" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Positioning statement</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A position statement explains how a product fits into its market.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 21, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/cross-price-elasticity" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Cross-Price Elasticity of Demand (CPED)</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Microeconomics tool for quantifying the change in demand for a product in response to price changes for substitute goods.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 21, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/price-elasticity-demand" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Price Elasticity of Demand (PED)</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Price changes impact the demand for goods and services. PED is a microeconomics tool for quantifyng that impact.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 21, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/money-market" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Money market</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The market for currency and the mechanics that govern it, such as interest rates, money supply, and the required reserve ratio.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">May 6, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/sveltekit-storybook-setup" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Setting up a SvelteKit project with Storybook</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Setting up Storybook on a SvelteKit project doesn't work out of the box using the config tool. This guide walks you through a few extra steps needed to get SvelteKit and Storybook running.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 19, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/avocado-toast" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Avocado toast</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Perhaps the icon of a generation, avocado toast is a delicious and nutritious way to start the day. </p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 13, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/three-options-consensus" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Present three options to build consensus</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Cognitive biases lead people to evaluate options in context. There are strong biases that impact decision making when there are one or two options.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 13, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/single-option-aversion-bias" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Single-option aversion bias</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">People are biased against deciding on a single option. Multiple options enable people to compare and make informed decisions.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 12, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/microeconomics" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Microeconomics</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">An overview of my notes on microeconomics.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 18, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/production-cost" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Costs of production</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Understanding the costs facing a business is an important part of evaluating its profitability. There are two categories of costs - fixed and variable.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 17, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/opportunity-cost" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Opportunity cost</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The most valuable alternative that must be given up.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 16, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/price-elasticity" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Price elasticity</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Price elasticity measures how much the demand for a good changes in response to price changes.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 16, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/marginal-utility" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Marginal utility</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The incremental value gained from have one more of something.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 15, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/consumer-demand" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Consumer demand</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Consumer demand looks at the three types of relationships between goods and how price changes to one product affects demand for another.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 15, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/market-forces" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Market forces</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The factors that impact the price of goods and services, which in turn drives supply and demand changes.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 9, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/supply-demand" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Supply and demand</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">An area of microeconomics focused on how price influences the behavior of producers and consumers.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jan 9, 2022</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/ui-shadows" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Great UI shadows imitate real shadows</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">UI shadows should create an illusion of depth. For the best illusion, imitate reality.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Dec 21, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/principal-agent-problem" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The principal-agent problem</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">When there is a conflict in priorities between one party (the principal) and another party (the agent) that executions on their behalf.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Nov 29, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/grapow" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Grapow</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Grapow is a sweet & spicy Thai dish made with ground meat, Thai chilis, and Thai basil. This dish is often requested by friends joining for dinner.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Nov 6, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/site-unfurling" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Improve site previews on social media by unfurling webpages</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Some webpages have nice previews when shared on social media. These can be specified in the page HTML. Previews make the site user-friendly before users even visit it!</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 31, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/value-innovation" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Value innovation</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Value innovation is how companies offer dramatically higher value at lower costs, escaping competition.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 21, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/use-contrast-direct-attention" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Use contrast to direct attention</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Visual focus is naturally drawn to contrast. Use contrast in design to direct attention.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 11, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/hard-decisions" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Make hard decisions quickly</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The less differentiated the options are, the harder it is to choose one.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 8, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/type-1-2-decisions" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Type-1 and Type-2 Decisions</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A decision dichotomy based on if the decision can be mitigated or reversed.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 4, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/ask-dont-tell" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Ask, don't tell</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Giving unprompted advice is ineffective. Instead, lead people to ask for advice.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Oct 1, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/vicious-virtuous-cycles" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Vicious and virtuous cycles</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Self-reinforcing cycles that act as compound growth systems. Negative cycles are vicious, positive cycles are virtuous.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 24, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/fundamental-habits" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The fundamental habits</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">These simple behaviors are often challenging, but provide a rock solid foundation for the rest of life.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 23, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/customer-attribute-categories" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Categories of customer attributes</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Customer attributes can be grouped as demographic, psychographic, geographic, or behavior.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 23, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/utility" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Utility</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Utility is the microeconomics concept for how much satisfaction, pain reduction, happiness, or value a buyer gets from a product or service.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 22, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/blue-ocean" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Blue Ocean</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Blue oceans are markets that haven't been created yet. They are lucrative business opportunities.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 21, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/traits-successful-blue-ocean-strategy" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Common traits of successful blue ocean strategies</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Great strategies have a clear focus, diverge from competition, and are easy to explain.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 21, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/value-curve" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Value curve</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The line on a strategy canvas showing the emphasis a company places on each factor of competition in its industry.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 21, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/segmentation-targeting-positioning" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Segmentation, Targeting, and Positioning (STP)</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Group consumers into segments, determine which to target, and estable the product's position for them.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 21, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/blue-ocean-strategy" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Blue Ocean strategy</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Blue ocean strategy is about creating new markets to escape competition.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 16, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/competition-factors" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Factors of competition</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The factors that companies/products within an industry typically compete on to provide value to customers.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 16, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/four-actions-framework" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The Four Actions framework</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Helps identify which factors a business should eliminate, reduce, raise, and create. Typically used with a strategy canvas.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 15, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/strategy-canvas" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The strategy canvas</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">An analytical tool that shows how much emphasis companies place on value areas in their industry.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 13, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/red-ocean" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Red ocean</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Crowded markets where customers have many options to choose from, resulting in cutthroat competition.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 10, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/customer-relationship" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Customer relationship</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The interactions a business has with customers and the strategies around those interactions.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 1, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/business-model-canvas" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Business Model Canvas</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A modern alternative to a business plan. It has 9 sections with details of the business, its customers, and how it provides value.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Sep 1, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/build-infrastructure-after-pain" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Build infrastructure after not having it becomes painful</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The pain caused by a lack of infrastructure proves the infrastructure is necessary.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 16, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/distribution-channel" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Distribution channel</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Distribution channels are how products and services get from a business to its customers.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 15, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/monetized-content-compound-growth" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Monetized content creation is a compound growth system</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">New content creates new organic inbound traffic and retains the audience. Old content creates more value from new audience.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 15, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/compound-growth-system" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Compound growth system</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Any system in which growth is proportional to the principal, added to that principal, and then repeated.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 12, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/compound-growth-most-impactful-at-end" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Compound growth is most impactful at the end</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Compound growth is exponential. Each compounding period generates more growth than the previous one.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 12, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/customer-segment" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 92, 50%, 40%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Customer segment</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The groups of people a business aims to serve.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 12, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">budding 🌿</div></section></article> </a><a href="/notes/situation-analysis" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Situation analysis</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A tool for identifying and evaluating the market conditions for a product or service.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Aug 10, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/learning-process" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The learning process</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">A repeating cycle of receiving input, processing it to create output, evaluating that output, and evaluating results to improve future processing.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jul 27, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/spaced-repetition-workflow" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">My spaced repetition workflow</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The setup and workflow I use to retain what I learn and deepen my understanding.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Jun 25, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a><a href="/notes/world-recursive" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 85, 40%, 55%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">The world is recursive</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">The same things happen across domains and contexts all over the world. Very little is unique or novel.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Apr 14, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">seedling 🌱</div></section></article> </a><a href="/notes/positive-feedback" class="m-4 flex w-full min-w-[300px] max-w-[450px] flex-1 basis-80 text-inherit no-underline" style="--statusColor: 95, 60%, 30%;"><article class="group flex h-64 w-full flex-col justify-between border border-solid border-base-300 bg-base-100 px-10 py-8 text-base-content text-opacity-80 transition-all duration-200 hover:border-[hsl(var(--statusColor))] hover:text-opacity-100 hover:shadow-xl hover:shadow-[hsla(var(--statusColor),.25)] active:-translate-y-1 active:scale-[1.01] active:shadow-md svelte-1f9x9br"><section class="notecontent"><header class="svelte-1f9x9br"><h1 class="line-clamp-2 h-16 text-lg svelte-1f9x9br">Give mostly positive feedback</h1></header> <p class="mt-3 line-clamp-3 h-[4.5em] leading-[1.5em] transition-all duration-200">Both positive and negative feedback are important, but on high performing teams positive feedback outweighs constructive feedback 5 to 1.</p></section> <section class="notemetadata border-t border-t-neutral-content border-opacity-60 pt-1 text-right text-sm svelte-1f9x9br"><div class="date min-w-[12ch] text-opacity-50 svelte-1f9x9br">Mar 15, 2021</div> <div class="min-w-[12ch] capitalize text-[hsl(var(--statusColor))] svelte-1f9x9br">evergreen 🌲</div></section></article> </a></div></div> </div></div></div>
<script>
{
__sveltekit_1yrf0hg = {
base: new URL(".", location).pathname.slice(0, -1)
};
const element = document.currentScript.parentElement;
const data = [null,{"type":"data","data":{notes:[{title:"Gifts",slug:"notes/gifts",description:"Gifts can be an unwanted obligation or a fun way to show some love. This is my attempt at shifting them towards the latter.",date:"2025-01-03T00:00:00.000Z",lastmod:"2025-01-11T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/gifts"},{title:"Cozumel travel guide",slug:"notes/cozumel-travel-guide",description:"A brief guide on having a successful trip to the SCUBA diving island paradise of Mexico, Cozumel.",date:"2022-07-24T00:00:00.000Z",lastmod:"2024-10-05T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:6,status:"seedling",statusIcon:"🌱",href:"/notes/cozumel-travel-guide"},{title:"Classy coding - JavaScript OOP through the ages",slug:"notes/classy-javascript",description:"Embark on a journey to learn about how OOP has been done throughout JavaScript's history, with our destination set on understanding how we should do it today and what all the modern syntax is doing for us under the hood.",date:"2024-08-14T00:00:00.000Z",lastmod:"2024-08-14T00:00:00.000Z",publish:true,tags:["status/budding"],internalLinks:[],readTime:23,status:"budding",statusIcon:"🌿",href:"/notes/classy-javascript"},{title:"Open neovim edgebar with focus set",slug:"notes/focus-edgy-view",description:"A deep dive into neovim config, controlling focus, pane management with edgy.nvim, and a little open source contribution to boot!",date:"2024-08-10T00:00:00.000Z",lastmod:"2024-08-10T00:00:00.000Z",publish:true,tags:["status/seedling","topic/neovim","topic/opensource"],internalLinks:["/notes/use-neovim"],readTime:9,status:"seedling",statusIcon:"🌱",href:"/notes/focus-edgy-view"},{title:"I use Neovim btw",slug:"notes/use-neovim",description:"Imagine a world where something as simple as editing text becomes a fun and challenging puzzle to be solved.",date:"2024-07-30T00:00:00.000Z",lastmod:"2024-07-30T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:["/devlog/11#learning-neovim"],readTime:12,status:"seedling",statusIcon:"🌱",href:"/notes/use-neovim"},{title:"Thinking channels",slug:"notes/thinking-channels",description:"Thinking about the same concept in a different way is often a big unlock to deeper and clearer understanding",date:"2023-06-13T00:00:00.000Z",lastmod:"2024-06-20T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/thinking-channels"},{title:"Identity functions",slug:"notes/identity-functions",description:"Identity functions make it possible to provide a much better developer experience at API boundaries by improving the type",date:"2024-05-18T00:00:00.000Z",lastmod:"2024-05-19T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:5,status:"seedling",statusIcon:"🌱",href:"/notes/identity-functions"},{title:"Total Typescript notes",slug:"notes/total-typescript-notes",description:"I've learned a lot from this course, and use this note to record bits I want to remember and riff on some of my observations.",date:"2023-11-23T00:00:00.000Z",lastmod:"2024-05-19T00:00:00.000Z",publish:true,tags:["status/budding"],internalLinks:["/notes/branded-types","/notes/structural-branded-types-nominal","/notes/identity-functions"],readTime:12,status:"budding",statusIcon:"🌿",href:"/notes/total-typescript-notes"},{title:"Dynamically generate TypeScript Playground links",slug:"notes/dynamic-ts-playground-links",description:"TypeScript playground has a URL param to specify the code content. This makes it possible to always have up-to-date playground links for example code!",date:"2024-05-09T00:00:00.000Z",lastmod:"2024-05-11T00:00:00.000Z",publish:true,tags:["status/budding"],internalLinks:["/notes/branded-types","/notes/make-example-code-interactive","/notes/code-block-tsplay-demo-link"],readTime:2,status:"budding",statusIcon:"🌿",href:"/notes/dynamic-ts-playground-links"},{title:"Add a demo link to TypeScript code blocks",slug:"notes/code-block-tsplay-demo-link",description:"Seeing example code with syntax highlighting is great, but sometimes you've just gotta run the code and see what happens...",date:"2024-05-09T00:00:00.000Z",lastmod:"2024-05-09T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:["/notes/dynamic-ts-playground-links","/notes/make-example-code-interactive","/notes/branded-types"],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/code-block-tsplay-demo-link"},{title:"Make example code interactive",slug:"notes/make-example-code-interactive",description:"Whenever possible, make code interactive. Interaction is the single most effective way to teach anything, including code!",date:"2024-05-09T00:00:00.000Z",lastmod:"2024-05-09T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:["/notes/dynamic-ts-playground-links","/notes/code-block-tsplay-demo-link"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/make-example-code-interactive"},{title:"Branded Types",slug:"notes/branded-types",description:"TypeScript is a structurally typed language, but can have nominal typing semantics using a technique called type branding",date:"2024-05-08T00:00:00.000Z",lastmod:"2024-05-08T00:00:00.000Z",publish:true,tags:["status/evergreen"],internalLinks:["/notes/structural-branded-types-nominal"],readTime:7,status:"evergreen",statusIcon:"🌲",href:"/notes/branded-types"},{title:"Theory and practice",slug:"notes/theory-practice",description:"Theory and practice are often at tension with each other, but they shouldn't be. Each benefits from a health dose of the other.",date:"2024-04-28T00:00:00.000Z",lastmod:"2024-04-28T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/theory-practice"},{title:"Beautifully render code in Svelte",slug:"notes/svelte-shiki-twoslash",description:"How I transform the code in my markdown files into beautifully rendered snippets on this site.",date:"2024-04-07T00:00:00.000Z",lastmod:"2024-04-24T00:00:00.000Z",publish:true,tags:["status/budding"],internalLinks:[],readTime:5,status:"budding",statusIcon:"🌿",href:"/notes/svelte-shiki-twoslash"},{title:"Linting and formatting a svelte project",slug:"notes/lint-format-svelte",description:"Pulling together a bunch of language tools can be a bother, but I find automated formatting & code review tools are worth the hassle.",date:"2024-04-13T00:00:00.000Z",lastmod:"2024-04-24T00:00:00.000Z",publish:true,tags:["status/budding","topic/webdev"],internalLinks:[],readTime:15,status:"budding",statusIcon:"🌿",href:"/notes/lint-format-svelte"},{title:"Type branding removes structural type compatibility",slug:"notes/structural-branded-types-nominal",description:"A structural type can be \"branded\" to add context to values by using the type system for annotations as is done with nominal types. Doing so makes them incompatible with structurally equivalent types.",date:"2024-02-03T00:00:00.000Z",lastmod:"2024-04-06T00:00:00.000Z",publish:true,tags:["topic/typescript","status/budding"],internalLinks:[],readTime:3,status:"budding",statusIcon:"🌿",href:"/notes/structural-branded-types-nominal"},{title:"Resolving CORS errors in SvelteKit",slug:"notes/sveltekit-cors",description:"Cross-origin resource sharing requests let a user access resources on one site from another, but only if the server performs the secret CORS handshake with the browser.",date:"2024-03-27T00:00:00.000Z",lastmod:"2024-03-30T00:00:00.000Z",publish:true,tags:["status/budding"],internalLinks:[],readTime:7,status:"budding",statusIcon:"🌿",href:"/notes/sveltekit-cors"},{title:"Pasta Arabica",slug:"notes/pasta-arabica",description:"An improvised pasta dish made to drawn inspiration from the flavors and sounds of the Middle East. It is hearty and surprisingly bright.",date:"2024-03-06T00:00:00.000Z",lastmod:"2024-03-06T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/pasta-arabica"},{title:"TypeScript assertion functions increase type safety",slug:"notes/assertion-functions",description:"Assertion functions let the programmer narrow types using a named function, making type narrowing much more readable.",date:"2024-02-16T00:00:00.000Z",lastmod:"2024-02-16T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/assertion-functions"},{title:"Make API misuse hard",slug:"notes/make-api-misuse-hard",description:"Being hard to misuse is an underrated characteristic of exceptional APIs, especially when the possibility needs to be exposed to the client for advanced scenarios.",date:"2024-02-14T00:00:00.000Z",lastmod:"2024-02-13T00:00:00.000Z",publish:true,tags:["status/seedling","topic/softwaredev"],internalLinks:[],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/make-api-misuse-hard"},{title:"The publishing pipeline for allandeutsch.com",slug:"notes/publishing-this-site",description:"An overview of how I avoided needing to copy+paste my notes into blogging software to publish them.",date:"2021-10-04T00:00:00.000Z",lastmod:"2024-02-07T00:00:00.000Z",publish:true,tags:["topic/webdev","status/budding","taxonomy/blog"],internalLinks:["/notes/slugs-make-links-readable"],readTime:6,status:"budding",statusIcon:"🌿",href:"/notes/publishing-this-site"},{title:"Svelte component APIs",slug:"notes/svelte-component-apis",description:"There are many ways to Svelte a component...",date:"2024-02-13T00:00:00.000Z",lastmod:"2024-02-06T00:00:00.000Z",publish:true,tags:["status/seedling","topic/webdev","topic/svelte"],internalLinks:["/notes/make-api-misuse-hard"],readTime:8,status:"seedling",statusIcon:"🌱",href:"/notes/svelte-component-apis"},{title:"Slugs make links readable",slug:"notes/slugs-make-links-readable",description:"Special characters aren't valid in URLs, so custom slugs are used to make links easier to read.",date:"2024-02-04T00:00:00.000Z",lastmod:"2024-02-04T00:00:00.000Z",publish:true,tags:["status/seedling","topic/webdev","topic/SEO"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/slugs-make-links-readable"},{title:"Structural types increase data compatibility",slug:"notes/structural-types-increase-compatibility",description:"Structural types are only concerned with the shape of data, rather than the names of types. This makes data types more compatible.",date:"2024-02-04T00:00:00.000Z",lastmod:"2024-02-04T00:00:00.000Z",publish:true,tags:["status/seedling","topic/typescript"],internalLinks:["/notes/structural-branded-types-nominal"],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/structural-types-increase-compatibility"},{title:"Playa del Carmen travel guide",slug:"notes/pdc-travel-guide",description:"Tips from my travels to PDC, including where to eat, stay, and visit!",date:"2023-12-30T00:00:00.000Z",lastmod:"2024-01-01T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:["/notes/cozumel-travel-guide"],readTime:11,status:"seedling",statusIcon:"🌱",href:"/notes/pdc-travel-guide"},{title:"Mac tips",slug:"notes/mac-tips",description:"Various tips, hotkeys, and software I use on my Mac that I find to be broadly helpful and think everyone should know about.",date:"2021-06-23T00:00:00.000Z",lastmod:"2023-12-30T00:00:00.000Z",publish:true,tags:["status/seedling","flashcards/hotkeys"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/mac-tips"},{title:"Adding users to new teams with Lucia auth and Prisma",slug:"notes/customer-teams-lucia",description:"When building a B2B product, most customers will want to invite their team members. This post explores how I added support for that to Doc Duck, a documentation feedback solution I'm building.",date:"2023-10-16T00:00:00.000Z",lastmod:"2023-10-22T00:00:00.000Z",publish:true,tags:["status/seedling","topic/prisma","topic/lucia","topic/auth","topic/SaaS","topic/webdev"],internalLinks:[],readTime:18,status:"seedling",statusIcon:"🌱",href:"/notes/customer-teams-lucia"},{title:"Value proposition",slug:"notes/value-proposition",description:"The way(s) a product or service benefits its target customers and the statement describing it.",date:"2021-06-13T00:00:00.000Z",lastmod:"2023-09-14T00:00:00.000Z",publish:true,tags:["status/seedling","course/marketing","topic/product"],internalLinks:["/notes/customer-segment","/notes/competition-factors"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/value-proposition"},{title:"Seattle area cafés I like",slug:"notes/seattle-cafes",description:"A curated list of my favorite Seattle area cafes to sit, sip, and relax or work.",date:"2021-08-28T00:00:00.000Z",lastmod:"2023-09-14T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/seattle-cafes"},{title:"Restaurants I like",slug:"notes/restaurants",description:"A list of some of my favorite places to get a meal in the Seattle area.",date:"2021-06-13T00:00:00.000Z",lastmod:"2023-08-19T00:00:00.000Z",publish:true,tags:["status/evergreen"],internalLinks:[],readTime:3,status:"evergreen",statusIcon:"🌲",href:"/notes/restaurants"},{title:"I want a smaller phone",slug:"notes/smaller-phone",description:"As a tech guy, I'm often interested in the latest and greatest gadget. This has historically meant the biggest and best smart phone, but no longer...",date:"2023-06-26T00:00:00.000Z",lastmod:"2023-07-09T00:00:00.000Z",publish:true,tags:["status/evergreen"],internalLinks:[],readTime:3,status:"evergreen",statusIcon:"🌲",href:"/notes/smaller-phone"},{title:"git-cheatsheet",slug:"notes/git-cheatsheet",description:"Some common scenarios and how to resolve them using git.",date:"2022-05-24T00:00:00.000Z",lastmod:"2023-06-28T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:5,status:"seedling",statusIcon:"🌱",href:"/notes/git-cheatsheet"},{title:"10 questions to evaluate a startup idea",slug:"notes/evaluating-startup-idea",description:"10 questions to ask about any startup idea that will help you evaluate if it's worth pursuing.",date:"2023-06-17T00:00:00.000Z",lastmod:"2023-06-17T00:00:00.000Z",publish:true,tags:["status/seedling","taxonomy/reference"],internalLinks:[],readTime:5,status:"seedling",statusIcon:"🌱",href:"/notes/evaluating-startup-idea"},{title:"Reflections on work-life balance",slug:"notes/work-life-balance",description:"These are my reflections on how I view work-life balance, and how that view has changed over time.",date:"2023-04-05T00:00:00.000Z",lastmod:"2023-04-05T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:[],readTime:11,status:"seedling",statusIcon:"🌱",href:"/notes/work-life-balance"},{title:"Positioning statement",slug:"notes/positioning-statement",description:"A position statement explains how a product fits into its market.",date:"2021-08-11T00:00:00.000Z",lastmod:"2022-05-21T00:00:00.000Z",publish:true,tags:["status/budding","course/marketing","topic/marketing","taxonomy/reference"],internalLinks:["/notes/segmentation-targeting-positioning","/notes/customer-segment"],readTime:2,status:"budding",statusIcon:"🌿",href:"/notes/positioning-statement"},{title:"Cross-Price Elasticity of Demand (CPED)",slug:"notes/cross-price-elasticity",description:"Microeconomics tool for quantifying the change in demand for a product in response to price changes for substitute goods.",date:"2021-09-28T00:00:00.000Z",lastmod:"2022-05-21T00:00:00.000Z",publish:true,tags:["status/budding","course/microeconomics","topic/microeconomics","taxonomy/reference"],internalLinks:["/notes/consumer-demand","/notes/price-elasticity","/notes/price-elasticity-demand"],readTime:2,status:"budding",statusIcon:"🌿",href:"/notes/cross-price-elasticity"},{title:"Price Elasticity of Demand (PED)",slug:"notes/price-elasticity-demand",description:"Price changes impact the demand for goods and services. PED is a microeconomics tool for quantifyng that impact.",date:"2021-09-28T00:00:00.000Z",lastmod:"2022-05-21T00:00:00.000Z",publish:true,tags:["status/budding","course/microeconomics","topic/microeconomics","taxonomy/reference"],internalLinks:["/notes/microeconomics","/notes/supply-demand","/notes/price-elasticity","/notes/price-elasticity-demand"],readTime:4,status:"budding",statusIcon:"🌿",href:"/notes/price-elasticity-demand"},{title:"Money market",slug:"notes/money-market",description:"The market for currency and the mechanics that govern it, such as interest rates, money supply, and the required reserve ratio.",date:"2022-01-23T00:00:00.000Z",lastmod:"2022-05-06T00:00:00.000Z",publish:true,tags:["status/seedling","course/macroeconomics","taxonomy/reference"],internalLinks:["/notes/supply-demand"],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/money-market"},{title:"Setting up a SvelteKit project with Storybook",slug:"notes/sveltekit-storybook-setup",description:"Setting up Storybook on a SvelteKit project doesn't work out of the box using the config tool. This guide walks you through a few extra steps needed to get SvelteKit and Storybook running.",date:"2022-04-19T00:00:00.000Z",lastmod:"2022-04-19T00:00:00.000Z",publish:true,tags:["status/seedling","topic/webdev","taxonomy/reference"],internalLinks:[],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/sveltekit-storybook-setup"},{title:"Avocado toast",slug:"notes/avocado-toast",description:"Perhaps the icon of a generation, avocado toast is a delicious and nutritious way to start the day. ",date:"2021-10-01T00:00:00.000Z",lastmod:"2022-04-13T00:00:00.000Z",publish:true,tags:["status/seedling","topic/food"],internalLinks:[],readTime:1,status:"seedling",statusIcon:"🌱",href:"/notes/avocado-toast"},{title:"Present three options to build consensus",slug:"notes/three-options-consensus",description:"Cognitive biases lead people to evaluate options in context. There are strong biases that impact decision making when there are one or two options.",date:"2021-04-07T00:00:00.000Z",lastmod:"2022-04-13T00:00:00.000Z",publish:true,tags:["status/budding"],internalLinks:["/notes/single-option-aversion-bias"],readTime:1,status:"budding",statusIcon:"🌿",href:"/notes/three-options-consensus"},{title:"Single-option aversion bias",slug:"notes/single-option-aversion-bias",description:"People are biased against deciding on a single option. Multiple options enable people to compare and make informed decisions.",date:"2021-03-26T00:00:00.000Z",lastmod:"2022-04-12T00:00:00.000Z",publish:true,tags:["status/evergreen","topic/social"],internalLinks:["/notes/three-options-consensus"],readTime:2,status:"evergreen",statusIcon:"🌲",href:"/notes/single-option-aversion-bias"},{title:"Microeconomics",slug:"notes/microeconomics",description:"An overview of my notes on microeconomics.",date:"2021-09-19T00:00:00.000Z",lastmod:"2022-01-18T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics"],internalLinks:["/notes/marginal-utility","/notes/supply-demand","/notes/consumer-demand","/notes/price-elasticity","/notes/price-elasticity-demand","/notes/cross-price-elasticity","/notes/market-forces","/notes/opportunity-cost"],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/microeconomics"},{title:"Costs of production",slug:"notes/production-cost",description:"Understanding the costs facing a business is an important part of evaluating its profitability. There are two categories of costs - fixed and variable.",date:"2021-09-28T00:00:00.000Z",lastmod:"2022-01-17T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics","topic/microeconomics"],internalLinks:["/notes/marginal-utility"],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/production-cost"},{title:"Opportunity cost",slug:"notes/opportunity-cost",description:"The most valuable alternative that must be given up.",date:"2022-01-16T00:00:00.000Z",lastmod:"2022-01-16T00:00:00.000Z",publish:true,tags:["status/seedling","topic/microeconomics","course/microeconomics"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/opportunity-cost"},{title:"Price elasticity",slug:"notes/price-elasticity",description:"Price elasticity measures how much the demand for a good changes in response to price changes.",date:"2021-09-22T00:00:00.000Z",lastmod:"2022-01-16T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics","topic/microeconomics","taxonomy/reference"],internalLinks:["/notes/consumer-demand","/notes/price-elasticity-demand","/notes/cross-price-elasticity","/notes/price-elasticity"],readTime:5,status:"seedling",statusIcon:"🌱",href:"/notes/price-elasticity"},{title:"Marginal utility",slug:"notes/marginal-utility",description:"The incremental value gained from have one more of something.",date:"2021-09-20T00:00:00.000Z",lastmod:"2022-01-15T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics"],internalLinks:["/notes/microeconomics","/notes/utility"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/marginal-utility"},{title:"Consumer demand",slug:"notes/consumer-demand",description:"Consumer demand looks at the three types of relationships between goods and how price changes to one product affects demand for another.",date:"2021-09-22T00:00:00.000Z",lastmod:"2022-01-15T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics","topic/microeconomics","taxonomy/reference"],internalLinks:["/notes/microeconomics","/notes/price-elasticity","/notes/price-elasticity-demand","/notes/cross-price-elasticity"],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/consumer-demand"},{title:"Market forces",slug:"notes/market-forces",description:"The factors that impact the price of goods and services, which in turn drives supply and demand changes.",date:"2022-01-09T00:00:00.000Z",lastmod:"2022-01-09T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics"],internalLinks:["/notes/microeconomics","/notes/supply-demand"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/market-forces"},{title:"Supply and demand",slug:"notes/supply-demand",description:"An area of microeconomics focused on how price influences the behavior of producers and consumers.",date:"2021-09-19T00:00:00.000Z",lastmod:"2022-01-09T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics"],internalLinks:["/notes/microeconomics"],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/supply-demand"},{title:"Great UI shadows imitate real shadows",slug:"notes/ui-shadows",description:"UI shadows should create an illusion of depth. For the best illusion, imitate reality.",date:"2021-10-21T00:00:00.000Z",lastmod:"2021-12-21T00:00:00.000Z",publish:true,tags:["status/seedling","flashcards/design","taxonomy/artifact"],internalLinks:[],readTime:6,status:"seedling",statusIcon:"🌱",href:"/notes/ui-shadows"},{title:"The principal-agent problem",slug:"notes/principal-agent-problem",description:"When there is a conflict in priorities between one party (the principal) and another party (the agent) that executions on their behalf.",date:"2021-11-29T00:00:00.000Z",lastmod:"2021-11-29T00:00:00.000Z",publish:true,tags:["status/seedling","taxonomy/reference"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/principal-agent-problem"},{title:"Grapow",slug:"notes/grapow",description:"Grapow is a sweet & spicy Thai dish made with ground meat, Thai chilis, and Thai basil. This dish is often requested by friends joining for dinner.",date:"2021-11-06T00:00:00.000Z",lastmod:"2021-11-06T00:00:00.000Z",publish:true,tags:["status/seedling","taxonomy/reference"],internalLinks:[],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/grapow"},{title:"Improve site previews on social media by unfurling webpages",slug:"notes/site-unfurling",description:"Some webpages have nice previews when shared on social media. These can be specified in the page HTML. Previews make the site user-friendly before users even visit it!",date:"2021-10-31T00:00:00.000Z",lastmod:"2021-10-31T00:00:00.000Z",publish:true,tags:["status/seedling","taxonomy/reference"],internalLinks:[],readTime:4,status:"seedling",statusIcon:"🌱",href:"/notes/site-unfurling"},{title:"Value innovation",slug:"notes/value-innovation",description:"Value innovation is how companies offer dramatically higher value at lower costs, escaping competition.",date:"2021-09-12T00:00:00.000Z",lastmod:"2021-10-21T00:00:00.000Z",publish:true,tags:["status/seedling","flashcards/business","course/BlueOceanStrategy"],internalLinks:["/notes/blue-ocean","/notes/red-ocean"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/value-innovation"},{title:"Use contrast to direct attention",slug:"notes/use-contrast-direct-attention",description:"Visual focus is naturally drawn to contrast. Use contrast in design to direct attention.",date:"2021-03-25T00:00:00.000Z",lastmod:"2021-10-11T00:00:00.000Z",publish:true,tags:["status/evergreen","taxonomy/idea"],internalLinks:[],readTime:1,status:"evergreen",statusIcon:"🌲",href:"/notes/use-contrast-direct-attention"},{title:"Make hard decisions quickly",slug:"notes/hard-decisions",description:"The less differentiated the options are, the harder it is to choose one.",date:"2021-06-15T00:00:00.000Z",lastmod:"2021-10-08T00:00:00.000Z",publish:true,tags:["status/seedling","taxonomy/idea"],internalLinks:["/notes/marginal-utility"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/hard-decisions"},{title:"Type-1 and Type-2 Decisions",slug:"notes/type-1-2-decisions",description:"A decision dichotomy based on if the decision can be mitigated or reversed.",date:"2021-07-14T00:00:00.000Z",lastmod:"2021-10-04T00:00:00.000Z",publish:true,tags:["flashcards/concepts","status/evergreen"],internalLinks:[],readTime:3,status:"evergreen",statusIcon:"🌲",href:"/notes/type-1-2-decisions"},{title:"Ask, don't tell",slug:"notes/ask-dont-tell",description:"Giving unprompted advice is ineffective. Instead, lead people to ask for advice.",date:"2021-06-14T00:00:00.000Z",lastmod:"2021-10-01T00:00:00.000Z",publish:true,tags:["flashcards/ideas","status/evergreen","taxonomy/idea"],internalLinks:[],readTime:2,status:"evergreen",statusIcon:"🌲",href:"/notes/ask-dont-tell"},{title:"Vicious and virtuous cycles",slug:"notes/vicious-virtuous-cycles",description:"Self-reinforcing cycles that act as compound growth systems. Negative cycles are vicious, positive cycles are virtuous.",date:"2021-09-24T00:00:00.000Z",lastmod:"2021-09-24T00:00:00.000Z",publish:true,tags:["status/seedling"],internalLinks:["/notes/compound-growth-system","/notes/fundamental-habits"],readTime:7,status:"seedling",statusIcon:"🌱",href:"/notes/vicious-virtuous-cycles"},{title:"The fundamental habits",slug:"notes/fundamental-habits",description:"These simple behaviors are often challenging, but provide a rock solid foundation for the rest of life.",date:"2021-09-23T00:00:00.000Z",lastmod:"2021-09-23T00:00:00.000Z",publish:true,tags:["status/evergreen"],internalLinks:[],readTime:3,status:"evergreen",statusIcon:"🌲",href:"/notes/fundamental-habits"},{title:"Categories of customer attributes",slug:"notes/customer-attribute-categories",description:"Customer attributes can be grouped as demographic, psychographic, geographic, or behavior.",date:"2021-09-23T00:00:00.000Z",lastmod:"2021-09-23T00:00:00.000Z",publish:true,tags:["status/seedling","course/marketing","topic/marketing","taxonomy/reference"],internalLinks:["/notes/customer-segment"],readTime:1,status:"seedling",statusIcon:"🌱",href:"/notes/customer-attribute-categories"},{title:"Utility",slug:"notes/utility",description:"Utility is the microeconomics concept for how much satisfaction, pain reduction, happiness, or value a buyer gets from a product or service.",date:"2021-09-22T00:00:00.000Z",lastmod:"2021-09-22T00:00:00.000Z",publish:true,tags:["status/seedling","course/microeconomics"],internalLinks:["/notes/microeconomics","/notes/marginal-utility"],readTime:1,status:"seedling",statusIcon:"🌱",href:"/notes/utility"},{title:"Blue Ocean",slug:"notes/blue-ocean",description:"Blue oceans are markets that haven't been created yet. They are lucrative business opportunities.",date:"2021-09-10T00:00:00.000Z",lastmod:"2021-09-21T00:00:00.000Z",publish:true,tags:["status/seedling","course/BlueOceanStrategy","topic/business","taxonomy/reference"],internalLinks:["/notes/blue-ocean-strategy","/notes/red-ocean","/notes/value-innovation","/notes/customer-segment","/notes/four-actions-framework","/notes/competition-factors","/notes/strategy-canvas"],readTime:3,status:"seedling",statusIcon:"🌱",href:"/notes/blue-ocean"},{title:"Common traits of successful blue ocean strategies",slug:"notes/traits-successful-blue-ocean-strategy",description:"Great strategies have a clear focus, diverge from competition, and are easy to explain.",date:"2021-09-16T00:00:00.000Z",lastmod:"2021-09-21T00:00:00.000Z",publish:true,tags:["status/budding","course/BlueOceanStrategy"],internalLinks:["/notes/blue-ocean-strategy","/notes/competition-factors","/notes/blue-ocean","/notes/value-innovation","/notes/positioning-statement"],readTime:1,status:"budding",statusIcon:"🌿",href:"/notes/traits-successful-blue-ocean-strategy"},{title:"Value curve",slug:"notes/value-curve",description:"The line on a strategy canvas showing the emphasis a company places on each factor of competition in its industry.",date:"2021-09-16T00:00:00.000Z",lastmod:"2021-09-21T00:00:00.000Z",publish:true,tags:["status/seedling","course/BlueOceanStrategy"],internalLinks:["/notes/strategy-canvas","/notes/red-ocean","/notes/traits-successful-blue-ocean-strategy","/notes/blue-ocean-strategy","/notes/competition-factors"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/value-curve"},{title:"Segmentation, Targeting, and Positioning (STP)",slug:"notes/segmentation-targeting-positioning",description:"Group consumers into segments, determine which to target, and estable the product's position for them.",date:"2021-08-11T00:00:00.000Z",lastmod:"2021-09-21T00:00:00.000Z",publish:true,tags:["status/budding","course/marketing","topic/marketing","taxonomy/reference"],internalLinks:["/notes/customer-segment","/notes/positioning-statement"],readTime:1,status:"budding",statusIcon:"🌿",href:"/notes/segmentation-targeting-positioning"},{title:"Blue Ocean strategy",slug:"notes/blue-ocean-strategy",description:"Blue ocean strategy is about creating new markets to escape competition.",date:"2021-09-15T00:00:00.000Z",lastmod:"2021-09-16T00:00:00.000Z",publish:true,tags:["status/budding","course/BlueOceanStrategy","taxonomy/map"],internalLinks:["/notes/blue-ocean","/notes/red-ocean","/notes/value-innovation","/notes/strategy-canvas","/notes/competition-factors","/notes/value-curve","/notes/four-actions-framework","/notes/traits-successful-blue-ocean-strategy"],readTime:2,status:"budding",statusIcon:"🌿",href:"/notes/blue-ocean-strategy"},{title:"Factors of competition",slug:"notes/competition-factors",description:"The factors that companies/products within an industry typically compete on to provide value to customers.",date:"2021-09-15T00:00:00.000Z",lastmod:"2021-09-16T00:00:00.000Z",publish:true,tags:["status/seedling","course/BlueOceanStrategy","topic/business","taxonomy/reference"],internalLinks:["/notes/strategy-canvas","/notes/value-curve","/notes/red-ocean","/notes/blue-ocean","/notes/value-innovation"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/competition-factors"},{title:"The Four Actions framework",slug:"notes/four-actions-framework",description:"Helps identify which factors a business should eliminate, reduce, raise, and create. Typically used with a strategy canvas.",date:"2021-09-15T00:00:00.000Z",lastmod:"2021-09-15T00:00:00.000Z",publish:true,tags:["status/seedling","topic/business","course/BlueOceanStrategy","taxonomy/reference"],internalLinks:["/notes/strategy-canvas","/notes/blue-ocean","/notes/competition-factors","/notes/customer-segment","/notes/value-innovation","/notes/red-ocean"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/four-actions-framework"},{title:"The strategy canvas",slug:"notes/strategy-canvas",description:"An analytical tool that shows how much emphasis companies place on value areas in their industry.",date:"2021-09-13T00:00:00.000Z",lastmod:"2021-09-13T00:00:00.000Z",publish:true,tags:["status/budding","topic/business","course/BlueOceanStrategy","taxonomy/reference"],internalLinks:["/notes/competition-factors","/notes/value-curve","/notes/blue-ocean","/notes/red-ocean"],readTime:2,status:"budding",statusIcon:"🌿",href:"/notes/strategy-canvas"},{title:"Red ocean",slug:"notes/red-ocean",description:"Crowded markets where customers have many options to choose from, resulting in cutthroat competition.",date:"2021-09-10T00:00:00.000Z",lastmod:"2021-09-10T00:00:00.000Z",publish:true,tags:["status/seedling","course/BlueOceanStrategy","taxonomy/reference"],internalLinks:["/notes/blue-ocean","/notes/customer-segment"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/red-ocean"},{title:"Customer relationship",slug:"notes/customer-relationship",description:"The interactions a business has with customers and the strategies around those interactions.",date:"2021-06-16T00:00:00.000Z",lastmod:"2021-09-01T00:00:00.000Z",publish:true,tags:["status/seedling","course/marketing","topic/marketing","taxonomy/reference"],internalLinks:["/notes/business-model-canvas","/notes/distribution-channel"],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/customer-relationship"},{title:"Business Model Canvas",slug:"notes/business-model-canvas",description:"A modern alternative to a business plan. It has 9 sections with details of the business, its customers, and how it provides value.",date:"2021-06-14T00:00:00.000Z",lastmod:"2021-09-01T00:00:00.000Z",publish:true,tags:["flashcards/concepts","status/budding"],internalLinks:["/notes/value-proposition","/notes/customer-segment","/notes/customer-relationship","/notes/distribution-channel"],readTime:2,status:"budding",statusIcon:"🌿",href:"/notes/business-model-canvas"},{title:"Build infrastructure after not having it becomes painful",slug:"notes/build-infrastructure-after-pain",description:"The pain caused by a lack of infrastructure proves the infrastructure is necessary.",date:"2021-07-02T00:00:00.000Z",lastmod:"2021-08-16T00:00:00.000Z",publish:true,tags:["status/seedling","flashcards/ideas","taxonomy/idea"],internalLinks:[],readTime:2,status:"seedling",statusIcon:"🌱",href:"/notes/build-infrastructure-after-pain"},{title:"Distribution channel",slug:"notes/distribution-channel",description:"Distribution channels are how products and services get from a business to its customers.",date:"2021-06-16T00:00:00.000Z",lastmod:"2021-08-15T00:00:00.000Z",publish:true,tags:["status/budding","course/marketing","topic/marketing","taxonomy/reference"],internalLinks:[],readTime:1,status:"budding",statusIcon:"🌿",href:"/notes/distribution-channel"},{title:"Monetized content creation is a compound growth system",slug:"notes/monetized-content-compound-growth",description:"New content creates new organic inbound traffic and retains the audience. Old content creates more value from new audience.",date:"2021-04-07T00:00:00.000Z",lastmod:"2021-08-15T00:00:00.000Z",publish:true,tags:["status/evergreen","taxonomy/idea"],internalLinks:["/notes/compound-growth-system","/notes/compound-growth-most-impactful-at-end"],readTime:2,status:"evergreen",statusIcon:"🌲",href:"/notes/monetized-content-compound-growth"},{title:"Compound growth system",slug:"notes/compound-growth-system",description:"Any system in which growth is proportional to the principal, added to that principal, and then repeated.",date:"2021-08-12T00:00:00.000Z",lastmod:"2021-08-12T00:00:00.000Z",publish:true,tags:["status/seedling","flashcards/ideas","taxonomy/idea"],internalLinks:["/notes/monetized-content-compound-growth"],readTime:1,status:"seedling",statusIcon:"🌱",href:"/notes/compound-growth-system"},{title:"Compound growth is most impactful at the end",slug:"notes/compound-growth-most-impactful-at-end",description:"Compound growth is exponential. Each compounding period generates more growth than the previous one.",date:"2021-08-12T00:00:00.000Z",lastmod:"2021-08-12T00:00:00.000Z",publish:true,tags:["status/evergreen","taxonomy/idea"],internalLinks:["/notes/compound-growth-system"],readTime:2,status:"evergreen",statusIcon:"🌲",href:"/notes/compound-growth-most-impactful-at-end"},{title:"Customer segment",slug:"notes/customer-segment",description:"The groups of people a business aims to serve.",date:"2021-06-13T00:00:00.000Z",lastmod:"2021-08-12T00:00:00.000Z",publish:true,tags:["status/budding","taxonomy/reference","course/marketing","topic/marketing"],internalLinks:["/notes/customer-attribute-categories","/notes/value-proposition","/notes/business-model-canvas","/notes/segmentation-targeting-positioning"],readTime:3,status:"budding",statusIcon:"🌿",href:"/notes/customer-segment"},{title:"Situation analysis",slug:"notes/situation-analysis",description:"A tool for identifying and evaluating the market conditions for a product or service.",date:"2021-08-10T00:00:00.000Z",lastmod:"2021-08-10T00:00:00.000Z",publish:true,tags:["status/seedling","course/marketing","topic/marketing","taxonomy/reference"],internalLinks:[],readTime:1,status:"seedling",statusIcon:"🌱",href:"/notes/situation-analysis"},{title:"The learning process",slug:"notes/learning-process",description:"A repeating cycle of receiving input, processing it to create output, evaluating that output, and evaluating results to improve future processing.",date:"2021-07-27T00:00:00.000Z",lastmod:"2021-07-27T00:00:00.000Z",publish:true,tags:["status/evergreen","topic/learning","taxonomy/idea"],internalLinks:["/notes/world-recursive"],readTime:2,status:"evergreen",statusIcon:"🌲",href:"/notes/learning-process"},{title:"My spaced repetition workflow",slug:"notes/spaced-repetition-workflow",description:"The setup and workflow I use to retain what I learn and deepen my understanding.",date:"2021-06-25T00:00:00.000Z",lastmod:"2021-06-25T00:00:00.000Z",publish:true,tags:["status/evergreen","topic/learning"],internalLinks:[],readTime:6,status:"evergreen",statusIcon:"🌲",href:"/notes/spaced-repetition-workflow"},{title:"The world is recursive",slug:"notes/world-recursive",description:"The same things happen across domains and contexts all over the world. Very little is unique or novel.",date:"2021-04-14T00:00:00.000Z",lastmod:"2021-04-14T00:00:00.000Z",publish:true,tags:["status/seedling","taxonomy/idea"],internalLinks:["/notes/learning-process"],readTime:1,status:"seedling",statusIcon:"🌱",href:"/notes/world-recursive"},{title:"Give mostly positive feedback",slug:"notes/positive-feedback",description:"Both positive and negative feedback are important, but on high performing teams positive feedback outweighs constructive feedback 5 to 1.",date:"2021-03-15T00:00:00.000Z",lastmod:"2021-03-15T00:00:00.000Z",publish:true,tags:["status/evergreen"],internalLinks:[],readTime:2,status:"evergreen",statusIcon:"🌲",href:"/notes/positive-feedback"}]},"uses":{}}];
Promise.all([
import("./_app/immutable/entry/start.BYTGewrw.js"),
import("./_app/immutable/entry/app.8UFY0431.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 4],
data,
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>