JS TL;DR - Zen mode web-docs for javascript developers
Tags: javascript, tldr, zen, productivity
Published: 2019-12-02 18:57:25

###### _This is a repost of my article at [Medium](https://blog.usejournal.com/js-tl-dr-zen-mode-web-docs-for-javascript-developers-cf45e0143a09)_

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](https://thepracticaldev.s3.amazonaws.com/i/d2fubo5vhylhk2l5xcpj.png)

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](https://developer.mozilla.org/) 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`](https://tldr.sh/) 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](https://thepracticaldev.s3.amazonaws.com/i/05h0fvfqvvwth73hnktk.png)

… 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](https://thepracticaldev.s3.amazonaws.com/i/xsz4h3t14nwee67qz4by.png)

I took the self-made [Gloom Glam](https://github.com/RusinovAnton/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](https://thepracticaldev.s3.amazonaws.com/i/7gg1pkm1g1g4g7fjjlvp.jpeg)

### 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](https://thepracticaldev.s3.amazonaws.com/i/kcil4ehmt1zq2spwxdve.png)

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](https://thepracticaldev.s3.amazonaws.com/i/cjwqo4ph156jhzs2u553.png)

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 via[Patreon](https://www.patreon.com/jstldr)! 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!_