Essential Tools for a Digital Illustrator

<p>Most of the time, during the development stage of a certain project, we are often focused on the functional side of things. While there is nothing wrong with making sure that features works 100%, bug-free and delivered on-time, I believe that design should have it’s own place in the cycle.</p>
<p>It is often overlooked that people who will be using the product is not only driven by the features but also by the visual experience delivered by the design.</p>
<p>Designs are a product of intensive thought-process from UX to UI to make sure that the product is not only functional but also engages users to stay, interact and have a better experience which makes it as equally as important as the functional features.</p>
<h2><strong>What is Design QA?</strong></h2>
<p>Design QA is a process of making sure that visual designs, micro interactions, and copywriting are properly followed throughout the development process.</p>
<p>A Design <a href="https://wordpress.highoutput.io/5-myths-about-qa-and-testing/">QA&#8217;s</a> main objective is to make sure that production is carried out with the required level of quality and design output.</p>
<h2>The Challenge <strong>of Implementing Design QA?</strong></h2>
<p>Initially, design QA can be extremely difficult. It can eat up time during a sprint and be quite costly. However, incorporating it into your process ensures high-quality output and better user experiences.</p>
<p><img class="alignnone size-medium wp-image-2422" src="https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-300x128.png" alt="" width="300" height="128" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-300x128.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-1024x437.png 1024w, https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-768x328.png 768w, https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow.png 1476w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>The challenge of adding <a href="https://bootcamp.uxdesign.cc/what-the-design-qa-process-means-for-products-and-how-to-do-it-7484e5eaa4e2">Design QA</a> layer in the workflow may receive a lot of friction from the whole team especially the front-end developers.</p>
<p>Devs may want to focus on integrating the API endpoints to their work instead of adjusting paddings, colors and spacings but the moment the team starts doing this, we can be able to reduce design debt which is “<em><strong>all the good design concepts or solutions that you skipped in order to reach short-term goals”</strong></em></p>
<p>While it is always good to focus on skipping some design details specially when we are pushing for a faster delivery, if we continue neglecting Design QA and the product is out, we’ll realize that no matter how optimized our code structure is, if the interface looks totally out of place, all of our efforts will be futile.</p>
<p>If we continue neglecting Design QA and the product is out, we’ll realize that no matter how optimized our code structure is, if the interface looks totally out of place, all of our efforts will be futile.</p>
<h3>“<em>Users interact with the interface, not with the code.”</em></h3>
<p>In the art world, there is always the conflict between form and function and I believe that a balance of a high functioning code and a powerful visual component is what makes a highly successful project.</p>
<p>Apps needs to be a multi-sensory experience. Design, ease-of-use as well as audio will give another layer of flavor.</p>


Importance of Design QA workflow

<h3>Do you delight in finding fault?</h3>
<p>Well, <strong>Yes</strong>. We do think analytically on how to make an application fail. Exhausting all other scenarios aside from scenarios that are on only a good path is vital.</p>
<p>Sometimes we feel nervous whenever something seems right, perhaps it might be because one is overthinking. We cannot deny the fact that we usually double check and reevaluate things, right?</p>
<p><a href="https://philosiblog.com/2014/03/07/every-problem-is-a-gift-without-problems-we-would-not-grow/">Tony Robbins</a> says &#8220;Every problem is a gift. Without them we wouldn’t grow&#8221;. Faults are inevitable whether we like it or not. The more we realize it then the more we are able to find joy in dealing with them.</p>
<p><img class="alignnone size-medium wp-image-2405" src="https://wordpress.highoutput.io/wp-content/uploads/2022/08/giphy-300x300.gif" alt="" width="300" height="300" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/08/giphy-300x300.gif 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/08/giphy-150x150.gif 150w, https://wordpress.highoutput.io/wp-content/uploads/2022/08/giphy-231x231.gif 231w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<hr />
<h3>What do developers think of us?</h3>
<p>They can think of us as a blessing or a curse at the same time. Blessings in a sense that we help them double check the software in order to meet the standard of the client. However, sometimes they consider us as a curse because we are responsible of breaking it. (which makes us happy).</p>
<p>Nevertheless, we all want the best output before they get to production that is why developers and <a href="https://wordpress.highoutput.io/5-myths-about-qa-and-testing/">QAs</a> work hand in hand in shaping the future of the software.</p>
<p><img class="alignnone wp-image-2408" src="https://wordpress.highoutput.io/wp-content/uploads/2022/08/ezgif.com-gif-maker.gif" alt="" width="353" height="147" /></p>
<hr />
<h3>Is SQA an easy job?</h3>
<p>Once and for all there is no easy job. Being SQA requires a lot of soft and hard skills. You must be able to ensure that products delivered meets the standards. And as SQA, the approval of the product depends on you. You should think outside the box, exhaust other ways to find flaws on the product. Analyzation is important for you to better understand what software you are dealing. And if you have a good technical skills you can easily relate to developers. Also, communication skills, is one thing that will help SQA express there self in conveying his point of the issue or defects. Efficiency in work is highly a plus factor because sometimes critical task that must be performed efficiently to produce best output. And last is the attitude towards work, you can have all this skills but if you are poor in character then it would be useless.</p>
<p><img class="alignnone size-medium wp-image-2406" src="https://wordpress.highoutput.io/wp-content/uploads/2022/08/giphy-4-1-300x225.gif" alt="" width="300" height="225" /></p>


SQA questions to ponder

<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>
