DEV Community: Fawaz Haroun

Notes on Web Accessibility

Fawaz Haroun — Mon, 12 Jul 2021 01:06:11 +0000

Web accessibility is following best practices in the building of websites to make it easily navigable for visitors, regardless of their unique conditions. Basically, every person that can visit a website should be able to use your website for its intended purpose. This is easier for some websites, like a blog. It is harder for others, like highly interactive and tooling web apps such as Figma. A visually impaired individual would find it difficult to create wireframes on Figma. However, it is a software developer's job to make sure that these unique conditions do not stop a person from using a website optimally if they do not have to.

There are standards regarding web accessibility. This is contained in the Web Content Accessibility Guidelines (WCAG). The entire idea is a set of universally accepted principles that should be followed while building particular components of the web. By doing this, persons with disabilities become able to more easily access the websites. There are two obvious benefits to this: it is the ethically right thing to do and it gives you a wider audience. There are three levels of accessibility. A, AA, and AAA. The more the number of A's, the more requirements there are, and consequently the more accessible the website. An accessible website should at least comply with the AA guidelines.

Here are a couple of observations I've made. First, navigation without a mouse. Second, live regions. Third, semantic html. These are tiny islands in the ocean that is accessibility. However, they are the areas I've considered most often recently.

Navigation without a mouse seems obvious for accessibility. However, it is just as easy for people without disabilities to forget because they do not have these conditions. A visually impaired individual will struggle more with using a mouse to navigate a webpage. This is why they have the option of navigating with a keyboard instead. A developer's job is to ensure that the experience while doing this is as easy as possible. This includes making certain components tabable and using the enter keypress listener as an alternative for the mouse click listener. The browser already makes some elements tabable, such as buttons and links. However, if the developer creates an element that does something when clicked with a non-tabable element, the developer should make it tabable. Setting the tab index attribute to "0" makes the element tabable. Setting it to "-1" makes it non-tabable. Simply doing this can help visitors navigate the website with the Tab key rather than the mouse.

Second, live regions. Live regions are areas on the webpage where the content actively changes after the website has been loaded. This may be ignored by screen readers. However, it is important for the developer to call the browser's attention to it. By adding an aria-live attribute to the container, the browser takes note of this. Generally, the developer should use aria-live="polite". However, aria-live="assertive" may be used in some cases. The Mozilla Developer Network documentation is clear on the differences and when each one should be used.

Semantic html is important to screen readers. They help the screen readers understand the structure of the webpage. When the screen reader understands it better, it can communicate it more clearly to the user. This means not throwing div and span tags in all parts of the website. Other proper tags, such as the article tag, aside tag, header tag, footer tag, and main tag should be considered.

In all, accessibility is an important part of web development that should be considered by developers. It should be done while developing the webpage rather than after the fact. It is also fairly easy to do once the developer bears it in mind while building the webpage.

Learning to Code with a non-STEM background

Fawaz Haroun — Sun, 07 Mar 2021 08:00:25 +0000

I started learning to code on May 1 2020. I had zero knowledge and seemingly unlimited curiosity. I had probably come across the words "html", "css", and "JavaScript" before then. But it wasn't until that very day that the words registered in my brain. A friend told me she wanted to learn to build websites. And then I thought, why don't I also learn? That thought quickly became "I should definitely learn this". I believed it would only take a few months to become a fullstack developer.

Here I am, over ten months later, convinced I know nothing. Software development really is the Benjamin Button of learning. The more I know, the more I know I do not know. Every time I learn something new, I find a few things I do not know. I then proceed to wonder about all the things I don't know that I don't know. I occasionally have haha moments when I figure something out. Those moments are quickly followed by thoughts of whether I could have done it better. One thing about software development, it could have been done better more than 99% of the time.

Never learning computer science in a formal environment does not help my feelings of inadequacy one bit. I often wonder if it would have been better if I had knowledge of that. Still, I persist. Armed with my curiosity and constant reassurance of myself, I continue to do battle with JavaScript, CSS, and HTML. Here are some of the things I've learnt so far.

Practice

This could be the single most important thing. It is how I get better. It is how I find out about the things I do not know. It is how I know what exactly I know, which goes a long way in reassuring me that I could do better. Simply put, it is the best way for me to learn computer science. Sitting in front of screens, watching tutorial videos and reading web pages can only do so much. They are only helpful to a point. After that, you need to actually test what you've learnt and realize what you know. It's fine if you don't know it all in that moment. It also helps you realize how truly important and helpful google is. So build new webpages, experiment, and solve algorithms. Do anything at all that gets you to write codes.

Meet People

Doing is better when you have people with you. This is at least true for most things. Meeting software developers is one way to feel more comfortable. While software developers with a few years of experience have definitely been helpful for me, junior developers have also been as helpful. Meeting these different people has helped me with my mental map. I don't fully know where the journey ends, but I at least have some milestones in mind. It is also easier to gauge your skill (or lack of it) when you know more people in the field. It has given me an idea of where I want to be and what I want to know.

Professional Experience

No amount of practice will replace professional experience. I've often heard more experienced developers say this. I don't have much software development experience, and this is what the next phase on my journey will concern. Most likely through an internship or a junior role. I know it's true though, because it was true for me with writing. When I wrote as a hobby, there weren't many expectations. I didn't have to worry about how good anything was, I could abandon anything I didn't like. When I started writing professionally, there were suddenly people leaving comments on my works. I had to receive criticism, work with people to get past those criticisms, meet deadlines, work better on a team, among other things. I couldn't just abandon things I started writing and lost interest in. However, all of these things ultimately made me a better writer. It will be the same for web development. Professional experience is necessary to gain the skill to create larger projects and work on much larger codebases. Soft skills can also help make the ignorance easier to bear. You may not know much, but people will look upon you more kindly when you look eager to learn what you do not know. So jump in, as I'm trying to do.

Append and Delete - JavaScript

Fawaz Haroun — Sat, 06 Mar 2021 19:19:18 +0000

I recently realized I haven’t documented much since I started learning to code. I solved an algorithm on HackerRank yesterday and would like to write about that. I solved the algorithm using JavaScript.

The Problem

You have two strings in lowercase English letters. You can perform two types of operations on the first string:

Append a lowercase English letter to the end of the string.
Delete the last character of the string. Performing this operation on an empty string results in an empty string.

Given an integer, k, and two strings, s and t, determine whether or not you can convert s to t by performing exactly k of the above operations on s. If it’s possible, print “Yes”. Otherwise, print “No”.

Link to the problem: https://www.hackerrank.com/challenges/append-and-delete/problem

appendAndDelete( “aba”, “aba”, 7) should return “Yes”.

appendAndDelete( “y”, “yu”, 7) should return “No”.

Heads up, an empty string can be deleted (and will still leave the string empty) and all moves MUST be exhausted. These were the two things I struggled the most with while solving the algorithm.

My Idea

There are a list of things I would need to know to solve the algorithm.

The number of consecutive letters shared by string s and string t. This is to know the number of letters I wouldn’t necessarily have to use moves to remove or add.
The number of unique letters in string s and string t each. This is to know the number of letters I would need to remove and add in string s.
The number of moves left after removing the unnecessary letters from string s and adding the necessary letters. This is to know if string s can be completely erased and replaced with k number of moves. If not, to know if the number of moves left is an even or odd number. The purpose of this is to know whether the moves can be exhausted by deleting an empty string or removing a letter and replacing it over and over again.
Creating a condition to check if the remaining moves cannot be wasted. This checks for two things. One, if the moves are enough to completely erase the string and replace it correctly; in this case, extra moves can be wasted by deleting an empty string. Two, if the moves remaining after removing unnecessary letters is even or odd. Even numbers will allow deleting and replacing letters even when string s is complete, while odd numbers will be exhausted while string s is incomplete if there is an attempt to waste extra moves in the same way.
Creating a condition to return “Yes” if there are enough moves to remove unnecessary letters from string s and add necessary letters to string s. There should be no need to worry about extra moves left because the first condition would have handled it and in cases that reached this condition, “Yes” should be returned.
Creating a condition to return “No” for everything else. The cases here would be cases with too few moves to remove the unnecessary letters from string s and add the necessary letters afterwards.

My Solution

Knowing the number of consecutive letters shared by string s and string t.

The way I thought to begin was to first figure out how many letters were similar. So if s = “hackerrank” and t = “hackerhappy”, I would need to first know how many letters I could leave as they were. That would be six in this case, the six letters in “hacker”. To do this, I created a for loop and split s and t into arrays. I created a variable, count = 0, where count represented how many letters the two strings shared. I let the loop continue to run as long as sArr[i] === tArr[i]. Each time it ran, the count was incremented by 1. I ran into an error in some test cases in which string s and string t had the same values. This was because it created an infinite loop where the condition was never met, as sArr[i] === tArr[i] would always return true where the values are the same. I added another condition to the for loop to solve this, that the loop should also only continue to run as long as i < s.length.

let sArr = s.split("")
    let tArr = t.split("")
    let count = 0
    for (let i = 0; i === count && i < s.length; i++) {
        if (sArr[i] === tArr[i]) {
            count++
        }
    }

Knowing the number of unique letters in s and t each.

Next, after figuring out the number of similar strings I could leave between string s and string t, I needed to figure out the number of strings I needed to alter. I first tried to return “Yes” as long as the numbers left in string s were less than or equal to k / 2. This seemed to make sense. If s = “qwerasdf”, t = “qwerbsdf”, and k = 8, I would need 8 (k) moves. I would need four moves to remove the wrong letters and four moves to add the right letters. However, there were two situations my method did not consider. One, if string s and string t are different lengths. That would mean the number of letters I would need to append to string s wouldn’t be the same as the number of letters I would need to remove. Second, it didn’t consider situations where the moves wouldn’t be exhausted exactly as string s and string t match. Take for example, turning “y” to “yu”. I would need only one move for that, yet my tests would have passed at k = 2. However, after adding “u” to “y”, I would need to use the last move. This meant that the test should have returned “No”.

To solve this, I created variables to hold what was left in length after subtracting “count” from both s.length and t.length.

let tMinusCount = t.length - count
let sMinusCount = s.length - count

Knowing the number of moves left after string s becomes string t.

I used the variable STK to hold this value, where STK = k — (tMinusCount + sMinusCount). I needed to know this value for situations where the k number of moves would not be exhausted exactly as s was converted to t. If s = “y”, t = “yu”, and k = 2, s would be t in a single move by adding “u” to “y”. However, the algorithm required me to exhaust the moves completely. So I needed to know if what was left would be enough to append and delete until the moves were exhausted. In the example above, it would not be because only one move was left. Appending or deleting anything with one move ends it, so it would need to return “No”. This is the case for every odd number. With even numbers, a letter can be removed and added back until the moves are exhausted.

let STK = k - (tMinusCount + sMinusCount)

The first conditional statement.

The first conditional statement checks if the extra moves that may be left after s becomes t can be wasted. The first condition checks if tMinusCount + sMinusCount is less than k. If tMinusCount + sMinusCount === k, then there would be no extra moves and there would be no need to run the code within the condition. If it was greater than k, then there would be no extra moves either. The second condition checked if t.length + s.length > k. If it was less than k, there would be no need for the function to run, as there would be enough moves to delete all of the letters to an empty string, waste whatever moves are necessary, and then add the necessary letters. It would be irrelevant that the number of remaining letters would be an odd or even number. The last condition checked if the remaining moves to be wasted was an odd or even number. If it was an odd number, and the other two conditions were met, the function returned “No”. If not, the function would continue to run.

if (tMinusCount + sMinusCount < k && t.length + s.length > k && STK % 2 !== 0) {
        return "No"
    }

The second conditional statement.

The second conditional statement had a single condition. If tMinusCount + sMinusCount <= k, the function should return “Yes”. If the condition was passed, it would mean that there were enough moves to remove the unnecessary letters from string s and add the necessary letters. sMinusCount is the number of unnecessary letters to be removed (unique to string s and needed to be removed from string s). tMinusCount is the number of necessary letters to be added (unique to string t and needed to be added to string s). Every other case should return “No”. The initial if statement already addresses cases with extra moves. Every other set of values that reach the “else” point would have tMinusCount + sMinusCount > k. That would mean that there wouldn’t be enough moves to remove the unnecessary letters from string t and add the necessary letters. In this case, the function should return “No”.

else if (tMinusCount + sMinusCount <= k) {
        return "Yes"
    }

This is the final result:

function appendAndDelete(s, t, k) {
    let sArr = s.split("")
    let tArr = t.split("")
    let count = 0
    for (let i = 0; i === count && i < s.length; i++) {
        if (sArr[i] === tArr[i]) {
            count++
        }
    }

    let tMinusCount = t.length - count
    let sMinusCount = s.length - count

    let STK = k - (tMinusCount + sMinusCount)

    if (tMinusCount + sMinusCount < k && t.length + s.length > k && STK % 2 !== 0) {
        return "No"
    } else if (tMinusCount + sMinusCount <= k) {
        return "Yes"
    } else {
        return "No"
    }
}

If you have a more readable or faster solution, or any different solution at all, please share.