[{"data":1,"prerenderedAt":139},["ShallowReactive",2],{"blog":3},[4,81],{"id":5,"title":6,"body":7,"date":68,"description":69,"extension":70,"meta":71,"navigation":72,"path":73,"seo":74,"stem":75,"tags":76,"__hash__":80},"blog\u002Fblog\u002Fbuilding-design-systems-at-scale.md","Building Design Systems at Scale",{"type":8,"value":9,"toc":60},"minimark",[10,14,19,27,30,34,37,40,44,47,50,54,57],[11,12,13],"p",{},"After two years of building and maintaining a design system with over 120 components, I've collected a set of hard-won lessons about what works — and what quietly falls apart.",[15,16,18],"h2",{"id":17},"start-with-the-spec-not-the-code","Start with the spec, not the code",[11,20,21,22,26],{},"The single biggest unlock was writing engineering specs ",[23,24,25],"em",{},"in Figma"," before touching any code. Each component gets a page that defines every prop, state, slot, and edge case. When the spec is tight enough, implementation becomes almost mechanical.",[11,28,29],{},"This flips the usual workflow. Instead of designers handing off a static mockup and engineers interpreting it, the spec becomes a shared contract. Ambiguity drops. Review cycles shrink.",[15,31,33],{"id":32},"tokens-are-the-foundation","Tokens are the foundation",[11,35,36],{},"Every visual decision — color, spacing, radius, shadow, motion — flows from tokens. Not from Tailwind classes, not from hardcoded values. Tokens.",[11,38,39],{},"In practice this means a single source of truth in Figma variables that maps 1:1 to CSS custom properties. When the brand evolves, you change the token. Everything downstream updates.",[15,41,43],{"id":42},"test-what-matters","Test what matters",[11,45,46],{},"Full coverage sounds good on paper. In practice, 85% line coverage with focused tests on interaction, accessibility, and edge cases catches more real bugs than 100% coverage that tests implementation details.",[11,48,49],{},"We use Vitest with Vue Testing Library. The rule is simple: test what the user sees and does, not how the component is wired internally.",[15,51,53],{"id":52},"ship-incrementally","Ship incrementally",[11,55,56],{},"A design system is never done. The best approach is to ship small, stable increments. Each component goes through: spec → implementation → review → docs → release. No batching. No big-bang launches.",[11,58,59],{},"This keeps the system honest. If a component is hard to document, it's probably too complex. If it's hard to test, the API needs work.",{"title":61,"searchDepth":62,"depth":62,"links":63},"",2,[64,65,66,67],{"id":17,"depth":62,"text":18},{"id":32,"depth":62,"text":33},{"id":42,"depth":62,"text":43},{"id":52,"depth":62,"text":53},"2025-04-10","Lessons learned from creating and maintaining a 120+ component design system across Figma and Vue 3.","md",{},true,"\u002Fblog\u002Fbuilding-design-systems-at-scale",{"title":6,"description":69},"blog\u002Fbuilding-design-systems-at-scale",[77,78,79],"Design Systems","Vue","Figma","mH54WOowtdttF6S6aV3Ew2hDmQ39ndg4XTAXLtCYVhQ",{"id":82,"title":83,"body":84,"date":129,"description":130,"extension":70,"meta":131,"navigation":72,"path":132,"seo":133,"stem":134,"tags":135,"__hash__":138},"blog\u002Fblog\u002Ffrom-jquery-to-vue-a-decade-of-frontend.md","From jQuery to Vue — A Decade of Frontend",{"type":8,"value":85,"toc":124},[86,89,93,96,100,103,114,118,121],[11,87,88],{},"I started writing interfaces as a teenager, hand-coding HTML pages and figuring out CSS floats. By the time I joined my first agency in 2018, jQuery was still the default. A year later, I was helping build a custom JavaScript framework at Accenture.",[15,90,92],{"id":91},"the-jquery-era","The jQuery era",[11,94,95],{},"jQuery wasn't bad — it was practical. You grabbed a DOM node, attached a handler, and things happened. The problem was scale. At a certain point, you're managing state in data attributes, toggling classes manually, and praying that your event delegation doesn't conflict with someone else's.",[15,97,99],{"id":98},"the-component-shift","The component shift",[11,101,102],{},"Vue changed everything for me. The idea that UI is a function of state — that you declare what the screen should look like for a given data shape, and the framework handles the DOM — was a fundamental shift.",[11,104,105,106,109,110,113],{},"Composition API took this further. Instead of organizing code by ",[23,107,108],{},"option type"," (data, methods, computed), you organize by ",[23,111,112],{},"concern",". A composable that handles authentication logic stays together, not scattered across the options object.",[15,115,117],{"id":116},"what-stayed-the-same","What stayed the same",[11,119,120],{},"Despite all the tooling changes, the fundamentals haven't moved. Accessibility still matters. Performance still matters. Semantic HTML is still the foundation. The tools got better at helping us do these things well, but they didn't replace the need to care about them.",[11,122,123],{},"The best frontend engineers I've worked with share one trait: they care about the person using the thing they built. Everything else is tooling.",{"title":61,"searchDepth":62,"depth":62,"links":125},[126,127,128],{"id":91,"depth":62,"text":92},{"id":98,"depth":62,"text":99},{"id":116,"depth":62,"text":117},"2025-02-18","Reflections on how the frontend landscape evolved from DOM manipulation to reactive component architectures.",{},"\u002Fblog\u002Ffrom-jquery-to-vue-a-decade-of-frontend",{"title":83,"description":130},"blog\u002Ffrom-jquery-to-vue-a-decade-of-frontend",[136,137,78],"Frontend","Career","hi1wJ616qLO2w8WuXWVqNqJ9MPstNxi033gpSs0KASI",1778901917566]