How do you assure the quality of your front-end deliverables?

Having a clear goal or what I call success criterias help define how far and what you should target when coding. Defining success criteria would help you outline the problem/project into simple terms. Users should be able to signup, signup should authenticate with xyz provider and so on

This is one of very important steps for any software project. If you don’t start with clear requirements, you are going to be stuck in a never ending loop of feedback and rework. So it’s important to invest some time in the beginning and set clear expectations of what you want to achieve.

One thing I have found helpful is to have a clear refinement and prototype before starting the development made things clear. Spending time and effort on high fidelity wireframes and scope helps us to avoid rework. Poor planning and execution on long term leads to lack of interest among the developers and causes dissatisfaction from the customers. Out of 100%, developing a quality product is just 10% and the remaining goes to the effort we put for clear refinements and strategies.

Defining clear requirements is an underrated task. At my first freelance project doing things without a team or a task manager I got into serious priority and product problems since you don't have a Product Owner describing the client's needs for example. - What's the first thing the user wants to do at your client's website? - Which component is the most important? - Should I aim for a rich design or a simple one? - Does the client care for performance or responsiveness? ...and the list goes on

As a front-end software developer you need to understand the niche of your clients, it competitors and scope of objectives of the business. How can the website generate traffic's for this clients?, What are company in his niches do to generate clients, what SEO plan would you use, how would the user Interface makes the user integration that will apply in the website. Is the business able to grow with that particular user Interface and you need to learn to advice the clients based on research you have carried out in the projects. You and clients need to work as a team to promote the overall success of the business. Not just about building website but buillding a relationship

Code standards are best way to minimize bugs, however as a JavaScript developer you can not completely say you are free from bugs, i do encourage developers to either use .ts or add Eslint when working. It makes your work better and alert you when you are making a mistake or about to wrap a function that'll cause bug.

I personally find that the following 3 practices strike a good balance between maintained productivity and uniform, readable code: 1. Using a code formatter: make sure your whole team is using the same one as well, lack of which can make code reviews more difficult when changes are found where none was made. 2. Typed languages: types can be annoying to deal with, but in the long run, they are definitely worth it. Frontloading a bit of effort by specifying types will allow you later to reap the benefits (when you forgot a lot about your own code or are looking at someone else's code), to know exactly how to use it. 3. WRITE COMMENTS!! That's it for that one.

This is correct. When starting a new project, it is great practice to define the coding standards first before writing the code. For frontend projects, some tasks can be done first: - Install ESLint - Install Prettier - Set up pipelines to automatically check coding styles. Can be done in GitHub actions as well.

I like the KISS (Keep it simple, stupid) design principle. The simpler the solution, the simpler it is to understand and maintain, and the less chance there are of bugs.

Set up a strict ESLint and Prettier environment for the project. Review each PR closely. Follow the DRY principle. This is the way to ensure the quality of your front-end deliverables.

Indeed, testing and debugging play crucial roles in software projects. While manual testing involving QA and developers is important, user acceptance testing remains vital. However, automated testing is equally essential, encompassing unit testing, end-to-end testing, integration testing, functional testing, usability testing, accessibility testing, and performance testing. Embracing a test-first approach or test-driven development ensures software quality and alleviates concerns about required changes. Numerous automated testing tools are available, such as Jest, Mocha, Jasmine, Cypress, Selenium, and Puppeteer. Proper evaluation and selection of these tools contribute to effective testing strategies.

It's worth adding here to test the application with lighthouse. Lighthouse is an open-source automated tool developed by Google that helps improve the quality of web pages by auditing various aspects of web performance, accessibility, SEO, and more. Lighthouse includes an accessibility audit that can assist in identifying and addressing accessibility issues on your website. While Lighthouse is not a comprehensive replacement for manual accessibility testing, it can provide valuable insights and suggestions for making your website more accessible.

Automated testing tools like Jest and Cypress have been game-changers for me. They help catch bugs early on and ensure that new features don't break existing ones. Relying solely on manual testing. While it's important, it can be time-consuming and prone to human error. Automated testing provides a safety net, especially for regression testing.

I've found alot of value in using a local LLM (LLama) to create a skelleton to begin testing my components. It does take some prompting experimentation to get the results your team likes. I find dictating what I want to test specifically works really well.

Besides using these tools in our projects, it's important to write good tests. Ones that actually challenge our code and fail when changes are made to the codebase. There are countless resources explaining the importance of testing, but we also should beware of the quality of our tests to ensure they are doing what they are meant to do.

It's rare to find a project that doesn't leverage some form of version control. In small projects, it provides a structured growth path. With each version, the project's structure refines, allowing for creativity while ensuring the ability to backtrack if needed. For larger projects, the VCS stands out as a collaborative powerhouse. It facilitates seamless teamwork among multiple teams, preventing conflicts and maintaining project integrity. Code review acts as a quality control checkpoint, whether conducted by peers or automated tools. We all make mistakes! Getting a heads-up before they reach production is crucial for presenting our best code.

Integrating code review into the development process has significantly improved the overall code quality in our projects. It not only catches bugs but also fosters learning and knowledge-sharing among the team. Neglecting version control. It's a cornerstone of modern development. Even for personal projects, having a version history can be a lifesaver. Plus, it makes collaboration much smoother.

Code Reviewing standards should be straightforward. The amount of great feedback is inversely proportional to the number of lines you're submitting for the Code Review. Make sure, you raise the PR in such a way that it is readable and a single person can review your code in a lesser time. You need to be respectful of your and the reviewer's time here.

Version control tools like Git and remote repositories such as GitHub, GitLab, and BitBucket offer valuable benefits for software development. They enable efficient team collaboration by providing a centralized platform to manage and share code. With the ability to create branches and use commits, version control ensures safe development, allowing developers to work on separate features and easily revert changes if needed. Additionally, incorporating code reviews helps maintain code integrity and catch errors early in the development process. Through collaborative discussions, code reviews enhance knowledge sharing among team members, leading to higher-quality code and efficient collaboration.

As an addendum, pair programming is something very important, someone more experienced can open a room where guidance for best practices as well as better understanding and process to create a solution block, correction or feature, at the same time. time reviewing solutions to be reviewed and integrated, if you don't have this feature available, always review, test and have a backup branch as well as a development-only branch, as soon as you get success for production to merge to the main code, always expected not being necessary, but having an alternative in case a rollback is needed in a critical failure, I believe that supervised automation is a good solution to satisfy security as well as resource utilization.

If you zoom out a bit from this question I think it is also important to agree with stakeholders what your site actually need to support. This will of course depend on what kind of users your site has. But In my experience a good place to start is to analyze the distribution of your users in terms of browsers/devices. For example if 99% of your users are covered in a set of 5 different clients then maybe thats where you should draw the line. Meaning that every time you release something you make sure testing is successful for these 5 clients. For the remaining 1% you can then take decisions based on severity of issue and number of affected users before spending dev-time on client-specific fixes.

Another important aspect that is often overlooked is Accessibility. Ensuring web interfaces are accessible to all users, including people with disabilities, greatly improves the overall experience of the app. You can use free tools like Google Lighthouse or the axe chrome extension to detect and fix A11y issues.

Realistically speaking, there will always be trade-offs when dealing with compatibility. It is important to understand the limitations of the project during the scoping phase before development starts. Development time should be spent towards delivering the most feature-rich experience to the majority of the users of an application, before handling edge cases. It is perfectly reasonable to expect some browsers and devices to not be fully supported when dealing with complex applications.

Using browser compatibility tools like BrowserStack has saved us a lot of time and headaches. It's crucial for ensuring a consistent user experience across different platforms. Relying solely on automated testing. While it's a valuable tool, manual testing on real devices and browsers is equally important. Automated tools might miss certain nuances that can only be caught by hands-on testing.

Adding my experience to the content, it is of great value to leave the break points well defined and always use the principle of mobile first, thus obtaining a greater minimalist value and delivering integrated functionalities for all devices as well as browsers, being web, assuming functional responsiveness from the outline of the content, we can modulate in a more accurate way the complete scope to be developed, patterns and classes are very valuable solutions for the same. Making any and all types of tests, whether automated or by experts, less error-prone. Also remembering to always use a code transpiler for a greater range of interpretation to all browsers.

Obtaining feedback and iteratively refining your front-end deliverables is a crucial final step in ensuring their quality. Soliciting input from clients, users, and peers allows you to validate assumptions, uncover issues, and identify areas for enhancement. Utilizing tools such as Figma, InVision, or Adobe XD enables the creation and sharing of prototypes, mockups, or wireframes for evaluation. Additionally, tools like Google Analytics, Hotjar, or UserTesting aid in collecting and analyzing user data, behavior, and feedback. With this input, you can refine your deliverables iteratively, ensuring they align with stakeholder expectations and achieve optimal satisfaction.

"You can use tools like Figma, InVision, or Adobe XD to create and share prototypes, mockups, or wireframes of your web interface." could also be one of the first steps? It's not comparable to tools which analyse the user behavior.

One approach to getting feedback is qualitative user testing. This means that you schedule sessions where a few test-persons use your product to perform a set of tasks or scenarios. The test-persons are instructed to think out loud during the test and you record or note what they say. This will get you a better understanding of what the user is thinking or feeling when using your product. This means you can get feedback on not only if things are working as intended or not, but also why. This works well when building new user interfaces. If you simply want to know if some changes you made are better than what you had before, then the better approach would be A/B-testing and analyzing some metrics you want to improve.

Feedback is important at all stages of the project. Additionally, selecting the appropriate feedback method depends on the current stage of the project. While user testing is a method to gather feedback, it may not always be the most optimal.

As much as testing is important, opening up for end user feedback is also crucial for building a user friendly product. However, if there is no accessible way to share feedback for users who may or may not have disabilities, you are already eliminating a large pool of users from being able to report bugs.

One consistently overlooked aspect in an engineering organization is to write things cleanly, not for performance reasons but to ensure a good developer experience. "Chores" like writing unit tests, good IA / folder structure, well-defined naming conventions... etc., lower the cognitive load of each engineer (think x multiplier). It also brings the confidence of each engineer up when submitting their code. Otherwise, many may fear breaking things and constantly write workarounds, creating spaghetti codebases that are nearly impossible to maintain or pay down tech debt.

Bring your own framework agnostic utilities with you everywhere you work in order to have a reliable toolbox for rapid prototyping. This will provide a solid foundation for cross-cutting concerns such as custom event handling, date calculation, and cookie parsing which are easy to forget and hard to debug.

If you are using a custom CSS you'll need to test the responsiveness on all available mobile device to avoid glitches and irregularities.

During usability testing, I'll open up the console in the web dev tools in my browser. On lower quality sites, there will be errors & warnings on the initial page load; on high quality sites, you'll see less or none. Some errors in the console are unavoidable or non-impacting; however, when debugging, having a lot of "noise" there can make it difficult. I also like to run websites through GTMetrix, SEOQuake, the WAVE extension, & Mozilla Observatory. These give you an idea of the speed, SEO, accessibility, and security. These can identify the areas that need the most attention. Examining API requests on a website can show how efficient front end code is written. The more calls, especially duplicates, the less efficient it is.

Care about accessibility. Making the site accessible is not only useful to those with impaired vision or other disabilities, it tends to make the site better and more functional overall. As an absolute minimum, run your site through an automated accessibility checker. The automated tests should cover things like colour contrast, proper alt tags for images, header structure etc. Then, check that your site works well when zoomed in and with setting the browser font size to extra large. If it doesn’t, you can probably fix most of it by setting all media query values to rem or em instead of px (assuming you have already made the site responsive). Try running through your site using keyboard only. And use semantic tags.