tl-dr-community / js-tldr

Zen mode javascript documentation

js-tldr

Development

If you'd like to help us improving the website and docs, first please see our contribution guide

Getting started

This application is scaffolded via create-react-app

Commands to get up and running:

• npm install - installs required dependencies
• npm run build:search-index - build static json for search index
• npm run dev - run development server
• Open the http://localhost:3000/

Production

The website runs on Netlify. It's being built automatically from the latest changes in the master branch.

You can see the list of deploys here: https://app.netlify.com/sites/js-tldr/deploys

js-tldr's Issues

Add docs of Array object methods

• concat.md
• copyWithin.md
• entries.md
• every.md
• fill.md
• filter.md
• find.md
• findIndex.md
• flat.md
• flatMap.md
• forEach.md
• from.md
• includes.md
• indexOf.md
• isArray.md
• join.md
• keys.md
• lastIndexOf.md
• map.md
• observe.md
• of.md
• pop.md
• push.md
• reduce.md
• reduceRight.md
• reverse.md
• shift.md
• slice.md
• some.md
• sort.md
• splice.md
• toLocaleString.md
• toSource.md
• toString.md
• unshift.md
• values.md
• md.md

Simplify docs' URL

As is - /docs/Array/of
To be - /Array/of

Add arrow navigation for search dropdown list

Setup github actions for Cypress tests

there is this PR where I've tried to set it up: #131

you can either reuse it or create a new one.

The idea is to have automatically Cypress tests runs on new changes in master.
Ideally, it could block the deploy to the Netlify

Add docs of String object methods

• anchor
• big
• blink
• bold
• charAt
• charCodeAt
• codePointAt
• concat
• endsWith
• fixed
• fontcolor
• fontsize
• fromCharCode
• fromCodePoint
• includes
• indexOf
• italics
• lastIndexOf
• link
• localeCompare
• match
• normalize
• padEnd
• padStart
• quote
• raw
• repeat
• replace
• search
• slice
• small
• split
• startsWith
• strike
• sub
• substr
• substring
• sup
• toLocaleLowerCase
• toLocaleUpperCase
• toLowerCase
• toSource
• toString
• toUpperCase
• trim
• trimLeft
• trimRight
• valueOf

fix input autofocus

there is autofocus prop set to input, but it doesn't work

Actual result:

Search input does not have a focus on the homepage load

Expected result:

search input get focused when user comes to the homepage

SEO: add meta tags to describe doc pages

Each separate doc page should have at least meta description.
react-helmet or its alternatives should be used

Migrate to react-router@6

Overflow on mobile

Amazing idea,

Just checked it on my phone, and the text flows out of its box.

Fuzzy search doesn't find docs properly

If I'm searching for "Array.prototype.map", using fuzzy search I want to write "arrmap".
I expect it to find the doc, but actually it's not even around of the top of the results list:

Create nice looking documentation loading UI

Currently, when the doc is being loaded - its just "Loading..." label, and then once doc is loaded the page jumps on doc sheet render.

Code editor for sandbox playground

Cypress tests

CI to push data to hosting

Website seems to be down

Hey @RusinovAnton , the website seems to be down 😬

On https: it fails completely

On http:

Calculate score threshold dynamically

score threshold in Search.js should depend on length of the possible results

https://github.com/RusinovAnton/js-tldr/blob/master/src/scenes/Search/Search.js#L29

Add cursor and hover states to clickable elements

Great project 👍🏼🙏🏼

I noticed that almost no elements (apart from links) have any of the features you'd expect from clickable items; at the very least, a cursor: pointer would be good, some other hover state (e.g. box-shadow or darkening text) might be good as well.

The elements lacking are the yes/no helpful buttons, the 'domains' (Number etc.) selection buttons, and the X button when a doc is selected

Start using typescript for source code

sup within quote is not rendered as expected

As is

To be:

PWA: Check if offline mode works correctly

The PWA setup is ready and there is a possibility to install the application to the Home screen of a smartphone or in Desktop browsers apps.

Looks like it even works in offline mode - the HTML and JS files must be cached right now. But the last time I've checked it, the markdown docs - they weren't available in the offline even I have looked for them when I had an internet connection. the task is to check whether it works correctly and if not - fix it :)

Do index normalization at the build time instead of runtime

Discord server - contributors chat

Hello, fellow contributors!

I've created a discord channel for all the discussions and you're welcome to join it:

https://discord.gg/z59sRKt

I am also available via social networks:

Click here to see social networks links list

twitter - https://twitter.com/rusinovAntonDev
telegram - https://t.me/ovvshiee
facebook - https://www.facebook.com/profile.php?id=100009624934917
linkedin - https://www.linkedin.com/in/anton-rusinov-0532039a/

Utilize GA site search events

Research if it's possible to use site search events to track user's input in the search bar and get some useful data of it.
https://support.google.com/analytics/answer/1012264?hl=en

Add docs body to search index

Problem

Currently, it's only possible to look for the method by its name. It is important to have the ability to look by the documentation body.

Add mechanism for adding doc translations

The draft spec on the translation mechanism:

• each docs translation should have a separate folder, named by its language code in ISO 639-1 format:

docs/
  en/...
  he/...
  ...

• there should be a separate index.json and search-index.json per each language.
  The current process of the building of the doc sheet path should be changed. path property should be computed using the convention: /docs/${language}/${domainName}/${method/property -Name}

• language code should be added in the route path and read from there.
  I would really like to have separate subdomains, but I just cannot afford it at this moment
  We might want to have no language code for the English version to keep URL simple. Also, see #102
  Examples:

  • https://js-tldr.info/docs/ - for English
  • https://js-tldr.info/he/docs/ - for Hebrew
  • https://js-tldr.info/uk/docs/ - for Ukrainian

Basic server to serve static build

Regex methods

Gather up the feedback

In order to gather up info on doc relevance, there should be a way to get feedback if a user liked the article

For example:

thumb up/down or like/dislike

Add doc page

Error occur Clicking the button as soon as Main rendered

As soon as rendered Main page, Typing in the box or Click the button has occur 'Uncaught TypeError: Cannot read property 'search' of null'.

I think this is because data from server has not arrived but Main page already rendered.

Can I work this?

Server side rendering

Function methods

Close button is hard to click on mobile

It should be further from the side of the screen or have a larger tap area OR it should be redesigned to comply with common mobile app UX

Add random button

Love this! Looks stunning. Can someone add a random button that just presents,.. well, random article?

Add responsive styles

Slack workspace - jstldr.slack.com

Hello everyone!

The fellow who is interested in contribution, you now may join our Slack workspace!

Unfortunately, it seems like Slack changed their terms of usage and now there is no way to install the app with team invite priveledges for the Free plan workspace - it means that I cannot create an auto-invite page, therefore I will invite any interested person manually.

To get an invite you can write me your email in DM at one of the

social networks

twitter - https://twitter.com/rusinovAntonDev
telegram - https://t.me/ovvshiee
facebook - https://www.facebook.com/profile.php?id=100009624934917
linkedin - https://www.linkedin.com/in/anton-rusinov-0532039a/

or here in the comments.

Thank you!

Revisit Search chips UI to keep main page minimalistic

With more new docs added, search chips are taking too much space, especially on mobile.

Probably we do not need buttons for every domain we have. this UI should be revisited in order to keep main page minimalistic, yet functional

Fix error with 'String.prototype.substr()' documentation

"TypeError: Cannot read property 'rest' of undefined" occur with prism because prism can't find 'warning' language.

Add link to browser compatibility info

As is:

We do not have info on browser compatibility, and we don't want to have it. However, it might be useful to have a possibility to open the compatibility table at caniuse.com?

To be:

We should come up with best design for the feature, so it won't be distractive and at the same time, easy to find.

Add info about mutable/immutable Array methods

Give your feedback

Dear participants of the Goodness Squad 23.06 and other contributors, this website was created with the limited resources of me building the main part of the codebase and fellow contributors who helped to add docs, PWA support, and Cypress tests.

The idea is to have minimalistic docs cheatsheet with thoroughly designed UX but at this moment I realize it is far from perfection. I've got some feedback during the initial release and created issues for the most important things, some of them were implemented already.

Your feedback is absolutely valuable so you're welcome to get through the website/codebase and suggest any kind of improvements: documentation examples and wording, performance, accessibility, UX/UI, SEO and whatnot.

You can either comment on this issue or create a new one - whatever you feel like. You can contribute by even just voting 👍 👎 for/against the comments in this thread.

Much appreciated, Bless you!

Setup PWA

• - turn on the serviceWorker
• - update manifest.json
• - setup http -> https redirect

Add functional search dropdown

Math methods

[ GA ] looks like feedback form doesn't send events to the server

needs to be checked

Add docs for new ES6 objects

• Promise
• Maps
• WeakMaps
• Sets
• WeakSets
• Proxies
• Reflection

Reformat the doc structure

• The description text might be too large/ unnecessary for the doc sheet
• Syntax definition lack more info about parameters description

Since our text description usually just describes a syntax definition with words, we could remove most of the text by using JSDoc/Typescript typings for parameters definition, leaving just important notes / or non-obvious things, also moving them after the Syntax section

Add docs for Object method and properties

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

UI Bug: results dropdown doesn't cover chips buttons

AS IS:
When the results dropdown is opened, there is a cut "Array" chip button is visible, which is not looking aesthetic

TO BE:
No buttons should be visible.

I think of two things:

• either hide buttons if results are visible or even input has some value
• make dropdown wider to cover everything underneath the input

other suggestions are welcome

Syntax: Add more details on methods' arguments