Smart coding practices for developers

🏆 How GreatFrontEnd's code base is structured 🏆 Some practices we use on a semi-large code base like greatfrontend.com → Typesafety: We use TypeScript. Code with types eliminate an entire class of bugs and is easier to read and maintain → Linting and formatting: We use Prettier and ESLint with a set of opinionated lint rules. Our lint rules enforce import order, object keys order, enable fix + format on save in IDE → Monorepo: We use Turborepo with a few packages – app, questions, guidebooks, lint rules, etc. → Package management: We use pnpm, which is a great package manager → UI components: A11y is hard, so we use headless components (Radix UI) that come with built-in behavior and a11y and customize styling. Alternatives include Headless UI, Ark UI and Base UI → Routing: Next.js is our choice of meta frameworks. The `/app` directory is for routing only. All UI code and data fetching code are in separate directories. That way we can move/rename routes easily without affecting downstream files → Data fetching: We use tRPC as a typesafe data fetching approach → Statically generated atomic CSS: The easiest way to have a scalable CSS file size in large code bases. Use libraries like Tailwind and StyleX → Z-index list: Z-index wars is the most commonly fought war in front end development. We defined a list of z-indices and use them for global-level elements like dialogs, popovers, tooltips, etc. This is a tricky topic so I might go deeper into it another day. → Content: All content lives in the repository and not in an external CMS. That way we can ensure the same content across development, staging, and production environments. → Util libs: We standardized on utility libraries like Lodash, date-fns, hooks (usehooks-ts) → Separate product code vs common code: We have clear separation of common code vs product-specific code. Design system components should not embed business logic. → Presentation vs Business: Split components according to presentational vs business logic (frequently called small vs dumb but I don't like the word "dumb). That way it's easier to test them → File organization: Modularize and co-locate code by products/features/verticals. All code related to auth, marketing, purchases, blog, etc. are in their own directories → State management: For most apps, most state is server-fetched data, which Tanstack Query does an excellent job in managing. For local state, reach for context before using 3rd party libs like Redux, Zustand, Jotai → Performance: Optimize when you encounter perf problems. No need for useMemo, useCallback yet. The React compiler will help with this in future anyway #react #nextjs #tailwindcss #javascript #typescript #supabase #prisma #eslint

"Vibe Coding !== Low Quality Work: a guide to responsible AI-assisted dev" ✍️ My latest free article: https://lnkd.in/gjMdjMWV The allure of "vibe coding" – using AI to "move faster and break even more things" – is strong. AI-assisted development is undeniably transformative, lowering barriers and boosting productivity. But speed without quality is a dangerous trap. Relying uncritically on AI-generated code can lead to brittle "house of cards" systems, amplify tech debt exponentially, and introduce subtle security flaws. Volume ≠ Quality. A helpful mental model I discuss (excellently illustrated by Forrest Brazeal) is treating AI like a "very eager junior developer." It needs guidance, review, and refinement from experienced hands. You wouldn't let a junior ship unreviewed code, right? So how do we harness AI's power responsibly? I've outlined a field guide with practical rules: ✅ Always review: Treat AI output like a PR from a new hire. ✅ Refactor & test: Inject engineering wisdom – clean up, handle edge cases, test thoroughly. ✅ Maintain standards: Ensure AI code meets your team's style, architecture, and quality bar. ✅ Human-led design: Use AI for implementation grunt work, not fundamental architecture decisions. The goal isn't to reject vibe coding, but to integrate it with discipline. Let's use AI to augment our craft, pairing machine speed with human judgment. #softwareengineering #programming #ai

Are you using Claude to autocomplete or to think in parallel with you? Many developers treat it like a faster tab key. The real power shows up when you use it as a second brain running alongside yours. Here’s what that looks like in practice. 1. Run Work in Parallel Spin up multiple sessions and worktrees so planning, refactoring, reviewing, and debugging happen simultaneously instead of sequentially. 2. Start Complex Tasks in Plan Mode Outline architecture and approach before writing code, so execution becomes clean and intentional instead of reactive. 3. Maintain a Living CLAUDE.md Document mistakes, patterns, and guardrails so Claude improves with your workflow and reduces repeated errors over time. 4. Turn Repetition into Skills Automate recurring tasks with reusable commands and structured prompts so you build once and reuse everywhere. 5. Delegate Debugging Provide logs, failing tests, or CI output and let Claude iterate toward solutions while you focus on higher-level thinking. 6. Challenge the Output Ask for edge cases, diff comparisons, cleaner abstractions, and alternative designs to push beyond “good enough.” 7. Optimize Your Environment Set up your terminal, tabs, and context structure so you reduce friction and maximize visibility while working. 8. Use Subagents for Heavy Lifting Offload complex or exploratory tasks to parallel agents so your main context stays clean and focused. 9. Query Data Directly Use Claude to interact with databases, metrics, and analytics tools so you reason about data instead of manually extracting it. 10. Turn It Into a Learning Engine Ask for diagrams, system explanations, and critique so every project improves your mental models. The difference is simple: Autocomplete makes you faster. Parallel thinking makes you better. The question is how you’re choosing to use it.

This developer vibe coding their way into brain rot feels like a warning for all of us. I came across a Reddit post that made me stop scrolling. A developer shared how, two years ago, they built their first WordPress plugin from scratch. No mentor. No AI. Just outdated docs and a random YouTube playlist. They struggled, but in the process, their coding skills tripled. They still remember the joy of finally “getting it” after hours of debugging. Fast forward: they discovered AI. At first, it felt like magic. Every time they got stuck, AI had an answer. But slowly, their skills started to fade. They weren’t thinking through problems anymore. They were just… copying. During exams (where AI wasn’t allowed), they could barely keep up. Meanwhile, a classmate who never used AI topped the leaderboard every time. The post ended with a warning 👇 AI can become a crutch. It can rob you of the joy of programming. That hit me. Because let’s be honest... a lot of us are leaning on AI more than we’d like to admit. So how do we avoid “AI coding brain rot”? Here are 5 practices I’ve found helpful: 1) Code without AI once a week. Treat it like lifting weights for your brain. 2) Use AI as a teacher, not just a code generator. Ask why, not just what. 3) Keep personal projects AI-free. Struggle a little, that’s where growth happens. 4) Write context before code. Define requirements, constraints, and architecture first. (This is where tools like Precursor shine, context prevents lazy prompting.) 5) Review your AI-generated code line by line. Don’t ship anything you couldn’t explain in an interview. AI isn’t bad. It’s powerful. But like any tool, it’s dangerous if it replaces the very skills that make us good developers. What do you think? Is AI making us sharper… or making us soft?

Early in my career, I thought deep focus was enough. I’d disappear into my code for days and then resurface with a finished feature. It felt productive. It wasn’t. Once, I spent two weeks building something I was proud of, only to realize I had optimized for a direction that wasn’t aligned with the team’s thinking. Two weeks gone. That experience changed how I work. Now I try to, • Check in early • Share rough designs • Ask clarifying questions • Align before I build One practice I really learned to value at Google is writing design docs. Before implementation, we write down: – The problem – The context – The proposed approach – Trade-offs – Open questions It forces clarity. And often, it exposes gaps in thinking before a single line of code is written. Even if your company doesn’t have a formal design doc process, sending a simple one-pager before building can dramatically reduce rework. Technical skill builds features. Clear communication builds the right features. What’s one habit that made you more effective as an engineer?

𝗧𝗵𝗲 𝗣𝗿𝗼𝗯𝗹𝗲𝗺 𝘄𝗶𝘁𝗵 𝗔𝗜 𝗖𝗼𝗱𝗶𝗻𝗴 𝗧𝗼𝗱𝗮𝘆: You prompt → AI writes code → You ship → You start from zero. Every. Single. Time. This is why most developers plateau. They treat AI like chat bots. Top performers do something different: 𝗖𝗼𝗺𝗽𝗼𝘂𝗻𝗱 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴. ━━━━━━━━━━━━━━━━━━━━ 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗶𝘁? Building AI systems with memory. → Every PR educates the system → Every bug becomes a permanent lesson → Every code review updates agent behavior Regular AI coding makes you productive 𝘁𝗼𝗱𝗮𝘆. Compound Engineering makes you better 𝗲𝘃𝗲𝗿𝘆 𝗱𝗮𝘆 𝗮𝗳𝘁𝗲𝗿. ━━━━━━━━━━━━━━━━━━━━ 𝟰 𝗔𝗰𝘁𝗶𝗼𝗻𝘀 𝘁𝗼 𝗜𝗺𝗽𝗹𝗲𝗺𝗲𝗻𝘁: 𝟭. 𝗖𝗼𝗱𝗶𝗳𝘆 𝗬𝗼𝘂𝗿 𝗘𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 Create AGENTS.md or .cursorrules in your repo. Document patterns, pitfalls, and PR references. This becomes your AI's "onboarding doc." 𝟮. 𝗠𝗮𝗸𝗲 𝗕𝘂𝗴𝘀 𝗣𝗮𝘆 𝗗𝗶𝘃𝗶𝗱𝗲𝗻𝗱𝘀 When fixing bugs, ask: Can a lint rule prevent this? Should AGENTS.md document it? A true fix ensures the agent never repeats it. 𝟯. 𝗘𝘅𝘁𝗿𝗮𝗰𝘁 𝗥𝗲𝘃𝗶𝗲𝘄 𝗣𝗮𝘁𝘁𝗲𝗿𝗻𝘀 Every review comment is a potential system upgrade. Turn feedback into reusable standards the agent auto-applies. 𝟰. 𝗕𝘂𝗶𝗹𝗱 𝗥𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝗪𝗼𝗿𝗸𝗳𝗹𝗼𝘄𝘀 Document task sequences. Next time: "Follow the add API endpoint workflow." The system already knows what to do. ━━━━━━━━━━━━━━━━━━━━ 𝗧𝗵𝗲 𝗖𝗼𝗺𝗽𝗼𝘂𝗻𝗱 𝗘𝗳𝗳𝗲𝗰𝘁 Imagine the AI saying: "Naming updated per PR #234. Over-testing removed per PR #219 feedback." It learned your taste—like a smart colleague with receipts. ━━━━━━━━━━━━━━━━━━━━ 𝗧𝗵𝗲 𝗟𝗲𝘃𝗲𝗿𝗮𝗴𝗲 𝗛𝗶𝗲𝗿𝗮𝗿𝗰𝗵𝘆 Bad code = one line affected Bad AGENTS.md instruction = 𝗲𝘃𝗲𝗿𝘆 𝘀𝗲𝘀𝘀𝗶𝗼𝗻 affected Treat agent config like production code. Highest-ROI investment you can make. ━━━━━━━━━━━━━━━━━━━━ Stop treating AI interactions as disposable. Start treating them as investments. That's how you go from "AI User" to "𝗔𝗜 𝗠𝘂𝗹𝘁𝗶𝗽𝗹𝗶𝗲𝗿." What's one pattern you've compounded into your AI workflow? 👇 #AgenticCoding #SoftwareEngineering #TechLeadership #GenAI #DeveloperProductivity

Hey Scouts! 🦅 Have you ever heard of the “Boy Scout Rule” for cleaner code? When developing software, one of the most effective ways to maintain a healthy codebase is to apply what’s often called the “Boy Scout Rule”: leave the code better than you found it. This doesn’t mean undertaking grand redesigns every time you touch a file, but rather making small, incremental improvements as you work. Maybe it’s extracting a function into a more descriptive name, removing a dead variable, or rewriting a tangled conditional in a clearer way. These seemingly minor changes accumulate and keep technical debt at bay. Practicing this rule ensures that every interaction with your codebase is an opportunity for enhancement, not just a means to deliver a new feature. Over time, you and your team will notice that code feels easier to read, navigate, and adjust. This steady, disciplined commitment to continuous improvement helps foster a culture of craftsmanship, ensuring that your code doesn’t just work, it evolves gracefully as the system grows and matures.

Best Practices for Writing Clean and Maintainable Code One of the worst headaches is trying to understand and work with poorly written code, especially when the logic isn’t clear. Writing clean, maintainable, and testable code—and adhering to design patterns and principles—is a must in today’s fast-paced development environment. Here are a few strategies to help you achieve this: 1. Choose Meaningful Names: Opt for descriptive names for your variables, functions, and classes to make your code more intuitive and accessible. 2. Maintain Consistent Naming Conventions: Stick to a uniform naming style (camelCase, snake_case, etc.) across your project for consistency and clarity. 3. Embrace Modularity: Break down complex tasks into smaller, reusable modules or functions. This makes both debugging and testing more manageable. 4. Comment and Document Wisely: Even if your code is clear, thoughtful comments and documentation can provide helpful context, especially for new team members. 5. Simplicity Over Complexity: Keep your code straightforward to enhance readability and reduce the likelihood of bugs. 6. Leverage Version Control: Utilize tools like Git to manage changes, collaborate seamlessly, and maintain a history of your code. 7. Refactor Regularly: Continuously review and refine your code to remove redundancies and improve structure without altering functionality. 8. Follow SOLID Principles & Design Patterns: Applying SOLID principles and well-established design patterns ensures your code is scalable, adaptable, and easy to extend over time. 9. Test Your Code: Write unit and integration tests to ensure reliability and make future maintenance easier. Incorporating these tips into your development routine will lead to code that’s easier to understand, collaborate on, and improve. #CleanCode #SoftwareEngineering #CodingBestPractices #CodeQuality #DevTips

The 10 Rules NASA Swears By to Write Bulletproof Code: 0. Restrict to simple control flow ↳ No goto, setjmp, longjmp, or recursion. Keep it linear and predictable. This ensures your code is easily verifiable and avoids infinite loops or unpredictable behavior. 1. Fixed loop bounds ↳ Every loop must have a statically provable upper bound. No infinite loops unless explicitly required (e.g., schedulers). This prevents runaway code and ensures bounded execution. 2. No dynamic memory allocation after initilization ↳ Say goodbye to malloc and free. Use pre-allocated memory only. This eliminates memory leaks, fragmentation, and unpredictable behavior. 3. Keep functions short ↳ No function should exceed 60 lines. Each function should be a single, logical unit that’s easy to understand and verify. 4. Assertion density: 2 per function ↳ Use assertions to catch anomalous conditions. They must be side-effect-free and trigger explicit recovery actions. This is your safety net for unexpected errors. 5. Declare data at the smallest scope ↳ Minimize variable scope to prevent misuse and simplify debugging. This enforces data hiding and reduces the risk of corruption. 6. Check all function returns and parameters ↳ Never ignore return values or skip parameter validation. This ensures error propagation and prevents silent failures. 7. Limit the preprocessor ↳ Use the preprocessor only for includes and simple macros. Avoid token pasting, recursion, and excessive conditional compilation. Keep your code clear and analyzable. 8. Restrict pointer use ↳ No more than one level of dereferencing. No function pointers. This reduces complexity and makes your code easier to analyze. 9. Compile with all warnings enabled ↳ Your code must be compiled with zero warnings in the most pedantic settings. Use static analyzers daily to catch issues early. Some of these rules can be seen as hard to follow, but you can't allow room for error when lives are at stake. Which ones are you still applying? #softwareengineering #systemdesign ~~~ 👉🏻 Join 46,001+ software engineers getting curated system design deep dives, trends, and tools (it's free): ➔ https://lnkd.in/dCuS8YAt ~~~ If you found this valuable: 👨🏼💻 Follow Alexandre Zajac 🔖 Bookmark this post for later ♻️ Repost to help someone in your network

𝗖𝗹𝗲𝗮𝗻 𝗰𝗼𝗱𝗲 𝗶𝘀𝗻’𝘁 𝗷𝘂𝘀𝘁 𝗮𝗯𝗼𝘂𝘁 𝘄𝗿𝗶𝘁𝗶𝗻𝗴 𝗰𝗼𝗿𝗿𝗲𝗰𝘁 𝗰𝗼𝗱𝗲... It’s about writing code that’s easy to read, change, and maintain. Here are 𝟲 𝗲𝘀𝘀𝗲𝗻𝘁𝗶𝗮𝗹 𝗿𝘂𝗹𝗲𝘀 to help you master clean coding: 🔹 𝗦𝗘𝗣𝗔𝗥𝗔𝗧𝗜𝗢𝗡 𝗢𝗙 𝗖𝗢𝗡𝗖𝗘𝗥𝗡𝗦 (𝗦𝗢𝗖) Best for: Organizing your codebase into logical units ✅ Split responsibilities across modules or layers ✅ Each component should do only one thing well ✅ Makes testing and debugging easier 🔹 𝗗𝗢𝗖𝗨𝗠𝗘𝗡𝗧 𝗬𝗢𝗨𝗥 𝗖𝗢𝗗𝗘 (𝗗𝗬𝗖) Best for: Collaboration and long-term maintainability ✅ Write code for your future self and teammates ✅ Add clear, concise comments for complex logic ✅ Use docstrings, READMEs, and code annotations 🔹 𝗗𝗢𝗡’𝗧 𝗥𝗘𝗣𝗘𝗔𝗧 𝗬𝗢𝗨𝗥𝗦𝗘𝗟𝗙 (𝗗𝗥𝗬) Best for: Avoiding duplicate logic and bugs ✅ Reuse code via functions, modules, or utilities ✅ Centralize logic so one change updates all instances ✅ Easier to scale and refactor 🔹 𝗞𝗘𝗘𝗣 𝗜𝗧 𝗦𝗜𝗠𝗣𝗟𝗘, 𝗦𝗧𝗨𝗣𝗜𝗗 (𝗞𝗜𝗦𝗦) Best for: Writing code that others (and you) understand ✅ Prioritize clarity over cleverness ✅ Simple logic is easier to debug and extend ✅ If it’s hard to read, it’s probably wrong 🔹 𝗧𝗘𝗦𝗧 𝗗𝗥𝗜𝗩𝗘𝗡 𝗗𝗘𝗩𝗘𝗟𝗢𝗣𝗠𝗘𝗡𝗧 (𝗧𝗗𝗗) Best for: Building reliable and bug-free systems ✅ Start with a failing test before writing code ✅ Write just enough code to make it pass ✅ Refactor later with confidence 🔹 𝗬𝗢𝗨 𝗔𝗜𝗡’𝗧 𝗚𝗢𝗡𝗡𝗔 𝗡𝗘𝗘𝗗 𝗜𝗧 (𝗬𝗔𝗚𝗡𝗜) Best for: Avoiding overengineering ✅ Build only what’s needed right now ✅ Future-proofing often leads to waste and complexity ✅ Less code = fewer bugs 📌 Clean Code Summary SOC → Modular code with clear responsibilities DYC → Self-explanatory code + solid documentation DRY → Reuse logic, reduce redundancy KISS → Keep it simple and readable TDD → Let tests guide your design YAGNI → Build what’s necessary today, not tomorrow 💬 What’s your personal golden rule for clean code? References: 📌 Grokking SOLID Design Principles: https://lnkd.in/gHFnkPh8 📌 Grokking Design Patterns for Engineers and Managers: https://lnkd.in/gHYiMuEh #systemdesign #coding #interviewtips