DEV Community: Linda Ikechukwu

Why You Should Add an Air Quality API to Your Weather App

Linda Ikechukwu — Mon, 12 Jul 2021 16:15:57 +0000

Air quality refers to a measure of how clean or polluted the air in a particular environment is. According to WHO, air pollution accounts for an estimated seven million deaths worldwide every year, due to the numerous respiratory diseases that it triggers. As crucial as this metric is, it is oftentimes not incorporated by weather app builders. Interestingly, air quality data can easily be added to weather apps (or any other application) with the aid of a good air quality API.

An air quality API basically communicates how polluted the air is and how polluted it is expected to become. It typically reports daily percentages of pollutants that are harmful to human health in a particular location and if they happen to be below or above acceptable thresholds. Such pollutants include carbon monoxide, nitrogen dioxide, sulphur dioxide, ozone, lead, pollen and other particulate matters.

Benefits of Adding Air Quality Data to Your App

Convincing users to try out your app is a big challenge, and encouraging users to retain usage of your app is an even bigger challenge when you’re not providing continuous value. Research done in 2016, shows that only 24% of total users who downloaded a new app returned to it one day after first using it. By subsequent days, they had already deleted the app or completely forgotten about it.

Image source

While there isn’t much we can do about air pollution as individuals, integrating air quality data and insights into your app increases your app’s value proposition due to its numerous use cases. Your users will be equipped to take proactive action regarding their health, like what type of clothing to wear, if it's safe to go outside, what skincare products to use, when to turn on air purifiers etc.

Imagine a user who is allergic to pollen waking up to such a message: “Hi Linda, pollen levels are high on your usual route today, consider taking an alternate route or exercise indoors.” This builds trust, gives them the feeling that you actually care for the quality of their lives, and depicts your app as being a useful part of their daily routine. All these will definitely have them coming back for more. After all, what is the best way to provide continuous value and become indispensable, if not by integrating your app as part of their daily routine?

What to Consider Before Choosing an Air Quality API

There are a couple of APIs owned by different organizations that provide access to air quality data. To make sure that you get the most out of it, here are four things you should consider before choosing an air quality API:

Quality and accuracy: Choose an API that aggregates data from multiple sources to increase the percentage of accuracy.
Flexible documentation: Choose an API that has extensive documentation on different integration and offers at least email support.
Hyperlocal coverage: Choose an API that provides rich data on your locations of interest.
Versatility: Choose an API that offers data on the major pollutants—particulate matter (PM) 10, PM2.5, Ozone (O3), Sulphur dioxide (SO2), nitrogen dioxide (NO2), carbon monoxide (CO), lead (Pb), ammonia (NH3)) and even more.

Conclusion

Air quality is an important metric that has the ability to improve the well-being of users, especially those with certain health conditions. If you’re building a weather app or any app that depends on weather and atmospheric conditions, consider integrating air quality data too, to promote better user preference and retention.

5 Benefits of Automated UI Testing

Linda Ikechukwu — Tue, 19 Jan 2021 13:26:00 +0000

For engineering teams to ensure that the software they put out is reliable, free of bugs, and meets user/client demands, the software must be tested. These tests may either be in the form of unit tests, integration tests, end-to-end tests, or UI tests. I’ve been learning a lot about UI testing, and that’s what my focus will be on in this article because it deals directly with how users will experience the software.

What is UI Testing?

UI testing is an aspect of software testing that deals with verifying that an application’s user interface works as intended, meets design specifications, and is usable. During UI testing, the app is tested to ensure that:

The user interface is displayed as intended across a range of browsers, devices, and operating systems
Visual elements such as buttons, inputs, menus, etc., are displayed correctly and work as intended, e.g., buttons performing the right action, navigational elements redirecting to the right page, inputs produce or cause an expected action
UI flow and logic proceed as intended. An example of a UI flow is the login process. UI tests will be done to ensure that the login process is seamless and behaves as expected. For example, when the user types in the correct login information, the user should be logged in successfully; else, an error message should be shown

What is Automated UI Testing?

Originally, UI tests were and are still being done manually within some teams. The QA tester or engineer manually uses all features of the app to check for discrepancies.

Automated UI testing is very similar to manual testing. However, there is one key difference. In manual testing, a QA engineer manually clicks through application screens to verify that everything is working as it should. In automated UI testing, you create a script that automatically runs each test case you define with UI testing automation tools.

There is nothing wrong with manual testing; in fact, not everything about UI testing can or should be automated. But in these modern days, where more teams are beginning to adopt agile software development methodology, employing continuous integration and delivery, manual testing is no longer ideal. This is because it is inefficient, time-consuming, and prone to human errors, especially for repetitive tests such as regression tests. Since applications have to be tested alongside every code release to ensure quality and that nothing breaks, UI testing should be automated as much as possible.

As a famous saying goes: “Anything that can be automated should be automated.” As I mentioned, not every UI testing aspect should be automated like visual and usability tests, but UI logic/flow tests like the login example should be. Automated UI testing is also ideal for regression tests, end-to-end tests, screenshot comparison, and testing of stable UI versions. For more guidance on when to automate and what to automate, consider reading up on manual vs. automated testing.

In case you still don’t see the need for automated testing, let me give you some:

Benefits of Automated UI Testing

Save time: Especially for regression tests, running the same UI flow tests manually every time something is changed, or an update is pushed is wasteful. Automating this process ensures that QA testers or engineers are given back time to focus on other unique activities
Accuracy: Humans are prone to errors when performing repetitive tasks. Automating tests reduces the chance of these errors, even allowing for things like pixel-perfect visual testing
Faster feedback time: Automating UI tests gives test teams the ability to execute tests on multiple devices in just hours. This ensures that the tests' feedback gets to developers faster so that they can also make corrections or updates faster and return the code quickly to the testing team. This won’t be possible with manual testing
Increased Coverage: With manual testing, each tester can only test on one platform at a time and carry out only one single test. Automating UI tests increases test coverage by carrying out different tests (e.g., functional tests, performance and stress tests, unit tests e.t.c) simultaneously on real devices and various platforms at a faster rate than manual testing ever could
Faster Bug Discovery: Automating UI tests means that bugs are discovered on time before they become too challenging to resolve. Automated tests are usually built into the continuous integration pipeline and run before, during, and after builds, depending on the configuration

In conclusion, by following an automated testing approach, the team will not only save time and money but also deliver quality products. In summary, users won’t care about how clean your code is; they only care about what they can see and touch.

Automating Dependency Updates for Your GitHub Projects

Linda Ikechukwu — Fri, 04 Dec 2020 22:56:25 +0000

To keep a piece of software or project relevant, it must continuously be improved and maintained. This usually involves fixing bugs, adding feature requests, optimizing for performance, updating dependencies, etc.

Managing and updating dependencies is a critical part of maintaining a project. We tend to overlook this task and rarely attend to it because it is such a time-consuming and repetitive chore. You'll have to create a new branch, update the dependencies, test, and then merge, all the while neglecting the actual work you're supposed to be doing. Failure to update dependencies frequently will leave the project prone to errors and fatal breakages, taking more time to fix.

What if we could delegate this task to someone or something? In this article, I'll show you how to use the WhiteSource Renovate tool to manage dependency updates automatically, so you can focus on doing what you love: writing badass code.

Renovate is a free tool that keeps source code dependencies up-to-date using automated Pull Requests. It scans repositories for dependencies inside package manager files such as package.json (npm/yarn) and submits Pull Requests with updated versions whenever they are found.

But first, let's make sure we understand what dependencies are.

What are software/code dependencies?

Dependencies include any third-party packages or libraries that you add to a project to get some functionality right out of the box. One popular programming advice is: "don't reinvent the wheel." This means that you should reuse existing solutions when they exist instead of building from scratch. For example, if I need to manipulate images in my project, I'll install the Jimp package from npm and use it instead of writing code to do that. Now, Jimp has become a dependency for my project.

Why should you periodically update dependencies?

Just as you'll maintain your project and add a little touch up now and then, dependencies are usually updated by their authors and new versions released. Since your project depends on them, it's wise to update them frequently to ensure you don't miss out on security/bug fixes, performance improvements, and new features/API.

As I previously mentioned, failure to update dependencies on a regular cadence exposes your project to security bugs, incompatibility errors, and possible breakages, which could take hours or even days to fix. The best practice is to update dependencies in smaller version bumps regularly, and Renovate can take care of that for you.

Why WhiteSource Renovate?

You may be wondering: GitHub has something which does the same thing — Dependabot. Why do I need to use a different tool? Well, there are a couple of features that have made me come to prefer Renovate to Dependabot. As at the time of writing this, Renovate:

Supports more package managers than Dependabot
Is open-source, so you can always decide to spin up your instance, unlike Dependabot
Groups monorepo (multiple packages under a single repository/package, e.g. React) updates into a single pull request, unlike Dependabot, which creates individual pull requests for each package, which leads to extra setup and lots of near-identical PRs to review.
Gives you fine-grained control over which type of updates to automerge based on rules set in the config. Dependabot only has the option to either automerge or not.

How to setup Renovate on GitHub with GitHub actions

GitHub Actions is an automation tool that can be used to automate tasks within the software development lifecycle.

In this article, we'll be using it to automatically run tests against pull requests made by Renovate to ensure that dependency updates do not break our application before auto merging.

To set up GitHub actions on your project, create a .github/workflowsdirectory in the root folder.
Inside the workflows folder, create a workflow file named build-and-test.ymlfile and add the following code to it:

name: Build and Test 
  on:  
    pull_request: 
      branches: [master]

  jobs:  
    build_and_test:    
      runs-on: ubuntu-latest 
      steps:      
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v2-beta
        with:
          node-version: '12'     
        - run: npm install      
        - run: npm run build --if-present      
        - run: npm test

In the code above, we first define the name of our workflow. This is optional. Then we specify that whenever a pull request is made to the master, the build_and_test workflow job should run. We also specify that the build_and_test workflow job should be run on an Ubuntu virtual machine and Node v.12.

The build_and_test job will install all project dependencies, build, and run tests to ensure that nothing breaks every time it is run.

P.S: This only runs the test command specified in your npm scripts.

To learn more about the parameters of workflow files, read this.

Next, it's finally time to set up Renovate.

Head over to https://github.com/apps/renovate to install the app. Click on the install button and either install it on all your repositories or only select repositories. For now, you can start with only your designated repository (you can always modify this from the applications tab on the settings page). After that, click the green Install button at the bottom of the page and Renovate will be enabled for the repository and then start the onboarding process.

Once you have successfully installed Renovate in your repository, you'll receive a pull request like this:

Once you're done checking and configuring the PR, merge it to enable the actual Pull Requests to begin. After merging, Renovate will create a renovate.json file in the project root folder. This is where we'll be adding our custom configurations.

Add this:

"packageRules": [
    {
      "updateTypes": [
        "minor",
        "patch"
      ],
      "automerge": true
    }
  ],

Here, we're specifying that all minor and patch dependency updates should be automatically merged.

Remember that we have set up GitHub actions to build the project and run tests on every pull request, so Renovate will only automerge if the workflow is passed successfully.

For major dependency releases, we'd like to manually check and confirm before merging.

And that's it. Congratulations, you've just successfully set up automatic dependency updates for your GitHub project.

Renovate can also be used the same way on BitBucket and Gitlab. Check their docs for info.

If you found this article insightful, you should clap and also check out other insightful articles on my frontend development blog and maybe drop me a line on twitter.

Ciao.

My Dev Story: Learning to Code, Writing more, and Building My Own Blog.

Linda Ikechukwu — Sat, 30 May 2020 16:13:16 +0000

I started learning to code inconsistently in late 2018 and in that time I started writing about things I was learning here on medium. I got a couple of positive responses asking me to write more, but I couldn’t find the time to because I was in my final year in school. It was really hard balancing the stress of trying to finish school, finishing my project, the numerous academic defenses, and finding time to learn to code. I finally gave up and stopped writing.

Fast forward to now, I’ve landed my first job right after leaving school and I finally found the time (all thanks to the pandemic and lockdown) to build my own portfolio and blog site using Gatsby so I can have my own digital space on the internet. [Insert shouting, drum rolls, and some funny dance steps].

To all of you who were supporting me on here, you can go check it out at codewithlinda.com and drop your reviews. I’ll love to hear them.
On codewithlinda.com, I’ll be publishing beginner-friendly articles on frontend/cloud development, dev life, and more bi-monthly. If this sounds like something you are interested in, consider subscribing to my newsletter on the blog.

Let's talk in the replies, what has your coding journey been like? Any highs or lows? any lessons learned?

Why Web Performance Optimization matters and What You can do

Linda Ikechukwu — Fri, 31 Aug 2018 16:09:03 +0000

Web Performance refers to the speed/rate at which web pages are downloaded and displayed in the browser to the user.

Web Performance Optimization on the other hand refers to the process of analyzing web pages performance and identifying ways to improve it.

You may ask, So?? I’m a badass dev. All functionalities needed for the web app has been implemented and are working just fine. What does this have to do with anything?

what does it matter.

Well I have news for you. It does matter.

Why Web Performance Matters

Retaining Users & Promoting User Experience :

Studies have shown that web pages which take > 5 seconds to load are easily abandoned by users , who may or never come back.

Boost Revenue :

If you run an online business, then the main goal is to boost revenue / conversion rates. Well, performance is key. Studies have also shown that if users’ experience a delay > 5 seconds to process orders and add to cart, then they are bound to abandon it.

Promotes SEO :

Google rewards better user experience with higher ranking and demotes poor user experience. This leads to faster pages ranking higher on search results.

What You Can Do

There are quite a number of diverse approaches and steps one can take to optimize web performance . I’ll be looking at the basic ones and must dos.

1. Think First :

For developers, it is a norm to depend on external CSS/JS libraries and frameworks. Before including them into your files, ask yourself if they are really necessary. Most times the functionalities you need from them can be achieved without them. The idea is to reduce the number of http requests the browser has to make to render the page. More http requests(i.e internal and external files to fetch) means more page load time. So requests should only be made when necessary and should be combined where possible. If you must use frameworks endeavor to opt for the minimalist ones.

This rule should also apply to images, in other words keep web content to only what is absolutely necessary.

2. Minify Text Assets(HTML/ CSS/ JS):

Minification is the process of removing all unnecessary characters from codes without changing its functionality. These unnecessary characters usually include white spaces, new lines and comments which are used to add readability to the code but are not required for it to execute.

Minification of all text assets reduces their file sizes, therefore downsizing the quantity of what the browser has to download to render the page. This results in faster response and load time.

There are a lot of tools that can be used for minification for the different text assets such as:

HTML : HTML Minifier

CSS : CSSNano , CSSO

JAVASCRIPT : UglifyJS

To automate the process , a build tool such as Gulp can be used.

running the gulp useref task would minimize html, css and js files and store the minified version in the dist folder

If you’re not familiar with gulp, read up this great article on it.

3. Optimize Images :

Image Optimization involves serving images at the smallest size possible while still maintaining the appropriate quality, size, resolution and format.

In modern web pages, Images make up at least 30% of total web page weight therefore optimizing them can yield huge performance improvements for your site.

There are several tools (free and subscription based) that can be used to optimize images. Some of my favorites are :

The process can also be automated using the gulp-imagemin plugin. Install as a dependency then whip up some code.

Minifying png, jpg, svg and gif files using gulp.

Again if you’re not familiar with gulp, read up this great article on it.

4. HTTP Caching :

Caching in this context refers to the browser storing data (such as images, css, js ), so that future requests for that data can be served directly without having to re-download or fetch from the server. Fewer downloads implies a faster site.

HTTP Caching can be implemented with the Cache-Control header which specifies browser caching policies as well as with other available HTTP Cache Headers.

Several file types can be cached including html , CSS , JavaScript, Fonts , Images and Icons. The code can be put in a .htaccess file or in an Apache httpd.conf file.

For further reading, check out this article on optimizing pages with HTTP caching.

What’s Next?

If you’ve implemented the above tips successfully, then you should treat yourself to a cup of cream latte 😉 . Don’t relax yet, there’s one more thing to be done.

Testing & Analysis:

The next step would be run an audit on your site to get an overview of what works well and what doesn’t and possible paths to improvement.

There are a lot of tools (ranging from online applications, browser extensions to system tools) that can be used to audit a website. Let’s take a look at a few and their capabilities.

Lighthouse: This is a chrome tool can be run either from the Chrome Dev Tools , as a Chrome extension or from the command line.

PageSpeed Insights : This is a google web service that that analyzes the content of a web page and generates suggestions to make your pages load faster. Just type in your web URL into the space provided, click on analyze and it generates a report for your site.

WebPageTest: This is an online tool that runs website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.

SiteSpeed.io : Sitespeed.io is a set of Open Source Tools that tests web sites using real browsers, simulating real users connectivity and collect important user centric metrics like Speed Index and First Visual Render.

One thing to take away is that web performance optimization is an art not a science. There is no one laid out path to implementing it . So go ahead, start optimizing your sites and have fun while you’re at it (if you can 💁.)