<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ QA - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ QA - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Mon, 25 May 2026 22:38:32 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/qa/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ How Google Does Code Reviews – Quality Assurance Tips from Google's Documentation ]]>
                </title>
                <description>
                    <![CDATA[ A code review, sometimes called code Quality Assurance, is the practice of having other people check your code after you write it.  Code reviews bring many benefits to the process of writing and delivering software: Ensures consistency through your ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/what-google-taught-me-about-code-reviews/</link>
                <guid isPermaLink="false">66bc55edda80a491ea5a5f5f</guid>
                
                    <category>
                        <![CDATA[ code review ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Google ]]>
                    </category>
                
                    <category>
                        <![CDATA[ QA ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Quality Assurance ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kealan Parr ]]>
                </dc:creator>
                <pubDate>Thu, 14 Jan 2021 18:09:46 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/01/Google.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>A code review, sometimes called code Quality Assurance, is the practice of having other people check your code after you write it. </p>
<p>Code reviews bring many benefits to the process of writing and delivering software:</p>
<ul>
<li>Ensures consistency through your codebase.</li>
<li>Teaches all members of the review (helps knowledge transfer).</li>
<li>Builds contextual awareness regarding what might affect other parts of the team</li>
<li>Helps avoid breaking builds</li>
<li>Casts fresh eyes over a code change to search for optimisations and simplifications in the change.</li>
<li>Promotes quality and helps make sure no one forgot or missed anything.</li>
</ul>
<p>Google has 1,918 repositories on <a target="_blank" href="https://github.com/google">their GitHub</a> across multiple languages, and even more that aren't open source.</p>
<p>One of their codebases is shared by over 25,000 Googlers, and typically has <a target="_blank" href="https://cacm.acm.org/magazines/2016/7/204032-why-google-stores-billions-of-lines-of-code-in-a-single-repository/fulltext">40,000 commits</a> daily (16,000 human changes, and 24,000 by automated systems). Each day it has to serve around 800,000 queries per second during peak times.</p>
<p>Google has published their engineering practices, so let's see how they review code at their scale, with so many commits a day.</p>
<p>Google refers to changes in their codebases as <strong>CLs</strong> standing for change lists. It's just a unit of work / piece of code going through review. </p>
<h1 id="heading-how-to-prepare-for-code-reviews">How to Prepare for Code Reviews</h1>
<p>Firstly, before you even think about the code review process, try and focus on <strong>who</strong> will do the review. Try to pick a subject matter expert. Pick someone who is familiar with this codebase or area of the codebase. </p>
<p>Sometimes this may even mean having different people review different parts of the code. But less <a target="_blank" href="https://sback.it/publications/icse2018seip.pdf">than 25% of code review's at Google have more than one reviewer.</a></p>
<p>Getting someone to respond in a timely manner is also important. To avoid bottle necks and overloading individuals, just CC reviewers onto the change to review it at their convenience if they want to.</p>
<h1 id="heading-how-to-run-fast-code-reviews">How to Run Fast Code Reviews</h1>
<p>Code reviews should be completed quickly. The <strong>maximum</strong> length of time for a review should be one business day.</p>
<p>Why the urgency? I've personally had QA's sometimes take weeks or longer.</p>
<ul>
<li><strong>It becomes a blocker.</strong> Although the author of the code moves onto new work, new changes start to form a back log, and the delays can build up to weeks or months.</li>
<li><strong>Developers feel frustrated.</strong> If the reviewer asks for major changes but only responds every 3 days, it is frustrating for the developer working on that change. But with quick responses, whenever you require explanation of exactly what you need to do, the frustration fades away.</li>
<li><strong>Code quality can degrade.</strong> If your reviews are always slow, developers are less likely to do code clean ups, refactoring work or general code improvement ("If my reviewer won't reply for 4 days what's even the point?"), and the code quality submitted in the reviews is more likely to go down.</li>
</ul>
<p>The main reason code reviews can be fast is because they're small. Rather than sending a 1,000 line CL, they're separated into multiple CL's – pushing 10 smaller changes of 100 lines for example.</p>
<p>Google also has emergencies where code changes have to be made quickly to resolve major problems in production. In these cases, code quality is relaxed. This review should immediately become the reviewers first priority. There are some examples of emergencies Google has faced <a target="_blank" href="https://www.freecodecamp.org/news/what-is-a-software-post-mortem/">here</a> if you're curious.</p>
<h2 id="heading-googles-code-review-standards">Google's Code Review Standards</h2>
<p>The key rule Google emphasizes is:</p>
<p><strong>Reviewers should generally approve a change once it definitely improves the overall code health, even if it isn't perfect.</strong></p>
<p>The key point Google seem to be making is that perfect code doesn't exist. If it makes it <strong>better</strong>, that is enough. </p>
<p>It's definitely a balancing act between something being better, and <strong>how</strong> much better it could be. If you could add more feedback to make significant improvements, there may need to be more work done on the code.</p>
<h2 id="heading-what-googlers-look-for-in-code-reviews">What Googlers Look for in Code Reviews</h2>
<p>When doing code reviews, Google focuses on these elements according to their <a target="_blank" href="https://google.github.io/eng-practices/review/reviewer/looking-for.html">engineering practices documentation</a>:</p>
<blockquote>
<p><strong>Design</strong>: Is the code well-designed and appropriate for your system? Does this change belong in your codebase, or in a library? Does it integrate well with the rest of your system?  </p>
<p><strong>Functionality</strong>: Does the code behave as the author likely intended? Is the way the code behaves good for its users? Mostly, we expect developers to test CLs well-enough that they work correctly by the time they get to code review.   </p>
<p><strong>Complexity</strong>: Could the code be made simpler? Would another developer be able to easily understand and use this code when they come across it in the future? Is it over-engineered for its current use case?  </p>
<p><strong>Tests</strong>: Does the code have correct and well-designed automated tests? Will the tests actually fail when the code is broken? Will they start producing false positives? Does each test make simple and useful assertions?  </p>
<p><strong>Naming</strong>: Did the developer choose clear names for variables, classes, methods, etc.?  </p>
<p><strong>Comments</strong>: Are the comments clear and useful? Ensure where sensible comments explain <strong>why</strong> something is being done, rather than how.  </p>
<p><strong>Style &amp; Consistency</strong>: Does the code follow our <a target="_blank" href="http://google.github.io/styleguide/">style guides</a>?  </p>
<p><strong>Documentation</strong>: Did the developer also update relevant documentation?</p>
</blockquote>
<p>Google has style guides for multiple languages like <a target="_blank" href="https://google.github.io/styleguide/cppguide.html">C++</a>, <a target="_blank" href="https://google.github.io/swift/">Swift</a>, <a target="_blank" href="https://google.github.io/styleguide/htmlcssguide.html">HTML/CSS</a>, <a target="_blank" href="https://google.github.io/styleguide/lispguide.xml">Lisp</a>, <a target="_blank" href="https://google.github.io/styleguide/jsguide.html">JavaScript</a> and <a target="_blank" href="https://google.github.io/styleguide/">more.</a></p>
<p>Having a document that everyone can refer to helps standardise the code. It also helps clarify what the expectations are in the review process.</p>
<h2 id="heading-how-googlers-review-code">How Googlers Review Code</h2>
<p>There is a three-stage process for code review in Google's engineering practices. Here's a list of things you'd need to cover if you were to review:</p>
<ol>
<li>Get a high level overview of the change</li>
<li>Examine the main parts of the change</li>
<li>Look through the rest of the code, in a sensible order</li>
</ol>
<p>Let's go over each step in more detail.</p>
<h2 id="heading-1-get-a-high-level-overview-of-the-code-change">1. Get a High Level Overview of the Code Change</h2>
<p>Look at the code change's description/summary. Does it all make sense? For example, if someone is changing a codebase that is being deleted next week, push back on the change <em>courteously,</em> and explain why the change doesn't look needed anymore. </p>
<p>It's inefficient if people are spending time on work that isn't actually needed, so have a look at your development life cycle and see why this might be happening. The earlier you can catch these issues the better.</p>
<p>In order to get a high level overview of the code, you may want to briefly scan the code components to see how it all works together. </p>
<p>If you see a serious architectural problem or something majorly wrong, you should share your observations immediately at this stage. Even if you don't have time to review every single other element of the review. Reviewing the rest may well even end up being a waste of time if the architectural problems are severe enough. </p>
<p>Aside from this, there are 2 major reasons why you should send your review comments immediately: </p>
<ul>
<li>Googlers will often email a change, and then immediately start new work based on that change. If the change in review need serious adjustments, they may be building on something that needs to be significantly changed.</li>
<li>Big changes to the CL may take a while to finish. Developers all have deadlines and it's courteous to try and help them meet them by letting them start rework as soon as possible.</li>
</ul>
<h2 id="heading-2-examine-the-main-parts-of-the-code-change">2. Examine the Main Parts of the Code Change</h2>
<p>Once you have had an overview, review the "main" parts of the change.</p>
<p>Find the file or files that are central to the CL. Often, there is one file that has the largest number of changes, and it’s the major piece of the CL.</p>
<p>Spend most of your focus reviewing these pieces. This provides context to all the smaller pieces, and generally makes it faster to review. </p>
<p>If the CL is too large for you to get a good overview and understand the flow, it's a good sign the developer should be splitting up their CL into smaller changes.</p>
<h2 id="heading-3-look-through-the-rest-of-the-code-in-a-sensible-order">3. Look Through the Rest of the Code, in a Sensible Order</h2>
<p>Once you have a good overview of the change, it's time to drill down into the details and go file by file. </p>
<p>Each reviewer generally does this differently. Some go in the order that the version control presents to them and some pick a particular order. Choose what makes sense to you. It's important to just review <strong>everything</strong>, and miss nothing.</p>
<h3 id="heading-review-every-line-of-code">Review Every Line of Code</h3>
<p>Don't miss or skim important details. Sometimes there might be config files, or generated code you can scan briefly looking for irregularities. But your job here is to be very thorough and carefully scrutinise the code. </p>
<p>Make sure you think about bugs, race conditions, alternate approaches, conciseness, readability, and so on.</p>
<p>If you can't understand the code, it's highly likely other developers won't be able to either, and should ask the developer to clarify it.</p>
<h3 id="heading-understand-the-context">Understand the Context</h3>
<p>Often times the version control software will only show the changed lines. But it's important to read the lines before and after, or the whole file, to ensure you understand exactly what the change is doing.  </p>
<p>You may only see someone adding 2 more <code>if</code> blocks in a change. But if you look at the context you might see that the <code>if</code> <code>else</code> block now has 15 different <code>if</code>'s inside it. Then you can reject the code change and properly improve the code quality in this area, rather than making it worse.</p>
<p>Remember code degradation happens slowly, with every change that goes in. Our main aim is to ensure the quality trends consistently up, and we never go backwards.</p>
<h2 id="heading-how-googlers-write-code-feedback"><strong>How Googlers Write Code Feedback</strong></h2>
<p>Google has some specific sections covering how to do <a target="_blank" href="https://chromium.googlesource.com/chromium/src/+/master/docs/cr_respect.md">code reviews courteously, and respectfully</a>. This isn't in opposition to being clear and as helpful as you can to the developer. The golden rule here is to make comments about the <em>code</em> and not the developer. </p>
<h2 id="heading-what-to-do">What to Do:</h2>
<p>#### </p>
<blockquote>
<p><strong>Ask for the why:</strong> If it is unclear why the author is doing things a certain way, feel free to ask why they made a particular change. Not knowing is OK, and asking “Why” leaves a written record that will help answer this question in the future. (And sometimes, “I'm curious, why did you decide to do it that way?” can help the author to rethink their decision.)  </p>
<p><strong>Find an end:</strong> If you like things neat, it’s tempting to go over a code review over and over until it’s perfect, dragging it out for longer than necessary. It’s soul-deadening for the recipient, though. Keep in mind that “LGTM” does not mean “I vouch my immortal soul this will never fail”, but “looks good to me”. If it looks good, move on. (That doesn’t mean you shouldn’t be thorough. It’s a judgment call.) And if there are bigger refactorings to be done, move them to a new CL. (<a target="_blank" href="https://chromium.googlesource.com/chromium/src/+/HEAD/docs/cr_respect.md">Source</a>)</p>
</blockquote>
<h2 id="heading-what-not-to-do">What Not to Do</h2>
<blockquote>
<p><strong>Don't use extreme or very negative language:</strong> Please don't say things like “no sane person would ever do this” or “this algorithm is terrible”, whether it’s about the change you're reviewing or about the surrounding code. While it might intimidate the reviewee into doing what you want, it’s not helpful in the long run - they will feel incapable, and there is not much info in there to help them improve. “This is a good start, but it could use some work” or “This needs some cleanup” are nicer ways of saying it. Discuss the code, not the person.  </p>
<p><strong>Don't bikeshed:</strong> Always ask yourself if this decision <em>really</em> matters in the long run, or if you're enforcing a subjective preference. It feels good to be right, but only one of the two participants can win that game. If it’s not important, agree to disagree, and move on. (<a target="_blank" href="https://chromium.googlesource.com/chromium/src/+/HEAD/docs/cr_respect.md">Source</a>)</p>
</blockquote>
<p>Remember code reviews can sometimes trend towards finding issues or discussions with code and not praise.</p>
<p>If your reviewer has addressed your comments, or they have done some optimisation or smart code you like, thank them. Say you like the approach / how they have solved an issue. </p>
<p>Conversely, thank the reviewer if they thoroughly explain what they want and promptly answer your questions.</p>
<p>I have had some reviews where reviewers have put huge comments explaining something I misunderstood and I can still remember who it was and what they said.</p>
<h2 id="heading-how-to-handle-pushback-in-code-reviews">How to Handle Pushback in Code Reviews</h2>
<p>Sometimes the developer who is receiving the review might disagree with the changes that you're proposing. Here's how to handle that.</p>
<h3 id="heading-consider-that-they-might-be-right">Consider That They Might Be Right</h3>
<p>Sometimes the developer is closer to the code and how it works, and they may be right. If they are, move on from that discussion point and leave that code as it is.</p>
<p>But if they're not, or they've misunderstood something, you should insist on the change. Respond to what the developer initially challenged you on, and explain your reasoning courteously. </p>
<p>Code quality improvements tend to happen in small incremental steps, and review is one way it happens. Insist on the code improvement, even if it means extra work for the developer.</p>
<h3 id="heading-try-to-avoid-ill-fix-this-later">Try to Avoid "I'll fix this later..."</h3>
<p>One of the most common issues in reviews is not that people disagree whether the code change is necessary, but rather that they want to do it under a different ticket or do it later. So if you pass this review, they assure you that they will follow up later and fix the issues.</p>
<p>Generally speaking, <em>following up later</em> rarely happens. This doesn't mean there's something wrong with the developer or their work ethic. But it's easy to forget, have priorities change, or even just get lost in their queue of work. </p>
<p>Insist that the work gets done now. There is no real fantastic gain to merging changes in the codebase you have to immediately fix. You are just adding technical debt that <em>might</em> be followed up on later, or might be forgotten<em>.</em> Fixing lots of tickets later is an easy way for quality to drop.</p>
<p>The only exception to this is <a target="_blank" href="https://google.github.io/eng-practices/review/emergencies.html">emergencies</a>, which involve the highest priority bugs Google deals with where there is something seriously wrong. This could be services going down, or errors crashing people's pages in production.</p>
<p>There is naturally an eagerness to merge changes ASAP, and the review might accept slightly lower quality, with a follow up fix immediately being written. The main point is that the first change removes the emergency, and the second change fixes it <em>properly.</em></p>
<h1 id="heading-conclusion"><strong>Conclusion</strong></h1>
<p>I hope this has explained some helpful concepts Google makes use of in their code review process. I wrote this to better cement it into my own mind, and was curious about how other companies handle the QA process. </p>
<p>I found that there are quite a few points that I can take away and apply to the reviews I conduct.</p>
<p>The document I referred to throughout this article can be found <a target="_blank" href="https://google.github.io/eng-practices/review/reviewer/">here</a>.</p>
<p>I share my writing on <a target="_blank" href="https://twitter.com/kealanparr">Twitter</a> if you enjoyed this article and want to see more.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Test and Play with Web APIs the Easy Way with Postman ]]>
                </title>
                <description>
                    <![CDATA[ In a world where static websites and apps increasingly depend on separately maintained APIs, it can be hard to figure out how they work by just playing around in the browser.  So how can we use Postman to both test our existing APIs and understand ho... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-test-and-play-with-web-apis-the-easy-way-with-postman/</link>
                <guid isPermaLink="false">66b8e36e47e3b55b9fb6ee45</guid>
                
                    <category>
                        <![CDATA[ api ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Developer Tools ]]>
                    </category>
                
                    <category>
                        <![CDATA[ programing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ QA ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Quality Assurance ]]>
                    </category>
                
                    <category>
                        <![CDATA[ REST API ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Engineering ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Testing ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tools ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Colby Fayock ]]>
                </dc:creator>
                <pubDate>Tue, 30 Jun 2020 16:34:32 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/06/postman.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>In a world where static websites and apps increasingly depend on separately maintained APIs, it can be hard to figure out how they work by just playing around in the browser. </p>
<p>So how can we use Postman to both test our existing APIs and understand how they work?</p>
<ul>
<li><a class="post-section-overview" href="#heading-what-is-postman">What is Postman?</a></li>
<li><a class="post-section-overview" href="#heading-what-are-we-going-to-build-learn">What are we going to build / learn?</a></li>
<li><a class="post-section-overview" href="#heading-part-0-getting-set-up-with-postman">Part 0: Getting set up with Postman</a></li>
<li><a class="post-section-overview" href="#heading-part-1-an-introduction-to-postman">Part 1: An introduction to Postman</a></li>
<li><a class="post-section-overview" href="#heading-part-2-creating-a-new-postman-request-to-get-info-about-squirtle">Part 2: Creating a new Postman request to GET info about Squirtle</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/p/a02335e1-4f9a-453d-8916-db6b8419cf99/part-3-creating-a-collection-of-requests-in-postman-for-the-pok-api">Part 3: Creating a collection of requests in Postman for the PokéAPI</a></li>
<li><a class="post-section-overview" href="#heading-part-4-making-post-requests-with-postman-to-translate-sentences-to-sound-like-yoda">Part 4: Making POST requests with Postman to translate sentences to sound like Yoda</a></li>
<li><a class="post-section-overview" href="#heading-part-5-authenticating-requests-to-the-lord-of-the-rings-api-with-an-api-key">Part 5: Authenticating requests to the Lord of the Rings API with an API Key</a></li>
</ul>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/KFuaybrXCdw" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<h2 id="heading-what-is-postman">What is Postman?</h2>
<p><a target="_blank" href="https://www.postman.com/">Postman</a> is a tool teams can use to reliably test APIs using easy to use configurations. It comes stocked with features you would expect when dealing with APIs, including authentication, setting headers, customizing the payload, and a bunch more that help reduce the friction of using an API.</p>
<p>And it’s not just for testing. The beauty is that this can be used for many aspects of working with APIs for many different members of the team. Maybe a Project Manager wants to verify that things work or might find it easier to make a change straight with the API, or a QA Engineer needs to make sure everything still works, or a developer wants to actively make changes while working on the API itself.</p>
<p>The best part about it – Postman provides collaboration features. The free tier includes exporting and importing collections of saved API requests as well as creating shared links. If you're part of a team, they have paid tiers that allow you to sync up your collections to make sure everyone has the most recent and up to date collection.</p>
<h2 id="heading-what-are-we-going-to-build-learn">What are we going to build / learn?</h2>
<p>We’re going to walk through two different example APIs to cover the concepts of Postman.</p>
<p>First, we’ll walk through some simple HTTP requests with a <a target="_blank" href="https://pokeapi.co/">public API for Pokémon</a>.</p>
<p>We’ll then use the Yoda Translator API for one part to demonstrate how to make specific HTTP requests.</p>
<p>Once we understand how the basics work, we’ll use the <a target="_blank" href="https://the-one-api.herokuapp.com/">Lord of the Rings API</a> to learn how authentication works with APIs. For this, you’ll need to register for a free account for an API key.</p>
<h2 id="heading-part-0-getting-set-up-with-postman">Part 0: Getting set up with Postman</h2>
<p>Before we get started, you’ll need <a target="_blank" href="https://www.postman.com/downloads/">Postman</a> in order to follow along with this walkthrough. The good news, is Postman is available for free on Mac, Windows, and Linux, so you should be able to find a version that works for you.</p>
<p>Get Postman: <a target="_blank" href="https://www.postman.com/downloads/">https://www.postman.com/downloads/</a></p>
<p>Once downloaded, go through the standard installation instructions, open it up, and we should be ready to go!</p>
<h2 id="heading-part-1-an-introduction-to-postman">Part 1: An introduction to Postman</h2>
<p>The first time you open up Postman you’ll immediately be shown a launchpad with a bunch of options to get started.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-launchpad.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>It might seem a bit overwhelming, but let’s break down some of the key concepts that we’ll need to know.</p>
<h3 id="heading-requests">Requests</h3>
<p>A request is kind of what it sounds like, it’s a specific API request. This will be a single type of request, whether it’s a GET or POST to a specific endpoint. You’ll want to create new requests for each type of endpoint which will allow you to move between them when testing.</p>
<h3 id="heading-collections">Collections</h3>
<p>A collection is a group of requests. This is handy for organizing your requests into different groups. This could be as simple as two totally different APIs (ie. Twitter vs Slack) or it could be two different groups of APIs for a single API (ie. Twitter Tweets API vs Twitter Accounts API).</p>
<h3 id="heading-authorization">Authorization</h3>
<p>Authorization is how requests are authenticated with an API, whether by a person making a request or by a computer making that request on your behalf. This commonly comes in the form of an API key which can be a static value assigned to your account or dynamically generated with tools like <a target="_blank" href="https://oauth.net/">OAuth</a>.</p>
<h3 id="heading-environments">Environments</h3>
<p>Environments will allow you to configure your endpoints to use specific variables that make it easier to use the same endpoints between different environments. For instance, you might have the same <code>/profile</code> endpoint on both your production and development environments, but they have different domains. Environments lets you manage a single request with a variable domain.</p>
<h3 id="heading-workspaces">Workspaces</h3>
<p>We won’t go too far into workspaces in this post, but it allows you to manage and organize different sets of collections. Imagine if you want to use Postman for both work and a personal project, you might have a Work workspace as well as a Personal workspace.</p>
<p>For the purposes of this article, we’ll be covering Requests, Collections, and Authorization.</p>
<h2 id="heading-part-2-creating-a-new-postman-request-to-get-info-about-squirtle">Part 2: Creating a new Postman request to GET info about Squirtle</h2>
<p>Now that we have a better understanding of the different terminology, let’s actually create a request.</p>
<p>At the top left of the UI you should see a but orange button that says <strong>New</strong>. Go ahead and click that and then select <strong>Request</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-create-new-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Before we get into the request itself, it requests a few things.</p>
<p>This first thing requires is a name. We’re going to start off by requesting information about the Pokémon Squirtle, so let’s name this “Pokémon - Squirtle”.</p>
<p>It also requires a collection, so click <strong>Create Collection</strong> and let’s name the collection “My Favorite Pokémon”.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-configure-new-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Click the orange checkmark button next to the collection name then hit <strong>Save</strong>.</p>
<p>At this point we’ll have a new request, so let’s build that request.</p>
<p>There are two things we’ll first need to fill out for our first request:</p>
<ul>
<li><strong>Request type:</strong> GET, POST, PUT, etc - we’ll use GET</li>
<li><strong>Request URL:</strong> The endpoint for your API request - for our request we’ll use <a target="_blank" href="https://pokeapi.co/api/v2/pokemon/squirtle/">https://pokeapi.co/api/v2/pokemon/squirtle/</a></li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-squirtle-pokemon-get.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>And once you make sure those are correct, you can simply hit the blue <strong>Send</strong> button on the right and we’ve successfully made our first request!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-squirtle-pokemon-get-success.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We immediately get a few things we can see:</p>
<ul>
<li><strong>Body:</strong> at the bottom we should now see the response body of the API request. For our Squirtle API, we should have a JSON object with data like <code>abilities</code>, <code>base_experience</code>, and <code>forms</code>.</li>
<li><strong>Status:</strong> on the right, we should see the HTTP status code. “200 Ok” is a good sign and it means it was successful!</li>
<li><strong>Time:</strong> simply how long the request took to finish</li>
<li><strong>Size:</strong> the size in KB (in our example) of the response data</li>
</ul>
<p>You can also hover over Status, Time, and Size and get a more in depth look at each option.</p>
<p>So we made our first request!</p>
<p>Once thing to notice before we move on is that our request looks like it’s in a browser tab. If we’re done with that particular request, we can close the tab and click <strong>Save</strong> to make sure all of our changes are there for next time!</p>
<h2 id="heading-part-3-creating-a-collection-of-requests-in-postman-for-the-pokeapi">Part 3: Creating a collection of requests in Postman for the PokéAPI</h2>
<p>Now that we’ve created a request, let’s create a collection of them. Technically we already had to create a new collection for Part 2, but we’ll create a new one to learn how collections themselves work.</p>
<p>At the top left of the UI, click the orange <strong>New</strong> button again and select <strong>Collection</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-create-new-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Similar to a request, it asks for a name so let’s call this “PokéAPI”. Optionally you can add a description, then click <strong>Create</strong> at the bottom.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-configure-new-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>On the left, you’ll now see your collection. You can select and expand the folder since we’ll be working with it.</p>
<p>Before we add a request, the PokéAPI has different types of requests, so it makes sense to organize it a little more thoroughly. So let’s click the three dots next to the PokéAPI collection and select <strong>Add Folder</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-add-folder-to-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Similar to the others, this asks for a name. Folders are kind of like collections inside of a collection, so you get similar options. Let’s name this one “Pokémon” and click the orange <strong>Save</strong> button like before.</p>
<p>Now let’s add our requests! First, click the three dots next to the Pokémon folder, similar to how we added a folder to the collection, but this time select <strong>Add Request</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-add-request-to-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Let’s name this request “Pokemon”. While it might be confusing that we have a Pokemon request inside of the Pokémon folder, Pokemon is just one of the endpoints of the Pokémon group.</p>
<p>Now, let’s use the same exact API that we used with our Squirtle request before:</p>
<ul>
<li><strong>Request Type:</strong> GET</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://pokeapi.co/api/v2/pokemon/squirtle/">https://pokeapi.co/api/v2/pokemon/squirtle/</a></li>
</ul>
<p>And similar to before, when we hit the blue <strong>Send</strong> button, we should see a successful request!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-get-request-squirtle.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now let’s add another request. Follow the same process as before to create a new request under the PokéAPI Pokémon folder and let’s name this request “Abilities”.</p>
<p>If you scroll through the response from the first Squirtle endpoint, you see a lot of other API urls. At the top, we have <code>abilities</code> and we have two different ones — “torrent” and “rain-dish”.</p>
<p>Choose your favorite Squirtle ability and copy the <code>url</code> value into the new Abilities request we just created, I’m going to use <code>rain-dish</code>.</p>
<p>We can leave the Request Type as GET, hit the blue <strong>Send</strong> button, and we can again see a successful response!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-request-squirtle-abilities.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Here we get a lot of information about our Squirtle ability Rain Dish and some of the details come in different languages which is cool!</p>
<p>So now we have a new PokéAPI collection with a Pokémon folder representing the group of Pokémon API endpoints including Pokemon and abilities.</p>
<p>We’re going to stop Part 3 with those 2 requests, but feel free to continue on and add as many of the PokéAPI requests as you’d like!</p>
<h2 id="heading-part-4-making-post-requests-with-postman-to-translate-sentences-to-sound-like-yoda">Part 4: Making POST requests with Postman to translate sentences to sound like Yoda</h2>
<p>So far we’ve only made GET requests, but what if we wanted to make a POST request where we need to actually send some data?</p>
<p>For making a POST request, we’re going to use the Yoda Translator API from funtranslations.com. While this API only takes a single parameter, it’s still a good public endpoint we can use to understand the concept.</p>
<p>First, let’s create a new collection with a new request:</p>
<ul>
<li><strong>Collection:</strong> Fun Translations</li>
<li><strong>Request:</strong> Yoda</li>
</ul>
<p>This time, instead of a GET request, our request configuration will be:</p>
<ul>
<li><strong>Request Type:</strong> POST</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://api.funtranslations.com/translate/yoda">https://api.funtranslations.com/translate/yoda</a></li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-new-request-yoda-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now this time, if we hit the blue <strong>Send</strong> button, we’ll notice we don’t get a successful 200 response, we get a 400!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-yoda-api-bad-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We never actually set up any data to be posted to the API and it requires that data, so let’s add it.</p>
<p>Right below the <strong>Request URL</strong>, click <strong>Body</strong>. Then instead of none, select <strong>raw</strong> as the body type. Finally, on the far right of the types, change <strong>Text</strong> to <strong>JSON</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-yoda-request-body-type.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Then, in the space below it, you can add the following:</p>
<pre><code class="lang-json">{
    <span class="hljs-attr">"text"</span>: <span class="hljs-string">"Hello, I am learning how to test APIs with Postman!"</span>
}
</code></pre>
<p>And now click the blue <strong>Send</strong> button again and we get a successful response!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-post-body-yoda-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can apply this concept to pretty much any API. Postman doesn’t only permit you to post JSON, it allows you to use the other formats that we see listed in the Body Type section, meaning you have a lot of options depending on what the API you’re using requires.</p>
<h2 id="heading-part-5-authenticating-requests-to-the-lord-of-the-rings-api-with-an-api-key">Part 5: Authenticating requests to the Lord of the Rings API with an API Key</h2>
<p>For the rest of the walkthrough, we’re going to use the Lord of the Rings API.</p>
<p>First up, the Lord of the Rings API requires authentication in order to make requests using an API key. So to start, you’ll before we dive in, you’ll need to go <a target="_blank" href="https://the-one-api.herokuapp.com/sign-up">create a free account</a>.</p>
<p><a target="_blank" href="https://the-one-api.herokuapp.com/sign-up">https://the-one-api.herokuapp.com/sign-up</a></p>
<p>Once you sign up and log in, the first thing you’ll see is your API key! Either copy this key down or remember where you can find it for later. If you leave the page, you can always grab it by navigating to <strong>Welcome</strong> and then <strong>Account</strong> in the navigation of the API website.</p>
<p>To get started, let’s first create a new collection and request:</p>
<ul>
<li><strong>Collection:</strong> Lord of the Rings</li>
<li><strong>Folder:</strong> Movie</li>
<li><strong>Request:</strong> All Movies</li>
<li><strong>Request Type:</strong> GET</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://the-one-api.herokuapp.com/v1/movie">https://the-one-api.herokuapp.com/v1/movie</a></li>
</ul>
<p>Once you’re set with the above, click <strong>Send</strong>, and you’ll notice immediately it gives a response that says 401 and that it’s unauthenticated.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-unauthorized-request-lord-of-the-rings-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Because this API requires the API key, this is exactly what we expected. So let’s click on the <strong>Authorization</strong> tab. We can then select a <strong>Type</strong> of <strong>Bearer Token</strong>, and on the right, we can paste in our key that we just set up with the Lord of the Rings API.</p>
<p>And as soon as we hit <strong>Send</strong>, we now see a successful response!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-authorized-successful-lord-of-the-rings-api-request.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This worked really great, but what if we have a bunch of requests that use a single key. Do we have to manage that on each request?</p>
<p>Instead of managing it on each individual request, we can manage it on the collection. Let’s first build another request.</p>
<p>Under our Lord of the Rings collection and in the Movie folder, create a new request:</p>
<ul>
<li><strong>Request:</strong> Quote by Movie ID</li>
<li><strong>Request Type:</strong> GET</li>
<li><strong>Request URL:</strong> <a target="_blank" href="https://the-one-api.herokuapp.com/v1/movie/%7Bid%7D">https://the-one-api.herokuapp.com/v1/movie/{id}</a></li>
</ul>
<p>In this request, let’s use an ID from the response of the first request, I’m going to use <code>5cd95395de30eff6ebccde5b</code> which is the ID of The Two Towers, so the request URL will look like:</p>
<pre><code>https:<span class="hljs-comment">//the-one-api.herokuapp.com/v1/movie/5cd95395de30eff6ebccde5b</span>
</code></pre><p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-inherit-authorization-from-parent.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Now, instead of setting our token in the request Authorization, we’re going to leave the type as <strong>Inherit auth from parent</strong>. Click on the three dots next to the collection and select <strong>Edit</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-edit-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Here, we’re going to do the same exact thing we did with the first request but on the Collection configuration. Select the <strong>Authorization</strong> tab, under type select <strong>Bearer Token</strong>, and in the <strong>Token</strong> field again paste your token.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-add-authorization-api-key-token-to-collection.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Finally, click <strong>Update</strong> and hit the blue <strong>Send</strong> button again and we can see a successful request!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-authorized-request-inherit-token-from-parent.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can now go back to our All Movies request and update the Authorization to use a Type of Inherit auth from parent and it should still continue to work!</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/06/postman-successful-request-lord-of-the-rings-api.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<h2 id="heading-what-else-can-we-do-with-postman">What else can we do with Postman?</h2>
<p>While I covered a lot of the basics, there’s quite a lot more you can do with Postman. Here are a few of my favorites.</p>
<h3 id="heading-environment-variables">Environment Variables</h3>
<p>If you’re working as a developer on a project, it’s likely that your team uses multiple environments, such as a development and production environment. Instead of creating and maintaining completely separate requests, you can add an environment variable and instead change that variable when switching between environments!</p>
<p>Variables apply to many scenarios, but that’s a common use. Check out Postman’s docs to learn how.</p>
<p><a target="_blank" href="https://learning.postman.com/docs/postman/variables-and-environments/variables/">https://learning.postman.com/docs/postman/variables-and-environments/variables/</a></p>
<h3 id="heading-import-and-export-collections-and-data">Import and Export Collections and Data</h3>
<p>A great thing about Postman is once you have your requests all organized, you can export them for others to use. This also means that you can import collections from other team members. This makes it much easier to make sure everyone’s using the same collection.</p>
<p>Bonus: you can even store these files in a Git repository, as they’re just JSON.</p>
<p>But keep in mind - if you’re using Authorization on the collection like we went over in this guide, you’ll want to make sure you don’t include that when exporting your collection.</p>
<p><a target="_blank" href="https://learning.postman.com/docs/postman/collections/importing-and-exporting-data/">https://learning.postman.com/docs/postman/collections/importing-and-exporting-data/</a></p>
<h3 id="heading-automated-testing">Automated testing</h3>
<p>Once you have a set of requests in a collection and even better, if you’re storing them in Github, you can begin to use those requests as part of a way to manage automated testing of your API.</p>
<p>While there are a few solutions for doing this, Postman includes a Collection runner built right into the app and <a target="_blank" href="https://learning.postman.com/docs/postman/collection-runs/command-line-integration-with-newman/">Newman</a> is a command line tool that lets you run tests right from the terminal.</p>
<p><a target="_blank" href="https://www.postman.com/use-cases/api-testing-automation/">https://www.postman.com/use-cases/api-testing-automation/</a></p>
<h2 id="heading-whats-your-favorite-way-to-test-and-play-with-apis">What’s your favorite way to test and play with APIs?</h2>
<p><a target="_blank" href="https://twitter.com/colbyfayock">Share with me on Twitter!</a></p>
<div id="colbyfayock-author-card">
  <p>
    <a href="https://twitter.com/colbyfayock">
      <img src="https://res.cloudinary.com/fay/image/upload/w_2000,h_400,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:007079,g_north_west,x_635,y_70,l_text:Source%20Sans%20Pro_64_line_spacing_-10_bold:Colby%20Fayock/w_1020,c_fit,co_rgb:383f43,g_west,x_635,y_6,l_text:Source%20Sans%20Pro_44_line_spacing_0_normal:Follow%20me%20for%20more%20JavaScript%252c%20UX%252c%20and%20other%20interesting%20things!/w_1020,c_fit,co_rgb:007079,g_south_west,x_635,y_70,l_text:Source%20Sans%20Pro_40_line_spacing_-10_semibold:colbyfayock.com/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_68,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_145,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_222,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_295,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/v1/social-footer-card" alt="Follow me for more Javascript, UX, and other interesting things!" width="2000" height="400" loading="lazy">
    </a>
  </p>
  <ul>
    <li>
      <a href="https://twitter.com/colbyfayock">? Follow Me On Twitter</a>
    </li>
    <li>
      <a href="https://youtube.com/colbyfayock">?️ Subscribe To My Youtube</a>
    </li>
    <li>
      <a href="https://www.colbyfayock.com/newsletter/">✉️ Sign Up For My Newsletter</a>
    </li>
  </ul>
</div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Write QA Documentation That Will Actually Work ]]>
                </title>
                <description>
                    <![CDATA[ Imagine developing a complex software product without taking any action to protect against errors. Human error and unexpected code combinations can cause a wide range of defects. This is where quality assurance (QA) documentation comes in.  QA files ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-write-qa-documentation-that-will-work/</link>
                <guid isPermaLink="false">66be14bdb52e57dc7e9d5546</guid>
                
                    <category>
                        <![CDATA[ documentation ]]>
                    </category>
                
                    <category>
                        <![CDATA[ QA ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Oleh Romanyuk ]]>
                </dc:creator>
                <pubDate>Tue, 03 Mar 2020 15:24:38 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/03/oleg-s-article.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Imagine developing a complex software product without taking any action to protect against errors. Human error and unexpected code combinations can cause a wide range of defects. This is where quality assurance (QA) documentation comes in. </p>
<p>QA files are created in the direction of the bug handler to manage these defects confidentially. They serve us as a roadmap, ensuring a clean and efficient QA process and making it easier to have a clean conversation between the fixers and the testers. </p>
<p>But you might be wondering – why do we need QA documentation?</p>
<p>QA testing is essential in IT products today. Tight deadlines, unique skill sets within the organization, and the demand to develop products stress the need for a structured methodology. QA documentation guides testers through levels of clarity and overall coverage. </p>
<p>I've written this article to make your life a bit easier. So here it is, your ultimate guide on how to write software QA documentation that will work.</p>
<ul>
<li><a class="post-section-overview" href="#heading-make-a-test-plan-and-a-test-progress-report">Make a Test Plan and a Test Progress Report</a></li>
<li><a class="post-section-overview" href="#heading-create-test-cases">Create Test Cases</a></li>
<li><a class="post-section-overview" href="#heading-defect-reports">Defect Reports</a></li>
<li><a class="post-section-overview" href="#heading-useful-tips-for-defect-report-writing">Useful Tips for Defect Report Writing</a></li>
<li><a class="post-section-overview" href="#heading-submit-a-defect-report">Submit a Defect Report</a></li>
<li><a class="post-section-overview" href="#heading-conclusion">Conclusion</a></li>
</ul>
<h2 id="heading-make-a-test-plan-and-a-test-progress-report">Make a Test Plan and a Test Progress Report</h2>
<p>Developing great software requires a thorough and documented approach to testing. Everything begins in the development phase with a complete checkout plan as a template for the entire QA process. It outlines the general requirements, defines the followed route, identifies the necessary assets, and sets a simple timeline for achieving the objectives.</p>
<h3 id="heading-draw-up-a-roadmap-before-you-start">Draw up a roadmap before you start</h3>
<p>Before you start implementing your test plan, take some time to think about the big picture. Ask yourself:</p>
<p><em>What problem does this software solve?</em> As soon as you understand the main purpose of the software, you'll be able to manage the checkout process and identify the features that are most important to your goals. </p>
<p>I promise that once you see that you can do this, you quickly prioritize your efforts. They are based primarily on the importance of the functionality and its impact on the user.</p>
<h3 id="heading-create-a-plan">Create a plan</h3>
<p>The test plan is the central part of the QA technique. The test plan should contain the following key elements:</p>
<ul>
<li><strong>Imaginary test</strong>: Clearly identify the expected impact of the payment method. Will it confirm that core functionality is running smoothly, or will it alert you to capability gaps?</li>
<li><strong>Test method</strong>: Outline how the test will be performed. Will you do targeted testing, useless testing, or a mix of the two?</li>
<li><strong>Resource allocation</strong>: Identify the equipment and technology required to perform a complete control. What control framework will you use? Are specific hardware or software configurations required for proper control?</li>
<li><strong>Timetable and remaining dates</strong>: Establish a realistic timetable for the trial. Set clear deadlines to keep the project on track.</li>
</ul>
<h3 id="heading-understand-the-why-and-how">Understand the 'why' and 'how'</h3>
<p>A well-developed roadmap will ensure that key issues are addressed throughout the improvement approach:</p>
<ul>
<li><strong>Acceptance requirements</strong>: Clear fail/success criteria should be defined for all control cases. So, criteria allow the customer to understand that the product is high quality and ready for the end-user.</li>
<li><strong>Resource management</strong>: Identify the assets required for the testing. This includes preferred machines, copies of software in various forms, required expertise, and more.</li>
<li><strong>Team dynamics</strong>: Ensure that simple roles and tasks are defined within the test team. Who is responsible for particular test cases? Who documents bugs and who talks to developers?</li>
<li><strong>Time management</strong>: I advise setting realistic checkout times, taking into account project deadlines and the availability of useful help.</li>
</ul>
<p>The test progress report is another part of the QA documentation, similar to the test plan, but with additional data on current progress. This document allows you and your development team to monitor project progress and identify any organizational issues.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/05/test-plan-and-progress-report-1.png" alt="Image" width="600" height="400" loading="lazy">
<em>A test plan and a progress report</em></p>
<h2 id="heading-create-test-cases">Create Test Cases</h2>
<p>Think of each test case as a detailed recipe for finding potential defects in the functionality of a software program. By following these "recipes" and evaluating the expected and actual results, defects can be accurately identified and addressed before preventive action is taken. </p>
<p>Each test case acts as an independent unit, outlining the steps required to evaluate a particular element of a software program. </p>
<p>Below is a breakdown of the key elements that make up a well-defined test case Here is my step-by-step guide for creating test cases:</p>
<ul>
<li><strong>ID</strong>: This is an identifier field to help distinguish between test cases and track them easily.</li>
<li><strong>Priority</strong>: This indicates the severity of the test case based on the functionality of the program and its impact on the normal overall performance of the known software program application.</li>
<li><strong>Test Requirements</strong>: These are requirements for testing software successfully, this can include reference documents also.</li>
<li><strong>Software Module</strong>: This shows the feature under testing. It also refers to the software requirements specifications (SRS) document explaining the software feature in detail.</li>
<li><strong>Test Context</strong>: This details the test plan to clarify how the daily tests will be carried out. It also identifies the test data required for a successful case study and includes unique and important statistical information.</li>
<li><strong>Expected Output</strong>: This describes the expected output to be displayed if the test is successful.</li>
<li><strong>Actual output</strong>: This indicates the actual result in the event of failure and shows the developer the errors in the application module of the software program.</li>
<li><strong>Comment</strong>: This is an optional section where the tester can give a description of the observations or add additional records.</li>
</ul>
<p>All QAs typically include the above elements, but can also be designed specifically for the task selected by the QA group. Also, each control case follows a lifecycle that defines the phases of creation, testing (pass, fail), completion, and so on. </p>
<p>In the next section, we’ll check out another important element of QA documentation: the defect report.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/05/test-cases.png" alt="Image" width="600" height="400" loading="lazy">
<em>Test cases</em></p>
<h2 id="heading-defect-reports">Defect Reports</h2>
<p>Defect reporting is an important element of QA documentation. Issue tracking is the detailed reporting of sudden problems that arise in a software product. Careful documentation of these issues lays the groundwork for a complex and bug-free final product. </p>
<p>Sounds simple, right? Yes, but only until you start documenting.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/05/bug-task.png" alt="Image" width="600" height="400" loading="lazy">
<em>A defect report</em></p>
<p>The bug report consists of the following sections: Identifier, Summary, Description, Steps to Reproduce, Reproducibility, Severity, Priority, Environment, and Attachments.</p>
<ul>
<li><strong>Identifier</strong>: Each software program problem is assigned a completely unique identifier that acts like a customized nameplate. This makes the QA documentation less complicated to navigate and allows verbal communication between the installer, tester, and project manager (PM).</li>
<li><strong>Summary:</strong> This is an opportunity to provide brief and informative answers to three basic questions: What was the problem? Where did the problem appear? Under what specific conditions did the problem appear?</li>
<li><strong>Explanation:</strong> Examine the failure log in more detail. Summarize the identified action (the result completed) and check it against the planned action (the predicted end result). Including a link to the app requirements of the software program can serve as a useful reference element.</li>
<li><strong>Reproduction method</strong> (STR): This phase should be considered as a step-by-step recipe for reproducing the defect. It should be strict and cover all the steps that caused the problem. Skipping critical steps can make it difficult for you to reproduce the problem and cause delays.</li>
<li><strong>Reproducibility:</strong> In this section, you clarify if the bug appears every time you follow the STR. You should use numbers to show approximate chances, for example, 7 times out of 10.</li>
<li><strong>Severity</strong>: Here you explain how much harm the bug may bring to the project. Essentially, this is a measure of the severity of the technical disruption that a bug will cause to the whole project. Remember that problems that are known to be minor can grow and cause you extreme problems throughout the software.</li>
<li><strong>Priority</strong>: Each error log assigns a problem priority that indicates its urgency. Common priorities are letters (A: highest priority, Z: highest priority), numbers (1: highest priority, 9: highest priority), or descriptive terms (high, medium, low).</li>
<li><strong>Environment</strong>: Specify the gadget or browser model in which the bug appeared. This will help you to put the problem in context and narrow down a valid cause.</li>
<li><strong>Attachments</strong>: If possible, enrich the documentation with screenshots, screen recordings, console log documents, and others. This will help to provide visual documentation of the error.</li>
</ul>
<p>My structure provides detailed information, so you can empower developers to effectively diagnose, address, and eliminate any software bugs. In this way, leading to more user-friendly and robust products. </p>
<p>Now, in the next section, we'll see some useful tips you can use for defect report writing.</p>
<h3 id="heading-useful-tips-for-defect-report-writing">Useful Tips for Defect Report Writing</h3>
<ol>
<li>Write a sufficient summary. It does not matter if it is long or short. What matters is that it should be clear.</li>
<li>Have a look at the summary and the description. Do they look pretty much the same? You must have forgotten to outline the expected and actual results in the description and to add the link to the requirements.</li>
<li>Capture the issue with the help of a screenshot. It may save you and the development team a lot of time. Sometimes one glance at the picture is just enough to understand the situation.</li>
<li>Before reporting the issue, try to reproduce it at least 3 times to be sure that it exists.</li>
<li>Report the issue ASAP and notify your project manager or product owner if the issue is major.</li>
<li>Check for grammar mistakes in your QA documentation so you're not taken down by the grammar police.</li>
<li>However comical it sounds, make sure that the issue is not a feature – review the documentation again!</li>
<li>Do not miss any important information in your Steps to Reproduce.</li>
</ol>
<h2 id="heading-submit-a-defect-report">Submit a Defect Report</h2>
<p>The final and one of the most important elements of QA documentation is the defect report. You may understand it covers the entire lifecycle of a problem, from its initial discovery to its final closure. </p>
<p>Let's now examine the key areas of this process:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2024/05/defect-report-lifecycle.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>a defect report lifecycle</em></p>
<p>We'll go over the defect report lifestyle piece by piece:</p>
<h3 id="heading-problem-reporting">Problem Reporting:</h3>
<p>This adventure begins with the careful compilation and submission of a report on the entire program. This serves as a roadmap for developers and provides a clear assessment of the problem.</p>
<h3 id="heading-triage-and-tasks">Triage and tasks:</h3>
<p>The task manager or technical lead takes on the role of gatekeeper at this stage. They carefully compare the files. If the file contains enough elements to work with, it is assigned to the developer and repaired. However, if the file is missing essential elements, it may be rejected for further improvement.</p>
<h3 id="heading-bug-fixing">Bug fixing:</h3>
<p>The assigned developer takes the initiative and works diligently to eliminate the annoying bug.</p>
<h3 id="heading-verification-and-completion">Verification and completion:</h3>
<p>Once the developer claims to have fixed the problem, it's your turn as QA. Carefully verify the fix by retesting the functionality in question. If everything works as it should, you are done. </p>
<p>The documentation has come to a happy end. Ideally, this will happen within a reasonable period of one to two weeks.</p>
<h3 id="heading-reboot-and-keep-going">Reboot and keep going:</h3>
<p>But it is not always that simple. If it is known that bugs are still being made in the validation system, there is no need to despair! </p>
<p>Re-open the bug documentation and send it to the developers for further attention. Sometimes the process of fixing bugs is repetitive and requires patience. But by being careful and effective, you can guarantee that all bug reports will eventually reach their final destination, resulting in a more polished and reliable software application product.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Quality Assurance is a process you simply cannot avoid. Each airplane prior to departure undergoes a technical check. If there is any issue, the aircraft is grounded until the problem is solved. The same goes for any software. </p>
<p>But QA documentation is not always "write and ignore". At some point in the software development lifecycle, QA documentation needs to be continually updated and improved as requirements change, new features are introduced, and feedback is received from deployment and production use.</p>
<p>There are also a growing number of styles that use synthetic intelligence and machine learning to partially automate the creation of QA documentation. </p>
<p>For example, natural language processing (NLP) is used to analyze requirements documents and generate draft control examples. Test bots can use NLP to interpret and routinely execute directed test cases. Predictive evaluation can also be used to identify the most dangerous areas of a software program that require more detailed control.</p>
<p>While these strategies are still new and not mature enough to replace human testers, they can help with growth and augment manual exploration, especially for large and complex builds. By making QA documentation a collaborative and ongoing hobby, your team can deliver better software faster and with fewer defects.</p>
<h3 id="heading-do-you-need-to-improve-the-quality-of-your-software">Do you need to improve the quality of your software?</h3>
<p>My company KeenEthics provides solid <a target="_blank" href="https://coventit.com/services/custom-software-development">development and quality assurance services</a>. In case you need an estimate for a similar project, feel free to <a target="_blank" href="https://coventit.com/contact-us">get in touch</a><em>.</em> If you have enjoyed the article, you should continue with <a target="_blank" href="https://coventit.com/blog/How-IT-Outsourcing-Saves-Costs">How IT Outsourcing Saves Costs for Your Company</a> and <a target="_blank" href="https://coventit.com/blog/risks-of-it-outsourcing">Avoiding Pitfalls in IT Outsourcing: Tips for Minimizing Risks</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Software Quality Assurance Guide ]]>
                </title>
                <description>
                    <![CDATA[ Quality Assurance Quality Assurance (commonly known as QA) is the means by which a product in development is checked to make sure it works as it’s supposed to. The actual methods used in QA processes vary hugely depending on the size and nature of th... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/software-quality-assurance-guide/</link>
                <guid isPermaLink="false">66c35f21c337fbd10a4b5968</guid>
                
                    <category>
                        <![CDATA[ QA ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Quality Assurance ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Engineering ]]>
                    </category>
                
                    <category>
                        <![CDATA[ toothbrush ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sun, 01 Mar 2020 19:48:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9c9c58740569d1a4ca3194.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <h2 id="heading-quality-assurance"><strong>Quality Assurance</strong></h2>
<p>Quality Assurance (commonly known as QA) is the means by which a product in development is checked to make sure it works as it’s supposed to. The actual methods used in QA processes vary hugely depending on the size and nature of the product.</p>
<p>For a personal project you will probably just test as you go, asking others to provide feedback at appropriate stages. By contrast, a banking application must have every aspect of every feature exhaustively checked and documented to ensure it is both functional and safe.</p>
<p>Regardless of how formal or detailed a QA process is, its aim is to identify bugs so they can be resolved before the product is released.</p>
<h2 id="heading-methodologies">Methodologies</h2>
<h3 id="heading-agile">Agile</h3>
<p>In an Agile approach to development, the aim is that each cycle of work (‘sprint’) produces working software that can be added to and improved upon iteratively. This makes the QA processes an intrinsic part of the development cycle. </p>
<p>By testing software components at each stage of their production you reduce the risk of bugs being present at release.</p>
<h2 id="heading-terminology">Terminology</h2>
<h3 id="heading-automation-testing">Automation Testing</h3>
<p>Testing done with pre-written scripts designed to control the execution of tests.</p>
<h3 id="heading-black-box">Black Box</h3>
<p>These test do not look inside the system under test, but treat it as ‘closed’ in the same way that the end user will experience it.</p>
<h3 id="heading-defect">Defect</h3>
<p>Any deviation from an application’s specifications; often referred to as a “bug”.</p>
<h3 id="heading-exploratory-testing">Exploratory Testing</h3>
<p>An unscripted approach to testing, which relies on the tester’s unique creativity in an effort to find unknown bugs and identify regressions.</p>
<h3 id="heading-integration-testing">Integration Testing</h3>
<p>Testing individual components/modules together to ensure they connect and interact well with one another.</p>
<h3 id="heading-negative-path-testing">Negative Path Testing</h3>
<p>A testing scenario designed to produce an error state in a feature/application and verify that the error is handled gracefully. An example of this is inputing a series of numbers in the email field in a user registration form and checking to make sure the registration is not accepted until an actual email address is provided.</p>
<h3 id="heading-regression-testing">Regression Testing</h3>
<p>Testing done on a new build to ensure that new functionality has not unintentionally broken previously tested functionality.</p>
<h3 id="heading-smoke-tests">Smoke Tests</h3>
<p>A minimalistic approach to testing intended to ensure basic functionality is working before more in-depth testing takes place. Typically occurs at the beginning of the testing process.</p>
<h3 id="heading-test-case">Test Case</h3>
<p>Specified preconditions, steps, and expected results referred to by a QA tester/engineer to determine whether or not a feature performs its task as expected.</p>
<h3 id="heading-white-box">White Box</h3>
<p>Refers to tests performed at a structural level, within the codebase. Programmers checking that the inputs to and outputs from specific functions or components would be white box testing.</p>
<p>Also known as ‘Glass Box’, ‘Clear Box’, ‘Transparent Box’ because the tester can ‘see inside’ the system under test.</p>
<p>Main categories are</p>
<ul>
<li><strong>Unit tests</strong> (individual units of code do what they should)</li>
<li><strong>Integration tests</strong> (units/components interact with each other properly)</li>
<li><strong>Regression tests</strong> (re-applying tests at later stages of development to ensure they still work)</li>
</ul>
<p>There are three main techniques:</p>
<ul>
<li><strong>Equivalence partitioning</strong> (the tested input values are representative of larger input datasets)</li>
<li><strong>Boundary Value Analysis</strong> (the system is tested with chosen inputs where behaviour and therefore output should change)</li>
<li><strong>Cause-Effect Graphing</strong> (tests are designed from a visualization of the input-output relations)</li>
</ul>
<h3 id="heading-other-resources"><strong>Other Resources</strong></h3>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-write-qa-documentation-that-will-work/">How to write QA documentation that actually works</a></li>
<li><a target="_blank" href="https://guide.freecodecamp.org/agile/test-driven-development">Test Driven Development</a></li>
<li><a target="_blank" href="https://guide.freecodecamp.org/software-engineering/unit-tests/">Unit tests</a></li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Give your Front End a Health Check ]]>
                </title>
                <description>
                    <![CDATA[ By Ewa Mitulska-Wójcik You’ve built out all your user stories and your app is working. Now’s it’s ready to submit as done, so you can move on with your life. Not so fast! You need to give your code a health check first. A professional singer wouldn’t... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/give-your-front-end-a-health-check-952c857ecdb4/</link>
                <guid isPermaLink="false">66c34b9e0f58901a6209178e</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learning to code ]]>
                    </category>
                
                    <category>
                        <![CDATA[ QA ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Wed, 20 Apr 2016 04:54:16 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*6g5YyCI8qhLbQP5QVdJ3Dw.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Ewa Mitulska-Wójcik</p>
<p>You’ve built out all your user stories and your app is working. Now’s it’s ready to submit as done, so you can move on with your life.</p>
<p>Not so fast!</p>
<p>You need to give your code a health check first.</p>
<p>A professional singer wouldn’t start singing until she’s checked both her mic and her speakers. You shouldn’t deploy until you’ve checked your front end, back end, and everything in between.</p>
<p>I’m an impatient person, but coding makes me slow down. Being a developer teaches me to think at least twice, ask questions until the code works, and wait a moment before celebrating success.</p>
<p>Iteration is the key because good product is never done. The key is to iterate on the versions you are proud of, and not on those that are far from ready to go live.</p>
<p>So treat this as a final checklist before going live.</p>
<h4 id="heading-1-be-responsive">1. Be responsive</h4>
<p>How does your app behave when you resize the browser window? Where do you have your breakpoints in code? Is it fluid enough to fit all sizes without bigger problems?</p>
<p>There are an endless variety of screen sizes. It’s impossible to have all of the devices within reach but, it’s easy to emulate their behavior.</p>
<p>Spending some time in <a target="_blank" href="http://gitter.im/freecodecamp/codereview">Code Review Room</a>, I’ve noticed that many people focus on developing for desktops when they should actually be testing their app on mobile devices first.</p>
<p>Browser tools allow us to emulate the display on various screen sizes and orientations. Use them, they are free.</p>
<p>In Chrome, you can go to a debug view by right clicking any element on the page and selecting “inspect element”, then going to mobile view and emulating different devices.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/-ua5KuSR5Dd8cRXMnqINmcIOz671tz2jcycX" alt="Image" width="800" height="543" loading="lazy">
<em>Chrome browser emulation mode</em></p>
<h4 id="heading-2-consider-special-cases-and-app-states">2. Consider special cases and app states</h4>
<p>Empty, error, success, waiting, 404 page, or duplicated button clicks while waiting for API response — how does your app react to them? Do you care about these states that are far from ideal situation you coded for? Do you have helpful feedback to your users for when they encounter these? Have you tested for these special cases? Do you listen and respond in your app, or do you do all the talking?</p>
<p><a target="_blank" href="https://medium.com/@_mikehlee/designing-for-various-states-823816e49c8d#.4x0p9y4oh">Design, code, and test for all states</a>. Checking user flows can help you a lot to get rid of these easily forsaken points and dead ends. Simply test your work with some users, or at least do it on your own.</p>
<p>Put yourself in users’ shoes by imagining various scenarios that may happen, and remember that this app is completely new for this person.</p>
<p>Try incorrect data inputs, no input at all, misspellings, etc. Be imaginative and try to break your code! Better you do it before your users.</p>
<h4 id="heading-3-optimize-your-performance">3. Optimize your performance</h4>
<p><a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/">Google PageSpeed Insights</a> does a great job in telling you what could be done better.</p>
<p>If you want others to be able to read and review your code, don’t minify your JavaScript or CSS — it will make it hard for humans to read. However, you should do it for production code.</p>
<p>For production, you can also use tools such as <a target="_blank" href="http://gruntjs.com/">Grunt</a> to handle and other operations optimizations for you.</p>
<p>By using the tests such as <a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed</a>, you can get quick opinion not only on performance, but also on usability issues. Test results provide you with ready suggestions for how to improve your code. Again, you don’t have to accept all, simply choose the suggestions that work for the goals you want to achieve.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/gpyC5h6k-8EULkJEbqmpvG2NT4pYEyvijyox" alt="Image" width="800" height="478" loading="lazy">
<em>UX basic health check with PageSpeed tool</em></p>
<h4 id="heading-4-do-cross-browser-testing-on-every-device-you-have-available">4. Do cross browser testing on every device you have available</h4>
<p>Many of us have access to at least two different devices (a computer and a smartphone), and some of us even dual boot different operating systems. Browser emulation has its flaws, so when possible use the native hardware.</p>
<p>You don’t have to write unit tests for a small app showing wiki entries or local weather to check if they work. Test driven development is a great practice, but not the easiest for fresh coders and it may be an excess of form for short code snippets.</p>
<p>What you have to be aware of though is that testing is a part of front end developer’s job, even if there’s a huge team of testers sitting next to you in the same room<strong>.</strong> Before you assign the ticket to other team member you have to make sure it works. Don’t assume, check.</p>
<p>With code, it either works or it doesn’t. There’s no <em>maybe</em> or <em>I suppose</em>.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/Y4dBc-Jlv6Z9-VNPTUFTbneB2IlZyDJLjDIL" alt="Image" width="460" height="269" loading="lazy"></p>
<p>Cross browser testing can be time-consuming, but there are plenty of tricks to make it more efficient. For instance, each time you test, try using a different browser.</p>
<p>Since you test it while iterating over the project, you can test your code on various browsers many times during the creation of the app itself. Then, before launching the final version it’s much faster to make a quick browser health check, since majority of problems have probably already been discovered and fixed.</p>
<p>Browser developer tools and extensions allow you also to easily discover accessibility constraints before you push the project live. You can also use <a target="_blank" href="https://www.browserstack.com/">BrowserStack</a>, which I’ve found helpful in doing cross-browser testing.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/iaaki3R1d6VJli-BPruuxZjZfK7AMZ44i0NE" alt="Image" width="800" height="459" loading="lazy">
<em>Accessibility Audits in Chrome</em></p>
<p>I recently <a target="_blank" href="http://a11yproject.com/checklist.html">a nice accessibility checklist</a>. If you want to dig deeper in the topic you may also like to check your apps with <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA techniques</a>, articles on <a target="_blank" href="http://www.washington.edu/accessibility/checklist/keyboard/">designing for keyboard</a>, or look through <a target="_blank" href="http://simplyaccessible.com/archives/">Simply Accessible archives</a>.</p>
<h4 id="heading-5-keep-your-head-on">5. Keep your head on</h4>
<p><img src="https://cdn-media-1.freecodecamp.org/images/v5Gt3jiSASnmtq-MlDLbVdCP1XLATG3XOg1x" alt="Image" width="800" height="438" loading="lazy">
<em>Source: giphy.com</em></p>
<p>Double check the head section of your HTML, and make sure you have meta descriptions, a viewport set up for mobile, a title tag, and a favicon. Keep at least the basic meta tags, such as description and author. SEO rules change quickly, but an informative description can increase your likelihood of being clicked on a crowded search result page.</p>
<p>If you’re serious about sharing your work, make it easy for others to collaborate. Keep your README.md file concise and explanatory. It’s how most people will view your project on GitHub, so don’t omit this file in your repo.</p>
<p>If you code some small projects on CodePen, go to settings section and add a basic description of your pen and tags. This will allow your work to be easier discovered and understood by others.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/PjVA5vV2tsognA60zykdy442fBQnNd8QyA0i" alt="Image" width="800" height="274" loading="lazy">
<em>Provide some small info about your pens.</em></p>
<p>Make sure you import assets and libraries appropriately. If you want to move your project from CodePen to another server, make sure that the external libraries, frameworks, and stylesheets you used in your pen are included.</p>
<p>If you want just a copy for your Github and it’s a small project, you can simply export your pen to gist. To do this, use the export button in the bottom-right corner of Editor View.</p>
<h4 id="heading-6-code-optimization">6. Code optimization</h4>
<p>Keep DRY (don’t repeat yourself). Once done, have a look at the code once again. Maybe there are snippets which you repeat and they could be replaced by one smart function. Analyze your code once again and look what could be written better. The more you code, the wiser in DRY you become. It’s said to be a good learning code practice to come back to your own code after some time and refactor it. Give it a try.</p>
<p>Before finishing the project <strong>clean your toys</strong>.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/mM9kAlJLgYaNgFOAGkeR267qERrl7GJDL1ZZ" alt="Image" width="360" height="202" loading="lazy"></p>
<p>All console logs are useful for debugging during creation but unwelcome for production code.</p>
<p>Make comments concise and clear for others reading your code, and preferably in English, unless everyone else on your team speaks the same language.</p>
<p>Make sure there aren’t any console errors, and that all your assets load properly (for that check Network tab in your browser’s developer tools).</p>
<p>You may want to use code validators for <a target="_blank" href="http://www.jslint.com/">JavaScript</a>, <a target="_blank" href="https://validator.w3.org/">HTML</a>, and <a target="_blank" href="http://csslint.net/">CSS</a><strong>.</strong> Like with PageSpeed the key is to understand what is worth optimizing.</p>
<h4 id="heading-7-user-experience">7. User Experience</h4>
<p>Quick UX health check of your project should include the basics like:</p>
<ul>
<li><strong>Goals</strong>. Are the users able to solve their problems? Are their expectations met? Do they get what they came for to your app/website? What would a user tell the app is about seeing it just for a moment?</li>
<li><strong>Dead-ends</strong>. Have you checked all possible paths your users can take? Are you helpful? Do you provide feedback just in time a user needs it?</li>
<li><strong>Visual hierarchy</strong>. Is the hierarchy kept? Do you lead users eye? Is your call-to-action visible? Do you have too many items to focus on that fight for being the primary element on a given screen?</li>
<li><strong>Line width.</strong> Is your text easy to scan? Your lines should be no wider than 80 characters. And make sure your lines aren’t too narrow with too much padding.</li>
<li><strong>Readability.</strong> Is your text readable? Are the images of the right size? Is there <a target="_blank" href="http://leaverou.github.io/contrast-ratio/">contrast</a> between elements appropriate?</li>
<li><strong>Affordability.</strong> Do your buttons look like buttons? Do your links behave like links? Will a user know that an element is clickable or tappable? Does your cursor turn into a finger pointer where appropriate?</li>
<li><strong>Consistency.</strong> Are you consistent in your app? Or do you use 5 different colors to mark the same thing or do you have it organized?</li>
<li><a target="_blank" href="https://uxplanet.org/microinteractions-the-secret-to-great-app-design-4cfe70fbaccf#.ku163smuk"><strong>Microinteractions</strong></a><strong>.</strong> Do you help your users to notice when the elements are hovered in desktop view? How do you mark interactions? Do you respond to what a user does in your app?</li>
<li><strong>Sunlight check.</strong> How does your app behave outside in sunlight? Is everything readable?</li>
<li><strong>Screenreader test.</strong> Have you tried using your app with a screenreader? Is it possible to use it fully being directed just with Voice Over or another screenreader tool?</li>
<li><strong>Proof-read your copy.</strong> Have you got rid of lorem ipsum texts? Are your alerts, warnings, etc. written in a human language, or do they still read like a developer in a hurry wrote them?</li>
</ul>
<h4 id="heading-8-code-review-on-gitter">8. Code Review on Gitter</h4>
<p>When you are ready with the previous points go to the <a target="_blank" href="https://gitter.im/FreeCodeCamp/CodeReview">Code Review room</a>. Campers are lucky to belong to the community where everybody understands that you are fresh in coding. It’s OK if you make mistakes. We all learn by practicing, and gradually improve our code.</p>
<p>Campers have various prior coding background, and are all at different points in Free Code Camp’s program. So finding help is quite easy.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/9tIISkbM4C5XrVOusTWk9BhzRcoV0Aue5dx5" alt="Image" width="365" height="280" loading="lazy"></p>
<p><strong>Don’t ask too early.</strong> Ask for feedback later when your app has started to take on its own character and shape. Try to discover the answer first. Google and <a target="_blank" href="http://stackoverflow.com/">Stack Overflow</a> are your first stops. Sure, if you get stuck with some problem jump in to the appropriate room and ask! That’s the part of Free Code Camp magic, isn’t it?</p>
<p><strong>Be precise about what you’re looking for</strong>. Asking precise questions leads you to better answers. Asking a general question like “<em>Here’s my code. What do you think?”</em> will get you a general answer. This can bring a lot of new ideas to light, and a fresh look that can be inspiring. However, a lot of design suggestions are pretty subjective (based on personal taste, and gut reaction after a few seconds), so don’t jump to the conclusion that you must refactor all your code just because one person said so. Ask for justification if you don’t understand what the other person meant. Repeat your question to get feedback from others, and sleep on the suggestions if you are not sure if the change is right for your project.</p>
<p>I love getting <strong>constructive feedback</strong>. It’s better to get a list of suggestions than bunch of praise. Kind words are sometimes needed, but informative comments full of empathy are better for making progress. As you progress, your motivation will become more intrinsic.</p>
<h4 id="heading-bigger-projects-shorter-lists">Bigger projects, shorter lists</h4>
<p>Sitemaps, unit tests, functional tests, caching, analytics, appropriate file directories, checking if assets aren’t missing, print version css, SEO optimization… this list could go on for quite a while for sure.</p>
<p>But the more you code, the shorter the list seems to appear, because you will simply code better and internalize many of these considerations.</p>
<p><em>I am a web developer in training. I am a <a target="_blank" href="http://www.freecodecamp.com/ewathedoer">Free Code Camper</a>. I publish on <a target="_blank" href="https://medium.com/@thedoer">Medium</a> and <a target="_blank" href="http://twitter.com/thedoerdoes">tweet about UX and startups</a>. I love useful solutions and friendly collaboration.</em></p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
