diff --git a/content/roadmaps/100-frontend/content-paths.json b/content/roadmaps/100-frontend/content-paths.json index ba99b3d62..f9ecc4bc2 100644 --- a/content/roadmaps/100-frontend/content-paths.json +++ b/content/roadmaps/100-frontend/content-paths.json @@ -142,5 +142,5 @@ "desktop-applications:electron": "/roadmaps/100-frontend/content/122-desktop-applications/100-electron.md", "desktop-applications:tauri": "/roadmaps/100-frontend/content/122-desktop-applications/101-tauri.md", "desktop-applications:flutter": "/roadmaps/100-frontend/content/122-desktop-applications/102-flutter.md", - "web-assembly": "/roadmaps/100-frontend/content/123-web-assembly.md" + "bonus-content": "/roadmaps/100-frontend/content/123-bonus-content.md" } diff --git a/content/roadmaps/100-frontend/content/123-bonus-content.md b/content/roadmaps/100-frontend/content/123-bonus-content.md new file mode 100644 index 000000000..f31c035fb --- /dev/null +++ b/content/roadmaps/100-frontend/content/123-bonus-content.md @@ -0,0 +1,14 @@ +# Bonus Content + +It is not required to complete the bonus content, it just expands on the topics covered in the roadmap and has the items which were missed in the roadmap. + +* **UI / UX Knowledge** - Gaining UI/UX knowledge is not a must for a Frontend Developer but having an eye for design and a good understanding of UI/UX will help you in your career. +* **Visual Programming** — it is entirely possible to be a successful, competent frontend developer without it, but for many frontend developers this path represents a serious chunk of their workload, and represents a very in-demand option for frontend development – especially for developers who are have a visual aptitude. + * **For Animations**: [GSAP](https://greensock.com/gsap/), [Lottie](https://airbnb.design/lottie/), [Framer Motion](https://github.com/framer/motion) or [MoJs](https://mojs.github.io/) + * **Web Graphics Library (WebGL)**: [WebGL MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html) + * **2D Graphics**: [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API), [PixiJS](https://pixijs.com/), [PhaserJS](https://phaser.io/) + * **3D Graphics**: [ThreeJS](https://threejs.org/), [BabylonJS](https://www.babylonjs.com/) +* Have a look at [Qwik](https://qwik.builder.io/) and **[Partytown](https://partytown.builder.io/)**. +* **[WebRTC](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API)** - WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose. +* **[IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL)** - Not every developer will have a need for understanding [IDLs](https://developer.mozilla.org/en-US/docs/Glossary/IDL) but but there's a good argument for having more JavaScript developers aware of their existence and hopefully the ability for making use of them as well. +* **[WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly)** - WebAssembly is a comparatively new technology that allows you to run code written in languages other than JavaScript on the web. It's a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++ and Rust with a compilation target so that they can run on the web. diff --git a/content/roadmaps/100-frontend/content/123-web-assembly.md b/content/roadmaps/100-frontend/content/123-web-assembly.md deleted file mode 100644 index f99276b3b..000000000 --- a/content/roadmaps/100-frontend/content/123-web-assembly.md +++ /dev/null @@ -1,10 +0,0 @@ -# Web Assembly - -WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside JavaScript, allowing both to work together. - -Free Content -Official Website -Official Getting Started to Web Assembly -An introduction to WebAssembly -What Is WebAssembly — and Why Are You Hearing So Much About It? -What Is WebAssembly and Why Do You Need It? diff --git a/public/project/frontend.json b/public/project/frontend.json index 4d48b02a2..0c08139a1 100644 --- a/public/project/frontend.json +++ b/public/project/frontend.json @@ -410,7 +410,7 @@ "x": "186", "y": "3209", "properties": { - "controlName": "123-web-assembly" + "controlName": "123-bonus-content" }, "children": { "controls": { @@ -433,13 +433,13 @@ "ID": "1", "typeID": "Label", "zOrder": "1", - "measuredW": "111", + "measuredW": "115", "measuredH": "25", - "x": "57", + "x": "58", "y": "12", "properties": { "size": "17", - "text": "Web Assembly" + "text": "Bonus Content" } }, { @@ -1534,11 +1534,11 @@ "x": "131", "y": "8", "properties": { - "color": "10066329", "icon": { "ID": "check-circle", "size": "small" - } + }, + "color": "10066329" } } ] @@ -1614,11 +1614,11 @@ "x": "131", "y": "8", "properties": { - "color": "10066329", "icon": { "ID": "check-circle", "size": "small" - } + }, + "color": "10066329" } } ] @@ -8888,7 +8888,7 @@ "w": "335", "h": "137", "x": "165", - "y": "1807", + "y": "2051", "properties": { "controlName": "114-css-frameworks:css-first" }, @@ -8904,7 +8904,10 @@ "measuredW": "200", "measuredH": "140", "x": "0", - "y": "0" + "y": "0", + "properties": { + "color": "14540253" + } }, { "ID": "2", @@ -8913,7 +8916,7 @@ "measuredW": "150", "measuredH": "24", "x": "154", - "y": "13", + "y": "17", "properties": { "size": "16", "text": "CSS first frameworks" @@ -8926,7 +8929,7 @@ "measuredW": "145", "measuredH": "24", "x": "154", - "y": "41", + "y": "44", "properties": { "size": "16", "text": "that don't come with" @@ -8939,7 +8942,7 @@ "measuredW": "99", "measuredH": "24", "x": "154", - "y": "69", + "y": "71", "properties": { "size": "16", "text": "JS framework" @@ -8952,7 +8955,7 @@ "measuredW": "166", "measuredH": "24", "x": "153", - "y": "97", + "y": "98", "properties": { "size": "16", "text": "components by default." @@ -8966,12 +8969,12 @@ "ID": "13942", "typeID": "__group__", "zOrder": "187", - "measuredW": "130", - "measuredH": "57", - "w": "130", - "h": "57", + "measuredW": "127", + "measuredH": "52", + "w": "127", + "h": "52", "x": "181", - "y": "1817", + "y": "2066", "properties": { "controlName": "100-css-frameworks:css-first:bootstrap" }, @@ -8987,9 +8990,9 @@ "measuredW": "200", "measuredH": "140", "x": "0", - "y": "5", + "y": "0", "properties": { - "color": "16770457" + "color": "14540253" } }, { @@ -9000,43 +9003,11 @@ "measuredW": "75", "measuredH": "25", "x": "27", - "y": "18", + "y": "13", "properties": { "size": "17", "text": "Bootstrap" } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "106", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "106", - "y": "0", - "properties": { - "icon": { - "ID": "check-circle", - "size": "small" - }, - "color": "3700253" - } } ] } @@ -9046,12 +9017,12 @@ "ID": "13943", "typeID": "__group__", "zOrder": "188", - "measuredW": "133", - "measuredH": "52", - "w": "133", - "h": "52", + "measuredW": "127", + "measuredH": "49", + "w": "127", + "h": "49", "x": "181", - "y": "1876", + "y": "2123", "properties": { "controlName": "101-css-frameworks:css-first:bulma" }, @@ -9067,9 +9038,9 @@ "measuredW": "200", "measuredH": "140", "x": "0", - "y": "3", + "y": "0", "properties": { - "color": "16770457" + "color": "14540253" } }, { @@ -9080,401 +9051,11 @@ "measuredW": "49", "measuredH": "25", "x": "39", - "y": "15", + "y": "12", "properties": { "size": "17", "text": "Bulma" } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "109", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "109", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "109", - "y": "0", - "properties": { - "color": "3700253", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - }, - { - "ID": "13944", - "typeID": "__group__", - "zOrder": "189", - "measuredW": "333", - "measuredH": "228", - "w": "333", - "h": "228", - "x": "165", - "y": "1963", - "properties": { - "controlName": "114-css-frameworks:js-first" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "333", - "h": "228", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0" - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "263", - "measuredH": "24", - "x": "19", - "y": "163", - "properties": { - "size": "16", - "text": "JS based and better to use with your" - } - }, - { - "ID": "2", - "typeID": "Label", - "zOrder": "2", - "measuredW": "247", - "measuredH": "24", - "x": "19", - "y": "189", - "properties": { - "size": "16", - "text": "framework based JavaScript apps." - } - } - ] - } - } - }, - { - "ID": "13945", - "typeID": "__group__", - "zOrder": "190", - "measuredW": "145", - "measuredH": "40", - "w": "145", - "h": "40", - "x": "341", - "y": "1979", - "properties": { - "controlName": "100-css-frameworks:js-first:tailwind-css" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "136", - "h": "40", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16776960" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "61", - "measuredH": "25", - "x": "37", - "y": "7", - "properties": { - "size": "17", - "text": "Tailwind" - } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "121", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "121", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "121", - "y": "8", - "properties": { - "icon": { - "ID": "check-circle", - "size": "small" - }, - "color": "10027263" - } - } - ] - } - } - }, - { - "ID": "13946", - "typeID": "__group__", - "zOrder": "191", - "measuredW": "150", - "measuredH": "37", - "w": "150", - "h": "37", - "x": "341", - "y": "2026", - "properties": { - "controlName": "102-css-frameworks:js-first:material-ui" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "137", - "h": "37", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16776960" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "86", - "measuredH": "25", - "x": "26", - "y": "6", - "properties": { - "size": "17", - "text": "Material UI" - } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "126", - "y": "7", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "126", - "y": "7", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "126", - "y": "7", - "properties": { - "color": "3700253", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - }, - { - "ID": "13947", - "typeID": "__group__", - "zOrder": "192", - "measuredW": "157", - "measuredH": "39", - "w": "157", - "h": "39", - "x": "177", - "y": "1980", - "properties": { - "controlName": "104-css-frameworks:js-first:mantine" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "149", - "h": "39", - "measuredW": "200", - "measuredH": "140", - "x": "8", - "y": "0", - "properties": { - "color": "16776960" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "63", - "measuredH": "25", - "x": "51", - "y": "7", - "properties": { - "size": "17", - "text": "Mantine" - } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "3700253", - "icon": { - "ID": "check-circle", - "size": "small" - } - } } ] } @@ -9483,7 +9064,7 @@ { "ID": "13948", "typeID": "__group__", - "zOrder": "193", + "zOrder": "189", "measuredW": "232", "measuredH": "276", "w": "232", @@ -9542,7 +9123,7 @@ { "ID": "13949", "typeID": "__group__", - "zOrder": "194", + "zOrder": "190", "measuredW": "207", "measuredH": "40", "w": "207", @@ -9621,7 +9202,7 @@ { "ID": "13951", "typeID": "__group__", - "zOrder": "195", + "zOrder": "191", "measuredW": "205", "measuredH": "40", "w": "205", @@ -9701,7 +9282,7 @@ { "ID": "13952", "typeID": "__group__", - "zOrder": "196", + "zOrder": "192", "measuredW": "205", "measuredH": "39", "w": "205", @@ -9780,7 +9361,7 @@ { "ID": "13953", "typeID": "__group__", - "zOrder": "197", + "zOrder": "193", "measuredW": "405", "measuredH": "158", "w": "405", @@ -9869,7 +9450,7 @@ { "ID": "13954", "typeID": "__group__", - "zOrder": "198", + "zOrder": "194", "measuredW": "234", "measuredH": "60", "w": "234", @@ -9948,7 +9529,7 @@ { "ID": "13955", "typeID": "__group__", - "zOrder": "199", + "zOrder": "195", "measuredW": "206", "measuredH": "48", "w": "206", @@ -10060,7 +9641,7 @@ { "ID": "13956", "typeID": "__group__", - "zOrder": "200", + "zOrder": "196", "measuredW": "247", "measuredH": "61", "w": "247", @@ -10139,7 +9720,7 @@ { "ID": "13957", "typeID": "__group__", - "zOrder": "201", + "zOrder": "197", "measuredW": "237", "measuredH": "439", "w": "237", @@ -10374,7 +9955,7 @@ { "ID": "13958", "typeID": "__group__", - "zOrder": "202", + "zOrder": "198", "measuredW": "269", "measuredH": "290", "w": "269", @@ -10545,7 +10126,7 @@ { "ID": "13959", "typeID": "__group__", - "zOrder": "203", + "zOrder": "199", "measuredW": "285", "measuredH": "59", "w": "285", @@ -10624,7 +10205,7 @@ { "ID": "13960", "typeID": "__group__", - "zOrder": "204", + "zOrder": "200", "measuredW": "125", "measuredH": "41", "w": "125", @@ -10703,7 +10284,7 @@ { "ID": "13961", "typeID": "__group__", - "zOrder": "205", + "zOrder": "201", "measuredW": "116", "measuredH": "41", "w": "116", @@ -10782,7 +10363,7 @@ { "ID": "13962", "typeID": "__group__", - "zOrder": "206", + "zOrder": "202", "measuredW": "127", "measuredH": "41", "w": "127", @@ -10878,7 +10459,7 @@ { "ID": "13963", "typeID": "__group__", - "zOrder": "207", + "zOrder": "203", "measuredW": "121", "measuredH": "41", "w": "121", @@ -10974,7 +10555,7 @@ { "ID": "13964", "typeID": "__group__", - "zOrder": "208", + "zOrder": "204", "measuredW": "127", "measuredH": "41", "w": "127", @@ -11070,7 +10651,7 @@ { "ID": "13965", "typeID": "__group__", - "zOrder": "209", + "zOrder": "205", "measuredW": "122", "measuredH": "41", "w": "122", @@ -11166,7 +10747,7 @@ { "ID": "13966", "typeID": "__group__", - "zOrder": "210", + "zOrder": "206", "measuredW": "220", "measuredH": "59", "w": "220", @@ -11246,7 +10827,7 @@ { "ID": "13967", "typeID": "__group__", - "zOrder": "211", + "zOrder": "207", "measuredW": "156", "measuredH": "41", "w": "156", @@ -11326,7 +10907,7 @@ { "ID": "13968", "typeID": "__group__", - "zOrder": "212", + "zOrder": "208", "measuredW": "147", "measuredH": "41", "w": "147", @@ -11373,7 +10954,7 @@ { "ID": "13969", "typeID": "__group__", - "zOrder": "213", + "zOrder": "209", "measuredW": "157", "measuredH": "41", "w": "157", @@ -11453,7 +11034,7 @@ { "ID": "13970", "typeID": "__group__", - "zOrder": "214", + "zOrder": "210", "measuredW": "157", "measuredH": "41", "w": "157", @@ -11549,7 +11130,7 @@ { "ID": "13971", "typeID": "__group__", - "zOrder": "215", + "zOrder": "211", "measuredW": "147", "measuredH": "41", "w": "147", @@ -11597,7 +11178,7 @@ { "ID": "13972", "typeID": "__group__", - "zOrder": "216", + "zOrder": "212", "measuredW": "152", "measuredH": "50", "w": "152", @@ -11676,7 +11257,7 @@ { "ID": "13973", "typeID": "__group__", - "zOrder": "217", + "zOrder": "213", "measuredW": "175", "measuredH": "41", "w": "175", @@ -11772,7 +11353,7 @@ { "ID": "13974", "typeID": "__group__", - "zOrder": "218", + "zOrder": "214", "measuredW": "238", "measuredH": "60", "w": "238", @@ -11851,7 +11432,7 @@ { "ID": "13975", "typeID": "__group__", - "zOrder": "219", + "zOrder": "215", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11931,7 +11512,7 @@ { "ID": "13976", "typeID": "__group__", - "zOrder": "220", + "zOrder": "216", "measuredW": "199", "measuredH": "40", "w": "199", @@ -12011,7 +11592,7 @@ { "ID": "13977", "typeID": "__group__", - "zOrder": "221", + "zOrder": "217", "measuredW": "199", "measuredH": "40", "w": "199", @@ -12091,7 +11672,7 @@ { "ID": "13978", "typeID": "__group__", - "zOrder": "222", + "zOrder": "218", "measuredW": "156", "measuredH": "43", "w": "156", @@ -12171,7 +11752,7 @@ { "ID": "13979", "typeID": "__group__", - "zOrder": "223", + "zOrder": "219", "measuredW": "156", "measuredH": "41", "w": "156", @@ -12251,7 +11832,7 @@ { "ID": "13980", "typeID": "__group__", - "zOrder": "224", + "zOrder": "220", "measuredW": "212", "measuredH": "40", "w": "212", @@ -12347,7 +11928,7 @@ { "ID": "13981", "typeID": "__group__", - "zOrder": "225", + "zOrder": "221", "measuredW": "159", "measuredH": "40", "w": "159", @@ -12440,7 +12021,7 @@ { "ID": "13982", "typeID": "__group__", - "zOrder": "226", + "zOrder": "222", "measuredW": "159", "measuredH": "40", "w": "159", @@ -12546,105 +12127,10 @@ } } }, - { - "ID": "13983", - "typeID": "__group__", - "zOrder": "227", - "measuredW": "149", - "measuredH": "37", - "w": "149", - "h": "37", - "x": "341", - "y": "2071", - "properties": { - "controlName": "103-css-frameworks:js-first:radix-ui" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "139", - "h": "37", - "measuredW": "200", - "measuredH": "140", - "x": "0", - "y": "0", - "properties": { - "color": "16776960" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "66", - "measuredH": "25", - "x": "34", - "y": "6", - "properties": { - "size": "17", - "text": "Radix UI" - } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "125", - "y": "7", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "125", - "y": "7", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "125", - "y": "7", - "properties": { - "color": "3700253", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - }, { "ID": "13984", "typeID": "__group__", - "zOrder": "228", + "zOrder": "223", "measuredW": "157", "measuredH": "41", "w": "157", @@ -12725,7 +12211,7 @@ { "ID": "13985", "typeID": "__group__", - "zOrder": "229", + "zOrder": "224", "measuredW": "158", "measuredH": "49", "w": "158", @@ -12804,7 +12290,7 @@ { "ID": "13986", "typeID": "__group__", - "zOrder": "230", + "zOrder": "225", "measuredW": "152", "measuredH": "40", "w": "152", @@ -12899,7 +12385,7 @@ { "ID": "13987", "typeID": "__group__", - "zOrder": "231", + "zOrder": "226", "measuredW": "152", "measuredH": "40", "w": "152", @@ -12991,200 +12477,10 @@ } } }, - { - "ID": "13988", - "typeID": "__group__", - "zOrder": "232", - "measuredW": "161", - "measuredH": "39", - "w": "161", - "h": "39", - "x": "173", - "y": "2025", - "properties": { - "controlName": "101-css-frameworks:js-first:chakra-ui" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "152", - "h": "39", - "measuredW": "200", - "measuredH": "140", - "x": "9", - "y": "0", - "properties": { - "color": "16776960" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "78", - "measuredH": "25", - "x": "44", - "y": "8", - "properties": { - "size": "17", - "text": "Chakra UI" - } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "3700253", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - }, - { - "ID": "13989", - "typeID": "__group__", - "zOrder": "233", - "measuredW": "161", - "measuredH": "39", - "w": "161", - "h": "39", - "x": "174", - "y": "2070", - "properties": { - "controlName": "105-css-frameworks:js-first:daisy-ui" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "TextArea", - "zOrder": "0", - "w": "152", - "h": "39", - "measuredW": "200", - "measuredH": "140", - "x": "9", - "y": "0", - "properties": { - "color": "16776960" - } - }, - { - "ID": "1", - "typeID": "Label", - "zOrder": "1", - "measuredW": "60", - "measuredH": "25", - "x": "55", - "y": "8", - "properties": { - "size": "17", - "text": "DaisyUI" - } - }, - { - "ID": "2", - "typeID": "Icon", - "zOrder": "2", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "3", - "typeID": "Icon", - "zOrder": "3", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "4", - "typeID": "Icon", - "zOrder": "4", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "8", - "properties": { - "color": "3700253", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - } - ] - } - } - }, { "ID": "13990", "typeID": "__group__", - "zOrder": "234", + "zOrder": "227", "measuredW": "204", "measuredH": "39", "w": "204", @@ -13263,7 +12559,7 @@ { "ID": "13991", "typeID": "__group__", - "zOrder": "235", + "zOrder": "228", "measuredW": "116", "measuredH": "41", "w": "116", @@ -13342,7 +12638,7 @@ { "ID": "13992", "typeID": "__group__", - "zOrder": "236", + "zOrder": "229", "measuredW": "159", "measuredH": "41", "w": "159", @@ -13421,7 +12717,7 @@ { "ID": "13993", "typeID": "__group__", - "zOrder": "237", + "zOrder": "230", "measuredW": "196", "measuredH": "41", "w": "196", @@ -13531,7 +12827,7 @@ { "ID": "13995", "typeID": "__group__", - "zOrder": "238", + "zOrder": "231", "measuredW": "157", "measuredH": "41", "w": "157", @@ -13610,7 +12906,7 @@ { "ID": "13996", "typeID": "__group__", - "zOrder": "239", + "zOrder": "232", "measuredW": "128", "measuredH": "40", "w": "128", @@ -13735,7 +13031,7 @@ { "ID": "13998", "typeID": "__group__", - "zOrder": "240", + "zOrder": "233", "measuredW": "122", "measuredH": "41", "w": "122", @@ -13889,7 +13185,7 @@ { "ID": "14001", "typeID": "__group__", - "zOrder": "241", + "zOrder": "234", "measuredW": "411", "measuredH": "87", "w": "411", @@ -14006,6 +13302,633 @@ "y": 3.4362035980902874 } } + }, + { + "ID": "14006", + "typeID": "__group__", + "zOrder": "235", + "measuredW": "333", + "measuredH": "228", + "w": "333", + "h": "228", + "x": "166", + "y": "1814", + "properties": { + "controlName": "114-css-frameworks:js-first" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "333", + "h": "228", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "263", + "measuredH": "24", + "x": "19", + "y": "163", + "properties": { + "size": "16", + "text": "JS based and better to use with your" + } + }, + { + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "247", + "measuredH": "24", + "x": "19", + "y": "189", + "properties": { + "size": "16", + "text": "framework based JavaScript apps." + } + } + ] + } + } + }, + { + "ID": "14007", + "typeID": "__group__", + "zOrder": "236", + "measuredW": "145", + "measuredH": "40", + "w": "145", + "h": "40", + "x": "342", + "y": "1830", + "properties": { + "controlName": "100-css-frameworks:js-first:tailwind-css" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "136", + "h": "40", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "61", + "measuredH": "25", + "x": "37", + "y": "7", + "properties": { + "size": "17", + "text": "Tailwind" + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "121", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "3", + "typeID": "Icon", + "zOrder": "3", + "measuredW": "24", + "measuredH": "24", + "x": "121", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "121", + "y": "8", + "properties": { + "icon": { + "ID": "check-circle", + "size": "small" + }, + "color": "10027263" + } + } + ] + } + } + }, + { + "ID": "14008", + "typeID": "__group__", + "zOrder": "237", + "measuredW": "150", + "measuredH": "37", + "w": "150", + "h": "37", + "x": "342", + "y": "1877", + "properties": { + "controlName": "102-css-frameworks:js-first:material-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "137", + "h": "37", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "86", + "measuredH": "25", + "x": "26", + "y": "6", + "properties": { + "size": "17", + "text": "Material UI" + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "126", + "y": "7", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "3", + "typeID": "Icon", + "zOrder": "3", + "measuredW": "24", + "measuredH": "24", + "x": "126", + "y": "7", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "126", + "y": "7", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + }, + { + "ID": "14009", + "typeID": "__group__", + "zOrder": "238", + "measuredW": "157", + "measuredH": "39", + "w": "157", + "h": "39", + "x": "178", + "y": "1831", + "properties": { + "controlName": "104-css-frameworks:js-first:mantine" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "149", + "h": "39", + "measuredW": "200", + "measuredH": "140", + "x": "8", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "63", + "measuredH": "25", + "x": "51", + "y": "7", + "properties": { + "size": "17", + "text": "Mantine" + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "3", + "typeID": "Icon", + "zOrder": "3", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + }, + { + "ID": "14010", + "typeID": "__group__", + "zOrder": "239", + "measuredW": "149", + "measuredH": "37", + "w": "149", + "h": "37", + "x": "342", + "y": "1922", + "properties": { + "controlName": "103-css-frameworks:js-first:radix-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "139", + "h": "37", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "66", + "measuredH": "25", + "x": "34", + "y": "6", + "properties": { + "size": "17", + "text": "Radix UI" + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "125", + "y": "7", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "3", + "typeID": "Icon", + "zOrder": "3", + "measuredW": "24", + "measuredH": "24", + "x": "125", + "y": "7", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "125", + "y": "7", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + }, + { + "ID": "14011", + "typeID": "__group__", + "zOrder": "240", + "measuredW": "161", + "measuredH": "39", + "w": "161", + "h": "39", + "x": "174", + "y": "1876", + "properties": { + "controlName": "101-css-frameworks:js-first:chakra-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "152", + "h": "39", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "78", + "measuredH": "25", + "x": "44", + "y": "8", + "properties": { + "size": "17", + "text": "Chakra UI" + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "3", + "typeID": "Icon", + "zOrder": "3", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } + }, + { + "ID": "14012", + "typeID": "__group__", + "zOrder": "241", + "measuredW": "161", + "measuredH": "39", + "w": "161", + "h": "39", + "x": "175", + "y": "1921", + "properties": { + "controlName": "105-css-frameworks:js-first:daisy-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "152", + "h": "39", + "measuredW": "200", + "measuredH": "140", + "x": "9", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "60", + "measuredH": "25", + "x": "55", + "y": "8", + "properties": { + "size": "17", + "text": "DaisyUI" + } + }, + { + "ID": "2", + "typeID": "Icon", + "zOrder": "2", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "3", + "typeID": "Icon", + "zOrder": "3", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "4", + "typeID": "Icon", + "zOrder": "4", + "measuredW": "24", + "measuredH": "24", + "x": "0", + "y": "8", + "properties": { + "color": "3700253", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + } + ] + } + } } ] },