DEV Community: Kaushik Awala

2. Understanding WCAG Guidelines for Web Accessibility

Kaushik Awala — Fri, 24 Mar 2023 14:07:34 +0000

In our previous blog post, “Making Your Website Accessible to All: An Introduction to Web Accessibility,” we discussed the importance of web accessibility and the basic principles to follow. This post will delve deeper into the topic and discuss the WCAG guidelines for web accessibility.

WCAG Guidelines

The World Wide Web Consortium (W3C) created Web Content Accessibility Guidelines (WCAG) to provide a framework for making web content accessible to people with disabilities. WCAG has three levels of conformance: A, AA, and AAA, and each level builds upon the previous one and includes more stringent requirements. Four principles form the basis of the WCAG guidelines: perceivable, operable, understandable, and robust. We must present content so all users, including those with disabilities, can perceive it (Perceivable). Users must be able to navigate and interact with the content (Operable). Content must be explicit and easy to understand (Understandable). Finally, content must be compatible with different assistive technologies (Robust).

Commonly Ignored Practices in Web Accessibility

Despite the importance of web accessibility, there are still practices that many commonly ignore. Some of these practices include:

Providing alternative text for images
Using proper heading structure
Ensuring that forms are accessible
Providing keyboard navigation
Ensuring that videos have captions and audio descriptions

Ignoring these practices can make it difficult or impossible for people with disabilities to access and interact with web content. It’s essential to prioritize these practices in web development to ensure that websites are accessible to everyone.

Importance of Accessibility Testing

Accessibility testing evaluates a website or application to ensure it meets the WCAG guidelines. It’s essential to test for accessibility because it’s the only way to know if your website is genuinely accessible to all users, including those with disabilities. There are several types of accessibility testing, such as automated and manual testing. Many tools and resources are available such as WAVE, Axe, Tenon, Accessibility Insights, and so on, to help with testing.

Conclusion

In conclusion, understanding the WCAG guidelines is crucial for creating accessible websites and digital content. By following these guidelines and prioritizing commonly ignored practices, we can ensure everyone, including people with disabilities, can access and interact with web content. It’s important to remember that accessibility is not a one-time effort but an ongoing process that requires regular testing and updates. Let’s work together to make the web a more inclusive and accessible place for all.

Thanks for reading! I hope you found this post helpful in understanding the WCAG guidelines for web accessibility. Stay tuned for next week’s post, where I’ll discuss “How to Implement Keyboard Navigation in a Web Application.” Implementing keyboard navigation can make our website more accessible and user-friendly.

1. Making Your Website Accessible to All: An Introduction to Web Accessibility

Kaushik Awala — Fri, 24 Mar 2023 13:33:11 +0000

As the internet becomes more pervasive in our daily lives, it's essential to ensure that everyone can access the same information and services online, regardless of any disabilities or impairments they may have. This is where web accessibility comes in - the practice of designing and developing websites and digital content that people of all abilities can use.
In this first post on web development accessibility, we'll explore the basics of web accessibility, why it's essential, and how we can ensure our website is accessible to everyone.

What is Web Accessibility?

Web accessibility is the practice of designing and developing websites, tools, and technologies that are accessible to people with disabilities. Disabilities can include visual, auditory, physical, and cognitive impairments.

Why is Web Accessibility Important?

Web accessibility is crucial for several reasons. Firstly, it ensures everyone can access the same information and services online, regardless of their abilities. It also promotes inclusivity and diversity, helping to create a more equitable and fair society.
In addition, web accessibility is essential for businesses and organizations that want to reach the broadest possible audience. By making a website accessible, one can tap into the estimated 1 billion people worldwide who have disabilities, many of whom are potential customers or clients.

How to Make A Website Accessible?

There are several best practices and guidelines to make a website accessible to everyone. Some of these include:

Providing text alternatives for non-text content, such as images and videos
Ensuring that a website is keyboard accessible
Using clear and simple language for content
Making sure that your website is compatible with assistive technologies, such as screen readers and braille displays
Providing captions and transcripts for audio and video content

Conclusion

Web accessibility is a crucial aspect of web development that ensures everyone can access the same information and services online, regardless of their abilities. By following best practices and guidelines for web accessibility, you can create a website that is inclusive and accessible to everyone. In our upcoming posts, we'll delve deeper into these best practices and explore more ways to make your website accessible to all.

Thank you for reading! Stay tuned for next week's post on "Understanding WCAG Guidelines for Web Accessibility."

4. Automating your project's deployment procedure

Kaushik Awala — Tue, 24 May 2022 04:16:33 +0000

If you're reading this, you've probably been following this series and are at the end or looking for steps to deploy your app/project to your custom domain. In either case, you've come to the right place. Continue reading this article to complete your deployment setup or begin by reading the series here.

First and foremost, I'd like to thank everyone for reading this article and following the series. I also admire your perseverance in reaching this point. I hope my series and articles have aided you in some way.

So, let us get started with the next steps to finish your final deployment configuration so that any changes you make to your app/project are automatically published to your custom domain.

In the DevOps context, you may have heard of the CI/CD (Continuous Integration/Continuous Delivery) process. While this article does not delve deeply into the concepts, here is a link to learn more about them and why automating deployments is important.

There are three steps in order to set up the deployment process for your project.

Designing a GitHub actions workflow to initiate deployment
Write a deployment script that will be used by GitHub actions to perform deployment.
In the package.json file, include a deploy npm script.

1. Designing a GitHub actions workflow to initiate deployment

Create a hidden directory .github in the root directory and then create another directory workflows inside it. Inside the workflows directory, create a file deployment.yaml.
Inside this deployment.yaml file, paste the following content. Please format the document to fix any indentation issues after pasting the below content.

name: Deployment using GitHub Pages
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  deployment:
    name: Deploying to <your-website-name>

    runs-on: ubuntu-latest

    strategy:
      fail-fast: true
      matrix:
        node-version: [16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - name: Checkout branch
        uses: actions/checkout@v3

      - name: Use Node.js ${{matrix.node-version}}
        uses: actions/setup-node@v3
        with:
          node-version: ${{matrix.node-version}}
          cache: "npm"

      - name: Clean install dependencies
        run: npm ci

      - name: Deploy <your-website-name>
        run: |
          git config user.name "<your-name>" && git config user.email "<your-email>"
          npm run deploy

When any commits are pushed to the main branch or a pull request is merged into the main branch, the above script basically starts the deployment process.

The deployment script also includes the tasks that must be completed when this process is triggered.

Each job has a name, the underlying OS platform it runs on, a strategy it must use, and the steps it must take to complete the job.

Thus, when the deployment workflow/pipeline is triggered, you see the logs as follows:

2. Write a deployment script that will be used by GitHub actions to perform deployment.

To successfully complete the above workflow, you must gather all of the resources required to publish the website to your custom domain.

This entails creating the project and publishing it to your own domain. Manually performing all of the steps involved in this is a time-consuming process. As a result, we create a deployment script and have our workflow defined in Step 1 run it so that the deployment is done for us automatically.

In the project's root directory, create a shell script called deploy.sh and add the following contents to it.

#!/usr/bin/env sh

# abort on errors
set -e

# Checkout an orphan branch
# Docs: https://git-scm.com/docs/git-checkout/1.7.3.1#git-checkout---orphan
git checkout --orphan deployment

# build
npm run build

# add cname record in dist folder
cd dist
echo "www.<your-domain-name>.com" > CNAME

# exit dist
cd -

# set worktree path to dist and stage all changes
# Docs: https://git-scm.com/docs/git#Documentation/git.txt---work-treeltpathgt
git --work-tree dist add --all

# set worktree path to dist and commit staged changes with a message
git --work-tree dist commit -m "Deploy"

# push committed changes to deployment origin branch
# make sure to change your branch here if your source branch is 
# different in your GitHub pages configuration settings
git push origin HEAD:deployment --force

# remove the dist folder
rm -rf dist

# checkout main
git checkout -f main

# delete deployment
git branch -D deployment

3. In the package.json file, include an npm script deploy.

Finally, a script must be included in the package.json file. When our GitHub process defined in Step 1 starts, we'll use the package.json file to run the script. Add the script as shown in the screenshot below.

That's it! You're finished. After you've done the modifications listed above, commit and push your changes to your main branch.

This should activate the previously configured GitHub workflow and publish the changes to your custom domain.

If you followed the steps carefully, you should be able to use the GitHub Pages workflow to automatically publish your website to your custom domain.

Congratulations! Please use the comments area to share your unique experience with this series, as well as any thoughts or recommendations.

Thank you all for your support, and stay tuned for future stuff!
😀

3. Configuring GitHub pages to deploy your website

Kaushik Awala — Tue, 24 May 2022 03:54:18 +0000

It's been a lengthy process since you took the initial step in this series by obtaining a custom domain. You may read the article here, if you missed it.

In this article, you'll look at how to configure your GitHub repository to host your project on your custom domain using GitHub Pages.

To configure GitHub pages, follow the instructions below. More on GitHub Pages can be found here. You may learn how to set up a custom domain here.

Configuration Steps

Go to your repository settings page and click Pages under Code and automation.
To begin building your website with GitHub Pages, choose your source branch. I'm using a new branch called deployment for this. Many tutorials you'll find on the internet use the branch name gh-pages.
You can enter the subdomain www.<your-domain-name>.<domain-name-ending> in the custom domain area. www.testsite.net, for example.
Make sure HTTPS is enabled on your domain to offer a layer of encryption that prevents tampering with traffic to your site. Your website will only be served via HTTPS if this is enforced. More details can be found here.

Okay, we're finished with the GitHub configuration. Then, follow the steps below to configure your DNS settings in Google Domains.

Note: If you used a different domain provider, make sure to configure your DNS records for your website according to the instructions provided by your DNS provider.

Configuring DNS records on Google Domains

To manage your custom domain, log in to your Google Domains account.
Select DNS from the left menu to access the DNS settings page, where you can configure custom records for GitHub pages.
Create a CNAME record for your subdomain that points to your GitHub pages. For example,

Host name: www.testsite.com
Type: CNAME
Data: <your-username>.github.io.

Create an A Name record for your apex-domain that points to your github pages. For example,

Host name: testsite.com
Type: A
Data: 185.199.111.153

Return to GitHub to validate your custom domain. If everything goes well, you should see the following.

Alright then, let us move on to the final step to automate your deployment, here.

2. Setting up your git repository

Kaushik Awala — Tue, 24 May 2022 03:20:25 +0000

If you haven't already, you can read the article on how to buy a custom domain here.

For those who have completed the previous step of purchasing your custom domain, let us see how to set up our git repository before moving on to the next step of configuring the GitHub pages to use our custom domain for hosting.

For starters

As Wikipedia says,

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management (SCM) functionality of Git, plus its own features.

whereas,

Git is a software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

Because this series is about hosting the website on your custom domain using GitHub pages, this article only refers to GitHub repositories.

Adding code to an empty GitHub repository and pushing it there

To host your website code on GitHub, follow the steps below.

Create an empty git repository on GitHub
After creating the empty repository, you should see the following instructions.
Then, using the instructions provided above, develop an app of your choice and push the code to the empty GitHub repository. I'm building my website with Vue JS. Vue JS will thus be used in the examples. The difference is simply in the deployment process, and you can use any framework/library to construct your website, such as Angular, React, Svelte, etc. Follow the steps here to get a project started with Vue JS.
Make sure the project name matches the repository name you created in Step 2.
Change to the newly established Vue project directory. You can now execute the git commands as directed in Step 2.

**Note: If a local git repo is not initialized as part of the project's initialization, use the following command to do so.

$ git init

Set git config with the following commands to commit and push your changes.

$ git config --global user.name "username"
$ git config --global user.email "user@email.com"

After that, run the commands below to push your project code to the empty repository you created in Step 2.

$ git add .
$ git commit -m "<your-commit-message>"
$ git branch -M main
$ git remote add origin https://github.com/<github-username>/<repository-name>.git
$ git push -u origin main

You should be able to see your website project code in your GitHub repository after completing the steps above.

Okay, that was a lot of information! This article has finally come to an end. Please read the next part of this series here.

Deploy your website using GitHub pages and Google domains

Kaushik Awala — Tue, 24 May 2022 03:05:01 +0000

Most challenges in a developer's life become easier with repetition because automation is available to assist.

Many, if not all, of you may have considered creating and publishing your portfolio but did not proceed due to the numerous challenges involved in successfully deploying your website.

You've come to the right place if you want to introduce yourself to the world through your portfolio.

In this series, we will look at the following topics in detail:

1. Purchasing a custom domain from a provider (Google Domains, GoDaddy, etc.)

Kaushik Awala — Tue, 24 May 2022 02:57:31 +0000

Domain names serve as aliases for IP addresses, making it easier to remember the website name rather than the string of digits in an IP address.

Today, we'll look at how to purchase a custom domain. Despite the fact that there are numerous providers on the market, today we will look at how to buy a custom domain on Google Domains.

You can select from over 300 domain endings and benefit from a real-person 24/7 support team. It's great to have Google's power behind your domain! Isn't that interesting? Let's get started.

You can find out more about Google Domains here.

When you arrive at the website, you can sign in with your credentials by clicking the "Sign In" button or go straight to the domain search, as shown below.

In either case, you must sign in to be able to associate and manage the purchased domain.

Searching for your domain

Viewing and sorting your search results

Following your domain search, you will be presented with a list of options to choose from; refine your search list using the provided filters. When you've found the perfect domain, add it to your cart and proceed to the checkout process.

By clicking on the domain row, you can also view more information about the domain.

Checkout to purchase your desired domain

The next step is to add one or more domains to your cart and complete the checkout process. Use the add to cart button to add your preferred domains to your cart.

Following the addition of your custom domain to your cart, you will be given further options to configure or add to your domain, such as Google Workspace, as shown below.

Once you've opted to buy your domain, you'll be directed to the payment stage to complete your purchase, or you'll be requested to sign in first before being moved to the payment stage to complete your purchase.

Viewing your purchased domain(s) associated with your google account

After you've finished purchasing your custom domain, go to "My domains" to see it.

You have now completed the process of purchasing a custom domain name.

Let us move to the Step 2 where we will see how to setup your GitHub repository.

Execute a function with arguments using chrome extension scripting API

Kaushik Awala — Thu, 12 May 2022 21:56:28 +0000

Chrome introduced the new Manifest V3 towards a step in the direction of security, privacy, and performance as mentioned in the documentation here.

With this introduction of Manifest V3, there have been challenges in migrating from Manifest V2 to Manifest V3 which is beyond the scope of discussion in this article.

Along with number of features, the extensions using Manifest V3 also have functional changes introduced. Among many such changes, executeScript() is one. It has been moved from the Tabs API to the Scripting API. With the new Scripting API, extensions can register and unregister content scripts dynamically (at runtime, one can register and unregister content scripts as needed). Also, the extensions can now only execute script files and functions.

Here is how one can execute a function using the chrome extension's scripting API.

function greet(greeting) {
    console.log(`${greeting}, World!`);
 }

 chrome.scripting.executeScript({
      target: {tabId: tab.id},
      function: greet,
      args: ['Hello']
 });

 // Output: Hello, World!

In the above code, we can notice that the property being used to pass the arguments to the function is args in Manifest V3.