├── .gitignore
├── .npmrc
├── README.md
├── components
    └── Counter.vue
├── netlify.toml
├── package-lock.json
├── package.json
├── preview.jpg
├── slides-export.pdf
├── slides.md
└── vercel.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 | dist
4 | *.local
5 | index.html
6 | .remote-assets
7 | components.d.ts
8 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | # for pnpm
2 | shamefully-hoist=true
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 程序员的软技能
2 | 
3 | [Preview](https://programmer-soft-skills.vercel.app/1)
4 | 
5 | 
6 | [Download PDF](./slides-export.pdf)
7 | 
8 | ![](./preview.jpg)


--------------------------------------------------------------------------------
/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | 
 4 | const props = defineProps({
 5 |   count: {
 6 |     default: 0,
 7 |   },
 8 | })
 9 | 
10 | const counter = ref(props.count)
11 | </script>
12 | 
13 | <template>
14 |   <div flex="~" w="min" border="~ gray-400 opacity-50 rounded-md">
15 |     <button
16 |       border="r gray-400 opacity-50"
17 |       p="2"
18 |       font="mono"
19 |       outline="!none"
20 |       hover:bg="gray-400 opacity-20"
21 |       @click="counter -= 1"
22 |     >
23 |       -
24 |     </button>
25 |     <span m="auto" p="2">{{ counter }}</span>
26 |     <button
27 |       border="l gray-400 opacity-50"
28 |       p="2"
29 |       font="mono"
30 |       outline="!none"
31 |       hover:bg="gray-400 opacity-20"
32 |       @click="counter += 1"
33 |     >
34 |       +
35 |     </button>
36 |   </div>
37 | </template>
38 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build.environment]
 2 |   NODE_VERSION = "14"
 3 | 
 4 | [build]
 5 |   publish = "dist"
 6 |   command = "npm run build"
 7 | 
 8 | [[redirects]]
 9 |   from = "/*"
10 |   to = "/index.html"
11 |   status = 200
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "soft-skills",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "build": "slidev build",
 6 |     "dev": "slidev --open",
 7 |     "export": "slidev export"
 8 |   },
 9 |   "dependencies": {
10 |     "@slidev/cli": "^0.33.0",
11 |     "@slidev/theme-apple-basic": "^0.20.0",
12 |     "@slidev/theme-bricks": "^0.0.2",
13 |     "@slidev/theme-default": "*",
14 |     "@slidev/theme-seriph": "*"
15 |   },
16 |   "devDependencies": {
17 |     "playwright-chromium": "^1.22.2"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/preview.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/forrestchang/programmer-soft-skills/49952b5c88d52d432825301071d1befd695cd024/preview.jpg


--------------------------------------------------------------------------------
/slides-export.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/forrestchang/programmer-soft-skills/49952b5c88d52d432825301071d1befd695cd024/slides-export.pdf


--------------------------------------------------------------------------------
/slides.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | # try also 'default' to start simple
  3 | theme: default 
  4 | 
  5 | # random image from a curated Unsplash collection by Anthony
  6 | # like them? see https://unsplash.com/collections/94734566/slidev
  7 | background: https://source.unsplash.com/collection/94734566/1920x1080
  8 | 
  9 | # apply any windi css classes to the current slide
 10 | class: 'text-center'
 11 | 
 12 | # https://sli.dev/custom/highlighters.html
 13 | highlighter: shiki
 14 | 
 15 | # show line numbers in code blocks
 16 | lineNumbers: false
 17 | 
 18 | # some information about the slides, markdown enabled
 19 | info: |
 20 |   ## Slidev Starter Template
 21 |   Presentation slides for developers.
 22 | 
 23 |   Learn more at [Sli.dev](https://sli.dev)
 24 | 
 25 | # persist drawings in exports and build
 26 | drawings:
 27 |   persist: false
 28 | ---
 29 | 
 30 | # 程序员的软技能
 31 | 
 32 | 代码之外的生存指南
 33 | 
 34 | <div class="pt-12">
 35 |   <span @click="$slidev.nav.next" class="px-2 py-1 rounded cursor-pointer" hover="bg-white bg-opacity-10">
 36 |     Press Space for next page <carbon:arrow-right class="inline"/>
 37 |   </span>
 38 | </div>
 39 | 
 40 | <div class="abs-br m-6 flex gap-2">
 41 |   <a href="https://github.com/forrestchang/programmer-soft-skills" target="_blank" alt="GitHub"
 42 |     class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
 43 |     <carbon-logo-github />
 44 |   </a>
 45 |   <a href="https://twitter.com/tisoga" target="_blank" alt="Twitter"
 46 |     class="text-xl icon-btn opacity-50 !border-none !hover:text-white">
 47 |     <carbon-logo-twitter />
 48 |   </a>
 49 | </div>
 50 | 
 51 | <!--
 52 | The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
 53 | -->
 54 | 
 55 | ---
 56 | 
 57 | # 介绍
 58 | 
 59 | 作为一名程序员，除了需要掌握「硬技能」之外（例如编程语言、架构设计等），也需要一些「软技能」来傍身，这些「软技能」可以帮助你更好地成长。
 60 | 
 61 | 今天主要会分享以下几个主题的内容：
 62 | 
 63 | - 🕐 **时间管理** - 如何更好地规划任务，管理时间，提高生产力
 64 | - 📚 **快速学习** - 如何快速掌握一门技能
 65 | - 👏 **个人营销** - 如何提升影响力
 66 | 
 67 | <!--
 68 | You can have `style` tag in markdown to override the style for the current page.
 69 | Learn more: https://sli.dev/guide/syntax#embedded-styles
 70 | -->
 71 | 
 72 | <style>
 73 | h1 {
 74 |   background-color: #2B90B6;
 75 |   background-image: linear-gradient(45deg, #4EC5D4 10%, #146b8c 20%);
 76 |   background-size: 100%;
 77 |   -webkit-background-clip: text;
 78 |   -moz-background-clip: text;
 79 |   -webkit-text-fill-color: transparent;
 80 |   -moz-text-fill-color: transparent;
 81 | }
 82 | </style>
 83 | 
 84 | ---
 85 | layout: center
 86 | ---
 87 | 
 88 | # 🕐 **时间管理**
 89 | 
 90 | ---
 91 | layout: two-cols
 92 | ---
 93 | 
 94 | # Getting Things Done
 95 | 
 96 | - David Allen
 97 | - 中文版：《搞定》
 98 |   - [微信读书](https://weread.qq.com/web/bookDetail/c0e328b05cf118c0e998aee)
 99 | - 一种任务管理的流程
100 |   - 类似于我们现在使用的 Jira 上的 Workflow
101 | - 核心：清空大脑
102 | 
103 | ::right::
104 | 
105 | <img class="h-120" src="https://images-na.ssl-images-amazon.com/images/I/81Sna4a0jPL.jpg">
106 | 
107 | 
108 | ---
109 | layout: two-cols
110 | ---
111 | 
112 | # GTD Workflow
113 | 
114 | 1. Capture 收集
115 |     - Inbox
116 |     - Quick Capture
117 | 2. Calarify 厘清
118 |     - 区分是否是可行动的
119 |     - Project? Next Action? Reference?
120 | 3. Plan 规划
121 |     - 找到 Next Action
122 |     - Weekly Plan -> Daily Plan
123 | 4. Do 行动
124 |     - Pomodoro Technique
125 | 
126 | <br>
127 | 
128 | 👉 [用 OmniFocus 3 完成了上千个任务后，我总结出了这些经验](https://sspai.com/post/49105)
129 | 
130 | ::right::
131 | 
132 | <img class="h-120" src="https://playbook.datopian.com/assets/img/gtd-clarify-flow.02e76115.png">
133 | 
134 | ---
135 | layout: two-cols
136 | ---
137 | 
138 | # 工具
139 | 
140 | - 滴答清单
141 | - Todoist
142 | - OmniFocus
143 | - Things 3
144 | 
145 | ::right::
146 | 
147 | <img class="h-auto m-10" src="https://cdn.vox-cdn.com/thumbor/uTUIdbjQEZihp3WOz-wVRzb-BMA=/0x0:2426x1820/920x613/filters:focal(1019x716:1407x1104):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/54862145/Things_Hero_2___macOS.0.png">
148 | 
149 | ---
150 | layout: two-cols
151 | ---
152 | 
153 | # 番茄工作法
154 | 
155 | - Pomodoro Technique
156 | - 一种注意力训练的方法
157 | - 流程
158 |   - 设定好一个目标
159 |   - 确定每个番茄的时间（一般是 25 分钟）
160 |   - 开始计时并专注在当前的目标上，直到这个番茄时间结束
161 |   - 如果有插入的事情，就先记录下来（之前讲到的 Inbox）
162 |   - 完成一个番茄后休息 5 分钟
163 |   - 循环
164 | 
165 | ::right::
166 | 
167 | <img class="h-auto m-10" src="https://images.prismic.io/sketchplanations/62e61034-b66a-4ede-a5db-a5cbc39d55e7_SP+587+-+The+Pomodoro+technique.jpg?auto=compress,format&w=1200">
168 | 
169 | ---
170 | layout: two-cols
171 | ---
172 | 
173 | # 深度工作 Deep Work
174 | 
175 | - Cal Newport
176 |   - CS 教授，畅销书作家，博客
177 | - 深度工作：专注、不间断、不分心的工作，这种工作会将你的认知能力推到极限
178 | - 浮浅工作：这类工作对认知要求不高，并且不能创造太多价值，任何人都可以做到
179 | 
180 | <br>
181 | <br>
182 | 
183 | 👉 [知识工作者的深度工作系统 Part 1](https://twitter.com/Tisoga/status/1515663828536598528)
184 | <br>
185 | <br>
186 | 👉 [知识工作者的深度工作系统 Part 2](https://twitter.com/Tisoga/status/1516040155852804098)
187 | 
188 | ::right::
189 | 
190 | <img class="h-110 m-4" src="https://kbimages1-a.akamaihd.net/11cc59b5-7b19-40e3-8d8a-de1538cfa5e7/1200/1200/False/deep-work-1.jpg">
191 | 
192 | ---
193 | layout: two-cols
194 | ---
195 | 
196 | # Maker's Schedule vs Manager's Schedule
197 | 
198 | 👉 [Maker's Schedule, Manager's Schedule](http://www.paulgraham.com/makersschedule.html)
199 | 
200 | - Paul Graham
201 |   - YCombinator, 黑客与画家
202 | - Makers
203 |   - 大段并且连续的时间
204 |   - 避免 context switching
205 | - Managers
206 |   - 被会议分割成一个个小的时间段
207 | 
208 | Tips:
209 | - 找到自己的 Maker 时间
210 |   - Paul 创业的时候是白天开会，然后从 18:00 开始写代码到 03:00
211 | 
212 | 
213 | ::right::
214 | 
215 | <img class="" src="https://i0.wp.com/tylerdevries.com/wp-content/uploads/2019/07/maker-schedule-vs-manager-schedule.jpg">
216 | 
217 | <style>
218 |   h1 {
219 |     font-size: 1.4rem;
220 |   }
221 | </style>
222 | 
223 | ---
224 | layout: two-cols
225 | ---
226 | 
227 | # 案例：Cal Newport
228 | 
229 | - [Deep Habits: Plan Your Week in Advance](https://www.calnewport.com/blog/2014/08/08/deep-habits-plan-your-week-in-advance/)
230 | - [How to schedule deep work: Time blocking](https://youtu.be/ykNcnrNvpTI)
231 | 
232 | ::right::
233 | 
234 | <img class="h-60" src="https://pbs.twimg.com/profile_images/1403013239487680512/FEfDeOTX_400x400.jpg">
235 | 
236 | ---
237 | layout: two-cols
238 | ---
239 | 
240 | # 案例：Lex Fridman
241 | 
242 | - MIT 研究员，知名 Podcast 主播
243 |   - 采访过的对象：Elon Musk, Mark Zuckerberg, Ray Dalio 等
244 |   - Podcast: [Lex Fridman YouTube](https://www.youtube.com/c/lexfridman/videos)
245 | - [A day in my life](https://youtu.be/0m3hGZvD-0s)
246 |   - 每天工作 12 小时，8 小时深度工作 + 4 小时低强度工作
247 |   - 上午和下午各有 4 小时的 deep work session，在这个 4 小时中，Lex 不会让任何事情打断自己，也绝不刷社交网络
248 | 
249 | ::right::
250 | 
251 | <img class="h-60 m-5" src="https://cdns-images.dzcdn.net/images/talk/fa8715fd91b40c027dab37c6d6e91936/1000x1000.jpg">
252 | 
253 | ---
254 | layout: two-cols
255 | ---
256 | 
257 | # 案例：George Hotz
258 | 
259 | - 计算机黑客，2007 年破解了 iPhone，2009 年破解了 PS3
260 | - 低成本自动驾驶解决方案 comma.ai 的创始人
261 | - 经常在 Twitch 上直播 live coding
262 |   - 每次持续 5+ 小时
263 |   - [从零实现一个 SLAM (Simulataneous localization and mapping)](https://youtu.be/7Hlb8YX2-W8)
264 |   - 同时定位与地图构建，自动驾驶的核心技术之一
265 | 
266 | ::right::
267 | 
268 | <img class="m-5" src="https://i.insider.com/5776b7bf4321f1c72f8b50bd?width=1000&format=jpeg&auto=webp">
269 | 
270 | ---
271 | layout: two-cols
272 | ---
273 | 
274 | # 间隙日志 Interstitial Journal
275 | 
276 | 👉 [Replace Your To-Do List With Interstitial Journaling To Increase Productivity](https://betterhumans.pub/replace-your-to-do-list-with-interstitial-journaling-to-increase-productivity-4e43109d15ef)
277 | 
278 | <br>
279 | 
280 | - 写下来是为了更好地思考
281 | - 可以避免拖延
282 | - 记录下日志方便之后回溯
283 | 
284 | ::right::
285 | 
286 | <img class="h-120 m-5" src="https://pbs.twimg.com/media/Eyn0kOkXEAQM7ml?format=jpg&name=900x900">
287 | 
288 | ---
289 | layout: center
290 | ---
291 | 
292 | # 📚 **快速学习**
293 | 
294 | ---
295 | 
296 | # 主动学习
297 | 
298 | - 带着目的去学习
299 |   - 解决某个问题
300 |   - 了解某个领域的知识
301 | - 学院派
302 |   - 从零开始学习，学完一部分再学另一部分
303 |   - 耗时长
304 |   - 如果没有用起来很容易忘记
305 | - 实用派
306 |   - 基于目的的学习方式
307 |   - 先表面，再深入
308 |   - 以用起来为主
309 | 
310 | ---
311 | layout: two-cols
312 | ---
313 | 
314 | # 学习金字塔
315 | 
316 | - 主动学习与被动学习
317 | - 做和教是最好的学习方式
318 | 
319 | <br>
320 | 
321 | <img class="w-auto" src="https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FJiayuanWorkspace%2FMUgMRjx260.png?alt=media&token=4b449e05-6ba7-4379-a9fa-9a86c2fa37fe">
322 | 
323 | ::right::
324 | 
325 | <img class="" src="https://www.thephuketnews.com/photo/listing/1374138536_1.jpg">
326 | 
327 | ---
328 | layout: quote
329 | ---
330 | 
331 | You don't learn, then start. You start, then learn. -- Sahil Lavingia
332 | 
333 | <img class="h-30" src="https://i.insider.com/6001b1f2dd0659001a8b73bc?width=500&format=jpeg&auto=webp">
334 | 
335 | <style>
336 |   p {
337 |     font-size: 1.6em;
338 |     background-color: #2B90B6;
339 |     background-image: linear-gradient(45deg, #23c5D4 10%, #296b8c 20%);
340 |     background-size: 100%;
341 |     -webkit-background-clip: text;
342 |     -moz-background-clip: text;
343 |     -webkit-text-fill-color: transparent;
344 |     -moz-text-fill-color: transparent;
345 |   }
346 | </style>
347 | 
348 | ---
349 | layout: two-cols
350 | ---
351 | 
352 | # Do -> Learn
353 | 
354 | - Sahil Lavingia
355 |   - Pinterest #2
356 |   - Gumroad CEO
357 |   - [Reflecting on My Failure to Build a Billion-Dollar Company](https://sahillavingia.com/reflecting)
358 | - 先行动起来，遇到不会的再去学习
359 | - Get Your Hands Dirty
360 | - 一个 🌰 : Figma 的学习经验
361 |   - 分钟级别速成
362 |   - [Figma UI Design Tutorial: Get Started in Just 24 Minutes! (2022)](https://youtu.be/FTFaQWZBqQ8)
363 |   - 用到什么查什么
364 | 
365 | 
366 | ::right::
367 | 
368 | <img class="h-100 m-5" src="https://images-na.ssl-images-amazon.com/images/I/41qdZH4FhLL._SX329_BO1,204,203,200_.jpg">
369 | 
370 | ---
371 | 
372 | # Feynman Technique
373 | 
374 | - 理论物理学家
375 | - 量子力学奠基人之一，1965 年获得诺贝尔物理学奖
376 | - 费曼物理学讲义
377 | - [别逗了，费曼先生](https://weread.qq.com/web/bookDetail/cd732d70718db043cd73bb3)
378 | 
379 | <br>
380 | 
381 | <div class="flex gap-2">
382 |   <img class="h-70" src="https://caltech-prod.s3.amazonaws.com/main/images/feynman01-NEWS-WEB.width-600_tSwRQP5.jpg">
383 |   <img class="h-70" src="https://upload.wikimedia.org/wikipedia/commons/8/87/The_Feynman_Lectures_on_Physics.jpg">
384 |   <img class="h-70" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1594515882l/54477308._SX318_.jpg">
385 | </div>
386 | 
387 | ---
388 | layout: two-cols
389 | ---
390 | 
391 | # Feynman Technique
392 | 
393 | 1. 选择一个想要学习的主题
394 | 2. 把这个主题讲给一个完全不会的人听
395 | 3. 如果讲的过程中卡壳了，就回过头去重新把卡壳的这部分学习一下
396 | 4. 简化所讲的内容，能不能用更简单的话来讲
397 | 
398 | ::right::
399 | 
400 | <img class="m-5" src="https://25r4fj22vjh18a4i91qamh06-wpengine.netdna-ssl.com/wp-content/uploads/2020/02/feynman-technique_graphic-1_resize-1.png">
401 | 
402 | ---
403 | 
404 | # Feynman Technique
405 | 
406 | - 写博客
407 |   - 2014 - 2022
408 |   - [Jiayuan Thoughts](https://blog.jiayuanzhang.com/)
409 | - 利用 Twitter 来进行公开写作
410 |   - 2020 年公开写作实验
411 |   - [利用 Twitter 来进行低成本写作](https://blog.jiayuanzhang.com/post/low-cost-writing-with-twitter/)
412 | - 参与技术分享
413 |   - 2019, Python Open Days, [How to Build a Web Framework from Scratch](https://youtu.be/p8GXdWWHPQU)
414 |   - 2019, PyCon, [The Past and Future of GIL](https://slide.jiayuanzhang.com/the-past-and-future-of-gil/#/)
415 | 
416 | ---
417 | layout: two-cols
418 | ---
419 | 
420 | # 知识的复利
421 | 
422 | - 注重积累
423 | - 建立自己的知识管理系统
424 | 
425 | <br>
426 | <br>
427 | 
428 | <img class="h-80" src="https://m.media-amazon.com/images/I/412AXfNUJSL.jpg">
429 | 
430 | ::right::
431 | 
432 | <img class="" src="https://cdn.corporatefinanceinstitute.com/assets/Simple-vs-Compound-Interest-1.png">
433 | 
434 | ---
435 | layout: center
436 | ---
437 | 
438 | # 👏 **个人营销**
439 | 
440 | ---
441 | layout: two-cols
442 | ---
443 | 
444 | # 把自己当做产品
445 | 
446 | - 找到 PMF
447 |   - [Do Things That Don't Scale - Paul Graphaham](http://paulgraham.com/ds.html)
448 | - 创造价值
449 | - 持续迭代
450 | - 案例：[左耳朵耗子（陈皓）](https://coolshell.cn/haoel)
451 |   - 2002 年开始写技术博客
452 |   - 极客时间专栏「左耳听风」售出 15 万份（收入约 5000 万+，实际可能没有这么多）
453 | - 案例：[阮一峰](http://www.ruanyifeng.com/)
454 |   - 《黑客与画家》、《软件随想录》等书的译者
455 |   - 坚持博客输出内容
456 |   - 科技爱好者周刊（目前已经更新到 211 期）
457 | 
458 | ::right::
459 | 
460 | <img class="" src="https://aktiasolutions.com/wp-content/uploads/2019/01/PRODUCT-MARKET-FIT-AJUSTE-PRODUCTO-MERCADO-LEAN-PRODUCT-MANAGEMENT-AKTIA-SOLUTIONS.jpg">
461 | 
462 | ---
463 | layout: two-cols
464 | ---
465 | 
466 | # Show Your Work
467 | 
468 | - Think in system
469 | - Share something small everyday
470 | - Tell good stories
471 | - Teach what you know
472 | - Charge a fair price
473 | - Stick around, don't quit
474 | 
475 | ::right::
476 | 
477 | <img class="m-5" src="https://austinkleon.com/wp-content/uploads/2012/10/00-show-cover.jpg">
478 | 
479 | ---
480 | 
481 | # 建立联系
482 | 
483 | - 多利用公司资源和不同的人 1:1
484 |   - Project: 每天和不同部门/职业的人 1:1
485 | - 画板策略 - Ryan Holiday
486 |   - [The Canvas Strategy](https://ryanholiday.net/the-canvas-strategy/)
487 |     - Find canvases for other people to paint on.
488 |   - 优先为他人创造价值
489 |   - 放下 Ego
490 | 
491 | ---
492 | 
493 | # 建立联系
494 | 
495 | <img class="h-120" src="https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FJiayuanWorkspace%2FuqxpprAgWM.png?alt=media&token=4c43a815-8e8c-4c85-8557-1070494fdc8c">
496 | 
497 | ---
498 | 
499 | # 建立联系
500 | 
501 | <img class="h-100" src="https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FJiayuanWorkspace%2FFfGobNpOOh.png?alt=media&token=6b5187ab-838a-4b85-bb67-40097843a4a9">
502 | 
503 | ---
504 | 
505 | # 建立联系
506 | 
507 | <img class="h-110" src="https://firebasestorage.googleapis.com/v0/b/firescript-577a2.appspot.com/o/imgs%2Fapp%2FJiayuanWorkspace%2FKH6_7CSFiH.png?alt=media&token=eff7fa18-9a83-4c93-a82b-d7315ffd1cfc">
508 | 
509 | ---
510 | layout: center
511 | ---
512 | 
513 | # Q&A


--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 |   "rewrites": [
3 |     { "source": "/(.*)", "destination": "/index.html" }
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------