DEV Community: Steve Cruz

TIL: Destructuring from Object | Undefined

Steve Cruz — Tue, 05 Jan 2021 11:45:08 +0000

Destructure from a value that can be undefined

Problem

The updateUserProfile function allows me to retrieve the user by making a query to the database with the provided user_id, then use another database query to guarantee that the provided email does not belong to another user and finally update the user in the database sending a query with the provided name and email.

The problem was that when checking if we already had a user with the provided email in the database the result could be a User object or undefined, depending on if we found the user or not.

The User object contains many properties (id, name, email, avatar, password, created_at, updated_at), but I only needed the id property to compare with the provided user_id to guarantee that the email did not belong to any user.

I was not able to use destructuring to unpack only the id from the result nor rename it to findEmailOwner because the result could be a User object or undefined, so I got the following TypeScript error message: "Property 'id' does not exist on type 'User | undefined'.

TLDR: I need to obtain id by destructuring a value that can be an object or undefined.

function updateUserProfile ({ user_id, name, email }) {
  const user = await usersRepository.findById(user_id);

  if (!user) {
    throw new AppError(`The user was not found.`, 401);
  }

  const { id: findEmailOwner } = await usersRepository.findByEmail(email); // error message: "Property 'id' does not exist on type 'User | undefined'.

  if (typeof findEmailOwner !== 'undefined' && findEmailOwner !== user_id) {
    throw new AppError(`This email cannot be used.`, 401);
  }

  user.name = name;  
  user.email = email;

  return usersRepository.save(user);
}

Answer

We can use short circuit evaluation to supply a default if user is a falsy value (undefined, null, 0, -0, 0n, "" or NaN).

NOTE 1: I can use this approach in my application because the id property that I want to retrieve with destructuring cannot be assigned to any falsy value in my database.

NOTE 2: BUT if I was retrieving the avatar property that can be assigned to null in the database, this approach would not work.

```tsx
// Case 1 - id (cannot contain falsy values)

// user does not exist
const user = undefined
const { id } = user || {}
console.log(id) // undefined (what we expect)

// user exists
const user = {
    id: 'aaaa-aaaa-aaaa-aaaa',
};
const { id } = user || {}
console.log(id) // 'aaaa-aaaa-aaaa-aaaa' (what we expect)

// Result: SUCCESS

//-----------------------------------------

// Case 2 - avatar (can contain null a falsy values)

const user = undefined
const { avatar } = user || {}
console.log(avatar) // undefined (what we expect)

const user = {
    avatar: 'photo.jpg',
};
const { avatar } = user || {}
console.log(avatar) // 'photo.jpg' (what we expect)

const user = {
    avatar: null,
};
const { avatar } = user || {}
console.log(avatar) // undefined (not good, we needed this to be null)

// Result: FAILURE
```

Another approach is to spread the user into an object before destructuring it, because null and undefined values are ignored.

NOTE 1: I would use this approach if was retrieving the avatar property that can be assigned to a falsy value (null) in the database since the first approach would not work.

NOTE 2: This approach is less idiomatic, so I would not use it for cases where the first approach works.

NOTE 3: This approach would also work for id.

//Case - avatar (can contain null a falsy values)

const user = undefined
const { avatar } = { ...user }
console.log(avatar) //undefined (what we expect)

const user = {
  avatar: 'picture.jpg',
}
const { avatar } = { ...user }
console.log(avatar) // 'picture.jpg' (what we expect)

const user = {
  avatar: null,
}
const { avatar } = { ...user }
console.log(avatar) // null (what we expect)

// Result: SUCCESS

Applying the short circuit evaluation approach to our code:

function updateUserProfile ({ user_id, name, email }) {
  const user = await usersRepository.findById(user_id);
  if (!user) {
    throw new AppError(`The user was not found.`, 401);
  }
  const { id: findEmailOwner } = (await usersRepository.findByEmail(email)) || {}; // 1st approach
  if (typeof findEmailOwner !== 'undefined' && findEmailOwner !== user_id) {
    throw new AppError(`This email cannot be used.`, 401);
  }
  user.name = name;
  user.email = email;
  return usersRepository.save(user);
}

TLDR

Retrieving a property (that cannot be falsy) with destructuring from a value that can be an object or undefined - use short circuit evaluation.
Retrieving a property (that can be falsy) with destructuring from a value that can be an object or undefined - use the spread operator on the value that can be an object or undefined.

Additional Links

JS/ES6: Destructuring of undefined on Stack Overflow

Keep in touch

Contact me through my social media. Let's talk about DDD, TDD, good practices and the new Wonder Woman 1982 movie, be it on LinkedIn or GitHub.

Tell me what you learned today.

Domain-driven Design (DDD): File Structure

Steve Cruz — Tue, 01 Sep 2020 22:51:39 +0000

Project Current File Structure

src folder
-config folder
-database folder
-errors folder
-middlewares folder
-models folder
-repositories folder
-routes folder
-services folder

The src folder should contain our application modules. Everything in it impacts directly how our application functions.

We currently separate our application by file types. So files of the service type are stored in the services folder.

The problem with this is: if we had 10 models, we would have around 40–50 services. Having so many files that do not deal with the same module, or in other words, do not deal with the same domain becomes confusing.

Domain

Is the sphere of knowledge that involves that particular file or module. A set of business rules.

So it is not always good to build our project structure around separating files by their type.

A good way to build our project structure is to isolate things according to their domain, by using modules.

So services related to users such as Authenticate User Service, Create Appointment Service, Create User Service, Update User Avatar Service should all belong to the User Domain.

There would be an Appointment Domain that should only take care of business logic related to appointments, be it to create appointments, list appointments, check available appointments or cancel appointments.

DDD (Domain-driven Design)

Scrum is an agile methodology that allows the team to organize and execute their tasks in an agile manner.

But Scrum does not work in the same way for all teams and projects, we implement the ideas and concepts in the way that makes more sense for our context. DDD works in the same way, there are some concepts that only make sense in enterprise applications (very big applications).

Modules

What are the modules (spheres of knowledge) that we have in our application? The user domain and the appointment domain.
We must create a modules folder to accommodate our modules and inside it we create the users and appointments subfolders.

What can we store inside the modules/users folder?

DTOs
Entities/Models
Repositories (including our fake/mock implementations of them for TDD), services
Providers that are specific to users (a hash provider that hashes the user password)
Infra that is specific to users (we will see below what the infrastructure layer means).

Shared

Files with logic that is shared between all modules or multiple modules should be saved in the shared folder that is outside of the modules folder.

What can we store inside the shared folder?

Errors
Shared database files(connections and migrations)
Shared routes
Shared middleware
Shared providers (storage provider, email provider).

Infrastructure Layer vs Domain

Domain: Is the sphere of knowledge that involves that particular module. A set of business rules. It takes care of how the application should work.

Infrastructure Layer: Is how data that is initially held by in the domain's entities (memory) is persisted in databases or another persistent store. the infrastructure layer must not "contaminate" the domain model layer.
NOTE: It contains our application's technical decisions

When creating eBarber a meeting with the barbers or the users will help you better determine the Domain/Business Logic. But a barber does not have the expertise to tell you what tools you should use: if you should use an ORM or a Query Builder.

A CTO and/or senior engineers decide things that are related to the infrastructure layer.

The user domain knows that when a user signs up he should receive an email, but it does not know what tool is being used to send emails. That is the role of the Infrastructure Layer.

Read: Microsoft & DDD-oriented Microservices

Infra

To accommodate the infrastructure layer we can create multiple infra folders. We can have an infra folder inside our shared folder and inside each of our modules (users and appointments).

We can create a database folder inside the infra folder to deal with things related to our database. We should give it a specific name, since our project uses TypeORM, we should name our database folder as typeorm.

We can also create a http folder inside the infra folder to deal with things related to our http requests and responses such as server.ts, routes and middleware.
NOTE: Once again we should give it a specific name. If we were using another type of protocol such as gRPC we would give it another name.

Additional Notes

Infra will store all information that is responsible for a specific package or library. Example: TypeORM.
Errors may be shared but they are not part of the infra layer.
It is good to include things that could change in the infra folder.
- Example 1: Express routes and middleware.
- Example 2: Imagine if we need to change the communication protocol from HTTP to gRPC.

Project File Structure using DDD

Final considerations

The main advantage of Domain Driven Design is being able to create code with well-defined components that have clear contracts between them. This allows us to better define their responsibilities, makes updating or replacing one of these components much easier with less impact on the overall system.

The key disadvantage is that DDD assumes that you have a fairly clear picture of the solution you are trying to produce, but that is not always the case. A solution to this problem is to create a small prototype, possibly iterate over it multiple times until you have enough understanding to come up with the reasonable design. This can delay the start of the project, but is likely to result in a more maintainable solution.

This post only touches the tip of the iceberg, I encourage you to read more about DDD including about the application layer.

Keep in touch

Contact me through my social media. Let's talk about DDD, TDD and good practices, be it on LinkedIn or GitHub.

Share with us how you decide your project file structure.

JavaScript - Leetcode: Check If N and Its Double Exist

Steve Cruz — Sun, 30 Aug 2020 11:54:06 +0000

I have been solving LeetCode problems to practice my knowledge of algorithms and data structures for job interviews and decided to share my JavaScript solutions for them.
NOTE: You can also read this in LeetCode.

The problem

Problem: Check if N and Its Double Exist
Difficulty: Easy

Given an array arr of integers, check if there exists two integers N and M such that N is the double of M ( i.e. N = 2 * M).

More formally check if there exists two indices i and j such that :

i != j
0 <= i, j < arr.length
arr[i] == 2 * arr[j]

Inputs

Example 1:

Input: arr = [10,2,5,3]
Output: true
Explanation: N = 10 is the double of M = 5,that is, 10 = 2 * 5.

Example 2:

Input: arr = [7,1,14,11]
Output: true
Explanation: N = 14 is the double of M = 7,that is, 14 = 2 * 7.

Example 3:

Input: arr = [3,1,7,11]
Output: false
Explanation: In this case does not exist N and M, such that N = 2 * M.

Constraints

2 <= arr.length <= 500
-10^3 <= arr[i] <= 10^3

Naive solution

We could use a for loop nested in a for loop to check for each element if there is a corresponding number that is its double.

But even though we would have a constant space complexity of O(1), we would have a quadratic time complexity of O(n²) which is not good and should be avoided if possible.

//JavaScript
var checkIfExist = function(arr) {
    for(let i = 0; i < arr.length; i ++) {
      const currentValue = arr[i];
      for(let j = 0; j < arr.length; j ++) {
        const possibleValue = arr[j];
        if(possibleValue === 2 * currentValue && i !== j) {
          return true;
        }
      }
    }
  return false;
};

Solution 1: Hash Table

Another possible solution is to use the Hash Table data structure that in JavaScript can be represented as an object. Its main advantage is that we can assume that it takes constant time of O(1) to retrieve each stored element, so it is fast.

It also allows us to solve this problem by traversing the array only once:

In each iteration of a for statement we check if the current value already exists as a key in our object.

If so, a number and its double exist in the array, we must return true.
If not, store key/value pairs where one pair has the current element divided by 2 as a key and the other pair has the current element multiplied by 2 as a key. Notice that the values we store with each key do not matter, since we only check the keys.

If the for loop ends without finding a match, it means that the array does not contain a number and its double, we must return false.

Since we created a Hash Table with a size that scales linearly according to the size of our input array, it has a linear space complexity of O(n).

This time we only traverse the array once, so it has a linear time complexity of O(n).

//JavaScript
var checkIfExist = function(arr) {
    const hashTable = {};

    for(let i = 0; i < arr.length; i ++) {
      const currValue = arr[i];

      if(hashTable[currValue] !== undefined) {
        return true
      }
      hashTable[currValue / 2] = currValue;
      hashTable[currValue * 2] = currValue;
    }

  return false;
};

Map

This Hash Table approach could also be implemented by using the JavaScript built in Map data collection.

The main difference in our use case would be that instead of storing each key in the Hash Table as a string, we would store each key in a Map as a number. An Object only supports string and symbol as a key, but a Map supports objects and any primitive type as keys.

Solution 2: Set

The problem with using a Hash Table (object) or Map is that when we insert a key/value pair, the key is required but its value is not.

When we need a Hash Table data structure's properties to solve the problem, but we only need keys instead of key/value pairs it makes sense to use a Set data collection.
NOTE: Keep in mind that a JavaScript built in Set only stores unique values.

Similar to an object and a Map, we can assume that we can retrieve a value from a Set with a constant time complexity of O(1).

We created a Set with a size that scales linearly according to the size of our input array, it has a linear space complexity of O(n).

Just like our previous solution we only traverse the array once, so it has a linear time complexity of O(n).

//JavaScript
var checkIfExist = function(arr) {
    const set = new Set();

    for(let i = 0; i < arr.length; i ++) {
      const currValue = arr[i];

      if(set.has(currValue)) {
        return true
      }
      set.add(currValue / 2);
      set.add(currValue * 2);
    }

  return false;
};

Keep in touch

Contact me through my social media. Let's talk about algorithms, data structures and LeetCode problems, be it on LinkedIn or GitHub.

Share with us your solutions for this problem.

Stop Guessing: What is a JWT?

Steve Cruz — Sun, 23 Aug 2020 20:41:50 +0000

Stop Guessing: What is a JWT?

JSON Web Token (JWT)

A JWT Is an open standard that defines a compact and self-contained way for performing Authentication in REST APIs where information is securely transmitted between both parties as a JSON object.

This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with HMAC algorithm) or a public/private key pair using RSA.

NOTE 1: We consider it compact because of its size, it is possible to send it through an URL, POST parameter, or inside an HTTP header. Also due to its size its transmission is fast.
NOTE 2: We consider it self-contained because we do not need to query the database more than once, the payload contains all the necessary information about the user.

When to use JWT?

Authentication: After the user is signed in, each subsequent request includes the JWT. This allows the user to access routes, services, and resources that require that token.

Information Exchange: JWTs are a secure way of transmitting information between parties, because you can be sure that the sender is who they say they are, since they can be signed (possibly by using a public/private key pair). You can also verify that the content has not changed, since the signature is created using the header and the payload.

JWT Structure

A JWT is formed by three parts separated by dots (.): a Header, a Payload, and a Signature. These parts follow this structure: xxxxx.yyyyy.zzzzz.

Header

Contains some information that usually include the token type (which is JWT) and the hashing algorithm (such as HMAC, SHA256 or RSA).

Afterwards the JSON containing that Header is Base64Url encoded to form the first part of the JWT.

//Example of a Header
{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

Contains the claims that are statements about an entity (usually the user) and additional metadata.

NOTE: Can not contain sensible information about a user like password, but it is ok to include user id, name or email.

Example of claims: iss (issuer), exp (expiration time), sub (subject), aud (audience), among others.
Afterwards the JSON containing the payload is then Base64Url encoded to form the second part of the JWT.

//Example of a Payload
{
  "sub": "0987654321",
  "name": "Jane Doe",
  "admin": true 
}

Signature

Is used to verify that the sender of the JWT is who they claim to be and to ensure that the message was not changed while it was being transmitted.

To create the signature take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign it.

//Example of a Signature using the HMAC SHA256 algorithm
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

NOTE: A simple way to generate a secret is using http://www.md5.cz/ to generate a MD5 hash of a string.

Uniting the three parts

The output is three Base64 strings separated by dots: an encoded header, an encoded payload and it is signed with a secret. They can be passed in HTML and HTTP environments.

NOTE: Go to jwt.io, a website that allows you to decode, verify and generate JWT.

How does a JWT work?

1 - When the user is authenticated by successfully signing in using their credentials, a JWT will be returned.

NOTE: Keep in mind that tokens are credentials, so you must prevent security issues: do not keep tokens longer than required.

2 - Whenever the user wants to access a protected route, its request should send the JWT, usually in the Authorization header using the Bearer schema: Authorization: Bearer .

NOTE: This authentication mechanism is stateless, because the user state is not saved in the server memory. Instead, the server's protected routes check for a valid JWT in the Authorization header, and only allows the user if this condition is fulfilled. As a result it is not necessary to query the database multiple times as JWTs are self-contained, so it already has all the necessary information.

Why Should You Use JWT?

They are stateless: Since tokens are self-contained they have all the information that is needed for authentication. This is good for scalability as your server does not have to store session state.
They can be generated from anywhere: Token generation and token verification are decoupled. This allows you to handle the signing of tokens on a separate server.
They allow access control: Within the payload it is possible to specify user roles and permissions. You can also define the resources that the user can access.

Best Practices

Let tokens expire: When a token is signed it will never expire unless you change the signing key or explicitly set an expiration. This could pose potential issues so it is necessary to have a strategy for expiring and/or revoking tokens.
Do not store sensitive data in the payload: Tokens can be easily decoded, their goal is to protect against manipulation with their signature. So only add the necessary number of claims to the payload to have the best possible performance and security.
Be a good magician, do not reveal your secret: Only reveal the signing key to services that really need it. It should be treated like any other credentials.
Utilize HTTPS: On non-HTTPS connections the requests can be intercepted and tokens compromised more easily.

Keep in touch

Contact me through my social media. Let's talk about security, authentication and programming in general, be it on LinkedIn or GitHub.

Share with us what JWT good practices you advocate for.

Awesome Jest Tip: Coverage Report

Steve Cruz — Mon, 17 Aug 2020 19:56:49 +0000

How much testing is enough?

Sometimes we create some unit tests for our application to test our services, but we do not know the answers to these questions: Did we create enough unit tests? Did we create too many tests?

Jest: Coverage Report

Popular JavaScript frameworks can use Facebook’s Jest to perform unit tests.

Jest has the Coverage Report feature that allows us to check if our code covers all lines of the files we choose by generating an HTML file that we can open.

In my case I chose to cover services that are in the services folder. These services are related to Users and Appointments, such as AuthenticateUser, UpdateUserAvatar and CreateAppointment.

Our HTML file shows us that we almost have enough unit tests for our services related to Users and that we do not have any unit tests for our services related to Appointments.

If we click in appointments/services we will see more in depth information showing coverage statistics on each service related to Appointments.

Branches represent if statements which conditions have been fulfilled at least once during the unit tests.
Functions represent functions that have been called at least once during the unit tests.
Lines represent code lines that have executed at least once during the unit tests.
Statements represent instructions that have been executed at least once during the unit tests. For example, we can have a line that contains two statements: var age= 18; console.log(age) this contains a variable declaration statement and a statement that executes the log function that belongs to the console object.

If we click on CreateAppointmentService.ts we are able to see every line of code contained in that file.

Lines highlighted in pink are statements that are not covered by the unit test. This helps us create tests for parts that are missing them.

If we return to the initial screen and click on users/services we will see more in depth information showing coverage statistics on each service related to Users. It is possible to see that some are completely covered and others are partially covered.

If we analyze the lines of code in the CreateAppointmentService.ts file we can see 1x at the left hand side, it means that we executed that part of the code one time during our unit tests. This happens because I only tested one of the functional requirements on my unit tests: “Should not allow unauthenticated users to change their avatar”.

Notice there is an E symbol at line 31. It means that we have not entered it during our unit tests (else path not taken).

Also notice that there is a part of line 42 that is highlighted in yellow. It means that the possible branch is not covered.

If we analyze the lines of code in the CreateUserService.ts file we can see 3x and 4x in different places at the left hand side, it means that we executed some parts of the code differently during our unit tests. This happens because I tested multiple different functional requirements on my unit tests. Examples of my requirements:

“Should be able to create a new appointment”.
“Should not be able to create two appointments at the same time”.

Keep in touch

Contact me through my social media. Let's talk about unit tests and programming in general, be it on LinkedIn or GitHub.

Share with us what tools you use to improve your tests.

4 Tips to help people with Visual Impairments (a11y)

Steve Cruz — Thu, 23 Jul 2020 22:55:16 +0000

26.9 million American Adults age 18 and older reported experiencing vision loss according to a 2017 study from the American Foundation for Blind.

Here are 5 things we can do to help promote web accessibility:

1. Be careful with Alert Boxes, Error Messages, and Pop-up Windows

Do not use JavaScript or other client-side scripting to hide warnings, disclaimers, or error messages.

When HTML elements are removed from the DOM the screen reader does not have access to them anymore.

Important messages should be available to all site visitors.

In this case I hid the tooltip using the CSS property opacity: 0. Had I used JavaScript to remove the tooltip from the DOM or the CSS property display: none most screen readers would not be able to read the tooltip without the visually impaired user hovering it because it was removed from the DOM.
NOTE: visibility: hidden does not remove the element from the DOM, remove them from the accessibility tree so screen readers cannot read it too.

Another possible solution to this problem is to develop a server-side solution that rebuilds and serves a modified page with the error message embedded in it.

2. Do not use Color as the only way to convey information

Color can be used for denoting required fields on a form or any input errors. However, some users may be color blind and have a hard time perceiving color, colors are also a problem to those who are blind so, when color is used, do not use it as the only means of conveying information.

It is common to use red as a color to convey error and green to convey success, but some websites only use a red border around the input to convey an input error without any additional cues.

Twitter solves this by also displaying text instead of just using the red color to convey that an error has occurred, this approach is good for people with visual impairments.

3. Provide adequate Contrast

There must be enough contrast between text and its background. This allows people with reduced vision to read and navigate the website site.

The minimum contrast ratio between most text and its background must be 4.5:1. Exceptions include text that is larger and/or bold, they may have a contrast ratio of 3:1.
NOTE: Large can be defined as 18-point text, bold is a 14-point bold text.

Image: https://www.brandeis.edu/web-accessibility/understanding/color.html

Free tools to check contrast

4. Visible Focus

Focus emphasizes the element that is currently selected. It allows users to know that they are about to activate a link, button, form control, etc.

This helps people who have reduced vision or other print-related disabilities have a clear indicator of where they are on a web page.

NOTE: If a border is used to indicate focus on an element, it must have sufficient contrast so it can be clearly noticed.

How to check if your page's elements have visible focus?

Use the tab key to cycle through all the page's elements. As each element receives focus, there must be a clearly visible change to the element.

Keep in touch

Contact me through my social media. Let's talk about accessibility and programming in general, be it on LinkedIn or GitHub.

Share with us what you do to improve accessibility for those with visual impairments.

Accessibility & Technology: Connecting People

Steve Cruz — Mon, 13 Jul 2020 17:37:45 +0000

The purpose of technology

Technology evolves at an ever increasing pace, every year there is a new iPhone product with better lens and more features.

In a not so distant past insulin was harnessed from pigs and cows, but since the 80s recombinant DNA is used to produce this medication by inserting a human gene into the genetic material of a common bacterium.

So what is the purpose of technology? Is it profit? Is it to increase life expectancy and eradicate disease? Guarantee a sustainable future for the planet and the future generations?

It is possible to strive for all these, but a very important purpose of technology is to connect people.

Technology connects people

Humans have been looking for ways of connecting people as far back as Ancient Greece. In those times people reunited in the agora, a public space, to shop, discuss different political views. It is hard to imagine nowadays a marketplace and a courtroom side by side where everyone is welcome to speak and consider views other than their own.

Note: Agora can be literally translated to "gathering place" or "assembly".

But, even though there was a lot of engagement between people and their local community, which is something that many believe is lacking nowadays, distance was a problem, for the average citizen it was hard to connect with and maintain contact with people far away, news traveled slowly.

Humans are obsessed with solving problems, we have harnessed technology to communicate in many different ways, the printing press allowed newspapers to connect people, afterwards the telephone, the radio, the tv, the internet with computers and cellphones.

But even with all these advances there is a significant amount of the human population that become excluded without being able to enjoy the benefits of technology to connect and learn. They are invisible to technology and most of the time their unique needs are not taken into account when developing these technologies.

Who are the people invisible to technology?

The World Health Organization (WHO) conducted a study and published its results in the Disability and health fact sheet. According to it "Over a billion people, about 15% of the world's population, have some form of disability". It also states that "Between 110 million and 190 million adults have significant difficulties in functioning."

https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health

Disabilities categories

Visual impairments

They include people that suffer with blindness, color-blindness and low vision, the World Health Organization estimates that "285 million people are estimated to be visually impaired worldwide".

Many websites set font size with px instead of using the relative units, this overrides the browsers ability to allow a user with low vision to enlarge the font-size though its settings.

Because of that web browsers took matter onto their own hands and now have zooming capabilities to help fix this problem.

Some people use screen readers, software that reads text aloud, but for information to be read properly it requires the website to be optimized with semantic HTML. Using the visibility: hidden CSS property hides an HTML element from the accessibility tree, so the screen reader cannot read the information increasing exclusion.

Auditory impairments

They include people that suffer with deafness and loss of hearing, the World Health Organization estimates that "466 million people worldwide have disabling hearing loss".
These people use ATs that are Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders.
It is also essential for websites to provide textual alternatives to audio content:

Text transcripts that can be displayed with audio visual content.

Motor impairments

Includes people that have disabilities related to movement.

Physical issues: related to a temporary or permanent paralysis or a loss of limbs.
Neurological and/or genetic disorders: responsible for loss of control in limbs or weakness.
Both

Due to this many people cannot use a mouse, have a slow response time and/or limited fine motor control, The US Centers for Disease Control and Prevention's Disability and Functioning statistics estimate that in the US "Percent of adults with any physical functioning difficulty: 16.1%".

https://www.cdc.gov/nchs/fastats/disability.htm

Some people have been paralyzed to such a degree that head pointers are necessary to utilize the computer. Picture from https://www.performancehealth.com/baseball-cap-head-pointer

Cognitive impairments

Includes people that have a broad range of disabilities, such as learning disabilities (dyslexia and attention deficit hyperactivity disorder), distractibility, inability to remember or focus on large amounts of information. It also includes people with mental illnesses, such as depression and schizophrenia.

These impairments may introduce difficulty when interacting with websites, such as having a hard time understanding content or confusion created by inconsistent webpage layouts. An example of an inconsistent and unintuitive layout is a computer software that has its x button responsible for closing the application on the lower left side of the screen.

Accessibility and programming

Each kind of impairment brings unique challenges and requires strategy in content design. Accessibility is keeping these unique challenges in mind and building strategies that have a usability that goes beyond people with disabilities.

An example of this is that everyone enjoys websites that have intuitive navigation, useful illustrations, and content that is organized in a logical manner.

Another example is that while users with disabilities need captions and transcripts, they are useful to anyone that is using multimedia in environments that are too noisy or in an environment that is silent when they do not have earbuds.

With accessibility in mind the Web Content Accessibility Guidelines (WCAG) Overview were created to promote inclusion in the internet. In future posts I will use WCAG to talk more in depth about the unique challenges each type of impairment presents and strategies to tackle them.

Let's talk about this

Contact me through my social media, seriously. Let's talk about accessibility and programming in general, be it on LinkedIn or GitHub.

Technology can be accessible to a broader audience by having diverse people build while collaborating and sharing their unique needs and experiences.