From 8dcf4b00c42f5218a264364ad13730a1010aed3c Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 2 Mar 2023 21:58:14 +0000 Subject: [PATCH] Refactor frontend roadmap for beginners --- public/jsons/roadmaps/frontend-beginner.json | 2 +- .../FrameRenderer/FrameRenderer.astro | 1 - src/components/FrameRenderer/renderer.js | 47 +++++++++++++++++-- 3 files changed, 45 insertions(+), 5 deletions(-) diff --git a/public/jsons/roadmaps/frontend-beginner.json b/public/jsons/roadmaps/frontend-beginner.json index 45a104059..fbc1a7e85 100644 --- a/public/jsons/roadmaps/frontend-beginner.json +++ b/public/jsons/roadmaps/frontend-beginner.json @@ -1 +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"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"213","h":"53","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"168","measuredH":"25","x":"23","y":"14","properties":{"size":"17","text":"Frontend Frameworks"}}]}}},{"ID":"12161","typeID":"__group__","zOrder":"25","measuredW":"98","measuredH":"49","w":"98","h":"49","x":"614","y":"1036","properties":{"controlName":"100-pick-a-framework:react-js"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"98","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"47","measuredH":"25","x":"25","y":"12","properties":{"text":"React","size":"17"}}]}}},{"ID":"12180","typeID":"__group__","zOrder":"26","measuredW":"212","measuredH":"50","w":"212","h":"50","x":"829","y":"1043","properties":{"controlName":"114-css-frameworks"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"212","h":"50","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"131","measuredH":"25","x":"40","y":"13","properties":{"size":"17","text":"CSS Frameworks"}}]}}},{"ID":"12186","typeID":"__group__","zOrder":"27","measuredW":"99","measuredH":"49","w":"99","h":"49","x":"373","y":"1126","properties":{"controlName":"100-testing-your-apps:jest"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"99","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","w":"39","measuredW":"33","measuredH":"25","x":"30","y":"12","properties":{"size":"17","text":"Jest"}}]}}},{"ID":"12188","typeID":"__group__","zOrder":"28","measuredW":"214","measuredH":"49","w":"214","h":"49","x":"507","y":"1126","properties":{"controlName":"115-testing-your-apps"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"214","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"144","measuredH":"26","x":"35","y":"11","properties":{"size":"18","text":"Testing your Apps"}}]}}},{"ID":"12253","typeID":"__group__","zOrder":"29","measuredW":"100","measuredH":"49","w":"100","h":"49","x":"1069","y":"1045","properties":{"controlName":"100-css-frameworks:js-first:tailwind-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"100","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"61","measuredH":"25","x":"19","y":"12","properties":{"size":"17","text":"Tailwind"}}]}}},{"ID":"12264","typeID":"Canvas","zOrder":"22","w":"380","h":"150","measuredW":"100","measuredH":"70","x":"172","y":"280"},{"ID":"12267","typeID":"Label","zOrder":"23","measuredW":"187","measuredH":"32","x":"200","y":"305","properties":{"size":"24","text":"Beginner Version"}},{"ID":"12277","typeID":"Label","zOrder":"30","measuredW":"319","measuredH":"28","x":"200","y":"346","properties":{"color":"4985136","size":"20","text":"This is the trimmed down version of"}},{"ID":"12278","typeID":"Label","zOrder":"31","measuredW":"332","measuredH":"28","x":"200","y":"377","properties":{"color":"4985136","size":"20","text":"The frontend roadmap for beginners."}},{"ID":"12282","typeID":"Arrow","zOrder":"32","w":"1","h":"59","measuredW":"150","measuredH":"100","x":"773","y":"320","properties":{"p0":{"x":0,"y":-0.30303030303031164},"p1":{"x":0.5,"y":0},"p2":{"x":0,"y":58.78787878787875},"curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","color":"13369344"}},{"ID":"12283","typeID":"Arrow","zOrder":"33","w":"1","h":"333","measuredW":"150","measuredH":"100","x":"773","y":"442","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"13369344","p0":{"x":0,"y":-0.06060606060606233},"p1":{"x":0.5000000000000008,"y":-1.5906276266511653e-18},"p2":{"x":0,"y":332.66666666666663}}},{"ID":"12284","typeID":"Arrow","zOrder":"10","w":"147","h":"1","measuredW":"150","measuredH":"100","x":"626","y":"574","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":147,"y":0},"p1":{"x":0.5010198135198135,"y":-0.0010307153164296314},"p2":{"x":0,"y":0},"color":"13369344"}},{"ID":"12290","typeID":"Arrow","zOrder":"11","w":"98","h":"1","measuredW":"150","measuredH":"100","x":"773","y":"814","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":97.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":-0.4545454545454959,"y":-0.30303030303031164}}},{"ID":"12291","typeID":"Arrow","zOrder":"12","w":"87","h":"1","measuredW":"150","measuredH":"100","x":"685","y":"640","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"13369344","p0":{"x":87,"y":0},"p1":{"x":0.5010198135198135,"y":-0.0010307153164296314},"p2":{"x":-0.2533333333333303,"y":0}}},{"ID":"12292","typeID":"Label","zOrder":"35","measuredW":"378","measuredH":"26","x":"854","y":"567","properties":{"color":"4985136","size":"18","text":"You should be able to find an internee or junior"}},{"ID":"12293","typeID":"Label","zOrder":"36","measuredW":"333","measuredH":"26","x":"854","y":"599","properties":{"color":"4985136","size":"18","text":"Frontend developer position at this point."}},{"ID":"12299","typeID":"Label","zOrder":"37","measuredW":"428","measuredH":"26","x":"854","y":"642","properties":{"size":"18","color":"40463","text":"Start applying for jobs and keep following to increase"}},{"ID":"12300","typeID":"Label","zOrder":"38","measuredW":"276","measuredH":"26","x":"854","y":"675","properties":{"color":"40463","size":"18","text":"your chances of finding a position."}},{"ID":"12314","typeID":"Arrow","zOrder":"9","w":"131","h":"1","measuredW":"150","measuredH":"100","x":"642","y":"704","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"13369344","p0":{"x":131,"y":-0.21212121212124657},"p1":{"x":0.5,"y":0},"p2":{"x":0.3030303030302548,"y":-0.21212121212124657}}},{"ID":"12342","typeID":"Label","zOrder":"39","measuredW":"348","measuredH":"26","x":"196","y":"592","properties":{"color":"4985136","size":"18","text":"When you are following this roadmap, make"}},{"ID":"12343","typeID":"Label","zOrder":"40","measuredW":"338","measuredH":"26","x":"206","y":"625","properties":{"color":"4985136","size":"18","text":"sure to build as many projects as possible"}},{"ID":"12347","typeID":"Label","zOrder":"41","measuredW":"344","measuredH":"26","x":"200","y":"706","properties":{"color":"13576743","size":"18","text":"Click the roadmap nodes for project ideas."}},{"ID":"12357","typeID":"Label","zOrder":"42","measuredW":"145","measuredH":"32","x":"399","y":"548","properties":{"color":"4985136","size":"24","text":"Important Tip"}},{"ID":"12359","typeID":"Label","zOrder":"43","measuredW":"278","measuredH":"26","x":"970","y":"749","properties":{"color":"4985136","size":"18","text":"Create your GitHub profile. Publish"}},{"ID":"12361","typeID":"Label","zOrder":"44","measuredW":"300","measuredH":"26","x":"970","y":"779","properties":{"color":"4985136","size":"18","text":"the projects that you have developed"}},{"ID":"12362","typeID":"Label","zOrder":"45","measuredW":"229","measuredH":"26","x":"970","y":"809","properties":{"color":"4985136","size":"18","text":"so far to your GitHub profile."}},{"ID":"12364","typeID":"Label","zOrder":"46","measuredW":"249","measuredH":"26","x":"970","y":"849","properties":{"size":"18","color":"10027263","text":"Use git for your future projects."}},{"ID":"12365","typeID":"Arrow","zOrder":"47","w":"84","h":"1","measuredW":"150","measuredH":"100","x":"686","y":"913","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":83.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":0,"y":-0.3030303030302548}}},{"ID":"12366","typeID":"Arrow","zOrder":"8","w":"1","h":"73","measuredW":"150","measuredH":"100","x":"656","y":"821","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.39999999999997726,"y":-0.3030303030302548},"p1":{"x":0.4999999999999999,"y":0},"p2":{"x":-0.39999999999997726,"y":72.66666666666674},"stroke":"dotted","color":"40463"}},{"ID":"12369","typeID":"Arrow","zOrder":"50","w":"1","h":"57","measuredW":"150","measuredH":"100","x":"773","y":"784","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":0,"y":-0.06060606060606233},"p1":{"x":0.5000000000000006,"y":-1.590627626651165e-18},"p2":{"x":0,"y":56.66666666666663}}},{"ID":"12371","typeID":"Arrow","zOrder":"51","w":"1","h":"184","measuredW":"150","measuredH":"100","x":"773","y":"854","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":0},"p1":{"x":0.5000000000000007,"y":-1.5906276266511654e-18},"p2":{"x":0,"y":184}}},{"ID":"12372","typeID":"Canvas","zOrder":"52","w":"10","h":"126","measuredW":"100","measuredH":"70","x":"945","y":"749","properties":{"color":"10027263","borderColor":"10027263"}},{"ID":"12373","typeID":"Arrow","zOrder":"53","w":"1","h":"44","measuredW":"150","measuredH":"100","x":"773","y":"1050","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":0,"y":0.33333333333325754},"p1":{"x":0.5000000000000006,"y":0},"p2":{"x":0,"y":44}}},{"ID":"12374","typeID":"Canvas","zOrder":"54","w":"10","h":"139","measuredW":"100","measuredH":"70","x":"478","y":"881","properties":{"color":"40463","borderColor":"40463"}},{"ID":"12375","typeID":"Label","zOrder":"55","measuredW":"291","measuredH":"26","x":"174","y":"886","properties":{"color":"4985136","size":"18","text":"npm should be a quick one. Just get"}},{"ID":"12376","typeID":"Label","zOrder":"56","measuredW":"272","measuredH":"26","x":"193","y":"917","properties":{"color":"4985136","size":"18","text":"the basic idea and jump to React."}},{"ID":"12377","typeID":"Label","zOrder":"57","measuredW":"266","measuredH":"26","x":"199","y":"963","properties":{"size":"18","color":"40463","text":"Create some projects with React"}},{"ID":"12379","typeID":"Arrow","zOrder":"7","w":"98","h":"1","measuredW":"150","measuredH":"100","x":"774","y":"1069","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":97.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":-0.4545454545454959,"y":-0.30303030303031164}}},{"ID":"12382","typeID":"Arrow","zOrder":"6","w":"98","h":"1","measuredW":"150","measuredH":"100","x":"1016","y":"1069","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":97.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":-0.4545454545454959,"y":-0.30303030303031164},"stroke":"dotted"}},{"ID":"12393","typeID":"Arrow","zOrder":"5","w":"1","h":"73","measuredW":"150","measuredH":"100","x":"656","y":"983","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.39999999999997726,"y":-0.3030303030302548},"p1":{"x":0.4999999999999999,"y":0},"p2":{"x":-0.39999999999997726,"y":72.66666666666674},"stroke":"dotted","color":"40463"}},{"ID":"12394","typeID":"Arrow","zOrder":"4","w":"88","h":"1","measuredW":"150","measuredH":"100","x":"685","y":"978","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":87.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":-0.33333333333337123,"y":-0.3030303030302548}}},{"ID":"12396","typeID":"Label","zOrder":"58","measuredW":"179","measuredH":"26","x":"286","y":"993","properties":{"size":"18","color":"40463","text":"involving API calls etc."}},{"ID":"12397","typeID":"Label","zOrder":"59","measuredW":"245","measuredH":"26","x":"299","y":"655","properties":{"color":"4985136","size":"18","text":"for each node of the roadmap."}},{"ID":"12398","typeID":"Canvas","zOrder":"60","w":"10","h":"196","measuredW":"100","measuredH":"70","x":"561","y":"540","properties":{"color":"40463","borderColor":"40463"}},{"ID":"12399","typeID":"Canvas","zOrder":"61","w":"10","h":"172","measuredW":"100","measuredH":"70","x":"820","y":"548","properties":{"color":"40463","borderColor":"40463"}},{"ID":"12401","typeID":"Label","zOrder":"62","measuredW":"427","measuredH":"26","x":"852","y":"968","properties":{"color":"4985136","size":"18","text":"There are several CSS frameworks. You can pick any."}},{"ID":"12402","typeID":"Canvas","zOrder":"63","w":"10","h":"56","measuredW":"100","measuredH":"70","x":"831","y":"968","properties":{"color":"10027263","borderColor":"10027263"}},{"ID":"12403","typeID":"Label","zOrder":"64","measuredW":"390","measuredH":"26","x":"852","y":"998","properties":{"color":"4985136","size":"18","text":"Tailwind would be my personal recommendation."}},{"ID":"12406","typeID":"Label","zOrder":"66","measuredW":"532","measuredH":"26","x":"506","y":"1319","properties":{"color":"4985136","size":"18","text":"At this point, you should have enough knowledge to find a junior to"}},{"ID":"12407","typeID":"Label","zOrder":"67","measuredW":"529","measuredH":"26","x":"506","y":"1349","properties":{"color":"4985136","size":"18","text":"mid-level (maybe even senior) frontend developer position at any"}},{"ID":"12408","typeID":"Label","zOrder":"68","measuredW":"441","measuredH":"26","x":"506","y":"1379","properties":{"color":"4985136","size":"18","text":"company (depending on the depth of your knowledge)."}},{"ID":"12409","typeID":"Canvas","zOrder":"65","w":"595","h":"250","measuredW":"100","measuredH":"70","x":"482","y":"1250"},{"ID":"12410","typeID":"Label","zOrder":"69","measuredW":"226","measuredH":"32","x":"506","y":"1275","properties":{"color":"4985136","size":"24","text":"Found a job already?"}},{"ID":"12411","typeID":"Arrow","zOrder":"1","w":"1","h":"179","measuredW":"150","measuredH":"100","x":"773","y":"1110","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":0},"p1":{"x":0.5000000000000007,"y":-1.5906276266511653e-18},"p2":{"x":0,"y":179.33333333333326}}},{"ID":"12412","typeID":"Arrow","zOrder":"3","w":"88","h":"1","measuredW":"150","measuredH":"100","x":"684","y":"1150","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":87.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":-0.33333333333337123,"y":-0.3030303030302548}}},{"ID":"12413","typeID":"Arrow","zOrder":"2","w":"87","h":"1","measuredW":"150","measuredH":"100","x":"439","y":"1151","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","color":"13369344","p0":{"x":87,"y":-0.3333333333334849},"p1":{"x":0.5,"y":0},"p2":{"x":-0.3333333333333144,"y":-0.3333333333334849}}},{"ID":"12414","typeID":"Label","zOrder":"70","measuredW":"323","measuredH":"26","x":"850","y":"1137","properties":{"color":"4985136","size":"18","text":"May not be required for a junior position"}},{"ID":"12415","typeID":"Canvas","zOrder":"71","w":"10","h":"42","measuredW":"100","measuredH":"70","x":"828","y":"1129","properties":{"color":"40463","borderColor":"40463"}},{"ID":"12416","typeID":"Label","zOrder":"72","measuredW":"536","measuredH":"26","x":"506","y":"1421","properties":{"size":"18","color":"10027263","text":"Deepen your pool of knowledge and keep building projects till you"}},{"ID":"12417","typeID":"Label","zOrder":"73","measuredW":"360","measuredH":"26","x":"506","y":"1450","properties":{"size":"18","color":"10027263","text":"find a job. Your job will teach you a lot as well."}},{"ID":"12418","typeID":"Arrow","zOrder":"0","w":"1","h":"103","measuredW":"150","measuredH":"100","x":"769","y":"1463","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":0,"y":0.33333333333325754},"p1":{"x":0.5000000000000007,"y":0},"p2":{"x":0,"y":103}}},{"ID":"12419","typeID":"Arrow","zOrder":"74","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"768","y":"1653","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":"12420","typeID":"TextArea","zOrder":"75","w":"499","h":"118","measuredW":"200","measuredH":"140","x":"519","y":"1566"},{"ID":"12421","typeID":"Label","zOrder":"76","measuredW":"431","measuredH":"25","x":"553","y":"1585","properties":{"size":"17","text":"Look at the detailed version for what else you don’t know"}},{"ID":"12423","typeID":"__group__","zOrder":"77","measuredW":"430","measuredH":"44","w":"430","h":"44","x":"554","y":"1620","properties":{"controlName":"json:jsons/roadmaps/frontend.json"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"430","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"149","measuredH":"25","x":"140","y":"9","properties":{"size":"17","text":"Frontend Roadmap"}}]}}},{"ID":"12424","typeID":"Arrow","zOrder":"78","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"811","y":"1720","properties":{"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","color":"16777215"}},{"ID":"12442","typeID":"Arrow","zOrder":"79","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"159","y":"1245","properties":{"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","color":"16777215"}},{"ID":"12443","typeID":"Arrow","zOrder":"80","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"1316","y":"1301","properties":{"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","color":"16777215"}}]},"attributes":{"name":"New Wireframe 1 copy","order":1000022.7455786733,"parentID":null,"notes":""},"branchID":"Master","resourceID":"8024860B-B61F-451D-B579-28AA621BB239","mockupH":"1538","mockupW":"1159","measuredW":"1318","measuredH":"1809","version":"1.0"},"groupOffset":{"x":0,"y":0},"dependencies":[],"projectID":"file:///Users/kamranahmed/Desktop/devops%20roadmap%5C.bmpr"} \ No newline at end of file +{"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"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"213","h":"53","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"168","measuredH":"25","x":"23","y":"14","properties":{"size":"17","text":"Frontend Frameworks"}}]}}},{"ID":"12161","typeID":"__group__","zOrder":"25","measuredW":"98","measuredH":"49","w":"98","h":"49","x":"614","y":"1036","properties":{"controlName":"100-pick-a-framework:react-js"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"98","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"47","measuredH":"25","x":"25","y":"12","properties":{"text":"React","size":"17"}}]}}},{"ID":"12180","typeID":"__group__","zOrder":"26","measuredW":"212","measuredH":"50","w":"212","h":"50","x":"829","y":"1043","properties":{"controlName":"114-css-frameworks"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"212","h":"50","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"131","measuredH":"25","x":"40","y":"13","properties":{"size":"17","text":"CSS Frameworks"}}]}}},{"ID":"12186","typeID":"__group__","zOrder":"27","measuredW":"99","measuredH":"49","w":"99","h":"49","x":"373","y":"1126","properties":{"controlName":"100-testing-your-apps:jest"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"99","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","w":"39","measuredW":"33","measuredH":"25","x":"30","y":"12","properties":{"size":"17","text":"Jest"}}]}}},{"ID":"12188","typeID":"__group__","zOrder":"28","measuredW":"214","measuredH":"49","w":"214","h":"49","x":"507","y":"1126","properties":{"controlName":"115-testing-your-apps"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"214","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16776960"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"144","measuredH":"26","x":"35","y":"11","properties":{"size":"18","text":"Testing your Apps"}}]}}},{"ID":"12253","typeID":"__group__","zOrder":"29","measuredW":"100","measuredH":"49","w":"100","h":"49","x":"1069","y":"1045","properties":{"controlName":"100-css-frameworks:js-first:tailwind-css"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"100","h":"49","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"61","measuredH":"25","x":"19","y":"12","properties":{"size":"17","text":"Tailwind"}}]}}},{"ID":"12264","typeID":"Canvas","zOrder":"22","w":"380","h":"150","measuredW":"100","measuredH":"70","x":"212","y":"300"},{"ID":"12267","typeID":"Label","zOrder":"23","measuredW":"187","measuredH":"32","x":"240","y":"325","properties":{"size":"24","text":"Beginner Version"}},{"ID":"12277","typeID":"Label","zOrder":"30","measuredW":"319","measuredH":"28","x":"240","y":"366","properties":{"color":"4985136","size":"20","text":"This is the trimmed down version of"}},{"ID":"12278","typeID":"Label","zOrder":"31","measuredW":"327","measuredH":"28","x":"240","y":"397","properties":{"color":"4985136","size":"20","text":"the frontend roadmap for beginners."}},{"ID":"12282","typeID":"Arrow","zOrder":"32","w":"1","h":"59","measuredW":"150","measuredH":"100","x":"773","y":"320","properties":{"p0":{"x":0,"y":-0.30303030303031164},"p1":{"x":0.5,"y":0},"p2":{"x":0,"y":58.78787878787875},"curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","color":"40463"}},{"ID":"12283","typeID":"Arrow","zOrder":"33","w":"1","h":"333","measuredW":"150","measuredH":"100","x":"773","y":"442","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":-0.06060606060606233},"p1":{"x":0.5000000000000008,"y":-1.5906276266511653e-18},"p2":{"x":0,"y":332.66666666666663},"color":"40463"}},{"ID":"12284","typeID":"Arrow","zOrder":"10","w":"147","h":"1","measuredW":"150","measuredH":"100","x":"626","y":"574","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":147,"y":0},"p1":{"x":0.5010198135198135,"y":-0.0010307153164296314},"p2":{"x":0,"y":0},"color":"40463"}},{"ID":"12290","typeID":"Arrow","zOrder":"11","w":"98","h":"1","measuredW":"150","measuredH":"100","x":"773","y":"814","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":97.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":-0.4545454545454959,"y":-0.30303030303031164},"color":"10027263"}},{"ID":"12291","typeID":"Arrow","zOrder":"12","w":"87","h":"1","measuredW":"150","measuredH":"100","x":"685","y":"640","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":87,"y":0},"p1":{"x":0.5010198135198135,"y":-0.0010307153164296314},"p2":{"x":-0.2533333333333303,"y":0},"color":"40463"}},{"ID":"12292","typeID":"Label","zOrder":"35","measuredW":"378","measuredH":"26","x":"827","y":"567","properties":{"color":"4985136","size":"18","text":"You should be able to find an internee or junior"}},{"ID":"12293","typeID":"Label","zOrder":"36","measuredW":"333","measuredH":"26","x":"827","y":"599","properties":{"color":"4985136","size":"18","text":"Frontend developer position at this point."}},{"ID":"12299","typeID":"Label","zOrder":"37","measuredW":"428","measuredH":"26","x":"827","y":"642","properties":{"size":"18","text":"Start applying for jobs and keep following to increase","color":"40463"}},{"ID":"12300","typeID":"Label","zOrder":"38","measuredW":"276","measuredH":"26","x":"827","y":"675","properties":{"size":"18","color":"40463","text":"your chances of finding a position."}},{"ID":"12314","typeID":"Arrow","zOrder":"9","w":"131","h":"1","measuredW":"150","measuredH":"100","x":"642","y":"704","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":131,"y":-0.21212121212124657},"p1":{"x":0.5,"y":0},"p2":{"x":0.3030303030302548,"y":-0.21212121212124657},"color":"40463"}},{"ID":"12342","typeID":"Label","zOrder":"39","measuredW":"348","measuredH":"26","x":"196","y":"592","properties":{"color":"4985136","size":"18","text":"When you are following this roadmap, make"}},{"ID":"12343","typeID":"Label","zOrder":"40","measuredW":"338","measuredH":"26","x":"206","y":"625","properties":{"color":"4985136","size":"18","text":"sure to build as many projects as possible"}},{"ID":"12347","typeID":"Label","zOrder":"41","measuredW":"340","measuredH":"26","x":"204","y":"706","properties":{"size":"18","color":"13576743","text":"Click the roadmap nodes for project ideas"}},{"ID":"12357","typeID":"Label","zOrder":"42","measuredW":"145","measuredH":"32","x":"399","y":"548","properties":{"color":"4985136","size":"24","text":"Important Tip"}},{"ID":"12359","typeID":"Label","zOrder":"43","measuredW":"278","measuredH":"26","x":"950","y":"749","properties":{"color":"4985136","size":"18","text":"Create your GitHub profile. Publish"}},{"ID":"12361","typeID":"Label","zOrder":"44","measuredW":"300","measuredH":"26","x":"950","y":"779","properties":{"color":"4985136","size":"18","text":"the projects that you have developed"}},{"ID":"12362","typeID":"Label","zOrder":"45","measuredW":"229","measuredH":"26","x":"950","y":"809","properties":{"color":"4985136","size":"18","text":"so far to your GitHub profile."}},{"ID":"12364","typeID":"Label","zOrder":"46","measuredW":"249","measuredH":"26","x":"950","y":"849","properties":{"size":"18","text":"Use git for your future projects.","color":"10027263"}},{"ID":"12365","typeID":"Arrow","zOrder":"47","w":"84","h":"1","measuredW":"150","measuredH":"100","x":"686","y":"913","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":83.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":0,"y":-0.3030303030302548}}},{"ID":"12366","typeID":"Arrow","zOrder":"8","w":"1","h":"73","measuredW":"150","measuredH":"100","x":"656","y":"821","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.39999999999997726,"y":-0.3030303030302548},"p1":{"x":0.4999999999999999,"y":0},"p2":{"x":-0.39999999999997726,"y":72.66666666666674},"stroke":"dotted","color":"40463"}},{"ID":"12369","typeID":"Arrow","zOrder":"50","w":"1","h":"57","measuredW":"150","measuredH":"100","x":"773","y":"784","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":0,"y":-0.06060606060606233},"p1":{"x":0.5000000000000006,"y":-1.590627626651165e-18},"p2":{"x":0,"y":56.66666666666663},"color":"10027263"}},{"ID":"12371","typeID":"Arrow","zOrder":"51","w":"1","h":"184","measuredW":"150","measuredH":"100","x":"773","y":"854","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":0},"p1":{"x":0.5000000000000007,"y":-1.5906276266511654e-18},"p2":{"x":0,"y":184}}},{"ID":"12373","typeID":"Arrow","zOrder":"52","w":"1","h":"44","measuredW":"150","measuredH":"100","x":"773","y":"1050","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":0,"y":0.33333333333325754},"p1":{"x":0.5000000000000006,"y":0},"p2":{"x":0,"y":44}}},{"ID":"12375","typeID":"Label","zOrder":"53","measuredW":"291","measuredH":"26","x":"174","y":"886","properties":{"color":"4985136","size":"18","text":"npm should be a quick one. Just get"}},{"ID":"12376","typeID":"Label","zOrder":"54","measuredW":"272","measuredH":"26","x":"193","y":"917","properties":{"color":"4985136","size":"18","text":"the basic idea and jump to React."}},{"ID":"12377","typeID":"Label","zOrder":"55","measuredW":"266","measuredH":"26","x":"199","y":"963","properties":{"size":"18","color":"40463","text":"Create some projects with React"}},{"ID":"12379","typeID":"Arrow","zOrder":"7","w":"98","h":"1","measuredW":"150","measuredH":"100","x":"774","y":"1069","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":97.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":-0.4545454545454959,"y":-0.30303030303031164}}},{"ID":"12382","typeID":"Arrow","zOrder":"6","w":"98","h":"1","measuredW":"150","measuredH":"100","x":"1016","y":"1069","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"10027263","p0":{"x":97.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.5,"y":0},"p2":{"x":-0.4545454545454959,"y":-0.30303030303031164},"stroke":"dotted"}},{"ID":"12393","typeID":"Arrow","zOrder":"5","w":"1","h":"73","measuredW":"150","measuredH":"100","x":"656","y":"983","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":-0.39999999999997726,"y":-0.3030303030302548},"p1":{"x":0.4999999999999999,"y":0},"p2":{"x":-0.39999999999997726,"y":72.66666666666674},"stroke":"dotted","color":"40463"}},{"ID":"12394","typeID":"Arrow","zOrder":"4","w":"88","h":"1","measuredW":"150","measuredH":"100","x":"685","y":"978","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":87.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":-0.33333333333337123,"y":-0.3030303030302548}}},{"ID":"12396","typeID":"Label","zOrder":"56","measuredW":"179","measuredH":"26","x":"286","y":"993","properties":{"size":"18","color":"40463","text":"involving API calls etc."}},{"ID":"12397","typeID":"Label","zOrder":"57","measuredW":"242","measuredH":"26","x":"302","y":"655","properties":{"color":"4985136","size":"18","text":"for each node of the roadmap"}},{"ID":"12401","typeID":"Label","zOrder":"58","measuredW":"427","measuredH":"26","x":"831","y":"969","properties":{"color":"4985136","size":"18","text":"There are several CSS frameworks. You can pick any."}},{"ID":"12403","typeID":"Label","zOrder":"59","measuredW":"390","measuredH":"26","x":"831","y":"999","properties":{"color":"4985136","size":"18","text":"Tailwind would be my personal recommendation."}},{"ID":"12406","typeID":"Label","zOrder":"60","measuredW":"532","measuredH":"26","x":"506","y":"1319","properties":{"color":"4985136","size":"18","text":"At this point, you should have enough knowledge to find a junior to"}},{"ID":"12407","typeID":"Label","zOrder":"61","measuredW":"529","measuredH":"26","x":"506","y":"1349","properties":{"color":"4985136","size":"18","text":"mid-level (maybe even senior) frontend developer position at any"}},{"ID":"12408","typeID":"Label","zOrder":"62","measuredW":"441","measuredH":"26","x":"506","y":"1379","properties":{"color":"4985136","size":"18","text":"company (depending on the depth of your knowledge)."}},{"ID":"12410","typeID":"Label","zOrder":"63","measuredW":"226","measuredH":"32","x":"506","y":"1275","properties":{"color":"4985136","size":"24","text":"Found a job already?"}},{"ID":"12411","typeID":"Arrow","zOrder":"0","w":"1","h":"146","measuredW":"150","measuredH":"100","x":"773","y":"1108","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":0},"p1":{"x":0.5000000000000006,"y":-1.5906276266511649e-18},"p2":{"x":0,"y":145.92702085489077}}},{"ID":"12412","typeID":"Arrow","zOrder":"3","w":"88","h":"1","measuredW":"150","measuredH":"100","x":"684","y":"1150","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":87.60000000000002,"y":-0.3030303030302548},"p1":{"x":0.49999999999999994,"y":0},"p2":{"x":-0.33333333333337123,"y":-0.3030303030302548}}},{"ID":"12413","typeID":"Arrow","zOrder":"2","w":"87","h":"1","measuredW":"150","measuredH":"100","x":"439","y":"1151","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","stroke":"dotted","color":"13369344","p0":{"x":87,"y":-0.3333333333334849},"p1":{"x":0.5,"y":0},"p2":{"x":-0.3333333333333144,"y":-0.3333333333334849}}},{"ID":"12414","typeID":"Label","zOrder":"64","measuredW":"323","measuredH":"26","x":"831","y":"1137","properties":{"color":"4985136","size":"18","text":"May not be required for a junior position"}},{"ID":"12416","typeID":"Label","zOrder":"65","measuredW":"536","measuredH":"26","x":"506","y":"1421","properties":{"size":"18","color":"10027263","text":"Deepen your pool of knowledge and keep building projects till you"}},{"ID":"12417","typeID":"Label","zOrder":"66","measuredW":"360","measuredH":"26","x":"506","y":"1450","properties":{"size":"18","color":"10027263","text":"find a job. Your job will teach you a lot as well."}},{"ID":"12418","typeID":"Arrow","zOrder":"1","w":"1","h":"71","measuredW":"150","measuredH":"100","x":"769","y":"1500","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":-0.05210330899694782},"p1":{"x":0.5000000000000007,"y":0},"p2":{"x":0,"y":71}}},{"ID":"12419","typeID":"Arrow","zOrder":"67","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"768","y":"1653","properties":{"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","color":"40463"}},{"ID":"12420","typeID":"TextArea","zOrder":"68","w":"499","h":"118","measuredW":"200","measuredH":"140","x":"519","y":"1566"},{"ID":"12421","typeID":"Label","zOrder":"69","measuredW":"431","measuredH":"25","x":"553","y":"1585","properties":{"size":"17","text":"Look at the detailed version for what else you don’t know"}},{"ID":"12423","typeID":"__group__","zOrder":"70","measuredW":"430","measuredH":"44","w":"430","h":"44","x":"554","y":"1620","properties":{"controlName":"json:jsons/roadmaps/frontend.json"},"children":{"controls":{"control":[{"ID":"0","typeID":"TextArea","zOrder":"0","w":"430","h":"44","measuredW":"200","measuredH":"140","x":"0","y":"0","properties":{"color":"16770457"}},{"ID":"1","typeID":"Label","zOrder":"1","measuredW":"149","measuredH":"25","x":"140","y":"9","properties":{"size":"17","text":"Frontend Roadmap"}}]}}},{"ID":"12424","typeID":"Arrow","zOrder":"71","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"811","y":"1720","properties":{"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","color":"16777215"}},{"ID":"12442","typeID":"Arrow","zOrder":"72","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"159","y":"1245","properties":{"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","color":"16777215"}},{"ID":"12443","typeID":"Arrow","zOrder":"73","w":"2","h":"89","measuredW":"150","measuredH":"100","x":"1316","y":"1301","properties":{"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","color":"16777215"}},{"ID":"12457","typeID":"Arrow","zOrder":"74","w":"1","h":"239","measuredW":"150","measuredH":"100","x":"470","y":"1256","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":0},"p1":{"x":0.5001202440713308,"y":-1.564400550106179e-18},"p2":{"x":0,"y":239}}},{"ID":"12458","typeID":"Arrow","zOrder":"75","w":"1","h":"246","measuredW":"150","measuredH":"100","x":"1089","y":"1254","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":-0.4895379613631121},"p1":{"x":0.5000000000000006,"y":-1.5906276266511654e-18},"p2":{"x":0,"y":245.0861379926555}}},{"ID":"12459","typeID":"Arrow","zOrder":"76","w":"618","h":"1","measuredW":"150","measuredH":"100","x":"470","y":"1498","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":617.8323270952046,"y":0.0861379926554946},"p1":{"x":0.5000000000000004,"y":-1.594806375683533e-18},"p2":{"x":0,"y":0.0861379926554946}}},{"ID":"12460","typeID":"Arrow","zOrder":"77","w":"618","h":"1","measuredW":"150","measuredH":"100","x":"470","y":"1255","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":617.8323270952046,"y":0.0861379926554946},"p1":{"x":0.5000000000000004,"y":-1.594806375683533e-18},"p2":{"x":0,"y":0.0861379926554946}}},{"ID":"12462","typeID":"Arrow","zOrder":"78","w":"618","h":"1","measuredW":"150","measuredH":"100","x":"471","y":"1501","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","p0":{"x":617.8323270952046,"y":0.0861379926554946},"p1":{"x":0.5000000000000004,"y":-1.594806375683533e-18},"p2":{"x":0,"y":0.0861379926554946},"color":"40463"}},{"ID":"12463","typeID":"Arrow","zOrder":"79","w":"1","h":"239","measuredW":"150","measuredH":"100","x":"472","y":"1256","properties":{"curvature":"0","leftArrow":"false","rightArrow":"false","color":"40463","p0":{"x":0,"y":0},"p1":{"x":0.5001202440713308,"y":-1.564400550106179e-18},"p2":{"x":0,"y":239}}}]},"attributes":{"name":"New Wireframe 1 copy","order":1000022.7455786733,"parentID":null,"notes":""},"branchID":"Master","resourceID":"8024860B-B61F-451D-B579-28AA621BB239","mockupH":"1538","mockupW":"1159","measuredW":"1318","measuredH":"1809","version":"1.0"},"groupOffset":{"x":0,"y":0},"dependencies":[],"projectID":"file:///Users/kamranahmed/Desktop/devops%20roadmap%5C.bmpr"} \ No newline at end of file diff --git a/src/components/FrameRenderer/FrameRenderer.astro b/src/components/FrameRenderer/FrameRenderer.astro index 357c6186f..6c274de9a 100644 --- a/src/components/FrameRenderer/FrameRenderer.astro +++ b/src/components/FrameRenderer/FrameRenderer.astro @@ -1,6 +1,5 @@ --- import Loader from '../Loader.astro'; -import TopicOverlay from '../TopicOverlay/TopicOverlay.astro'; import './FrameRenderer.css'; export interface Props { diff --git a/src/components/FrameRenderer/renderer.js b/src/components/FrameRenderer/renderer.js index 18b53a97a..07f40f804 100644 --- a/src/components/FrameRenderer/renderer.js +++ b/src/components/FrameRenderer/renderer.js @@ -15,6 +15,7 @@ export class Renderer { this.jsonToSvg = this.jsonToSvg.bind(this); this.handleSvgClick = this.handleSvgClick.bind(this); this.prepareConfig = this.prepareConfig.bind(this); + this.switchRoadmap = this.switchRoadmap.bind(this); } get loaderEl() { @@ -86,6 +87,45 @@ export class Renderer { this.jsonToSvg(this.jsonUrl); } + switchRoadmap(newJsonUrl) { + const newJsonFileSlug = newJsonUrl.split('/').pop().replace('.json', ''); + + // Only update the URL + if (window?.history?.pushState) { + const url = new URL(window.location); + const type = this.resourceType[0]; // r for roadmap, b for best-practices + + url.searchParams.delete(type); + url.searchParams.set(type, newJsonFileSlug); + + window.history.pushState(null, '', url.toString()); + } + + const pageTitle = this.resourceId.replace(/\b\w/g, (l) => l.toUpperCase()); + const pageType = this.resourceType.replace(/\b\w/g, (l) => l.toUpperCase()); + const newRoadmapType = newJsonFileSlug.replace(/\b\w/g, (l) => l.toUpperCase()).replace('-', ' '); + + console.log({ + // RoadmapClick, BestPracticesClick, etc + category: `${pageType.replace('-', '')}Click`, + // Roadmap Switch, BestPractices Switch, etc + action: `${pageType} Switch`, + label: `${pageTitle} / ${newRoadmapType}`, + }); + + // window.fireEvent({ + // // RoadmapClick, BestPracticesClick, etc + // category: `${pageType.replace('-', '')}Click`, + // // Roadmap Switch, BestPractices Switch, etc + // action: `${pageType} Switch`, + // label: `${pageTitle} Switch`, + // }); + + this.jsonToSvg(newJsonUrl).then(() => { + this.containerEl.setAttribute('style', ''); + }); + } + handleSvgClick(e) { const targetGroup = e.target.closest('g') || {}; const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : ''; @@ -101,9 +141,10 @@ export class Renderer { } if (/^json:/.test(groupId)) { - this.jsonToSvg(groupId.replace('json:', '')).then(() => { - this.containerEl.setAttribute('style', ''); - }); + // e.g. /roadmaps/frontend-beginner.json + const newJsonUrl = groupId.replace('json:', ''); + + this.switchRoadmap(newJsonUrl); return; }