diff --git a/frontend.md b/frontend.md index 4b8239576..b83baaae1 100644 --- a/frontend.md +++ b/frontend.md @@ -62,7 +62,25 @@ Preprocessors enrich CSS with the functionality that it isn’t capable of by de - [ ] **PostCSS (do this later)** - [ ] Stylus -## Step 6 – Learn the Build tools +## Step 6 – Learn any CSS Framework + +This used to be way up in the chart, but I moved it down below as they aren't really needed any more and can be mastered without much effort. If you would want to pick any, there is one under every rock. The ones that I liked the most among the ones that I tried are Bootstrap, Materialize and Bulma. But if you look at their demand in market I would pick Bootstrap if I was starting today. + +- [ ] **Bootstrap (Recommended)** +- [ ] Materialize CSS +- [ ] Bulma + +## Step 7 – Learn how to organize CSS + +As your applications grow, CSS start to become messy and unmaintainable. There are multiple ways to structure your CSS better for scalability + +- [ ] **BEM – Recommended** +- [ ] OOCSS +- [ ] SMACSS +- [ ] SUITCSS +- [ ] Atomic + +## Step 8 – Learn the Build tools These are the tools that help you in bundling, building and development of your frontend applications @@ -84,7 +102,7 @@ There are several linters, but I would go for ESLint. Feel free to have a look a - [ ] Rollup - [ ] Parcel -## Step 7 – Create something – Maybe a library +## Step 9 – Create something – Maybe a library Go to Github and Have a look at the source code of libraries that people have made, pick an idea and make some library with the below listed requirements @@ -93,7 +111,7 @@ Go to Github and Have a look at the source code of libraries that people have ma - [ ] It should be a UMD library - [ ] It should be using Babel to allow usage in older browsers -## Step 8 – Learn any Framework +## Step 10 – Learn any Framework There are several options, when it comes to frameworks. However, below listed frameworks are the ones that I would recommend. You can pick any of them, however if you ask me for the personal picks I would choose React or Angular. However, have a look at any of them and see what you like @@ -106,15 +124,15 @@ There are several options, when it comes to frameworks. However, below listed fr - [ ] Vue.js - [ ] Vuex - Similar to redux but for Vue -## Step 9 – Practical Time +## Step 11 – Practical Time Now you know *everything* that one might need to build a modern JavaScript application. Go ahead and make some application with whatever framework you picked. You can find some of the ideas in the `ideas` directory in the repository; pick anything and start! -## Step 10 – Learn about Performance +## Step 12 – Learn about Performance Once you are done making the application from Step 9, read about how to **measure and improve performance**. For example look at **Interactivity Time**, **Page Speed Index**, and **Lighthouse Score** etc. -## Step 11 – Testing your Apps +## Step 13 – Testing your Apps There are lots and lots of different tools for different purposes. I mostly find myself using a combination of Jest, Mocha, Karma and Enzyme. However, before you jump and pick any, it would be better if you **first understand the different testing types**, look at all the options available and use the ones most suitable for your needs. @@ -126,32 +144,18 @@ Here is a really nice summary to get you started – [An Overview of JavaScript - [ ] **Karma** - [ ] **Enzyme** -## Step 12 – Static Type Checkers +## Step 14 – Progressive Webapps + +Learn about Service Workers and how to make Progressive Webapps + +## Step 15 – Static Type Checkers Static type checkers help you to add type checking to JavaScript. You don’t need to learn these but they really give you superpowers and can be learnt in a few hours and then you can keep . There is mainly TypeScript and Flow. I love TypeScript and would pick it but feel free to check both and pick one of your liking. - [ ] **TypeScript (Recommended)** - [ ] Flow -## Step 13 – Learn any CSS Framework - -This used to be way up in the chart, but I moved it down below as they aren't really needed any more and can be mastered without much effort. If you would want to pick any, there is one under every rock. The ones that I liked the most among the ones that I tried are Bootstrap, Materialize and Bulma. But if you look at their demand in market I would pick Bootstrap if I was starting today. - -- [ ] **Bootstrap (Recommended)** -- [ ] Materialize CSS -- [ ] Bulma - -## Step 14 – Learn how to organize CSS - -As your applications grow, CSS start to become messy and unmaintainable. There are multiple ways to structure your CSS better for scalability - -- [ ] **BEM – Recommended** -- [ ] OOCSS -- [ ] SMACSS -- [ ] SUITCSS -- [ ] Atomic - -## Step 15 – Learn about Server Side Rendering +## Step 16 – Learn about Server Side Rendering There are different options, depending on what framework you are using @@ -163,9 +167,9 @@ There are different options, depending on what framework you are using - [ ] Vue.js - [ ] Nuxt.js -## Step 16 – Progressive Webapps +## Step 17 – All the things not mentioned -Learn about Service Workers and how to make Progressive Webapps +Canvas, HTML-5 APIs, SVG, sourcemaps, functional programming, TC39, Progressive enhancement, graceful degradation etc. Go Figure! ## Journey Never Ends diff --git a/images/frontend-v2.png b/images/frontend-v2.png index 7b02bfe54..e44ca81e0 100644 Binary files a/images/frontend-v2.png and b/images/frontend-v2.png differ diff --git a/images/frontend.png b/images/frontend.png deleted file mode 100644 index cbe335150..000000000 Binary files a/images/frontend.png and /dev/null differ diff --git a/project/frontend-map.json b/project/frontend-map.json index c32a53b23..b8c00e0db 100644 --- a/project/frontend-map.json +++ b/project/frontend-map.json @@ -1 +1 @@ -{"mockup":{"controls":{"control":[{"ID":"0","measuredH":"40","measuredW":"149","properties":{"bold":"true","size":"32","text":"Front-end"},"typeID":"Label","x":"563","y":"121","zOrder":"59"},{"ID":"1","h":"74","measuredH":"73","measuredW":"18","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":8,"x":8,"y":0},"p1":{"length":0.4979530082684307,"x":0.45894941634241254,"y":0.19319066147859923},"p2":{"length":73,"x":0,"y":73},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"19","x":"637","y":"47","zOrder":"60"},{"ID":"2","h":"61","measuredH":"60","measuredW":"15","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":2,"x":2,"y":0},"p1":{"length":0.4752342503759216,"x":0.46391752577319545,"y":-0.1030927835051546},"p2":{"length":61.84658438426491,"x":15,"y":60},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"626","y":"177","zOrder":"61"},{"ID":"3","measuredH":"26","measuredW":"147","properties":{"bold":"true","size":"18","text":"Learn the Basics"},"typeID":"Label","x":"589","y":"244","zOrder":"62"},{"ID":"21","measuredH":"25","measuredW":"168","properties":{"bold":"true","size":"17","text":"Basics of JavaScript"},"typeID":"Label","x":"589","y":"424","zOrder":"71"},{"ID":"24","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"556","y":"424","zOrder":"72"},{"ID":"25","measuredH":"25","measuredW":"118","properties":{"bold":"true","size":"17","text":"Basics of CSS"},"typeID":"Label","x":"589","y":"378","zOrder":"67"},{"ID":"26","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"555","y":"378","zOrder":"68"},{"ID":"27","measuredH":"25","measuredW":"100","properties":{"bold":"true","size":"17","text":"Learn HTML"},"typeID":"Label","x":"589","y":"330","zOrder":"63"},{"ID":"28","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"555","y":"330","zOrder":"64"},{"ID":"29","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"1"},"typeID":"Label","x":"563","y":"332","zOrder":"65"},{"ID":"30","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"2"},"typeID":"Label","w":"10","x":"563","y":"380","zOrder":"69"},{"ID":"31","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"3"},"typeID":"Label","w":"10","x":"564","y":"426","zOrder":"73"},{"ID":"33","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"543","y":"322","zOrder":"58"},{"ID":"34","h":"55","measuredH":"54","measuredW":"9","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":3,"x":3,"y":0},"p1":{"length":0.529252928988914,"x":0.510715363718684,"y":0.13884696649562314},"p2":{"length":54,"x":0,"y":54},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"10","x":"655","y":"277","zOrder":"43"},{"ID":"36","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"543","y":"370","zOrder":"66"},{"ID":"40","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"544","y":"417","zOrder":"70"},{"ID":"44","h":"23","measuredH":"22","measuredW":"48","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":48,"x":48,"y":0},"p1":{"length":0.4652808414804901,"x":0.4652789342214823,"y":-0.001332223147377283},"p2":{"length":22,"x":0,"y":22},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"49","x":"792","y":"320","zOrder":"57"},{"ID":"45","measuredH":"25","measuredW":"322","properties":{"size":"17","text":"Don't worry about making them pretty yet"},"typeID":"Label","x":"858","y":"363","zOrder":"114"},{"ID":"46","h":"4","measuredH":"3","measuredW":"59","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":59,"x":59,"y":0},"p1":{"length":0.4929592777882592,"x":0.4929203539823009,"y":-0.006194690265486749},"p2":{"length":3,"x":0,"y":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"60","x":"794","y":"347","zOrder":"56"},{"ID":"47","measuredH":"25","measuredW":"514","properties":{"size":"17","text":"Dividing page into sections and how to structure the DOM properly"},"typeID":"Label","x":"854","y":"302","zOrder":"115"},{"ID":"48","h":"49","measuredH":"48","measuredW":"61","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":61,"x":61,"y":0},"p1":{"length":0.4585249091872984,"x":0.45522128005575574,"y":-0.054942502032756454},"p2":{"length":48,"x":0,"y":48},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"62","x":"787","y":"285","zOrder":"54"},{"ID":"49","measuredH":"25","measuredW":"390","properties":{"size":"17","text":"Learn the basics and how to write semantic HTML"},"typeID":"Label","x":"858","y":"268","zOrder":"116"},{"ID":"56","h":"19","measuredH":"18","measuredW":"68","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":70.3420215802759,"x":68,"y":18},"p1":{"length":0.4579653787384571,"x":0.45747670462949247,"y":0.021150717349504505},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"69","x":"787","y":"356","zOrder":"55"},{"ID":"57","measuredH":"25","measuredW":"386","properties":{"size":"17","text":"Make at least 5 HTML pages – focus on structure"},"typeID":"Label","x":"859","y":"335","zOrder":"117"},{"ID":"59","h":"66","measuredH":"65","measuredW":"112","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.47314423386375903,"x":0.47200190828314154,"y":0.03285825034289463},"p2":{"length":129.49517365523704,"x":112,"y":65},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"113","x":"438","y":"320","zOrder":"53"},{"ID":"60","measuredH":"25","measuredW":"191","properties":{"size":"17","text":"Learn the basics of CSS"},"typeID":"Label","x":"238","y":"303","zOrder":"74"},{"ID":"63","h":"43","measuredH":"42","measuredW":"124","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.4354479714301555,"x":0.4346557759626609,"y":0.026254375729288137},"p2":{"length":130.91982279242512,"x":124,"y":42},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"125","x":"436","y":"352","zOrder":"52"},{"ID":"67","h":"13","measuredH":"12","measuredW":"119","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":1,"x":0,"y":1},"p1":{"length":0.42921590082087,"x":0.42861896838602337,"y":0.022628951747088195},"p2":{"length":119.60351165413162,"x":119,"y":12},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"120","x":"440","y":"385","zOrder":"51"},{"ID":"68","measuredH":"25","measuredW":"268","properties":{"size":"17","text":"Learn how to use Grid and Flexbox"},"typeID":"Label","x":"162","y":"338","zOrder":"75"},{"ID":"70","measuredH":"25","measuredW":"318","properties":{"size":"17","text":"Media Queries and Responsive Websites"},"typeID":"Label","x":"113","y":"371","zOrder":"76"},{"ID":"83","h":"20","measuredH":"19","measuredW":"71","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":19,"x":0,"y":19},"p1":{"length":0.4406669241308615,"x":0.43817104776008886,"y":-0.04683450573861533},"p2":{"length":71,"x":71,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"72","x":"478","y":"397","zOrder":"50"},{"ID":"85","measuredH":"25","measuredW":"378","properties":{"size":"17","text":"Style the HTML Pages that you made in last step"},"typeID":"Label","x":"93","y":"404","zOrder":"77"},{"ID":"86","h":"4","measuredH":"3","measuredW":"53","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":3,"x":0,"y":3},"p1":{"length":0.4600856791042167,"x":0.4583941605839416,"y":0.03941605839416058},"p2":{"length":53.08483775994799,"x":53,"y":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"54","x":"797","y":"422","zOrder":"48"},{"ID":"88","measuredH":"25","measuredW":"301","properties":{"size":"17","text":"Learn the syntax and basic constructs"},"typeID":"Label","x":"855","y":"414","zOrder":"118"},{"ID":"89","measuredH":"25","measuredW":"233","properties":{"size":"17","text":"Learn how to manipulate DOM"},"typeID":"Label","x":"855","y":"442","zOrder":"119"},{"ID":"90","h":"16","measuredH":"15","measuredW":"55","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.45653907041455166,"x":0.45488081725312146,"y":0.03887627695800227},"p2":{"length":57.0087712549569,"x":55,"y":15},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"56","x":"794","y":"437","zOrder":"49"},{"ID":"91","h":"62","measuredH":"61","measuredW":"67","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5281388123911577,"x":0.5199305086381621,"y":-0.09275166489721068},"p2":{"length":90.60905032059436,"x":67,"y":61},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"68","x":"786","y":"449","zOrder":"46"},{"ID":"92","measuredH":"25","measuredW":"476","properties":{"size":"17","text":"Understand the concepts such as hoisting, event bubbling etc"},"typeID":"Label","x":"850","y":"471","zOrder":"120"},{"ID":"93","h":"38","measuredH":"37","measuredW":"56","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5310495030226782,"x":0.5300904977375566,"y":-0.03190045248868781},"p2":{"length":67.11929677819934,"x":56,"y":37},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"57","x":"789","y":"441","zOrder":"47"},{"ID":"94","measuredH":"25","measuredW":"445","properties":{"size":"17","text":"Learn ES6+ new features and writing modular JavaScript"},"typeID":"Label","x":"858","y":"535","zOrder":"121"},{"ID":"95","h":"94","measuredH":"93","measuredW":"74","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5490011385437095,"x":0.5330996249796185,"y":-0.13117560736996578},"p2":{"length":118.84864324004712,"x":74,"y":93},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"75","x":"778","y":"448","zOrder":"45"},{"ID":"96","measuredH":"25","measuredW":"137","properties":{"size":"17","text":"Learn Ajax (XHR)"},"typeID":"Label","x":"858","y":"504","zOrder":"122"},{"ID":"98","h":"41","measuredH":"140","measuredW":"200","properties":{"borderColor":"13576743","color":"16777215"},"typeID":"TextArea","w":"325","x":"153","y":"512","zOrder":"78"},{"ID":"102","measuredH":"25","measuredW":"146","properties":{"bold":"true","color":"0","size":"17","text":"jQuery – Optional"},"typeID":"Label","x":"167","y":"520","zOrder":"79"},{"ID":"108","h":"202","measuredH":"200","measuredW":"48","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":15,"x":15,"y":0},"p1":{"length":0.4723872861411133,"x":0.452773248314634,"y":-0.13470758597191462},"p2":{"length":205.67936211491903,"x":48,"y":200},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"50","x":"622","y":"454","zOrder":"44"},{"ID":"109","h":"2","measuredH":"1","measuredW":"136","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5074062205613563,"x":0.5073529411764706,"y":-0.007352941176470588},"p2":{"length":136,"x":136,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"137","x":"489","y":"531","zOrder":"80"},{"ID":"111","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"613","y":"519","zOrder":"81"},{"ID":"112","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"767","x":"314","y":"593","zOrder":"82"},{"ID":"114","measuredH":"25","measuredW":"574","properties":{"size":"17","text":"Make some responsive website and add some interactivity with JavaScript"},"typeID":"Label","x":"356","y":"601","zOrder":"83"},{"ID":"115","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"324","y":"601","zOrder":"84"},{"ID":"116","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"4"},"typeID":"Label","w":"10","x":"332","y":"603","zOrder":"85"},{"ID":"117","h":"36","measuredH":"107","measuredW":"205","properties":{"color":"13576743"},"typeID":"ScratchOut","w":"66","x":"409","y":"514","zOrder":"86"},{"ID":"118","h":"178","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"767","x":"314","y":"641","zOrder":"87"},{"ID":"119","measuredH":"25","measuredW":"678","properties":{"bold":"true","size":"17","text":"Search projects on Github and open a few PRs. Some of the ideas are listed below :"},"typeID":"Label","x":"356","y":"655","zOrder":"88"},{"ID":"120","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"325","y":"656","zOrder":"89"},{"ID":"121","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"5"},"typeID":"Label","w":"10","x":"333","y":"658","zOrder":"90"},{"ID":"125","measuredH":"25","measuredW":"564","properties":{"size":"17","text":"Enhance the UI, make any demo pages responsive or improve the design"},"typeID":"Label","x":"356","y":"684","zOrder":"91"},{"ID":"126","measuredH":"25","measuredW":"339","properties":{"size":"17","text":"Look for any open issues that you can solve"},"typeID":"Label","x":"356","y":"711","zOrder":"92"},{"ID":"127","measuredH":"25","measuredW":"672","properties":{"size":"17","text":"Refactor any of the code or implement the best practices that you learnt along the way"},"typeID":"Label","x":"356","y":"738","zOrder":"93"},{"ID":"129","measuredH":"23","measuredW":"703","properties":{"bold":"true","color":"10027263","size":"15","text":"Link this repo, tell them you are learning and ask for feedback on your PR and how you can improve"},"typeID":"Label","x":"356","y":"777","zOrder":"94"},{"ID":"130","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"325","y":"776","zOrder":"95"},{"ID":"131","measuredH":"32","measuredW":"32","properties":{"color":"10027263","icon":{"ID":"github","size":"medium"}},"typeID":"Icon","x":"920","y":"81","zOrder":"96"},{"ID":"132","measuredH":"25","measuredW":"295","properties":{"bold":"true","color":"10027263","size":"17","text":"kamranahmedse/developer-roadmap"},"typeID":"Label","x":"959","y":"85","zOrder":"97"},{"ID":"140","h":"135","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"767","x":"314","y":"827","zOrder":"98"},{"ID":"141","measuredH":"25","measuredW":"443","properties":{"bold":"true","size":"17","text":"Give yourself a pat on the back. You are getting there :"},"typeID":"Label","x":"355","y":"842","zOrder":"99"},{"ID":"142","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"325","y":"842","zOrder":"100"},{"ID":"143","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"6"},"typeID":"Label","w":"10","x":"333","y":"844","zOrder":"101"},{"ID":"149","measuredH":"25","measuredW":"629","properties":{"size":"17","text":"There are many jobs out there requiring the skillset that you have got till this point"},"typeID":"Label","x":"356","y":"868","zOrder":"102"},{"ID":"150","measuredH":"25","measuredW":"629","properties":{"size":"17","text":"You can easily start getting some freelance work or find yourself a job if you may."},"typeID":"Label","x":"356","y":"893","zOrder":"103"},{"ID":"153","measuredH":"25","measuredW":"690","properties":{"size":"17","text":"However, don't stop here, there is still a long way to go if you want to have a better career"},"typeID":"Label","x":"357","y":"919","zOrder":"104"},{"ID":"155","h":"265","measuredH":"264","measuredW":"76","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":76,"x":76,"y":0},"p1":{"length":0.5074530613720352,"x":0.4565573307740078,"y":-0.2215039801275899},"p2":{"length":267.3200329193456,"x":42,"y":264},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"77","x":"237","y":"743","zOrder":"41"},{"ID":"156","measuredH":"25","measuredW":"339","properties":{"bold":"true","size":"17","text":"Optional – Needs some knowledge of `git`"},"typeID":"Label","x":"294","y":"1015","zOrder":"105"},{"ID":"157","measuredH":"25","measuredW":"346","properties":{"size":"17","text":"This part is optional, I added it here because"},"typeID":"Label","x":"295","y":"1043","zOrder":"106"},{"ID":"158","measuredH":"25","measuredW":"384","properties":{"size":"17","text":"it is a great way to learn and find out if you are on"},"typeID":"Label","x":"295","y":"1067","zOrder":"107"},{"ID":"159","measuredH":"25","measuredW":"399","properties":{"size":"17","text":"the right track or not. You will be amazed to find out"},"typeID":"Label","x":"294","y":"1092","zOrder":"108"},{"ID":"160","measuredH":"25","measuredW":"335","properties":{"size":"17","text":"how much people are willing to help you out."},"typeID":"Label","x":"295","y":"1117","zOrder":"109"},{"ID":"161","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"290","y":"1156","zOrder":"110"},{"ID":"162","measuredH":"23","measuredW":"366","properties":{"bold":"true","color":"10027263","size":"15","text":"Don't be scared of git, it is easiest of all the things"},"typeID":"Label","x":"322","y":"1153","zOrder":"111"},{"ID":"164","measuredH":"23","measuredW":"359","properties":{"bold":"true","color":"10027263","size":"15","text":"that you have learnt above. You can get the basics"},"typeID":"Label","x":"322","y":"1174","zOrder":"112"},{"ID":"165","h":"245","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"427","x":"278","y":"1001","zOrder":"42"},{"ID":"167","measuredH":"23","measuredW":"292","properties":{"bold":"true","color":"10027263","size":"15","text":"in the few hours and do the rest later on"},"typeID":"Label","x":"322","y":"1195","zOrder":"113"},{"ID":"169","h":"381","measuredH":"380","measuredW":"68","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"x":5,"y":0},"p1":{"x":0.51012414933679,"y":0.17392640436254733},"p2":{"x":0,"y":380},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"69","x":"727","y":"917","zOrder":"40"},{"ID":"170","h":"136","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"543","x":"310","y":"1594","zOrder":"123"},{"ID":"172","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"323","y":"1610","zOrder":"124"},{"ID":"173","measuredH":"22","measuredW":"10","properties":{"bold":"true","color":"16777215","size":"14","text":"9"},"typeID":"Label","w":"19","x":"330","y":"1612","zOrder":"125"},{"ID":"174","measuredH":"26","measuredW":"167","properties":{"bold":"true","size":"18","text":"CSS Preprocessors"},"typeID":"Label","w":"199","x":"356","y":"1610","zOrder":"126"},{"ID":"175","measuredH":"32","measuredW":"56","properties":{"align":"center","color":"16776960","size":"18","text":"Sass"},"typeID":"TextInput","w":"136","x":"284","y":"1369","zOrder":"127"},{"ID":"176","measuredH":"32","measuredW":"55","properties":{"align":"center","color":"16777215","size":"18","text":"Less"},"typeID":"TextInput","w":"136","x":"284","y":"1445","zOrder":"128"},{"ID":"177","measuredH":"32","measuredW":"66","properties":{"align":"center","color":"16777215","size":"18","text":"Stylus"},"typeID":"TextInput","w":"136","x":"284","y":"1483","zOrder":"129"},{"ID":"178","measuredH":"32","measuredW":"88","properties":{"align":"center","color":"16776960","size":"18","text":"PostCSS"},"typeID":"TextInput","w":"136","x":"284","y":"1406","zOrder":"130"},{"ID":"180","measuredH":"25","measuredW":"450","properties":{"size":"17","text":"Preprocessors let you add functionality on top of CSS and"},"typeID":"Label","x":"356","y":"1638","zOrder":"131"},{"ID":"181","measuredH":"25","measuredW":"459","properties":{"size":"17","text":"let you do things that CSS can't. Have a look at any of them"},"typeID":"Label","x":"356","y":"1663","zOrder":"132"},{"ID":"182","measuredH":"25","measuredW":"441","properties":{"size":"17","text":"and see what they have to offer and pick the suitable one"},"typeID":"Label","x":"356","y":"1689","zOrder":"133"},{"ID":"184","h":"8","measuredH":"7","measuredW":"204","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":204.00980368599937,"x":204,"y":2},"p1":{"length":0.4189940316033579,"x":0.4186861064441723,"y":-0.01606059743144346},"p2":{"length":7,"x":0,"y":7},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"205","x":"815","y":"1655","zOrder":"39"},{"ID":"185","h":"187","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"408","x":"915","y":"1564","zOrder":"134"},{"ID":"196","measuredH":"25","measuredW":"157","properties":{"bold":"true","size":"17","text":"Learn Sass for now"},"typeID":"Label","x":"928","y":"1576","zOrder":"135"},{"ID":"197","measuredH":"25","measuredW":"411","properties":{"size":"17","text":"You do not need rollup for now and can do everything"},"typeID":"Label","x":"919","y":"1945","zOrder":"194"},{"ID":"198","measuredH":"25","measuredW":"370","properties":{"size":"17","text":"PostCSS is a nice-to-have and is sort of \"Babel\""},"typeID":"Label","x":"930","y":"1633","zOrder":"136"},{"ID":"199","measuredH":"25","measuredW":"335","properties":{"size":"17","text":"for CSS. You can use it on top of Sass also."},"typeID":"Label","x":"930","y":"1658","zOrder":"137"},{"ID":"200","measuredH":"25","measuredW":"240","properties":{"size":"17","text":"Sass and revisit PostCSS later"},"typeID":"Label","x":"930","y":"1712","zOrder":"138"},{"ID":"202","measuredH":"25","measuredW":"323","properties":{"size":"17","text":"However, I would recommend you to learn "},"typeID":"Label","x":"930","y":"1684","zOrder":"139"},{"ID":"204","h":"97","measuredH":"96","measuredW":"21","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":11,"x":11,"y":0},"p1":{"length":0.5588009305954578,"x":0.5354229282954058,"y":-0.15993988836410478},"p2":{"length":98.2700361249552,"x":21,"y":96},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"22","x":"559","y":"1515","zOrder":"38"},{"ID":"210","h":"52","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"344","x":"527","y":"1273","zOrder":"140"},{"ID":"211","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"538","y":"1285","zOrder":"141"},{"ID":"212","measuredH":"22","measuredW":"10","properties":{"bold":"true","color":"16777215","size":"14","text":"7"},"typeID":"Label","w":"12","x":"546","y":"1286","zOrder":"142"},{"ID":"213","measuredH":"26","measuredW":"39","properties":{"bold":"true","size":"18","text":"NPM"},"typeID":"Label","w":"47","x":"901","y":"1286","zOrder":"145"},{"ID":"215","h":"52","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"89","x":"876","y":"1273","zOrder":"143"},{"ID":"216","measuredH":"26","measuredW":"159","properties":{"bold":"true","size":"18","text":"Package Managers"},"typeID":"Label","w":"199","x":"572","y":"1285","zOrder":"144"},{"ID":"217","h":"52","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"89","x":"969","y":"1273","zOrder":"146"},{"ID":"218","measuredH":"26","measuredW":"38","properties":{"bold":"true","size":"18","text":"Yarn"},"typeID":"Label","w":"47","x":"991","y":"1286","zOrder":"147"},{"ID":"219","h":"80","measuredH":"79","measuredW":"67","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":67,"x":67,"y":0},"p1":{"length":0.5230534443633628,"x":0.5075471698113209,"y":-0.1264150943396224},"p2":{"length":79,"x":0,"y":79},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"68","x":"805","y":"1202","zOrder":"37"},{"ID":"220","h":"225","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"417","x":"845","y":"1001","zOrder":"148"},{"ID":"222","measuredH":"25","measuredW":"334","properties":{"size":"17","text":"Package managers help you bring external "},"typeID":"Label","x":"861","y":"1051","zOrder":"149"},{"ID":"223","measuredH":"25","measuredW":"354","properties":{"size":"17","text":"libraries and plugins into your projects, so that"},"typeID":"Label","x":"861","y":"1077","zOrder":"150"},{"ID":"224","measuredH":"25","measuredW":"386","properties":{"size":"17","text":"you don't have to worry about copying the libraries"},"typeID":"Label","x":"861","y":"1103","zOrder":"151"},{"ID":"226","measuredH":"25","measuredW":"384","properties":{"size":"17","text":"manually or go through the hassle of updating etc"},"typeID":"Label","x":"861","y":"1129","zOrder":"152"},{"ID":"227","measuredH":"25","measuredW":"286","properties":{"size":"17","text":"Both are almost same, there are just "},"typeID":"Label","x":"861","y":"1156","zOrder":"153"},{"ID":"229","measuredH":"25","measuredW":"316","properties":{"size":"17","text":"implementation differences; just pick any."},"typeID":"Label","x":"861","y":"1181","zOrder":"154"},{"ID":"230","h":"202","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"759","x":"527","y":"1331","zOrder":"155"},{"ID":"231","measuredH":"25","measuredW":"425","properties":{"bold":"true","size":"17","text":"Install some external dependency in your application"},"typeID":"Label","x":"572","y":"1349","zOrder":"156"},{"ID":"232","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"541","y":"1350","zOrder":"157"},{"ID":"233","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"8"},"typeID":"Label","w":"10","x":"549","y":"1352","zOrder":"158"},{"ID":"234","measuredH":"25","measuredW":"622","properties":{"size":"17","text":"Go ahead and install some external library in the webpages that you made above"},"typeID":"Label","x":"572","y":"1376","zOrder":"159"},{"ID":"237","measuredH":"25","measuredW":"683","properties":{"size":"17","text":"e.g. install some toast plugin and when user clicks a button, show him the toast message"},"typeID":"Label","x":"572","y":"1402","zOrder":"160"},{"ID":"238","measuredH":"25","measuredW":"665","properties":{"size":"17","text":"or create a login form and do the form validation using some form validation library and"},"typeID":"Label","x":"572","y":"1429","zOrder":"161"},{"ID":"239","measuredH":"25","measuredW":"510","properties":{"size":"17","text":"play with different options and see how to install different versions"},"typeID":"Label","x":"573","y":"1454","zOrder":"162"},{"ID":"242","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"545","y":"1489","zOrder":"163"},{"ID":"243","measuredH":"23","measuredW":"230","properties":{"bold":"true","color":"10027263","size":"15","text":"Read about semantic versioning"},"typeID":"Label","x":"573","y":"1490","zOrder":"164"},{"ID":"244","h":"116","measuredH":"115","measuredW":"22","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":117.08543888972702,"x":22,"y":115},"p1":{"length":0.5349115625926845,"x":0.5263097382439734,"y":0.09554286590273256},"p2":{"length":5,"x":5,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"23","x":"332","y":"1499","zOrder":"36"},{"ID":"245","h":"105","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"584","x":"543","y":"3164","zOrder":"165"},{"ID":"246","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"557","y":"3190","zOrder":"166"},{"ID":"247","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"16"},"typeID":"Label","w":"16","x":"561","y":"3192","zOrder":"167"},{"ID":"248","measuredH":"26","measuredW":"282","properties":{"bold":"true","size":"18","text":"CSS Framework – Pick Bootstrap"},"typeID":"Label","w":"293","x":"588","y":"3189","zOrder":"168"},{"ID":"251","measuredH":"25","measuredW":"489","properties":{"size":"17","text":"You really don't need to learn any but still they are good to have"},"typeID":"Label","x":"589","y":"3217","zOrder":"169"},{"ID":"254","measuredH":"32","measuredW":"92","properties":{"align":"center","color":"16776960","size":"18","text":"Bootstrap"},"typeID":"TextInput","w":"149","x":"1134","y":"3164","zOrder":"170"},{"ID":"255","measuredH":"32","measuredW":"146","properties":{"align":"center","color":"16770457","size":"18","text":"Materialize CSS"},"typeID":"TextInput","w":"149","x":"1134","y":"3201","zOrder":"171"},{"ID":"256","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16770457","size":"18","text":"Bulma"},"typeID":"TextInput","w":"150","x":"1133","y":"3237","zOrder":"172"},{"ID":"260","measuredH":"25","measuredW":"357","properties":{"bold":"true","size":"17","text":"Learn one, you automatically learn the other"},"typeID":"Label","x":"861","y":"1018","zOrder":"173"},{"ID":"267","h":"84","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"543","x":"696","y":"1781","zOrder":"174"},{"ID":"268","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"709","y":"1797","zOrder":"175"},{"ID":"269","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"10"},"typeID":"Label","w":"19","x":"713","y":"1799","zOrder":"176"},{"ID":"270","measuredH":"26","measuredW":"90","properties":{"bold":"true","size":"18","text":"Build tools"},"typeID":"Label","w":"101","x":"742","y":"1796","zOrder":"177"},{"ID":"271","measuredH":"25","measuredW":"450","properties":{"size":"17","text":"Tools to help you in the building/bundling and development"},"typeID":"Label","x":"742","y":"1822","zOrder":"178"},{"ID":"274","h":"140","measuredH":"139","measuredW":"111","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5522448742292186,"x":0.5380822956829531,"y":0.12426521711649068},"p2":{"length":177.88198334851114,"x":111,"y":139},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"112","x":"607","y":"1670","zOrder":"35"},{"ID":"275","h":"12","measuredH":"11","measuredW":"112","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":112,"y":11},"p1":{"x":0.6096633663366336,"y":-0.031366336633663366},"p2":{"x":0,"y":2},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"113","x":"603","y":"1803","zOrder":"34"},{"ID":"276","measuredH":"32","measuredW":"116","properties":{"align":"center","color":"16776960","size":"18","text":"NPM Scripts"},"typeID":"TextInput","w":"147","x":"471","y":"1790","zOrder":"179"},{"ID":"278","measuredH":"32","measuredW":"52","properties":{"align":"center","color":"16770457","size":"18","text":"Gulp"},"typeID":"TextInput","w":"147","x":"471","y":"1827","zOrder":"180"},{"ID":"280","h":"188","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"261","x":"153","y":"1741","zOrder":"181"},{"ID":"281","measuredH":"25","measuredW":"109","properties":{"bold":"true","size":"17","text":"Task Runners"},"typeID":"Label","x":"167","y":"1756","zOrder":"182"},{"ID":"282","measuredH":"25","measuredW":"352","properties":{"size":"17","text":"I would recommend you to learn Sass for now"},"typeID":"Label","x":"930","y":"1608","zOrder":"183"},{"ID":"283","measuredH":"25","measuredW":"178","properties":{"size":"17","text":"in 2018. However, if you"},"typeID":"Label","x":"167","y":"1810","zOrder":"184"},{"ID":"284","measuredH":"25","measuredW":"216","properties":{"size":"17","text":"want to pick something else"},"typeID":"Label","x":"167","y":"1835","zOrder":"185"},{"ID":"285","measuredH":"25","measuredW":"225","properties":{"size":"17","text":"look at Gulp and see how you"},"typeID":"Label","x":"167","y":"1863","zOrder":"186"},{"ID":"286","measuredH":"25","measuredW":"143","properties":{"size":"17","text":"can benefit from it"},"typeID":"Label","x":"167","y":"1890","zOrder":"187"},{"ID":"287","h":"12","measuredH":"11","measuredW":"142","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":142.35167719419397,"x":142,"y":10},"p1":{"length":0.5208523098853179,"x":0.5196039603960396,"y":0.03603960396039605},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"143","x":"340","y":"1796","zOrder":"33"},{"ID":"289","h":"68","measuredH":"67","measuredW":"2","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":1,"x":1,"y":0},"p1":{"length":0.5184985808036734,"x":0.517950123321458,"y":0.023842148533844896},"p2":{"length":67,"x":0,"y":67},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"3","x":"781","y":"1840","zOrder":"32"},{"ID":"290","measuredH":"32","measuredW":"90","properties":{"align":"center","color":"16776960","size":"18","text":"Webpack"},"typeID":"TextInput","w":"147","x":"726","y":"1903","zOrder":"188"},{"ID":"291","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16770457","size":"18","text":"Rollup"},"typeID":"TextInput","w":"147","x":"726","y":"1940","zOrder":"189"},{"ID":"292","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16777215","size":"18","text":"Parcel"},"typeID":"TextInput","w":"147","x":"726","y":"1978","zOrder":"190"},{"ID":"293","h":"113","measuredH":"140","measuredW":"200","properties":{"color":"16770457","text":""},"typeID":"TextArea","w":"453","x":"905","y":"1900","zOrder":"191"},{"ID":"295","measuredH":"25","measuredW":"343","properties":{"bold":"true","size":"17","text":"Use Webpack for apps, Rollup for libraries!"},"typeID":"Label","x":"919","y":"1914","zOrder":"192"},{"ID":"296","measuredH":"25","measuredW":"227","properties":{"size":"17","text":"I would just pick NPM Scripts"},"typeID":"Label","x":"167","y":"1784","zOrder":"193"},{"ID":"297","measuredH":"25","measuredW":"369","properties":{"size":"17","text":"with webpack but feel free to revisit Rollup later"},"typeID":"Label","x":"920","y":"1972","zOrder":"195"},{"ID":"298","h":"23","measuredH":"22","measuredW":"146","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":147.648230602334,"x":146,"y":22},"p1":{"length":0.4526052199748856,"x":0.4467326732673264,"y":-0.07267326732673271},"p2":{"length":3,"x":0,"y":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"147","x":"800","y":"1917","zOrder":"31"},{"ID":"299","h":"244","measuredH":"243","measuredW":"52","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":52,"x":52,"y":0},"p1":{"length":0.5130043099795483,"x":0.471276613180796,"y":-0.2026617278284945},"p2":{"length":247.50353532828575,"x":47,"y":243},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"53","x":"657","y":"1848","zOrder":"30"},{"ID":"305","h":"176","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"775","x":"484","y":"2085","zOrder":"196"},{"ID":"306","measuredH":"25","measuredW":"291","properties":{"bold":"true","size":"17","text":"Create something – Maybe a library"},"typeID":"Label","x":"530","y":"2104","zOrder":"197"},{"ID":"307","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"499","y":"2105","zOrder":"198"},{"ID":"308","measuredH":"21","measuredW":"11","properties":{"bold":"true","color":"16777215","text":"11"},"typeID":"Label","w":"10","x":"505","y":"2107","zOrder":"199"},{"ID":"309","measuredH":"25","measuredW":"660","properties":{"size":"17","text":"Congrats! You can call yourself 75% modern JavaScript developer now. Now go ahead"},"typeID":"Label","x":"530","y":"2133","zOrder":"200"},{"ID":"310","measuredH":"25","measuredW":"653","properties":{"size":"17","text":"and create something with all that you have learnt. Maybe create some sort of library"},"typeID":"Label","x":"530","y":"2161","zOrder":"201"},{"ID":"315","measuredH":"25","measuredW":"692","properties":{"size":"17","text":"in which you have to use Sass and JavaScript. Then use webpack to convert Sass to CSS"},"typeID":"Label","x":"530","y":"2190","zOrder":"202"},{"ID":"316","measuredH":"25","measuredW":"703","properties":{"size":"17","text":"and use babel to transpile ES6 code. Once you are done with, release it on Github and npm"},"typeID":"Label","x":"530","y":"2217","zOrder":"203"},{"ID":"317","measuredH":"32","measuredW":"32","properties":{"color":"10027263","icon":{"ID":"twitter","size":"medium"}},"typeID":"Icon","x":"920","y":"127","zOrder":"204"},{"ID":"318","measuredH":"25","measuredW":"133","properties":{"bold":"true","color":"10027263","size":"17","text":"kamranahmedse"},"typeID":"Label","x":"960","y":"132","zOrder":"205"},{"ID":"319","h":"82","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"319","x":"534","y":"2299","zOrder":"206"},{"ID":"320","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"547","y":"2315","zOrder":"207"},{"ID":"321","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"12"},"typeID":"Label","w":"19","x":"551","y":"2317","zOrder":"208"},{"ID":"322","measuredH":"26","measuredW":"149","properties":{"bold":"true","size":"18","text":"Pick a Framework"},"typeID":"Label","w":"175","x":"580","y":"2314","zOrder":"209"},{"ID":"323","measuredH":"25","measuredW":"174","properties":{"size":"17","text":"React, Angular or Vue"},"typeID":"Label","w":"184","x":"580","y":"2340","zOrder":"210"},{"ID":"324","h":"116","measuredH":"115","measuredW":"15","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":1,"x":1,"y":0},"p1":{"length":0.5526834034990115,"x":0.5380311507636474,"y":0.12641766218055345},"p2":{"length":115,"x":0,"y":115},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"763","y":"2193","zOrder":"29"},{"ID":"325","h":"11","measuredH":"10","measuredW":"114","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":114,"x":114,"y":0},"p1":{"length":0.47389069258171473,"x":0.47388515577275503,"y":0.002290775809407418},"p2":{"length":10,"x":0,"y":10},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"115","x":"460","y":"2313","zOrder":"28"},{"ID":"326","measuredH":"32","measuredW":"82","properties":{"align":"center","color":"16776960","size":"18","text":"React.js"},"typeID":"TextInput","w":"147","x":"324","y":"2307","zOrder":"211"},{"ID":"327","measuredH":"32","measuredW":"67","properties":{"align":"center","color":"16776960","size":"18","text":"Redux"},"typeID":"TextInput","w":"176","x":"167","y":"2049","zOrder":"212"},{"ID":"328","measuredH":"32","measuredW":"58","properties":{"align":"center","color":"16776960","size":"18","text":"Mobx"},"typeID":"TextInput","w":"176","x":"167","y":"2088","zOrder":"213"},{"ID":"329","h":"208","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"205","x":"153","y":"2032","zOrder":"27"},{"ID":"330","measuredH":"25","measuredW":"173","properties":{"size":"17","text":"These are not specific"},"typeID":"Label","x":"167","y":"2130","zOrder":"214"},{"ID":"331","measuredH":"25","measuredW":"166","properties":{"size":"17","text":"to React though, you "},"typeID":"Label","x":"167","y":"2153","zOrder":"215"},{"ID":"332","measuredH":"25","measuredW":"161","properties":{"size":"17","text":"can use them in any "},"typeID":"Label","x":"167","y":"2177","zOrder":"216"},{"ID":"333","measuredH":"25","measuredW":"136","properties":{"size":"17","text":"framework or app"},"typeID":"Label","x":"167","y":"2201","zOrder":"217"},{"ID":"334","h":"96","measuredH":"95","measuredW":"88","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":129.49517365523704,"x":88,"y":95},"p1":{"length":0.5172220165005103,"x":0.45524634313777257,"y":0.2454982309763954},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"89","x":"238","y":"2227","zOrder":"26"},{"ID":"335","measuredH":"32","measuredW":"63","properties":{"align":"center","color":"16776960","size":"18","text":"Vue.js"},"typeID":"TextInput","w":"147","x":"324","y":"2346","zOrder":"218"},{"ID":"336","measuredH":"32","measuredW":"80","properties":{"align":"center","color":"16776960","size":"18","text":"Angular"},"typeID":"TextInput","w":"147","x":"324","y":"2385","zOrder":"219"},{"ID":"337","h":"41","measuredH":"40","measuredW":"125","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":125,"x":125,"y":0},"p1":{"length":0.4738906925817148,"x":0.4738851557727551,"y":0.0022907758094072093},"p2":{"length":40,"x":0,"y":40},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"126","x":"459","y":"2323","zOrder":"25"},{"ID":"338","h":"50","measuredH":"49","measuredW":"110","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":110,"x":110,"y":0},"p1":{"length":0.4738906925817146,"x":0.4738851557727549,"y":0.002290775809407395},"p2":{"length":49,"x":0,"y":49},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"111","x":"466","y":"2352","zOrder":"24"},{"ID":"340","h":"123","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"276","x":"443","y":"2455","zOrder":"220"},{"ID":"341","measuredH":"32","measuredW":"54","properties":{"align":"center","color":"16776960","size":"18","text":"Rx.js"},"typeID":"TextInput","w":"176","x":"220","y":"2495","zOrder":"221"},{"ID":"342","measuredH":"32","measuredW":"52","properties":{"align":"center","color":"16776960","size":"18","text":"ngrx"},"typeID":"TextInput","w":"176","x":"220","y":"2531","zOrder":"222"},{"ID":"343","measuredH":"25","measuredW":"229","properties":{"size":"17","text":"Even if you don't pick angular"},"typeID":"Label","x":"459","y":"2468","zOrder":"223"},{"ID":"344","measuredH":"25","measuredW":"205","properties":{"size":"17","text":"Rx.js is an amazing library"},"typeID":"Label","x":"459","y":"2491","zOrder":"224"},{"ID":"345","measuredH":"25","measuredW":"245","properties":{"size":"17","text":"and can be used out of angular."},"typeID":"Label","x":"459","y":"2515","zOrder":"225"},{"ID":"346","measuredH":"25","measuredW":"184","properties":{"size":"17","text":"Give it a try afterwards!"},"typeID":"Label","x":"459","y":"2540","zOrder":"226"},{"ID":"347","h":"92","measuredH":"91","measuredW":"8","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":8,"x":8,"y":0},"p1":{"length":0.4472135954999579,"x":0.4461538461538461,"y":-0.03076923076923077},"p2":{"length":91.00549433962765,"x":1,"y":91},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"9","x":"377","y":"2424","zOrder":"23"},{"ID":"349","measuredH":"32","measuredW":"95","properties":{"align":"center","borderColor":"13576743","color":"16777215","size":"18","text":"Angular.js"},"typeID":"TextInput","w":"205","x":"81","y":"2431","zOrder":"227"},{"ID":"350","h":"27","measuredH":"107","measuredW":"205","properties":{"color":"13576743"},"typeID":"ScratchOut","w":"44","x":"238","y":"2433","zOrder":"228"},{"ID":"352","h":"158","measuredH":"157","measuredW":"1","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.4613486124774123,"x":0.46125955702687793,"y":0.00906439662646804},"p2":{"length":157,"x":0,"y":157},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"2","x":"166","y":"2448","zOrder":"22"},{"ID":"353","h":"123","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"354","x":"97","y":"2599","zOrder":"229"},{"ID":"354","measuredH":"25","measuredW":"147","properties":{"bold":"true","size":"17","text":"Honorary Mention!"},"typeID":"Label","x":"111","y":"2611","zOrder":"230"},{"ID":"355","measuredH":"25","measuredW":"281","properties":{"size":"17","text":"It isn't used any more except for the"},"typeID":"Label","x":"111","y":"2637","zOrder":"231"},{"ID":"356","measuredH":"25","measuredW":"265","properties":{"size":"17","text":"the old apps. Make sure if you pick"},"typeID":"Label","x":"111","y":"2662","zOrder":"232"},{"ID":"358","measuredH":"25","measuredW":"326","properties":{"size":"17","text":"Angular it is Angular2+ and not angular.js"},"typeID":"Label","x":"111","y":"2685","zOrder":"233"},{"ID":"364","h":"143","measuredH":"140","measuredW":"200","properties":{"color":"16770457","text":""},"typeID":"TextArea","w":"483","x":"891","y":"2288","zOrder":"234"},{"ID":"365","measuredH":"25","measuredW":"135","properties":{"bold":"true","size":"17","text":"Personal Opinion"},"typeID":"Label","x":"905","y":"2302","zOrder":"235"},{"ID":"366","measuredH":"25","measuredW":"436","properties":{"size":"17","text":"There is more and more demand for React.js these days"},"typeID":"Label","x":"905","y":"2333","zOrder":"236"},{"ID":"367","measuredH":"25","measuredW":"421","properties":{"size":"17","text":"You can pick any of the listed ones and you will be fine"},"typeID":"Label","x":"905","y":"2360","zOrder":"237"},{"ID":"368","measuredH":"25","measuredW":"314","properties":{"size":"17","text":"Personally I would pick React or Angular."},"typeID":"Label","x":"905","y":"2386","zOrder":"238"},{"ID":"378","h":"3","measuredH":"2","measuredW":"216","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":2,"x":0,"y":2},"p1":{"length":0.4738906925817149,"x":0.47388515577275514,"y":0.00229077580940742},"p2":{"length":216.00231480241132,"x":216,"y":1},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"217","x":"846","y":"2327","zOrder":"21"},{"ID":"379","h":"315","measuredH":"314","measuredW":"76","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":7,"x":7,"y":0},"p1":{"length":0.5133171436564842,"x":0.5032750563580599,"y":-0.1010381493270896},"p2":{"length":323.066556610244,"x":76,"y":314},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"77","x":"750","y":"2358","zOrder":"20"},{"ID":"380","h":"193","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"740","x":"541","y":"2615","zOrder":"239"},{"ID":"381","measuredH":"25","measuredW":"114","properties":{"bold":"true","size":"17","text":"Practical time"},"typeID":"Label","x":"588","y":"2628","zOrder":"240"},{"ID":"382","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"557","y":"2629","zOrder":"241"},{"ID":"383","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"13"},"typeID":"Label","w":"17","x":"562","y":"2631","zOrder":"242"},{"ID":"384","measuredH":"25","measuredW":"670","properties":{"size":"17","text":"Now you know _everything_ that one might need to build a modern JavaScript application."},"typeID":"Label","x":"588","y":"2657","zOrder":"243"},{"ID":"388","measuredH":"25","measuredW":"674","properties":{"size":"17","text":"Go ahead and make some application with whatever framework you picked. You can find"},"typeID":"Label","x":"588","y":"2687","zOrder":"244"},{"ID":"389","measuredH":"25","measuredW":"506","properties":{"size":"17","text":"some of the ideas in the `ideas` directory. Pick anything and start!"},"typeID":"Label","x":"588","y":"2714","zOrder":"245"},{"ID":"391","h":"213","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"740","x":"543","y":"2815","zOrder":"246"},{"ID":"392","measuredH":"32","measuredW":"54","properties":{"align":"center","color":"16776960","size":"18","text":"vuex"},"typeID":"TextInput","w":"176","x":"79","y":"2356","zOrder":"247"},{"ID":"393","h":"11","measuredH":"10","measuredW":"93","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":93.02150289046077,"x":93,"y":2},"p1":{"length":0.4073634704711659,"x":0.40573434757167937,"y":-0.03639555295494441},"p2":{"length":10,"x":0,"y":10},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"94","x":"235","y":"2362","zOrder":"19"},{"ID":"394","measuredH":"25","measuredW":"146","properties":{"bold":"true","size":"17","text":"Testing your Apps"},"typeID":"Label","x":"592","y":"2834","zOrder":"248"},{"ID":"395","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"561","y":"2834","zOrder":"249"},{"ID":"396","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"14"},"typeID":"Label","w":"17","x":"566","y":"2836","zOrder":"250"},{"ID":"397","h":"3","measuredH":"2","measuredW":"131","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":131,"x":131,"y":0},"p1":{"length":0.4605263157894736,"x":0.4605263157894736,"y":-1.821373747360583e-17},"p2":{"length":2,"x":0,"y":2},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"132","x":"374","y":"2508","zOrder":"18"},{"ID":"398","h":"1","measuredH":"0","measuredW":"175","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":175,"x":175,"y":0},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684621178},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"176","x":"384","y":"2846","zOrder":"17"},{"ID":"399","measuredH":"32","measuredW":"50","properties":{"align":"center","color":"16770457","size":"18","text":"Jest"},"typeID":"TextInput","w":"162","x":"220","y":"2796","zOrder":"251"},{"ID":"400","measuredH":"32","measuredW":"67","properties":{"align":"center","color":"16770457","size":"18","text":"Mocha"},"typeID":"TextInput","w":"162","x":"220","y":"2831","zOrder":"252"},{"ID":"401","measuredH":"32","measuredW":"69","properties":{"align":"center","color":"16770457","size":"18","text":"Karma"},"typeID":"TextInput","w":"162","x":"220","y":"2906","zOrder":"253"},{"ID":"402","measuredH":"32","measuredW":"81","properties":{"align":"center","color":"16770457","size":"18","text":"Enzyme"},"typeID":"TextInput","w":"162","x":"220","y":"2942","zOrder":"254"},{"ID":"403","measuredH":"25","measuredW":"647","properties":{"size":"17","text":"There are lots and lots of different tools for *different purposes*. I mostly find myself"},"typeID":"Label","x":"594","y":"2865","zOrder":"255"},{"ID":"404","measuredH":"25","measuredW":"652","properties":{"size":"17","text":"using the ones listed on the left. However, before you learn them, I would recommend"},"typeID":"Label","x":"594","y":"2888","zOrder":"256"},{"ID":"405","measuredH":"25","measuredW":"667","properties":{"size":"17","text":"you to first understand the different test types, look at all the options available and use"},"typeID":"Label","x":"594","y":"2912","zOrder":"257"},{"ID":"406","measuredH":"32","measuredW":"97","properties":{"align":"center","color":"16770457","size":"18","text":"Protractor"},"typeID":"TextInput","w":"162","x":"220","y":"2868","zOrder":"258"},{"ID":"407","measuredH":"25","measuredW":"294","properties":{"size":"17","text":"the ones most suitable for your needs."},"typeID":"Label","x":"594","y":"2936","zOrder":"259"},{"ID":"409","measuredH":"25","measuredW":"520","properties":{"color":"13576743","size":"17","text":"Here is a good summary to get you started : https://goo.gl/D77a4K"},"typeID":"Label","x":"594","y":"2978","zOrder":"260"},{"ID":"410","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"562","y":"2979","zOrder":"261"},{"ID":"411","h":"122","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"740","x":"543","y":"3034","zOrder":"262"},{"ID":"412","measuredH":"25","measuredW":"174","properties":{"bold":"true","size":"17","text":"Static Type Checkers"},"typeID":"Label","x":"587","y":"3053","zOrder":"263"},{"ID":"413","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"557","y":"3053","zOrder":"264"},{"ID":"414","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"15"},"typeID":"Label","w":"17","x":"562","y":"3055","zOrder":"265"},{"ID":"415","measuredH":"25","measuredW":"682","properties":{"size":"17","text":"You don't need to learn these but they really give you superpowers and can be mastered"},"typeID":"Label","x":"589","y":"3083","zOrder":"266"},{"ID":"423","measuredH":"32","measuredW":"104","properties":{"align":"center","color":"16776960","size":"18","text":"TypeScript"},"typeID":"TextInput","w":"162","x":"221","y":"3040","zOrder":"267"},{"ID":"424","measuredH":"32","measuredW":"50","properties":{"align":"center","color":"16770457","size":"18","text":"Flow"},"typeID":"TextInput","w":"162","x":"221","y":"3076","zOrder":"268"},{"ID":"425","h":"15","measuredH":"14","measuredW":"191","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":191.51240168720145,"x":191,"y":14},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.003397936068461866},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"192","x":"376","y":"3055","zOrder":"16"},{"ID":"426","h":"15","measuredH":"14","measuredW":"207","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":207,"x":207,"y":0},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684621147},"p2":{"length":14,"x":0,"y":14},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"208","x":"370","y":"3079","zOrder":"15"},{"ID":"427","measuredH":"25","measuredW":"576","properties":{"size":"17","text":"in a few hours. I would pick TypeScript but feel free to check both and pick."},"typeID":"Label","x":"589","y":"3108","zOrder":"269"},{"ID":"428","h":"105","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"739","x":"543","y":"3274","zOrder":"270"},{"ID":"429","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"557","y":"3289","zOrder":"271"},{"ID":"430","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"17"},"typeID":"Label","w":"16","x":"561","y":"3291","zOrder":"272"},{"ID":"431","measuredH":"26","measuredW":"150","properties":{"bold":"true","size":"18","text":"CSS Architecture"},"typeID":"Label","w":"293","x":"588","y":"3288","zOrder":"273"},{"ID":"432","measuredH":"25","measuredW":"671","properties":{"size":"17","text":"There are multiple ways to structure your CSS better and to make it more maintainable"},"typeID":"Label","x":"589","y":"3316","zOrder":"274"},{"ID":"436","measuredH":"25","measuredW":"626","properties":{"size":"17","text":"You should know about the differences – personally I find myself using BEM more"},"typeID":"Label","x":"590","y":"3341","zOrder":"275"},{"ID":"438","h":"51","measuredH":"50","measuredW":"201","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":207.12556578076016,"x":201,"y":50},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684621043},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"202","x":"386","y":"3279","zOrder":"11"},{"ID":"439","h":"73","measuredH":"72","measuredW":"184","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":197.5854245636555,"x":184,"y":72},"p1":{"length":0.5479563372577997,"x":0.5479508196721311,"y":0.0024590163934426227},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"185","x":"393","y":"3247","zOrder":"12"},{"ID":"440","measuredH":"32","measuredW":"51","properties":{"align":"center","color":"16776960","size":"18","text":"BEM"},"typeID":"TextInput","w":"162","x":"231","y":"3229","zOrder":"13"},{"ID":"441","measuredH":"32","measuredW":"80","properties":{"align":"center","color":"16770457","size":"18","text":"OOCSS"},"typeID":"TextInput","w":"162","x":"231","y":"3266","zOrder":"14"},{"ID":"442","measuredH":"32","measuredW":"89","properties":{"align":"center","color":"16770457","size":"18","text":"SMACSS"},"typeID":"TextInput","w":"162","x":"231","y":"3303","zOrder":"276"},{"ID":"443","measuredH":"32","measuredW":"95","properties":{"align":"center","color":"16770457","size":"18","text":"SUITCSS"},"typeID":"TextInput","w":"162","x":"231","y":"3340","zOrder":"277"},{"ID":"444","measuredH":"32","measuredW":"69","properties":{"align":"center","color":"16770457","size":"18","text":"Atomic"},"typeID":"TextInput","w":"162","x":"232","y":"3376","zOrder":"278"},{"ID":"445","h":"16","measuredH":"15","measuredW":"181","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":181.62048342629197,"x":181,"y":15},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684621134},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"182","x":"381","y":"3315","zOrder":"10"},{"ID":"446","h":"16","measuredH":"15","measuredW":"189","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":189,"x":189,"y":0},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684621165},"p2":{"length":15,"x":0,"y":15},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"190","x":"381","y":"3339","zOrder":"9"},{"ID":"447","h":"42","measuredH":"41","measuredW":"198","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":198,"x":198,"y":0},"p1":{"length":0.5395274381637957,"x":0.5395167379813743,"y":0.003397936068462093},"p2":{"length":41,"x":0,"y":41},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"199","x":"382","y":"3349","zOrder":"8"},{"ID":"448","h":"105","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"739","x":"543","y":"3387","zOrder":"279"},{"ID":"451","measuredH":"26","measuredW":"187","properties":{"bold":"true","size":"18","text":"Stuff Below this point"},"typeID":"Label","w":"293","x":"562","y":"3400","zOrder":"280"},{"ID":"452","measuredH":"25","measuredW":"624","properties":{"size":"17","text":"The skills that you have got till this point should be sufficient to get you a position"},"typeID":"Label","x":"563","y":"3427","zOrder":"281"},{"ID":"453","measuredH":"25","measuredW":"486","properties":{"size":"17","text":"for any of the \"Frontend Engineering\" roles. But don't stop here!"},"typeID":"Label","x":"563","y":"3453","zOrder":"282"},{"ID":"455","h":"81","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"739","x":"544","y":"3498","zOrder":"283"},{"ID":"456","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"558","y":"3512","zOrder":"284"},{"ID":"457","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"18"},"typeID":"Label","w":"16","x":"563","y":"3514","zOrder":"285"},{"ID":"458","measuredH":"26","measuredW":"195","properties":{"bold":"true","size":"18","text":"Server Side Rendering"},"typeID":"Label","w":"293","x":"589","y":"3511","zOrder":"286"},{"ID":"459","measuredH":"25","measuredW":"531","properties":{"size":"17","text":"Learn about server side rendering in whatever framework you picked"},"typeID":"Label","x":"590","y":"3538","zOrder":"287"},{"ID":"461","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16770457","size":"18","text":"React"},"typeID":"TextInput","w":"135","x":"258","y":"3478","zOrder":"288"},{"ID":"462","h":"30","measuredH":"29","measuredW":"176","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":178.3732042656632,"x":176,"y":29},"p1":{"length":0.5395274381637954,"x":0.5395167379813742,"y":0.0033979360684620896},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"177","x":"383","y":"3493","zOrder":"7"},{"ID":"463","measuredH":"32","measuredW":"80","properties":{"align":"center","color":"16770457","size":"18","text":"Angular"},"typeID":"TextInput","w":"135","x":"258","y":"3516","zOrder":"289"},{"ID":"464","h":"2","measuredH":"1","measuredW":"190","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":190,"x":190,"y":0},"p1":{"length":0.5395274381637957,"x":0.5395167379813743,"y":0.003397936068462092},"p2":{"length":1,"x":0,"y":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"191","x":"379","y":"3532","zOrder":"6"},{"ID":"465","measuredH":"32","measuredW":"71","properties":{"align":"center","color":"16776960","size":"18","text":"Next.js"},"typeID":"TextInput","w":"135","x":"91","y":"3433","zOrder":"290"},{"ID":"466","h":"36","measuredH":"35","measuredW":"89","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":95.63472172804184,"x":89,"y":35},"p1":{"length":0.4141690643745274,"x":0.3787677176742842,"y":-0.1675441133931154},"p2":{"length":1,"x":0,"y":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"90","x":"182","y":"3448","zOrder":"5"},{"ID":"467","measuredH":"32","measuredW":"72","properties":{"align":"center","color":"16770457","size":"18","text":"After.js"},"typeID":"TextInput","w":"135","x":"91","y":"3470","zOrder":"291"},{"ID":"468","h":"7","measuredH":"6","measuredW":"81","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":81.2219182240853,"x":81,"y":6},"p1":{"length":0.39570990272974865,"x":0.3956343792633015,"y":-0.007730786721236948},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"82","x":"193","y":"3490","zOrder":"4"},{"ID":"469","measuredH":"32","measuredW":"90","properties":{"align":"center","color":"16770457","size":"18","text":"Universal"},"typeID":"TextInput","w":"135","x":"93","y":"3516","zOrder":"292"},{"ID":"470","h":"5","measuredH":"4","measuredW":"75","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":75.1065909225016,"x":75,"y":4},"p1":{"length":0.3617013511163557,"x":0.36110618684630386,"y":-0.020741003368197126},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"76","x":"199","y":"3531","zOrder":"3"},{"ID":"471","measuredH":"32","measuredW":"63","properties":{"align":"center","color":"16770457","size":"18","text":"Vue.js"},"typeID":"TextInput","w":"135","x":"259","y":"3554","zOrder":"293"},{"ID":"472","h":"29","measuredH":"28","measuredW":"204","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":204,"x":204,"y":0},"p1":{"length":0.5395274381637952,"x":0.539516737981374,"y":0.003397936068462103},"p2":{"length":28,"x":0,"y":28},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"205","x":"375","y":"3542","zOrder":"2"},{"ID":"473","measuredH":"32","measuredW":"71","properties":{"align":"center","color":"16770457","size":"18","text":"Nuxt.js"},"typeID":"TextInput","w":"135","x":"93","y":"3554","zOrder":"294"},{"ID":"474","h":"4","measuredH":"3","measuredW":"75","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":75.05997601918082,"x":75,"y":3},"p1":{"length":0.3617013511163557,"x":0.36110618684630386,"y":-0.02074100336819713},"p2":{"length":1,"x":0,"y":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"76","x":"210","y":"3570","zOrder":"1"},{"ID":"475","h":"96","measuredH":"95","measuredW":"138","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"x":138,"y":0},"p1":{"x":0.4996889295516926,"y":-0.07513266239707228},"p2":{"x":0,"y":95},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"139","x":"569","y":"1833","zOrder":"295"},{"ID":"476","measuredH":"32","measuredW":"69","properties":{"align":"center","color":"16776960","size":"18","text":"ESLint"},"typeID":"TextInput","w":"147","x":"449","y":"1908","zOrder":"296"},{"ID":"477","measuredH":"32","measuredW":"68","properties":{"align":"center","color":"16770457","size":"18","text":"JSLint"},"typeID":"TextInput","w":"147","x":"449","y":"1945","zOrder":"297"},{"ID":"478","measuredH":"32","measuredW":"70","properties":{"align":"center","color":"16770457","size":"18","text":"JSHint"},"typeID":"TextInput","w":"147","x":"449","y":"1983","zOrder":"298"},{"ID":"479","measuredH":"32","measuredW":"63","properties":{"align":"center","color":"16770457","size":"18","text":"JSCS"},"typeID":"TextInput","w":"147","x":"449","y":"2021","zOrder":"299"},{"ID":"480","h":"81","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"739","x":"544","y":"3584","zOrder":"300"},{"ID":"481","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"558","y":"3598","zOrder":"301"},{"ID":"482","measuredH":"22","measuredW":"14","properties":{"bold":"true","color":"16777215","size":"14","text":"19"},"typeID":"Label","w":"16","x":"562","y":"3600","zOrder":"302"},{"ID":"483","measuredH":"26","measuredW":"185","properties":{"bold":"true","size":"18","text":"Progressive WebApps"},"typeID":"Label","w":"293","x":"589","y":"3597","zOrder":"303"},{"ID":"484","measuredH":"25","measuredW":"509","properties":{"size":"17","text":"Learn about service workers and how to make progress web apps"},"typeID":"Label","x":"590","y":"3624","zOrder":"304"},{"ID":"491","measuredH":"25","measuredW":"551","properties":{"color":"13576743","size":"17","text":"Learn how to measure and improve the performance of your application"},"typeID":"Label","x":"588","y":"2747","zOrder":"305"},{"ID":"492","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"556","y":"2751","zOrder":"306"},{"ID":"493","measuredH":"25","measuredW":"491","properties":{"color":"13576743","size":"17","text":"e.g. Interactivity Time, Page Speed Index, Lighthouse Score etc"},"typeID":"Label","x":"587","y":"2772","zOrder":"307"},{"ID":"494","h":"173","measuredH":"172","measuredW":"16","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":16,"y":0},"p1":{"x":0.586461126005362,"y":0.00804289544235925},"p2":{"x":0,"y":172},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"17","x":"863","y":"3637","zOrder":"0"},{"ID":"498","measuredH":"32","measuredW":"170","properties":{"bold":"true","size":"24","text":"Keep Exploring"},"typeID":"Label","x":"777","y":"3827","zOrder":"308"}]},"measuredH":"3859","measuredW":"1374","mockupH":"3812","mockupW":"1295","version":"1.0"}} \ No newline at end of file +{"mockup":{"controls":{"control":[{"ID":"0","measuredH":"40","measuredW":"149","properties":{"bold":"true","size":"32","text":"Front-end"},"typeID":"Label","x":"563","y":"121","zOrder":"54"},{"ID":"1","h":"74","measuredH":"73","measuredW":"18","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":8,"x":8,"y":0},"p1":{"length":0.4979530082684307,"x":0.45894941634241254,"y":0.19319066147859923},"p2":{"length":73,"x":0,"y":73},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"19","x":"637","y":"47","zOrder":"55"},{"ID":"2","h":"61","measuredH":"60","measuredW":"15","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":2,"x":2,"y":0},"p1":{"length":0.4752342503759216,"x":0.46391752577319545,"y":-0.1030927835051546},"p2":{"length":61.84658438426491,"x":15,"y":60},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"626","y":"177","zOrder":"56"},{"ID":"3","measuredH":"26","measuredW":"147","properties":{"bold":"true","size":"18","text":"Learn the Basics"},"typeID":"Label","x":"589","y":"244","zOrder":"57"},{"ID":"21","measuredH":"25","measuredW":"168","properties":{"bold":"true","size":"17","text":"Basics of JavaScript"},"typeID":"Label","x":"589","y":"424","zOrder":"66"},{"ID":"24","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"556","y":"424","zOrder":"67"},{"ID":"25","measuredH":"25","measuredW":"118","properties":{"bold":"true","size":"17","text":"Basics of CSS"},"typeID":"Label","x":"589","y":"378","zOrder":"62"},{"ID":"26","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"555","y":"378","zOrder":"63"},{"ID":"27","measuredH":"25","measuredW":"100","properties":{"bold":"true","size":"17","text":"Learn HTML"},"typeID":"Label","x":"589","y":"330","zOrder":"58"},{"ID":"28","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"555","y":"330","zOrder":"59"},{"ID":"29","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"1"},"typeID":"Label","x":"563","y":"332","zOrder":"60"},{"ID":"30","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"2"},"typeID":"Label","w":"10","x":"563","y":"380","zOrder":"64"},{"ID":"31","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"3"},"typeID":"Label","w":"10","x":"564","y":"426","zOrder":"68"},{"ID":"33","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"543","y":"322","zOrder":"53"},{"ID":"34","h":"55","measuredH":"54","measuredW":"9","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"length":3,"x":3,"y":0},"p1":{"length":0.529252928988914,"x":0.510715363718684,"y":0.13884696649562314},"p2":{"length":54,"x":0,"y":54},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"10","x":"655","y":"277","zOrder":"38"},{"ID":"36","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"543","y":"370","zOrder":"61"},{"ID":"40","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"250","x":"544","y":"417","zOrder":"65"},{"ID":"44","h":"23","measuredH":"22","measuredW":"48","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":48,"x":48,"y":0},"p1":{"length":0.4652808414804901,"x":0.4652789342214823,"y":-0.001332223147377283},"p2":{"length":22,"x":0,"y":22},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"49","x":"792","y":"320","zOrder":"52"},{"ID":"45","measuredH":"25","measuredW":"322","properties":{"size":"17","text":"Don't worry about making them pretty yet"},"typeID":"Label","x":"859","y":"363","zOrder":"109"},{"ID":"46","h":"4","measuredH":"3","measuredW":"59","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"length":59,"x":59,"y":0},"p1":{"length":0.4929592777882592,"x":0.4929203539823009,"y":-0.006194690265486749},"p2":{"length":3,"x":0,"y":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"60","x":"794","y":"347","zOrder":"51"},{"ID":"47","measuredH":"25","measuredW":"514","properties":{"size":"17","text":"Dividing page into sections and how to structure the DOM properly"},"typeID":"Label","x":"854","y":"302","zOrder":"110"},{"ID":"48","h":"49","measuredH":"48","measuredW":"61","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":61,"x":61,"y":0},"p1":{"length":0.4585249091872984,"x":0.45522128005575574,"y":-0.054942502032756454},"p2":{"length":48,"x":0,"y":48},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"62","x":"787","y":"285","zOrder":"49"},{"ID":"49","measuredH":"25","measuredW":"390","properties":{"size":"17","text":"Learn the basics and how to write semantic HTML"},"typeID":"Label","x":"858","y":"268","zOrder":"111"},{"ID":"56","h":"19","measuredH":"18","measuredW":"68","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":70.3420215802759,"x":68,"y":18},"p1":{"length":0.4579653787384571,"x":0.45747670462949247,"y":0.021150717349504505},"p2":{"length":0,"x":0,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"69","x":"787","y":"356","zOrder":"50"},{"ID":"57","measuredH":"25","measuredW":"386","properties":{"size":"17","text":"Make at least 5 HTML pages – focus on structure"},"typeID":"Label","x":"859","y":"335","zOrder":"112"},{"ID":"59","h":"66","measuredH":"65","measuredW":"112","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.47314423386375903,"x":0.47200190828314154,"y":0.03285825034289463},"p2":{"length":129.49517365523704,"x":112,"y":65},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"113","x":"438","y":"320","zOrder":"48"},{"ID":"60","measuredH":"25","measuredW":"191","properties":{"size":"17","text":"Learn the basics of CSS"},"typeID":"Label","x":"238","y":"303","zOrder":"69"},{"ID":"63","h":"43","measuredH":"42","measuredW":"124","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.4354479714301555,"x":0.4346557759626609,"y":0.026254375729288137},"p2":{"length":130.91982279242512,"x":124,"y":42},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"125","x":"436","y":"352","zOrder":"47"},{"ID":"67","h":"13","measuredH":"12","measuredW":"119","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":1,"x":0,"y":1},"p1":{"length":0.42921590082087,"x":0.42861896838602337,"y":0.022628951747088195},"p2":{"length":119.60351165413162,"x":119,"y":12},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"120","x":"440","y":"385","zOrder":"46"},{"ID":"68","measuredH":"25","measuredW":"268","properties":{"size":"17","text":"Learn how to use Grid and Flexbox"},"typeID":"Label","x":"162","y":"338","zOrder":"70"},{"ID":"70","measuredH":"25","measuredW":"318","properties":{"size":"17","text":"Media Queries and Responsive Websites"},"typeID":"Label","x":"113","y":"371","zOrder":"71"},{"ID":"83","h":"20","measuredH":"19","measuredW":"71","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":19,"x":0,"y":19},"p1":{"length":0.4406669241308615,"x":0.43817104776008886,"y":-0.04683450573861533},"p2":{"length":71,"x":71,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"72","x":"478","y":"397","zOrder":"45"},{"ID":"85","measuredH":"25","measuredW":"378","properties":{"size":"17","text":"Style the HTML Pages that you made in last step"},"typeID":"Label","x":"93","y":"404","zOrder":"72"},{"ID":"86","h":"4","measuredH":"3","measuredW":"53","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":3,"x":0,"y":3},"p1":{"length":0.4600856791042167,"x":0.4583941605839416,"y":0.03941605839416058},"p2":{"length":53.08483775994799,"x":53,"y":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"54","x":"797","y":"422","zOrder":"43"},{"ID":"88","measuredH":"25","measuredW":"301","properties":{"size":"17","text":"Learn the syntax and basic constructs"},"typeID":"Label","x":"855","y":"414","zOrder":"113"},{"ID":"89","measuredH":"25","measuredW":"233","properties":{"size":"17","text":"Learn how to manipulate DOM"},"typeID":"Label","x":"855","y":"442","zOrder":"114"},{"ID":"90","h":"16","measuredH":"15","measuredW":"55","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.45653907041455166,"x":0.45488081725312146,"y":0.03887627695800227},"p2":{"length":57.0087712549569,"x":55,"y":15},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"56","x":"794","y":"437","zOrder":"44"},{"ID":"91","h":"62","measuredH":"61","measuredW":"67","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5281388123911577,"x":0.5199305086381621,"y":-0.09275166489721068},"p2":{"length":90.60905032059436,"x":67,"y":61},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"68","x":"786","y":"449","zOrder":"41"},{"ID":"92","measuredH":"25","measuredW":"558","properties":{"size":"17","text":"Understand the concepts such as hoisting, event bubbling, prototype etc"},"typeID":"Label","x":"850","y":"471","zOrder":"115"},{"ID":"93","h":"38","measuredH":"37","measuredW":"56","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5310495030226782,"x":0.5300904977375566,"y":-0.03190045248868781},"p2":{"length":67.11929677819934,"x":56,"y":37},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"57","x":"789","y":"441","zOrder":"42"},{"ID":"94","measuredH":"25","measuredW":"445","properties":{"size":"17","text":"Learn ES6+ new features and writing modular JavaScript"},"typeID":"Label","x":"858","y":"535","zOrder":"116"},{"ID":"95","h":"94","measuredH":"93","measuredW":"74","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5490011385437095,"x":0.5330996249796185,"y":-0.13117560736996578},"p2":{"length":118.84864324004712,"x":74,"y":93},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"75","x":"778","y":"448","zOrder":"40"},{"ID":"96","measuredH":"25","measuredW":"137","properties":{"size":"17","text":"Learn Ajax (XHR)"},"typeID":"Label","x":"858","y":"504","zOrder":"117"},{"ID":"98","h":"41","measuredH":"140","measuredW":"200","properties":{"borderColor":"13576743","color":"16777215"},"typeID":"TextArea","w":"325","x":"153","y":"512","zOrder":"73"},{"ID":"102","measuredH":"25","measuredW":"146","properties":{"bold":"true","color":"0","size":"17","text":"jQuery – Optional"},"typeID":"Label","x":"167","y":"520","zOrder":"74"},{"ID":"108","h":"202","measuredH":"200","measuredW":"48","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":15,"x":15,"y":0},"p1":{"length":0.4723872861411133,"x":0.452773248314634,"y":-0.13470758597191462},"p2":{"length":205.67936211491903,"x":48,"y":200},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"50","x":"622","y":"454","zOrder":"39"},{"ID":"109","h":"2","measuredH":"1","measuredW":"136","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5074062205613563,"x":0.5073529411764706,"y":-0.007352941176470588},"p2":{"length":136,"x":136,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"137","x":"489","y":"531","zOrder":"75"},{"ID":"111","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"613","y":"519","zOrder":"76"},{"ID":"112","h":"41","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"767","x":"314","y":"593","zOrder":"77"},{"ID":"114","measuredH":"25","measuredW":"574","properties":{"size":"17","text":"Make some responsive website and add some interactivity with JavaScript"},"typeID":"Label","x":"356","y":"601","zOrder":"78"},{"ID":"115","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"324","y":"601","zOrder":"79"},{"ID":"116","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"4"},"typeID":"Label","w":"10","x":"332","y":"603","zOrder":"80"},{"ID":"117","h":"36","measuredH":"107","measuredW":"205","properties":{"color":"13576743"},"typeID":"ScratchOut","w":"66","x":"409","y":"514","zOrder":"81"},{"ID":"118","h":"178","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"767","x":"314","y":"641","zOrder":"82"},{"ID":"119","measuredH":"25","measuredW":"678","properties":{"bold":"true","size":"17","text":"Search projects on Github and open a few PRs. Some of the ideas are listed below :"},"typeID":"Label","x":"356","y":"655","zOrder":"83"},{"ID":"120","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"325","y":"656","zOrder":"84"},{"ID":"121","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"5"},"typeID":"Label","w":"10","x":"333","y":"658","zOrder":"85"},{"ID":"125","measuredH":"25","measuredW":"564","properties":{"size":"17","text":"Enhance the UI, make any demo pages responsive or improve the design"},"typeID":"Label","x":"356","y":"684","zOrder":"86"},{"ID":"126","measuredH":"25","measuredW":"339","properties":{"size":"17","text":"Look for any open issues that you can solve"},"typeID":"Label","x":"356","y":"711","zOrder":"87"},{"ID":"127","measuredH":"25","measuredW":"672","properties":{"size":"17","text":"Refactor any of the code or implement the best practices that you learnt along the way"},"typeID":"Label","x":"356","y":"738","zOrder":"88"},{"ID":"129","measuredH":"23","measuredW":"703","properties":{"bold":"true","color":"10027263","size":"15","text":"Link this repo, tell them you are learning and ask for feedback on your PR and how you can improve"},"typeID":"Label","x":"356","y":"777","zOrder":"89"},{"ID":"130","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"325","y":"776","zOrder":"90"},{"ID":"131","measuredH":"32","measuredW":"32","properties":{"color":"10027263","icon":{"ID":"github","size":"medium"}},"typeID":"Icon","x":"920","y":"81","zOrder":"91"},{"ID":"132","measuredH":"25","measuredW":"295","properties":{"bold":"true","color":"10027263","size":"17","text":"kamranahmedse/developer-roadmap"},"typeID":"Label","x":"959","y":"85","zOrder":"92"},{"ID":"140","h":"135","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"767","x":"314","y":"827","zOrder":"93"},{"ID":"141","measuredH":"25","measuredW":"443","properties":{"bold":"true","size":"17","text":"Give yourself a pat on the back. You are getting there :"},"typeID":"Label","x":"355","y":"842","zOrder":"94"},{"ID":"142","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"325","y":"842","zOrder":"95"},{"ID":"143","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"6"},"typeID":"Label","w":"10","x":"333","y":"844","zOrder":"96"},{"ID":"149","measuredH":"25","measuredW":"629","properties":{"size":"17","text":"There are many jobs out there requiring the skillset that you have got till this point"},"typeID":"Label","x":"356","y":"868","zOrder":"97"},{"ID":"150","measuredH":"25","measuredW":"629","properties":{"size":"17","text":"You can easily start getting some freelance work or find yourself a job if you may."},"typeID":"Label","x":"356","y":"893","zOrder":"98"},{"ID":"153","measuredH":"25","measuredW":"690","properties":{"size":"17","text":"However, don't stop here, there is still a long way to go if you want to have a better career"},"typeID":"Label","x":"357","y":"919","zOrder":"99"},{"ID":"155","h":"265","measuredH":"264","measuredW":"76","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":76,"x":76,"y":0},"p1":{"length":0.5074530613720352,"x":0.4565573307740078,"y":-0.2215039801275899},"p2":{"length":267.3200329193456,"x":42,"y":264},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"77","x":"237","y":"743","zOrder":"36"},{"ID":"156","measuredH":"25","measuredW":"339","properties":{"bold":"true","size":"17","text":"Optional – Needs some knowledge of `git`"},"typeID":"Label","x":"294","y":"1015","zOrder":"100"},{"ID":"157","measuredH":"25","measuredW":"346","properties":{"size":"17","text":"This part is optional, I added it here because"},"typeID":"Label","x":"295","y":"1043","zOrder":"101"},{"ID":"158","measuredH":"25","measuredW":"384","properties":{"size":"17","text":"it is a great way to learn and find out if you are on"},"typeID":"Label","x":"295","y":"1067","zOrder":"102"},{"ID":"159","measuredH":"25","measuredW":"399","properties":{"size":"17","text":"the right track or not. You will be amazed to find out"},"typeID":"Label","x":"294","y":"1092","zOrder":"103"},{"ID":"160","measuredH":"25","measuredW":"335","properties":{"size":"17","text":"how much people are willing to help you out."},"typeID":"Label","x":"295","y":"1117","zOrder":"104"},{"ID":"161","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"290","y":"1156","zOrder":"105"},{"ID":"162","measuredH":"23","measuredW":"366","properties":{"bold":"true","color":"10027263","size":"15","text":"Don't be scared of git, it is easiest of all the things"},"typeID":"Label","x":"322","y":"1153","zOrder":"106"},{"ID":"164","measuredH":"23","measuredW":"359","properties":{"bold":"true","color":"10027263","size":"15","text":"that you have learnt above. You can get the basics"},"typeID":"Label","x":"322","y":"1174","zOrder":"107"},{"ID":"165","h":"245","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"427","x":"278","y":"1001","zOrder":"37"},{"ID":"167","measuredH":"23","measuredW":"292","properties":{"bold":"true","color":"10027263","size":"15","text":"in the few hours and do the rest later on"},"typeID":"Label","x":"322","y":"1195","zOrder":"108"},{"ID":"169","h":"381","measuredH":"380","measuredW":"68","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"x":5,"y":0},"p1":{"x":0.51012414933679,"y":0.17392640436254733},"p2":{"x":0,"y":380},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"69","x":"727","y":"917","zOrder":"35"},{"ID":"170","h":"136","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"543","x":"310","y":"1594","zOrder":"118"},{"ID":"172","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"323","y":"1610","zOrder":"119"},{"ID":"173","measuredH":"22","measuredW":"10","properties":{"bold":"true","color":"16777215","size":"14","text":"9"},"typeID":"Label","w":"19","x":"330","y":"1612","zOrder":"120"},{"ID":"174","measuredH":"26","measuredW":"167","properties":{"bold":"true","size":"18","text":"CSS Preprocessors"},"typeID":"Label","w":"199","x":"356","y":"1610","zOrder":"121"},{"ID":"175","measuredH":"32","measuredW":"56","properties":{"align":"center","color":"16776960","size":"18","text":"Sass"},"typeID":"TextInput","w":"136","x":"284","y":"1369","zOrder":"122"},{"ID":"176","measuredH":"32","measuredW":"55","properties":{"align":"center","color":"16777215","size":"18","text":"Less"},"typeID":"TextInput","w":"136","x":"284","y":"1445","zOrder":"123"},{"ID":"177","measuredH":"32","measuredW":"66","properties":{"align":"center","color":"16777215","size":"18","text":"Stylus"},"typeID":"TextInput","w":"136","x":"284","y":"1483","zOrder":"124"},{"ID":"178","measuredH":"32","measuredW":"88","properties":{"align":"center","color":"16776960","size":"18","text":"PostCSS"},"typeID":"TextInput","w":"136","x":"284","y":"1406","zOrder":"125"},{"ID":"180","measuredH":"25","measuredW":"450","properties":{"size":"17","text":"Preprocessors let you add functionality on top of CSS and"},"typeID":"Label","x":"356","y":"1638","zOrder":"126"},{"ID":"181","measuredH":"25","measuredW":"459","properties":{"size":"17","text":"let you do things that CSS can't. Have a look at any of them"},"typeID":"Label","x":"356","y":"1663","zOrder":"127"},{"ID":"182","measuredH":"25","measuredW":"441","properties":{"size":"17","text":"and see what they have to offer and pick the suitable one"},"typeID":"Label","x":"356","y":"1689","zOrder":"128"},{"ID":"184","h":"8","measuredH":"7","measuredW":"204","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":204.00980368599937,"x":204,"y":2},"p1":{"length":0.4189940316033579,"x":0.4186861064441723,"y":-0.01606059743144346},"p2":{"length":7,"x":0,"y":7},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"205","x":"815","y":"1655","zOrder":"34"},{"ID":"185","h":"187","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"408","x":"915","y":"1564","zOrder":"129"},{"ID":"196","measuredH":"25","measuredW":"157","properties":{"bold":"true","size":"17","text":"Learn Sass for now"},"typeID":"Label","x":"928","y":"1576","zOrder":"130"},{"ID":"197","measuredH":"25","measuredW":"411","properties":{"size":"17","text":"You do not need rollup for now and can do everything"},"typeID":"Label","x":"919","y":"2200","zOrder":"181"},{"ID":"198","measuredH":"25","measuredW":"370","properties":{"size":"17","text":"PostCSS is a nice-to-have and is sort of \"Babel\""},"typeID":"Label","x":"930","y":"1633","zOrder":"131"},{"ID":"199","measuredH":"25","measuredW":"335","properties":{"size":"17","text":"for CSS. You can use it on top of Sass also."},"typeID":"Label","x":"930","y":"1658","zOrder":"132"},{"ID":"200","measuredH":"25","measuredW":"240","properties":{"size":"17","text":"Sass and revisit PostCSS later"},"typeID":"Label","x":"930","y":"1712","zOrder":"133"},{"ID":"202","measuredH":"25","measuredW":"323","properties":{"size":"17","text":"However, I would recommend you to learn "},"typeID":"Label","x":"930","y":"1684","zOrder":"134"},{"ID":"204","h":"97","measuredH":"96","measuredW":"21","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"length":11,"x":11,"y":0},"p1":{"length":0.5588009305954578,"x":0.5354229282954058,"y":-0.15993988836410478},"p2":{"length":98.2700361249552,"x":21,"y":96},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"22","x":"559","y":"1515","zOrder":"33"},{"ID":"210","h":"52","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"344","x":"527","y":"1273","zOrder":"135"},{"ID":"211","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"538","y":"1285","zOrder":"136"},{"ID":"212","measuredH":"22","measuredW":"10","properties":{"bold":"true","color":"16777215","size":"14","text":"7"},"typeID":"Label","w":"12","x":"546","y":"1286","zOrder":"137"},{"ID":"213","measuredH":"26","measuredW":"39","properties":{"bold":"true","size":"18","text":"NPM"},"typeID":"Label","w":"47","x":"901","y":"1286","zOrder":"140"},{"ID":"215","h":"52","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"89","x":"876","y":"1273","zOrder":"138"},{"ID":"216","measuredH":"26","measuredW":"159","properties":{"bold":"true","size":"18","text":"Package Managers"},"typeID":"Label","w":"199","x":"572","y":"1285","zOrder":"139"},{"ID":"217","h":"52","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"89","x":"969","y":"1273","zOrder":"141"},{"ID":"218","measuredH":"26","measuredW":"38","properties":{"bold":"true","size":"18","text":"Yarn"},"typeID":"Label","w":"47","x":"991","y":"1286","zOrder":"142"},{"ID":"219","h":"80","measuredH":"79","measuredW":"67","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"length":67,"x":67,"y":0},"p1":{"length":0.5230534443633628,"x":0.5075471698113209,"y":-0.1264150943396224},"p2":{"length":79,"x":0,"y":79},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"68","x":"805","y":"1202","zOrder":"32"},{"ID":"220","h":"225","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"417","x":"845","y":"1001","zOrder":"143"},{"ID":"222","measuredH":"25","measuredW":"334","properties":{"size":"17","text":"Package managers help you bring external "},"typeID":"Label","x":"861","y":"1051","zOrder":"144"},{"ID":"223","measuredH":"25","measuredW":"354","properties":{"size":"17","text":"libraries and plugins into your projects, so that"},"typeID":"Label","x":"861","y":"1077","zOrder":"145"},{"ID":"224","measuredH":"25","measuredW":"386","properties":{"size":"17","text":"you don't have to worry about copying the libraries"},"typeID":"Label","x":"861","y":"1103","zOrder":"146"},{"ID":"226","measuredH":"25","measuredW":"384","properties":{"size":"17","text":"manually or go through the hassle of updating etc"},"typeID":"Label","x":"861","y":"1129","zOrder":"147"},{"ID":"227","measuredH":"25","measuredW":"286","properties":{"size":"17","text":"Both are almost same, there are just "},"typeID":"Label","x":"861","y":"1156","zOrder":"148"},{"ID":"229","measuredH":"25","measuredW":"316","properties":{"size":"17","text":"implementation differences; just pick any."},"typeID":"Label","x":"861","y":"1181","zOrder":"149"},{"ID":"230","h":"202","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"759","x":"527","y":"1331","zOrder":"150"},{"ID":"231","measuredH":"25","measuredW":"425","properties":{"bold":"true","size":"17","text":"Install some external dependency in your application"},"typeID":"Label","x":"572","y":"1349","zOrder":"151"},{"ID":"232","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"541","y":"1350","zOrder":"152"},{"ID":"233","measuredH":"21","measuredW":"10","properties":{"bold":"true","color":"16777215","text":"8"},"typeID":"Label","w":"10","x":"549","y":"1352","zOrder":"153"},{"ID":"234","measuredH":"25","measuredW":"622","properties":{"size":"17","text":"Go ahead and install some external library in the webpages that you made above"},"typeID":"Label","x":"572","y":"1376","zOrder":"154"},{"ID":"237","measuredH":"25","measuredW":"683","properties":{"size":"17","text":"e.g. install some toast plugin and when user clicks a button, show him the toast message"},"typeID":"Label","x":"572","y":"1402","zOrder":"155"},{"ID":"238","measuredH":"25","measuredW":"665","properties":{"size":"17","text":"or create a login form and do the form validation using some form validation library and"},"typeID":"Label","x":"572","y":"1429","zOrder":"156"},{"ID":"239","measuredH":"25","measuredW":"510","properties":{"size":"17","text":"play with different options and see how to install different versions"},"typeID":"Label","x":"573","y":"1454","zOrder":"157"},{"ID":"242","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"545","y":"1489","zOrder":"158"},{"ID":"243","measuredH":"23","measuredW":"230","properties":{"bold":"true","color":"10027263","size":"15","text":"Read about semantic versioning"},"typeID":"Label","x":"573","y":"1490","zOrder":"159"},{"ID":"244","h":"116","measuredH":"115","measuredW":"22","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":117.08543888972702,"x":22,"y":115},"p1":{"length":0.5349115625926845,"x":0.5263097382439734,"y":0.09554286590273256},"p2":{"length":5,"x":5,"y":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"23","x":"332","y":"1499","zOrder":"31"},{"ID":"260","measuredH":"25","measuredW":"357","properties":{"bold":"true","size":"17","text":"Learn one, you automatically learn the other"},"typeID":"Label","x":"861","y":"1018","zOrder":"160"},{"ID":"267","h":"84","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"543","x":"696","y":"2036","zOrder":"161"},{"ID":"268","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"709","y":"2052","zOrder":"162"},{"ID":"269","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"12"},"typeID":"Label","w":"19","x":"713","y":"2054","zOrder":"163"},{"ID":"270","measuredH":"26","measuredW":"90","properties":{"bold":"true","size":"18","text":"Build tools"},"typeID":"Label","w":"101","x":"742","y":"2051","zOrder":"164"},{"ID":"271","measuredH":"25","measuredW":"450","properties":{"size":"17","text":"Tools to help you in the building/bundling and development"},"typeID":"Label","x":"742","y":"2077","zOrder":"165"},{"ID":"274","h":"140","measuredH":"139","measuredW":"111","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"length":0,"x":0,"y":0},"p1":{"length":0.5522448742292186,"x":0.5380822956829531,"y":0.12426521711649068},"p2":{"length":177.88198334851114,"x":111,"y":139},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"112","x":"607","y":"1670","zOrder":"30"},{"ID":"275","h":"12","measuredH":"11","measuredW":"112","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":112,"y":11,"length":112.53888216967503},"p1":{"x":0.6096633663366336,"y":-0.031366336633663366,"length":0.6104697104089052},"p2":{"x":0,"y":2,"length":2},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"113","x":"603","y":"2058","zOrder":"29"},{"ID":"276","measuredH":"32","measuredW":"116","properties":{"align":"center","color":"16776960","size":"18","text":"NPM Scripts"},"typeID":"TextInput","w":"147","x":"471","y":"2045","zOrder":"166"},{"ID":"278","measuredH":"32","measuredW":"52","properties":{"align":"center","color":"16770457","size":"18","text":"Gulp"},"typeID":"TextInput","w":"147","x":"471","y":"2082","zOrder":"167"},{"ID":"280","h":"188","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"261","x":"153","y":"2036","zOrder":"168"},{"ID":"281","measuredH":"25","measuredW":"109","properties":{"bold":"true","size":"17","text":"Task Runners"},"typeID":"Label","x":"167","y":"2051","zOrder":"169"},{"ID":"282","measuredH":"25","measuredW":"352","properties":{"size":"17","text":"I would recommend you to learn Sass for now"},"typeID":"Label","x":"930","y":"1608","zOrder":"170"},{"ID":"283","measuredH":"25","measuredW":"178","properties":{"size":"17","text":"in 2018. However, if you"},"typeID":"Label","x":"167","y":"2105","zOrder":"171"},{"ID":"284","measuredH":"25","measuredW":"216","properties":{"size":"17","text":"want to pick something else"},"typeID":"Label","x":"167","y":"2130","zOrder":"172"},{"ID":"285","measuredH":"25","measuredW":"225","properties":{"size":"17","text":"look at Gulp and see how you"},"typeID":"Label","x":"167","y":"2158","zOrder":"173"},{"ID":"286","measuredH":"25","measuredW":"143","properties":{"size":"17","text":"can benefit from it"},"typeID":"Label","x":"167","y":"2185","zOrder":"174"},{"ID":"287","h":"12","measuredH":"11","measuredW":"142","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"x":142,"y":10,"length":142.35167719419397},"p1":{"x":0.5196039603960396,"y":0.03603960396039605,"length":0.5208523098853179},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"143","x":"340","y":"2051","zOrder":"28"},{"ID":"289","h":"68","measuredH":"67","measuredW":"2","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"x":1,"y":0,"length":1},"p1":{"x":0.517950123321458,"y":0.023842148533844896,"length":0.5184985808036734},"p2":{"x":0,"y":67,"length":67},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"3","x":"781","y":"2095","zOrder":"27"},{"ID":"290","measuredH":"32","measuredW":"90","properties":{"align":"center","color":"16776960","size":"18","text":"Webpack"},"typeID":"TextInput","w":"147","x":"726","y":"2158","zOrder":"175"},{"ID":"291","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16770457","size":"18","text":"Rollup"},"typeID":"TextInput","w":"147","x":"726","y":"2195","zOrder":"176"},{"ID":"292","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16777215","size":"18","text":"Parcel"},"typeID":"TextInput","w":"147","x":"726","y":"2233","zOrder":"177"},{"ID":"293","h":"113","measuredH":"140","measuredW":"200","properties":{"color":"16770457","text":""},"typeID":"TextArea","w":"453","x":"905","y":"2155","zOrder":"178"},{"ID":"295","measuredH":"25","measuredW":"343","properties":{"bold":"true","size":"17","text":"Use Webpack for apps, Rollup for libraries!"},"typeID":"Label","x":"919","y":"2169","zOrder":"179"},{"ID":"296","measuredH":"25","measuredW":"227","properties":{"size":"17","text":"I would just pick NPM Scripts"},"typeID":"Label","x":"167","y":"2079","zOrder":"180"},{"ID":"297","measuredH":"25","measuredW":"369","properties":{"size":"17","text":"with webpack but feel free to revisit Rollup later"},"typeID":"Label","x":"920","y":"2227","zOrder":"182"},{"ID":"298","h":"23","measuredH":"22","measuredW":"146","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":146,"y":22,"length":147.648230602334},"p1":{"x":0.4467326732673264,"y":-0.07267326732673271,"length":0.45260521997488556},"p2":{"x":0,"y":3,"length":3},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"147","x":"800","y":"2172","zOrder":"26"},{"ID":"299","h":"244","measuredH":"243","measuredW":"52","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"x":52,"y":0,"length":52},"p1":{"x":0.471276613180796,"y":-0.2026617278284945,"length":0.5130043099795483},"p2":{"x":47,"y":243,"length":247.50353532828578},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"53","x":"657","y":"2103","zOrder":"25"},{"ID":"305","h":"176","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"775","x":"484","y":"2340","zOrder":"183"},{"ID":"306","measuredH":"25","measuredW":"291","properties":{"bold":"true","size":"17","text":"Create something – Maybe a library"},"typeID":"Label","x":"530","y":"2359","zOrder":"184"},{"ID":"307","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"499","y":"2360","zOrder":"185"},{"ID":"308","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"13"},"typeID":"Label","w":"20","x":"504","y":"2363","zOrder":"186"},{"ID":"309","measuredH":"25","measuredW":"660","properties":{"size":"17","text":"Congrats! You can call yourself 75% modern JavaScript developer now. Now go ahead"},"typeID":"Label","x":"530","y":"2388","zOrder":"187"},{"ID":"310","measuredH":"25","measuredW":"653","properties":{"size":"17","text":"and create something with all that you have learnt. Maybe create some sort of library"},"typeID":"Label","x":"530","y":"2416","zOrder":"188"},{"ID":"315","measuredH":"25","measuredW":"692","properties":{"size":"17","text":"in which you have to use Sass and JavaScript. Then use webpack to convert Sass to CSS"},"typeID":"Label","x":"530","y":"2445","zOrder":"189"},{"ID":"316","measuredH":"25","measuredW":"703","properties":{"size":"17","text":"and use babel to transpile ES6 code. Once you are done with, release it on Github and npm"},"typeID":"Label","x":"530","y":"2472","zOrder":"190"},{"ID":"317","measuredH":"32","measuredW":"32","properties":{"color":"10027263","icon":{"ID":"twitter","size":"medium"}},"typeID":"Icon","x":"920","y":"127","zOrder":"191"},{"ID":"318","measuredH":"25","measuredW":"133","properties":{"bold":"true","color":"10027263","size":"17","text":"kamranahmedse"},"typeID":"Label","x":"960","y":"132","zOrder":"192"},{"ID":"319","h":"82","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"319","x":"534","y":"2554","zOrder":"193"},{"ID":"320","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"547","y":"2570","zOrder":"194"},{"ID":"321","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"14"},"typeID":"Label","w":"19","x":"552","y":"2572","zOrder":"195"},{"ID":"322","measuredH":"26","measuredW":"149","properties":{"bold":"true","size":"18","text":"Pick a Framework"},"typeID":"Label","w":"175","x":"580","y":"2569","zOrder":"196"},{"ID":"323","measuredH":"25","measuredW":"174","properties":{"size":"17","text":"React, Angular or Vue"},"typeID":"Label","w":"184","x":"580","y":"2595","zOrder":"197"},{"ID":"324","h":"116","measuredH":"115","measuredW":"15","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"x":1,"y":0,"length":1},"p1":{"x":0.5380311507636474,"y":0.12641766218055345,"length":0.5526834034990115},"p2":{"x":0,"y":115,"length":115},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"16","x":"763","y":"2448","zOrder":"24"},{"ID":"325","h":"11","measuredH":"10","measuredW":"114","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":114,"y":0,"length":114},"p1":{"x":0.47388515577275503,"y":0.002290775809407418,"length":0.47389069258171473},"p2":{"x":0,"y":10,"length":10},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"115","x":"460","y":"2568","zOrder":"23"},{"ID":"326","measuredH":"32","measuredW":"82","properties":{"align":"center","color":"16776960","size":"18","text":"React.js"},"typeID":"TextInput","w":"147","x":"324","y":"2562","zOrder":"198"},{"ID":"327","measuredH":"32","measuredW":"67","properties":{"align":"center","color":"16776960","size":"18","text":"Redux"},"typeID":"TextInput","w":"176","x":"167","y":"2304","zOrder":"199"},{"ID":"328","measuredH":"32","measuredW":"58","properties":{"align":"center","color":"16776960","size":"18","text":"Mobx"},"typeID":"TextInput","w":"176","x":"167","y":"2343","zOrder":"200"},{"ID":"329","h":"208","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"205","x":"153","y":"2287","zOrder":"22"},{"ID":"330","measuredH":"25","measuredW":"173","properties":{"size":"17","text":"These are not specific"},"typeID":"Label","x":"167","y":"2385","zOrder":"201"},{"ID":"331","measuredH":"25","measuredW":"166","properties":{"size":"17","text":"to React though, you "},"typeID":"Label","x":"167","y":"2408","zOrder":"202"},{"ID":"332","measuredH":"25","measuredW":"161","properties":{"size":"17","text":"can use them in any "},"typeID":"Label","x":"167","y":"2432","zOrder":"203"},{"ID":"333","measuredH":"25","measuredW":"136","properties":{"size":"17","text":"framework or app"},"typeID":"Label","x":"167","y":"2456","zOrder":"204"},{"ID":"334","h":"96","measuredH":"95","measuredW":"88","properties":{"color":"2848996","curvature":"1","direction":"top","leftArrow":"false","p0":{"x":88,"y":95,"length":129.49517365523704},"p1":{"x":0.45524634313777257,"y":0.2454982309763954,"length":0.5172220165005103},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"89","x":"238","y":"2482","zOrder":"21"},{"ID":"335","measuredH":"32","measuredW":"63","properties":{"align":"center","color":"16776960","size":"18","text":"Vue.js"},"typeID":"TextInput","w":"147","x":"324","y":"2601","zOrder":"205"},{"ID":"336","measuredH":"32","measuredW":"80","properties":{"align":"center","color":"16776960","size":"18","text":"Angular"},"typeID":"TextInput","w":"147","x":"324","y":"2640","zOrder":"206"},{"ID":"337","h":"41","measuredH":"40","measuredW":"125","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":125,"y":0,"length":125},"p1":{"x":0.4738851557727551,"y":0.0022907758094072093,"length":0.4738906925817148},"p2":{"x":0,"y":40,"length":40},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"126","x":"459","y":"2578","zOrder":"20"},{"ID":"338","h":"50","measuredH":"49","measuredW":"110","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":110,"y":0,"length":110},"p1":{"x":0.4738851557727549,"y":0.002290775809407395,"length":0.4738906925817146},"p2":{"x":0,"y":49,"length":49},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"111","x":"466","y":"2607","zOrder":"19"},{"ID":"340","h":"123","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"276","x":"443","y":"2710","zOrder":"207"},{"ID":"341","measuredH":"32","measuredW":"54","properties":{"align":"center","color":"16776960","size":"18","text":"Rx.js"},"typeID":"TextInput","w":"176","x":"220","y":"2750","zOrder":"208"},{"ID":"342","measuredH":"32","measuredW":"52","properties":{"align":"center","color":"16776960","size":"18","text":"ngrx"},"typeID":"TextInput","w":"176","x":"220","y":"2786","zOrder":"209"},{"ID":"343","measuredH":"25","measuredW":"229","properties":{"size":"17","text":"Even if you don't pick angular"},"typeID":"Label","x":"459","y":"2723","zOrder":"210"},{"ID":"344","measuredH":"25","measuredW":"205","properties":{"size":"17","text":"Rx.js is an amazing library"},"typeID":"Label","x":"459","y":"2746","zOrder":"211"},{"ID":"345","measuredH":"25","measuredW":"245","properties":{"size":"17","text":"and can be used out of angular."},"typeID":"Label","x":"459","y":"2770","zOrder":"212"},{"ID":"346","measuredH":"25","measuredW":"184","properties":{"size":"17","text":"Give it a try afterwards!"},"typeID":"Label","x":"459","y":"2795","zOrder":"213"},{"ID":"347","h":"92","measuredH":"91","measuredW":"8","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"x":8,"y":0,"length":8},"p1":{"x":0.4461538461538461,"y":-0.03076923076923077,"length":0.4472135954999579},"p2":{"x":1,"y":91,"length":91.00549433962765},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"9","x":"377","y":"2679","zOrder":"18"},{"ID":"349","measuredH":"32","measuredW":"95","properties":{"align":"center","borderColor":"13576743","color":"16777215","size":"18","text":"Angular.js"},"typeID":"TextInput","w":"205","x":"81","y":"2686","zOrder":"214"},{"ID":"350","h":"27","measuredH":"107","measuredW":"205","properties":{"color":"13576743"},"typeID":"ScratchOut","w":"44","x":"238","y":"2688","zOrder":"215"},{"ID":"352","h":"158","measuredH":"157","measuredW":"1","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":0,"y":0,"length":0},"p1":{"x":0.46125955702687793,"y":0.009064396626468038,"length":0.4613486124774123},"p2":{"x":0,"y":157,"length":157},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"2","x":"166","y":"2703","zOrder":"17"},{"ID":"353","h":"123","measuredH":"140","measuredW":"200","properties":{"color":"16770457"},"typeID":"TextArea","w":"354","x":"97","y":"2854","zOrder":"216"},{"ID":"354","measuredH":"25","measuredW":"147","properties":{"bold":"true","size":"17","text":"Honorary Mention!"},"typeID":"Label","x":"111","y":"2866","zOrder":"217"},{"ID":"355","measuredH":"25","measuredW":"281","properties":{"size":"17","text":"It isn't used any more except for the"},"typeID":"Label","x":"111","y":"2892","zOrder":"218"},{"ID":"356","measuredH":"25","measuredW":"265","properties":{"size":"17","text":"the old apps. Make sure if you pick"},"typeID":"Label","x":"111","y":"2917","zOrder":"219"},{"ID":"358","measuredH":"25","measuredW":"326","properties":{"size":"17","text":"Angular it is Angular2+ and not angular.js"},"typeID":"Label","x":"111","y":"2940","zOrder":"220"},{"ID":"364","h":"145","measuredH":"140","measuredW":"200","properties":{"color":"16770457","text":""},"typeID":"TextArea","w":"540","x":"871","y":"2529","zOrder":"221"},{"ID":"366","measuredH":"25","measuredW":"436","properties":{"size":"17","text":"There is more and more demand for React.js these days"},"typeID":"Label","x":"885","y":"2547","zOrder":"222"},{"ID":"367","measuredH":"25","measuredW":"421","properties":{"size":"17","text":"You can pick any of the listed ones and you will be fine"},"typeID":"Label","x":"885","y":"2574","zOrder":"223"},{"ID":"368","measuredH":"25","measuredW":"365","properties":{"size":"17","text":"Have a look at all of them and see what you like"},"typeID":"Label","w":"381","x":"885","y":"2600","zOrder":"224"},{"ID":"378","h":"3","measuredH":"2","measuredW":"216","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":0,"y":2,"length":2},"p1":{"x":0.47388515577275514,"y":0.00229077580940742,"length":0.47389069258171485},"p2":{"x":216,"y":1,"length":216.00231480241132},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"217","x":"846","y":"2591","zOrder":"16"},{"ID":"379","h":"315","measuredH":"314","measuredW":"76","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":7,"y":0,"length":7},"p1":{"x":0.5032750563580599,"y":-0.10103814932708959,"length":0.5133171436564842},"p2":{"x":76,"y":314,"length":323.066556610244},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"77","x":"750","y":"2613","zOrder":"15"},{"ID":"380","h":"193","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"740","x":"541","y":"2870","zOrder":"225"},{"ID":"381","measuredH":"25","measuredW":"114","properties":{"bold":"true","size":"17","text":"Practical time"},"typeID":"Label","x":"588","y":"2883","zOrder":"226"},{"ID":"382","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"557","y":"2884","zOrder":"227"},{"ID":"383","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"15"},"typeID":"Label","w":"17","x":"562","y":"2886","zOrder":"228"},{"ID":"384","measuredH":"25","measuredW":"670","properties":{"size":"17","text":"Now you know _everything_ that one might need to build a modern JavaScript application."},"typeID":"Label","x":"588","y":"2912","zOrder":"229"},{"ID":"388","measuredH":"25","measuredW":"674","properties":{"size":"17","text":"Go ahead and make some application with whatever framework you picked. You can find"},"typeID":"Label","x":"588","y":"2942","zOrder":"230"},{"ID":"389","measuredH":"25","measuredW":"506","properties":{"size":"17","text":"some of the ideas in the `ideas` directory. Pick anything and start!"},"typeID":"Label","x":"588","y":"2969","zOrder":"231"},{"ID":"391","h":"213","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"740","x":"543","y":"3070","zOrder":"232"},{"ID":"392","measuredH":"32","measuredW":"54","properties":{"align":"center","color":"16776960","size":"18","text":"vuex"},"typeID":"TextInput","w":"176","x":"79","y":"2611","zOrder":"233"},{"ID":"393","h":"11","measuredH":"10","measuredW":"93","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"x":93,"y":2,"length":93.02150289046077},"p1":{"x":0.40573434757167937,"y":-0.03639555295494441,"length":0.4073634704711659},"p2":{"x":0,"y":10,"length":10},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"94","x":"235","y":"2617","zOrder":"14"},{"ID":"394","measuredH":"25","measuredW":"146","properties":{"bold":"true","size":"17","text":"Testing your Apps"},"typeID":"Label","x":"592","y":"3089","zOrder":"234"},{"ID":"395","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"561","y":"3089","zOrder":"235"},{"ID":"396","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"16"},"typeID":"Label","w":"17","x":"566","y":"3091","zOrder":"236"},{"ID":"397","h":"3","measuredH":"2","measuredW":"131","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":131,"y":0,"length":131},"p1":{"x":0.46052631578947356,"y":-1.821373747360583e-17,"length":0.46052631578947356},"p2":{"x":0,"y":2,"length":2},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"132","x":"374","y":"2763","zOrder":"13"},{"ID":"398","h":"1","measuredH":"0","measuredW":"175","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":175,"y":0,"length":175},"p1":{"x":0.5395167379813742,"y":0.0033979360684621178,"length":0.5395274381637954},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"176","x":"384","y":"3101","zOrder":"12"},{"ID":"399","measuredH":"32","measuredW":"50","properties":{"align":"center","color":"16770457","size":"18","text":"Jest"},"typeID":"TextInput","w":"162","x":"220","y":"3051","zOrder":"237"},{"ID":"400","measuredH":"32","measuredW":"67","properties":{"align":"center","color":"16770457","size":"18","text":"Mocha"},"typeID":"TextInput","w":"162","x":"220","y":"3086","zOrder":"238"},{"ID":"401","measuredH":"32","measuredW":"69","properties":{"align":"center","color":"16770457","size":"18","text":"Karma"},"typeID":"TextInput","w":"162","x":"220","y":"3161","zOrder":"239"},{"ID":"402","measuredH":"32","measuredW":"81","properties":{"align":"center","color":"16770457","size":"18","text":"Enzyme"},"typeID":"TextInput","w":"162","x":"220","y":"3197","zOrder":"240"},{"ID":"403","measuredH":"25","measuredW":"647","properties":{"size":"17","text":"There are lots and lots of different tools for *different purposes*. I mostly find myself"},"typeID":"Label","x":"594","y":"3120","zOrder":"241"},{"ID":"404","measuredH":"25","measuredW":"652","properties":{"size":"17","text":"using the ones listed on the left. However, before you learn them, I would recommend"},"typeID":"Label","x":"594","y":"3143","zOrder":"242"},{"ID":"405","measuredH":"25","measuredW":"667","properties":{"size":"17","text":"you to first understand the different test types, look at all the options available and use"},"typeID":"Label","x":"594","y":"3167","zOrder":"243"},{"ID":"406","measuredH":"32","measuredW":"97","properties":{"align":"center","color":"16770457","size":"18","text":"Protractor"},"typeID":"TextInput","w":"162","x":"220","y":"3123","zOrder":"244"},{"ID":"407","measuredH":"25","measuredW":"294","properties":{"size":"17","text":"the ones most suitable for your needs."},"typeID":"Label","x":"594","y":"3191","zOrder":"245"},{"ID":"409","measuredH":"25","measuredW":"520","properties":{"color":"13576743","size":"17","text":"Here is a good summary to get you started : https://goo.gl/D77a4K"},"typeID":"Label","x":"594","y":"3233","zOrder":"246"},{"ID":"410","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"562","y":"3234","zOrder":"247"},{"ID":"411","h":"122","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"740","x":"543","y":"3376","zOrder":"248"},{"ID":"412","measuredH":"25","measuredW":"174","properties":{"bold":"true","size":"17","text":"Static Type Checkers"},"typeID":"Label","x":"587","y":"3395","zOrder":"249"},{"ID":"413","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"557","y":"3395","zOrder":"250"},{"ID":"414","measuredH":"21","measuredW":"14","properties":{"bold":"true","color":"16777215","text":"18"},"typeID":"Label","w":"17","x":"562","y":"3397","zOrder":"251"},{"ID":"415","measuredH":"25","measuredW":"682","properties":{"size":"17","text":"You don't need to learn these but they really give you superpowers and can be mastered"},"typeID":"Label","x":"589","y":"3425","zOrder":"252"},{"ID":"423","measuredH":"32","measuredW":"104","properties":{"align":"center","color":"16776960","size":"18","text":"TypeScript"},"typeID":"TextInput","w":"162","x":"221","y":"3382","zOrder":"253"},{"ID":"424","measuredH":"32","measuredW":"50","properties":{"align":"center","color":"16770457","size":"18","text":"Flow"},"typeID":"TextInput","w":"162","x":"221","y":"3418","zOrder":"254"},{"ID":"425","h":"15","measuredH":"14","measuredW":"191","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":191,"y":14,"length":191.51240168720145},"p1":{"x":0.5395167379813742,"y":0.0033979360684618654,"length":0.5395274381637954},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"192","x":"376","y":"3397","zOrder":"11"},{"ID":"426","h":"15","measuredH":"14","measuredW":"207","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":207,"y":0,"length":207},"p1":{"x":0.5395167379813742,"y":0.0033979360684621147,"length":0.5395274381637954},"p2":{"x":0,"y":14,"length":14},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"208","x":"370","y":"3421","zOrder":"10"},{"ID":"427","measuredH":"25","measuredW":"576","properties":{"size":"17","text":"in a few hours. I would pick TypeScript but feel free to check both and pick."},"typeID":"Label","x":"589","y":"3450","zOrder":"255"},{"ID":"455","h":"81","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"739","x":"544","y":"3535","zOrder":"256"},{"ID":"456","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"558","y":"3549","zOrder":"257"},{"ID":"457","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"17"},"typeID":"Label","w":"16","x":"563","y":"3551","zOrder":"258"},{"ID":"458","measuredH":"26","measuredW":"195","properties":{"bold":"true","size":"18","text":"Server Side Rendering"},"typeID":"Label","w":"293","x":"589","y":"3548","zOrder":"259"},{"ID":"459","measuredH":"25","measuredW":"531","properties":{"size":"17","text":"Learn about server side rendering in whatever framework you picked"},"typeID":"Label","x":"590","y":"3575","zOrder":"260"},{"ID":"461","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16770457","size":"18","text":"React"},"typeID":"TextInput","w":"135","x":"258","y":"3532","zOrder":"261"},{"ID":"462","h":"30","measuredH":"29","measuredW":"176","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":176,"y":29,"length":178.3732042656632},"p1":{"x":0.5395167379813742,"y":0.0033979360684620896,"length":0.5395274381637954},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"177","x":"383","y":"3547","zOrder":"9"},{"ID":"463","measuredH":"32","measuredW":"80","properties":{"align":"center","color":"16770457","size":"18","text":"Angular"},"typeID":"TextInput","w":"135","x":"258","y":"3570","zOrder":"262"},{"ID":"464","h":"2","measuredH":"1","measuredW":"190","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":190,"y":0,"length":190},"p1":{"x":0.5395167379813743,"y":0.003397936068462092,"length":0.5395274381637957},"p2":{"x":0,"y":1,"length":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"191","x":"379","y":"3586","zOrder":"8"},{"ID":"465","measuredH":"32","measuredW":"71","properties":{"align":"center","color":"16776960","size":"18","text":"Next.js"},"typeID":"TextInput","w":"135","x":"91","y":"3487","zOrder":"263"},{"ID":"466","h":"36","measuredH":"35","measuredW":"89","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":89,"y":35,"length":95.63472172804185},"p1":{"x":0.3787677176742842,"y":-0.1675441133931154,"length":0.41416906437452733},"p2":{"x":0,"y":1,"length":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"90","x":"182","y":"3502","zOrder":"7"},{"ID":"467","measuredH":"32","measuredW":"72","properties":{"align":"center","color":"16770457","size":"18","text":"After.js"},"typeID":"TextInput","w":"135","x":"91","y":"3524","zOrder":"264"},{"ID":"468","h":"7","measuredH":"6","measuredW":"81","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":81,"y":6,"length":81.2219182240853},"p1":{"x":0.3956343792633015,"y":-0.007730786721236948,"length":0.39570990272974865},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"82","x":"193","y":"3544","zOrder":"6"},{"ID":"469","measuredH":"32","measuredW":"90","properties":{"align":"center","color":"16770457","size":"18","text":"Universal"},"typeID":"TextInput","w":"135","x":"93","y":"3570","zOrder":"265"},{"ID":"470","h":"5","measuredH":"4","measuredW":"75","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":75,"y":4,"length":75.1065909225016},"p1":{"x":0.36110618684630386,"y":-0.020741003368197126,"length":0.3617013511163557},"p2":{"x":0,"y":0,"length":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"76","x":"199","y":"3585","zOrder":"5"},{"ID":"471","measuredH":"32","measuredW":"63","properties":{"align":"center","color":"16770457","size":"18","text":"Vue.js"},"typeID":"TextInput","w":"135","x":"259","y":"3608","zOrder":"266"},{"ID":"472","h":"29","measuredH":"28","measuredW":"204","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":204,"y":0,"length":204},"p1":{"x":0.539516737981374,"y":0.0033979360684621034,"length":0.5395274381637952},"p2":{"x":0,"y":28,"length":28},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"205","x":"375","y":"3596","zOrder":"4"},{"ID":"473","measuredH":"32","measuredW":"71","properties":{"align":"center","color":"16770457","size":"18","text":"Nuxt.js"},"typeID":"TextInput","w":"135","x":"93","y":"3608","zOrder":"267"},{"ID":"474","h":"4","measuredH":"3","measuredW":"75","properties":{"color":"2848996","curvature":"-1","direction":"top","leftArrow":"false","p0":{"x":75,"y":3,"length":75.05997601918082},"p1":{"x":0.36110618684630386,"y":-0.02074100336819713,"length":0.3617013511163557},"p2":{"x":0,"y":1,"length":1},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"76","x":"210","y":"3624","zOrder":"3"},{"ID":"475","h":"96","measuredH":"95","measuredW":"138","properties":{"color":"2848996","curvature":"1","direction":"bottom","leftArrow":"false","p0":{"x":138,"y":0,"length":138},"p1":{"x":0.49968892955169264,"y":-0.07513266239707227,"length":0.5053057918482519},"p2":{"x":0,"y":95,"length":95},"rightArrow":"false","shape":"bezier","stroke":"dotted"},"typeID":"Arrow","w":"139","x":"569","y":"2088","zOrder":"268"},{"ID":"476","measuredH":"32","measuredW":"69","properties":{"align":"center","color":"16776960","size":"18","text":"ESLint"},"typeID":"TextInput","w":"147","x":"449","y":"2163","zOrder":"269"},{"ID":"477","measuredH":"32","measuredW":"68","properties":{"align":"center","color":"16770457","size":"18","text":"JSLint"},"typeID":"TextInput","w":"147","x":"449","y":"2200","zOrder":"270"},{"ID":"478","measuredH":"32","measuredW":"70","properties":{"align":"center","color":"16770457","size":"18","text":"JSHint"},"typeID":"TextInput","w":"147","x":"449","y":"2238","zOrder":"271"},{"ID":"479","measuredH":"32","measuredW":"63","properties":{"align":"center","color":"16770457","size":"18","text":"JSCS"},"typeID":"TextInput","w":"147","x":"449","y":"2276","zOrder":"272"},{"ID":"480","h":"81","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"739","x":"544","y":"3289","zOrder":"273"},{"ID":"481","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"558","y":"3303","zOrder":"274"},{"ID":"482","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"17"},"typeID":"Label","w":"16","x":"563","y":"3305","zOrder":"275"},{"ID":"483","measuredH":"26","measuredW":"185","properties":{"bold":"true","size":"18","text":"Progressive WebApps"},"typeID":"Label","w":"293","x":"589","y":"3302","zOrder":"276"},{"ID":"484","measuredH":"25","measuredW":"509","properties":{"size":"17","text":"Learn about service workers and how to make progress web apps"},"typeID":"Label","x":"590","y":"3329","zOrder":"277"},{"ID":"491","measuredH":"25","measuredW":"551","properties":{"color":"13576743","size":"17","text":"Learn how to measure and improve the performance of your application"},"typeID":"Label","x":"588","y":"3002","zOrder":"278"},{"ID":"492","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"lightbulb-o","size":"small"}},"typeID":"Icon","x":"556","y":"3006","zOrder":"279"},{"ID":"493","measuredH":"25","measuredW":"491","properties":{"color":"13576743","size":"17","text":"e.g. Interactivity Time, Page Speed Index, Lighthouse Score etc"},"typeID":"Label","x":"587","y":"3027","zOrder":"280"},{"ID":"494","h":"147","measuredH":"146","measuredW":"14","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":14,"y":0,"length":14},"p1":{"x":0.5864611260053622,"y":0.008042895442359291,"length":0.5865162746954035},"p2":{"x":0,"y":146,"length":146},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"15","x":"865","y":"3635","zOrder":"2"},{"ID":"498","measuredH":"32","measuredW":"170","properties":{"bold":"true","size":"24","text":"Keep Exploring"},"typeID":"Label","x":"777","y":"3805","zOrder":"281"},{"ID":"499","h":"7","measuredH":"6","measuredW":"199","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":199,"y":0},"p1":{"x":0.5395167379813743,"y":0.003397936068462093},"p2":{"x":0,"y":6},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"200","x":"309","y":"1945","zOrder":"282"},{"ID":"500","h":"23","measuredH":"22","measuredW":"195","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":195,"y":22},"p1":{"x":0.5395167379813742,"y":0.0033979360684621165},"p2":{"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"196","x":"308","y":"1915","zOrder":"283"},{"ID":"501","h":"52","measuredH":"51","measuredW":"181","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":181,"y":51},"p1":{"x":0.5395167379813742,"y":0.0033979360684621134},"p2":{"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"182","x":"308","y":"1876","zOrder":"284"},{"ID":"502","h":"89","measuredH":"88","measuredW":"200","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":200,"y":88},"p1":{"x":0.5395167379813742,"y":0.0033979360684621043},"p2":{"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"201","x":"313","y":"1840","zOrder":"285"},{"ID":"503","h":"111","measuredH":"109","measuredW":"182","properties":{"color":"2848996","curvature":"0","direction":"top","leftArrow":"false","p0":{"x":182,"y":109},"p1":{"x":0.5479508196721311,"y":0.0024590163934426227},"p2":{"x":0,"y":0},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"184","x":"320","y":"1808","zOrder":"286"},{"ID":"504","measuredH":"32","measuredW":"51","properties":{"align":"center","color":"16776960","size":"18","text":"BEM"},"typeID":"TextInput","w":"162","x":"158","y":"1790","zOrder":"287"},{"ID":"505","measuredH":"32","measuredW":"80","properties":{"align":"center","color":"16770457","size":"18","text":"OOCSS"},"typeID":"TextInput","w":"162","x":"158","y":"1827","zOrder":"288"},{"ID":"506","h":"105","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"584","x":"480","y":"1775","zOrder":"289"},{"ID":"507","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"494","y":"1801","zOrder":"290"},{"ID":"508","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"10"},"typeID":"Label","w":"16","x":"499","y":"1803","zOrder":"291"},{"ID":"509","measuredH":"26","measuredW":"134","properties":{"bold":"true","size":"18","text":"CSS Framework"},"typeID":"Label","w":"293","x":"525","y":"1800","zOrder":"292"},{"ID":"510","measuredH":"25","measuredW":"489","properties":{"size":"17","text":"You really don't need to learn any but still they are good to have"},"typeID":"Label","x":"526","y":"1828","zOrder":"293"},{"ID":"511","measuredH":"32","measuredW":"92","properties":{"align":"center","color":"16776960","size":"18","text":"Bootstrap"},"typeID":"TextInput","w":"149","x":"1071","y":"1775","zOrder":"294"},{"ID":"512","measuredH":"32","measuredW":"146","properties":{"align":"center","color":"16770457","size":"18","text":"Materialize CSS"},"typeID":"TextInput","w":"149","x":"1071","y":"1812","zOrder":"295"},{"ID":"513","measuredH":"32","measuredW":"64","properties":{"align":"center","color":"16770457","size":"18","text":"Bulma"},"typeID":"TextInput","w":"150","x":"1070","y":"1848","zOrder":"296"},{"ID":"514","h":"105","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"739","x":"480","y":"1885","zOrder":"297"},{"ID":"515","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"494","y":"1900","zOrder":"298"},{"ID":"516","measuredH":"22","measuredW":"12","properties":{"bold":"true","color":"16777215","size":"14","text":"11"},"typeID":"Label","w":"16","x":"499","y":"1902","zOrder":"299"},{"ID":"517","measuredH":"26","measuredW":"150","properties":{"bold":"true","size":"18","text":"CSS Architecture"},"typeID":"Label","w":"293","x":"525","y":"1899","zOrder":"300"},{"ID":"518","measuredH":"25","measuredW":"671","properties":{"size":"17","text":"There are multiple ways to structure your CSS better and to make it more maintainable"},"typeID":"Label","x":"526","y":"1927","zOrder":"301"},{"ID":"519","measuredH":"25","measuredW":"626","properties":{"size":"17","text":"You should know about the differences – personally I find myself using BEM more"},"typeID":"Label","x":"527","y":"1952","zOrder":"302"},{"ID":"520","measuredH":"32","measuredW":"89","properties":{"align":"center","color":"16770457","size":"18","text":"SMACSS"},"typeID":"TextInput","w":"162","x":"158","y":"1864","zOrder":"303"},{"ID":"521","measuredH":"32","measuredW":"95","properties":{"align":"center","color":"16770457","size":"18","text":"SUITCSS"},"typeID":"TextInput","w":"162","x":"158","y":"1901","zOrder":"304"},{"ID":"522","measuredH":"32","measuredW":"69","properties":{"align":"center","color":"16770457","size":"18","text":"Atomic"},"typeID":"TextInput","w":"162","x":"159","y":"1937","zOrder":"305"},{"ID":"523","h":"105","measuredH":"104","measuredW":"33","properties":{"color":"2848996","curvature":"-1","direction":"bottom","leftArrow":"false","p0":{"x":2,"y":0},"p1":{"x":0.6327349725048985,"y":0.3148663169205486},"p2":{"x":0,"y":104},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"34","x":"783","y":"1949","zOrder":"1"},{"ID":"524","h":"87","measuredH":"140","measuredW":"200","properties":{"color":"16776960"},"typeID":"TextArea","w":"739","x":"544","y":"3623","zOrder":"306"},{"ID":"525","measuredH":"24","measuredW":"24","properties":{"color":"10027263","icon":{"ID":"circle","size":"small"}},"typeID":"Icon","x":"558","y":"3637","zOrder":"307"},{"ID":"526","measuredH":"22","measuredW":"15","properties":{"bold":"true","color":"16777215","size":"14","text":"18"},"typeID":"Label","w":"16","x":"563","y":"3639","zOrder":"308"},{"ID":"527","measuredH":"26","measuredW":"371","properties":{"bold":"true","size":"18","text":"All the things that weren't mentioned above"},"typeID":"Label","w":"391","x":"589","y":"3636","zOrder":"309"},{"ID":"528","measuredH":"25","measuredW":"669","properties":{"size":"17","text":"Canvas, HTML-5 APIs, SVG, sourcemaps, functional programming, TC39 etc. Go Figure!"},"typeID":"Label","x":"590","y":"3663","zOrder":"310"},{"ID":"530","measuredH":"25","measuredW":"502","properties":{"bold":"true","size":"17","text":"Important – Don't buy into the hype, compare and understand!"},"typeID":"Label","w":"512","x":"885","y":"2632","zOrder":"311"},{"ID":"531","h":"147","measuredH":"146","measuredW":"14","properties":{"color":"2848996","curvature":"0","direction":"bottom","leftArrow":"false","p0":{"x":14,"y":0,"length":14},"p1":{"x":0.5864611260053622,"y":0.008042895442359291,"length":0.5865162746954035},"p2":{"x":0,"y":146,"length":146},"rightArrow":"false","shape":"bezier"},"typeID":"Arrow","w":"15","x":"871","y":"3443","zOrder":"0"}]},"measuredH":"3837","measuredW":"1411","mockupH":"3790","mockupW":"1332","version":"1.0"}} \ No newline at end of file diff --git a/readme.md b/readme.md index 69884065f..c982a032b 100644 --- a/readme.md +++ b/readme.md @@ -20,7 +20,7 @@ If you think that these can be improved in anyway, please do suggest. ## 🎨 Frontend Roadmap -![](./images/frontend.png) +![](./images/frontend-v2.png) ## 👽 Back-end Roadmap