- Technically Lit
- Posts
- 15 / Where code lives (and why it matters)
15 / Where code lives (and why it matters)
Get a designer’s guide to where code lives and use it to ask smarter questions, spot tradeoffs, and co-create better products.
Welcome to Issue 15!
You know the moment when you open a Figma file and instantly know whether it’s organized or chaos? Layers, components, and naming conventions tell you a lot about how that design will scale. Code works the same way. But here’s the part most designers don’t realize: where code lives completely changes what it can do.
At the simplest level, code lives in files. Just like Word docs or spreadsheets, every piece of code has a home. When developers are writing code on their own machines, it lives in local files. To interact with those files, they use an IDE (integrated development environment), which is basically their version of a design tool. This setup is called local development, a private workspace where they can test ideas, break things, and iterate without anyone else seeing.
Now imagine moving that file to a server. Suddenly, it’s live and “in production”. Real users can interact with it. Now, if that code is handling logic, crunching data, or sending results back into the app, it’s also working in the backend.
But if a browser requests a file from the server so it can render an interface for someone to click around in, you’ve crossed into the frontend. That’s the layer users actually see and experience.
By mapping where code lives, we’ve uncovered two essential concepts:
Environments. Local is where code is written and tested. Production is where it’s running for real users.
Frontend vs. Backend. Code that stays on the server handles backend work like data and logic. Code sent to the browser powers the frontend, the place where your designs come to life.
So, the next time you’re working with developers, ask: “Where does this code live?” That single question helps you connect environments with the user experience, spot the difference between frontend and backend, and strengthen your mental model of how products actually work.
The more you understand where code lives, the more precise your communication with developers becomes. Instead of just handing off a Figma file, you’ll be co-creating solutions that account for both the design vision and the technical realities powering it.
Let’s get Technically Lit,
Nick
Fresh content
Tech Takes | Learn some best practices for creating effective loading states, the importance of understanding state management, and how technology choices impact the user experience. |
TikTok | I just love this take from Adam Wilson. Whether you’re a PM or designer, selling optimism is crucial for getting your ideas built. |
A little something different
Quite possibly the most detailed website I’ve ever seen.