web

Do We Need to Test UI Changes During Code Review?

Pandiyan MuruganLeave a comment

Code reviews are a crucial part of the development process. They help catch bugs early. They maintain code quality and guarantee consistency. But when it comes to UI changes, one question that comes up every time –

“Should I test every UI change during code review?”

Let’s break it down.

The Real Deal

When reviewing code, your job isn’t to become a full-time QA. You’re not expected to click through every screen or test every browser. But that doesn’t mean you just review the code and approve without even running it.

Here’s a simple rule I follow:

Do a smoke test. Leave deep testing to the person who wrote the code.

Responsibilities – Who Does What?

Code Author (the one raising the PR):

  • Clear information of what has been changed.
  • Links to relevant to related requirements document if any.
  • Tests all use cases — positive, negative, edge cases.
  • Ensures responsiveness and accessibility.
  • Runs the app in different screen sizes (desktop, mobile, etc.).
  • Adds before/after screenshots or screen recording in the PR.
  • Mentions what was tested and how.

Code Reviewer (the one reviews the PR):

  • Pull the branch and run a quick smoke test.
    • Does the UI render?
    • Does it break anything obvious?
    • Are core interactions working? (clicks, inputs, nav)
  • Review the code:
    • Is the styling clean?
    • Any hardcoded values?
    • Are components reusable and scoped?
    • Does it break any layout in high level?

You’re the second line of defense, not the QA team.

When to Dig Deeper?

You don’t always need to click every flow, but in these cases, it’s worth going beyond a smoke test:

  • It’s a high-impact UI change.
  • There’s a risky refactor.
  • The code seems too simple for the change it claims to solve.
  • You’re curious or feel something’s off.

TL;DR

  • Do a smoke test during code review.
  • Let the code author do full testing.
  • Make sure they show what’s changed with screenshots or a demo.
  • Your goal: catch obvious issues, review clean code, ensure UI logic is solid.

Let your review be lightweight, focused, and valuable. Not every change needs a deep dive — just enough to ensure you’re not shipping broken UI.

How to Center a Div Using Tailwind CSS

Pandiyan MuruganLeave a comment

Centering a div both horizontally and vertically on a webpage is a common requirement in web development. Tailwind CSS provides an efficient and straightforward way to achieve this using its utility-first approach. In this guide, we will demonstrate how to center a div using Tailwind CSS.

Step-by-Step Guide

  1. Include Tailwind CSS:
    Start by including Tailwind CSS in your HTML file. You can use the CDN for quick setup.
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Center a Div</title>
       <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
   </head>
   <body class="h-screen flex items-center justify-center">
       <div class="bg-blue-500 text-white p-4">
           Centered Div
       </div>
   </body>
   </html>
  1. Understanding the Classes:
  • h-screen: Sets the height of the body to 100% of the viewport height, creating a full-screen layout.
  • flex: Applies Flexbox layout to the body, making alignment straightforward.
  • items-center: Vertically centers the div within the body by aligning items along the cross axis.
  • justify-center: Horizontally centers the div within the body by aligning items along the main axis.
  • bg-blue-500 text-white p-4: These classes style the div with a blue background, white text, and padding for better visibility.

Result:
The combination of these classes will center the div perfectly in the middle of the viewport.

    Conclusion

    By leveraging the utility classes provided by Tailwind CSS, centering a div becomes an intuitive and efficient task. This approach not only simplifies the alignment process but also enhances the readability and maintainability of your code. Tailwind CSS’s utility-first design ensures that you can achieve desired layouts with minimal custom CSS, allowing you to focus on the overall design and functionality of your application.