An overlooked Array.every() gotcha

aprouja1 — Tue, 15 Oct 2019 21:44:40 +0000

For those not familiar, the Array.every() method tests a condition against all items in an array:

const fruits = ["Apple", "Banana", "Plum","Orange"]

//Is every fruit longer than 5 characters?
fruits.every(fruit => fruit.length > 5) //false

Items are not just limited to simple strings:

const people= [{name:"Alex", age:24}, {name:"Bob", age:37},
{name:"Carl", age:18}, {name:"Devon", age:77}]

//Is every person at least 18 years old
people.every(person => person.age >= 18) //true

//destructured
people.every(({age}) => age >= 18) //true

But did you know what happens with an empty array:

const toDoListItems = []

//Are all of my items complete
toDoListItems.every(item => item.done === true) //true

Well that was unexpected. Turns out that when every is called on an empty array, the result is always true: MDN - Array.every()

Be careful not to use the Array.every() method when your Array may have a length of 0.

Interactive JS Date Cheat Sheet

aprouja1 — Thu, 30 May 2019 22:36:42 +0000

This is the story of my process building JSDates.dev, my first published project and what I learned along the way.

Why Dates?

Remembering all of the various Javascript Date and Time methods has always been a struggle for me. Various methods have a partner with a slightly similar name, causing confusion:

toISOString & toJSON
toUTCString & toGMTString

Some have similar names but provide different results:

getFullYear
getUTCFullYear
getYear

Some have different names and provide almost the exact same value:

valueOf
getTime

Cheat Sheet

With all of that in mind, I set out to create a tool that would allow me to input multiple dates, see all of the values of all of the methods and compare. Thus JSDates.dev was born!

Tools & Methodology

I've been a big proponent of Vue for some time now, so I knew that it would be my JS framework of choice. The CSS framework Bulma has some very helpful classes that allowed for quick styling. Although I am normally a VS Code user, i decided to try out CodeSandbox for this project. I hadn't used it for any previous projects, but its integration with Netlify was unbelievably easy to use in order to build on commit.

Learnings

CSS Grid is truly amazing, and is only going to get better. Setting up a responsive grid takes mere seconds.
Vue's reactivity system continues to impress in terms of rendering speed
Dates & Times are confusing, but understanding the options can be more valuable than adding a specific library

Next Steps

I tried quite hard to find a way to add function arguments without hard-coding the various options. Looping through prototype methods was fairly simple, but trying to determine what arguments went with those methods doesn't appear to be possible.

Please feel free to give me your thoughts or open an issue on the Github Repo