
【免费下载链接】developer-roadmap-chinese2021 年成為 Web 開發人員的路線圖 台灣正體中文版项目地址https://gitcode.com/gh_mirrors/de/developer-roadmap-chinese点击查看免费下载导读本文以 developer-roadmap-chinese 仓库的官方贡献文档CONTRIBUTING-eng.md 与 contributing.md为主体围绕路线图是如何制作出来的这一核心问题完整讲解如何在 Balsamiq 中导入/导出路线图的 Mockup JSON、如何定位仓库中对应的 JSON 与 PNG 资产、如何遵守一个 PR 一个条目等贡献规范并成功提交 Pull Request。读完本文你将掌握一套可复制的路线图更新工作流并理解仓库中src/目录 JSON 文件的内部结构Control、Label、Arrow 等节点从而能高质量地参与前端、后端、DevOps 三类路线图的中文翻译维护。一、项目背景与贡献目标的定位README.md 开篇即点明项目性质这是2021 年成为 Web 开发人员路线图的台湾正体中文翻译版翻译基准对应原作 2021 年 1 月 9 日的版本提交a42d241。仓库包含三套核心路线图资产路线图英文 JSON原作正体中文 JSON翻译版图片输出介绍/总览src/intro-map.jsonchinese-version/src/intro-map.jsonimg/intro.png / chinese-version/img/intro.png前端src/frontend-map.jsonchinese-version/src/frontend-map.jsonimg/frontend.png / chinese-version/img/frontend.png后端src/backend-map.jsonchinese-version/src/backend-map.jsonimg/backend.png / chinese-version/img/backend.pngDevOpssrc/devops-map.jsonchinese-version/src/devops-map.jsonimg/devops.png / chinese-version/img/devops.png关于内容更新的定位贡献文档明确指出目标不是把市面上所有可用资源堆成一个最大的列表而是收录任何人今天要进入这个领域时必须学习的东西。也就是说贡献者要做的是围绕当代最有价值的技能组合做策展curate而不是罗列。从仓库实际内容看每张路线图都由一个 Balsamiq Mockup JSON 定义例如 src/frontend-map.json 共 11912 行包含 197 个带text属性的节点src/backend-map.json 共 12134 行src/devops-map.json 同样以mockup.controls.control数组为核心。所有面向读者展示的 PNG 都是由这些 JSON 渲染生成的。1.1 与路线图目的保持一致README.md 中的路线图的目的一节强调路线图的用途是给你一个轮廓并在你困惑接下来该学什么时提供指导而不是鼓励去学很潮很流行的东西。贡献者提交新资源时应时刻对照这一原则自问这个条目是否属于进入该领域今天必须掌握的技能例如文档给出的判断示例——即便现实中仍有很多人使用 angular.js但若今天新入行更值得学的显然是 React、Angular 或 Vue 三者之一。这正是用批判性思维过滤非必要内容的落地方式。1.2 中文版贡献的两种途径contributing.md 在贡献一节特别加了译者注将贡献渠道一分为二资源内容层面路线图中收录哪些技术/资源属于原作 kamranahmedse/developer-roadmap 的策展范畴这类建议应回馈给原作翻译质量层面中文用词、术语、排版问题则应在本仓库开 Issue 或提交 PR例如在 README.md 的台湾正体中文翻译一节与 CONTRIBUTING-eng.md 中均有对应的反馈渠道说明。二、路线图的制作工具与 JSON 资产结构2.1 制作工具BalsamiqCONTRIBUTING-eng.md 与 contributing.md 均明确指出路线图使用Balsamiq制作。Balsamiq 是一款低保真low-fidelity原型/线框图工具其核心能力之一就是支持以Mockup JSON格式导入和导出线框图。这正是本仓库src/目录中存放的 JSON 文件的来源——它们不是手写的配置而是 Balsamiq 工程的序列化产物。2.2 从源码读懂 JSON 结构打开任意一个地图 JSON如 src/intro-map.json可以看到清晰的层次结构{ mockup: { controls: { control: [ { ID: 462, typeID: Label, x: 491, y: 74, zOrder: 0, properties: { bold: true, size: 32, text: Web Developer in 2021 } }, { ID: 464, typeID: Arrow, h: 131, w: 133, properties: { color: 2848996, curvature: 1, direction: bottom, p0: { x: 0, y: 0 }, p1: { x: 0.5684088130944218, y: -0.21788259145523384 }, p2: { x: 1, y: 129 }, shape: bezier } } ] }, mockupH: …, mockupW: … } }关键字段说明从 src/frontend-map.json、src/intro-map.json、src/backend-map.json 的实测数据归纳typeID节点类型。常见的有Label标题/文字标签、TextInput可编辑文字框路线图中的技术名词多为此类、Arrow连接线含direction、curvature、stroke: dotted等属性用于表达推荐路径与备选路径、TextArea大段说明文字如 chinese-version/src/disclaimer.json 中的免责声明容器。properties.text节点显示的文本内容——这是翻译版与英文版之间逐字对照修改的核心字段。x/y/w/h节点在画布上的位置与尺寸zOrder决定渲染层级。properties按类型不同包含color十进制颜色值、size、bold、align等排版属性。例如 src/frontend-map.json 中依次出现的text: ES6 and modular JavaScript、text: JavaScript、text: React.js等正是前端路线图主干上的技术节点src/backend-map.json 中则有text: PostgreSQL、text: RabbitMQ、text: Kafka、text: Nginx、text: Docker等后端核心知识点src/devops-map.json 中则是text: Process Management、text: Learn Bash Scripting、text: nmap, tcpdump, ping, mtr, traceroute, dig这类运维实操技能。翻译版同理例如 chinese-version/src/frontend-map.json 中能看到text: 撰寫語意化 (Semantic) HTML、text: 回應式設計* 和 媒體查詢**等中文节点chinese-version/src/backend-map.json 中有text: 整合型*Monolithic應用程式、text: 微服務Microservice、text: CQRS 和事件來源模式。注意中文版在专业术语旁保留英文原文并加注*/**脚注的做法正是 README.md译者前言所承诺的台湾用语及术语、术语旁保留原文规范的直接体现。三、更新路线图的标准操作流程Balsamiq 工作流这是贡献文档的核心实操部分。以下步骤完整继承自 CONTRIBUTING-eng.md 的 How are these roadmaps made? 一节并结合仓库目录结构做了路径落位说明克隆仓库Clone the repositorygit clone https://gitcode.com/gh_mirrors/de/developer-roadmap-chinese.git打开 Balsamiq导入目标路线的 JSON点击Project Import Mockup JSON复制并粘贴你想要更新的那张路线图的 JSON前端用 src/frontend-map.json后端用 src/backend-map.jsonDevOps 用 src/devops-map.json翻译版对应 chinese-version/src/ 下的同名文件。在画布上完成你的变更增删技术节点、调整箭头走向、修改文字。以中文翻译为例通常是把节点properties.text的英文改成正体中文并保留术语原文可对照 chinese-version/src/ 现有文件的翻译风格如 chinese-version/src/intro-map.json 中text: 2021 年的 Web 開發人員、text: Git - 版本控制的写法。导出 JSON 并放回src目录点击Project Export Mockup to JSON将导出的 JSON 放入仓库的src目录英文版。重要请确认导出的 JSON 在语义上与仓库现有 JSON 一致同属 Balsamiqmockup.controls.control结构避免破坏坐标、zOrder 等渲染信息。导出 PNG 图片点击Project Export Current Mockup to PNG将图片放入仓库的images目录本仓库中即 img/中文翻译版在 chinese-version/img/。提交变更并打开 PRCommit your changes and open a PR按照下一节的指南规范书写提交信息并提交 Pull Request。与文档对应的仓库事实仓库根目录的 img/ 保存英文版 PNG如 img/frontend.png、img/backend.png、img/devops.pngchinese-version/img/ 保存中文版 PNG。README 中展示的路线图正是这些图片例如 README.md 的前端 Frontend 路線圖一节引用 chinese-version/img/frontend.png。因此每改一次 JSON都要同步导出新的 PNG保证JSON 源文件 渲染图片成对更新。四、贡献指南Guidelines保证 PR 质量的四条铁律CONTRIBUTING-eng.md 的 Guidelines 一节与 contributing.md 完全对应是贡献者必须遵守的行为规范不要什么都加Adding everything available out there is not the goal路线图代表今天最有价值的技能组合。判断标准是如果今天你进入这个领域你会学什么要用批判性思维过滤掉非必要内容并为为什么该资源应该被收录给出诚实论据。文档举的例子很典型angular.js 仍有人用但新入行者应优先学 React、Angular 或 Vue 之一。一个 PR 只改一个条目One item per Pull Request由于某个条目可能引发讨论单个 PR 只新增一个条目能让所有参与者都更容易跟进与评审避免大而杂的 PR 难以 review。撰写有意义的提交信息Write meaningful commit messages提交信息应能准确描述这次改动的内容与原因。开新 Issue/PR 前先查看现有 Issue 与 PRLook at the existing issues/pull requests before opening new ones避免重复提交与重复讨论。此外贡献文档开篇还有一条关键前置约定Please make sure to open an issue to discuss before you open a PR!开 PR 之前请先开一个 Issue 讨论也就是说规范的贡献节奏是先开 Issue 说明意图并征求策展人意见 → 再动手改 JSON → 最后提交 PR。这一要求与仓库性质直接相关——贡献文档明确强调本仓库是highly opinionated高度有主见、unbiased不偏不倚、curated精心策展的策展人对某个资源是否有价值的判断未必与你的看法一致因此提前讨论可以避免无效劳动。contributing.md 的中文版还补充了一句重要说明没有任何 PR 会在没有解释的情况下就被丢弃该句在英文版 CONTRIBUTING-eng.md 中对应 Please make sure to open an issue to discuss before you open a PR! 的协作精神并在译者注中再次澄清资源内容类贡献请给原作仓库翻译类贡献请给本仓库。五、更新日志与版本基线的协作价值本仓库对路线图版本的管理非常透明直接体现在 CHANGELOG.md及其英文版 CHANGELOG-eng.md和 README.md 的最近更新一节中当前翻译基线为2021 年 1 月 9 日的a42d241提交README 中完整记录了该次升版的详细变更见 README.md 的details折叠区块例如前端新增網際網路、VCS、網路安全知識、Web 元件、GraphQL段落CSS 新增回應式設計模組打包工具推荐顺序调整为 Webpack Rollup ParcelReact 生态优先推荐 Redux后端由旧式文字叙述改为全新树状地图推荐 PostgreSQL 而非 MySQLDevOps 新增 Linux/Unix 段落、服务网格、云端设计模式等。这些变更记录同时给出了内容与 JSON 资产的对应关系。例如 CHANGELOG 中模組打包工具更改推薦順序為 Webpack Rollup Parcel在 chinese-version/src/frontend-map.json 中表现为多个打包工具节点及其连线顺序新增段落VCS则对应新增的节点与分支箭头。对贡献者的实际意义提交 PR 前应先阅读 CHANGELOG.md确认你的改动与当前基线不冲突、不重复并且对翻译版而言确保持续与上游 2021 基线对齐。仓库 README 的[!NOTE]也明确提醒原著 roadmap.sh 已大幅更新含 AI/ML 等新路线图本翻译版目前基于 2021 版本欢迎通过 Issue 或 PR 协助跟进更新——这正是贡献者最值得投入的方向之一。六、授权条款贡献即同意许可贡献前请务必知悉授权约束这是贡献文档Note一节的落点英文原作部分适用 LICENSE-eng文本与图片受版权法保护仅允许个人使用禁止以任何数字/非数字、文字/图形/书面形式再次发布图片、项目文件或图片内容可以分享仓库链接或 roadmap.sh 网站链接通过 GitHub Fork 按钮创建的、以向项目贡献为目的的只读 fork 不受此限制如需以博客文章、新闻稿、通讯等任何其他媒介转载必须事先获得版权方许可。版权为 Copyright © 2021 Kamran Ahmed。本翻译项目README.md 授权条款一节改以CC BY-NC-SA 4.0姓名标示-非商业性-相同方式分享释出署名小克。而 CONTRIBUTING-eng.md 的 Note 明确写道By contributing to this project, you agree to the terms listed in the LICENSE.即向本仓库提交贡献Issue、PR 中的任何改动即视为你同意上述授权条款。贡献前请务必确认你提供的素材有权如此授权。七、从贡献者到维护者一份可执行的 Checklist将全文要点收敛成提交前的自检清单方便你在每个 PR 前逐项核对是否已先在 Issue 中与策展人/维护者讨论过该改动是否已检查现有 Issue 与 PR确认没有重复本次 PR 是否只包含一个条目One item per PR该条目是否属于今天进入该领域必须掌握的技能而非简单罗列所有可用资源是否已用 Balsamiq 完成 JSON 编辑并导出、回填到正确的目录英文版src/中文版 chinese-version/src/是否已同步导出并更新对应的 PNGimg/ 或 chinese-version/img/提交信息是否含义明确、能说明改动原因是否已确认改动与 README.md 声明的 2021 版本基线、CHANGELOG.md 的历史变更一致是否已理解并同意 LICENSE-eng / CC BY-NC-SA 4.0 的授权约定结语developer-roadmap-chinese 贡献流程的本质是一条Balsamiq 可视化编辑 → JSON 源码落盘 → PNG 渲染同步 → 规范 PR的完整生产线JSON 是路线图的源代码PNG 是面向读者的产物CONTRIBUTING-eng.md 与 contributing.md 则是维护这条生产线质量的作业指导书。掌握本文的导入/导出流程与策展准则后你既可以精准修订前端、后端、DevOps 任一路线图的节点与连线也能在跟进上游更新的翻译工作中为中文开发者社区持续贡献高质量、与版本基线对齐的正体中文路线图。赞分享【免费下载链接】developer-roadmap-chinese2021 年成為 Web 開發人員的路線圖 台灣正體中文版项目地址https://gitcode.com/gh_mirrors/de/developer-roadmap-chinese点击查看免费下载相关推荐5 个阶段让 2014 款 iMac 跑上新版 macOS5 个阶段让 2014 款 iMac 跑上新版 macOS 深夜屏幕弹出提示这台 Mac 太旧无法安装此版本 macOS。机器其实还很流畅只是官方把操作系统固件驱动开发变更类型变更类型 新功能 feat Bug修复 fix 代码重构 refactor 文档更新 docs 描述 ! 详细描述变更内容及解决的问题 测试步骤 ! 如何验前端UI组件设计系统3步掌握中文错误纠正神器ChineseErrorCorrector4-4B-i1-GGUF完全指南3步掌握中文错误纠正神器ChineseErrorCorrector4 4B i1 GGUF完全指南 ChineseErrorCorrector4 4B i1创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考