<blockquote>
<h3 class="subtitle">“The way your employees feel is the way your customers will feel. And if your employees don’t feel valued, neither will your customers.” &#8211; Sybil F. Stershic</h3>
</blockquote>
<div class="post-subheader meta-subheader">
<div class="right">
<div class="post-ufi style-button themed">
<div class="">
<div class="available-content">
<div class="body markup" dir="auto">
<p><strong>There is a common belief that your best people need the least time and attention from the leadership. </strong>They are these highly motivated individuals who with some direction can move mountains and generate outsized returns for your business.</p>
<p>I wish that belief was true.</p>
<p>While I am sure we hear about the fabled stories of individual contributors who were able to come up with breakthroughs that changed the fate of the company, those are usually the exception and not the norm.</p>
<p>As someone who has built multiple companies from 1 to over 100+ employees, <strong>the successful ones have involved my taking an inordinate amount of time crafting the employee experience in great detail. </strong></p>
<p>There isn’t a single magic bullet that I can give you which will help you get high engaged team members overnight. Here are a few tips on what has worked for us:</p>
<ol>
<li><strong>Building a high trust environment: </strong>I have a personal principle that I call <a href="https://share.descript.com/embed/zE1EEFVJWau" rel="nofollow ugc noopener">Trust First</a>. By building an environment where the default stance is for you to be trusted rather than ‘earn’ the trust, everything moves faster. It helps build confidence for everyone on the team to stretch themselves and know that the company will do right by them if things don’t work out. Leaders keep promises and commitments and create a stable environment. Without this core tenet, I believe a business will struggle to nurture highly engaged employees.</li>
<li><strong>Empowerment with <a href="https://wordpress.highoutput.io/the-five-levels-of-autonomous-organizations-2/">autonomy</a>:</strong> Most businesses talk about empowering their team and then strangle them processes that slowly bleed them dry. Engaged employees need a defined wide space to operate in. Leadership needs to establish the parameters and then let them find their own path. Autonomy gives them the freedom to experiment and in a high trust environment, they thrive.</li>
<li><strong>Real-time coaching and building relationships: </strong>Hoping to send your staff on a retreat or installing a piece of software isn’t going to do the hard work of building relationships. Practices such as 1-1’s are a central component in creating a space where everyone in the company gets immediate feedback and coaching on how they are doing. People only take this seriously when they are treated as partners. When they understand the bigger picture and how they fit into that narrative.</li>
<li><strong>Values alignment: </strong>If two people have a singular goal but opposing value sets I believe it is going to be very difficult to create an engaged unit. Many companies pay lip service to have a set of values on their website. Very few of them integrate them into their core processes of recruiting, performance evaluations, recognition programs and their day to day communication. As a result, they build teams without a core that binds the team together. Values are an integral part of building a highly engaged workforce.</li>
<li><strong>Recognizing excellence: </strong>The world is filled with recognition tools and training that organizations can deploy to increase ‘engagement’. I call BS on most of these tools that are using the outdated carrot and sticks model for engagement. What may have worked for the industrial age doens’t work for knowledge workers. Recognizing excellence requires us to have a set of clearly defined values and behaviours that we know deliver results. More than just giving the person a badge we need to coach them, challenge them and continue to create a pathway for them to do great work.</li>
</ol>
<p><strong>Every CEO wants a highly engaged workforce. Yet, a large majority of leaders are not ready to put in the time and effort that is required to get to that level.</strong> It is either because they do not know where to start or have other short term objectives.</p>
<p>At Identifi we are looking to work with leaders who are serious about investing in building an organization that is filled with highly engaged employees. Reach out if you want to be part of our early beta program. We are looking to work with leaders who are managing teams/companies of at least 50 &#8211; 250 individuals.</p>
</div>
</div>
</div>
</div>
</div>
</div>


The Secret behind Engaged Employees

<blockquote><p>&#8220;Those who are victorious plan effectively and change decisively. They are like a great river that maintains its course but adjusts its flow&#8221; -Sun Tzu</p></blockquote>
<p>A powerful tool is having a clear plan in place before carrying out specific actions. The more <a href="https://wordpress.highoutput.io/5-myths-about-qa-and-testing/">test plans you develop</a>, the more skilled you become at researching specifics and structuring phrases. A test plan describes how testing will be carried out for a certain level (such as system testing or user acceptability testing). A business-oriented readership can become confused by technical jargon, and technical readers will find the plan lacking if not given enough technical details. Perhaps the most important step in developing a strong test plan is to review it. Participants should be able to rely on the test plan to deliver accurate information. This is just another strong argument in favor of reviewing test plans, especially when stakeholders are involved.</p>
<p>Key attributes of the test plan should be:</p>
<ul>
<li><strong>ORGANIZATION</strong> &#8211; The test plan benefits from beginning with a broad introduction before getting more specific in the body of the plan. Standards and good test plan templates aid in content organization. When referencing things in the test plan, numbered sections and sub-topics are helpful.</li>
<li><strong>CONCISENESS</strong> &#8211; Nowadays, people scan instead of reading. Use bullet points to help you keep your sentences brief and to the point.</li>
<li><strong>READABILITY</strong> &#8211; Use clear language that the majority of the audience can understand. If at all possible, avoid overusing acronyms.</li>
<li><strong>ADAPTIBILITY TO CHANGE</strong> &#8211; Make a change plan. Extreme degrees of detail in the plan will necessitate more frequent changes as project changes occur.</li>
<li><strong>ACCURACY</strong> &#8211; The test plan should provide reliable information that can be trusted by participants. If mistakes are found, they should be reported and fixed right away.</li>
</ul>
<p>Your Test Plan should include the following:</p>
<ol>
<li>Research and analyze the software</li>
<li>Design a test strategy</li>
<li>Explain the objectives</li>
<li>Outline test criteria</li>
<li>Plan a test environment</li>
<li>Create a schedule</li>
<li>Identify deliverables</li>
</ol>
<p>People may shy away from test planning because they are aware that any plans will probably change. The same applies to test plans. You shouldn&#8217;t let the possibility of modifications stop you from developing a test plan, though. The secret is to create a plan that is adaptable and resilient to all changes.</p>
<p><em><strong>📚 For more detailed explanation, visit this link: </strong><br />
<a href="https://www.indeed.com/career-advice/career-development/how-to-write-test-plan">https://www.indeed.com/career-advice/career-development/how-to-write-test-plan</a>)</em></p>


Writing a Software Test Plan

<div class="sc-iwsKbI sc-cmthru feoaoU">
<div id="blockwrap-6DFB3462-DAAC-4CF6-8CDB-374CAB60D2F6" class="sc-gwVKww ciuKBJ" data-menu-inside="false">
<div id="6DFB3462-DAAC-4CF6-8CDB-374CAB60D2F6" class="sc-iwsKbI dXfbUT">
<div class="sc-iwsKbI gBYrrQ">
<div class="sc-htoDjs ijADkq">
<div class="sc-dnqmqq NKKGN">Buttons are one of the essential components of a mobile app and <a href="https://wordpress.highoutput.io/figma-speed-up-your-design-progress-using-figma-plugins/">styling</a> them gives your app its own identity. Luckily for us, <a href="https://cocoacasts.com/swiftui-fundamentals-what-is-swiftui">SwiftUI</a> has several styling protocols that allow users to define styling for views such as Button, Toggle and more. SwiftUI enables us to create custom buttons through a modifier, that way the style is reusable.</div>
<div></div>
</div>
</div>
</div>
<div class="sc-hXRMBi bRhgcJ">For this tutorial, let’s do a quick dive into how to create those reusable button styles in a way that avoids repeating code across your app.</div>
<div></div>
</div>
</div>
<div class="sc-bMVAic iZYfEx">Let’s say we have a button like this:</div>
<div class="sc-bMVAic bAEQQm"></div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div class="sc-iwsKbI gBYrrQ">
<div class="sc-dVhcbM PNoeR">
<div id="blockwrap-BE35C7D8-F886-4B7E-A25A-0093BFB581F0" class="sc-gwVKww jVEtWJ" data-menu-inside="true">
<p><img class="sc-kgAjT cKzNeU aligncenter" src="https://secure-res.craft.do/v1/8qV16XUKD2MLH3gbZXWxTmWszzwnsf8SyhcBaEFPwPskUrfwy5cV3bvYY8wkrZ1bnvgn153mf1SE7RrXSoDAMgPuwo5ZGoANFKdinu8W32yxmoJAsz6WMfCi6y8V5f9a2UzQi6NBcWAVKwqJmP53Q36j8ZkLXV6mPhJAZzqAAaCRwS8CPdgVahiomdecv5gt9Tx9RbdnGtedA8ZxzAwSguc49AYRLYPm6pe8uNrgqPq7rakJwZmxemuXi8BoMX5LAB3Xau3K86w4PEyyrWRznbR2oDMsUAebLqphiqAdU1mfCLrNPeNGghfGTU6sbsZH9RMg9s5G/Simulator%20Screen%20Shot%20-%20iPhone%2013%20mini%20-%202021-11-02%20at%2020.21.58.jpg" width="198" height="429" /></p>
<div class="sc-hXRMBi iqedYS"></div>
</div>
</div>
</div>
</div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div class="sc-hXRMBi kJdPym">
<pre class="wp-block-code"><code>Button("Send Gift 🎁", action: doSomething)
  .font(.title)
  .foregroundColor(Color.red)
  .padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
  .background(Color.green)
  .clipShape(RoundedRectangle(cornerRadius: 8))
</code></pre>
</div>
<div></div>
</div>
<div class="sc-bMVAic iZYfEx">Converting this into a reusable button style is as easy as conforming to the <strong><span class="sc-kEYyzF dJiKkY">ButtonStyle</span></strong> protocol</div>
<div></div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div>
<pre class="wp-block-code"><code>struct GiftButtonStyle: ButtonStyle { 
  func makeBody(configuration: Configuration) -&gt; some View { //... }
}
</code></pre>
</div>
</div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div id="blockwrap-F336E13F-5F66-4D62-9D31-406100042A60" class="sc-gwVKww cMJaWS" data-menu-inside="false">
<div class="sc-hXRMBi kJdPym"></div>
</div>
</div>
<div class="sc-bMVAic iZYfEx">and attaching your modifiers to the <span class="sc-kEYyzF dJiKkY">configuration.label</span></div>
<div></div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div id="blockwrap-6859FAF8-127C-4C55-8A20-F23F5945BB31" class="sc-gwVKww cMJaWS" data-menu-inside="false">
<div id="6859FAF8-127C-4C55-8A20-F23F5945BB31" class="sc-iwsKbI dXfbUT">
<div class="sc-lhVmIH bstCMA">
<div class="sc-gzVnrw bhEASl">
<pre id="temp-for-copy" class="wp-block-code"><code>struct GiftButtonStyle: ButtonStyle {
  func makeBody(configuration: Configuration) -&gt; some View {
    configuration.label
      .font(.title)
      .foregroundColor(Color.red) 
      .padding(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16)) 
      .background(Color.green) 
      .clipShape(RoundedRectangle(cornerRadius: 8)) 
  } 
}
</code></pre>
<div></div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div id="blockwrap-048AECF8-77CF-4443-B9FC-D046F982EBD4" class="sc-gwVKww ciuKBJ" data-menu-inside="false">
<div id="048AECF8-77CF-4443-B9FC-D046F982EBD4" class="sc-iwsKbI dXfbUT">
<div class="sc-iwsKbI gBYrrQ">
<div class="sc-htoDjs ijADkq">
<div class="sc-dnqmqq NKKGN" style="margin-bottom: 2rem;">From there, we can now simplify our code and also reuse the same style just as easily!</div>
</div>
</div>
</div>
<div></div>
<div class="sc-hXRMBi bRhgcJ">
<pre class="wp-block-code"><code>Button("Send Gift 🎁", action: doSomething).buttonStyle(GiftButtonStyle())
Button("Open Gift 🎁", action: doSomething).buttonStyle(GiftButtonStyle())
</code></pre>
</div>
</div>
</div>
<div></div>
<div class="sc-bMVAic iZYfEx">That&#8217;s it! Enjoy your designer buttons!</div>
<div><img class="sc-kgAjT cKzNeU alignleft" src="https://secure-res.craft.do/v1/8qV16XUKD2MLH3gbZXWxTmWszzwnsf8SyhcBaEFPwPskUrfwy5cV3bvYY8wkrZ1bnvgn153mf1SE7RrXSoDAMgPuwo5ZGoANFKdinu8W32yxmoJAsz6WMfCi6y8V5f9a2UzHebAPWj7jYFRfduehw9qShoqp6xcZg66nmcPJapzxD9ebWQNhzzEVtxzKvnzef2Ux4zB8eH62MQRrPNbA99mex4dYMCXLMfo4uy4fgsWA1AinMbbHopqQSx7XP5kp8htZ5Ry3hP2nfGGE3drJEe7EbbKSFbHgCkATvXo6eVnEXrsrH41r4zsbkf3DC6j7zDrrQrVS/Simulator%20Screen%20Shot%20-%20iPhone%2013%20mini%20-%202021-11-04%20at%2017.13.39.jpg" width="259" height="561" /></div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div id="blockwrap-683D14A8-0382-4509-BA52-CF4DD372A518" class="sc-gwVKww ciuKBJ" data-menu-inside="false">
<div class="sc-hXRMBi bRhgcJ"></div>
</div>
</div>
<div class="sc-bMVAic bAEQQm"></div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div class="sc-iwsKbI gBYrrQ">
<div class="sc-dVhcbM PNoeR">
<div id="blockwrap-81D220C1-B831-43E2-A2C4-62204E6719A0" class="sc-gwVKww jVEtWJ" data-menu-inside="true">
<div class="sc-hXRMBi iqedYS"></div>
</div>
</div>
</div>
</div>
<div class="sc-bMVAic bAEQQm"></div>
<div class="sc-iwsKbI sc-cmthru feoaoU">
<div id="blockwrap-FEE0CCFA-6140-475B-A38E-CA4582177332" class="sc-gwVKww ciuKBJ" data-menu-inside="false"></div>
</div>


Customize button styles in SwiftUI

<p>I’ve always admired the position of being part of the Quality Analyst Department, but I also heard a lot of edgy opinions and ideas about it, like most people would say that being a QA is…</p>
<p><strong>1.</strong> “<strong>EASY</strong>”</p>
<p>They thought QAs tasks are easy and that everyone can do it. But now that I am working as a QA, I don’t even want to start a list of our own struggles &#8211; I believe there is no such thing as “easy” when it comes to a job. Everyone can be a QA but the question is, “Can you be a GOOD one?” When working there’s always a hurdle that people needs to pass on, a challenge that needs to survive and new knowledge that needs to be learn not just by mind but also by heart.</p>
<p><strong>2. “ENEMY”</strong></p>
<p>In this position a lot of people would think that QAs cannot be friends with teammates or developers and that they need to set a wall from them. When in reality that’s most opposite of what QAs should do. It’s not QA versus developers; it should be QA and developers working together as a team and communicating well to produce great result.</p>
<p><strong>3. “OBSTRUCTIVE”</strong></p>
<p>People think that QAs are making the team’s job more difficult for them when in fact, QAs are just making sure that everything is in place and that the <a href="https://wordpress.highoutput.io/why-poor-quality-is-costly/">quality of the team’s output is well</a>. Being “obstructive” is way different from being “strict”. Being “strict” is part of a QAs job, which is to follow the project’s standards and making sure the project is well developed.</p>
<p><strong>4. “DEMANDING”</strong></p>
<p>QAs have requirements to follow and always view the project’s output as a customer, that’s why sometimes QAs ask for some adjustments especially about the designs and functionality of the project. QAs don’t just “demand” for what they think they want, it’s called “suggesting” because this is what they think is best for the project. Of course all suggestions need to be discussed and approved by the team.</p>
<p><strong>5. “BORING”</strong></p>
<p>I’ve never been happier with my job as a QA. The position of a quality analyst is made to ensure that the project’s functionality, usability and consistency meet the user’s expectation. That being said, QAs get to be one of the first users of a specific software, social media, mobile application, etc., and that’s really awesome! Additionally, QAs are exposed to trending things online and are always updated with new features that are not yet released. Being a quality analyst will never <a href="https://bitbar.com/blog/the-second-happiest-job-in-the-world/">be boring!</a></p>


5 myths about QA and testing

<div class="sc-cMhqgX jMEedj">
<div class="sc-dnqmqq fKvEOH">
<div class="sc-gqjmRU kjUbTJ">With the recent introduction of Swift 5.5 in WWDC21, developers all around the world are celebrating as finally, finally, <span class="sc-kEYyzF dJiKkY">async/await</span> is now on Swift.</div>
<div></div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-7EDA53DB-DFAA-4437-85A5-A9E170366E27" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div class="sc-iQNlJl eIKlrm"></div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-9A829337-4E58-4F90-BEF2-59042CCF827C" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div id="9A829337-4E58-4F90-BEF2-59042CCF827C" class="sc-VigVT hnmthv">
<div class="sc-VigVT cohFLa">
<div class="sc-gZMcBi hWAufR">
<div class="sc-gqjmRU eEEEQs">So, why is this a big deal?</div>
<div></div>
</div>
</div>
</div>
<div class="sc-iQNlJl eIKlrm"></div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-CFF7AB3C-7F40-4184-8ED5-67AC15A6D3DC" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div id="CFF7AB3C-7F40-4184-8ED5-67AC15A6D3DC" class="sc-VigVT hnmthv">
<div class="sc-VigVT cohFLa">
<div class="sc-gZMcBi hWAufR">
<div class="sc-gqjmRU eEEEQs">Currently, if you’re doing something that requires a lot of asynchronous code, your code might have something like this:</div>
<div></div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-exAgwC kieIiD">
<pre id="temp-for-copy" class="wp-block-code"><code>
func doComplexActions(completion: @escaping() - &amp; gt; Void) {
    action1 {
      boolResult in
        if boolResult {
        action2(boolResult) {
          intResult in
            action3(intResult) {
            stringResult in
              print(stringResult)
            completion()
          }
        }
      } else {
        action4 {
          stringResult in
            print(stringResult)
          completion()
        }
      }
    }
  }
  
  func action1(completion: @escaping(Bool) - &amp; gt; Void) {
    // async code here
    completion(boolResult)
  }
  
  func action2(_ result: Bool, completion: @escaping(Int) - &amp; gt; Void) {
    // async code here
    completion(intResult)
  }
  
  func action3(_ result: Int, completion: @escaping(String) - &amp; gt; Void) {
    // async code here
    completion(stringResult)
  }
  
  func action4(completion: @escaping(String) - &amp; gt; Void) {
    // async code here
    completion(stringResult)
  }
</code></pre>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-20FDAC7D-200F-4453-9983-F1374CA3D1BD" class="sc-epnACN kAlyV" data-menu-inside="false">
<div class="sc-iQNlJl iRKqjd"></div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-212C7720-CA20-4CC0-BB49-82777D4A605E" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div id="212C7720-CA20-4CC0-BB49-82777D4A605E" class="sc-VigVT hnmthv">
<div class="sc-VigVT cohFLa">
<div class="sc-gZMcBi hWAufR">
<div></div>
<div class="sc-gqjmRU eEEEQs">But with async/await, we can further simplify that to a more concise and readable format.</div>
<div></div>
</div>
</div>
</div>
<div class="sc-iQNlJl eIKlrm">
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-17BB3994-3769-47F5-B00F-FCB928E2318E" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div id="17BB3994-3769-47F5-B00F-FCB928E2318E" class="sc-VigVT hnmthv">
<div class="sc-VigVT cohFLa">
<div class="sc-gZMcBi hWAufR">
<div></div>
<div class="sc-gqjmRU eEEEQs">Let&#8217;s break down into how we can convert our current code to the Async/Await pattern.</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div class="sc-bsbRJL kNaSwt"></div>
<div id="blockwrap-0CF524C7-5A93-4E6C-BF85-8988D6E64028" class="sc-epnACN cADneN" data-menu-inside="false">
<div id="0CF524C7-5A93-4E6C-BF85-8988D6E64028" class="sc-VigVT hnmthv">
<p class="sc-ibxdXY iFLRwU">1. Replace the <em>completion handler syntax </em>with the <em>async syntax </em></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-0CF524C7-5A93-4E6C-BF85-8988D6E64028" class="sc-epnACN cADneN" data-menu-inside="false">
<div class="sc-iQNlJl eIKlrm">
<pre id="temp-for-copy" class="wp-block-code"><code>
func action1(completion: @escaping (Bool) -&gt; Void) {
    // async code here
    completion(boolResult)
  }
</code></pre>
</div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-B16A57C4-9D1E-462A-B202-0564C8E45B15" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div class="sc-bsbRJL kNaSwt">
<pre id="temp-for-copy" class="wp-block-code"><code>
func action1() async -&gt; Bool {
    // async code here
    return boolResult
  }
</code></pre>
</div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-425309F5-38D1-47EA-85B4-922E4C6F9B5F" class="sc-epnACN cADneN" data-menu-inside="false">
<div class="sc-bsbRJL kNaSwt"></div>
<div id="425309F5-38D1-47EA-85B4-922E4C6F9B5F" class="sc-VigVT hnmthv">
<div></div>
<div class="sc-ibxdXY iFLRwU">2. Replace the <em>c</em><span class="sc-kEYyzF dJiKkY"><em>losure syntax</em></span> with <em><span class="sc-kEYyzF dJiKkY">await syntax</span></em></div>
</div>
<div class="sc-iQNlJl eIKlrm"></div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-5D817ABA-38B2-49B9-AAF1-195A5D5F9DDF" class="sc-epnACN kAlyV" data-menu-inside="false"></div>
</div>
<div class="sc-exAgwC kieIiD">
<pre id="temp-for-copy" class="wp-block-code"><code>
action1() { boolResult in
    // ...
  }
</code></pre>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-595097AE-DA5A-4317-B24C-1C8B50F43029" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div class="sc-bsbRJL kNaSwt">
<pre id="temp-for-copy" class="wp-block-code"><code>
let boolResult = await action1()
// ...
</code></pre>
</div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-79620691-793C-43D8-BC64-B6E74DC26466" class="sc-epnACN cADneN" data-menu-inside="false">
<div class="sc-bsbRJL kNaSwt"></div>
<div id="79620691-793C-43D8-BC64-B6E74DC26466" class="sc-VigVT hnmthv">
<div></div>
<div class="sc-ibxdXY iFLRwU">3. Repeat for other functions</div>
</div>
<div class="sc-iQNlJl eIKlrm"></div>
</div>
</div>
<div class="sc-exAgwC kieIiD">
<pre id="temp-for-copy" class="wp-block-code"><code>
func doComplexActions() async {
    let boolResult = await action1()
    if boolResult {
      let intResult = await action2(boolResult)
      let stringResult = await action3(intResult)
      print(stringResult)
    } else {
      let stringResult = await action4(intResult)
      print(stringResult)
    }
  }
  
  func action1() async -&gt; Bool {
    // async code here
    return boolResult
  }
  
  func action2(_ result: Bool) async -&gt; Int {
    // async code here
    return intResult
  }
  
  func action3(_ result: Int) async -&gt; String {
    // async code here
    return stringResult
  }
  
  func action4() async -&gt; String {
    // async code here
    return stringResult
  }
</code></pre>
</div>
<div class="sc-exAgwC kieIiD"></div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-21455B76-2900-4F68-B510-772A2DF45E7C" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div class="sc-bsbRJL kNaSwt"></div>
<div id="21455B76-2900-4F68-B510-772A2DF45E7C" class="sc-VigVT hnmthv">
<div class="sc-VigVT cohFLa">
<div class="sc-gZMcBi hWAufR">
<div></div>
<div class="sc-gqjmRU eEEEQs">And we’re done! As you can see, with async/await, our code is now more streamlined. We’re able to better see the scope of the conditional and the sequence of actions within it.</div>
</div>
</div>
</div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-B2968EE1-8E3C-4F47-9818-A813EED0359B" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div class="sc-iQNlJl eIKlrm"></div>
</div>
</div>
<div class="sc-VigVT sc-hORach hdfVyZ">
<div id="blockwrap-7BB96734-E373-4D00-8A13-BFF717A0A68D" class="sc-epnACN eQJZRm" data-menu-inside="false">
<div id="7BB96734-E373-4D00-8A13-BFF717A0A68D" class="sc-VigVT hnmthv">
<div class="sc-VigVT cohFLa">
<div class="sc-gZMcBi hWAufR">
<div></div>
<div class="sc-gqjmRU eEEEQs">Cool right? that’s just one of the updates we have with Swift 5.5! Share more with us.</div>
</div>
</div>
</div>
</div>
</div>


Get to know Async/Await in Swift

<p>Part of every developers dilemma is deciding which approach to take in addressing certain problems. Genuine solutions require a certain amount of effort and steps to achieve and there exists acceptable &#8220;workarounds&#8221; that tests every developers way of thinking.</p>
<p>Here are some simple workarounds that you might find helpful and will help save time in cases you still haven’t figured out the right solution.</p>
<p>For you to follow along and experiment your use-cases or check the results yourself, here’s a quick <a href="https://reactjs.org/docs/create-a-new-react-app.html">guide.</a></p>
<pre><code class="language-bash">npx create-react-app my-app
cd my-app
npm start
</code></pre>
<p><strong>Optional</strong></p>
<p>Install your favorite UI library (in this example, I used <a href="https://ant.design/docs/react/introduce">ant-design</a>).</p>
<h4>1. Force re-render by updating component key property</h4>
<p>There might be instances that you need to reset your component state (e.g. form states) after a certain action (click event, keyboard event, after certain requests, you name them…) outside your form component, and realized you don&#8217;t have access to the form library&#8217;s <strong>reset</strong> function.</p>
<p><strong>Form component</strong> (use your favorite form state library, react-hook-form in this example)</p>
<pre class="wp-block-code"><code>import React from 'react'
import { Form, Input } from 'antd'
import { useForm, Controller } from 'react-hook-form'

const FormComponent = () =&gt; {
  const { control, getValues } = useForm();
  const formValues = getValues()

  return (
    &lt;Form&gt;
      &lt;Controller 
        name="firstname"
	control={control}
	defaultValue={formValues.firstname}
	render={props =&gt; &lt;Input {...props} placeholder="First name" /&gt;}
      /&gt;
      &lt;Controller 
	name="lastname"
	control={control}
	defaultValue={formValues.lastname}
	render={props =&gt; &lt;Input {...props} placeholder="Last name" /&gt;}
      /&gt;
    &lt;/Form&gt;
  )
}
</code></pre>
<p><strong>Usage</strong></p>
<pre class="wp-block-code"><code>import React, { useState } from 'react'
import { Button } from 'antd'

// use your favorite library (e.g. uuid)
const getUniqueFormKey = () =&gt; (new Date()).toISOString()

export default () =&gt; {
  const [key, setKey] = useState(getUniqueFormKey())
  return (
    &lt;div&gt;
      &lt;FormComponent key={key} /&gt;
      &lt;Button onClick={() =&gt; setKey(getUniqueFormKey())}&gt;Reset form&lt;/Button&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<p><strong>Result</strong></p>
<p>By changing the components <code>key</code> property, we were able to re-render the component completely and reset its state</p>
<p><img class="aligncenter wp-image-1973 size-full" src="https://wordpress.highoutput.io/wp-content/uploads/2021/06/work-around-1.gif" alt="" width="600" height="338" /></p>
<h4>2. Access react state in event listeners via useRef</h4>
<p>There might be cases that you&#8217;ll need to add an event listener, override specific key binding, access react state from <code>useState</code> and trigger certain actions from there.</p>
<p>Sounds easy, right? It feels natural, but your state will most probably be empty. Let&#8217;s try.</p>
<p><strong>Component</strong></p>
<pre class="wp-block-code"><code>import React, { useState } from 'react'
import { Input } from 'antd'

const App = () =&gt; {
  const [formState, setFormState] = useState({ fname: '', lname: '' })

  return (
    &lt;div&gt;
      &lt;Input
        value={formState.fname}
        placeholder="First name"
        onChange={e =&gt; setFormState({
          ...formState,
          fname: e.target.value,
        })}
      /&gt;
      &lt;Input
        value={formState.lname}
        placeholder="Last name"
        onChange={e =&gt; setFormState({
          ...formState,
          lname: e.target.value,
        })}
      /&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<p>Then add <strong><code>keydown</code></strong> event listener via <strong><code>useEffect</code></strong></p>
<pre class="wp-block-code"><code>import React, { useEffect } from 'react'
import { Input } from 'antd'

const App = () =&gt; {
  ...

  useEffect(() =&gt; {
    const onKeydown = e =&gt; {
      if (e.code === 'Enter') {
        // do whatever you want with the state
        console.log(formState)
      }
    }
    if (window) window.addEventListener('keydown', onKeydown)
    return () =&gt; {
      if (window) window.removeEventListener('keydown', onKeydown)
    }
  }, [])

  ...
}
</code></pre>
<p>With this setup, this is what the state looks like upon triggering the &#8220;Enter&#8221; key from the keyboard, it doesn&#8217;t contain anything but the default values.</p>
<p><img class="aligncenter wp-image-1975 size-full" src="https://wordpress.highoutput.io/wp-content/uploads/2021/06/work-around-2.gif" alt="" width="600" height="338" /></p>
<p>To access the updated state in the event listener, add the following modifications to the code</p>
<ol>
<li>Import <strong><code>useRef</code></strong> and set the default value with the state&#8217;s value</li>
<li>Add another <strong><code>useEffect</code></strong> that will keep the <strong><code>formStateRef</code></strong> value updated every time the state changes</li>
<li>Use the <code>formStateRef.current</code> on the <code>onKeydown</code> instead</li>
</ol>
<pre class="wp-block-code"><code>import React, { useEffect, useRef } from 'react'
import { Input } from 'antd'

const App = () =&gt; {
  const [formState, setFormState] = useState({ fname: '', lname: '' })
  const formStateRef = useRef(formState)

  useEffect(() =&gt; {
    const onKeydown = e =&gt; {
      if (e.code === 'Enter') {
        // do whatever you want with the state
        console.log(formStateRef.current)
      }
    }
    if (window) window.addEventListener('keydown', onKeydown)
    return () =&gt; {
      if (window) window.removeEventListener('keydown', onKeydown)
    }
  }, [])

  useEffect(() =&gt; {
    formStateRef.current = formState
  }, [formState])

  ...
}
</code></pre>
<p><strong>Result</strong></p>
<p>And we can now have access to the updated state via useRef in our event listener.</p>
<p><img class="aligncenter wp-image-1974 size-full" src="https://wordpress.highoutput.io/wp-content/uploads/2021/06/work-around-2-1.gif" alt="" width="600" height="338" /></p>
<p>It&#8217;s good to note that the above workarounds will work on any stateful components, and are not limited to form components.</p>
<h2>Conclusion</h2>
<p>While it is always good to find a genuine solution to a problem, workarounds can be as creative as true solutions and I find some of them saving me from doing over-engineered solutions which convolute the codebase unnecessarily. Plus, it saves time!</p>


Simple ReactJS workarounds

<h3><b>Ethical Hackers</b></h3>
<p><span style="font-weight: 400;">When you hear the word hacker what do you immediately think?</span></p>
<p><span style="font-weight: 400;">Is it the hooded guys that steal personal data from the internet using their insane computer skills?</span></p>
<p><span style="font-weight: 400;">If you do, you’re not entirely wrong, but did you know that there are also hackers that have good intentions and are actually allowed to hack into computer systems? They are called Ethical Hackers.</span></p>
<p><span style="font-weight: 400;">Have you seen Sylvester Stallone’s movie Escape Plan? In this movie, he breaks in and out of prisons as a profession. After a successful prison break, he then recommends improvements on the prison&#8217;s security system based on the methods he used during the prison break. Similarly, ethical hackers break into computer systems using the same methods used by criminal hackers, to help assess the security of a system.</span></p>
<p><span style="font-weight: 400;">As the saying goes, “</span><i><span style="font-weight: 400;">It takes a thief to catch a thief</span></i><span style="font-weight: 400;">” but in this case, we are dealing with hackers, not a thief and instead of catching them, we just want them out and away from our systems.</span></p>
<h3><b>Unethical Hackers</b></h3>
<p><span style="font-weight: 400;">Last time, I asked you “what comes to mind when you hear the word hacker?”. So now, we will talk about those shady guys that come to mind when talking about hackers. Since it’s common knowledge that hackers break into systems with ill intentions, I won&#8217;t get into that. Let’s talk about other things about them instead.</span></p>
<p><span style="font-weight: 400;">First, their motive. Most of the time, it’s money. I’m thinking of three ways how they can make money from what they are doing:</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Sell the assets they obtained through hacking</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Sell their services to people who want to hack a computer system</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Collect ransom from owners of hacked computer system</span></li>
</ol>
<p><span style="font-weight: 400;">When it’s not money, they hack the system for the same reasons why people hire them in #2.</span></p>
<p><span style="font-weight: 400;">Next, let’s talk about the different types of unethical hackers.</span></p>
<p><span style="font-weight: 400;">Some hackers break laws to fulfill their motives.</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Black hat hackers: A hacker who breaks into computer systems without the permission of the system owner. This is usually someone with malicious intent.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Blue hat hackers: The vengeful spirits. A person who learns hacking to get revenge from an individual or an organization.</span></li>
</ul>
<p><span style="font-weight: 400;">While some hackers break the law, their motives might be considered by other people as ethical, heroic, or justifiable.</span></p>
<ul>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Grey hat hackers:  A hacker who breaks into computer systems without permission but reveals his findings to the system owner.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Red hat hackers: The vigilante. Hacks through a black hat&#8217;s systems to stop the illegal activities and malicious intent of a black hat hacker.</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Hacktivists: A person who hacks through a system to broadcast their belief and ideals. Usually victimizes government systems and leaves political messages.</span></li>
</ul>
<p><span style="font-weight: 400;">To sum up, ethical hackers hack on behalf of the company to find and cover the loopholes to the system&#8217;s security. On the other hand, unethical hackers hack to cause harm or loss to the company and take profit for themselves.</span></p>
<p>Hopefully this blog gave you some insight into the colourful world of hacking. More and more companies are taking data protection and security seriously, and are willing to invest heavily in securing their systems &#8211; including hiring ethical hackers.</p>


Ethical vs. unethical hackers

<blockquote><p><strong><em>Cost is more important than quality, but quality is the best way to reduce cost &#8211; Genichi Taguchi</em></strong></p></blockquote>
<p>This quote doesn’t just apply to projects or work. It certainly applies to all aspects of our life: whether it’d be something that we eat, we always tend to pick up the freshest produce we see; to online shopping, we often look at product reviews before checking the items out; to our relationship, there&#8217;s always that line of quality friends over quantity. It&#8217;s innate in people who want the best for themselves. If you lose quality in food, there&#8217;s a risk of getting sick if consumed. And for products, it tends to break easily in which you’ll have to spend more than what you paid for &#8211; that&#8217;s the price of poor quality.</p>
<p>For software, the importance of quality is monumental. An unstable product running in live production may lead to a loss in customer engagements, and while some projects run on the pre-production phase it also consumes a lot of time and resources. The more the build gets retracted from being pushed to live production, the higher the chances it creates more tension internally for the organization &#8211; which may then lead to it being discontinued.</p>
<p>As much as possible, we&#8217;d like to avoid that kind of situation as we have invested a great deal of time and money for a project to just go down the drain. And trust me, we&#8217;ve had a share of those experiences at work &#8211; some gains and losses. But a loss does not imply defeat; it just means we need to do better the next time the same problem occurs.</p>
<p>So here I&#8217;ve listed some of my thoughts on the important parts in supporting a project and its quality, which might be of use to some of you.</p>
<ol>
<li><strong><em>Clear Business/Project Goals</em></strong> &#8211; if you have an idea, you must be able to convey your plans and intentions to other people involved. Now, a project may not have all its core functionalities listed from the start; but it must have at least something specific it wants to do or deliver. You mustn’t allow developers to create the specifics from the start. It must come from the business/project manager else it will create a traction point, wherein developers will have to redo their work because it wasn&#8217;t the exact business/project requirement.</li>
<li><strong><em>Planning &#8211;</em></strong> once goals have been established, a project should have proper planning (from documentations, wireframes, user stories, event storming sessions, DevOps infrastructure, API and data designs, logical flows, etc.) before starting the development and targeting deadlines/the timeline for teams. Everyone should be clear on what needs to be achieved.</li>
<li><strong><em>Team Composition</em></strong> &#8211; as much as people hate being in a hierarchy, it creates an order for the organization. Teams must have a POC of who&#8217;s who to chase for when something related to a problem happens &#8211; from the project manager, backend/frontend lead, infrastructure to QA. Someone needs to be responsible for a role and must be able to manage the team and its optimal performance.</li>
<li><strong><em>Communication</em></strong> &#8211; &#8220;In teamwork, silence isn&#8217;t golden, it&#8217;s deadly.&#8221; The information being relayed doesn&#8217;t need to be perfect it just needs to be addressed properly by the people in the organization. To effectively deliver a good output, everyone must be able to communicate goals, issues, feedback, and suggestions.</li>
<li><strong><em>Infrastructure</em></strong> &#8211; it&#8217;s important to have a solid infrastructure setup as it is the backbone of projects and the most critical part when the project is running. It should be able to handle downtimes, traffics, log monitoring, service build updates, data events, etc.</li>
<li><strong><em>Quality Gates</em></strong> – now, this doesn&#8217;t solely depend on the QA team, it is apparent in all departments: project managers need to ensure the requirements are correct and detailed, developers will implement their own sets of code testing, DevOps will have the error log monitoring, and most importantly QA will have a set of tests that will fit the project/feature both manual and automation. The gates will have to block an unstable build from being released as a final output for a deadline/push and must ensure a much stable version is delivered throughout each cycle.</li>
</ol>
<p>The list above is not the perfect guide to achieve better project quality, but will give you a good idea of what should be expected as a criterion. It will always depend on how well the organization manages its processes, workflow, and teams. That&#8217;s why here at HOV, we&#8217;re continuously learning from one project at a time and developing better tools/processes to ensure we deliver the most ideal outcome for our ideas.</p>
<p>We&#8217;re working on an exciting test project to help the company fill missing gaps in ensuring better quality and transparency for internal projects this year. I look forward to sharing it in my next post! Fingers crossed 🤞</p>


Why poor quality is costly

<h1><span style="font-weight: 400;">Cyber Attacks</span></h1>
<p><i><span style="font-weight: 400;">You start your day checking for emails and you spot a client email with &#8220;PROPOSAL” as the subject line. You try opening the attachment but nothing happens. You ask the sender to resend the mail, but you never get a reply. You continue your day as usual.</span></i></p>
<p><i><span style="font-weight: 400;">The next day, your company announces that a data breach occurred with 130 million customer data compromised. You receive an email from the IT department asking for any unusual stuff that happened the previous day and you remember the weird “PROPOSAL” email with an attachment that never opened. You were a victim of </span></i><b><i>phishing</i></b><span style="font-weight: 400;">.</span></p>
<p><span style="font-weight: 400;">Here&#8217;s how </span><a href="https://www.phishing.org/what-is-phishing"><b>phishing.org</b></a><span style="font-weight: 400;"> defines it:</span></p>
<blockquote><p><span style="font-weight: 400;">Phishing is a cybercrime in which a target or targets are contacted by email, telephone, or text message by someone posing as a legitimate institution to lure individuals into providing sensitive data such as personally identifiable information, banking, and credit card details and passwords. </span>The information is then used to access important accounts and can result in identity theft and financial loss.</p></blockquote>
<p><span style="font-weight: 400;">Phishing is among many other cyberattack methods that are being used by cybercriminals to acquire sensitive information for personal gains. Some of the most common attacks are:</span></p>
<ol>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Denial of Service (DoS)</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Malware</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Password attack</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">SQL injection</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Cross-site scripting (XSS)</span></li>
<li style="font-weight: 400;" aria-level="1"><span style="font-weight: 400;">Man in the middle attack</span></li>
</ol>
<h1><span style="font-weight: 400;">Defending yourself and your organization from cyberattacks</span></h1>
<p><i><span style="font-weight: 400;">Your IT Department conducts an information campaign on how to spot </span></i><b><i>phishing</i></b><i><span style="font-weight: 400;"> emails and how to deal with them. All the employees are also required to join a </span></i><b><i>Cyber Security Seminar</i></b><i> so you are more equip to deal with other forms of attacks that may target you and your organization in the future. In the seminar, you learn that cybersecurity is the collection of methods, technologies, and processes aimed to maintain the confidentiality, integrity, and availability of computer systems, networks, and data against cyber-attacks or unauthorized access, and even natural disasters.</i></p>
<p><span style="font-weight: 400;">Defending yourself and your organization from cyberattacks is very much like defending a building from criminals. There are monitoring tools that record the activities happening in the system, much like what CCTV does in a building. There are also cybersecurity professionals that ensure the security of computer systems just like what security personnel does in a building. Cybersecurity should be implemented 24/7 as done in building security.</span></p>
<h1><span style="font-weight: 400;">Why do you need to improve the security of a system?</span></h1>
<p><i><span style="font-weight: 400;">After the phishing incident, the IT team has been pushing security updates to everyone’s computer regularly. Some employees are annoyed because they are forced to restart their computers while they are working on something. They even question why one security update is not enough to protect the systems from cyberattacks.</span></i></p>
<p><span style="font-weight: 400;">To answer that question, I’m going back to my analogy between cybersecurity and building security, I will also throw in a reference that I have researched because I feel like those imaginary employees are hard to convince.</span></p>
<p><span style="font-weight: 400;">Taken from an</span> <a href="https://www.tandfonline.com/doi/full/10.1080/14043858.2017.1387410">academic paper</a> that reviewed seven studies about the effectiveness of surveillance cameras in reducing crime;</p>
<blockquote><p><span style="font-weight: 400;">Changes in total </span><span style="font-weight: 400;">crime</span><span style="font-weight: 400;"> found </span><span style="font-weight: 400;">crime</span><span style="font-weight: 400;"> reductions ranging from 24 to 28% in public streets and urban subway stations, but no desirable effects in parking facilities or suburban subway stations.</span></p></blockquote>
<p><span style="font-weight: 400;">This implies that although crimes are reduced when surveillance cameras/CCTVs are installed, crimes still happen even when CCTVs are in use. The same thing is true for computer systems, a single security update will not eradicate the threat of cyberattacks. Cybercriminals/hackers will not be stopped by a security update, they will just look for other ways to break into your systems.</span></p>
<h1><span style="font-weight: 400;">Key takeaway</span></h1>
<p><span style="font-weight: 400;">Cybersecurity is the process of defending computer systems from cyberattacks. There are many forms of cyberattacks, one of which is phishing. Phishing is a technique used to obtain sensitive data where targets are contacted via email by cybercriminals posing as legitimate institutions. Cybercriminals/hackers cannot be stopped by just a single security update and as hackers continuously improve their techniques, your system’s security should improve as well.</span></p>


CyberSecurity

Tutorial: NextJs and Strapi setup


<p>I know what you&#8217;re thinking.&nbsp;<em>&#8220;Why Mocha? Why not use AVA? Why not find other alternatives?&#8221;</em></p>



<p>Yes, there are considerations taken for those questions, I&#8217;d rather cover that in another post.</p>



<p>This time, let&#8217;s assume we&#8217;re using the following tech and tools:</p>



<ol><li>API written in Node.js/Typescript</li><li>Mocha</li><li>Circle CI</li><li><code>nyc</code>&nbsp;test coverage tool</li><li>And a long set of tests, I mean really long.</li></ol>



<h3>Setting up Parallelism in Circle CI</h3>



<p>This is not the same&nbsp;<code>--parallel</code>&nbsp;flag option in Mocha. Parallelism in Circle CI allows you to split your test files and run them in separate executors running at the same time therefore reducing test time. Here&#8217;s what it looks like:</p>



<figure class="wp-block-image size-large is-style-default"><img width="1024" height="509" src="https://wordpress.highoutput.io/wp-content/uploads/2021/02/Untitled-2-1-1024x509.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/dc765c96-f405-40cd-bd95-b9b3b067ee9e/Untitled.png" class="wp-image-1530" srcset="https://wordpress.highoutput.io/wp-content/uploads/2021/02/Untitled-2-1-1024x509.png 1024w, https://wordpress.highoutput.io/wp-content/uploads/2021/02/Untitled-2-1-300x149.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2021/02/Untitled-2-1-768x382.png 768w, https://wordpress.highoutput.io/wp-content/uploads/2021/02/Untitled-2-1-1536x764.png 1536w, https://wordpress.highoutput.io/wp-content/uploads/2021/02/Untitled-2-1.png 1628w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>In the image, we can see that there are 8 executors running in parallel. Each executor runs a different set of test files depending on how they were split across executors.</p>



<p>To enable this, we simply set&nbsp;parallelism&nbsp;attribute of a&nbsp;job&nbsp;in our&nbsp;<code>.circleci/config.yml</code>&nbsp;to the number of executors we want. In the case depicted in the picture above,&nbsp;parallelism&nbsp;is set to&nbsp;8. We also have to use some commands using&nbsp;circleci&nbsp;cli to split our test files:</p>



<ul><li><code>circleci tests glob</code></li><li><code>circleci tests split</code></li></ul>



<p>Let&#8217;s put this into action, shall we? Here&#8217;s a simple&nbsp;<code>.circleci/config.yml</code>&nbsp;file that utilizes parallelism.</p>



<div class="wp-block-group"><div class="wp-block-group__inner-container">
<pre class="wp-block-code"><code><code>version: 2.1

jobs:
  checkout_source:
    docker:
      - image: circleci/node:14.15.1-stretch
    steps:
      - checkout
      - persist_to_workspace:
          root: .
          paths:
            - .
  install_dependencies:
    docker:
      - image: circleci/node:14.15.1-stretch
    steps:
      - attach_workspace:
          at: .
      - restore_cache:
          keys:
            - dependencies-{{ checksum "package-lock.json" }}
      - run:
          name: Install dependencies
          command: npm install
      - save_cache:
          key: dependencies-{{ checksum "package-lock.json" }}
          paths:
            - node_modules
      - persist_to_workspace:
          root: .
          paths:
            - node_modules/*
  test:
    docker:
      - image: circleci/node:14.15.1-stretch
    parallelism: 8
    steps:
      - attach_workspace:
          at: .
      - run:
          name: Run tests
          command: |
            circleci tests glob 'test/**/*.spec.ts' |
            circleci tests split |
            xargs npx mocha
workflows:
  build_workflow:
    jobs:
      - checkout_source
      - install_dependencies:
          requires:
            - checkout_source
      - test:
          requires:
            - install_dependencies</code></code></pre>
</div></div>



<p>What the command&nbsp;<code>circleci tests glob 'test/**/*.spec.ts'</code>&nbsp;does is that it lists all the files that matches the glob pattern&nbsp;<code>'test/**/*.spec.ts'</code>. It&#8217;s pretty much like what the command&nbsp;<code>ls</code>&nbsp;does when you set a glob pattern as argument. The command&nbsp;<code>circleci tests split</code>&nbsp;then takes this list of files and splits them in such a way that each executor will have&nbsp;<em>ideally</em>&nbsp;well-distributed test files.</p>



<p>There are 3 splitting techniques that Circle CI is using and you can choose which one to use:</p>



<ol><li>Default, files are split alphabetically by their filenames.</li><li><code>circleci tests split --split-by=filesize</code>&nbsp;&#8211; Files are split by their sizes.</li><li><code>circleci tests split --split-by=timings</code>&nbsp;&#8211; Files are split by test timings. When you use this option, you&#8217;ll need to store your timing data in artifacts.</li></ol>



<p>For simplicity, in this example, we&#8217;re just splitting files using the default technique.</p>



<p>Congrats! You now have parallelism enabled in your Circle CI tests. Time to celebrate? Not quite. When you&#8217;re using a test coverage tool, you stumble upon a slight issue.</p>



<h3>Setting up&nbsp;<code>nyc</code>&nbsp;test coverage while&nbsp;<code>parallelism</code>&nbsp;is enabled</h3>



<p>Since we are splitting the test files and are distributing them to a number of executors, each executor will only be running a partial set of your whole test files. That means your test coverage, for each executor, will plummet down and coverage checking will consequently fail.</p>



<p>Here&#8217;s my approach to work around this thing:</p>



<ol><li>Run&nbsp;<code>nyc</code>&nbsp;in all tests for each executor but setting<code>&nbsp;check-coverage</code>&nbsp;to&nbsp;<code>false</code>. We don&#8217;t want to check coverage levels right now, we only need coverage data.</li><li>For each executor, store coverage data to an arbitrary (with some level of file organization) directory.</li><li>Merge coverage data from different directories generated by each executor.</li><li>And run coverage check against the merged coverage data.</li></ol>



<p>Again, to the config files!</p>



<p>We&#8217;re going to add&nbsp;<code>nyc</code>&nbsp;command and set the right&nbsp;<code>--temp-dir</code>&nbsp;flag to control where coverage data are stored. In our&nbsp;<code>.circleci/.config.yml</code>, our test command will now become:</p>



<pre class="wp-block-code"><code>circleci tests glob 'test/**/*.spec.ts' |
circleci tests split |
xargs npx nyc --temp-dir=./.nyc_output_temp/$CIRCLE_JOB-$CIRCLE_NODE_INDEX/nyc_output mocha
</code></pre>



<p>What this does is it instructs&nbsp;<code>nyc</code>&nbsp;to store coverage data in&nbsp;<code>./.nyc_output_temp/$CIRCLE_JOB-$CIRCLE_NODE_INDEX/nyc_output</code>. You can set your own temporary directory, but it should be unique per executor to avoid overlaps/conflicts in merging the generated test coverage results. In here, I used the following built-in environment variables in Circle CI:</p>



<ol><li><code>$CIRCLE_JOB</code>&nbsp;&#8211; Name of the job. In this case, it&#8217;s&nbsp;<code>test</code>.</li><li><code>$CIRCLE_NODE_INDEX</code>&nbsp;&#8211; Each executor for a specific job has it&#8217;s own index.</li></ol>



<p>Now that we have test coverage data stored in the temporary directory, we just need to add a step in our job to make these files available to jobs downstream in the workflow. The following step tells CircleCI to persist the files in&nbsp;<code>.nyc_output_temp/*</code>&nbsp;directory, so that these files are available in our next job where we merge coverage test data and do the coverage check.</p>



<pre class="wp-block-code"><code>- persist_to_workspace:
		root: .
    paths:
      - .nyc_output_temp/*
</code></pre>



<p>Assuming all tests passed, we can now merge the coverage data and do the coverage check. To merge the coverage data, we can just run the following <a href="https://github.com/istanbuljs/istanbuljs/blob/master/monorepo-merge-reports.js">code</a>:</p>



<pre class="wp-block-code"><code>'use strict';

const { spawnSync } = require('child_process');
const path = require('path');
const glob = require('glob');
const makeDir = require('make-dir');
const rimraf = require('rimraf');

process.chdir(__dirname);
rimraf.sync('.nyc_output');
makeDir.sync('.nyc_output');

// Merge coverage data from each executor.
glob.sync('.nyc_output_temp/*/nyc_output').forEach((nycOutput) =&gt; {
  console.log(`Merging: ${nycOutput}`);
  const cwd = path.dirname(nycOutput);
  const { status, stderr } = spawnSync(
    'npx nyc',
    &#91;
      'merge',
      'nyc_output',
      path.join(__dirname, '.nyc_output', path.basename(cwd) + '.json'),
    ],
    {
      encoding: 'utf8',
      shell: true,
      cwd,
    },
  );

  if (status !== 0) {
    process.exit(status);
  }
});
</code></pre>



<p>The code actually runs&nbsp;<code>nyc merge</code>&nbsp;command to merge all coverage data from each directory generated by each executor. Once we have the merged coverage data, we can now run the coverage check.</p>



<pre class="wp-block-code"><code>nyc report --reporter=lcov --reporter=text-summary --check-coverage
</code></pre>



<p>This command runs a coverage check under&nbsp;<code>.nyc_output</code>&nbsp;where all coverage data were merged when we ran the code above. This methodology of merging test coverage data is not limited to Circle CI tests only. You can also use this when you need to run different tests separately and want to run test coverage check after all different tests are ran.</p>



<h3>Conclusion</h3>



<p>That&#8217;s it! You can now enable parallelism in Circle CI without removing the ability to check test coverage. For sure, there are a few other ways to solve the same problem, but I have found this to be more robust and straightforward.</p>



<p>Here&#8217;s a public GitHub Gist were I put all the necessary configuration files:&nbsp;<a href="https://gist.github.com/ccpacillos/3778615ec84e3a494111a29430996829">https://gist.github.com/ccpacillos/3778615ec84e3a494111a29430996829</a></p>
