Update: frontend-v2

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+._*
+Thumbs.db
+*.sublime-project
+*.sublime-workspace
+.idea
+.gitignore

backend.md

@@ -0,0 +1 @@
+// TODO

devops.md

@@ -0,0 +1 @@
+// TODO

frontend.md

@@ -0,0 +1,181 @@
+> Textual form of the roadmap, feel free to fork and track as you learn
+
+## Frontend Developer Roadmap – 2018
+
+This file contains the frontend roadmap translated in the checklist form to make it easier for others to contribute and to fork and keep a check on their progress. You can read the commentary on the frontend roadmap [in this medium article](https://medium.com/@kamranahmedse/modern-frontend-developer-in-2018-4c2072fa2b9c)
+
+## Step 1 – Learn the Basics
+
+First thing that you would want to do is learn the basics which includes learning the basics of HTML, CSS and some familiarization with JavaScript syntax. 
+
+- [ ] Learn the basics of HTML
+  - [ ] Learn the basics and how to write semantic HTML
+  - [ ] Understand how to divide page into sections and to structure the DOM properly
+  - [ ] **Task** Make at least 5 HTML pages – focus on structure, don't worry about the *beauty* yet
+- [ ] Learn the basics of CSS
+  - [ ] Learn the basics of CSS
+  - [ ] Learn how to use Grid and Flexbox
+  - [ ] Media queries and how to make responsive websites
+  - [ ] Understand CSS Specificity, Box-Model etc
+  - [ ] **Task** Style the HTML pages that you made in last step
+- [ ] Basics of JavaScript
+  - [ ] Learn the syntax and the basic constructs
+  - [ ] Learn how to manipulate DOM
+  - [ ] Understand the concepts such as hoisting, event bubbling, prototypes etc
+  - [ ] Learn Ajax (XHR)
+  - [ ] Learn new features in ES6+ and how to write modular JavaScript
+- [ ] Learn jQuery – **Optional (you can leave it for now and revisit later)**
+
+## Step 2 – Practice what you have learnt!
+
+I say this a lot and I will say it here again, you don’t learn anything without practice. You might have a momentary feeling that you understand something but it would soon go away if you don’t practice. Make sure that you practice as much as you can, while you are following this roadmap.
+
+Go ahead and make some responsive website and add interactivity with JavaScript. You can copy any existing webpage that you might find interesting but **remember to use everything that you have learnt till this point**.
+
+## Step 3 – Optional but Highly Recommended
+
+Before you go any further, I would recommend you to go and learn some [git](https://git-scm.com/) if you haven't learnt already. it is really going to help you as you go further. You don't have to learn everything about it, just learn the below listed and keep learning as you continue and face any issues.
+
+Its time to get into the real business now. Open [Github](https://github.com) and search for some projects and try to open some pull requests in some open-source projects. Some of the ideas for pull requested are listed below:
+- Enhance the UI, make any demo pages responsive or improve the design
+- Look at any of the open issues that you can solve
+- Refactor any of the code that you think can be improved
+
+Link this repo and tell them you are learning and ask for feedback on your PR and how you can improve.
+
+## Step 4 – Learn about Package Managers
+
+NPM and Yarn both are almost same in usage; you can learn one of them and you automatically learn the other.
+
+- [ ] Learn how to use NPM
+- [ ] Learn how to use Yarn
+- [ ] Understand Semantic Versioning
+- [ ] **Task** Install some external library using yarn or npm into the webpages that you made previously
+
+## Step 5 – Learn CSS Preprocessors
+
+Preprocessors enrich CSS with the functionality that it isn’t capable of by default. There are different many options Sass, Less, Stylus etc. If I were to pick one, I would go for Sass. However, PostCSS has been gaining a lot of traction lately, it is a nice-to-have and is sort of “Babel” for CSS. You can use it stand-alone or on top of Sass also. I would recommend you to learn Sass for now and revisit PostCSS later when you have time.
+
+- [ ] Pick one of these
+  - [ ] **Sass (Recommended)**
+  - [ ] Less
+  - [ ] **PostCSS (do this later)**
+  - [ ] Stylus
+
+## 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
+
+There used to be alot of stuff in the task runners but today I would just pick NPM scripts, however if you want to pick something else, have a look at gulp
+
+- [ ] **NPM Scripts (Recommended)**
+- [ ] Gulp
+
+There are several linters, but I would go for ESLint. Feel free to have a look at others and see why one over the other
+
+- [ ] **ESLint (Recommended)**
+- [ ] JSLint
+- [ ] JSHint
+- [ ] JSCS
+
+**Use Webpack for apps and Rollup for libraries**. However, you don't need rollup for now; everything that it does, you can do it with Webpack also, so go for Webpack and look into Rollup later
+
+- [ ] **Webpack (Recommended)**
+- [ ] Rollup
+- [ ] Parcel
+
+## 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
+
+- [ ] It should use Sass for styling
+- [ ] It should be written in ES6
+- [ ] It should be a UMD library
+- [ ] It should be using Babel to allow usage in older browsers
+
+## 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
+
+- [ ] **React**
+  - [ ] Redux - For large scale apps and can be used outside react also
+  - [ ] Mobx - For smaller apps and can be used outside react also
+- [ ] **Angular (Important – Learn Angular 2+)**
+  - [ ] Rx.js – Is really powerful can be used out of angular also
+  - [ ] Ngrx
+- [ ] Vue.js
+  - [ ] Vuex - Similar to redux but for Vue 
+
+## 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 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 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.
+
+Here is a really nice summary to get you started – [An Overview of JavaScript Testing in 2018](https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3)
+
+- [ ] **Jest**
+- [ ] **Mocha**
+- [ ] **Protractor**
+- [ ] **Karma**
+- [ ] **Enzyme**
+
+## 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 16 – Learn about Server Side Rendering
+
+There are different options, depending on what framework you are using
+
+- [ ] React
+  - [ ] Next.js
+  - [ ] After.js
+- [ ] Angular
+  - [ ] Universal
+- [ ] Vue.js
+  - [ ] Nuxt.js
+
+## Step 17 – All the things not mentioned
+
+Canvas, HTML-5 APIs, SVG, sourcemaps, functional programming, TC39, Progressive enhancement, graceful degradation etc. Go Figure!
+
+## Journey Never Ends
+
+And the journey doesn't end here. There is still a lot of stuff you can learn about, you just have to keep a healthy appetite for learning and not settling.
+
+Good luck 👏
+
+
+

project/disclaimer.json

@@ -0,0 +1 @@
+{"mockup":{"controls":{"control":[{"ID":"0","h":"274","measuredH":"140","measuredW":"200","properties":{"color":"16777215"},"typeID":"TextArea","w":"911","x":"223","y":"170","zOrder":"0"},{"ID":"1","measuredH":"40","measuredW":"128","properties":{"bold":"true","size":"32","state":"up","text":"면책조항"},"typeID":"Label","x":"245","y":"190","zOrder":"1"},{"ID":"2","locked":"true","measuredH":"32","measuredW":"600","properties":{"bold":"false","markup":"true","size":"24","text":"이 로드맵의 목적은 경치에 대한 아이디어를 제공하고"},"typeID":"Label","x":"245","y":"246","zOrder":"2"},{"ID":"3","measuredH":"32","measuredW":"624","properties":{"size":"24","text":"다음에 무엇을 배워야 할지 혼란스러울 경우와 트렌드에"},"typeID":"Label","w":"867","x":"245","y":"282","zOrder":"3"},{"ID":"4","measuredH":"32","measuredW":"168","properties":{"bold":"false","size":"24","text":"뒤떨어진 것을 "},"typeID":"Label","x":"884","y":"282","zOrder":"4"},{"ID":"5","measuredH":"32","measuredW":"696","properties":{"bold":"true","size":"24","text":"생각되는지에 대한 이해를 넓혀 가야 하며 유행에 따른 도구를"},"typeID":"Label","x":"245","y":"356","zOrder":"5"},{"ID":"6","measuredH":"32","measuredW":"744","properties":{"bold":"true","size":"24","text":"기억하는 것이 결코 직업에 가장 적합하지 않음을 기억해야합니다."},"typeID":"Label","w":"748","x":"245","y":"396","zOrder":"6"},{"ID":"9","measuredH":"32","measuredW":"480","properties":{"bold":"true","size":"24","text":"왜 어떤 도구가 다른 도구보다 적합하다고 "},"typeID":"Label","w":"477","x":"636","y":"317","zOrder":"7"},{"ID":"10","measuredH":"32","measuredW":"384","properties":{"bold":"false","size":"24","text":"배우지 않도록 안내하는 것입니다."},"typeID":"Label","x":"245","y":"317","zOrder":"8"}]},"measuredH":"444","measuredW":"1134","mockupH":"274","mockupW":"911","version":"1.0"}}

readme.md

@@ -6,29 +6,30 @@
 
 이 로드맵을 개선할 수 있다고 생각한다면 제안을 해주세요.
 
-***
-
-<p align="center"><b> 이 가이드가 마음에 들고 비슷한 내용을 더 원하십니까? </b><br><a href="http://hugobots.com">Hugobots</a>을 구독하거나 <a href="http://twitter.com/kamranahmedse">트위터</a>를 팔로우하세요!</p>
-
-***
+<br>
+<p align="center">
+  <img src="./images/disclaimer.png" width="750">
+</p>
+<br>
 
+<sub>저의 [블로그](http://kamranahmed.info)를 확인하고 [트위터](https://twitter.com/kamranahmedse)에 "안녕"이라고 말해주세요.</sub>
 
 ## 🚀 소개
 
-![](./intro-map.png)
+![](./images/intro.png)
 
 ## 🎨 프론트엔드 로드맵
-![](./frontend-map.png)
+![](./images/frontend-v2.png)
 
 ## 👽 백엔드 로드맵
 
 백엔드의 경우 개인적으로 Node.js와 PHP7을 선호합니다. 최근에는 Go를 사용해봤고 아주 맘에 들었습니다. 이 외에도 다른 것을 고려해야 한다면 Ruby로 갈 것입니다. 그러나 이것은 단지 제  개인 취향입니다. 여러분은 표시된 언어 중 어떤 것이든 선택할 수 있고 여러분은 잘할 것입니다.
 
-![](./backend-map.png)
+![](./images/backend.png)
 
 ## 👷 데브옵스 로드맵
 
-![](./devops-map.png)
+![](./images/devops.png)
 
 <br>
   
@@ -48,9 +49,9 @@
 프로젝트 파일은 `/project-files` 디렉토리에 있습니다. 로드맵을 수정하려면 발사믹을 열고  **Project > Import > Mockup JSON** 클릭하여 로드맵을 열고 수정한 후 이미지를 readme에 업로드한 후 `Pull Request`를 작성합니다.
 
 - 개선사항은 pull request
-- 논의는 issues
-- 퍼트리세요
-- 어떠한 의견이든 내밀어주세요 [![트위터 URL](https://img.shields.io/twitter/url/https/twitter.com/kamranahmedse.svg?style=social&label=Follow%20%40kamranahmedse)](https://twitter.com/kamranahmedse)
+- 논의사항은 issues
+- 널리 알려주세요
+- 어떠한 의견이든 제시해주세요 [![트위터 URL](https://img.shields.io/twitter/url/https/twitter.com/kamranahmedse.svg?style=social&label=Follow%20%40kamranahmedse)](https://twitter.com/kamranahmedse)
 
 ## 스폰서
 
@@ -59,4 +60,5 @@
 
 ## 라이센스
 
-[![License: CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-lightgrey.svg)](https://creativecommons.org/licenses/by/4.0/)
+
+[![License: CC BY 4.0](https://img.shields.io/badge/License-CC0%201.0-brightgreen.svg?style=flat-square)](https://creativecommons.org/licenses/by/4.0/)