Forem: Jonathan Speek

Destructuring Arrays in JS

Jonathan Speek — Thu, 25 Mar 2021 08:11:21 +0000

A somewhat new tool in JavaScript is destructuring. Sounds scary, but after working with it a little it becomes less intimidating, I swear. Destructuring allows us to just take a few elements (also works with objects and you'll see it plenty in import statements) from our array and we can even rename them. Let's have a gander.

Let's make an array of trees and destructure to grab the first and second trees, separating them from the rest of the trees:

const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

const [tree1, tree2, ...otherTrees] = trees;

console.log(tree2);
> 'elm'

console.log(otherTrees);
> [ 'maple', 'aspen', 'walnut' ]

What we're doing here is creating a new variable that holds the element at index 0, setting it equal to tree1, doing the same with index 1 of our trees array, then spreading the rest of the trees into a new variable called otherTrees.

This also works for any number of elements you want to grab. Maybe you only want to create a new variable from the first element in the array. We can do that!

const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

const [tree1] = trees;

console.log(tree1);
> 'spruce'

We can also skip elements in the array. For instance, to grab the maple tree, we can just provide a comma for each element we want to skip:

const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

const [,,mapleTree] = trees;

console.log(mapleTree);
> 'maple'

One really cool use for destructuring is when you need to swap 2 elements in an array. Say we wanted to switch the spruce and elm trees positions in the array of trees:

const trees = ["spruce", "elm", "maple", "aspen", "walnut"];

[trees[0], trees[1]] = [trees[1], trees[0]];

console.log(trees);
> [ 'elm', 'spruce', 'maple', 'aspen', 'walnut' ]

Destructuring can be a little tricky, but the more you see and use it, the easier
it'll be to use in your own code. Be sure to take some time to explore uses in any codebase you're
working in, you might be surprised just how much it's used!

To dive deeper into arrays, check out my course Working with Arrays 🔥

The for loops in JS

Jonathan Speek — Thu, 25 Mar 2021 08:03:21 +0000

There are several different ways to loop through elements in an array. Most likely, you will see for, forEach, for..in, and for..of. These 4 (pseudo pun intended here) are often confused and that's what we are going to fix 💪

In many older codebases and code examples online, you will see the ubiquitous for loop used to iterate over an array. The typical setup initializes a variable i to 0 (because we want to start with the zeroth element). The second statement defines how many times the loop will run, most often you'll iterate over every element in the array - so i < array.length. And the 3rd statement increasing i on every pass. This allows us to access each element in the array by its index and perform something.

Here, we are just logging the score to the console:

const scores = [82, 89, 90, 94, 81];

for (let i = 0; i < scores.length; i++) {
  console.log(scores[i]);
}

> 82
> 89
> 90
> 94
> 81

In more modern codebases, however, you will see a mix of forEach, for..in, and for..of. The most common scenario you will encounter is that you want to iterate over every element in the array and execute something using that element. So which do you choose?

Let's start with a more concise version of what the for loop gives us. With for..of, we are able to quickly access each element without having to keep track of the index or worry about incrementing/decrementing the index.

const scores = [82, 89, 90, 94, 81];

for (const score of scores) {
  console.log(score);
}

> 82
> 89
> 90
> 94
> 81

With forEach, you have access to the index of the current element being iterated over, the element value, and the array itself. Sounds great, right? Well it is, and proponents of the Functional Programming paradigm greatly prefer this method of looping. forEach expects a synchronous function, so be aware of that when using async/await with it. You can’t use await in the body of this kind of loop and you can’t leave a forEach loop early. In for loops, we can use break. Do be aware of any mutations you may be making within the loop (if you use a return).

const scores = [82, 89, 90, 94, 81];

scores.forEach((score) => console.log(score));

> 82
> 89
> 90
> 94
> 81

The for..in loop is meant to be used with objects, not arrays. So if you use it with an array, you will likely get some unexpected output. This is because for..in is iterating of the enumerable properties of the object (at the end of the day, our arrays are objects).

const scores = [82, 89, 90, 94, 81];

for (const score in scores) {
  console.log(score);
}

> 0
> 1
> 2
> 3
> 4

Here's a basic rundown of when to use for..of vs for..in:

Now that we have a better idea of what the different types of for loops do, let's dive into some exercises to test our newfound knowledge!

In your browser, open up the developer tools to the console tab and console log the scores that are less than 90 using the classic for loop (not for..in or forEach):

const scores = [82, 89, 90, 94, 81];
// for() {} loop goes here

Now, console log the scores that are less than 90 using the forEach loop:

const scores = [82, 89, 90, 94, 81];
// forEach loop goes here

Next, console log the scores that are less than 90 using the for..of loop:

const scores = [82, 89, 90, 94, 81];
// for..of loop goes here

Lastly, console log the index of the scores that are 90 or greater (≥ 90) using the forEach loop. Hint: the second argument is the index apples.forEach((apple, index) => { console.log(index) }):

const scores = [82, 89, 90, 94, 81];
// for loop goes here

Final note on iterating over arrays

Remember when I told you that forEach is expecting a synchronous function? Well we can also use that to our advantage when we don't want to explicitly iterate over an array's elements one-by-one. For longer running loops, you'll see the benefit of using forEach vs reaching for for..of

Let's take our scores and loop over them using forEach. If we pretend that we have some longer running code in there using async/await, you'll notice that the console.log(score) doesn't wait for it. This can be a useful tool to take advantage.

const scores = [82, 89, 90, 94, 81];
scores.forEach(async (score) => {
  await new Promise((resolve) => setTimeout(resolve, 500)); //fake long running code
  console.log(score);
});

To contrast, for..of will wait for that longer running code to finish before moving on to our console.log(score):

const scores = [82, 89, 90, 94, 81];
for (let score of scores) {
  await new Promise((resolve) => setTimeout(resolve, 500)); //fake long running code
  console.log(score);
}

These are basic examples of running in sequence versus running in parallel. If you're needing to run in sequence, reach for for..of in this case. If you are able to run in parallel (you don't need to wait for that longer running process), try using forEach instead.

For more information on the asynchronous version of for..of, see this post on for await..of 👀

To dive deeper into arrays, check out my course Working with Arrays 🔥

Getting started with web accessibility

Jonathan Speek — Tue, 19 Nov 2019 17:00:55 +0000

All too often, we find ourselves as makers overlooking and undervaluing an essential aspect of the web: accessibility. We spend a lot of time and effort focused on building out features and functionality, but can everyone use those features?

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. –Tim Berners-Lee

Web accessibility isn't about checking some boxes, and it's not something that can be fully learned in a weekend workshop. Accessibility is a skill that is developed with time, experience, and empathy. It's about thinking outside your own experiences to craft solutions that work for everyone. Accessibility isn’t binary, it exists on a spectrum and we want our products to be on the “more accessible than not” end.

We all have to start somewhere on our learning journey, so my aim is to help you get going with some great resources.

Back to basics

Before even addressing accessibility basics, it’s a good idea to reacquaint yourself with proper semantic HTML. Regardless of what framework you’re in, writing good HTML is important (there’s a reason all those tags exist). What are landmarks and what is the benefit of using them? What can you replace your 4,000 <div>‘s with to be more explicit? You’ll often find that semantic HTML makes for more organized and readable code in the long run.

Study up

Just as you once approached learning to code in the first place, a great way to learn some accessibility basics is by finding resources in whatever medium you learn best. Here are some great resources that helped me:

Accessibility for Everyone book by Laura Kalbag
Design for Real Life book by Anil Dash
Inclusive Components book by Heydon Pickering
Accessibility for Web Design course on Lynda by Derek Featherstone
A11ycasts with Rob Dodson on YouTube
Google's Web Fundamentals guide on Accessibility
Web Accessibility course on Udactiy by Google
MDN Accessibility docs by Mozilla
Accessibility Fundamentals by W3C
Web Content Accessibility Guidelines (WCAG) 2.1

You might also find it useful to see some applied accessibility in more digestible contexts. I'd suggest searching for "accessible" on codepen.io and playing with some of the examples there. In the same way you've learned programming techniques from looking at other's solutions, you'll find it equally valuable to see various approaches to web accessibility.

Accessibility tooling

Once you have some of the basics of accessibility under your belt, you'll want to grab some handy tools that make your job easier and help build healthy habits. This is not meant to be exhaustive, but these are some tools I use on a day-to-day basis that I've found super helpful:

Sim Daltonism - Mac app that overlays anything on your desktop to give you various color blindness perspectives (this is my favorite app)
Stark - contrast checker and color blind simulator for Sketch, Figma and Xd
Funkify - extension to experience the web through the lens of users with different abilities and disabilities
Hemingway App - for assessing grade level readability of your copy and content
High Contrast extension by Google to help simulate how your app/site responds to Windows High Contrast Mode
Accessibility Insights for Web - extension by Microsoft with both manual and automated accessibility checks that generates a detailed report (perfect for aiding in an internal audit)
Chrome DevTools (checking color contrast) - DevTools has a way to check color contrast of an element against its background, even supplying a WCAG rating
Throttle the network - in DevTools, you can throttle the network to see how others in emerging countries or remote areas may experience your product
VoiceOver - the built-in screenreader for Mac will help you more clearly understand the importance of semantic HTML
NVDA - a free screenreader for PC (alternative to JAWS)
Color contrast checker by WebAIM - a great way to assess contrast ratios and play with values
Lighthouse by Google - automated tool for improving the quality of web pages (including accessibility)
Firefox Accessibility Inspector - Jen Simmons walks you through some basics of using Firefox's built-in tools

Tl;dr

Building things that consider everyone is our responsibility and should be taken seriously. Familiarize yourself with the basics of web accessibility and apply it in your everyday design and development. As with any skill, you'll get better with practice and experience - soon finding yourself building with an accessibility mindset.

How to make your fancy SVG button accessible

Jonathan Speek — Thu, 23 May 2019 19:16:29 +0000

You may very well find yourself one day having to build some crazy button a designer dreamed-up. You might start reaching for that good old <div>, but easy there big-shifter 🚚 — let’s try and use that <button> element you’re avoiding 😬

We’ll start by simply grabbing the code for an SVG icon that we want to use. I quickly made a Chemex icon you can use here (I love me some coffee ☕️). Paste that between a <button> tag in your HTML like so (the SVG code will be pretty lengthy).

We want this button stripped of its default styling, so let’s give the button an “id” and we’ll target it with some CSS.

Give the button a good width/height that is larger than our SVG — this will help the visibility of the outline. Speaking of, make sure the contrast ratio between your outline color and the background color passes this. Get rid of that pesky border and background, make sure the cursor is set to pointer.

At this point, you have a clickable button that, when clicked, shows the default outline your browser has chosen for focus states. Let’s change that and make it better.

Now when we click or tab to our button, we get a cool little dashed outline that lets us know where we’re focused.

We also want to ensure that the SVG itself does not get an outline if clicked. And we want to make certain Firefox doesn’t add its default dotted outline. While we’re at it, we can give the SVG a little hover effect.

Now we can get to the cool parts 😎 We don’t want to annoy or confuse our screen reader users with our button. So we need a good short description of what to expect. You would also typically want visual users to have an idea of what it is they’re clicking on as well, for now let’s keep ’em guessing...

We can easily achieve this by putting a <span> element around the text in our button and styling it out of view. Make sure not to set display to “none”, as this will also prevent our screen readers for accessing it.

Lastly, let’s make sure we’ve:

hidden the SVG from anyone using assistive technology and
set the tabindex to “0” so that the browser uses the expected tab order for any keyboard users.

You should now have a really accessible button that you can be proud of 💥Besides patting yourself on the back — do it now — going forward you now have some reusable patterns that you can implement that help make the web just a little more accessible 😘

Here’s a link to the CodePen example, feel free to fork your own copy 🍴

Thanks for reading. If you have some knowledge to drop on accessibility, be sure to leave a comment!