QA process for frontend tasks

Frontend developers must ensure that their code meets design specifications, functions correctly, and provides a seamless user experience. By following those best practices, we can reduce design revisions, minimize errors, and ensure high quality.

Ensure the design specifications are implementable
it's important to ensure that the design specifications are implementable within the given technology stack and tools. This requires collaborating with the design team before the development stage to ensure it can be implemented effectively.

If it’s already in the development stage, and the design provided wouldn’t be achievable or need much more time involved than estimated, make sure to chat with the tech lead first to see if there’s an alternative way of implementation; if not, chat with the design team for necessary design adjustments.
Ensure the theming meets the design
When styling components, as front-end developers, we need to match the design as closely as possible with the variables provided by the theme at the style guide and theme setup stage. While they don’t have to be pixel perfect ( spacing and font size wise ), it should still be visually consistent with the design.

Don't skip if the design wasn’t provided for different element states ( such as hover, focus, and active ). Follow our standard implementations. If you are still unsure how to style them, please get in touch with the designer for guidance.

Frontend developers need to be familiar with Figma basics, such as inspecting the elements, the relationship between components, export assets, etc. ( Do not copy the CSS code from Figma, as it can be very inaccurate sometimes and doesn’t contain the variables we are using. )
Use responsive design
it's important to ensure the implementation is responsive and works well on different devices and screen sizes. Most of the time, the design team will provide a mobile design and a desktop design. Please use your best judgment to ensure all the components are adjusted and positioned correctly across different screen sizes on different pages/sections where the component appears. If you are unsure, please jam with the designer for guidance.
Cross-browser testing
After an implementation/task, it’s part of the process to double-check if the component works well across all modern browsers available on your workstation ( Chrome, Safari ( if available ), Firefox, Edge, Opera ) through different screen sizes to help prevent design revisions and ensure quality for end-users. In select cases, please also test with BrowserStack. Kalamuna has an account.
Following code standards and providing necessary comments
Following our code standards and adding comments helps not just other developers to understand your code but also helps you organize and remember what you coded when doing revisions and fixes. Check what has been provided inside the theme before working on a project, keep what can be reused in mind, don’t repeat yourself, and don’t use custom values unless necessary.
SCSS coding standards
Comments | CSS + SCSS
Design changes during development
In an ideal world, front-end developers should always wait until the design is set in stone before implementing it. But in many cases, due to the client’s feedback, content structure is altered, or bugs are found later in the original design due to different factors. In many cases, we are given a theming update.

Before doing the changes right away, estimate the work. If many changes are involved and additional hours of development time will be needed, please let the designer know that the implementation has already been done and ask if it is necessary to rework the frontend part. And always double-check if there are any other design revisions in place to avoid additional revisions and repeat work.

And most importantly, always follow the code standards, leave meaningful commit messages, explain what has been done in the ticket, and put comments in the code so we are fully prepared for the changes and revisions.

I hope those tips can help you with your daily frontend tasks, and happy theming!