DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,503 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Interactive JS Date Cheat Sheet
aprouja1
aprouja1

Posted on

Interactive JS Date Cheat Sheet

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

Top comments (2)

Collapse
 
naijadeveloper profile image
naijadeveloper

I love this, thanks

Collapse
 
burzumumbra profile image
Ronald Flores Sequeira

Great stuff dude.

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await