DEV Community

Cover image for JS TL;DR - Zen mode web-docs for javascript developers
Anton Rusinov
Anton Rusinov

Posted on

JS TL;DR - Zen mode web-docs for javascript developers

This is a repost of my article at Medium

Today I'm thrilled to announce a launch of the beta version of the project I've been working on the last several weeks:

🎊 Meet JS TL;DR - https://js-tldr.info 🎊

Cool story

On a Saturday morning, I've been chilling in my bed, lazily scrolling through my Twitter feed and stumbled upon this mjackson's, who is one of the react-router creators, post:

mjacksons post screenshot

The thread is full of developers, including me, agreeing that googling basic javascript or any other language features is fine. Another thing I've noticed - there are several people mentioned that they're using the MDN website to search for all that info, but I couldn't see any comments on alternative tooling. Here I've caught myself on that I had this kind of thoughts before, as a professional web developer, I'm using MDN daily as well.

I love Mozilla Developers Network, and I'm thankful to fellow contributors who have made our lives so much better. Usually, it's the first place where I head anytime I have doubts about what some Array's method returns.

At the same time, I always wanted to have something as simple and as useful as the tldr command-line tool, but for all of Javascript documentation.

The other tool I'm using a lot is a Spotlight Search, which has this brilliant simple yet powerful UX.

Spotlight Search UI on Mac OS Catalina

… and it clicked in my head, I've instantly imagined the tool I would like to use, so I jumped off the bed and darted to my laptop to search for any tool alike. I've tried to google terms like "js cheatsheet", "js TLDR" "es documentation", "human-readable ECMAScript spec", and to my frank surprise, I couldn't find any solid alternatives!

The motivation

One of the hardest parts of coding for me is to stay focused on the feature I'm working at the moment. Looking for all the adjacent concepts, grasping contexts remembering the dependencies, etc. and then keeping everything in my head, all of that creates a great mental pressure and exhausts me that I feel it in my body.

If this process gets interrupted by forgotten API of some Array.prototype.unshift which forces me to lurk on how exactly I have to apply it, there is a high chance that I'll get distracted and then miss some critical detail that I've tried to keep in my head so badly.

Implementing the idea

Later that day, I was all in my editor, researching and sketching a POC pretty fast. The first page I've created was this entry point input that I had clearly before my eyes and just had to implement it.

Alt Text

I took the self-made Gloom Glam color theme, which I use for my VS code and iTerm. For me personally, it means the synchronization on a very fundamental level :)

The view of my VS code and iTerm

Where to get documentation from?

The start went smooth, and I coded quick until I've reached the central part of the application - the documentation sheets itself.

  • Should I write them from scratch?
  • Are there any APIs with the docs I could use?
  • Should I maybe scrap the MDN and parse it somehow?

My goals are to implement a useful tool with a javascript documentation for the developers who aren't learners but instead want to refresh their memory on basic language features; all that while I want to maintain their focus on whatever awesome stuff they're working on at the moment.

MDN MEME

As I've stated earlier, I believe that MDN human-readable documentation basically has no alternatives, so I took it as a basis, but I thought that there are some things that I can do:

  • throw out non-essentials and parts that teach Javascript to newcomers;
  • brush out all the stylistic inconsistency, that comes from many people writing text asynchronously
  • remove all the noisy elements that are not a part of the documentation sheet

As a result, here is an example of concat() method doc sheet I've come up with:

The doc page of Array.prototype.concat at js-tldr.info

At this step, I needed help, so I've asked my friends Gleb, Sasha, and Andrei, to join my journey of documentation writing.

For now, the project has documentation on essential methods of javascript native objects Array, Function, Number, RegExp, and String.

We're planning to add Math methods next, as well as more advanced features.

It's open-source!

The last but not the least aspect that I wanted to share with you, is that all the work we've created is open-source, so everyone is welcome to use it for their needs as well as to contribute to docs or app.

https://github.com/RusinovAnton/js-tldr

The summary

I always wanted to give back to the giant community of the world's greatest minds that I daily take from, so this is my shot. The project is in the beta state because I wanted to launch it fast as the idea is still fresh, gather up all the feedback and iterate over that first version or throw it away.

We're investing our spare money and time in it, a lot of things are new for us, so any support will indicate whether it worth it.

You can support us viaPatreon! We have an extra room at the website where yours or your company's name may shine ;)

Thanks for reading!

In my next articles, I plan to tell about the technical parts of the JS TL;DR application development, so be sure to follow me if you liked this one. Cheers!

Top comments (0)