Kaleb Garner (@kalebgarner) header
Kaleb Garner (@kalebgarner) profile picture

Kaleb Garner

@kalebgarner

Engineering Lead | Systems & Platform Architecture | Speaker

 North Texas
kalebgarner.dev/
Joined September 2024
  • Tweets9
  • Following19
  • Followers13
3Media
Photo by Kaleb Garner (@kalebgarner)Photo by Kaleb Garner (@kalebgarner)Photo by Kaleb Garner (@kalebgarner)
May 2024: I was laid off from my job in tech, five months before my wedding. I was thrown into a job hunt that I was completely unprepared for, and I scrambled. I've thought a lot about what I'd do differently before a season like that, and what I started doing after (1/5):
4
49
more replies
- Don't restrict your identity to only your role. You can grow beyond your job description. Making myself a better developer overall in turn gave me more room to make an impact at my job and opened up doors I didn't think were possible (4/5).
1
9
For everyone who is curious, I ended up getting offered my position back (and the wedding went smoothly). If you're going through a layoff right now, feel free to reach out. If there's anything I can do, I'm happy to help.
8
Brought back my favorite version of my personal site! Updated design, new content, and lots of cool things coming. If you want to read more about how I broke into tech or see my speaking engagements, check it out at: kalebgarner.dev
Image from Kaleb Garner (@kalebgarner)
2
80
That's a wrap on #CYC26! I can't even begin to explain how inspired I am leaving this conference. I'm excited to start putting more of my ideas out there, building in public, and sharing more content and concepts I've been working on for a while! This is just the beginning.
Kaleb Garner speaking at Commit your Code

ALT Kaleb Garner speaking at Commit your Code

1
13
173
Yesterday, I gave my talk "Design Systems 101: The Developer Approach to Better Frontends". Check out the cheat sheet cards AND if you want to find the starter repo I shared in my talk, check it out here: github.com/kgarner-dev/desig… @CommitYourCode #cyc26
Element 1, Component Library What It Is: Composable building blocks your team uses to meet business needs Value baked in by default... accessibility, behavior, interaction One component should do one job... and only one job What It Looks Like: Primitives: the raw structure of the app (i.e. Box, Stack) Components: the building blocks of the app (i.e. Button, Field) Layouts: the foundation of the pages (i.e. PageShell, layout.tsx) True Impact: Developers: Stop rebuilding foundations, spend your time solving business needs Users: Consistent, predictable interactions Stakeholders: Faster development timelines, fewer regressions

ALT Element 1, Component Library What It Is: Composable building blocks your team uses to meet business needs Value baked in by default... accessibility, behavior, interaction One component should do one job... and only one job What It Looks Like: Primitives: the raw structure of the app (i.e. Box, Stack) Components: the building blocks of the app (i.e. Button, Field) Layouts: the foundation of the pages (i.e. PageShell, layout.tsx) True Impact: Developers: Stop rebuilding foundations, spend your time solving business needs Users: Consistent, predictable interactions Stakeholders: Faster development timelines, fewer regressions

Element 2, Design Tokens What It Is: Single source of truth for shared visual values Color, spacing, typography, motion... singular source of truth Not a style guide... the true values that are consumed by the application What It Looks Like: Global tokens: the raw value (i.e. #4f46e5) Semantic tokens: the alias layer (i.e. brand.primary) Output: CSS properties that are consumed by the components True Impact: Developers: No more “which color is our brand color?”, singular source of truth Users: A product that looks intentional, not thrown together Stakeholders: Rebrand or variants can be rolled out without massive refactors

ALT Element 2, Design Tokens What It Is: Single source of truth for shared visual values Color, spacing, typography, motion... singular source of truth Not a style guide... the true values that are consumed by the application What It Looks Like: Global tokens: the raw value (i.e. #4f46e5) Semantic tokens: the alias layer (i.e. brand.primary) Output: CSS properties that are consumed by the components True Impact: Developers: No more “which color is our brand color?”, singular source of truth Users: A product that looks intentional, not thrown together Stakeholders: Rebrand or variants can be rolled out without massive refactors

Element 3, Shared Patterns What It Is: Proven solution to recurring UX problems in an application Decided once at a systematic level, not at a feature level The source of truth to the application’s behavior What It Looks Like: Component Patterns: The consistent functionality baked into components (i.e., table filtering / sorting) System Patterns: The consistent functionality of the application (i.e. drawer vs. modal) Negative Patterns: Empty states, loading states, error handling, intential decisions True Impact: Developers: Limits decisions needed on a feature-to-feature basis Users: Builds confidence in how the system is going to respond across multiple surfaces Stakeholders: Consistent experience without auditing every team’s individual choices

ALT Element 3, Shared Patterns What It Is: Proven solution to recurring UX problems in an application Decided once at a systematic level, not at a feature level The source of truth to the application’s behavior What It Looks Like: Component Patterns: The consistent functionality baked into components (i.e., table filtering / sorting) System Patterns: The consistent functionality of the application (i.e. drawer vs. modal) Negative Patterns: Empty states, loading states, error handling, intential decisions True Impact: Developers: Limits decisions needed on a feature-to-feature basis Users: Builds confidence in how the system is going to respond across multiple surfaces Stakeholders: Consistent experience without auditing every team’s individual choices

1
1
33
Load more