https://www.bencode.io/categories/web/ Recent content in Web on Benny Simmonds Hugo -- 0.149.1 en-us Mon, 01 Dec 2025 17:45:00 +1100 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> 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> https://www.bencode.io/posts/redux/ Wed, 29 Apr 2020 12:04:16 +0000 https://www.bencode.io/posts/redux/ <p>Once you start working with <a href="https://www.bencode.io/posts/react/">React</a> in anger, there is a tipping point to be aware of where:</p> <ul> <li>the complexity of data flows piles up</li> <li>the same data is being rendered in multiple places</li> <li>the number of state changes blow out</li> </ul> <p>Being able to tackle these problems in a single place is where Redux fits in.</p> <h1 id="contents">Contents</h1> <ul> <li><a href="#contents">Contents</a></li> <li><a href="#the-problem">The Problem</a> <ul> <li><a href="#option-1-lift-the-state">Option 1 lift the state</a></li> <li><a href="#option-2-react-context">Option 2 react context</a></li> <li><a href="#option-3-redux">Option 3 Redux</a></li> </ul> </li> <li><a href="#a-chat-with-redux">A chat with redux</a></li> <li><a href="#container-vs-presentation-components">Container vs Presentation Components</a></li> <li><a href="#the-redux-principles">The Redux Principles</a> <ul> <li><a href="#actions">Actions</a></li> <li><a href="#the-store">The Store</a></li> <li><a href="#immutability">Immutability</a></li> <li><a href="#reducers">Reducers</a></li> </ul> </li> <li><a href="#react-redux">React-Redux</a> <ul> <li><a href="#react-redux-provider">React-Redux Provider</a></li> <li><a href="#react-redux-connect">React-Redux Connect</a> <ul> <li><a href="#mapstatetoprops">mapStateToProps</a></li> <li><a href="#mapdispatchtoprops">mapDispatchToProps</a></li> </ul> </li> </ul> </li> <li><a href="#redux-setup">Redux Setup</a></li> <li><a href="#async-and-apis">Async and APIs</a> <ul> <li><a href="#mock-api">Mock API</a></li> <li><a href="#api-client-wrappers">API Client Wrappers</a></li> <li><a href="#redux-middleware">Redux Middleware</a></li> <li><a href="#redux-async-libraries">Redux Async Libraries</a></li> <li><a href="#thunks">Thunks</a></li> </ul> </li> <li><a href="#conditional-mapstatetoprops">Conditional mapStateToProps</a></li> <li><a href="#polish-the-finer-things">Polish (the finer things)</a> <ul> <li><a href="#spinner-component">Spinner component</a></li> <li><a href="#status-api-and-feedback">Status API and feedback</a></li> <li><a href="#server-side-validation">Server side validation</a></li> <li><a href="#client-side-validation">Client side validation</a></li> <li><a href="#optimistic-deletes">Optimistic deletes</a></li> </ul> </li> <li><a href="#testing">Testing</a> <ul> <li><a href="#redux-connected-components">Redux Connected Components</a></li> <li><a href="#action-creators">Action Creators</a></li> <li><a href="#thunks-1">Thunks</a></li> <li><a href="#reducers-1">Reducers</a></li> <li><a href="#store">Store</a></li> </ul> </li> </ul> <h1 id="the-problem">The Problem</h1> <p>Imagine a fairly deep component hierarchy, starting with your top level <code>App</code> component. Deep down the tree, there are two child components that need to access a common piece of data (e.g. customer data). How should these components access the data they require?</p> https://www.bencode.io/posts/react/ Sun, 05 May 2019 22:08:10 +1000 https://www.bencode.io/posts/react/ <ul> <li><a href="#react">React</a> <ul> <li><a href="#react-no-frills">React No Frills</a></li> </ul> </li> <li><a href="#tools">Tools</a> <ul> <li><a href="#npm">npm</a></li> <li><a href="#prettier">Prettier</a></li> <li><a href="#eslint">ESLint</a></li> <li><a href="#vite">Vite</a> <ul> <li><a href="#vite-proxy">Vite Proxy</a></li> </ul> </li> <li><a href="#typescript">TypeScript</a></li> <li><a href="#bleeding-edge-and-alternative-tools">Bleeding Edge and Alternative Tools</a></li> </ul> </li> <li><a href="#jsx">JSX</a> <ul> <li><a href="#dom-control">DOM control</a></li> <li><a href="#styling">Styling</a></li> <li><a href="#rendering-lists">Rendering Lists</a></li> <li><a href="#handling-events">Handling Events</a></li> <li><a href="#passing-parameters-to-event-handlers">Passing Parameters to Event Handlers</a></li> <li><a href="#passing-jsx-as-props">Passing JSX as Props</a></li> </ul> </li> <li><a href="#react-hooks">React Hooks</a> <ul> <li><a href="#usestate">useState</a></li> <li><a href="#useeffect">useEffect</a></li> <li><a href="#custom-hooks">Custom Hooks</a></li> <li><a href="#usecontext">useContext</a></li> <li><a href="#useref">useRef</a></li> </ul> </li> <li><a href="#forms-and-user-input">Forms and User Input</a> <ul> <li><a href="#push-cart-to-server">Push Cart to Server</a></li> </ul> </li> <li><a href="#react-ecosystem">React Ecosystem</a> <ul> <li><a href="#tanstack-router">TanStack Router</a> <ul> <li><a href="#vite-setup">Vite Setup</a></li> <li><a href="#routetreegents">routeTree.gen.ts</a></li> <li><a href="#router-setup">Router Setup</a></li> </ul> </li> <li><a href="#tanstack-query">TanStack Query</a></li> </ul> </li> <li><a href="#resources">Resources</a></li> </ul> <h2 id="react">React</h2> <p>React is a JavaScript <em>library</em> for building component based interactive UI&rsquo;s.</p>