Main image of article.
Main image of article.
Photo by Jesus Kiteque on Unsplash

When building a product, you may run into instances where you want to hide elements/content from the user. You can have elements:

  1. Semantically Hidden: This means the element can be accessed via keyboard navigation, is rendered on the screen but not exposed in the accessibility tree.
  2. Completely Hidden: This means the element is not accessible via keyboard navigation, is not rendered on the screen or exposed in the accessibility tree.
  3. Visually Hidden: This means the element is accessible via keyboard navigation, is exposed to the accessibility tree but not rendered on screen.

Techniques for hiding elements:

With this, sighted users are not able to see the content on the screen. This is because it is hidden to the left of the visible browser window. Screen readers, however, will be able to have access to it. …


The first rule of ARIA is “Do not use ARIA”. So, when do we get to use ARIA?

Image for post
Image for post
Photo by Neil Thomas on Unsplash

What is ARIA?

ARIA is an acronym that stands for Accessibility Rich Internet Applications, and from MDN Docs, they are a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.

It is designed to bridge the gap when HTML cannot sufficiently handle accessibility concerns.

This means the first solution to accessibility is to use semantic HTML. If that does not suffice, employ ARIA. MDN Docs continues:

Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists. …


This article shows how I improved the accessibility of a simple GitHub Timeline app I built.

A few weeks ago, I worked on a little GitHub Timeline project. When you enter a user’s username you can view a timeline of their public repositories in a chronological order — the most recent repo on top.

I chose a design, a colour palette, settled on React, and off I was to build my timeline app. Here’s a gif of how it eventually looked like:

GIF of how the app works
GIF of how the app works
GIF of how the app works

Everything worked perfectly, right? I ensured it was responsive, the font and colours looked okay, and I ensured there was feedback when a user wasn’t found or when a user existed but without public repositories. …


This article aims to show how to improve the performance of solutions implemented using Javascript arrays.

Photo of cheetah running
Photo of cheetah running
Photo by Cara Fuller on Unsplash

In my last article, I gave a brief of time complexities of some popular Javascript array methods. In this article, I will give three code examples of how to improve the performance in array solutions.

Below are examples of O(n^2) solutions (quadratic time) to common array problems. We will explore other options for solving with the aim of improving performance.

Problematic: For each element, loop through the array to see if there is another element like it. …


Image for post
Image for post
Photo by Luis Villasmil on Unsplash

This article aims to show how JavaScript arrays are implemented under the hood and explore the time complexities of common Array methods (i.e pop, shift, unshift)

Before we begin, here are some things we already know about Javascript arrays:

  • They are ordered.
  • Use numbered indexing (zero-based indexes)
  • Are dynamic.
  • Data can be stored in non-contiguous locations in the array, so no guarantee of it being dense.
  • Store multiple values in a single variable.

From a general view, these seem right as array properties, but to get more in-depth, Javascript arrays are constructed by the Array class, which is a global object, and arrays are referred to as high-level, list-like objects. …


Image for post
Image for post
Photo by Denisse Leon on Unsplash

This article shows how I went from having a nav bar without keyboard navigation, to having one in the recommended approach.

For this article, I am building a Hackerrank UI clone using React. I have a navigation bar, so far, and my goal is to make keyboard navigation possible.

This is what my navigation bar looks like at the moment:

Image for post
Image for post
Screenshot of UI navbar

As you can see, we have the Hackerrank logo and other items on the nav bar.

The React Component looks like this:

Screenshot of code without keyboard navigation
Screenshot of code without keyboard navigation
Screenshot of code

For a user who uses assistive technology or a user without a mouse, they would rely on keyboard navigation to move around the page. …


Written by June Barasa

Facebook Developer Circle’s from Eldoret is such a special lot of Engineers. So enthusiastic and excited for build day, they started popping in even before set up began. They deserve a medal.

Image for post
Image for post

At 2pm EAT checking in began, in our delirium we couldn’t wait to hear the ideas they had come in with to help solve problems in our society and bring us together as a community. The guests took their seats, from engineers to students to mere tech enthusiasts who wanted to learn something new from others. We had both familiar faces from other DevC Eldoret events to new faces. …


Image for post
Image for post

4 weeks after we launched, we held our second meet up. We were hosted by Apps Lab Ke, an Eldoret based incubator started by young programmers with a focus of providing solutions and creating awareness around emerging technologies.

May 26th was definitely a day to see the Eldoret tech community come together. Three tech events were being held on the same day and it was great to have the attendees converge in the afternoon for the Dev C Eldoret Meet up.

We started off with an overview of the updates from F8. Our lead, Gertrude talked through some of the highlights and we watched a short video on the same just to get to hear it from Mark himself. Gertrude also showed us highlights from other Dev C F8 viewing parties, including Dev C Nairobi. …


Image for post
Image for post

Web scraping is a method of extracting data from websites and the data is afterwards saved on a local resource i.e database.

Data displayed on a website can only be viewed and to get a copy of it you would have to manually copy and paste. Web scraping enables you to automate gathering data from a website.

For this article, we’ll use Puppeteer to scrape Quotes to Scrape, a site available for scraping practice. You will need to have knowledge of JavaScript/NodeJS.

Create a folder and name it puppet. Install Puppeteer:

npm install puppeteer

Create a file and name it scrape.js and add the…


On the 28th of April 2018 Facebook launched Developer Circles in Eldoret at Sirikwa Hotel.

Image for post
Image for post
One, because this was our first :)

Attendants started showing up way before the scheduled event time, so eager to learn and interact with others. Making their way from near and far, we had people traveling from different parts of Kenya to be part of the event. We also had a variety of engineers in the tech industry from Android developers to Web developers, the whole wazoo came to share and learn, it was a full house.

Image for post
Image for post

The event kicked off with an ice-breaker, to break the ice? Lol. We played charades and this got rid of the tension that was in the room earlier, and made the air much more friendlier for everyone to open up to each other. …

About

Gertrude Nyenyeshi

Engineering | Art | Design | Science | Lover of Dogs | VR Enthusiast | Community

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store