DEV Community: Epicosity

WCAG Accessibility Guidelines and Tools

Elise Gaetz Ferguson — Mon, 02 Mar 2020 18:16:50 +0000

WCAG guidelines for web accessibility from the W3C

I’ve been working on compiling some information for my company about accessibility, testing, compliance, etc. In the process I was looking for a cross reference of which automated tools checked which specific guidelines. Being as at most automated tools can only cover about 25% of accessibility issues on a website I wanted to know which guidelines might need manual attention.

Seems like a pretty obvious request? At least I thought so. But even with my mostly “OK” google-fu I did not find what I was looking for. So I ended up creating my own.

Of course this isn’t a definitive guide. I only have a handful of tools listed. Basically I found the listing for each of the tools and slapped it on a spreadsheet. So this should be fairly accurate at least according to what each automation tool says they check. Your mileage may vary of course. You should be able to do some filtering by various columns to make this data useful to whatever project you’re working on.

Google spreadsheet

So give it a try and let me know if this was at all helpful in your accessibility adventures!

Craft Troubleshooting Round Up

Elise Gaetz Ferguson — Tue, 25 Feb 2020 19:27:31 +0000

So my new mantra is that if something takes me more than a few minutes and a google search to solve, then someone else out there might benefit from me posting the results of my troubleshooting. These things typically aren’t big enough for individual blog posts so they’ve been going on my personal Instagram so far. But I will round them up here for your benefit, lucky you!

Honeypot field in Craft CMS Freeform Forms

I was working on accessibility for a site that was using Craftcms Forms plugin. I’ve submitted this to Solspace and they’ll be updating it in a future release but until then …

Basically the form was not passing accessibility checks for the honeypot field and needed a tabindex of -1 added. So line 632 or so in the plugin I’ve added the code shown below and bam, we pass the accessibility tests.

When “entry” doesn’t exist on the homepage

Occasionally when we run some of the Craft CMS updates the homepage there’s an “entry does not exist” error. Depending on the update some of the settings on the homepage section may have changed and require some attention. In this case, we just needed to recheck the “home” icon in the site settings.

Solspace Calendar not showing repeat toggle

Finally, I had a request to add the ability to repeat an event using Solspace Calendar plugin. Well, what’s going on here? I have other sites using the same plugin that allow repeating events, why isn’t this one? Well, we had just run the latest update that included a new “lite” version of the plugin. Apparently the lite version does not include the repeat toggle so we just need to go into our plugin page and switch from the “lite” version back to our “pro” version that matches our license key.

Well I hope some of these things help you out! Stay tuned, there’s bound to be more troubleshooting around here.

Baby Steps into Adobe XD for Front End Development

Elise Gaetz Ferguson — Wed, 16 Oct 2019 13:01:02 +0000

The last big site I developed was designed by a new designer on our team. And when someone new joins the team that means new ideas. So we gave Adobe XD a try instead of the old standard, Photoshop. Of course as it usually goes in development, there wasn’t time for any official training so it was baptism by fire. Who am I kidding? That’s how we learn best, right?

Welcome to Adobe XD one baby step at a time

So this is just barely scratching the surface of using XD for front end development. We haven’t even begun to get into components and libraries and all that good stuff. Let’s see what baby steps I discovered while working on this site.

Selecting Graphics — If you drag the mouse and draw a marquee you can select the graphic you are interested in exporting. If there’s more than one layer on this graphic that needs to be exported, group these items together with Command-G or from the menu, Object > Group.

Once the graphic is selected and grouped then we can export it with the menu option of File > Export > Selected or Command-E. The export dialog gives you a variety of file types and qualities for export.

To create a spec sheet in the browser

Share for Development — This is a useful tool. If you go to the upper right of the XD window and select the “Share” button and choose “Share for Development” XD will generate a webpage, with or without exported images, that has all sorts of good information.

Click the “code” icon to reveal all sorts of good information

This spec sheet lists fonts, sizes, colors, and layout properties for all the elements that were on the XD file.

CSS layout properties

Simply select an object and the information will be displayed to the right.

Selecting a color block will automatically copy the Hex color to your clipboard. And selecting a font specification in the right pane will automatically copy the font information to your clipboard.

Measure Distances — Finally, XD makes it easy to measure the distance between objects.

While in the XD file itself: If you select an object, hold the “option” key, and move the mouse over another object, you will see the distance in pixels displayed.

While in the web spec sheet: Hover over an object and the relative distances will be displayed.

Measuring distance between objects

Like I said, I only just scratched the surface of how to use XD for Front End Development but I’m looking forward to learning more.

Trello Automations for Workflow

Elise Gaetz Ferguson — Wed, 25 Sep 2019 13:01:07 +0000

Now that 2/3rds of our development team is at least partially remote our white board of project status is a little less useful so we turn to Trello to help track what’s going on.

Our basic set up has lists for: projects/launch dates, backlog/waiting, a list for each developer, “in proof”, and completed. But the real fun comes with some automations.

Power Up — Custom Fields

We set up a few custom fields using the aptly named power up. The one we use the most is “completed date”. We’re frequently asked “hey, what did you guys do this week?” and being able to filter by the completed date is helpful for throwing together a quick report.

Power Up — Butler

If you have the ability to add multiple power ups, our next choice is Butler. You can do so many things with Butler.

Auto complete date (and remove complete date)

One of the Butler rules we have set up will automatically add the current date to the custom field “completed date” if someone moves a card to the Completed list. And conversely it will remove the completed date if that card is removed from the list.

Butler task to add a completed date

Butler task to remove the completed date

Auto assign card

The second automation we have set up will automatically assign a user to a card when it’s added to their list. If you have notifications set up, the users will get a reminder when a card is assigned to them.

Butler task to assign cards

We’re just getting started seeing what Butler can do for our Trello workflow and look forward to discovering more helpful automations.

ES6: destructuring

Tony Nguyen — Wed, 18 Sep 2019 13:01:02 +0000

Destructuring is a JavaScript syntax that allows us to assign to variables, data from arrays and iterables, like objects. Let’s first look at using the destructuring syntax on objects.

Destructuring Objects

In ES5, you would assign properties to variable by individually assigning the value of your object property to the variable.

ES5

var band = {
  name: 'Silent Planet',
  genre: 'Metalcore',
  albums: ['The Night God Slept', 'Everything Was Sound', 'When the End Began']
}

var name = band.name;
var genre = band.genre;
var albums = band.albums;

With ES6 destructuring you can reduce that those assignments as long as the variable name that you are assigning a value matches the property name like below.

let band = {
  name: 'Silent Planet',
  genre: 'Metalcore',
  albums: ['The Night God Slept', 'Everything Was Sound', 'When the End Began']
}

const { name } = band;
const { genre } = band;
const { albums } = band;

You can shorten up the syntax by combining all the variable assignments into one:

const { name, genre, albums} = band;

Tthe above syntax will only work if the variable names match the names of the properties you are trying to destructure. If the variable names do not match you can still perform the destructuring assignment with this syntax:

const {name:var1, genre:var2, albums:var3} = band;

console.log(var1); // Silent Planet

Notice that the property name on the left and the variable name on the right. You can think of this as you are taking the property value -> variable. Left to right assignment.

Destructuring Arrays

In ES5 in order to extract data from an array you would need to access the array in by getting the value of the item at a certain position in the array:

var exampleArray = [1, 2, 3];

var val1 = exampleArray[0];
var val2 = exampleArray[1];
var val3 = exampleArray[2];

With the destructuring assignment syntax you can now just write one line to get all values you need the above array;

let [val1, val2, val3] = exampleArray;

console.log(va1, val2, val3); // 1 2 3

Destructuring an array looks a lot like when you are destructuring an object but you just replace the curly braces with brackets.

You can also skip values while using the destructuring syntax if needed:

const someArray = [4, 8, 15];

const [first,,last] = someArray;

console.log(first, last);// 4 15

If you need to you could use the rest syntax, which we learned about in my prior blog post, to extract all the items remaining in the array into a new array.

const someOtherArray = [4, 8, 15, 16, 23, 42];

const [first, second, ...third] = someOtherArray;

console.log(first); // 4
console.log(second); // 8
console.log(third); // [15, 16, 23, 42];

Functions Arguments

One last common use case for destructuring is passing in an object as a functions arguments. Below we have a function that takes in an object with the attributes of a vehicle.

const someFunction = car => {
  const { make, model, yearBuilt } = car;
  return make;
} 

let car = {make: 'Ford', mode: 'Escort', yearBuilt: 1993};

someFunction(car); //Ford

You can use destructuring on your object that was passed into the function. the syntax inside the function body is the same pattern as we have been using throughout this post. However, there is a slightly different, and shorter way to do this below:

const someFunction = ({ make, model, yearBuilt }) = {
  return make;
}

You can destructure the object properties out into individual variables right inside your function parameters.

Thank you for reading and I hope this post helps you use destructuring inside your own code.

ES6: default, rest, and spread.

Tony Nguyen — Thu, 12 Sep 2019 13:01:01 +0000

ES6 added syntactic sugar to help us write code that is both cleaner and more concise. Today I am going to talk about the feature: default parameters, rest parameters and the spread operator.

default

In JavaScript, if not value is passed into a function the the parameter(s) will default to undefined. The default behavior of setting function parameters to undefined can cause error in your functions and this is where default parameters comes in play.

Default function parameters are used when you need named parameters to be initialized with a value when no value will be passed or when the value of the parameter is undefined. Let's take a look at an example of when you might want to use default function parameters.

Below is an example of a generic increment function. The function takes in two values and adds them together. The first parameter is the initial number and the second is how much we need to increment or add to that initial number.

function increment(number, increment){
  number + increment;
}

increment(2, 5); // 7

Let’s make our function a little more flexible with default function parameters. Suppose you want that if the user does not input a second parameter for increment parameter, that the function would still run and increment the initial number by one. Let’s try that out with ES5 syntax:

function increment(number, increment){
  if (typeof increment == 'undefined' ) increment = 1;
  return number + increment;
} 

increment(1, 2) // 3
increment(1) // 2

We wrote a conditional to check if the increment parameter was undefined, and if it was undefined we assigned the value of 1 to the increment parameter.

With ES6 syntax you can check for undefined named parameters without using conditionals you needed with ES5. Here it is below:

function increment(number, increment = 1){
  return number + increment;
} 

increment(5,5); // 10
increment(5); // 6

Instead of writing a conditional in the body of your function, you can just add an equals sign after the parameter you wish to reassign in the case that it is not provided a value. Now not only will your code be more flexible, but you have a more concise function that is easier to read and less prone to error.

rest and spread

The rest and spread operators look identical but perform different operations. Both use the three dots ... syntax but rest is used for condensing and spread is used for expanding.

rest

The rest operator is used to condense a group of elements down into a single array.

Let’s create a function that adds three numbers together using the reduce array helper function.

If you need a refresher on how Array.reduce works check out my last blog post on Array Helper Methods.

function add(x, y, z){
  let numbers = [x, y, z];

  return numbers.reduce((acc, number) => {
    return acc + number;
  }, 0);
}

add(1, 2, 3); // 6

The above function works fine when there is a limited number of arguments, in this case only three number can ever be added together. What happens if you were to pass in a fourth or a fifth argument?

add(1, 2, 3, 4, 5); // 6

The function, written as it was above, will only accept the first three arguments passed into the function, and will just ignore the rest. So the result is still 6 even though there were additional parameters were passed in.

Using ES6 rest, we can make the function much more flexible. Now, with rest, the add function can take in an indefinite amount of parameters and return a single result.

function add(...numbers){
  return numbers.reduce((acc, number) => {
    return acc + number;
  }, 0);
}

add(1, 2, 3, 4, 5); // 15

add(2, 4, 6, 8, 10); // 30

Now you can run the add function with as many parameters as you need.

When you use ...numbers a new array named numbers is created and all the arguments passed into the add() function will be pushed into this array. After all the parameters have been read into the numbers array, the function will continue now running .reduce on the numbers array.

spread

Where the rest operator is used to condense elements into a single array, the spread operator is used to do reverse. Spread is used to turn an iterable, like a String or an array, into its individual elements.

Let’s see how it works by using spread for concatenating arrays. First we’ll look at how it’s done in ES5 before we rewrite it using the ES6 spread syntax.

// ES5 array concatenation

const array1 = ['Cersie', 'Jaime'];
const array2 = ['Tyrion'];

const combinedArray = array1.concat(array2);

console.log(combinedArray); // ['Cersie' 'Jaime', 'Tyrion']

In ES5 we had to create a new array and run the Array.prototype.concat()method on one array and passing in another as an argument.

With ES6 spread you can just use the spread operator by placing ... in front of both arrays inside the [] brackets to concatenate the arrays.

// Array concatenation with spread
const array1 = ['Cersie', 'Jamie'];
const array2 = ['Tyrion'];

const lannisters = [...array1, ...array2];

console.log(lannisters); // ['Cersie' 'Jaime', 'Tyrion']

When you see ... in JavaScript code you can tell the difference between rest and spread by these general rules.

If the syntax is used in function arguments of a function declaration or expression then it is the Rest parameter syntax.
Otherwise it is the Spread operator.

Displaying an RSS Feed in CraftCMS

Elise Gaetz Ferguson — Wed, 10 Jul 2019 15:45:30 +0000

CraftCMS doesn’t appear to have a built-in way to display RSS feeds and more often than not, clients want to display their recent or related blog posts on their main website.

The first thing we did to tackle this challenge was install the Craft RSS plugin by Guilty AS.

The GitHub page for the plugin has an example of how to display the RSS feed in your templates and it’s pretty straight forward.

{% set blogFeed = craft.rss.loadRss(“https://helgesverre.com/blog/feed") %}
{% if blogFeed %}
<h1>{{ blogFeed.title }}</h1>
<a href=”{{ blogFeed.link }}”>{{ blogFeed.link }}</a>
<ul>
{% for post in blogFeed.item %}
<li><a href=”{{ post.link }}”>{{ post.title }} — {{ post.pubDate }}</a></li>
{% endfor %}
</ul>
{% endif %}

Just plug in your RSS Feed URL and off you go.

Naturally you’ll want to arrange the results of the feed in a way that best matches your site’s design.

You are might want to limit the number of posts you are showing. To do that we set a counter = 0 at the beginning of the block (line 2 below). Then before each “for post in blogFeed.item” loop we check if the counter is less than the number of posts we want to show (line 9). Right before the end of the loop then increment the counter with a +1 (line 17).

{% set blogFeed = craft.rss.loadRss(block.linkUrl) %}
{% set counter = 0 %}
{% if blogFeed %}
<h1>{{ blogFeed.title }}</h1>
<a href=”{{ blogFeed.link }}”>{{ blogFeed.link }}</a>
<ul>
{% if counter < 3 %}
{% for post in blogFeed.item %}
<li>
<a href=”{{ post.link }}”>{{ post.title }} — {{ post.pubDate }}</a><br/>
<span>{{ post.description | raw }}</span>
</li>
{% set counter = counter + 1 %}
{% endfor %}
{% endif %}
</ul>
{% endif %}

If you want to make this a little more flexible you could create a field in Craft to take in the URL of the blog feed, either per entry or as a global.

If you really want to get fancy you could create several different type of display options (card, list, etc) and let the user choose how they want to display the information.

ETA: I recently came back across this article while adding a feed to a client’s site. Turns out the code was a little incorrect and very annoying to not be able to copy and paste so I’m fixing those issues. You may also have to look at your feed directly to figure out what things you can pull in, in this example we had to pull in the full description as raw text rather than html in order to get the image and excerpt.

Set up Gulp to do “all the things” for your front end

Elise Gaetz Ferguson — Wed, 19 Jun 2019 13:01:01 +0000

Recently I set out to see if I could get gulp to do all my front end “things” for me automatically. I had previously been using the VSCode task runner to transpile my scss or less files. But occasionally I’d run into issues on sites where another developer (or even myself at a previous time) had forgotten we were using a pre-processor and edited the main CSS file instead. And then we just end up with a mess between the pre-processor files and the transpiled files not being in sync. So why not minify? It’s good for site performance and if a developer opens the CSS file they will notice right away that it’s minimized and go look for the less/scss. And heck if I’m doing that why not add in an autoprefixer? And it’s always nice to have a sourcemap file to make it easier when you’re inspecting in the browser.

Install all the things

First things first. VSCode has a little bit on how a person might want to automate some processes and the first step is installing gulp.

Once you have gulp installed you’ll want to install the following other pacakges:

gulp-less

gulp-sass

gulp-clean-css

gulp-sourcemaps

gulp-autoprefixer

Create a Gulp Task

Now it’s time to create your tasks. You’ll want to create a file called ‘gulpfile.js’.

Require all the things

First in your gulpfile.js you will need to require all these nifty packages that you just installed:

A list of the packages you need to require in your gulpfile.js

Where do the things go?

Follow that up with a couple variables which will hold your source and output locations for your front end files:

File locations for your sources and outputs

Optional Options

Optionally you might want to define some options:

Sass and Autoprefixer options

Sass Task

Now we need to set up a task to deal with sass files:

Sass Task

Let’s go line by line and see what’s going on here (this will be similar to the Less task further down the article).

First, we initial the gulp task and give it a name of ‘sass’.
After the return statement comes the real work:
We use our ‘sassinput’ variable to define where we want the gulp task to get the source files from, in other words, where are you storing your .scss files?
Next we initiate the sourcemaps package
Followed by calling the sass package and utilizing any of the options we might have set up and logging any errors
The autoprefixer and it’s options come after we transpile the sass, this will simply add some browser prefixes to your final CSS to help with backward compatibility.
And now we are going to minify the resulting CSS, this example shows the debug options and prints out the starting and ending size of the CSS in the console for your reference.
Next we write our sourcemap file and in this case we’re saving that in an additional directory called ‘maps’ located in the CSS directory
And finally we write all these changes to our defined output location.

After all that you should end up with a nice minified, prefixed CSS file as well as a sourcemap file.

More for Less

Maybe you use less instead of sass, or you want to have both set up just in case:

Similar to the Sass above

The Less tasks varies only in the input variable ‘lessinput’ the less package (line 5), and the name of the task (line 1).

Watch the Things

Now that you have these tasks set up you can do a couple of different things.

You can use VSCode to run these tasks with the built in task runner (check out the VSCode documentation for that)
You can use gulp to automatically watch for changes to your source directory.

Watch tasks for gulp

The first watch tasks watches for changes in the ‘sassinput’ directory and runs the ‘sass’ tasks if it sees your files change. And the second does the same for the ‘lessinput’.

Let’s get running!

To run this watch task:

Save this new ‘gulpfile.js’ to the root directory of your local web project
In a terminal, or even more handily, in the terminal tab of VSCode, type ‘gulp watchsass’ or ‘gulp watchless’ (depending on what you are working on at the time).
The tasks will watch your directory for changes and run all the fancy code you just wrote to transpile and minify your CSS every time you make a change and save it.
And if you want to stop the task, a simple Ctrl-C will take care of that.

VSCode terminal showing the gulp task running

Code all the things!

Now that you have everything set up, go forth and code all the things, save your file and rest easy knowing gulp is handling all the nit picky stuff for you.

What automated tasks have you added to your gulpfile, I’d love to hear?

Working Remotely … When Your Team is in the Office

Elise Gaetz Ferguson — Wed, 12 Jun 2019 13:01:01 +0000

Working Remotely … When Your Team is in the Office

This is a popular topic these days with more and more businesses allowing employees to work remotely. There’s even a growing number of fully-remote companies. I’ve spent over the last 10 years working remotely for both traditional in-office companies as well as fully-remote companies. I’m currently one of the few remote employees in a traditional in-office company.

Of course the things you hear from everyone work: have a designated work area, take breaks, get dressed/ready for the day like you were working on site, etc. But here are a few more tips I’ve gathered from doing this for so many years.

Do Work

Use Tools : Trello, Skype, Slack etc all of these tools help keep your team organized and in contact while allowing a remote employee to participate easily. A whiteboard list of tasks is great for in-office employees but moving that to Trello (or something similar) will allow the team to view the task list from wherever they happen to be working.
Test Technologies : Ensure ahead of time that video conferences/Skype calls are as easy as pie. Can you hear? Can you see? Can they hear you and see you? It’s important to make sure all this works right off the bat rather than missing out on important meetings due to a crumby microphone on someone’s laptop.
Video Conferences : Consider having meetings where all employees (in-office or not) are on video conference. We have twice weekly check-ins that work well without the need for everyone on video but there are times when everyone on video would work better particularly with remote client meetings.

Share All the Details: Make sure any video conference links and phone numbers are readily available in the calendar invites so there’s no question on how to connect to the meeting in the minutes before the meeting.
Get Involved : I find that contributing to things like documentation, process improvement, and company intranet help solidify your role on a team. As a remote employee I don’t have the random interruptions during the day and I find that I might have a little extra time to keep track of steps/documentation as I work which can be shared with the rest of the group.
Schedules : Keep your schedule on a calendar the whole team can see. What are your normal working hours, lunch break, vacation days. Team members will need to know your schedule so they aren’t waiting for a reply when you aren’t around to answer.
Get Backup Work : Make sure you have something to work on as backup if you are waiting for a response from a team member. A remote employee can’t stalk a coworker’s desk like you could if you were in the office so you’ll want to make sure you have something productive to work on if you need to wait for a reply. And make sure you follow up to get the information you might be waiting for.
Speak Up : Make sure, as a remote employee, you speak up in group meetings. If you find it’s difficult to break into conversations in meetings, see about having your team add a meeting facilitator that will ensure everyone has an opportunity to speak without having to deal with lag and interrupting conversations.
Video Examples : Make videos (VidYard, etc) to record examples if you can’t talk to someone live. Do you need to show a team member how to access some information? Is there a bug you’d like to show someone but can’t do it in person? A quick video is worth 1000 words, right?

Get Social

Get to the Office : Visit the office when possible and attend team building activities in person. It’s important to feel like part of the team both in the production aspects as well as the social aspects.
Get Musical: We’ve started a group playlist on Spotify that in-office and remote employees can listen to and help curate.
Get Creative : Participate in events digitally when in person isn’t possible. When our company does events like specific dress up days I try and dress up and take a photo to share. Get creative and try to participate as much as possible even when not in the office.

Experiment

Things to Try: There’s a few tips I haven’t tried yet but would be open to experimenting with such as having accountability partners, using a stand-up meeting bot like howdy for slack, and starting photo sharing channel in our slack group.

Are you one of the only remote employees at a traditional in-office company? What are your tips for making it work?

JavaScript Array Helper Methods

Tony Nguyen — Wed, 05 Jun 2019 13:01:01 +0000

JavaScript provides a great deal of array methods to help with the manipulation of data. Below I will go over the array helper methods, and why you should use them over the traditional for loop.

forEach

The forEach helper function iterates through every item in an array, and runs a provided callback function once on each of those items. forEach essentially replaces the for loop. Let's look at how to use the forEach array helper.

// using a for loop
const numbers = [1, 2, 3, 4, 5];

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

// Output
// 1
// 2
// 3
// 4
// 5

Let’s refactor this using a classic function declaration.

numbers.forEach(function(number){
  console.log(number);
});

// 1
// 2
// 3
// 4
// 5

What’s happening above is we are using forEach to iterate over the numbersarray. Each time forEach reads a value from the numbers array it will run the callBack function on the current value. The callback function will then run console.log() on the current value. It looks something like this.

// Iteration 1: console.log(number[0]) => 1
// Iteration 2: console.log(number[1]) => 2
// Iteration 3: console.log(number[2]) => 3
// Iteration 4: console.log(number[3]) => 4
// Iteration 5: console.log(number[4]) => 5

The exact same thing that the for loop does just with much less code.

Quick note. I, and many others prefer using array helpers with arrow functions and the following examples in this post will be using ES6 arrow function syntax with the array helpers. If you would like a refresher on arrow functions check out my blog post here.

// using forEach with arrow
numbers.forEach( number => console.log(number));

Using the forEach, above we console.log() each value inside the numbers array. As you can see, the function is much shorter and performs the same operation.

Remember — the forEach callback is that it can also take in a second parameter, index. This will keep track of the current index of the number.

numbers.forEach((number, index) => console.log(`Number: ${number} is at index: ${index}`));

// Number: 1 is at index: 0
// Number: 2 is at index: 1
// Number: 3 is at index: 2
// Number: 4 is at index: 3
// Number: 5 is at index: 4

You might be wondering what the syntax is inside the console.log above. I am using template literals, another awesome feature in ES6. If you don't know what they are, check out this post about the topic here

map

The map helper is one of the most useful array helpers there is. Like forEach, the map helper iterates over an array running the callback function on each element as it iterates through the array. Map differs in that it will return a new array where the value of each element is the returned value of the callback function that was provided to the map helper. Map is used when you want to perform data manipulation without mutating the original data set.

The map helper below returns a new array that contains the square of each value in the numbers array.

const numbers = [1, 2, 3, 4, 5];

// using a for loop
const squared = [];

for (let i = 0; i < numbers.length; i++){
  squared.push(numbers[i] * numbers[i])
}

console.log(squared) // [1, 4, 9, 16, 25]

// using map
const squared = numbers.map(number => number * number);
console.log(squared)// [1, 4, 9, 16, 25]

filter

The filter helper iterates over the array and returns a new array that will contain the values that are returned true when passed through the callback function. The callback function in the filter helper can be thought of as a testing function.

Let’s use the filter helper to return an array containing all of the even values from inside the numbers array.

const numbers = [1, 2, 3, 4, 5, 13, 14, 21, 20];

// using a for loop
const filtered = [];

for (let i = 0; i < numbers.length; i++){
  if (numbers[i] % 2 === 0) {
    filtered.push(numbers[i])
  }
}

console.log(filtered); // [2, 4, 14, 20]

// using filter 
const filtered = numbers.filter( number => {
  if (number % 2 === 0){
    return true;
  }
});

console.log(filtered); // [2, 4, 14, 20]

find

The find helper returns the value of the first element in the array to pass the test in the provided callback function. Below, we will use find to get the first value in the numbers array that is greater than 10.

const numbers = [1, 2, 3, 4, 5, 10, 13, 14];

// using a for loop
let answer;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10){
    answer = numbers[i];
    break;
  }
}

console.log(answer); // 13

// using find
const answer = numbers.find( number => number > 10);

console.log(answer); //13

some

The some array helper will return true if at least one element in the array passes the test in the callback function.

const numbers = [1, 3, 4, 5];

// using a for loop
let evenNumber = false;

for (let i = 0; i < numbers.length; i++){
  if(numbers[i] % 2 === 0) {
    evenNumber= true;
    break;
  }
}

console.log(evenNumber); // true

// using some
const evenNumber = numbers.some( number => {
  if(number % 2 === 0) {
    return true;
  }
});

console.log(evenNumber) // true

every

The everyarray helper will return true only if all of the elements in the array pass the testing function. We will use this function to check if all of the values inside the numbers array are less than 10.

const numbers = [1, 2, 3, 4, 5];

let isLessThanTen = true;

for (let i = 0; i < numbers.length; i++){
  if(numbers[i] >= 10) {
    isLessThanTen = false;
    break;
  }
}

console.log(isLessThanTen); // true

let lessThanTen = number => number < 10;

// every helper
let isLessthan10 = numbers.every(lessThanTen); 

console.log(isLessthan10); // true

reduce

To oversimplify the reduce function, you can use the reduce helper to transform an array of values into a single value. Some would say that the reduce helper can be used to get the essence of a set of data. We will use reduce to sum up all of the values in the numbers array.

const numbers = [1, 2, 3, 4, 5];

// using a for loop
let sum = 0;

for (let i = 0; i < numbers.length; i++){
  sum += numbers[i];
}

console.log(sum) // 15

// reduce helper
numbers.reduce((sum, number) => sum + number, 0); // 15

So, the reduce helper is executing the callback function on each iteration and produces a single result at the end. In the example above that value is sum.

The reduce helper method can take in 5 arguments:

accumlator
currentValue
currentIndex
array
initialValue

array.reduce(function(accumlator, currentValue, currentIndex, array), initialValue)

The accumulator and currentValue are required, while the other three arguments are optional. On each iteration, the reduce helper first checks to see if an initial value has been passed into the function. If an initial value has been passed in, then the accumulator's value is set to equal the initial value. If no initial value has been passed in, then the accumulator will be set to the value of the element in the provided array.

In the code above, we use the accumulator, currentValue, and initialValuearguments to sum up the values inside the numbers array. To better understand how reduce works, let's walk through each iteration.

If the initial value argument has been passed in, then the function will set the accumulator sum to be equal to the initial value. We pass in an initial value so the sum will be set to 0 on the first iteration. The currentIndex or number is set to the next value in the array. At the beginning of the reducehelper function, that will be 1 or the first value inside the numbers array.

We will add a console.log to the reduce function to show the value of sum on each iteration.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce( (sum, number) => return sum + number, 0);

// Iteration 1: sum = 0, number = 1; return sum = 1;
// Iteration 2: sum = 1, number = 2; return sum = 3;
// Iteration 3: sum = 3, number = 3; return sum = 6;
// Iteration 4: sum = 6, number = 4; return sum = 10;
// Iteration 5: sum = 10, number = 5; return sum = 15;

So there you have it, you can use reduce to produce a single value from an array of values. However, reduce is really powerful and can do a lot more than sum up values. Take the example below, we have an array that contains a list of people and pets, and their some attributes.

let occupants = [
  {name: 'Tony', age: 26, species: 'human'},
  {name: 'Katey', age: 26, species: 'human'},
  {name: 'Marley', age: 5, species: 'canine'},
  {name: 'Harlow', age: 2, species: 'feline'},
  {name: 'Diana', age: 1, species: 'feline'}
];

Say you need a list of names of the occupants in your home for your landlord to keep track of. You can use reduce on the occupants array to produce a new array that contains each occupant's name as a string.

const occupantNames = occupants.reduce((acc, occupant) => {
  acc.push(occupant.name);

  return acc;
}, []);

console.log(occupantNames) // ["Tony", "Katey", "Marley", "Harlow", "Diana"]

Conclusion

JavaScript array helper methods can help you write cleaner, more legible code in less time. Try these helper methods the next time you think about using a for loop.

Setting up Photoshop Files for Dev Success

Elise Gaetz Ferguson — Wed, 29 May 2019 13:01:00 +0000

Despite the move to “design in the browser” and design tools like Figma and Adobe XD, there are still quite a few of us out there being provided Photoshop PSDs to be converted into functional webpages on a regular basis. A great portion of my front end developer career revolved around “slicing” Photoshop files and writing HTML and CSS to match. While each designer tends to organize their files in their own way, I have some tips for making your Photoshop files easier for developers to use.

Name Layers: appropriately named layers and folders make it easy to see what’s on them. How often have you gotten a PSD with labelled very specifically?

Rectangle 550 Copy and Layer 686 — helpful names, aren’t they?

Not very helpful is it? Which rectangle? What’s this layer? Who knows.

Use Folders: group things like Header, Hero, Body, Footer etc. This will keep things organized and make it easier to find the element you are looking for in the future.

Ensure layers/folders can be turned on and off to hide web text and reveal backgrounds or images below: Web safe text will often need to be hidden on a PSD in order to reveal the background below it. If your layers are labelled and grouped appropriately a developer should be able to turn off those layers easily as well as know which layers need to be hidden.

Indicate hover states if any and link states: if part of the design includes graphics or buttons that change as the user hovers over them, include a layer for those graphic hover states. It is also helpful to indicate text link styles in the sample content of the design and even a list of headings, bulleted lists and other content related items that need styling.

Do not flatten layers : definitely don’t flatten layers especially if you aren’t sure which layers your developer might need to hide/show to get to the graphics/information they might need.

I know this is only a few tips but these small things can really make a difference in time and effort on the development side of things.

Do you have any development tips for Photoshop files, I’d love to hear them!

ES6: Template Strings

Tony Nguyen — Wed, 22 May 2019 13:01:01 +0000

ES6 introduced a new syntax for strings called “template string”s or “template literals.” Template strings are not just a cool new way to write strings. They come with new features as well.

Let’s take a look at the ES5 string and refactor it using a template literal.

// ES5 string
let myName = 'Tony Nguyen'

To create a template literal, just use the backtick(`) character instead of the single or double quotes. The backtick the same key as the ~ key usually below the escape key.

// ES6 template string
let myName = Tony Nguyen

It really is that simple. Now that you know how to write a template string let’s take a look at some of the things you can do with template strings.

String Concatenation

In ES5, in order to concatenate a string you would have to write code that would look like this:

`
// ES5
function printName(fName, lName) {
return 'Hi '+ fName + ' ' + lName + '!';
}

printName('Arnold','Schwarzenegger'); // "Hi Arnold Schwarzenegger!"
`

The printName function above is long and prone to error. I will often times have to write out the return more than once because I forgot to add a space or the plus sign.

With template strings you can easily concatenate a string in one line. This is because template strings can take in any valid JavaScript expression.

function printName(fName, lName){ returnHi ${fName} ${lName}!`
}

printName('Arnold','Schwarzenegger'); // "Hi Arnold Schwarzenegger!"
`

Since template strings can take in any valid JavaScript expression, you can do in-line math with template strings.

`
let bench = 440;
let squat = 545;
let deadlift = 710;

console.log(Arnold has a combined ${bench + squat + deadlift} lbs with his big three lifts.);

// Arnold has a combined 1695 lbs with his big three lifts.
`

Multi-line Strings

Multi-line strings are also easily made with template strings. In ES5, there were a number of workarounds that would help create multi-line strings but, with template strings, you can just add a new line into the string.

`
// ES5
let greeting = "Hello \nWorld!"

// ES6
let greeting = Hello World!
`

Voila, you have created a string with a new line in it.

This has been a very basic overview of template strings. As you can see, they are a great new syntax that will save you time and frustration when you are working with strings. However, you can do a lot more with them than the examples I have shown above, such as tagged templates. You can learn more about template strings here.