update

.github/workflows/deploy.yml

@@ -0,0 +1,46 @@
+name: Deploy site files
+
+on:
+  push:
+    branches:
+      - sourcecode # 只在master上push触发部署
+    paths-ignore: # 下列文件的变更不触发部署，可以自行添加
+      - README.md
+      - LICENSE
+  pull_request:
+    branches:
+      - sourcecode # 只在master上push触发部署
+    types: [closed]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [10.x]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          repo-token: ${{ secrets.DEPLOY_TOKEN }}
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: |
+          npm i
+      - name: Build
+        run: |
+          npm run build
+          cp README.md docs/.vuepress/dist/
+          cd docs/.vuepress/dist
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          GITHUB_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
+          BRANCH: main # The branch the action should deploy to.
+          FOLDER: docs/.vuepress/dist/
+          CLEAN: true

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+docs/.vuepress/dist/

README.md

@@ -1,5 +1,29 @@
 # front-end-book
-《前端的进击》pdf 纪念版
+《前端的进击》电子书开源
+
+> [《前端的进击》 pdf 纪念版](./前端的进击.pdf)
+
+## 结构和内容
+
+本书共分为三部分：
+
+- 第一部分以前端基础和入门为主，介绍了前端开发该职位、前端必备知识和技能，以及一些面试需要准备的技巧知识点。
+- 第二部分稍微深入地介绍前端项目管理、架构设计、常见的前端解决方案和设计原理，以及如何提升自己的影响力等。
+- 第三部分从软实力的角度出发，介绍了职业规划、工作的原则和方法、团队协作、提升工作效率等技巧和经验。
+
+由于本书最重要的内容为第三部分，前端相关的内容日夜更迭，可以去[我的前端游乐场](https://github.com/godbasin/front-end-playground)逛逛便够了，这里只用来放置我最喜欢的第三部分。
+
+### 第三部分 必备软技能
+
+该部分包括 5 章内容。
+
+- [第 5 章](./5/README.md)：介绍了如何进行职业规划，包括找准自身的定位、职业方向选择、工作方向选择，还有离职需要注意的一些事情。
+- [第 6 章](./6/README.md)：介绍了工作中的一些原则和方法，包括刚加入职场的自我调整、面对竞争与合作的态度，以及如何进行可持续的成长。
+- [第 7 章](./7/README.md)：介绍了与团队的协作方式，包括如何快速融入团队、进行有效地沟通，以及要怎样在团队中发挥出自己的价值。
+- [第 8 章](./8/README.md)：围绕着工作效率，介绍了一些提升工作效率的方法，包括时间管理、合理使用 Todo List，让工作达到事半功倍的效果。
+- [第 9 章](./9/README.md)：主要介绍了生活和工作的关系，包括生活和工作的原则和选择、平衡方式，以及情绪管理。
+
+# 关于本书
 
 ## 一本书的结束和新生
 

deploy.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 生成静态文件
+npm run build
+
+cp README.md docs/.vuepress/dist/
+
+# 进入生成的文件夹
+cd docs/.vuepress/dist
+
+# 如果是发布到自定义域名
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+git remote add origin https://github.com/godbasin/front-end-book.git
+git push origin main -f
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+# git push -f [email protected]:https://github.com/godbasin/front-end-playground.git master:gh-pages
+
+cd -

docs/.vuepress/config.js

@@ -0,0 +1,91 @@
+module.exports = {
+    title: '前端的进击',
+    base: '/front-end-book/',
+    shouldPrefetch: () => false,
+    description: '被删',
+    themeConfig: {
+        // logo: '/assets/img/logo.png',
+        // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
+        repo: 'godbasin/front-end-book',
+        // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
+        // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
+        repoLabel: 'Github',
+
+        // 以下为可选的编辑链接选项
+
+        // 假如你的文档仓库和项目本身不在一个仓库：
+        // docsRepo: 'vuejs/vuepress',
+        // 假如文档不是放在仓库的根目录下：
+        docsDir: 'docs',
+        // 假如文档放在一个特定的分支下：
+        docsBranch: 'sourcecode',
+        // 默认是 false, 设置为 true 来启用
+        editLinks: true,
+        // 默认为 "Edit this page"
+        editLinkText: '我想完善该文章！',
+        nav: [
+            { text: '概述', link: '/' },
+            { text: '内容', link: '/getting-started/' },
+            { text: '参与贡献', link: '/how-to-contribute' },
+        ],
+        sidebar: {
+            '/getting-started/': [
+                {
+                    title: '前言',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/start.md',
+                    ]
+                }, {
+                    title: '第 5 章 如何进行职业规划',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/5/5.1.md',
+                        '/getting-started/5/5.2.md',
+                        '/getting-started/5/5.3.md',
+                        '/getting-started/5/5.4.md',
+                    ]
+                }, {
+                    title: '第 6 章 工作中的原则和方法',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/6/6.1.md',
+                        '/getting-started/6/6.2.md',
+                        '/getting-started/6/6.3.md',
+                    ]
+                }, {
+                    title: '第 7 章 我和团队有个约会',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/7/7.1.md',
+                        '/getting-started/7/7.2.md',
+                        '/getting-started/7/7.3.md',
+                    ]
+                }, {
+                    title: '第 8 章 提高效率，早点下班',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/8/8.1.md',
+                        '/getting-started/8/8.2.md',
+                        '/getting-started/8/8.3.md',
+                    ]
+                }, {
+                    title: '第 9 章 工作与生活息息相关',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/9/9.1.md',
+                        '/getting-started/9/9.2.md',
+                        '/getting-started/9/9.3.md',
+                    ]
+                }, {
+                    title: '后记',
+                    collapsable: true,
+                    children: [
+                        '/getting-started/end.md',
+                    ]
+                }
+            ], 
+        }
+    },
+
+};

docs/README.md

@@ -0,0 +1,33 @@
+---
+home: true
+actionText: 开始阅读 →
+actionLink: /getting-started/README.md
+features:
+  - title: 职业规划
+    details: 介绍了如何进行职业规划，包括找准自身的定位、职业方向选择、工作方向选择，还有离职需要注意的一些事情。
+  - title: 工作中原则和方法
+    details: 介绍了工作中的一些原则和方法，包括刚加入职场的自我调整、面对竞争与合作的态度，以及如何进行可持续的成长。
+  - title: 团队协作
+    details: 介绍了与团队的协作方式，包括如何快速融入团队、进行有效地沟通，以及要怎样在团队中发挥出自己的价值。
+  - title: 工作效率
+    details: 围绕着工作效率，介绍了一些提升工作效率的方法，包括时间管理、合理使用 Todo List，让工作达到事半功倍的效果。
+  - title: 生活和工作
+    details: 主要介绍了生活和工作的关系，包括生活和工作的原则和选择、平衡方式，以及情绪管理。
+footer: MIT Licensed | Copyright © 2024-present 被删
+---
+
+> 本项目主要内容由 [《前端的进击》](https://www.ituring.com.cn/book/2942) 一书提供，该书的技术软实力技能部分将以开源方式提供到本项目中，前端技术相关的内容可以去[被删的前端游乐场](https://github.com/godbasin/front-end-playground)中逛逛。
+
+<div style="text-align: center;">
+
+## 参与贡献
+
+如果你有好的内容调整或者新增，或者是希望我们补充更多的内容，可点击[参与贡献](./how-to-contribute.md)。
+
+![](./images/readme-0.png)
+
+<br/>
+<br/>
+<br/>
+
+</div>

docs/getting-started/5/5.1.md

@@ -0,0 +1,63 @@
+---
+title: 5.1　找准自身定位
+---
+
+想要对自己的未来制定一些方案，得知道自己要去哪里。在团队里，可以根据自身喜好和团队的方向来找到自己在团队中的位置。但职业规划和团队中的定位不一样，首先我们要确定自己未来的发展方向。
+
+## 5.1.1 　未来发展方向
+
+对于程序员来说，未来的发展方向无非就几个：深挖技术领域、转型技术管理、转型其他类型管理、转行、考公务员等等。如果再继续在前端领域细分，还可以分为纯前端、全栈等方向。
+
+至于具体要选哪个方向，大都由个人偏好决定。一个人想要做什么事情，会同时受到很多因素的影响，除了自己对技术的热情和能力，还可能包括遇到的一些人和事，例如特别崇拜的某个开发、尊重的某位前辈、遇到过一些不公正的事情、或深感触动的一些事情，都可能会成为我们想要立志做某件事的契机。
+
+很多时候，即使我们已经确认想要去往哪个方向，但实际上依然会被未来的某些事物改变。正如很多公司要求员工写 KPI，员工将 KPI 写得再详细，依然在半年后考核时需要重新修改，因为计划永远赶不上变化。但我们不能因为未来可能会变，就认为没有意义，也不去写 KPI。
+
+这就好比我们在做习题本，本子的最后写好了答案，既然都知道自己最后都会看答案，那么我们做不做题、是否做错了都无关紧要了吗？显然不是的，做题是个需要思考计算的过程，通过最终的答案我们可以知道自己的思考方式是否有误、是否需要调整。写 KPI 也是一个道理，我们如果最初定的 KPI 与最终的不一样，是否需要去反思下为什么呢？KPI 本身的设计，不就是为了让我们确认自己规划做的事情，最终是否实现了吗？
+
+因此，即使未来某个时候我们的职业方向会进行调整，此时此刻我们一样需要对此进行规划。通过规划我们才有了目标，有了目标，我们才会制定计划并为之努力实现。
+
+## 5.1.2 　扬长避短很有效
+
+其实我们每个人也都有各自擅长的部分，一般来说工作中更有效的方式是扬长避短，而不是花很多时间去补齐短板。我们常常会听到其他人说，“你没做过这些、要去挑战自己”，挑战自己的确是需要的，多尝试去做一些事情也总是好的。
+
+如果我们需要在这场竞争中生存下来，必须拥有自己的不可替代性，也称之为技术壁垒。如果我们有擅长的领域，不妨尝试去深挖这样的领域，这样是一个相对容易的选择。
+
+很多时候，也正是因为热爱和喜欢这些领域，我们才愿意投入更多的精力，因此在某种程度上也会更擅长。而做自己喜欢的事情的时候，即使再忙再苦再累，也一样会觉得很开心和值得。相反，如果做着不喜欢的工作时，每时每刻都是一种煎熬，每天上班就像去上坟。
+
+可以的话，找一个可以发挥你自身优势的地方，那样的你会闪闪发光，你也会因此爱上你自己。
+
+## 5.1.3 　你的出处并不能代表什么
+
+我刚进入互联网的时候，非科班出身、缺乏开发经验，自学了一周多就疯狂投简历。找工作很头疼，即使是裸辞的一番热血，再热烈也很容易被浇灭。最后虽然顺利找到了工作，但工资少得可怜。
+
+那会从华为出来，待遇的落差总会不断地提醒我，到底是为了什么呢？但满怀的热情使得我每天上班充满干劲，下班后也继续在床上打着灯看书和写代码学习。那是 jQuery 横行的年代，似乎只需要掌握了它，你就能所向披靡。还有 CSS/CSS3 动画等，对 CSS 的掌握基本上是 10%的理解加上 90%的实践日积月累不断沉淀的。
+
+那段时间可以感觉到成长很快，几位后台开发小哥哥带着入门，告诉我需要学习哪些知识、可以去哪些网站上学，然后就停不下来了。我曾经在面试的时候说自己学习能力很强，但是通常别人会问，你怎么证明呢？
+
+不知道为什么，现在似乎大家多多少少都会不正视外包，“要不是能力不够也不会当外包”、“不能指望他们能学会什么”这样的话也经常会听到。可能是因为很多人的经历和体验里，都是比较顺畅阻力较少。而我也很荣幸曾经置于职业的低谷，使得很多时候能看到更多的可能性。
+
+同样的，如今很多公司在招人的时候对学历的要求也越来越高，这是由于竞争市场资源过剩导致的，公司或许在性价比等方面考虑进行这样的调整，但我们不能自己限制住自己。我也见过一些特别厉害的开发，他们并不一定来自很好的学校。只是因为有着一股认真钻研的劲，他们看不到所谓的比较、竞争，专心致志地沉浸在自己的世界中，并做出了很多的成绩。
+
+是否科班出身、是否外包出身、是否学历优秀，这些或许对其他人来说会有影响，但这些都不应该影响我们自身要去努力，不应该成为我们去给自身贴上一些标签的理由。
+
+## 5.1.4 　将目标放长放远
+
+或许你会觉得制定计划不靠谱，因为事情永远都在变化。工作总是很复杂，不可控制的因素太多了。例如小明想要深入钻研浏览器渲染的方向，但实际上团队负责的业务都比较简单，因此小明常常需要快速上线某个新模块，节奏一直慢不下来，也完全没有机会和精力去研究自己的东西。
+
+遇到这种情况，可以尝试将眼光再放长远一些。如果将职业规划比作一场马拉松，首先我们得确认目标是什么，是拿到前面的名次还是完成这场比赛？以前参加过中长跑的田径比赛，教练在比赛前会叮嘱我们几件事：
+
+1. 起跑的时候不要用力过猛，但需要让自己保持在一定的名次以内。
+2. 过程中可以选择排在前面节奏比较好的选手，紧跟在对方后面。领跑比跟跑更累，紧紧贴在对方身后可以让对方心理上有压力。
+3. 除了最后的冲刺，最好要保持匀速的节奏，因为变速跑会消耗更多的体力。
+
+其实做职业规划和长跑很相似，我们需要确定一个较远的目标，然后控制好节奏、切忌着急和用力过猛。以我自己为例，一开始我想要往前端深度的领域发展，但我的起跑线是非科班+外包。显然，我无法一下子到达自己想去的地方，而此时自身的实力也无法和想要的岗位相匹配，因此我整体的职业路线是：外包公司前端 -> 中规模公司前端 -> 大公司重后台的业务部门前端 -> 大公司重前端业务部门前端。
+
+这是一个经历了好些年的过程，每当我觉得在所在的团队中没法获得更多成长的时候，就会选择进入下一个阶段。如果目的很明确的话，你会清晰地知道自己什么时候该调整、接下来要去哪。
+
+中间也遇到过一些团队，虽然团队中缺乏我想要的复杂大型前端业务项目，但团队会给道其他的机会，例如待遇上的回报、往管理方向发展带团队等等。很多条件都比较诱人，团队也的确给到了足够的诚意希望我留下来。但我知道自己想要的是前端领域的深挖，如果现在因为有其它诱惑而暂时选择放弃，以后遇到同样的困境是不是每次都会选择放弃呢？
+
+因此，基本上我都选择了按照原目标继续往前走。有管理者觉得很疑惑，大家都往钱多的地方走，他问我是不是对钱没什么需要。我的回复是，把该学的知识和技能都掌握，如何赚钱它不该是我需要担心的问题。
+
+将眼光放远一些，直到我们建立起自己的技术壁垒，在那之前即使挣到更多的钱、可以带团队干活，也依然可能会面临被这个行业抛弃。当然，这里的前提是我自身想要往技术的方向去发展。如果想要往管理方向去发展，一些带团队的经验也是很有帮助的。
+
+如果现在的你距离自己的目标太远，那么不妨尝试找到去向最终目标的一个小目标，先往小目标去努力。通往目标的路上干扰很多，但如果你足够地坚定，总有一天也能去到自己想去的地方的。