admin/developer-roadmap
1
0 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Add beginner version of frontend roadmap

Browse Source
This commit is contained in:
Kamran Ahmed committed 2023-03-02 19:19:34 +00:00
1 parent 01c090f62d
commit cb32a9610d
3 files changed
+12 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/jsons/roadmaps/frontend-beginner.json
+1
View File
@@ -0,0 +1 @@
{"mockup":{"controls":{"control":[{"ID":"12087","typeID":"__group__","zOrder":"34","measuredW":"125","measuredH":"49","w":"125","h":"49","x":"596","y":"549","properties":{"controlName":"101-html"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"125","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"48","measuredH":"25","x":"39","y":"12","properties":{"size":"17","text":"HTML"}}]}}},{"ID":"12088","typeID":"__group__","zOrder":"13","measuredW":"144","measuredH":"40","w":"144","h":"40","x":"706","y":"393","properties":{"controlName":"ext_link:roadmap.sh/frontend"},"children":{"controls":{"control":[{"ID":"0","typeID":"Label","zOrder":"0","measuredW":"144","measuredH":"40","x":"0","y":"0","properties":{"size":"32","text":"Front-end"}}]}}},{"ID":"12093","typeID":"__group__","zOrder":"14","measuredW":"124","measuredH":"49","w":"124","h":"49","x":"597","y":"614","properties":{"controlName":"102-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"124","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"33","measuredH":"25","x":"45","y":"12","properties":{"size":"17","text":"CSS"}}]}}},{"ID":"12097","typeID":"Canvas","zOrder":"15","w":"324","h":"195","measuredW":"100","measuredH":"70","x":"973","y":"271"},{"ID":"12098","typeID":"Label","zOrder":"16","measuredW":"283","measuredH":"26","x":"991","y":"290","properties":{"size":"18","text":"For resources and other roadmaps"}},{"ID":"12099","typeID":"__group__","zOrder":"17","measuredW":"172","measuredH":"28","w":"172","h":"28","x":"991","y":"323","properties":{"controlName":"ext_link:roadmap.sh"},"children":{"controls":{"control":[{"ID":"2","typeID":"Label","zOrder":"0","measuredW":"172","measuredH":"28","x":"0","y":"0","properties":{"size":"20","text":"https://roadmap.sh","color":"10027263"}}]}}},{"ID":"12100","typeID":"__group__","zOrder":"18","measuredW":"282","measuredH":"47","w":"282","h":"47","x":"991","y":"398","properties":{"controlName":"json:jsons/roadmaps/frontend.json"},"children":{"controls":{"control":[{"ID":"0","typeID":"Canvas","zOrder":"0","w":"282","h":"47","measuredW":"100","measuredH":"70","x":"0","y":"0","properties":{"color":"3355443","borderColor":"3355443"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"203","measuredH":"26","x":"39","y":"11","properties":{"color":"16777215","size":"18","text":"Visit the Detailed Version"}}]}}},{"ID":"12101","typeID":"Label","zOrder":"19","measuredW":"259","measuredH":"26","x":"991","y":"363","properties":{"color":"4985136","size":"18","text":"Beginner who wants to step up?"}},{"ID":"12103","typeID":"__group__","zOrder":"20","measuredW":"127","measuredH":"50","w":"127","h":"50","x":"595","y":"678","properties":{"controlName":"103-javascript"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"127","h":"50","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"81","measuredH":"25","x":"23","y":"13","properties":{"size":"17","text":"JavaScript"}}]}}},{"ID":"12118","typeID":"__group__","zOrder":"21","measuredW":"95","measuredH":"49","w":"95","h":"49","x":"820","y":"789","properties":{"controlName":"100-version-control-systems:basic-usage-of-git"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"95","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"22","measuredH":"25","x":"37","y":"12","properties":{"size":"17","text":"Git"}}]}}},{"ID":"12122","typeID":"__group__","zOrder":"48","measuredW":"211","measuredH":"53","w":"211","h":"53","x":"510","y":"886","properties":{"controlName":"107-package-managers"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"211","h":"53","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"149","measuredH":"25","x":"31","y":"14","properties":{"text":"Package Managers","size":"17"}}]}}},{"ID":"12123","typeID":"__group__","zOrder":"49","measuredW":"103","measuredH":"49","w":"103","h":"49","x":"605","y":"797","properties":{"controlName":"100-package-managers:npm"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"103","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","w":"36","measuredW":"34","measuredH":"25","x":"34","y":"12","properties":{"size":"17","text":"npm"}}]}}},{"ID":"12160","typeID":"__group__","zOrder":"24","measuredW":"213","measuredH":"53","w":"213","h":"53","x":"509","y":"950","properties":{"controlName":"111-pick-a-framework"Line truncated
public/jsons/roadmaps/frontend.json
+1 -1
View File
@@ -1 +1 @@
{"mockup":{"controls":{"control":[{"ID":"17494","typeID":"Arrow","zOrder":"0","w":"309","h":"4","measuredW":"150","measuredH":"100","x":"543","y":"2279","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":309,"y":0},"p1":{"x":0.47704880470480404,"y":0.005193614908729892},"p2":{"x":0.25353038260061567,"y":3.4362035980902874}}},{"ID":"17495","typeID":"Arrow","zOrder":"1","w":"179","h":"123","measuredW":"150","measuredH":"100","x":"537","y":"2136","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.2145043524983521,"y":123.4387467621832},"p1":{"x":0.5230101676333169,"y":-0.19478326314466354},"p2":{"x":179,"y":0}}},{"ID":"17496","typeID":"Arrow","zOrder":"2","w":"65","h":"2","measuredW":"150","measuredH":"100","x":"1156","y":"2631","properties":{"color":"2848996","curvature":"-1","leftArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.4807692307692308,"y":-0.01923076923076923},"p2":{"x":64,"y":1},"rightArrow":"false","stroke":"dotted"}},{"ID":"17497","typeID":"Arrow","zOrder":"3","w":"101","h":"39","measuredW":"150","measuredH":"100","x":"955","y":"2481","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":101.53298940730701,"y":-0.4603981095092422},"p1":{"x":0.5036496350364975,"y":0.06360792492179564},"p2":{"x":0.4884249128083411,"y":38.51393390979774}}},{"ID":"17498","typeID":"Arrow","zOrder":"4","w":"122","h":"32","measuredW":"150","measuredH":"100","x":"665","y":"3078","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":-0.2570801773204039,"y":0.27390737805444587},"p1":{"x":0.490691474468782,"y":0.06808089415982024},"p2":{"x":121.64515133802809,"y":32.10715730089032}}},{"ID":"17499","typeID":"Arrow","zOrder":"5","w":"180","h":"369","measuredW":"150","measuredH":"100","x":"980","y":"2710","properties":{"color":"2848996","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":180.33312546195043,"y":369.1629038835017},"p1":{"x":0.5311058790594242,"y":0.05504224965971112},"p2":{"x":0.024041521385697706,"y":0.016603653832135024}}},{"ID":"17500","typeID":"Arrow","zOrder":"6","w":"91","h":"44","measuredW":"150","measuredH":"100","x":"1133","y":"2428","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":91.2836149319719,"y":-0.42601596895428884},"p1":{"x":0.4807260155574767,"y":0.1446845289541901},"p2":{"x":0.03815966742740784,"y":43.87863921953385}}},{"ID":"17501","typeID":"Arrow","zOrder":"7","w":"1","h":"464","measuredW":"150","measuredH":"100","x":"564","y":"2959","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.5232912494558118,"y":0.0013060513713539397},"p2":{"x":0,"y":464.4848484848485}}},{"ID":"17502","typeID":"Arrow","zOrder":"8","w":"159","h":"4","measuredW":"150","measuredH":"100","x":"665","y":"3060","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":0.44614540796908386,"y":3.8064134624410144},"p1":{"x":0.4319942611190816,"y":-0.006169296987087544},"p2":{"x":159.7751756755747,"y":0}}},{"ID":"17503","typeID":"Arrow","zOrder":"9","w":"142","h":"44","measuredW":"150","measuredH":"100","x":"648","y":"3011","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":-0.2570801773204039,"y":43.273907378054446},"p1":{"x":0.4540886815248379,"y":-0.08069525981073665},"p2":{"x":142,"y":0}}},{"ID":"17504","typeID":"Arrow","zOrder":"10","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"564","y":"3470","properties":{"color":"2848996","curvature":"0","leftArrow":"false","p0":{"x":1,"y":88},"p1":{"x":0.4072427393330943,"y":0.00953746862674794},"p2":{"x":1,"y":0},"rightArrow":"false","stroke":"dotted"}},{"ID":"17505","typeID":"__group__","zOrder":"11","measuredW":"248","measuredH":"59","w":"248","h":"59","x":"434","y":"3031","properties":{"controlName":"122-desktop-applications"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"241","h":"50","measuredW":"200","measuredH":"140","x":"7","y":"9","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"162","measuredH":"25","x":"47","y":"22","properties":{"size":"17","text":"Desktop Applications"}},{"ID":"2","typeID":"Icon","zOrder":"2","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"3","typeID":"Icon","zOrder":"3","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}},{"ID":"17506","typeID":"__group__","zOrder":"12","measuredW":"196","measuredH":"41","w":"196","h":"41","x":"775","y":"2994","propertLine truncated
{"mockup":{"controls":{"control":[{"ID":"17494","typeID":"Arrow","zOrder":"0","w":"309","h":"4","measuredW":"150","measuredH":"100","x":"543","y":"2279","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":309,"y":0},"p1":{"x":0.47704880470480404,"y":0.005193614908729892},"p2":{"x":0.25353038260061567,"y":3.4362035980902874}}},{"ID":"17495","typeID":"Arrow","zOrder":"1","w":"179","h":"123","measuredW":"150","measuredH":"100","x":"537","y":"2136","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.2145043524983521,"y":123.4387467621832},"p1":{"x":0.5230101676333169,"y":-0.19478326314466354},"p2":{"x":179,"y":0}}},{"ID":"17496","typeID":"Arrow","zOrder":"2","w":"65","h":"2","measuredW":"150","measuredH":"100","x":"1156","y":"2631","properties":{"color":"2848996","curvature":"-1","leftArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.4807692307692308,"y":-0.01923076923076923},"p2":{"x":64,"y":1},"rightArrow":"false","stroke":"dotted"}},{"ID":"17497","typeID":"Arrow","zOrder":"3","w":"101","h":"39","measuredW":"150","measuredH":"100","x":"955","y":"2481","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":101.53298940730701,"y":-0.4603981095092422},"p1":{"x":0.5036496350364975,"y":0.06360792492179564},"p2":{"x":0.4884249128083411,"y":38.51393390979774}}},{"ID":"17498","typeID":"Arrow","zOrder":"4","w":"122","h":"32","measuredW":"150","measuredH":"100","x":"665","y":"3078","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":-0.2570801773204039,"y":0.27390737805444587},"p1":{"x":0.490691474468782,"y":0.06808089415982024},"p2":{"x":121.64515133802809,"y":32.10715730089032}}},{"ID":"17499","typeID":"Arrow","zOrder":"5","w":"180","h":"369","measuredW":"150","measuredH":"100","x":"980","y":"2710","properties":{"color":"2848996","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":180.33312546195043,"y":369.1629038835017},"p1":{"x":0.5311058790594242,"y":0.05504224965971112},"p2":{"x":0.024041521385697706,"y":0.016603653832135024}}},{"ID":"17500","typeID":"Arrow","zOrder":"6","w":"91","h":"44","measuredW":"150","measuredH":"100","x":"1133","y":"2428","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":91.2836149319719,"y":-0.42601596895428884},"p1":{"x":0.4807260155574767,"y":0.1446845289541901},"p2":{"x":0.03815966742740784,"y":43.87863921953385}}},{"ID":"17501","typeID":"Arrow","zOrder":"7","w":"1","h":"464","measuredW":"150","measuredH":"100","x":"564","y":"2959","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":0},"p1":{"x":0.5232912494558118,"y":0.0013060513713539397},"p2":{"x":0,"y":464.4848484848485}}},{"ID":"17502","typeID":"Arrow","zOrder":"8","w":"159","h":"4","measuredW":"150","measuredH":"100","x":"665","y":"3060","properties":{"color":"2848996","curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":0.44614540796908386,"y":3.8064134624410144},"p1":{"x":0.4319942611190816,"y":-0.006169296987087544},"p2":{"x":159.7751756755747,"y":0}}},{"ID":"17503","typeID":"Arrow","zOrder":"9","w":"142","h":"44","measuredW":"150","measuredH":"100","x":"648","y":"3011","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","rightArrow":"false","stroke":"dotted","p0":{"x":-0.2570801773204039,"y":43.273907378054446},"p1":{"x":0.4540886815248379,"y":-0.08069525981073665},"p2":{"x":142,"y":0}}},{"ID":"17504","typeID":"Arrow","zOrder":"10","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"564","y":"3470","properties":{"color":"2848996","curvature":"0","leftArrow":"false","p0":{"x":1,"y":88},"p1":{"x":0.4072427393330943,"y":0.00953746862674794},"p2":{"x":1,"y":0},"rightArrow":"false","stroke":"dotted"}},{"ID":"17505","typeID":"__group__","zOrder":"11","measuredW":"248","measuredH":"59","w":"248","h":"59","x":"434","y":"3031","properties":{"controlName":"122-desktop-applications"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"241","h":"50","measuredW":"200","measuredH":"140","x":"7","y":"9","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"162","measuredH":"25","x":"47","y":"22","properties":{"size":"17","text":"Desktop Applications"}},{"ID":"2","typeID":"Icon","zOrder":"2","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"16777215","icon":{"ID":"circle","size":"small"}}},{"ID":"3","typeID":"Icon","zOrder":"3","measuredW":"24","measuredH":"24","x":"0","y":"0","properties":{"color":"10066329","icon":{"ID":"check-circle","size":"small"}}}]}}},{"ID":"17506","typeID":"__group__","zOrder":"12","measuredW":"196","measuredH":"41","w":"196","h":"41","x":"775","y":"2994","propertLine truncated
src/components/FrameRenderer/renderer.js
+10 -3
View File
@@ -5,7 +5,7 @@ export class Renderer {
this.resourceId = '';
this.resourceType = '';
this.jsonUrl = '';
this.loaderNode = null;
this.loaderHTML = null;
this.containerId = 'resource-svg-wrap';
this.loaderId = 'resource-loader';
@@ -31,7 +31,7 @@ export class Renderer {
}
// Clone it so we can use it later
this.loaderNode = this.loaderEl.cloneNode();
this.loaderHTML = this.loaderEl.innerHTML;
const dataset = this.containerEl.dataset;
this.resourceType = dataset.resourceType;
@@ -51,7 +51,7 @@ export class Renderer {
return null;
}
this.containerEl.replaceChildren(this.loaderNode);
this.containerEl.innerHTML = this.loaderHTML;
return fetch(jsonUrl)
.then((res) => {
@@ -100,6 +100,13 @@ export class Renderer {
return;
}
if (/^json:/.test(groupId)) {
this.jsonToSvg(groupId.replace('json:', '')).then(() => {
this.containerEl.setAttribute('style', '');
});
return;
}
if (/^check:/.test(groupId)) {
window.dispatchEvent(
new CustomEvent(`${this.resourceType}.topic.toggle`, {