DEV Community: David Adeaga

Leveraging CI/CD for Streamlined Software Development and Deployment

David Adeaga — Sun, 21 Jan 2024 23:43:24 +0000

Introduction

As a developer, whether you're just starting out or a seasoned pro, you'll reach a point where you want your project accessible to the world. To achieve this, you have two choices: manual deployment or automating the deployment process. Both methods get your project online, but they come with different speeds and challenges. Manual deployment tends to be slower, potentially causing delays and issues like scalability problems, rollback difficulties, and limited testing. This is where Continuous Integration/Continuous Deployment (CI/CD) steps in to save the day.

In this article, you will learn "why, how, and what" to understand when CI/CD implementation is needed for your next project, providing you with all the information needed to get started with building CI/CD pipelines.

Why CI/CD?

CI/CD have emerged as critical practices in the ever-changing landscape of software development. It represents a transformative approach, streamlining the way software is built, tested, and deployed. By automating these critical steps, CI/CD significantly reduces development cycle times, allowing developers to deliver high-quality software to users more quickly.

One of the main selling points of CI/CD is automated testing. As a developer, when you push your code to platforms like Github, testing could be overlooked. This is where CI/CD pipelines step in by including automated testing stages configured by the developer. These tests help catch bugs and issues early in the development process. This ensures that code changes maintain or improve overall software quality.

Furthermore, CI/CD improves collaboration within development teams and allows for quick adaptation to changing requirements. Because of its ability to empower developers and improve software delivery, CI/CD has become an essential component of modern development pipelines, ensuring that software remains agile, robust, and efficient.

How To Get Started

To get started with CI/CD, you'll need to learn about CI/CD platforms and YAML configuration files, which define your pipeline. Pipelines, as they are commonly referred to, are series of steps that outline the process leading up to the release of a software feature

Choosing the right CI/CD platform and mastering YAML configuration are critical steps in optimizing your software development process. First, choose a CI/CD platform from popular options such as Jenkins, Travis CI, CircleCI, GitLab CI/CD, or GitHub Actions that meets the needs of your project and integrates seamlessly with your development stack.

After you've decided, go over the YAML configuration, which serves as the blueprint for your CI/CD pipeline. YAML provides a clear structure for defining the steps your pipeline should take, thanks to indentation and key-value pairs. To ensure that YAML parses correctly, pay close attention to indentation.

Next, begin your CI/CD journey by writing a simple YAML file that handles basic tasks such as code compilation and unit testing. To get started, most CI/CD platforms provide extensive documentation and examples. As you gain confidence, gradually increase the level of complexity by adding stages such as integration tests, code quality checks, and automated deployments to different environments.

Remember to keep your YAML files in your project's version control system, such as Git, to maintain version history and effectively collaborate with your team. Before deploying your pipeline, thoroughly review and test it for errors, taking advantage of CI/CD platforms' "dry run" mode for safe testing. Finally, to ensure your development, keep up with the ever-changing CI/CD landscape through continuous learning, community support, and platform documentation.

A basic process diagram for implementing a CI/CD:

What To Expect

By embracing CI/CD, you can expect to have an organised workflow, deliver high-quality software more faster, and respond quickly to new requirements and user needs, ultimately driving efficiency and excellence in your development endeavors. Issues revolving around security will become a thing of the past and also have a better developer expirience overall.

Who Should Embrace CI/CD

If you're a software developer, no matter your specialization (front-end, back-end, DevOps, or platform engineering), CI/CD is your ally. It streamlines your work, accelerates your projects, and makes your life easier. Whether you're launching your first website or managing a complex system, CI/CD is a game-changer.

Conclusion

As the saying goes, "The only way to do great work is to love what you do," and CI/CD loves to make great work possible. CI/CD is essential in software development and should be practiced by all.

Web Accessibility: A Web for Everyone by Empowering Inclusion and Equal Access for All

David Adeaga — Sun, 21 Jan 2024 23:36:02 +0000

Table of content:

Introduction
History of netizens and the web
Measuring color contrast for visually impaired users
Understanding the power of alternative text
A practical example of using WAI ARIA label for custom component development
Understanding WCAG (Web Content Accessibility Guidelines) and its compliance requirements

Introduction

In today's connected world, the internet has shaped how we learn, work, communicate, and access information, becoming a crucial part of our daily lives. The internet presents a lot of opportunities for empowerment, knowledge sharing, and economic development with its vast selection of websites, applications, and digital services. However, while the internet has unlocked a world of opportunities, it has also unintentionally put obstacles in the way of some people, excluding them from its abundant resources.

The concept of "Web for Everyone" prioritized inclusion, accessibility, and equal access for all users, regardless of their skills, backgrounds, or technological resources. It highlights the significance of creating web experiences that cater to the diverse needs of people with disabilities, the elderly, those living in areas with low bandwidth, and users dealing with a range of socioeconomic challenges.

In this article, We delve into the significance of empowering inclusion in web development and how it can contribute to an online environment that is more equitable. We look at the fundamentals of accessibility as well as the tools and methods that web designers can use to create truly inclusive web experiences that make sure no one is left out of the digital revolution.

History of netizens and the web

The World Wide Web was created in the early 1990s, and the idea of netizens, or citizens of the internet, started to take shape. Initially, the web primarily catered to a niche group of tech enthusiasts, academics, and researchers. Accessibility wasn't a major issue during this time because most people used desktop computers with straightforward text-based user interfaces to access the internet.

Graphical user interfaces spread as the web gained popularity. Users with disabilities, however, faced difficulties as a result of this transition. For example, image-based content that lacked alternative text descriptions created barriers for the visually impaired and made it challenging for screen readers to effectively communicate information.

Organizations and standards bodies started pushing for a more inclusive web in response to growing accessibility concerns. The World Wide Web Consortium (W3C) launched the Web Accessibility Initiative (WAI) in 1999. WAI concentrated on developing policies and procedures to improve the accessibility of the web for those with disabilities. The Web Content Accessibility Guidelines (WCAG) framework has become a vital tool for developers to use when creating accessible websites.

While significant progress has been made, web accessibility remains an ongoing challenge. The rapid evolution of technology, including the Internet of Things (IoT), artificial intelligence (AI), and virtual reality (VR), brings new accessibility considerations to the forefront. Ensuring equal access for all netizens will continue to be a vital aspect of the web's future.

Measuring color contrast for visually impaired users

To ensure that digital content is readable and usable by all users, including those with visual impairments, color's role in accessibility, particularly regarding contrast, is essential. The difference in luminance (brightness) between two colors—typically the color of the background and the foreground text—is referred to as contrast. Regardless of a user's visual abilities, a sufficient contrast ratio is necessary to make content readable and distinguishable.

Here is an example of how to text for contrast while building an application using Chrome DevTool.

Open the web page you want to analyze in Google Chrome.
Open Chrome DevTools by right-clicking on the page and
selecting "Inspect" or pressing the F12 key on Windows/Linux or Cmd + Option + I on macOS.
In DevTools, click on the "Elements" tab to inspect the HTML structure of the page.
Locate the element that contains the text whose color contrast you want to measure. You can do this by hovering over the elements in the "Elements" panel to highlight them on the page.
Once you've identified the element, click on it in the "Elements" panel. This will bring up the "Styles" section on the right-hand side of DevTools, showing the CSS styles applied to the element.

An example of a good color contrast.

Understanding the power of alternative text

Alternative text, also known as "alt text," is a vital component of web accessibility that improves the usability of websites for people with visual impairments. Screen readers can now convey information to users who are unable to directly perceive these visual elements by using alt text, which offers a text-based alternative to non-text content like images, graphics, and multimedia elements. It guarantees that everyone can understand and interact with the content on a website, regardless of their knowledge or skills.

There are numerous benefits to using a proper, concise, and yet descriptive alt text for images, ranging from better SEO (Search Engine Optimization), great accessibility, Compliance with WCAG (Web Content Accessibility Guidelines), and an awesome user experience. These benefits are the benchmark for a well-performing product that prioritizes inclusion. However, alt text can be excluded for certain images that are not important for SEO, such as a landing page image. This can be achieved by giving the image an empty alt value, which will force a screen reader to omit this image.

A simple code example of an alternative text

<!DOCTYPE html>
<html>
<head>
    <title>Alt Text Example</title>
</head>
<body>
    <h1>Mountain Landscape</h1>
    <img src="mountain.jpg" alt="Scenic view of a majestic mountain landscape with snow-capped peaks and a serene lake in the foreground.">
</body>
</html>

A practical example of using WAI ARIA label for custom component development

Let's look at a real-world example of how to improve the accessibility of a custom tabbed component using WAI-ARIA (Web Accessibility Initiative: Accessible Rich Internet Applications) attributes. A common user interface element used to structure and organize content presentation is a tabbed component.

In this example, we will be creating an accessible tab component using HTML, CSS, and WAI-ARIA attributes to improve accessibility for screen reader users.

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Accessible Tabbed Component</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="tabbed-container">
        <button class="tab" role="tab" aria-selected="true" aria-controls="tab-content-1">Tab 1</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-content-2">Tab 2</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-content-3">Tab 3</button>
    </div>
    <div id="tab-content-1" class="tab-content">Content for Tab 1</div>
    <div id="tab-content-2" class="tab-content">Content for Tab 2</div>
    <div id="tab-content-3" class="tab-content">Content for Tab 3</div>
</body>
</html>

CSS (Styles)

.tabbed-container {
    display: flex;
    justify-content: space-between;
}

.tab {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

.tab-content {
    display: none;
    margin-top: 10px;
}

.tab-content[aria-hidden="false"] {
    display: block;
}

In this example, we've created a basic tabbed component with three tabs and corresponding content panels. To enhance accessibility, we've used WAI-ARIA attributes:

role="tab" : Indicates that the button element serves as a tab.
aria-selected : Indicates whether a tab is currently selected (true) or not (false).
aria-controls : Associates each tab with the corresponding content panel.

We've also used aria-hidden in the CSS to control the visibility of the tab content based on its selected state.

Understanding WCAG (Web Content Accessibility Guidelines) and its compliance requirements

The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) created a set of guidelines known as the Web Content Accessibility Guidelines (WCAG). These recommendations are made to guarantee that digital content, such as websites and web applications, is accessible to those who have disabilities. No matter a user's abilities, WCAG offers a framework for producing content that is perceivable, operable, understandable, and robust.

WCAG is organized into four main principles, each of which is supported by specific guidelines and success criteri. The

A comprehensive guide to pinia

David Adeaga — Sun, 21 Jan 2024 23:25:50 +0000

Pinia is a new state management tool for vue js. It has been widely accepted within the vue js community due to its simplicity, efficiency, scalability, and flexibility. However, a lot of Vue developers still find themselves using Vuex due to limited information and a better understanding of the advantages of using pinia.

In this article, I will be explaining how a vue.js developer can quickly get the best out of Pinia by implementing an example app that features some of the use cases needed while working with Pinia. Readers interested in Vue JS will find this article very helpful, and an experienced Vue developer with knowledge of pinia will also build on their prior knowledge using this technology.

What is Pinia

Pinia is a state management solution that is based on the Vue JS concept of reactivity. In Vue JS, reactivity is a core feature that allows Vue JS to set up a remote tracking system for data that is reactive and automatically update the user interface when there is a change in these data properties.
Pinia builds on this core reactivity system by providing a way to manage the state of a Vue.js application in a reactive and efficient way. With Pinia, you can define a centralized store that holds all the state for your application and then use that store to manage your data and update the user interface as needed.
It offers a more effective, adaptable, and scalable approach to managing the state of your Vue.js applications in order to ease the process of maintaining application state. Pinia, which is based on the Composition API, has a number of advantages over more established state management programs like Vuex.
Pinia is compatible with both Vue 2 and Vue 3, so you don't have to trouble yourself with issues regarding versioning.

Let's get started with setting up Pinia Store in a fresh Vue.js application.

vue create pinia_tutorial

Click enter to continue, and please follow the on-screen guide to complete the setup. Once completed, you will be prompted with these messages.

🎉  Successfully created project pinia_tutorial.
👉  Get started with the following commands:
 cd pinia_tutorial

CD to move into this new scalfold pinia_tutorial and run the next command to add pinia to the codebase.

vue add pinia

Doing it this way will ensure that all the configurations needed for the store to function well will automatically be done for you, however, if you use yarn or npm to install it. You will have to manually do those configurations yourself.
There might be a file path error after the installation. Don't panic; just shut down the serve and rerun your npm run serve or yarn serve, depending on what you are using, and you should have a bug-free app.

Now, Let's do some real quick practical examples on creating and using the store.

store/index.js

import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  getters: {
    double: (state) => state.count,
  },
  actions: {
    increment() {
      //In vuex you will have to create a mutaion to do this directly
      //but, it's allowed here because pinia preaches flexibility
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

From the usage of vuex, there should be states, mutations, getters, and actions, and you are not allowed to make changes to state data from within an action. To do that, you will have to create a mutation to update the data. Now the big deal is that pinia allows you to make changes to state data from within an action. Now the code above is a counter store that is defined to increment or decrease the count value;

Let's create a button in HelloWorld.vue so we can have a visual representation of what we are trying to achieve.

HelloWorld.vue


<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <button @click="incrementHandler" class="btn base-primary">
      Increment
    </button>
    <button @click="decrementHandler" class="btn base-primary">
      Decrement
    </button>
  </div>
</template>

From the code snippet above, there are two buttons with a click event on each. Our aim is to create a click action that will eventually dispatch the actions in the Pinia store.

HelloWorld.vue


<script setup>
import { useCounterStore } from "../store";
import { computed } from "vue";

const store = useCounterStore();
const getCounter = computed(() => {
  return store.count;
});

const incrementHandler = () => {
  return store.increment();
};

const decrementHandler = () => {
  return store.decrement();
};
</script>

In Pinia, stores are modules, so we have to import them before using them. reason why useCounterStore was imported and assigned to a new variable was ease of use. Instead of dispatching actions the vuex way, for example, $store.dispatch('action_name'). Pinia allows us to trigger the action directly with "store.increment," which is cleaner and better.

In conclusion, Pinia offers a robust and adaptable state management solution for Vue.js applications overall. It's a fantastic option for a variety of applications thanks to its straightforward API, flexible architecture, support for plugins, and support for custom stores. Pinia is unquestionably something to take into consideration if you're searching for a small and simple-to-use state management library for your Vue.js application.

Web Accessibility: A Web for Everyone by Empowering Inclusion and Equal Access for All

David Adeaga — Sun, 21 Jan 2024 19:01:33 +0000

Table of content:

Introduction
History of netizens and the web
Measuring color contrast for visually impaired users
Understanding the power of alternative text
A practical example of using WAI ARIA label for custom component development
Understanding WCAG (Web Content Accessibility Guidelines) and its compliance requirements

Introduction

History of netizens and the web

Measuring color contrast for visually impaired users

Here is an example of how to text for contrast while building an application using Chrome DevTool.

Open the web page you want to analyze in Google Chrome.
Open Chrome DevTools by right-clicking on the page and
selecting "Inspect" or pressing the F12 key on Windows/Linux or Cmd + Option + I on macOS.
In DevTools, click on the "Elements" tab to inspect the HTML structure of the page.
Locate the element that contains the text whose color contrast you want to measure. You can do this by hovering over the elements in the "Elements" panel to highlight them on the page.
Once you've identified the element, click on it in the "Elements" panel. This will bring up the "Styles" section on the right-hand side of DevTools, showing the CSS styles applied to the element.

An example of a good color contrast.

Understanding the power of alternative text

A simple code example of an alternative text

<!DOCTYPE html>
<html>
<head>
    <title>Alt Text Example</title>
</head>
<body>
    <h1>Mountain Landscape</h1>
    <img src="mountain.jpg" alt="Scenic view of a majestic mountain landscape with snow-capped peaks and a serene lake in the foreground.">
</body>
</html>

A practical example of using WAI ARIA label for custom component development

In this example, we will be creating an accessible tab component using HTML, CSS, and WAI-ARIA attributes to improve accessibility for screen reader users.

HTML Structure

<!DOCTYPE html>
<html>
<head>
    <title>Accessible Tabbed Component</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="tabbed-container">
        <button class="tab" role="tab" aria-selected="true" aria-controls="tab-content-1">Tab 1</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-content-2">Tab 2</button>
        <button class="tab" role="tab" aria-selected="false" aria-controls="tab-content-3">Tab 3</button>
    </div>
    <div id="tab-content-1" class="tab-content">Content for Tab 1</div>
    <div id="tab-content-2" class="tab-content">Content for Tab 2</div>
    <div id="tab-content-3" class="tab-content">Content for Tab 3</div>
</body>
</html>

CSS (Styles)

.tabbed-container {
    display: flex;
    justify-content: space-between;
}

.tab {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

.tab-content {
    display: none;
    margin-top: 10px;
}

.tab-content[aria-hidden="false"] {
    display: block;
}

In this example, we've created a basic tabbed component with three tabs and corresponding content panels. To enhance accessibility, we've used WAI-ARIA attributes:

role="tab" : Indicates that the button element serves as a tab.
aria-selected : Indicates whether a tab is currently selected (true) or not (false).
aria-controls : Associates each tab with the corresponding content panel.

We've also used aria-hidden in the CSS to control the visibility of the tab content based on its selected state.

Understanding WCAG (Web Content Accessibility Guidelines) and its compliance requirements

WCAG is organized into four main principles, each of which is supported by specific guidelines and success criteri. The principles or benchmark for a website is for them to be perceivable, operable, understandable and robust. It also has three level of comformancy.

A, AA, and AAA are the three levels of WCAG conformance. With Level A being the most fundamental and AAA being the highest level of accessibility, each level builds on the prerequisites of the one before it. Since it strikes a good balance between accessibility enhancements and implementation effort, the AA level is frequently regarded as the ideal for the majority of websites and applications.

Here is a link to learn more about this guidelines from the WCAG website.

In conclusion, web accessibility is not merely an optional feature but a fundamental necessity for creating an inclusive and equitable digital space for all. As the internet becomes an increasingly integral part of our daily lives, it is crucial to ensure that individuals with disabilities can participate fully and benefit from its vast resources.