Interactive JS Date Cheat Sheet

#javascript #vue #beginners

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