Webdev on Benny Simmonds https://www.bencode.io/categories/webdev/ Recent content in Webdev on Benny Simmonds Hugo -- 0.149.1 en-us Mon, 01 Dec 2025 17:45:00 +1100 Shadcn UI Quick Reference https://www.bencode.io/posts/shadcn/ Mon, 01 Dec 2025 17:45:00 +1100 https://www.bencode.io/posts/shadcn/ <ul> <li><a href="#wat">wat</a></li> <li><a href="#componentsjson">components.json</a></li> <li><a href="#the-cn-helper">The <code>cn()</code> Helper</a></li> <li><a href="#globalscss--theming">globals.css &amp; Theming</a></li> <li><a href="#dark-mode">Dark Mode</a></li> <li><a href="#dependencies-explained">Dependencies Explained</a> <ul> <li><a href="#cva-example">CVA Example</a></li> </ul> </li> <li><a href="#blocks-vs-components">Blocks vs Components</a></li> <li><a href="#quick-start-workflow">Quick Start Workflow</a></li> <li><a href="#forms-with-tanstack--shadcnui">Forms with TanStack + shadcn/ui</a></li> <li><a href="#claude-code--mcp-tips">Claude Code + MCP Tips</a></li> <li><a href="#essential-commands">Essential Commands</a></li> <li><a href="#mental-model">Mental Model</a></li> </ul> <h2 id="wat">wat</h2> <blockquote> <p>shadcn/ui is a set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks and AI models. Open Source. Open Code.</p></blockquote> <h2 id="componentsjson">components.json</h2> <p>Controls how CLI installs components, paths, and styling preferences.</p> Pro CSS https://www.bencode.io/posts/procss/ Sat, 10 May 2025 17:55:56 +1000 https://www.bencode.io/posts/procss/ <ul> <li><a href="#modern-css-fundamentals">Modern CSS Fundamentals</a> <ul> <li><a href="#baseline">Baseline</a></li> <li><a href="#progressive-enhancement">Progressive Enhancement</a></li> <li><a href="#logical-properties-and-values">Logical properties and values</a></li> <li><a href="#css-reset">CSS Reset</a></li> <li><a href="#css-cascade-layers">CSS Cascade Layers</a></li> <li><a href="#css-custom-properties-variables">CSS Custom Properties (variables)</a></li> <li><a href="#colors">Colors</a></li> <li><a href="#typography">Typography</a> <ul> <li><a href="#media-queries-and-custom-properties">Media queries and custom properties</a></li> </ul> </li> <li><a href="#structured-custom-properties">Structured custom properties</a></li> <li><a href="#base-styles">Base styles</a></li> <li><a href="#meaningful-links">Meaningful links</a></li> </ul> </li> <li><a href="#big-picture-design-system">Big picture design system</a> <ul> <li><a href="#wrappers">Wrappers</a> <ul> <li><a href="#modifiers">Modifiers</a> <ul> <li><a href="#option-1-bem-approach">Option 1: BEM approach</a></li> <li><a href="#option-2-data-attributes">Option 2: Data attributes</a></li> </ul> </li> </ul> </li> <li><a href="#landmark-regions">Landmark regions</a></li> </ul> </li> <li><a href="#gems">Gems</a></li> <li><a href="#resources">Resources</a></li> </ul> <h2 id="modern-css-fundamentals">Modern CSS Fundamentals</h2> <h3 id="baseline">Baseline</h3> <p><a href="https://web-platform-dx.github.io/web-features/">Baseline</a> features are ones that are supported by all the major browsers (Chrome, Edge, Safari, and Firefox). Both the <a href="https://developer.mozilla.org/en-US/">MDN web docs</a> and <a href="https://caniuse.com/">caniuse</a> show when a feature has reached either the Newly available or Widely available threshold.</p> Vue https://www.bencode.io/posts/vue/ Thu, 02 Mar 2023 20:45:36 +1100 https://www.bencode.io/posts/vue/ <p>A bunch of (scattered) tips and resources as I experiment with Vue.</p> <ul> <li>Basics: <a href="#general-wisdom"><code>General wisdom</code></a> <a href="#anatomy"><code>Anatomy</code></a> <a href="#events"><code>Eventhandling</code></a> <a href="#watchers"><code>Watchers</code></a> <a href="#computed"><code>Computed props</code></a></li> <li>Components: <a href="#components"><code>Components</code></a> <a href="#props"><code>Props</code></a> <a href="#lifecycle-hooks"><code>Lifecycle hooks</code></a> <a href="#emitting-events"><code>Emitting events</code></a> <a href="#slots"><code>Slots</code></a></li> <li>Fetching Data: <a href="#fetching-data"><code>Calling APIs in hooks</code></a> <a href="#unique-identifiers"><code>Unique identifiers</code></a></li> <li>Styling Components: <a href="#styling"><code>Global vs scoped styles</code></a> <a href="#css-modules"><code>CSS modules</code></a> <a href="#css-v-bind"><code>CSS v-bind</code></a></li> <li>Composition API: <a href="#composition-api"><code>Composition API</code></a> <a href="#reactive-refs"><code>Reactive references</code></a> <a href="#script-setup"><code>script setup</code></a> <a href="#composables"><code>Composables</code></a></li> <li>Routing and Deployment: <a href="#vue-router"><code>Vue Router</code></a> <a href="#history"><code>History</code></a> <a href="#dynamic-routes"><code>Dynamic routes</code></a> <a href="#deployment"><code>Deployment</code></a></li> <li>Advanced: <a href="#preprocessors"><code>Pre-processors</code></a> <a href="#pinia-state-management"><code>Pinia State Management</code></a></li> </ul> <h2 id="overview">Overview</h2> <p>What is Vue?</p> <blockquote> <p>an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications, created by Evan You</p></blockquote> <p>Helpful resouces:</p> <ul> <li><a href="https://vuejs.org/guide/quick-start.html#using-vue-from-cdn">Read the offical docs</a></li> <li><a href="https://vuejs.org/examples/#hello-world">Examples</a></li> <li><a href="https://boussadjra.github.io/vue-cheat-sheet/guide/">Vue cheat sheet</a></li> <li><a href="https://github.com/vuejs/awesome-vue">Awesome Vue</a></li> <li><a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en">Vue.js devtools</a></li> <li><a href="https://marketplace.visualstudio.com/items?itemName=Vue.volar">Volar VSCode extension</a></li> <li><a href="https://vuejs.org/api/built-in-directives.html">Built-in Directives</a></li> </ul> <h2 id="general-wisdom">General wisdom</h2> <ul> <li>It&rsquo;s best to stick to conventions of the web and use <code>camelCase</code> in your script and <code>kebab-case</code> in your template</li> <li>Don&rsquo;t pass functions as <code>props</code>, instead <code>emit</code> events</li> <li><code>props</code> couples components to each other, for broad or deep cross cutting state, level up to state management</li> <li>Test data sources: <a href="https://jsonplaceholder.typicode.com/">JSON Placeholder</a> <a href="https://pokeapi.co/">PokeAPI</a></li> </ul> <h2 id="anatomy">Anatomy</h2> <p>Here is a bare bones vue app. There are literally 3 blocks for <code>script</code>, <code>template</code> (markup) and <code>style</code>:</p>