From 6f343d3eb534f829d5d458682ec1e2c5120a29b6 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 13 Oct 2022 17:55:46 +0400 Subject: [PATCH] Add vite, vitest and playwright --- content/roadmaps/103-react/content-paths.json | 5 + .../100-create-react-app.md | 0 .../100-cli-tools/101-vite.md | 8 + .../100-cli-tools/readme.md | 3 + .../106-testing/103-vitest.md | 7 + .../106-testing/104-playwright.md | 7 + public/project/react.json | 2277 ++++++++++------- 7 files changed, 1425 insertions(+), 882 deletions(-) rename content/roadmaps/103-react/content/100-react-fundamental-topics/{ => 100-cli-tools}/100-create-react-app.md (100%) create mode 100644 content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md create mode 100644 content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md create mode 100644 content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md create mode 100644 content/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md diff --git a/content/roadmaps/103-react/content-paths.json b/content/roadmaps/103-react/content-paths.json index f4f86db9e..a5825ab9e 100644 --- a/content/roadmaps/103-react/content-paths.json +++ b/content/roadmaps/103-react/content-paths.json @@ -12,6 +12,9 @@ "react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md", "react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md", "react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md", + "react-fundamental-topics:cli-tools": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md", + "react-fundamental-topics:cli-tools:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md", + "react-fundamental-topics:cli-tools:vite": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md", "react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md", "react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md", "react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md", @@ -49,6 +52,8 @@ "react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md", "react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md", "react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md", + "react-ecosystem:testing:vitest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md", + "react-ecosystem:testing:playwright": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md", "react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md", "react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md", "react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md", diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md similarity index 100% rename from content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md rename to content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md new file mode 100644 index 000000000..45e317c3f --- /dev/null +++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md @@ -0,0 +1,8 @@ +# Vite + +Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. + +Free Content +Vite Website +Vite Documentation +Vite Crash Course diff --git a/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md new file mode 100644 index 000000000..fdd3d4b77 --- /dev/null +++ b/content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md @@ -0,0 +1,3 @@ +## CLI Tools + +The most famous options while working with react are `create-react-app` and `vite`. diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md b/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md new file mode 100644 index 000000000..6febec7b0 --- /dev/null +++ b/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md @@ -0,0 +1,7 @@ +# Vitest + +Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support. +Works on React, Vue, Svelte and more projects created with Vite + +Free Content +Vitest Website diff --git a/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md b/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md new file mode 100644 index 000000000..dd7d047df --- /dev/null +++ b/content/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.md @@ -0,0 +1,7 @@ +# Playwright + +Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.Playwright leverages the DevTools protocol to write powerful, stable automated tests.Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios. + +Free Content +Official Website: Playwright +Playwright Tuotorial diff --git a/public/project/react.json b/public/project/react.json index 7050ef3c8..664098c86 100644 --- a/public/project/react.json +++ b/public/project/react.json @@ -3,86 +3,28 @@ "controls": { "control": [ { - "ID": "9050", - "typeID": "Arrow", - "zOrder": "0", - "w": "24", - "h": "77", - "measuredW": "150", - "measuredH": "100", - "x": "628", - "y": "193", - "properties": { - "curvature": "0", - "leftArrow": "false", - "rightArrow": "false", - "color": "10027263", - "p0": { - "x": 10, - "y": -0.3333333333333428 - }, - "p1": { - "x": 0.5175865027166142, - "y": -0.21132399199313673 - }, - "p2": { - "x": 24.66666666666663, - "y": 77 - } - } - }, - { - "ID": "9051", + "ID": "10430", "typeID": "Label", - "zOrder": "1", + "zOrder": "4", "measuredW": "76", "measuredH": "36", - "x": "657", - "y": "277", + "x": "852", + "y": "96", "properties": { "size": "28", "text": "React" } }, { - "ID": "9052", - "typeID": "Arrow", - "zOrder": "2", - "w": "27", - "measuredW": "150", - "measuredH": "100", - "x": "648", - "y": "37", - "properties": { - "curvature": "0", - "leftArrow": "false", - "rightArrow": "false", - "color": "10027263", - "stroke": "dotted", - "p0": { - "x": 20.66666666666663, - "y": -0.33333333333333215 - }, - "p1": { - "x": 0.4525527916281198, - "y": 0.13367847141227748 - }, - "p2": { - "x": -0.019880609337405986, - "y": 99.62109147224172 - } - } - }, - { - "ID": "9053", + "ID": "10432", "typeID": "Arrow", - "zOrder": "3", + "zOrder": "5", "w": "2", "h": "96", "measuredW": "150", "measuredH": "100", - "x": "421", - "y": "1101", + "x": "611", + "y": "1171", "properties": { "color": "2848996", "curvature": "0", @@ -108,15 +50,15 @@ } }, { - "ID": "9054", + "ID": "10433", "typeID": "Arrow", - "zOrder": "4", + "zOrder": "6", "w": "105", "h": "15", "measuredW": "150", "measuredH": "100", - "x": "258", - "y": "1050", + "x": "448", + "y": "1120", "properties": { "color": "2848996", "curvature": "-1", @@ -139,15 +81,15 @@ } }, { - "ID": "9055", + "ID": "10434", "typeID": "Arrow", - "zOrder": "5", + "zOrder": "7", "w": "92", "h": "22", "measuredW": "150", "measuredH": "100", - "x": "269", - "y": "1022", + "x": "459", + "y": "1092", "properties": { "color": "2848996", "curvature": "0", @@ -170,15 +112,15 @@ } }, { - "ID": "9056", + "ID": "10435", "typeID": "Arrow", - "zOrder": "6", + "zOrder": "8", "w": "89", "h": "19", "measuredW": "150", "measuredH": "100", - "x": "265", - "y": "993", + "x": "455", + "y": "1063", "properties": { "color": "2848996", "curvature": "-1", @@ -201,15 +143,15 @@ } }, { - "ID": "9057", + "ID": "10436", "typeID": "Arrow", - "zOrder": "7", + "zOrder": "9", "w": "6", "h": "75", "measuredW": "150", "measuredH": "100", - "x": "918", - "y": "1073", + "x": "1108", + "y": "1143", "properties": { "color": "2848996", "curvature": "1", @@ -235,15 +177,15 @@ } }, { - "ID": "9058", + "ID": "10437", "typeID": "Arrow", - "zOrder": "8", + "zOrder": "10", "w": "155", "h": "517", "measuredW": "150", "measuredH": "100", - "x": "487", - "y": "963", + "x": "677", + "y": "1033", "properties": { "color": "2848996", "curvature": "-1", @@ -266,15 +208,15 @@ } }, { - "ID": "9059", + "ID": "10438", "typeID": "Arrow", - "zOrder": "9", + "zOrder": "11", "w": "95", "h": "1", "measuredW": "150", "measuredH": "100", - "x": "261", - "y": "1476", + "x": "451", + "y": "1546", "properties": { "color": "2848996", "curvature": "0", @@ -300,15 +242,15 @@ } }, { - "ID": "9060", + "ID": "10439", "typeID": "Arrow", - "zOrder": "10", + "zOrder": "12", "w": "101", "h": "33", "measuredW": "150", "measuredH": "100", - "x": "994", - "y": "1321", + "x": "1184", + "y": "1391", "properties": { "color": "2848996", "curvature": "-1", @@ -334,15 +276,15 @@ } }, { - "ID": "9061", + "ID": "10440", "typeID": "Arrow", - "zOrder": "11", + "zOrder": "13", "w": "88", "h": "7", "measuredW": "150", "measuredH": "100", - "x": "997", - "y": "1303", + "x": "1187", + "y": "1373", "properties": { "color": "2848996", "curvature": "1", @@ -368,15 +310,15 @@ } }, { - "ID": "9062", + "ID": "10441", "typeID": "Arrow", - "zOrder": "12", + "zOrder": "14", "w": "86", "h": "55", "measuredW": "150", "measuredH": "100", - "x": "997", - "y": "1252", + "x": "1187", + "y": "1322", "properties": { "color": "2848996", "curvature": "1", @@ -402,15 +344,15 @@ } }, { - "ID": "9063", + "ID": "10442", "typeID": "Arrow", - "zOrder": "13", - "w": "7", - "h": "622", + "zOrder": "15", + "w": "6", + "h": "736", "measuredW": "150", "measuredH": "100", - "x": "682", - "y": "965", + "x": "876", + "y": "1035", "properties": { "color": "2848996", "curvature": "0", @@ -418,29 +360,29 @@ "leftArrow": "false", "rightArrow": "false", "p0": { - "x": 4, + "x": 0, "y": 0 }, "p1": { "x": 0.5326751848090502, - "y": 0.00847877943364588 + "y": 0.008478779433645882 }, "p2": { "x": 0, - "y": 622 + "y": 735.966031340103 } } }, { - "ID": "9064", + "ID": "10443", "typeID": "Arrow", - "zOrder": "14", + "zOrder": "16", "w": "1", "h": "82", "measuredW": "150", "measuredH": "100", - "x": "935", - "y": "1307", + "x": "1125", + "y": "1377", "properties": { "color": "2848996", "curvature": "-1", @@ -466,15 +408,15 @@ } }, { - "ID": "9065", + "ID": "10444", "typeID": "Arrow", - "zOrder": "15", + "zOrder": "17", "w": "170", "h": "343", "measuredW": "150", "measuredH": "100", - "x": "712", - "y": "967", + "x": "902", + "y": "1037", "properties": { "color": "2848996", "curvature": "-1", @@ -497,15 +439,15 @@ } }, { - "ID": "9066", + "ID": "10445", "typeID": "Arrow", - "zOrder": "16", + "zOrder": "18", "w": "65", "h": "99", "measuredW": "150", "measuredH": "100", - "x": "490", - "y": "949", + "x": "680", + "y": "1019", "properties": { "color": "2848996", "curvature": "-1", @@ -528,15 +470,15 @@ } }, { - "ID": "9067", + "ID": "10446", "typeID": "Arrow", - "zOrder": "17", + "zOrder": "19", "w": "64", "h": "109", "measuredW": "150", "measuredH": "100", - "x": "738", - "y": "958", + "x": "928", + "y": "1028", "properties": { "color": "2848996", "curvature": "-1", @@ -559,77 +501,77 @@ } }, { - "ID": "9068", + "ID": "10447", "typeID": "Arrow", - "zOrder": "18", - "w": "58", - "h": "42", + "zOrder": "20", + "w": "86", + "h": "54", "measuredW": "150", "measuredH": "100", - "x": "986", - "y": "851", + "x": "1158", + "y": "915", "properties": { "color": "2848996", "curvature": "1", "direction": "bottom", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 57, - "y": 0 + "x": 86.52998069063369, + "y": -0.02712034141109143 }, "p1": { - "x": 0.35054421156786897, - "y": -0.018800035980930063 + "x": 0.3915365653245692, + "y": 0.03985209531635175 }, "p2": { - "x": 0, - "y": 41 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": 0.31673063161792925, + "y": 54.20379501829245 + } } }, { - "ID": "9069", + "ID": "10448", "typeID": "Arrow", - "zOrder": "19", - "w": "67", - "h": "3", + "zOrder": "21", + "w": "89", + "h": "8", "measuredW": "150", "measuredH": "100", - "x": "982", - "y": "895", + "x": "1149", + "y": "965", "properties": { "color": "2848996", "curvature": "1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 66, + "x": 89, "y": 0 }, "p1": { - "x": 0.5343850513095418, - "y": 0.03614642364833821 + "x": 0.534385051309542, + "y": 0.03614642364833824 }, "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": -0.41702340730330434, + "y": 6.984867600841426 + } } }, { - "ID": "9070", + "ID": "10449", "typeID": "Arrow", - "zOrder": "20", + "zOrder": "22", "w": "60", "h": "103", "measuredW": "150", "measuredH": "100", - "x": "986", - "y": "990", + "x": "1176", + "y": "1060", "properties": { "color": "2848996", "curvature": "1", @@ -652,15 +594,15 @@ } }, { - "ID": "9071", + "ID": "10450", "typeID": "Arrow", - "zOrder": "21", + "zOrder": "23", "w": "66", "h": "75", "measuredW": "150", "measuredH": "100", - "x": "985", - "y": "981", + "x": "1175", + "y": "1051", "properties": { "color": "2848996", "curvature": "-1", @@ -683,46 +625,46 @@ } }, { - "ID": "9072", + "ID": "10451", "typeID": "Arrow", - "zOrder": "22", - "w": "74", - "h": "27", + "zOrder": "24", + "w": "86", + "h": "4", "measuredW": "150", "measuredH": "100", - "x": "984", - "y": "975", + "x": "1158", + "y": "1043", "properties": { "color": "2848996", "curvature": "-1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 73, - "y": 26 + "x": 86.52998069063369, + "y": 2.683291038387324 }, "p1": { - "x": 0.5398834304746045, - "y": -0.05428809325562032 + "x": 0.4826498422712937, + "y": 0.022082018927444474 }, "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": 0.31673063161792925, + "y": -0.09778154416153484 + } } }, { - "ID": "9073", + "ID": "10452", "typeID": "Arrow", - "zOrder": "23", + "zOrder": "25", "w": "63", "h": "24", "measuredW": "150", "measuredH": "100", - "x": "740", - "y": "955", + "x": "930", + "y": "1025", "properties": { "color": "2848996", "curvature": "-1", @@ -745,46 +687,46 @@ } }, { - "ID": "9074", + "ID": "10453", "typeID": "Arrow", - "zOrder": "24", - "w": "74", - "h": "44", + "zOrder": "26", + "w": "95", + "h": "88", "measuredW": "150", "measuredH": "100", - "x": "984", - "y": "906", + "x": "1149", + "y": "872", "properties": { "color": "2848996", "curvature": "-1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 73, - "y": 43 + "x": 94.13944439935926, + "y": -0.13374537091908678 }, "p1": { - "x": 0.4578313253012048, - "y": -0.012048192771084336 + "x": 0.47109352379113933, + "y": 0.05433838432583797 }, "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": -0.41702340730330434, + "y": 87.47004097937133 + } } }, { - "ID": "9075", + "ID": "10454", "typeID": "Arrow", - "zOrder": "25", + "zOrder": "27", "w": "95", "h": "18", "measuredW": "150", "measuredH": "100", - "x": "261", - "y": "1172", + "x": "451", + "y": "1242", "properties": { "color": "2848996", "curvature": "1", @@ -810,15 +752,15 @@ } }, { - "ID": "9076", + "ID": "10455", "typeID": "Arrow", - "zOrder": "26", + "zOrder": "28", "w": "94", "h": "59", "measuredW": "150", "measuredH": "100", - "x": "261", - "y": "1126", + "x": "451", + "y": "1196", "properties": { "color": "2848996", "curvature": "1", @@ -844,15 +786,15 @@ } }, { - "ID": "9077", + "ID": "10456", "typeID": "Arrow", - "zOrder": "27", + "zOrder": "29", "w": "2", "h": "96", "measuredW": "150", "measuredH": "100", - "x": "421", - "y": "1191", + "x": "611", + "y": "1261", "properties": { "color": "2848996", "curvature": "0", @@ -878,15 +820,15 @@ } }, { - "ID": "9078", + "ID": "10457", "typeID": "Arrow", - "zOrder": "28", + "zOrder": "30", "w": "89", "h": "110", "measuredW": "150", "measuredH": "100", - "x": "264", - "y": "1205", + "x": "454", + "y": "1275", "properties": { "color": "2848996", "curvature": "-1", @@ -909,15 +851,15 @@ } }, { - "ID": "9079", + "ID": "10458", "typeID": "Arrow", - "zOrder": "29", + "zOrder": "31", "w": "102", "h": "170", "measuredW": "150", "measuredH": "100", - "x": "259", - "y": "1195", + "x": "449", + "y": "1265", "properties": { "color": "2848996", "curvature": "1", @@ -940,15 +882,15 @@ } }, { - "ID": "9080", + "ID": "10459", "typeID": "Arrow", - "zOrder": "30", + "zOrder": "32", "w": "95", "h": "73", "measuredW": "150", "measuredH": "100", - "x": "264", - "y": "1192", + "x": "454", + "y": "1262", "properties": { "color": "2848996", "curvature": "-1", @@ -971,15 +913,15 @@ } }, { - "ID": "9081", + "ID": "10460", "typeID": "Arrow", - "zOrder": "31", + "zOrder": "33", "w": "68", "h": "51", "measuredW": "150", "measuredH": "100", - "x": "738", - "y": "896", + "x": "928", + "y": "966", "properties": { "color": "2848996", "curvature": "1", @@ -1002,15 +944,15 @@ } }, { - "ID": "9082", + "ID": "10461", "typeID": "Arrow", - "zOrder": "32", + "zOrder": "34", "w": "106", "h": "16", "measuredW": "150", "measuredH": "100", - "x": "258", - "y": "947", + "x": "448", + "y": "1017", "properties": { "color": "2848996", "curvature": "1", @@ -1033,15 +975,15 @@ } }, { - "ID": "9083", + "ID": "10462", "typeID": "Arrow", - "zOrder": "33", + "zOrder": "35", "w": "94", "h": "31", "measuredW": "150", "measuredH": "100", - "x": "261", - "y": "909", + "x": "451", + "y": "979", "properties": { "color": "2848996", "curvature": "1", @@ -1064,15 +1006,15 @@ } }, { - "ID": "9084", + "ID": "10463", "typeID": "Arrow", - "zOrder": "34", + "zOrder": "36", "w": "109", "h": "5", "measuredW": "150", "measuredH": "100", - "x": "460", - "y": "942", + "x": "650", + "y": "1012", "properties": { "color": "2848996", "curvature": "0", @@ -1098,15 +1040,15 @@ } }, { - "ID": "9085", + "ID": "10464", "typeID": "Arrow", - "zOrder": "35", + "zOrder": "37", "w": "104", "h": "234", "measuredW": "150", "measuredH": "100", - "x": "484", - "y": "957", + "x": "674", + "y": "1027", "properties": { "color": "2848996", "curvature": "-1", @@ -1129,46 +1071,15 @@ } }, { - "ID": "9086", - "typeID": "Arrow", - "zOrder": "36", - "w": "103", - "h": "132", - "measuredW": "150", - "measuredH": "100", - "x": "858", - "y": "663", - "properties": { - "color": "2848996", - "curvature": "1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 102, - "y": 131 - }, - "p1": { - "x": 0.5003083620533285, - "y": 0.08372936695084346 - }, - "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" - } - }, - { - "ID": "9087", + "ID": "10466", "typeID": "Arrow", - "zOrder": "37", + "zOrder": "38", "w": "49", "h": "292", "measuredW": "150", "measuredH": "100", - "x": "699", - "y": "651", + "x": "889", + "y": "721", "properties": { "color": "2848996", "curvature": "1", @@ -1190,108 +1101,108 @@ } }, { - "ID": "9088", + "ID": "10467", "typeID": "Arrow", - "zOrder": "38", - "w": "117", - "h": "92", + "zOrder": "39", + "w": "153", + "h": "89", "measuredW": "150", "measuredH": "100", - "x": "848", - "y": "653", + "x": "1007", + "y": "715", "properties": { "color": "2848996", "curvature": "1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 116, - "y": 91 + "x": 152.70726692289236, + "y": 88.72997635663273 }, "p1": { - "x": 0.4263237797304136, - "y": 0.049960896167824446 + "x": 0.4356676038192479, + "y": -0.019497968927647383 }, "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": -0.2517251172973829, + "y": -0.26434628493211676 + } } }, { - "ID": "9089", + "ID": "10468", "typeID": "Arrow", - "zOrder": "39", - "w": "111", - "h": "53", + "zOrder": "40", + "w": "122", + "h": "32", "measuredW": "150", "measuredH": "100", - "x": "850", - "y": "645", + "x": "1033", + "y": "720", "properties": { "color": "2848996", "curvature": "1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 110, - "y": 52 + "x": 122.53565804906884, + "y": 32.28013357947805 }, "p1": { - "x": 0.4531207781680627, - "y": 0.04147527695217509 + "x": 0.4342814659840945, + "y": -0.040402879811838384 }, "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": 0.16846441691723157, + "y": 0.29779888016571476 + } } }, { - "ID": "9090", + "ID": "10469", "typeID": "Arrow", - "zOrder": "40", - "w": "119", - "h": "7", + "zOrder": "41", + "w": "136", + "h": "60", "measuredW": "150", "measuredH": "100", - "x": "849", - "y": "637", + "x": "1018", + "y": "649", "properties": { "color": "2848996", "curvature": "0", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 118, - "y": 6 + "x": 136.1451217577944, + "y": 0.3804480251686755 }, "p1": { - "x": 0.4652789342214827, - "y": -0.0013322231473772738 + "x": 0.4507017020005973, + "y": 0.05100029859659641 }, "p2": { - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": -0.12743478710171985, + "y": 60.17350854997005 + } } }, { - "ID": "9091", + "ID": "10470", "typeID": "Arrow", - "zOrder": "41", + "zOrder": "42", "w": "89", "h": "106", "measuredW": "150", "measuredH": "100", - "x": "508", - "y": "664", + "x": "698", + "y": "734", "properties": { "color": "2848996", "curvature": "-1", @@ -1314,15 +1225,15 @@ } }, { - "ID": "9092", + "ID": "10471", "typeID": "Arrow", - "zOrder": "42", + "zOrder": "43", "w": "93", "h": "65", "measuredW": "150", "measuredH": "100", - "x": "500", - "y": "660", + "x": "690", + "y": "730", "properties": { "color": "2848996", "curvature": "-1", @@ -1345,15 +1256,15 @@ } }, { - "ID": "9093", + "ID": "10472", "typeID": "Arrow", - "zOrder": "43", + "zOrder": "44", "w": "69", "h": "35", "measuredW": "150", "measuredH": "100", - "x": "305", - "y": "626", + "x": "495", + "y": "696", "properties": { "color": "2848996", "curvature": "0", @@ -1379,15 +1290,15 @@ } }, { - "ID": "9094", + "ID": "10473", "typeID": "Arrow", - "zOrder": "44", + "zOrder": "45", "w": "81", "h": "20", "measuredW": "150", "measuredH": "100", - "x": "317", - "y": "603", + "x": "507", + "y": "673", "properties": { "color": "2848996", "curvature": "0", @@ -1410,49 +1321,46 @@ } }, { - "ID": "9095", + "ID": "10474", "typeID": "Arrow", - "zOrder": "45", - "w": "114", - "h": "76", + "zOrder": "46", + "w": "127", + "h": "1", "measuredW": "150", "measuredH": "100", - "x": "838", - "y": "436", + "x": "1019", + "y": "506", "properties": { "color": "2848996", "curvature": "1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "length": 135.6244815658294, - "x": 113, - "y": 75 + "x": 126.80190401014784, + "y": 0.15521002390022431 }, "p1": { - "length": 0.49034679797322295, - "x": 0.4873025247305478, - "y": 0.05455485014026291 + "x": 0.4839640704625361, + "y": 0.0006376473756898644 }, "p2": { - "length": 0, - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": 0.2631015041727096, + "y": 0.15521002390022431 + } } }, { - "ID": "9096", + "ID": "10475", "typeID": "Arrow", - "zOrder": "46", + "zOrder": "47", "w": "88", "h": "21", "measuredW": "150", "measuredH": "100", - "x": "507", - "y": "620", + "x": "697", + "y": "690", "properties": { "color": "2848996", "curvature": "-1", @@ -1475,15 +1383,15 @@ } }, { - "ID": "9097", + "ID": "10476", "typeID": "Arrow", - "zOrder": "47", + "zOrder": "48", "w": "105", "h": "29", "measuredW": "150", "measuredH": "100", - "x": "497", - "y": "643", + "x": "687", + "y": "713", "properties": { "color": "2848996", "curvature": "-1", @@ -1506,15 +1414,15 @@ } }, { - "ID": "9098", + "ID": "10477", "typeID": "Arrow", - "zOrder": "48", + "zOrder": "49", "w": "108", "h": "118", "measuredW": "150", "measuredH": "100", - "x": "482", - "y": "435", + "x": "672", + "y": "505", "properties": { "color": "2848996", "curvature": "-1", @@ -1537,15 +1445,15 @@ } }, { - "ID": "9099", + "ID": "10478", "typeID": "Arrow", - "zOrder": "49", + "zOrder": "50", "w": "102", "h": "66", "measuredW": "150", "measuredH": "100", - "x": "481", - "y": "436", + "x": "671", + "y": "506", "properties": { "color": "2848996", "curvature": "-1", @@ -1568,15 +1476,15 @@ } }, { - "ID": "9100", + "ID": "10479", "typeID": "Arrow", - "zOrder": "50", + "zOrder": "51", "w": "66", "h": "65", "measuredW": "150", "measuredH": "100", - "x": "1071", - "y": "517", + "x": "1261", + "y": "511", "properties": { "color": "2848996", "curvature": "-1", @@ -1602,49 +1510,45 @@ } }, { - "ID": "9101", + "ID": "10480", "typeID": "Arrow", - "zOrder": "51", - "w": "114", - "h": "32", + "zOrder": "52", + "h": "33", "measuredW": "150", "measuredH": "100", - "x": "847", - "y": "431", + "x": "993", + "y": "459", "properties": { "color": "2848996", "curvature": "1", "direction": "top", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "length": 117.17508267545622, - "x": 113, - "y": 31 + "x": 150.02083142759898, + "y": -0.12302387943111626 }, "p1": { - "length": 0.49034679797322256, - "x": 0.4873025247305474, - "y": 0.0545548501402628 + "x": 0.48730252473054736, + "y": 0.054554850140262706 }, "p2": { - "length": 0, - "x": 0, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": -0.15708803004190486, + "y": 33.2498471111557 + } } }, { - "ID": "9102", + "ID": "10481", "typeID": "Arrow", - "zOrder": "52", + "zOrder": "53", "w": "50", "h": "77", "measuredW": "150", "measuredH": "100", - "x": "1008", - "y": "514", + "x": "1198", + "y": "508", "properties": { "color": "2848996", "curvature": "-1", @@ -1670,49 +1574,46 @@ } }, { - "ID": "9103", + "ID": "10482", "typeID": "Arrow", - "zOrder": "53", - "w": "129", - "h": "11", + "zOrder": "54", + "w": "181", + "h": "83", "measuredW": "150", "measuredH": "100", - "x": "836", - "y": "414", + "x": "961", + "y": "409", "properties": { "color": "2848996", "curvature": "0", "direction": "bottom", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "length": 128, - "x": 128, - "y": 0 + "x": 180.63029513632432, + "y": -0.1823303653113726 }, "p1": { - "length": 0.4652808414804905, - "x": 0.4652789342214827, - "y": -0.0013322231473772849 + "x": 0.4419322661853425, + "y": 0.047879162114662706 }, "p2": { - "length": 10, - "x": 0, - "y": 10 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": -0.13942272935423716, + "y": 83.2498471111557 + } } }, { - "ID": "9104", + "ID": "10483", "typeID": "Arrow", - "zOrder": "54", + "zOrder": "55", "w": "110", "h": "19", "measuredW": "150", "measuredH": "100", - "x": "472", - "y": "433", + "x": "662", + "y": "503", "properties": { "color": "2848996", "curvature": "-1", @@ -1735,15 +1636,15 @@ } }, { - "ID": "9105", + "ID": "10484", "typeID": "Arrow", - "zOrder": "55", + "zOrder": "56", "w": "67", "h": "29", "measuredW": "150", "measuredH": "100", - "x": "277", - "y": "448", + "x": "467", + "y": "518", "properties": { "color": "2848996", "curvature": "1", @@ -1769,15 +1670,15 @@ } }, { - "ID": "9106", + "ID": "10485", "typeID": "Arrow", - "zOrder": "56", + "zOrder": "57", "w": "70", "h": "27", "measuredW": "150", "measuredH": "100", - "x": "278", - "y": "423", + "x": "468", + "y": "493", "properties": { "color": "2848996", "curvature": "1", @@ -1803,112 +1704,52 @@ } }, { - "ID": "9107", - "typeID": "Arrow", - "zOrder": "57", - "w": "38", - "h": "210", - "measuredW": "150", - "measuredH": "100", - "x": "658", - "y": "434", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "top", - "leftArrow": "false", - "p0": { - "x": 23, - "y": 0 - }, - "p1": { - "x": 0.4841230221604845, - "y": -0.13778134699281577 - }, - "p2": { - "x": 37, - "y": 209 - }, - "rightArrow": "false" - } - }, - { - "ID": "9108", - "typeID": "Arrow", - "zOrder": "58", - "w": "30", - "h": "92", - "measuredW": "150", - "measuredH": "100", - "x": "686", - "y": "319", - "properties": { - "color": "2848996", - "curvature": "-1", - "direction": "bottom", - "leftArrow": "false", - "rightArrow": "false", - "p0": { - "x": 24.028182754193494, - "y": 0.15641534085972353 - }, - "p1": { - "x": 0.4488347077805664, - "y": 0.15539619935460736 - }, - "p2": { - "x": 0, - "y": 92 - } - } - }, - { - "ID": "9109", + "ID": "10488", "typeID": "Canvas", - "zOrder": "59", + "zOrder": "58", "w": "350", "h": "141", "measuredW": "100", "measuredH": "70", - "x": "894", - "y": "84" + "x": "1140", + "y": "72" }, { - "ID": "9110", + "ID": "10489", "typeID": "Label", - "zOrder": "60", + "zOrder": "59", "measuredW": "314", "measuredH": "25", - "x": "908", - "y": "101", + "x": "1154", + "y": "89", "properties": { "size": "17", "text": "Find the detailed version of this roadmap" } }, { - "ID": "9111", + "ID": "10490", "typeID": "Label", - "zOrder": "61", + "zOrder": "60", "measuredW": "319", "measuredH": "25", - "x": "908", - "y": "129", + "x": "1154", + "y": "117", "properties": { "size": "17", "text": "along with resources and other roadmaps" } }, { - "ID": "9112", + "ID": "10491", "typeID": "__group__", - "zOrder": "62", + "zOrder": "61", "measuredW": "320", "measuredH": "45", "w": "320", "h": "45", - "x": "909", - "y": "165", + "x": "1155", + "y": "153", "properties": { "controlName": "ext_link:roadmap.sh" }, @@ -2005,46 +1846,46 @@ } }, { - "ID": "9113", + "ID": "10492", "typeID": "Arrow", - "zOrder": "63", - "w": "118", - "h": "51", + "zOrder": "62", + "w": "196", + "h": "128", "measuredW": "150", "measuredH": "100", - "x": "834", - "y": "366", + "x": "944", + "y": "360", "properties": { "color": "2848996", "curvature": "1", "direction": "bottom", "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", "p0": { - "x": 117, - "y": 0 + "x": 196.2397588450499, + "y": 0.14889944008285738 }, "p1": { - "x": 0.45522128005575546, - "y": -0.05494250203275646 + "x": 0.4672428999823599, + "y": 0.06392661845122631 }, "p2": { - "x": 0, - "y": 50 - }, - "rightArrow": "false", - "stroke": "dotted" + "x": 0.17414177535238196, + "y": 128.07823823733236 + } } }, { - "ID": "9114", + "ID": "10493", "typeID": "Arrow", - "zOrder": "64", + "zOrder": "63", "w": "128", "h": "35", "measuredW": "150", "measuredH": "100", - "x": "453", - "y": "395", + "x": "643", + "y": "465", "properties": { "color": "2848996", "curvature": "0", @@ -2067,15 +1908,15 @@ } }, { - "ID": "9115", + "ID": "10494", "typeID": "Arrow", - "zOrder": "65", + "zOrder": "64", "w": "109", "h": "80", "measuredW": "150", "measuredH": "100", - "x": "472", - "y": "342", + "x": "662", + "y": "412", "properties": { "color": "2848996", "curvature": "-1", @@ -2098,15 +1939,15 @@ } }, { - "ID": "9116", + "ID": "10495", "typeID": "__group__", - "zOrder": "66", + "zOrder": "65", "measuredW": "272", "measuredH": "50", "w": "272", "h": "50", - "x": "572", - "y": "404", + "x": "762", + "y": "474", "properties": { "controlName": "100-react-fundamental-topics" }, @@ -2145,15 +1986,15 @@ } }, { - "ID": "9117", + "ID": "10496", "typeID": "__group__", - "zOrder": "67", + "zOrder": "66", "measuredW": "159", "measuredH": "44", "w": "159", "h": "44", - "x": "332", - "y": "425", + "x": "522", + "y": "495", "properties": { "controlName": "102-react-fundamental-topics:components" }, @@ -2192,15 +2033,15 @@ } }, { - "ID": "9118", + "ID": "10497", "typeID": "__group__", - "zOrder": "68", + "zOrder": "67", "measuredW": "255", "measuredH": "44", "w": "255", "h": "44", - "x": "942", - "y": "443", + "x": "1132", + "y": "437", "properties": { "controlName": "107-react-fundamental-topics:composition-vs-inheritance" }, @@ -2239,15 +2080,15 @@ } }, { - "ID": "9119", + "ID": "10498", "typeID": "__group__", - "zOrder": "69", + "zOrder": "68", "measuredW": "213", "measuredH": "44", "w": "213", "h": "44", - "x": "83", - "y": "402", + "x": "273", + "y": "472", "properties": { "controlName": "100-react-fundamental-topics:components:functional-components" }, @@ -2286,15 +2127,15 @@ } }, { - "ID": "9120", + "ID": "10499", "typeID": "__group__", - "zOrder": "70", + "zOrder": "69", "measuredW": "213", "measuredH": "44", "w": "213", "h": "44", - "x": "83", - "y": "452", + "x": "273", + "y": "522", "properties": { "controlName": "101-react-fundamental-topics:components:class-components" }, @@ -2333,15 +2174,15 @@ } }, { - "ID": "9121", + "ID": "10500", "typeID": "__group__", - "zOrder": "71", + "zOrder": "70", "measuredW": "159", "measuredH": "44", "w": "159", "h": "44", - "x": "332", - "y": "375", + "x": "522", + "y": "445", "properties": { "controlName": "101-react-fundamental-topics:jsx" }, @@ -2380,15 +2221,15 @@ } }, { - "ID": "9122", + "ID": "10501", "typeID": "__group__", - "zOrder": "72", + "zOrder": "71", "measuredW": "159", "measuredH": "44", "w": "159", "h": "44", - "x": "332", - "y": "477", + "x": "522", + "y": "547", "properties": { "controlName": "103-react-fundamental-topics:props-vs-state" }, @@ -2427,15 +2268,15 @@ } }, { - "ID": "9123", + "ID": "10502", "typeID": "__group__", - "zOrder": "73", + "zOrder": "72", "measuredW": "254", "measuredH": "42", "w": "254", "h": "42", - "x": "943", - "y": "493", + "x": "1133", + "y": "487", "properties": { "controlName": "108-react-fundamental-topics:basic-hooks" }, @@ -2474,15 +2315,15 @@ } }, { - "ID": "9124", + "ID": "10503", "typeID": "__group__", - "zOrder": "74", + "zOrder": "73", "measuredW": "153", "measuredH": "44", "w": "153", "h": "44", - "x": "916", - "y": "561", + "x": "1106", + "y": "555", "properties": { "controlName": "100-react-fundamental-topics:basic-hooks:use-state" }, @@ -2521,15 +2362,15 @@ } }, { - "ID": "9125", + "ID": "10504", "typeID": "__group__", - "zOrder": "75", + "zOrder": "74", "measuredW": "153", "measuredH": "44", "w": "153", "h": "44", - "x": "1076", - "y": "561", + "x": "1266", + "y": "555", "properties": { "controlName": "101-react-fundamental-topics:basic-hooks:use-effect" }, @@ -2568,15 +2409,15 @@ } }, { - "ID": "9126", + "ID": "10505", "typeID": "__group__", - "zOrder": "76", + "zOrder": "75", "measuredW": "255", "measuredH": "44", "w": "255", "h": "44", - "x": "942", - "y": "394", + "x": "1132", + "y": "388", "properties": { "controlName": "106-react-fundamental-topics:lists-and-keys" }, @@ -2615,15 +2456,15 @@ } }, { - "ID": "9127", + "ID": "10506", "typeID": "__group__", - "zOrder": "77", + "zOrder": "76", "measuredW": "215", "measuredH": "44", "w": "215", "h": "44", - "x": "278", - "y": "527", + "x": "468", + "y": "597", "properties": { "controlName": "104-react-fundamental-topics:conditional-rendering" }, @@ -2662,17 +2503,17 @@ } }, { - "ID": "9128", + "ID": "10507", "typeID": "__group__", - "zOrder": "78", - "measuredW": "214", + "zOrder": "77", + "measuredW": "162", "measuredH": "44", - "w": "214", + "w": "162", "h": "44", - "x": "278", - "y": "325", + "x": "520", + "y": "395", "properties": { - "controlName": "100-react-fundamental-topics:create-react-app" + "controlName": "100-react-fundamental-topics:cli-tools" }, "children": { "controls": { @@ -2681,7 +2522,7 @@ "ID": "0", "typeID": "TextArea", "zOrder": "0", - "w": "214", + "w": "162", "h": "44", "measuredW": "200", "measuredH": "140", @@ -2695,13 +2536,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "139", + "measuredW": "72", "measuredH": "25", - "x": "37", + "x": "45", "y": "10", "properties": { "size": "17", - "text": "Create React App" + "text": "CLI Tools" } } ] @@ -2709,15 +2550,15 @@ } }, { - "ID": "9129", + "ID": "10508", "typeID": "__group__", - "zOrder": "79", + "zOrder": "78", "measuredW": "255", "measuredH": "44", "w": "255", "h": "44", - "x": "942", - "y": "343", + "x": "1132", + "y": "337", "properties": { "controlName": "105-react-fundamental-topics:component-life-cycle" }, @@ -2756,15 +2597,15 @@ } }, { - "ID": "9130", + "ID": "10509", "typeID": "__group__", - "zOrder": "80", + "zOrder": "79", "measuredW": "272", "measuredH": "50", "w": "272", "h": "50", - "x": "588", - "y": "619", + "x": "778", + "y": "689", "properties": { "controlName": "101-react-advanced-topics" }, @@ -2803,15 +2644,15 @@ } }, { - "ID": "9131", + "ID": "10510", "typeID": "__group__", - "zOrder": "81", + "zOrder": "80", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "361", - "y": "600", + "x": "551", + "y": "670", "properties": { "controlName": "100-react-advanced-topics:hooks" }, @@ -2850,15 +2691,15 @@ } }, { - "ID": "9132", + "ID": "10511", "typeID": "__group__", - "zOrder": "82", + "zOrder": "81", "measuredW": "243", "measuredH": "44", "w": "243", "h": "44", - "x": "85", - "y": "579", + "x": "275", + "y": "649", "properties": { "controlName": "101-react-advanced-topics:hooks:writing-your-own-hooks" }, @@ -2897,15 +2738,15 @@ } }, { - "ID": "9133", + "ID": "10512", "typeID": "__group__", - "zOrder": "83", + "zOrder": "82", "measuredW": "243", "measuredH": "248", "w": "243", "h": "248", - "x": "85", - "y": "630", + "x": "275", + "y": "700", "properties": { "controlName": "102-react-advanced-topics:hooks:common-hooks" }, @@ -3106,15 +2947,15 @@ } }, { - "ID": "9134", + "ID": "10513", "typeID": "__group__", - "zOrder": "84", + "zOrder": "83", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "361", - "y": "649", + "x": "551", + "y": "719", "properties": { "controlName": "101-react-advanced-topics:context" }, @@ -3153,15 +2994,15 @@ } }, { - "ID": "9135", + "ID": "10514", "typeID": "__group__", - "zOrder": "85", + "zOrder": "84", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "361", - "y": "699", + "x": "551", + "y": "769", "properties": { "controlName": "102-react-advanced-topics:refs" }, @@ -3200,15 +3041,15 @@ } }, { - "ID": "9136", + "ID": "10515", "typeID": "__group__", - "zOrder": "86", + "zOrder": "85", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "361", - "y": "749", + "x": "551", + "y": "819", "properties": { "controlName": "103-react-advanced-topics:render-props" }, @@ -3247,15 +3088,15 @@ } }, { - "ID": "9137", + "ID": "10516", "typeID": "__group__", - "zOrder": "87", + "zOrder": "86", "measuredW": "224", "measuredH": "44", "w": "224", "h": "44", - "x": "952", - "y": "622", + "x": "1142", + "y": "630", "properties": { "controlName": "104-react-advanced-topics:high-order-components" }, @@ -3294,15 +3135,15 @@ } }, { - "ID": "9138", + "ID": "10517", "typeID": "__group__", - "zOrder": "88", + "zOrder": "87", "measuredW": "224", "measuredH": "44", "w": "224", "h": "44", - "x": "952", - "y": "672", + "x": "1142", + "y": "680", "properties": { "controlName": "105-react-advanced-topics:portals" }, @@ -3341,15 +3182,15 @@ } }, { - "ID": "9139", + "ID": "10518", "typeID": "__group__", - "zOrder": "89", + "zOrder": "88", "measuredW": "224", "measuredH": "44", "w": "224", "h": "44", - "x": "952", - "y": "721", + "x": "1142", + "y": "729", "properties": { "controlName": "106-react-advanced-topics:error-boundaries" }, @@ -3388,15 +3229,15 @@ } }, { - "ID": "9140", + "ID": "10519", "typeID": "__group__", - "zOrder": "90", + "zOrder": "89", "measuredW": "224", "measuredH": "44", "w": "224", "h": "44", - "x": "952", - "y": "770", + "x": "1142", + "y": "778", "properties": { "controlName": "107-react-advanced-topics:fiber-architecture" }, @@ -3435,15 +3276,15 @@ } }, { - "ID": "9141", + "ID": "10520", "typeID": "__group__", - "zOrder": "91", + "zOrder": "90", "measuredW": "201", "measuredH": "50", "w": "201", "h": "50", - "x": "544", - "y": "922", + "x": "734", + "y": "992", "properties": { "controlName": "102-react-ecosystem" }, @@ -3482,15 +3323,15 @@ } }, { - "ID": "9142", + "ID": "10521", "typeID": "__group__", - "zOrder": "92", + "zOrder": "91", "measuredW": "202", "measuredH": "44", "w": "202", "h": "44", - "x": "790", - "y": "877", + "x": "980", + "y": "947", "properties": { "controlName": "105-react-ecosystem:forms" }, @@ -3529,15 +3370,15 @@ } }, { - "ID": "9143", + "ID": "10522", "typeID": "__group__", - "zOrder": "93", + "zOrder": "92", "measuredW": "171", "measuredH": "44", "w": "171", "h": "44", - "x": "1039", - "y": "829", + "x": "1229", + "y": "851", "properties": { "controlName": "100-react-ecosystem:forms:react-hook-form" }, @@ -3576,15 +3417,15 @@ } }, { - "ID": "9144", + "ID": "10523", "typeID": "__group__", - "zOrder": "94", + "zOrder": "93", "measuredW": "171", "measuredH": "44", "w": "171", "h": "44", - "x": "1039", - "y": "877", + "x": "1229", + "y": "899", "properties": { "controlName": "101-react-ecosystem:forms:formik" }, @@ -3623,15 +3464,15 @@ } }, { - "ID": "9145", + "ID": "10524", "typeID": "__group__", - "zOrder": "95", + "zOrder": "94", "measuredW": "171", "measuredH": "44", "w": "171", "h": "44", - "x": "1039", - "y": "925", + "x": "1229", + "y": "947", "properties": { "controlName": "102-react-ecosystem:forms:final-form" }, @@ -3670,15 +3511,15 @@ } }, { - "ID": "9146", + "ID": "10525", "typeID": "__group__", - "zOrder": "96", + "zOrder": "95", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "345", - "y": "921", + "x": "535", + "y": "991", "properties": { "controlName": "100-react-ecosystem:routers" }, @@ -3717,15 +3558,15 @@ } }, { - "ID": "9147", + "ID": "10526", "typeID": "__group__", - "zOrder": "97", + "zOrder": "96", "measuredW": "158", "measuredH": "44", "w": "158", "h": "44", - "x": "119", - "y": "887", + "x": "309", + "y": "957", "properties": { "controlName": "100-react-ecosystem:routers:react-router" }, @@ -3764,15 +3605,15 @@ } }, { - "ID": "9148", + "ID": "10527", "typeID": "__group__", - "zOrder": "98", + "zOrder": "97", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "119", - "y": "937", + "x": "309", + "y": "1007", "properties": { "controlName": "101-react-ecosystem:routers:reach-router" }, @@ -3811,15 +3652,15 @@ } }, { - "ID": "9149", + "ID": "10528", "typeID": "__group__", - "zOrder": "99", + "zOrder": "98", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "345", - "y": "1167", + "x": "535", + "y": "1237", "properties": { "controlName": "103-react-ecosystem:api-calls" }, @@ -3858,15 +3699,15 @@ } }, { - "ID": "9150", + "ID": "10529", "typeID": "__group__", - "zOrder": "100", + "zOrder": "99", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "120", - "y": "1240", + "x": "310", + "y": "1310", "properties": { "controlName": "104-react-ecosystem:api-calls:axios" }, @@ -3905,15 +3746,15 @@ } }, { - "ID": "9151", + "ID": "10530", "typeID": "__group__", - "zOrder": "101", + "zOrder": "100", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "119", - "y": "1290", + "x": "309", + "y": "1360", "properties": { "controlName": "105-react-ecosystem:api-calls:unfetch" }, @@ -3952,15 +3793,15 @@ } }, { - "ID": "9152", + "ID": "10531", "typeID": "__group__", - "zOrder": "102", + "zOrder": "101", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "119", - "y": "1339", + "x": "309", + "y": "1409", "properties": { "controlName": "106-react-ecosystem:api-calls:superagent" }, @@ -3999,28 +3840,28 @@ } }, { - "ID": "9153", + "ID": "10532", "typeID": "Label", - "zOrder": "103", + "zOrder": "102", "measuredW": "117", "measuredH": "25", - "x": "137", - "y": "1388", + "x": "327", + "y": "1458", "properties": { "size": "17", "text": "REST API Calls" } }, { - "ID": "9154", + "ID": "10533", "typeID": "__group__", - "zOrder": "104", + "zOrder": "103", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "345", - "y": "1250", + "x": "535", + "y": "1320", "properties": { "controlName": "101-react-ecosystem:api-calls:use-http" }, @@ -4059,15 +3900,15 @@ } }, { - "ID": "9155", + "ID": "10534", "typeID": "__group__", - "zOrder": "105", + "zOrder": "104", "measuredW": "156", "measuredH": "44", "w": "156", "h": "44", - "x": "119", - "y": "1103", + "x": "309", + "y": "1173", "properties": { "controlName": "102-react-ecosystem:api-calls:apollo" }, @@ -4106,15 +3947,15 @@ } }, { - "ID": "9156", + "ID": "10535", "typeID": "__group__", - "zOrder": "106", + "zOrder": "105", "measuredW": "156", "measuredH": "44", "w": "156", "h": "44", - "x": "119", - "y": "1151", + "x": "309", + "y": "1221", "properties": { "controlName": "103-react-ecosystem:api-calls:relay-modern" }, @@ -4153,28 +3994,28 @@ } }, { - "ID": "9157", + "ID": "10536", "typeID": "Label", - "zOrder": "107", + "zOrder": "106", "measuredW": "71", "measuredH": "25", - "x": "160", - "y": "1201", + "x": "350", + "y": "1271", "properties": { "size": "17", "text": "GraphQL" } }, { - "ID": "9158", + "ID": "10537", "typeID": "__group__", - "zOrder": "108", + "zOrder": "107", "measuredW": "202", "measuredH": "44", "w": "202", "h": "44", - "x": "790", - "y": "955", + "x": "980", + "y": "1025", "properties": { "controlName": "106-react-ecosystem:testing" }, @@ -4213,15 +4054,15 @@ } }, { - "ID": "9159", + "ID": "10538", "typeID": "__group__", - "zOrder": "109", + "zOrder": "108", "measuredW": "218", "measuredH": "44", "w": "218", "h": "44", - "x": "1039", - "y": "984", + "x": "1229", + "y": "1076", "properties": { "controlName": "100-react-ecosystem:testing:jest" }, @@ -4260,15 +4101,15 @@ } }, { - "ID": "9160", + "ID": "10539", "typeID": "__group__", - "zOrder": "110", + "zOrder": "109", "measuredW": "218", "measuredH": "44", "w": "218", "h": "44", - "x": "1039", - "y": "1033", + "x": "1229", + "y": "1125", "properties": { "controlName": "101-react-ecosystem:testing:react-testing-library" }, @@ -4307,15 +4148,15 @@ } }, { - "ID": "9161", + "ID": "10540", "typeID": "__group__", - "zOrder": "111", + "zOrder": "110", "measuredW": "218", "measuredH": "44", "w": "218", "h": "44", - "x": "1039", - "y": "1082", + "x": "1229", + "y": "1174", "properties": { "controlName": "102-react-ecosystem:testing:cypress" }, @@ -4354,15 +4195,15 @@ } }, { - "ID": "9162", + "ID": "10541", "typeID": "__group__", - "zOrder": "112", + "zOrder": "111", "measuredW": "202", "measuredH": "44", "w": "202", "h": "44", - "x": "797", - "y": "1044", + "x": "987", + "y": "1114", "properties": { "controlName": "107-react-ecosystem:state-management" }, @@ -4401,15 +4242,15 @@ } }, { - "ID": "9163", + "ID": "10542", "typeID": "__group__", - "zOrder": "113", + "zOrder": "112", "measuredW": "155", "measuredH": "44", "w": "155", "h": "44", - "x": "847", - "y": "1127", + "x": "1037", + "y": "1197", "properties": { "controlName": "100-react-ecosystem:state-management:context-state" }, @@ -4448,15 +4289,15 @@ } }, { - "ID": "9164", + "ID": "10543", "typeID": "__group__", - "zOrder": "114", + "zOrder": "113", "measuredW": "155", "measuredH": "44", "w": "155", "h": "44", - "x": "847", - "y": "1176", + "x": "1037", + "y": "1246", "properties": { "controlName": "101-react-ecosystem:state-management:redux" }, @@ -4495,15 +4336,15 @@ } }, { - "ID": "9165", + "ID": "10544", "typeID": "__group__", - "zOrder": "115", + "zOrder": "114", "measuredW": "155", "measuredH": "44", "w": "155", "h": "44", - "x": "847", - "y": "1224", + "x": "1037", + "y": "1294", "properties": { "controlName": "102-react-ecosystem:state-management:mobx" }, @@ -4542,15 +4383,15 @@ } }, { - "ID": "9166", + "ID": "10545", "typeID": "__group__", - "zOrder": "116", + "zOrder": "115", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "344", - "y": "973", + "x": "534", + "y": "1043", "properties": { "controlName": "101-react-ecosystem:ssr" }, @@ -4589,15 +4430,15 @@ } }, { - "ID": "9167", + "ID": "10546", "typeID": "__group__", - "zOrder": "117", + "zOrder": "116", "measuredW": "158", "measuredH": "44", "w": "158", "h": "44", - "x": "117", - "y": "994", + "x": "307", + "y": "1064", "properties": { "controlName": "100-react-ecosystem:ssr:next-js" }, @@ -4636,15 +4477,15 @@ } }, { - "ID": "9168", + "ID": "10547", "typeID": "__group__", - "zOrder": "118", + "zOrder": "117", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "853", - "y": "1287", + "x": "1043", + "y": "1357", "properties": { "controlName": "108-react-ecosystem:styling" }, @@ -4683,15 +4524,15 @@ } }, { - "ID": "9169", + "ID": "10548", "typeID": "__group__", - "zOrder": "119", + "zOrder": "118", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "1070", - "y": "1233", + "x": "1260", + "y": "1303", "properties": { "controlName": "100-react-ecosystem:styling:chakra-ui" }, @@ -4730,15 +4571,15 @@ } }, { - "ID": "9170", + "ID": "10549", "typeID": "__group__", - "zOrder": "120", + "zOrder": "119", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "1070", - "y": "1282", + "x": "1260", + "y": "1352", "properties": { "controlName": "101-react-ecosystem:styling:material-ui" }, @@ -4777,15 +4618,15 @@ } }, { - "ID": "9171", + "ID": "10550", "typeID": "__group__", - "zOrder": "121", + "zOrder": "120", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "1070", - "y": "1330", + "x": "1260", + "y": "1400", "properties": { "controlName": "102-react-ecosystem:styling:ant-design" }, @@ -4824,15 +4665,15 @@ } }, { - "ID": "9172", + "ID": "10551", "typeID": "__group__", - "zOrder": "122", + "zOrder": "121", "measuredW": "191", "measuredH": "44", "w": "191", "h": "44", - "x": "839", - "y": "1361", + "x": "1029", + "y": "1431", "properties": { "controlName": "103-react-ecosystem:styling:styled-components" }, @@ -4871,15 +4712,15 @@ } }, { - "ID": "9173", + "ID": "10552", "typeID": "__group__", - "zOrder": "123", + "zOrder": "122", "measuredW": "191", "measuredH": "44", "w": "191", "h": "44", - "x": "839", - "y": "1410", + "x": "1029", + "y": "1480", "properties": { "controlName": "104-react-ecosystem:styling:emotion" }, @@ -4918,15 +4759,15 @@ } }, { - "ID": "9174", + "ID": "10553", "typeID": "__group__", - "zOrder": "124", + "zOrder": "123", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "117", - "y": "1043", + "x": "307", + "y": "1113", "properties": { "controlName": "101-react-ecosystem:ssg:gatsby" }, @@ -4965,15 +4806,15 @@ } }, { - "ID": "9175", + "ID": "10554", "typeID": "__group__", - "zOrder": "125", + "zOrder": "124", "measuredW": "159", "measuredH": "44", "w": "159", "h": "44", - "x": "344", - "y": "1454", + "x": "534", + "y": "1524", "properties": { "controlName": "104-react-ecosystem:mobile" }, @@ -5012,15 +4853,15 @@ } }, { - "ID": "9176", + "ID": "10555", "typeID": "__group__", - "zOrder": "126", + "zOrder": "125", "measuredW": "159", "measuredH": "44", "w": "159", "h": "44", - "x": "136", - "y": "1454", + "x": "326", + "y": "1524", "properties": { "controlName": "100-react-ecosystem:mobile:react-native" }, @@ -5059,48 +4900,15 @@ } }, { - "ID": "9177", - "typeID": "Arrow", - "zOrder": "127", - "w": "4", - "h": "89", - "measuredW": "150", - "measuredH": "100", - "x": "680", - "y": "1607", - "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 3, - "x": 3, - "y": 0 - }, - "p1": { - "length": 0.5327426604018495, - "x": 0.5326751848090503, - "y": 0.008478779433645868 - }, - "p2": { - "length": 88, - "x": 0, - "y": 88 - }, - "rightArrow": "false" - } - }, - { - "ID": "9178", - "typeID": "__group__", - "zOrder": "128", - "measuredW": "157", - "measuredH": "44", - "w": "157", - "h": "44", - "x": "344", - "y": "1024", + "ID": "10557", + "typeID": "__group__", + "zOrder": "126", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "534", + "y": "1094", "properties": { "controlName": "102-react-ecosystem:ssg" }, @@ -5139,15 +4947,15 @@ } }, { - "ID": "9179", + "ID": "10558", "typeID": "__group__", - "zOrder": "129", + "zOrder": "127", "measuredW": "157", "measuredH": "44", "w": "157", "h": "44", - "x": "344", - "y": "1092", + "x": "534", + "y": "1162", "properties": { "controlName": "100-react-ecosystem:api-calls:react-query" }, @@ -5186,15 +4994,123 @@ } }, { - "ID": "9180", + "ID": "10562", + "typeID": "__group__", + "zOrder": "128", + "measuredW": "391", + "measuredH": "55", + "w": "391", + "h": "55", + "x": "692", + "y": "254", + "properties": { + "controlName": "ext_link:roadmap.sh/javascript" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "391", + "h": "55", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "4273622", + "borderColor": "4273622" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "230", + "measuredH": "28", + "x": "81", + "y": "14", + "properties": { + "size": "20", + "color": "16777215", + "text": "Visit JavaScript Roadmap" + } + } + ] + } + } + }, + { + "ID": "10565", + "typeID": "Arrow", + "zOrder": "3", + "w": "2", + "h": "571", + "measuredW": "150", + "measuredH": "100", + "x": "886", + "y": "148", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": 2.621614465876405, + "y": 0.236415956616014 + }, + "p1": { + "x": 0.4642857142857143, + "y": -0.00399211336195318 + }, + "p2": { + "x": 2.621614465876405, + "y": 570.8810260550937 + } + } + }, + { + "ID": "10566", + "typeID": "Arrow", + "zOrder": "129", + "w": "1", + "h": "64", + "measuredW": "150", + "measuredH": "100", + "x": "889", + "y": "20", + "properties": { + "color": "2848996", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "p0": { + "x": -0.3586399639038973, + "y": 0 + }, + "p1": { + "x": 0.32941176470588224, + "y": 0 + }, + "p2": { + "x": -0.3586399639038973, + "y": 64 + }, + "stroke": "dotted" + } + }, + { + "ID": "10568", "typeID": "__group__", "zOrder": "130", - "measuredW": "542", - "measuredH": "96", - "w": "542", - "h": "96", - "x": "305", - "y": "118", + "measuredW": "391", + "measuredH": "55", + "w": "391", + "h": "55", + "x": "676", + "y": "1647", "properties": { "controlName": "ext_link:roadmap.sh/frontend" }, @@ -5203,40 +5119,378 @@ "control": [ { "ID": "0", - "typeID": "Canvas", + "typeID": "TextArea", "zOrder": "0", - "w": "542", - "h": "96", - "measuredW": "100", - "measuredH": "70", + "w": "391", + "h": "55", + "measuredW": "200", + "measuredH": "140", "x": "0", - "y": "0" + "y": "0", + "properties": { + "color": "4273622", + "borderColor": "4273622" + } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "475", - "measuredH": "32", - "x": "34", - "y": "18", + "measuredW": "219", + "measuredH": "28", + "x": "86", + "y": "14", + "properties": { + "size": "20", + "color": "16777215", + "text": "Visit Frontend Roadmap" + } + } + ] + } + } + }, + { + "ID": "10571", + "typeID": "__group__", + "zOrder": "131", + "measuredW": "206", + "measuredH": "44", + "w": "206", + "h": "44", + "x": "258", + "y": "395", + "properties": { + "controlName": "100-react-fundamental-topics:cli-tools:create-react-app" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "197", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", "properties": { - "size": "24", - "text": "Frontend Roadmap till Framework Selection" + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "139", + "measuredH": "25", + "x": "38", + "y": "10", + "properties": { + "size": "17", + "text": "Create React App" } }, { "ID": "2", + "typeID": "__group__", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "11", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "10572", + "typeID": "__group__", + "zOrder": "132", + "measuredW": "209", + "measuredH": "44", + "w": "209", + "h": "44", + "x": "258", + "y": "343", + "properties": { + "controlName": "101-react-fundamental-topics:cli-tools:vite" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", "typeID": "Label", + "zOrder": "1", + "measuredW": "30", + "measuredH": "25", + "x": "94", + "y": "10", + "properties": { + "size": "17", + "text": "Vite" + } + }, + { + "ID": "2", + "typeID": "__group__", "zOrder": "2", - "measuredW": "171", - "measuredH": "26", - "x": "201", - "y": "54", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "10", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10027263", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "10573", + "typeID": "Arrow", + "zOrder": "2", + "w": "109", + "h": "2", + "measuredW": "150", + "measuredH": "100", + "x": "434", + "y": "419", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 109, + "y": 0 + }, + "p1": { + "x": 0.6380090497737557, + "y": -0.0018099547511312274 + }, + "p2": { + "x": -0.15267712237124442, + "y": 1.7703510910608884 + } + } + }, + { + "ID": "10574", + "typeID": "Arrow", + "zOrder": "1", + "w": "107", + "h": "49", + "measuredW": "150", + "measuredH": "100", + "x": "445", + "y": "360", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 107, + "y": 49 + }, + "p1": { + "x": 0.623226362084596, + "y": 0.11385756526041142 + }, + "p2": { + "x": -0.02838679217563822, + "y": 0.14889944008285738 + } + } + }, + { + "ID": "10576", + "typeID": "Arrow", + "zOrder": "0", + "w": "122", + "h": "18", + "measuredW": "150", + "measuredH": "100", + "x": "1032", + "y": "695", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "top", + "leftArrow": "false", + "rightArrow": "false", + "stroke": "dotted", + "p0": { + "x": 122.14512175779441, + "y": 0.26814563722564344 + }, + "p1": { + "x": 0.4507017020005973, + "y": 0.051000298596596466 + }, + "p2": { + "x": -0.22207187435719788, + "y": 18.345117423793454 + } + } + }, + { + "ID": "10577", + "typeID": "__group__", + "zOrder": "137", + "measuredW": "218", + "measuredH": "44", + "w": "218", + "h": "44", + "x": "1230", + "y": "1025", + "properties": { + "controlName": "103-react-ecosystem:testing:vitest" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "218", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", "properties": { - "size": "18", - "text": "roadmap.sh/frontend", - "color": "10027263" + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "44", + "measuredH": "25", + "x": "87", + "y": "10", + "properties": { + "size": "17", + "text": "Vitest" } } ] @@ -5244,57 +5498,316 @@ } }, { - "ID": "9181", + "ID": "10578", "typeID": "__group__", - "zOrder": "131", - "measuredW": "576", - "measuredH": "105", - "w": "576", - "h": "105", - "x": "361", - "y": "1547", + "zOrder": "138", + "measuredW": "218", + "measuredH": "44", + "w": "218", + "h": "44", + "x": "1229", + "y": "1224", "properties": { - "controlName": "ext_link:roadmap.sh/frontend" + "controlName": "104-react-ecosystem:testing:playwright" }, "children": { "controls": { "control": [ { "ID": "0", - "typeID": "Canvas", + "typeID": "TextArea", "zOrder": "0", - "w": "576", - "h": "105", - "measuredW": "100", - "measuredH": "70", + "w": "218", + "h": "44", + "measuredW": "200", + "measuredH": "140", "x": "0", - "y": "0" + "y": "0", + "properties": { + "color": "16770457" + } }, { "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "502", - "measuredH": "32", - "x": "40", - "y": "22", + "measuredW": "78", + "measuredH": "25", + "x": "70", + "y": "10", + "properties": { + "size": "17", + "text": "Playwright" + } + } + ] + } + } + }, + { + "ID": "10579", + "typeID": "Canvas", + "zOrder": "133", + "w": "408", + "h": "202", + "measuredW": "100", + "measuredH": "70", + "x": "205", + "y": "62" + }, + { + "ID": "10586", + "typeID": "Label", + "zOrder": "139", + "measuredW": "209", + "measuredH": "32", + "x": "240", + "y": "89", + "properties": { + "size": "24", + "text": "Related Roadmaps" + } + }, + { + "ID": "10587", + "typeID": "__group__", + "zOrder": "134", + "measuredW": "191", + "measuredH": "27", + "w": "191", + "h": "27", + "x": "240", + "y": "137", + "properties": { + "controlName": "ext_link:roadmap.sh/frontend" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Label", + "zOrder": "0", + "measuredW": "158", + "measuredH": "26", + "x": "33", + "y": "0", "properties": { - "size": "24", - "text": "Frontend Roadmap after Framework Selection" + "size": "18", + "text": "Frontend Roadmap" } }, { - "ID": "2", + "ID": "1", + "typeID": "__group__", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "3", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10066329", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "10588", + "typeID": "__group__", + "zOrder": "135", + "measuredW": "202", + "measuredH": "27", + "w": "202", + "h": "27", + "x": "240", + "y": "173", + "properties": { + "controlName": "ext_link:roadmap.sh/javascript" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", "typeID": "Label", - "zOrder": "2", - "measuredW": "171", + "zOrder": "0", + "measuredW": "169", "measuredH": "26", - "x": "205", - "y": "58", + "x": "33", + "y": "0", "properties": { - "text": "roadmap.sh/frontend", "size": "18", - "color": "10027263" + "text": "JavaScript Roadmap" + } + }, + { + "ID": "1", + "typeID": "__group__", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "3", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10066329", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + } + ] + } + } + }, + { + "ID": "10589", + "typeID": "__group__", + "zOrder": "136", + "measuredW": "178", + "measuredH": "27", + "w": "178", + "h": "27", + "x": "240", + "y": "209", + "properties": { + "controlName": "ext_link:roadmap.sh/nodejs" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Label", + "zOrder": "0", + "measuredW": "145", + "measuredH": "26", + "x": "33", + "y": "0", + "properties": { + "size": "18", + "text": "Node.js Roadmap" + } + }, + { + "ID": "1", + "typeID": "__group__", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "w": "24", + "h": "24", + "x": "0", + "y": "3", + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Icon", + "zOrder": "0", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "1", + "typeID": "Icon", + "zOrder": "1", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "0", + "properties": { + "color": "10066329", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } } } ] @@ -5311,10 +5824,10 @@ }, "branchID": "Master", "resourceID": "4BE92169-157F-4FC5-8E20-403CBCF7A6C6", - "mockupH": "1659", - "mockupW": "1174", - "measuredW": "1257", - "measuredH": "1696", + "mockupH": "1751", + "mockupW": "1285", + "measuredW": "1490", + "measuredH": "1771", "version": "1.0" }, "groupOffset": {