Create webapp to keep track of your progress

[jeanlucaslima]

Create webapp to keep track of your progress, with option to tick off items you already know and so on.

I'm working on it in my free time :-) if anyone wants to help, just reply here.

[adam-golab]

I thought about creating it, but I'm struggling with library for displaying the graph.

Do you know any good library for that? Readability is a key feature, so ideally if it doesn't look worse than the current version of the roadmap.

[abdullahceylan]

@adam-golab D3?

[chrisVillanueva]

Create webapp to keep track of your progress, with option to tick off items you already know and so on.

I'm working on it in my free time :-) if anyone wants to help, just reply here.

This is a great idea. Have you defined what "progress" means in this context? Would progress include github gists / repos, public website projects, etc?

I'm willing to help you out on my free time.

[jeanlucaslima]

@chrisVillanueva I thought more of checking boxes to keep your progress.

[jeanlucaslima]

@adam-golab Yeah, that's my struggle as well. If I find a good alternative I will keep this issue updated.

[daminort]

I can suggest using SVG for curves and just DIVs for another items.
All items have to be absolutely positioned.
Then we can parse an original react-developer-roadmap.xml to convert it to plain Javascript object that describes our items. And then we can simply render them (even with beautiful animation).
@jeanlucaslima Could you share your work about this?

[daminort]

I've just parsed xml and rendered only boxes (not curves) in a few hours.
Here is result:

I understand it doesn't looks like original roadmap properly because of mismathes between Draw.io models and real HTML code. But I can easily remedy this.
For future (if it will be for this idea) I would like implement the next features:

• animated render: when render will occur the branches of tree will render gradually pixel-by-pixel like domino falls down: from root to each leaf
• links to appropriate tutorial or official docs directly in the boxes (leafs of the tree)
• saving user progress in learning (I don't know now where, the simplest way - in LocalStorage)
  So I would like to ask you @jeanlucaslima and @adam-golab : is it needed for you (espeсially @adam-golab)? Are you want and ready to spend some your free times for creating this solution?
  If not I will create it by myself (of course with copyrighting and linking, be sure) and present as additive to your work.

[adam-golab]

Awesome work @daminort !
Can I ask what libraries did you use to generate that? Or is it written in vanilla JS without any additional libraries?

Animated render can be totally amazing. But I'd say it's something extra, something to work on as a last thing. Firstly, I'd go for implementing links (or more information in the tooltips added to leafs).

Regarding the user's progress I think the LocalStorage is a great place for that. But it requires to generate some kind of data structure for that. So it generates a few questions for you.

I used draw.io as it has quite decent visual editor and easily export created image to the SVG. Now I'm afraid if you are not reimplementing the functionality to export XML to SVG/HTML. My thoughts are that maybe storing the roadmap in the XML is not the best solution? Maybe it's worth to use JSON/YAML or any other format for that?
With XML generated from draw.io I have one problem... Internationalization. Different languages needs different sizes of the same boxes. And in current version, there is no simple way to calculate box size based on provided translated text. So again maybe introducing another format for storing the roadmap data will help you with your work?

[daminort]

@adam-golab Hi!
I used xml2js package to read XML and wrote a couple function to clear data and turn it into smaller JS-object.
After that I just rendered an array of elements by React.
I agree with you about animating: it can be added later.
I think implementing links will not take a lot of efforts since we are using React and normalized data source.
Now about XML file.
It is very good because I don't need to calculate coordinates and sizes of elements. I just have to take the file and give it to parser.
But, of course, there is an internationalization and information problem.
I will try to think out how we can compose all data together with remain original appearance and I will let you know.

[daminort]

After a lot of attempts to convert XML to JS object I realized that Draw.io uses relative paths for curves. And I can't conceive how to calculate absolute values.
So I decided to try to create a simply editor for roadmap. It will allow us to add/move/resize/remove blocks, curves and textual data. Also I want to implement export in PNG/JSON and then create simply client for rendering this JSON data.
This work won't be quick due to I'll be doing it in my free time, but I hope it'll be finished eventually and this will be a great challenge for me.
You can observe progress here: react-dev-roadmap-editor