├── img ├── intro.png ├── split.png ├── backend.png ├── devops.png ├── frontend.png └── disclaimer.png ├── .gitignore ├── .github ├── FUNDING.yml ├── PULL_REQUEST_TEMPLATE.md └── ISSUE_TEMPLATE.md ├── CONTRIBUTING.md ├── LICENSE ├── CODE_OF_CONDUCT.md ├── README.md ├── CHANGELOG.md └── src └── intro-map.json /img/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccloli/developer-roadmap-zh-CN/HEAD/img/intro.png -------------------------------------------------------------------------------- /img/split.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccloli/developer-roadmap-zh-CN/HEAD/img/split.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ._* 3 | Thumbs.db 4 | *.sublime-project 5 | *.sublime-workspace 6 | .idea -------------------------------------------------------------------------------- /img/backend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccloli/developer-roadmap-zh-CN/HEAD/img/backend.png -------------------------------------------------------------------------------- /img/devops.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccloli/developer-roadmap-zh-CN/HEAD/img/devops.png -------------------------------------------------------------------------------- /img/frontend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccloli/developer-roadmap-zh-CN/HEAD/img/frontend.png -------------------------------------------------------------------------------- /img/disclaimer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ccloli/developer-roadmap-zh-CN/HEAD/img/disclaimer.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: [kamranahmedse] 4 | custom: http://gum.co/roadmap-sh 5 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | #### What roadmap does this PR target? 2 | 3 | - [ ] Frontend Roadmap 4 | - [ ] Backend Roadmap 5 | - [ ] DevOps Roadmap 6 | - [ ] All Roadmaps 7 | 8 | #### Please acknowledge the items listed below 9 | 10 | - [ ] I have discussed this contribution and got a go-ahead in an issue before opening this pull request. 11 | - [ ] This is not a duplicate issue. I have searched and there is no existing issue for this. 12 | - [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed. 13 | - [ ] I have read the [contribution docs](../contributing.md) before opening this PR. 14 | 15 | #### Enter the details about the contribution 16 | 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 8 | 9 | #### What roadmap is this issue about? 10 | 11 | - [ ] Frontend Roadmap 12 | - [ ] Backend Roadmap 13 | - [ ] DevOps Roadmap 14 | - [ ] All Roadmaps 15 | 16 | #### What is this issue about? 17 | 18 | - [ ] Discussion for a pull request I would want to open. 19 | - [ ] Addition of a new item 20 | - [ ] Removal of some existing item 21 | - [ ] Changing in arrangement 22 | - [ ] General suggestion 23 | - [ ] Sharing an Idea 24 | - [ ] Something else 25 | 26 | #### Please acknowledge the below listed 27 | 28 | - [ ] This is not a duplicate issue. I have searched and there is no existing issue for this. 29 | - [ ] I understand that these roadmaps are highly opinionated. The purpose is to not to include everything out there in these roadmaps but to have everything that is most relevant today comparing to the other options listed. 30 | - [ ] I have read the [contribution docs](../contributing.md) before opening this issue. 31 | 32 | 33 | #### Enter the details about the issue here 34 | 35 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## 目标 2 | 3 | 我们的目标不是力求列出一个包含所有东西的庞大列表。 4 | 我们的目标是列出一个任何人在今天进入这些领域时都能上手学习的知识点清单。 5 | 6 | ## 贡献 7 | 8 | 我们始终欢迎你给这个 repo 添砖加瓦！ 9 | 需要注意的是，这个 repo 是 *高度个人主观的*、*无偏见的* 和 *有规划的*。 10 | 你对任何资源的看法可能与原作者的本意不相符。 11 | **没有任何解释的 PR 将会被无视！** 12 | 13 | ## 这些路线图是如何创建的？ 14 | 15 | > 路线图使用 [Balsamiq](https://balsamiq.com/download/) 创建 16 | 17 | * 克隆这个仓库 18 | * 打开 Balsamiq，点击 Project > Import > Mockup JSON 19 | * 复制并粘贴你想要修改的路线图对应的 JSON 20 | * 添加你的修改 21 | * 导出 JSON 文件 Project > Export > Mockup to JSON 然后将它放进 project 文件夹 22 | * 导出图片 Project > Export > Current Mockup to PNG 然后将它放进 images 文件夹 23 | * commit 你的修改然后提交 PR 24 | 25 | ## 指南 26 | 27 | -

添加所有可用的东西不是这个仓库的目标！
28 | 这里的路线图代表了今天最有价值的技能点，也就是说如果你希望在今天进入任何一个列出的领域，这些就是你需要学习的！当然可能有一些看起来理所应当的东西还在被使用着，但是你应该优先考虑现在最需要的东西，例如你应当同意现在还有很多人在使用 angular.js，但是你不应该去学习它，而应该去试试 React、Angular 或者 Vue。使用你的批判性思维来过滤掉那些非必须的东西。对于为什么要学习这些东西，给出发自内心的理由。

29 | -

每个 Pull Request 只作一个更改
30 | 对于你想要添加的内容，可能会进行一些讨论。每个 pull request 只提交一个独立的更改，将会方便每一个参与讨论的人。

31 | - 编写有意义的 commit 信息 32 | - 在新建 issue 或者 pull request 前先浏览已有的 issue / pull request 33 | 34 | ## Note 35 | By contributing to this project, you agree to the terms listed in the [LICENSE](https://github.com/kamranahmedse/developer-roadmap/blob/master/LICENSE) -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Everything including text and images in this project are protected by the copyright laws. 2 | You are allowed to use this material for personal use but are not allowed to use it for 3 | any other purpose including publishing the images, the project files or the content in the 4 | images in any form either digital, non-digital, textual, graphical or written formats. 5 | You are allowed to share the links to the repository or the website roadmap.sh but not 6 | the content for any sort of usage that involves the content of this repository taken out 7 | of the repository and be shared from any other medium including but not limited to blog 8 | posts, articles, newsletters, you must get prior consent from the understated. These 9 | conditions do not apply to the readonly GitHub forks created using the Fork button on 10 | GitHub with the whole purpose of contributing to the project. 11 | 12 | Copyright © 2020 Kamran Ahmed 13 | 14 | Please note that I am really flexible with allowing the usage of the content in this 15 | repository. If you reach out to me with a brief detail of why and how you would like 16 | to use this content, there is a good chance that I will allow you to use it. The reason 17 | behind this strictness in the license is to stop the people who have been using these 18 | roadmaps in ill manners e.g. ripping people off with suggesting random affiliate links, 19 | redistributing these roadmaps just for the sake of monetizing the traffic. 20 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to make participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies within all project spaces, and it also applies when 49 | an individual is representing the project or its community in public spaces. 50 | Examples of representing a project or community include using an official 51 | project e-mail address, posting via an official social media account, or acting 52 | as an appointed representative at an online or offline event. Representation of 53 | a project may be further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at . All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ![Web Developer Roadmap - 2020](https://i.imgur.com/NNyc9QM.png) 3 | 4 | > 2020 年成为 Web 开发工程师之路线图 5 | 6 | [![](https://img.shields.io/badge/-Roadmaps%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](http://roadmap.sh) 7 | [![](https://img.shields.io/badge/-Guides-0a0a0a.svg?style=flat&colorA=0a0a0a)](http://roadmap.sh/guides) 8 | [![](https://img.shields.io/badge/-Translations-0a0a0a.svg?style=flat&colorA=0a0a0a)](./translations) 9 | [![](https://img.shields.io/badge/%E2%9D%A4-YouTube%20Channel-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1) 10 | 11 | 12 | *** 13 | 14 | ⚠ 由于 [原项目](https://github.com/kamranahmedse/developer-roadmap) 的代码仓库已与原作者的另一个项目 [roadmap.sh](https://github.com/kamranahmedse/roadmap.sh) 的项目代码合并，项目结构已与早期版本不同。且新项目的许可文件不再沿用之前的许可协议，因此本项目后续将不会再更新维护。如有需要，可访问 [roadmap.sh](https://roadmap.sh) 查看最新版本，并体验更丰富的功能（注：此文档最后一次更新时，该网站还未提供多语言翻译）。 15 | 16 | *** 17 | 18 | > 译注：本文仅对原文进行原样翻译，文章及图片中提到的个人观点均为原作者之观点。因个人翻译水平有限，翻译文本可能会稍有出入或略带意译。对于可能有明显歧义的地方，会在文后标记英文原文。如果您有翻译改进之建议，欢迎提交 issue 或 PR。提交 issue 与 PR 以改进翻译为主，如果您认为路线图可以改进，建议您向原 repo 提交贡献，谢谢。 19 | 20 | > 译注：若您是繁体中文/正体中文使用者，或更倾向于使用台湾的本地化术语，可以查看 [goodjack/developer-roadmap-chinese](https://github.com/goodjack/developer-roadmap-chinese) 维护的版本；若您需要查阅早期的版本，可以查看 [`2019 年版`](https://github.com/ccloli/developer-roadmap-zh-CN/tree/2019-zh-CN)、 [`2018 年版`](https://github.com/ccloli/developer-roadmap-zh-CN/tree/2018-zh-CN)；若您需要查阅该作者之前更早版本的路线图，可以查看 [z-jingjie/developer-roadmap-zh-CN](https://github.com/z-jingjie/developer-roadmap-zh-CN) 维护的版本。 21 | 22 | 接下来你将会看到一组图表，它们展示了你希望成为前端开发、后端开发或者 devops 领域时可以选择的路线以及技术。这些图表是我为我的一位老教授制作的，他想要分享一些它们的概况给他的大学生；同时将它们分享在这里来回馈社区。 23 | 24 | *** 25 | 26 |

27 | Special Announcement: 28 |
29 | 30 | 31 | 32 |
33 | We now have a YouTube Channel 34 |
35 | I plan on covering the roadmaps and put more content there
Subscribe to the channel. 36 |

37 | 38 | *** 39 | 40 |

这些路线图的目的

41 | 42 | > 这些路线图的目的是让你对这个领域有一个大致的了解，并能在你对接下来要学习什么感到困惑时引导你，而不是鼓励你去学习那些热门和潮流的东西 (what is hip and trendy)。你应该对为什么一个工具在某些场景下比另一个更适合使用有属于自己的理解 (grow some understanding)，并记住热门和潮流永远不意味着它最适合这份工作 (best suited for the job) 43 | 44 |

初学者注意

45 | 46 | > 这些路线图涵盖了下面列出的所有学习路径。别被吓着了，如果你只是刚开始学习，那么你不需要在一开始就学习所有的内容。我们正在制作这些路线图的初学者版本，并将在 2020 年完成后端与 DevOps 路线图后的不久 [发布](https://roadmap.sh)。 47 | 48 | *** 49 | 50 | 如果你觉得这些内容有需要改进的地方，欢迎提出。 51 | 52 | ## 引言 53 | 54 | ![Web Developer Roadmap Introduction](./img/intro.png) 55 | 56 | ## 前端路线图 57 | 58 | [![](https://img.shields.io/badge/-Download%20PDF%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://gum.co/frontend-roadmap) [![](https://img.shields.io/badge/-Shareable%20Link%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://roadmap.sh/frontend) 59 | 60 | ![Frontend Roadmap](./img/frontend.png?year-2020-2) 61 | 62 | ## 后端路线图 63 | 64 | [![](https://img.shields.io/badge/-Download%20PDF%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://gum.co/backend-roadmap) [![](https://img.shields.io/badge/-Shareable%20Link%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://roadmap.sh/backend) 65 | 66 | ![Back-end Roadmap](./img/backend.png?year-2020-2) 67 | 68 | ## DevOps 路线图 69 | 70 | [![](https://img.shields.io/badge/-Download%20PDF%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://gum.co/devops-roadmap) [![](https://img.shields.io/badge/-Shareable%20Link%20-0a0a0a.svg?style=flat&colorA=0a0a0a)](https://roadmap.sh/devops) 71 | 72 | ![DevOps Roadmap](./img/devops.png) 73 | 74 | ## 🚦 文末唠叨 75 | 76 | 如果你觉得这些路线图可以改进，欢迎你在 issue 里讨论。此外，我也会继续改进它，所以你可能会想要 watch 这个 repo，或者订阅 [roadmap.sh](http://roadmap.sh) 来回顾。 77 | 78 | ## 🙌 贡献 79 | 80 | > 请浏览 [贡献指南](./CONTRIBUTING.md) 以了解如何更新路线图 81 | 82 | - 提交改进的 pull request 83 | - 在 issues 讨论建议 84 | - 分享给大家 85 | - 和我联系提供反馈 [![Twitter URL](https://img.shields.io/twitter/url/https/twitter.com/kamranahmedse.svg?style=social&label=Follow%20%40kamranahmedse)](https://twitter.com/kamranahmedse) 86 | 87 | ## 许可协议 88 | 89 | 请阅读 [许可协议文件](./LICENSE) 以了解详情 90 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Roadmap 2020 2 | 3 | ### General Updates 4 | - Added printable PDFs for the roadmaps: [Frontend Roadmap](https://roadmap.sh/roadmaps/pdf/frontend.pdf), [Backend Roadmap](https://roadmap.sh/roadmaps/pdf/backend.pdf), [DevOps Roadmap](https://roadmap.sh/roadmaps/pdf/devops.pdf) 5 | - Updated [the license](https://github.com/kamranahmedse/developer-roadmap/blob/master/LICENSE) with some additional details 6 | - Added the missing code-of-conduct, issue/pr templates. 7 | - Better legends in roadmaps. 8 | - Updated the disclaimers on the roadmap. 9 | 10 | ### Frontend Developer Roadmap 11 | 12 | - Recommended knowledge of the internet has been added 13 | - Added section for VCS in the roadmap 14 | - Mentioned the knowledge of web security 15 | - Deprioritized the CSS Preprocessors knowledge (priortized the use of CSS-in-JS) 16 | - Moved "SMACSS/OOCSS" out of recommendation and optional knowledge of BEM 17 | - Task runners - Gulp has been marked grey and removed from the "possible options" 18 | - Linters and formatters - removed JSHint and JSLint. Only Knowledge of ESLint and Prettier has been recommended. 19 | - Changed the order for "Module Bundlers". Webpack > Rollup > Parcel 20 | - Removed Radium and Glamorous from the CSS in JS options 21 | - Splits CSS frameworks to component based and CSS first. Also adds Tailwind, Chakra among the notable ones. 22 | - Adds react-testing-library to the testing options available and deprioritizes all except jest, cypress, enzyme and react-testing-library 23 | - Flow has been grayed out in "Type Checkers" 24 | - Server Side Rendering - After.js has been deprioritized 25 | - Adds section for Web Components 26 | - Static Site Generators - Adds Next.js and Gatsby as recommended and Vuepress, Jekyll and Hugo as other options 27 | - Adds flutter and Ionic for the mobile applications 28 | - Updates description for WASM 29 | - Carlo and proton-native have been grayed out from the "Desktop applications" 30 | 31 | ### Backend Developer Roadmap 32 | - The [old textual look](https://github.com/kamranahmedse/developer-roadmap/tree/347831feaed227f42525e829ccc8d84a22386952#back-end-roadmap) has been gone and the tree has been made thorough. Beginner friendly textual format will be added soon [to the website](https://roadmap.sh) 33 | - Recommended knowledge of the internet has been added 34 | - Added basic frontend knowledge 35 | - Mentioned Web Security 36 | - Recommends OS knowledge, POSIX basics, and some basic terminal usage details 37 | - Languages part has been changed. JavaScript has been made the "Personal recommendation" and others as options available. 38 | - Adds VCS/Git section 39 | - Recommends additional database knowledge (i.e. ORMs, ACID, Transactions, N+1, Normalization, Indexes) 40 | - APIs section has been expanded with REST, JSON, SOAP, HATEOAS, Open API Spec 41 | - More authentication strategies have been added to the API authentication 42 | - Caching section now has CDN and client Side caching sections 43 | - Architectural patterns have been added 44 | - GraphQL has been added 45 | - New section has been added "Building for Scale" 46 | 47 | ### DevOps Roadmap 48 | 49 | - Adds Networking Concepts and POSIX Basics in OS Concepts 50 | - Expands the Operating Systems 51 | - Adds `netstat` in the "Learn to Live in Terminal" section 52 | - Adds terminal multiplexers (screen, tmux) 53 | - Adds SSH + Port Forwarding into Network and Security section 54 | - Adds startup and service management (initd, systemd) knowledge under OS concepts 55 | - Renames ELK Stack to Elastic Stack 56 | - Adds Linode, Vultr and Alibaba Cloud to "Service Providers" 57 | - Renames ELK Stack to "Elastic Stack" 58 | - CI/CD - Adds Gitlab CI, GitHub Actions, Bamboo and Azure DevOps Services 59 | - Adds prometheus and Grafana under infra monitoring 60 | - Adds OpenTracing, Jaegar and Instana in app monitoring 61 | - Adds Pulumi under Infrastructure Provisioning 62 | - Adds optional knowledge about Emails 63 | - Fixes typos 64 | 65 | ## Roadmap 2019 66 | * [Frontend Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/347831feaed227f42525e829ccc8d84a22386952#frontend-roadmap) 67 | * [Backend Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/347831feaed227f42525e829ccc8d84a22386952#back-end-roadmap) 68 | * [DevOps Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/347831feaed227f42525e829ccc8d84a22386952#devops-roadmap) 69 | 70 | ## Roadmap 2018 71 | * [Frontend Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/67a72aab113e79c11e292ada394606f079f6a263#-frontend-roadmap) 72 | * [Backend Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/67a72aab113e79c11e292ada394606f079f6a263#-back-end-roadmap) 73 | * [DevOps Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/67a72aab113e79c11e292ada394606f079f6a263#-devops-roadmap) 74 | 75 | ## Roadmap 2017 76 | * [Frontend Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/ee2b3e5de0e2a9ccccf3f2bbe4687f150df976f4#-front-end-roadmap) 77 | * [Backend Developer Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/ee2b3e5de0e2a9ccccf3f2bbe4687f150df976f4#-back-end-roadmap) 78 | * [DevOps Roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/ee2b3e5de0e2a9ccccf3f2bbe4687f150df976f4#-devops-roadmap) 79 | -------------------------------------------------------------------------------- /src/intro-map.json: -------------------------------------------------------------------------------- 1 | { 2 | "mockup": { 3 | "controls": { 4 | "control": [ 5 | { 6 | "ID": "0", 7 | "typeID": "Label", 8 | "zOrder": "0", 9 | "measuredW": "356", 10 | "measuredH": "40", 11 | "x": "491", 12 | "y": "74", 13 | "properties": { 14 | "bold": "true", 15 | "size": "32", 16 | "text": "Web Developer in 2020" 17 | } 18 | }, 19 | { 20 | "ID": "1", 21 | "typeID": "Arrow", 22 | "zOrder": "1", 23 | "w": "75", 24 | "h": "129", 25 | "measuredW": "150", 26 | "measuredH": "100", 27 | "x": "683", 28 | "y": "230", 29 | "properties": { 30 | "color": "2848996", 31 | "leftArrow": "false", 32 | "p0": { 33 | "x": 0, 34 | "y": 0 35 | }, 36 | "p1": { 37 | "x": 0.4787915073918851, 38 | "y": 0.19568921844056555 39 | }, 40 | "p2": { 41 | "x": 73, 42 | "y": 128 43 | } 44 | } 45 | }, 46 | { 47 | "ID": "2", 48 | "typeID": "Arrow", 49 | "zOrder": "2", 50 | "w": "133", 51 | "h": "131", 52 | "measuredW": "150", 53 | "measuredH": "100", 54 | "x": "518", 55 | "y": "229", 56 | "properties": { 57 | "color": "2848996", 58 | "direction": "bottom", 59 | "leftArrow": "false", 60 | "p0": { 61 | "x": 131, 62 | "y": 0 63 | }, 64 | "p1": { 65 | "x": 0.5684088130944218, 66 | "y": -0.21788259145523384 67 | }, 68 | "p2": { 69 | "x": 1, 70 | "y": 129 71 | } 72 | } 73 | }, 74 | { 75 | "ID": "3", 76 | "typeID": "TextInput", 77 | "zOrder": "3", 78 | "w": "132", 79 | "measuredW": "50", 80 | "measuredH": "32", 81 | "x": "441", 82 | "y": "367", 83 | "properties": { 84 | "align": "center", 85 | "color": "16767334", 86 | "size": "18", 87 | "text": "前端" 88 | } 89 | }, 90 | { 91 | "ID": "4", 92 | "typeID": "Label", 93 | "zOrder": "4", 94 | "measuredW": "160", 95 | "measuredH": "28", 96 | "x": "589", 97 | "y": "189", 98 | "properties": { 99 | "bold": "true", 100 | "size": "20", 101 | "text": "选择适合你的路线" 102 | } 103 | }, 104 | { 105 | "ID": "5", 106 | "typeID": "TextInput", 107 | "zOrder": "5", 108 | "w": "288", 109 | "measuredW": "127", 110 | "measuredH": "32", 111 | "x": "68", 112 | "y": "81", 113 | "properties": { 114 | "align": "center", 115 | "color": "16776960", 116 | "size": "18", 117 | "text": "Git - 版本控制" 118 | } 119 | }, 120 | { 121 | "ID": "6", 122 | "typeID": "TextInput", 123 | "zOrder": "6", 124 | "w": "289", 125 | "measuredW": "50", 126 | "measuredH": "32", 127 | "x": "67", 128 | "y": "318", 129 | "properties": { 130 | "align": "center", 131 | "color": "16776960", 132 | "size": "18", 133 | "text": "SSH" 134 | } 135 | }, 136 | { 137 | "ID": "7", 138 | "typeID": "TextInput", 139 | "zOrder": "7", 140 | "w": "289", 141 | "measuredW": "187", 142 | "measuredH": "32", 143 | "x": "67", 144 | "y": "356", 145 | "properties": { 146 | "align": "center", 147 | "color": "16776960", 148 | "size": "18", 149 | "text": "HTTP/HTTPS 与 API" 150 | } 151 | }, 152 | { 153 | "ID": "8", 154 | "typeID": "Label", 155 | "zOrder": "8", 156 | "measuredW": "204", 157 | "measuredH": "25", 158 | "x": "67", 159 | "y": "45", 160 | "properties": { 161 | "bold": "true", 162 | "size": "17", 163 | "text": "任何路线都需要的必备技能" 164 | } 165 | }, 166 | { 167 | "ID": "9", 168 | "typeID": "TextInput", 169 | "zOrder": "9", 170 | "w": "289", 171 | "measuredW": "176", 172 | "measuredH": "32", 173 | "x": "67", 174 | "y": "120", 175 | "properties": { 176 | "align": "center", 177 | "color": "16776960", 178 | "size": "18", 179 | "text": "基本命令行操作技能" 180 | } 181 | }, 182 | { 183 | "ID": "10", 184 | "typeID": "Arrow", 185 | "zOrder": "10", 186 | "w": "1", 187 | "h": "47", 188 | "measuredW": "150", 189 | "measuredH": "100", 190 | "x": "664", 191 | "y": "135", 192 | "properties": { 193 | "color": "6710886", 194 | "curvature": "0", 195 | "leftArrow": "false", 196 | "p0": { 197 | "x": 0, 198 | "y": 0 199 | }, 200 | "p1": { 201 | "x": 0.5, 202 | "y": 0 203 | }, 204 | "p2": { 205 | "x": 0, 206 | "y": 46 207 | }, 208 | "rightArrow": "false" 209 | } 210 | }, 211 | { 212 | "ID": "11", 213 | "typeID": "TextInput", 214 | "zOrder": "11", 215 | "w": "121", 216 | "measuredW": "50", 217 | "measuredH": "32", 218 | "x": "679", 219 | "y": "368", 220 | "properties": { 221 | "align": "center", 222 | "color": "16767334", 223 | "size": "18", 224 | "text": "后端" 225 | } 226 | }, 227 | { 228 | "ID": "12", 229 | "typeID": "Arrow", 230 | "zOrder": "12", 231 | "w": "2", 232 | "h": "71", 233 | "measuredW": "150", 234 | "measuredH": "100", 235 | "x": "509", 236 | "y": "407", 237 | "properties": { 238 | "color": "2848996", 239 | "curvature": "0", 240 | "leftArrow": "false", 241 | "p0": { 242 | "x": 0, 243 | "y": 0 244 | }, 245 | "p1": { 246 | "x": 0.5621504039776257, 247 | "y": 0.004661280298321849 248 | }, 249 | "p2": { 250 | "x": 0, 251 | "y": 69 252 | }, 253 | "rightArrow": "false", 254 | "stroke": "dotted" 255 | } 256 | }, 257 | { 258 | "ID": "13", 259 | "typeID": "Arrow", 260 | "zOrder": "13", 261 | "w": "123", 262 | "h": "12", 263 | "measuredW": "150", 264 | "measuredH": "100", 265 | "x": "811", 266 | "y": "373", 267 | "properties": { 268 | "color": "2848996", 269 | "curvature": "-1", 270 | "direction": "bottom", 271 | "leftArrow": "false", 272 | "p0": { 273 | "x": 0, 274 | "y": 11 275 | }, 276 | "p1": { 277 | "x": 0.45357350377687367, 278 | "y": 0.059732713538640264 279 | }, 280 | "p2": { 281 | "x": 122, 282 | "y": 4 283 | } 284 | } 285 | }, 286 | { 287 | "ID": "14", 288 | "typeID": "TextInput", 289 | "zOrder": "14", 290 | "w": "112", 291 | "measuredW": "81", 292 | "measuredH": "32", 293 | "x": "946", 294 | "y": "361", 295 | "properties": { 296 | "align": "center", 297 | "color": "16767334", 298 | "size": "18", 299 | "text": "DevOps" 300 | } 301 | }, 302 | { 303 | "ID": "15", 304 | "typeID": "Arrow", 305 | "zOrder": "15", 306 | "w": "2", 307 | "h": "71", 308 | "measuredW": "150", 309 | "measuredH": "100", 310 | "x": "729", 311 | "y": "410", 312 | "properties": { 313 | "color": "2848996", 314 | "leftArrow": "false", 315 | "p0": { 316 | "x": 0, 317 | "y": 0 318 | }, 319 | "p1": { 320 | "x": 0.4608695652173913, 321 | "y": 0.01304347826086956 322 | }, 323 | "p2": { 324 | "x": 0, 325 | "y": 69 326 | }, 327 | "rightArrow": "false", 328 | "stroke": "dotted" 329 | } 330 | }, 331 | { 332 | "ID": "16", 333 | "typeID": "Arrow", 334 | "zOrder": "16", 335 | "w": "1", 336 | "h": "77", 337 | "measuredW": "150", 338 | "measuredH": "100", 339 | "x": "997", 340 | "y": "403", 341 | "properties": { 342 | "color": "2848996", 343 | "leftArrow": "false", 344 | "p0": { 345 | "x": 0, 346 | "y": 0 347 | }, 348 | "p1": { 349 | "x": 0.4537465672812867, 350 | "y": 0.01247548058061985 351 | }, 352 | "p2": { 353 | "x": 0, 354 | "y": 76 355 | }, 356 | "rightArrow": "false", 357 | "stroke": "dotted" 358 | } 359 | }, 360 | { 361 | "ID": "17", 362 | "typeID": "TextInput", 363 | "zOrder": "17", 364 | "w": "288", 365 | "measuredW": "70", 366 | "measuredH": "32", 367 | "x": "68", 368 | "y": "201", 369 | "properties": { 370 | "align": "center", 371 | "color": "16776960", 372 | "size": "18", 373 | "text": "GitHub" 374 | } 375 | }, 376 | { 377 | "ID": "18", 378 | "typeID": "TextInput", 379 | "zOrder": "18", 380 | "w": "288", 381 | "measuredW": "145", 382 | "measuredH": "32", 383 | "x": "68", 384 | "y": "159", 385 | "properties": { 386 | "align": "center", 387 | "color": "16776960", 388 | "size": "18", 389 | "text": "数据结构 & 算法" 390 | } 391 | }, 392 | { 393 | "ID": "19", 394 | "typeID": "TextInput", 395 | "zOrder": "19", 396 | "w": "288", 397 | "measuredW": "86", 398 | "measuredH": "32", 399 | "x": "68", 400 | "y": "434", 401 | "properties": { 402 | "align": "center", 403 | "color": "16776960", 404 | "size": "18", 405 | "text": "字符编码" 406 | } 407 | }, 408 | { 409 | "ID": "20", 410 | "typeID": "TextInput", 411 | "zOrder": "20", 412 | "w": "288", 413 | "measuredW": "86", 414 | "measuredH": "32", 415 | "x": "68", 416 | "y": "395", 417 | "properties": { 418 | "align": "center", 419 | "color": "16776960", 420 | "size": "18", 421 | "text": "设计模式" 422 | } 423 | }, 424 | { 425 | "ID": "21", 426 | "typeID": "TextInput", 427 | "zOrder": "21", 428 | "w": "288", 429 | "measuredW": "179", 430 | "measuredH": "32", 431 | "x": "68", 432 | "y": "240", 433 | "properties": { 434 | "align": "center", 435 | "color": "16776960", 436 | "size": "18", 437 | "text": "许可协议 (Licenses)" 438 | } 439 | }, 440 | { 441 | "ID": "22", 442 | "typeID": "TextInput", 443 | "zOrder": "22", 444 | "w": "288", 445 | "measuredW": "104", 446 | "measuredH": "32", 447 | "x": "68", 448 | "y": "279", 449 | "properties": { 450 | "align": "center", 451 | "color": "16776960", 452 | "size": "18", 453 | "text": "语义化版本" 454 | } 455 | }, 456 | { 457 | "ID": "23", 458 | "typeID": "__group__", 459 | "zOrder": "23", 460 | "measuredW": "350", 461 | "measuredH": "141", 462 | "w": "350", 463 | "h": "141", 464 | "x": "924", 465 | "y": "81", 466 | "children": { 467 | "controls": { 468 | "control": [ 469 | { 470 | "ID": "0", 471 | "typeID": "Canvas", 472 | "zOrder": "0", 473 | "w": "350", 474 | "h": "141", 475 | "measuredW": "100", 476 | "measuredH": "70", 477 | "x": "0", 478 | "y": "0" 479 | }, 480 | { 481 | "ID": "1", 482 | "typeID": "Label", 483 | "zOrder": "1", 484 | "measuredW": "314", 485 | "measuredH": "25", 486 | "x": "14", 487 | "y": "17", 488 | "properties": { 489 | "size": "17", 490 | "text": "Find the detailed version of this roadmap" 491 | } 492 | }, 493 | { 494 | "ID": "2", 495 | "typeID": "Label", 496 | "zOrder": "2", 497 | "measuredW": "322", 498 | "measuredH": "25", 499 | "x": "14", 500 | "y": "45", 501 | "properties": { 502 | "size": "17", 503 | "text": "along with resources and other roadmaps" 504 | } 505 | }, 506 | { 507 | "ID": "3", 508 | "typeID": "Canvas", 509 | "zOrder": "3", 510 | "w": "320", 511 | "h": "45", 512 | "measuredW": "100", 513 | "measuredH": "70", 514 | "x": "15", 515 | "y": "81", 516 | "properties": { 517 | "borderColor": "4273622", 518 | "color": "4273622" 519 | } 520 | }, 521 | { 522 | "ID": "4", 523 | "typeID": "__group__", 524 | "zOrder": "4", 525 | "measuredW": "168", 526 | "measuredH": "29", 527 | "w": "168", 528 | "h": "29", 529 | "x": "91", 530 | "y": "89", 531 | "children": { 532 | "controls": { 533 | "control": [ 534 | { 535 | "ID": "0", 536 | "typeID": "Label", 537 | "zOrder": "0", 538 | "measuredW": "103", 539 | "measuredH": "28", 540 | "x": "65", 541 | "y": "0", 542 | "properties": { 543 | "color": "16777215", 544 | "size": "20", 545 | "text": "roadmap.sh" 546 | } 547 | }, 548 | { 549 | "ID": "1", 550 | "typeID": "Label", 551 | "zOrder": "1", 552 | "measuredW": "36", 553 | "measuredH": "28", 554 | "x": "0", 555 | "y": "0", 556 | "properties": { 557 | "color": "16777215", 558 | "size": "20", 559 | "text": "http" 560 | } 561 | }, 562 | { 563 | "ID": "2", 564 | "typeID": "Label", 565 | "zOrder": "2", 566 | "measuredW": "5", 567 | "measuredH": "28", 568 | "x": "37", 569 | "y": "0", 570 | "properties": { 571 | "bold": "true", 572 | "color": "16777215", 573 | "size": "20", 574 | "text": ":" 575 | } 576 | }, 577 | { 578 | "ID": "3", 579 | "typeID": "Label", 580 | "zOrder": "3", 581 | "measuredW": "9", 582 | "measuredH": "28", 583 | "x": "44", 584 | "y": "1", 585 | "properties": { 586 | "color": "16777215", 587 | "size": "20", 588 | "text": "/" 589 | } 590 | }, 591 | { 592 | "ID": "4", 593 | "typeID": "Label", 594 | "zOrder": "4", 595 | "measuredW": "9", 596 | "measuredH": "28", 597 | "x": "52", 598 | "y": "1", 599 | "properties": { 600 | "color": "16777215", 601 | "size": "20", 602 | "text": "/" 603 | } 604 | } 605 | ] 606 | } 607 | } 608 | } 609 | ] 610 | } 611 | } 612 | }, 613 | { 614 | "ID": "24", 615 | "typeID": "Label", 616 | "zOrder": "24", 617 | "measuredW": "95", 618 | "measuredH": "26", 619 | "x": "1179", 620 | "y": "233", 621 | "properties": { 622 | "text": "翻译：ccloli", 623 | "size": "18", 624 | "color": "2848996" 625 | } 626 | } 627 | ] 628 | }, 629 | "attributes": { 630 | "name": "intro", 631 | "order": 1270510.2570984222 632 | }, 633 | "resourceID": "EA3D211F-61DA-49D3-81AC-CC6E32C3E4B1", 634 | "mockupH": "436", 635 | "mockupW": "1207", 636 | "measuredW": "1274", 637 | "measuredH": "481", 638 | "version": "1.0" 639 | } 640 | } --------------------------------------------------------------------------------