Forem: Molly Nemerever

Back to Basics - Pure Functions

Molly Nemerever — Sun, 06 Oct 2019 01:23:39 +0000

Pure functions are one of several core concepts of fundamental programming. I'm sure you've written them, but were you able to identify that you were writing a pure function? Did you realize the importance or key traits of a pure function? If you're not sure then you've come to the right place. Let's review the basics of pure functions together!

so excited

What are Pure Functions?

Simply put, pure functions are functions which accept argument(s), compute a value based on the argument(s), and return a value. They always do this. Sounds really basic - right? Well, pure functions kind of are! But let's dig a little deeper into some additional key characteristics.

Pure functions must always accept at least 1 argument. This argument will remain unaltered but will be used in the computation which takes place inside the body of the function. Additionally, there must always be a return value. This is perhaps a dead giveaway of a pure function - the return value will always be the same when called with the same arguments.

Take the code below - run plusFive 1 million times and you will always get the same return value when passed the same argument.

very basic example, I'm sure you've used something like this before!

It's also important to note what pure functions don't do. They shall not cause side effects such as altering the arguments that were passed in, changing your application's state, setting/updating global variables, or any other side effect like triggering a fetch request. They're simple and only depend on their arguments to compute and return a value.

Pure Functions in Your Program

Cool - now we've got the definition down let's take a look at how they might be used and some advantages.

Because pure functions are independent of your program's ecosystem, that makes them easier to debug and refactor. You can expect the same output given the same input - so expect to write simple tests for these functions and if problems do arise you'll be able to quickly diagnose the issue. You can also most likely dismiss them as a culprit of other bugs knowing that these pure functions don't cause side effects. Another plus of no side effects is that when you refactor your pure functions you can kiss away any anxiety you might have about accidentally tweaking another corner of your program. Refactoring these functions won't change others in your program since they were never connected to begin with.

Examples of Pure and Impure Functions

First up - let's look at an impure function. Notice how the moveUpGrade function alters the argument that was passed in? That means the function is creating a side effect therefore it is impure.

impure function

Let's refactor the code to make the function pure. Below you can see we use the spread operator to create a new student object. Instead of altering the exact object that was passed in and causing a side effect, we make the update desired and return a new object. Pure!

pure function

And that's it for Back to Basics - Pure Functions! They're quite straight forward, can help maintain clean code, encourage simple refactoring, as well as quick testing/debugging.

Back to Basics - Simple Destructuring in JavaScript

Molly Nemerever — Thu, 22 Aug 2019 21:00:29 +0000

Want to type less, keep your code concise, and quickly access values within objects and arrays? Then you've come to the right place. This week's Back to Basics series will review the incredible (and perhaps underrated?) feature of destructuring in JavaScript. I'll show how to 'take a peak' inside data structures like objects and arrays and assign specific values to a variable for quick easy reference.

As implied by the name, destructuring can help simplify complex data structures into smaller and more manageable fragments. This can be especially helpful when passing objects/arrays as arguments, or if you want to frequently access a deeply nested value within an object since you can save yourself some typing (and potentially typos) by assigning the value to a variable.

Let's begin with simple examples of destructuring arrays and objects in JavaScript.

Below you can see an example with an array of princesses 👑. For the sake of simplicity we are going to destructure the array and create easy references to the first two princesses in the array - let's call them first and second. On line 34 we use the array literal and assign it to our original array. Inside of the array literal we list our new variables first and second which will be mapped to the first two elements in the princesses array in their corresponding order. You can see the logs on lines 35 and 36.

Another option is to assign the remainder of the array to a variable. This can be accomplished by using the spread operator as the third and final variable within our array literal (...remaining). You can see the logs from this alternative example on lines 40-42.

two variations of destructuring a simple array

Moving on now..let's explore a simple object example. We need to keep track of the hometowns of each princess (very important stuff, I know). We have a rather large object which lists each princess, her rumored country of origin, and the region said country belongs to. While this is just a fraction of princesses, we can imagine that a complete list would create a much larger object. Hypothetically speaking throughout our program we will want to reference the object which represents each region. We can easily destructure our hometowns object into variables which represent each region.

On line 58 we use the object literal to create a variable europe and assign it to the object hometowns. This variable will be mapped to the value of the key europe inside the hometowns object as proved on line 60. We can also declare two variables like northAmerica and asia in one object literal to pull of the remaining two nested object - take a look at lines 62-66!

you can assign multiple variables at once

Lastly, let's take a brief look at how you can destructure a function parameter. From our princess data - you'd really like to print out the total number of countries represented from each region. To achieve this efficiently through destructuring, pass in the larger hometown object and pick off each region. You can then log the count of keys inside of each country object. Note that here we destructured each region, but you could also just destructure {asia} similar to the earlier object example.

hometown object is destructured as function parameter

I hope this post helped to provide some foundation for destructuring in JavaScript. There are a lot of other cool ways you can utilize destructuring within your code and I encourage you to explore further. I've linked the MDN doc for your convenience!

Back to Basics - JavaScript Closures

Molly Nemerever — Mon, 12 Aug 2019 15:33:16 +0000

It's time for part 2 of my JavaScript Basics series! This week we are reviewing closures. I think it is very likely that many beginner programmers understand this concept, but might not recognize that we call this functionality a closure. Let's dig into the definition of a closure and explore some examples.

MDN defines a closure as "the combination of a function and the lexical environment within which that function was declared." Great..but can we simplify even more into layman's terms?

Think of a closure as a function with preserved data. The preserved data consists of any variables or arguments that were in scope at the time of function call. Each and every function call creates its own preserved data which we call a local binding. The idea that we can access a particular instance of a local binding is closure.

Let's look at some examples:

The code below shows an outer and inner function. The outer function takes in a number, assigns it to a local variable (local) and returns our inner function. The inner function computes and returns the value of the local variable multiplied by two.

demonstrates multiple local bindings (closures)

As mentioned earlier, each time a function is called a new local binding is created. Therefore a single function can have various local bindings as illustrated in the code above. We have a closure which accesses the binding of num = 2 and a closure which accesses the binding of num = 4. We also get the ability to call var1() and var2() anywhere in our program and they'll maintain their local bindings.

The next example is a tad more complex. It considers both an outer and inner function, but this time the inner function takes in an argument. The objective of this code is to build a DRY function that creates a blueprint for multiplication. We can bind this function to a factor (ex: 5) and then reuse over and over again passing in different numbers.

functions see the bindings in which it was created, not called

Above we are creating two separate environments on lines 7 and 10. triple constructs an environment where factor = 3 and quadruple does the same where factor = 4. Now looking at line 13, the function which is returned by calling triple(5) recalls that factor = 3 and recognizes that the argument of 5 represents num. So, the result of num * factor is returned.

I hope this article helped to provide some more explanation around what a closure is. Feel free to comment below with feedback, examples of when you've used closure, or any additional tips!

Back to Basics - JavaScript Hoisting 101

Molly Nemerever — Tue, 06 Aug 2019 23:29:50 +0000

It's always a good time to review the basics of your programming language! In this series I'll be reviewing some fundamentals of JavaScript. It is important that we refresh ourselves on how the language works behind the scenes and of course it is also great practice to be able to explain concepts in simple terms.

This week we review Hoisting - what it is, function and variable hoisting, and a few key takeaways.

What is Hoisting?

When your JavaScript code is compiled, variable and function declarations are "hoisted" to the top of their scope. Depending on where a variable is declared, the scope could be global or local. Either way, the variable declaration is hoisted to the top of that specific scope. Functions are also hoisted, but to the very top of the program. Functions are hoisted even above global variables. Hoisting is why you might see functions successfully called before they are declared - to make this possible they are pulled (hoisted) to the top of your program right before the code is executed.

It is important to note that when code is hoisted it is not physically relocated in your program. Instead, your program is scanned for all variable/function declarations and those relationships are saved in the lexical environment. Your code maintains its original formatting and structure while variable/function declarations are accessible via lexical environment.

Hoisting Functions:

Function Declarations are hoisted to the very top of the program. They can be called in the code prior to actual declaration. The example below logs without error:

function declarations hoisted to top of program

Function Expressions are not completely hoisted in the program. Instead, only the declaration will be hoisted because it is recognized as a variable (hint: var keyword). The actual assignment of the variable's value (in this case a function) is not hoisted. In the example below, you'll first get an error stating that expression is not a function. That is because the assignment was not hoisted - only the declaration. The second call of expression() works, because the program has parsed through the program ad reached the assignment of the function to var expression.

declaration is hoisted, but not assignment of function value

Hoisting Variables:

Variables are hoisted to the top of their scope (local or global). Variables declared with var are hoisted slightly differently that variables declared with const or let.

var Variables are hoisted, initialized, but assigned value of undefined. Similar to function expressions only the declaration is hoisted, not the actual assignment of the variable's value. The code below demonstrates how var variables are hoisted, initialized with a value of undefined, and then reassigned their value once the program reaches the value assignment.

hoisted, initialized, assigned undefined

let/const Variables are a little more tricky. These variables are hoisted, but remain uninitialized until they are evaluated. Unlike the var variables which are hoisted and initialized with a value of undefined, let/const variables are hoisted, but not initialized at all. That means they're sitting in the lexical environment uninitialized. Attempting to access a variable that is uninitialized throws a reference error. Once the program is in execution and reaches the variable declaration, your let/const variable will be initialized. It will either be initialized with a value (if assigned in the declaration line) or with undefined until a value assignment is reached later on in the code.

This can be rather confusing at first, so let's take a look at the example below. You'll see that first an error is thrown because while the variable exists in the lexical environment, it remains uninitialized until the program reaches the line of variable declaration. Line 11 the variable gets initialized, but is assigned a value of undefined because there is no value assignment. Line 13 the variable is assigned a value which overwrites previous value of undefined.

hoisted, but initialized & assigned value once declaration is reached in code

Take a look at the example below which showcases let/var variables and their hoisting differences side by side:

note the difference in how var is hoisted and initialized and let is not

Key Takeaways!

Variable declarations are hoisted, while variable definitions are not.
Function declarations are hoisted, while function expressions are not.
Variables with var are hoisted, initialized, and assigned value of undefined
Variables with let/const are hoisted, but remain uninitialized until their variable declaration code is reached. Then, they are either assigned undefined or a value depending if value assignment exists.
It is helpful to declare your variables at the top of the function scope. This way, it is clear where variables are coming from and easier to identify their scope.
Declare and initialize your variables before use to avoid bugs which stem from incorrect hoisting assumptions.

Setting Up Sass in Gatsby Project - 4 Easy Steps

Molly Nemerever — Mon, 29 Jul 2019 15:59:37 +0000

Working on a Gatsby project and want to up your game by utilizing Sass? You've come to the right place, my friend. Below is a guide to get you started with Sass right away! No time like the present - right?

1. Install Plugins & Packages

Up first - install the node-sass package and the Gatsby plugin for Sass through your terminal. Navigate into your Gatsby project and run the following command: npm install --save node-sass gatsby-plugin-sass.

2. Update Plugins in your Configuration File

Now that you've imported the Sass plugin to your project - be sure to add this into your gatsby-config.js file. You'll see that the react package is already living inside the plugins array, simply add gatsby-plugin-sass to the array and save the file.

3. Rename `layout.css`

Gatsby gives you a default file titled layout.css but now that we are taking advantage of Sass we'll need to revise the file extension. Simply rename the file to include .scss at the end.

4. Adjust Import Statement in `layout.js`

This step is easy - both easy to miss and to complete! Don't forget to adjust the file name of layout.scss in your layout.js file. Whatever you decided you wanted your file to be named in step 4, make sure it matches in layout.js.

And the rest is history! You're ready to start using Sass in your Gatsby project. Run gatsby develop as you work through your styling to see your changes instantly on localhost. Resources provided below for additional insight:

Sass Guide
Gatsby Plugins

The Chrome Extension All Devs Need

Molly Nemerever — Mon, 22 Jul 2019 14:52:51 +0000

We know that developers play a critical role in how the internet is shaped today - from content to functionality to accessibility. But how mindful are we being of accessibility standards when it comes to our passion projects? I hope that the same due diligence regarding accessibility standards is taken regardless of the project - but I fear this may not be the case.

I wrote an earlier post about HTML and its affects on a screen reader and then I got thinking more about accessibility standards. It is easy to remember to use the strong/em tags and to include alt tags for images - but for more complex HTML elements do we know how we are affecting a screen reader? What if you want to have an unordered list without bullet points - is that screen reader friendly? I suppose you could do some research each time you question an HTML choice, but luckily I’ve found a helpful Chrome extension to do this work for us.

Continuum Explorer Community extension is free and easy to add to your Chrome browser. I’ve been using this extension to proof my passion projects before deploying to Heroku/Netlify. The tool scans webpages for accessibility concerns and also gives tips on how to resolve any issues. I’ve found it extremely helpful and enlightening as I jump into my career as a developer. You never know when you might accidentally mis-type something which could prohibit a screen reader from doing its job. Think of this extension as another set of eyes to review your work to ensure that all users can interpret and interact with your page.

To use, simply click on the extension icon in your browser, the application will scan your current webpage for any concerns regarding accessibility. Below, see first and example of a page without concerns, followed by a page that needs a lot of help!

error free message

error detail of several errors to be fixed

You can see that this extension does a great job of listing the error, severity, and even gives you a clear path to identify the offender in your code. If you’re unsure of how to resolve the issue you can click on the link next to “Best Practice” to be lead to the page below:

useful info page to learn more about errors

This page is a great tool to learn more about the accessibility standards and to see several examples of how to write screen reader friendly pages. This is one of my favorite parts of the extension - instead of only telling you how to fix the problem, a resource is provided where I can dig deeper and learn more.

I hope that you’ll take the time to explore this Chrome extension. I’ve found it extremely helpful when proofing my work. As developers, it is imperative that we are constantly mindful on the impact we have on accessibility. The Internet is a place for community, discovering, commerce, learning, and so much more. Everyone should be able to interact with the Internet the same - with or without a screen reader.

Learning Node.js - Recommendations?

Molly Nemerever — Thu, 20 Jun 2019 18:29:04 +0000

I'm interested in learning Node.js and am wondering if there are any recommendations for online resources? I'm particularly interested in something engaging (practice problems and reviewed solutions) such as the courses offered on udemy.

Does anyone have any recommendations on material that they found to be beneficial? There is so much content out there - looking for some personal insight before I go down the Google rabbit hole. 🐰

Thanks in advance!

4 Simple Steps For Custom Bash Commands

Molly Nemerever — Mon, 08 Apr 2019 18:48:23 +0000

The terminal isn’t the most user friendly - sensitive to errors, challenging to read, and it requires a lot of typing! I frequently find myself typing the same commands over and over into my terminal. If only there was a way to create my own shortcuts to access my main folders by typing a single keyword…

Luckily this functionality exists! Let's walk through 4 simple steps to creating your personalized bash commands:

1. Locate Your .bash_profile (OSX) or .bashrc (Linux)

Navigate through your terminal to either your .bash_profile file or .bashrc depending on your operating system. Your shortcuts will live in these files so that each time you open a new terminal session, the shortcuts are accessible.

navigate to .bash_profile within OSX

2. Add Your Commands

Inside the file start creating your own commands! Use them to help you navigate to frequently accessed folders, shorten git commands, open applications, or anything you think would be helpful and time saving. Examples below:

a few examples of personalized bash commands

3. Update Your Command File Through the Terminal

For best practice, after you add new commands to your shortcut file, be sure to run the command below to refresh your file via the terminal: source ~/.yourfilenamehere

run this command after editing your file

4. Run Your Commands!

Use your commands and enjoy the time you’ve saved by working smarter - not harder! Go back and add commands as you need throughout the future.

'Rails Routes' My New BFF

Molly Nemerever — Tue, 02 Apr 2019 02:38:33 +0000

Last week I finished my second project at Flatiron School. The task at hand was to create an application using Ruby on Rails and to deploy via Heroku. Throughout the process of designing our application, my team and I were constantly utilizing the ‘rails routes’ command through our terminal to check the paths to each file within our application. Prior to this project, I had used the command sparingly, but I had no idea exactly how useful this tool is until I created an application myself. The objective of this post is to help other developers learn when to call this command, how to interpret the message, and to portray the value of this built-in tool.

When To Use 'Rails Routes'

The routes in your application will act as a bridge between the URI and controller files. When a user types in an address the route will examine the request and look for the corresponding controller. When writing your application you always have the option to hard code your paths, but calling ‘rails routes’ will provide you with route helpers. I recommend using these helpers because they are dynamic, can improve readability of your code, and is a more natural way of writing urls instead of string interpolation.

MVC project workflow

I used the command ‘rails routes’ most frequently when trying to complete the following tasks:

Creating links

Throughout the application there were links from one page to another, and I was never exactly sure off the top of my head what the path to these pages were. By calling rails routes I was able to get a quick summary of the available paths, where they lead to, and the correct syntax for them within my program.

Nesting Routes

Because we we were using the Heroku free plan, we weren’t going to have our own domain so we decided to nest all of our routes behind “/brain” (the name of our application). It was important that we maintain clean and clear URI paths to preserve our users' experience. This was my first time nesting routes and while it was challenging, I couldn’t have done it without consistently calling ‘rails routes’. Below is a screenshot of the nested routes for this project - it was not intuitive for me at first look. By calling rails routes I was able to immediately view in the terminal what our routes looked like, verify if they were correct, and could also make changes in real time and see the updates to routes in the terminal.

nested routes are not very intuitive

Interpreting The Terminal Output

The output will show you all the available routes within your program. As mentioned above, these are listed as route helper methods so that you don’t have to hard code paths into your project. Route helpers also offer the benefit of providing intuitive path names so when you or someone else is reading the code, they can make an educated guess on where the link will lead them.

example output after running rails routes

Column 1 - Prefix:
These are the prefixes for the helper method - you’ll want to add _path at the end of the method when using in your code. See how intuitive these are!

Column 2 - Verb:
Lists the HTTP verb - what the program is doing and corresponds to a CRUD action.

Column 3 - URI Pattern:
This column lists the path for route. Tells you what the URI will look like from a users’ perspective and will also note what type of parameters are needed (ex: user_id, post_id).

Column 4 - Controller#Action:
Lists the designated controller and the corresponding action. The controller will be listed on the left side of the hashtag, and the action (where it is going within the controller) is listed on the right side of the hashtag.

Conclusion - An Invaluable Command

Overall, 'rails routes' has proved to be an invaluable tool and helped to demonstrate how the code I was writing would be translated in the URI. I could easily visualize how my program was navigating through the MVC architecture. It also cut back on my errors because I was able to quickly reference the correct paths, rather than guess them. My tip for beginners is to remember the power of running ‘rails routes’ - utilize it frequently to ensure proper application structure and to check out your URIs from the users' perspective.

Routing Image

A Beginner's Guide to the Internet of Things

Molly Nemerever — Mon, 25 Mar 2019 02:36:24 +0000

You've probably heard the buzz-phrase "Internet of Things" (IoT) - but do you really know what it means? I'll be the first to admit, I had no clue what this fancy sounding thing was, when I encountered the term. enter inspiration for this post I'm here to help break down the fundamentals of the Internet of Things, so that beginners like myself can get a grasp on this exciting technology.

The Beginning of IoT:

The term Internet of Things was originally coined by Kevin Ashton in 1999. Realizing the potential of radio-frequency identification (RFID) in supply chain, Kevin was passionate about bringing RFID to the forefront of business strategy. He later founded the Auto-ID Center at MIT which served as a catalyst for RFID research across the globe.

Although Kevin Ashton gets kudos for coining the IoT buzzword, legend has it that the first IoT device was a Coke machine at Carnegie Mellon in the 1970s. Tired of walking down lengthy hallways only to arrive at an empty vending machine, researchers in the Computer Science department decided to track the Coke machine's inventory remotely by monitoring the lights, which indicated stock levels, and temperatures of the sodas. This tracking program was hooked up through ARPANET so that anyone at Carnegie Mellon could see the status of the vending machine.

Despite these early pioneers, the development of IoT was initially slow to progress, as supporting technologies such as RFID and cellular/wireless networks were not yet developed enough to support its full capabilities. However, monumental strides in technologies such as broadband internet, wifi/cellular networks, and affordable, efficient hardware have since helped enable the rise of IoT.

How to Define IoT:

So what exactly does IoT mean? The Internet of Things is any network of devices which collects and shares data through means of the internet. Often times, these devices don't even require the interaction of humans and the data it collects and transmits, is analyzed in real time.

Some examples of the prevalence of IoT are:

Home - smartphone, lighting/climate control, tv/speaker
Public - public transit, traffic control, garbage collection
Businesses - inventory management, delivery tracking, security cameras
Workplace - access control, smart furniture, virtual meetings

One perk of IoT is that these smart products aim to make our lives easier. Instead of having to check or change things manually, IoT products can automatically keep track of different metrics or settings, and with a simple click of a button, allow humans to complete tasks. They allow us to control devices remotely (such as turning on the oven while driving home from work), voice commands into our televisions, change traffic lights to mitigate congestion, and even remind us when to move our feet to stay healthy.

These devices are also opening up endless possibilities for data analytics. As we continue to use smart devices, companies are able to collect more and more data on our behavior. On one hand, this accumulation of data allows for companies to invent smarter machines which will better suit our needs in the future. On the other hand, companies are now privy to our every move and could even know our exact location at any given time.

Devin Pickell has a great intro to Data Analytics if you want to learn more about how companies may utilize this data.

How Does IoT Work?

In a nutshell - your smart device communicates through the internet to reach your remote, which has the ability to communicate directions back to the smart device (such as stop music or turn off lights). Data sent between can also be stored in locations such as the cloud, local databases or any of the devices.

IoT Isn't Going Anywhere

I hope that this post helped to serve as introduction to IoT because it isn't going away anytime soon. The IoT market was estimated at $170 billion in 2017 and predictions estimate that by 2022, the IoT market will be around $561 billion. As companies continue to collect more data and manufacture smarter devices, we can expect more and more integrated technology to be at the touch of our fingertips.

Resources:
IBM Industries
IoT Agenda
Forbes
CarriTech Diagram

Do you use the Dvorak Keyboard?

Molly Nemerever — Fri, 22 Mar 2019 21:29:41 +0000

Doing some research on Dvorak vs Qwerty keyboard. Does anyone have any experience with both?

I'm interested in gaining insight into the learning curve of Dvorak and its effectiveness with programming.

5 Ways Your HTML Code Affects A Screen Reader

Molly Nemerever — Mon, 18 Mar 2019 03:09:48 +0000

Screen readers are important because they make the Internet an inclusive place. A screen reader is software that reads the contents of a webpage aloud to a user, and are most helpful for those who are visually impaired/blind, have a cognitive disability, or are illiterate. Screen readers are responsible for identifying data on a webpage, interpreting that data, and then communicating the data to the user. This can be output through the voice of the computer or through a braille terminal (pictured below).

To reiterate, screen readers play an incredibly important role to those who utilize them, as they serve as a gateway to the Internet for those who cannot access it on their own. Completing everyday tasks such as emailing, paying online bills, or booking a plane ticket might not be possible without the aid of a screen reader.

Because of their importance, it is imperative that Software Engineers remain educated and mindful of screen readers as they build and shape the Internet. I hope that with this post I can help to remind the developer community of the responsibilities we share to make the Internet an inclusive and accessible environment for everyone. Kindly note that I am not covering all the ways HTML code affects a screen reader and this article is intended only as an introduction to the topic.

5 Ways Your HTML Code Affects A Screen Reader:

Alternate Text for Images

Screen readers can’t “read” images. Instead they read the alternate text provided through the HTML tag. This alternate text should give an accurate and clear description of the image’s contents. If there is no alternate text provided, the screen reader will read “graphic”. Not very user-friendly is it? Be sure to include a meaningful description of each image you include in a webpage.

Language

HTML allows you to specify the language your page is written in. This allows for seamless translation when your page is accessed in another country, or by a user with different language settings. If your page includes snippets of text from other languages, you’ll need to add another language tag surrounding the foreign snippet. This way, as a screen reader parses through your page it can read and translate the text into the appropriate language.

Semantic Structure

Screen readers will announce the text included in tags such as title or h1. Therefore, it is important to be strategic and mindful about what you are identifying as headers. Be sure that each of your headers throughout the page are valid and justify being read with emphasis. It is important to note that header tags should always be used - never tweak the size of the font or bold in place of a header tag. A screen reader looks for concrete HTML indicators to announce something as a heading so make sure to provide so.

The same applies for text within the body of the paragraph. While the strong (strong) and emphasis (em) tag will be picked up by the screen reader, the bold (bold) and italicize (i) tags will not be communicated to the user because they only have visual implications.

Links

Links are announced and read aloud for their entirety. This means that links with long text - more than a phrase or word - will often confuse the user and could result in them skipping the link all together. Additionally, links that are too short could prove difficult for a user to click on. Someone with a physical disability might use a screen reader as an aid, but use their mouse on their own. If the link is a single character, they might have trouble aiming the mouse perfectly over the link to click. Keep this in mind when deciding on the text that serves as a link.

Page Structure

When a human views a web page for the first time, they’re able to visually assess the page: general layout, color scheme, context, and route of navigation. A screen reader doesn’t have this luxury. Instead, each section of a page is read step-by-step in order top to bottom. Therefore, it is important that the layout of your page makes sense. Ask yourself - is all the content ordered in a way that would make sense if a user could only read top to bottom?

Now, take into consideration that the user can tell a screen reader to jump around to different parts of the page. Say I tell my screen reader to jump to the main context section, will the context here make sense? Is it actually the main section of the page? Additionally, are the navigation tabs across the page identified as navigation? When I ask my reader to go there will I understand the various links available to jump around the site? With these questions in mind, make sure that your page is organized in a way that makes intuitive sense to any user.

My inspiration for this post came from an article I found on Fast Company. The article tells a remarkable story about Michael Forzano, who has been working as a Software Engineer at Amazon since 2013. Michael was born with Norrie disease has been blind since birth. He relies on screen readers each day - at home and at the office. His story is incredibly inspiring and impressive. I encourage you to read and share the story with your colleagues.

I hope that we can all take a moment to reflect on the integral role Software Engineers play in a world which continues to rely more and more on the Internet each day. Because we shape a user’s experience on the web, it is critical we maintain these best practices to maintain a low barrier to entry, so that anyone may participate. By keeping screen readers in the front of our minds, we can ensure that everyone can benefit from the Internet.

Resources:
American Foundation for the Blind
WebAIM
Fast Company