读后感:《你在天堂里遇见的五个人》

前言: 前天(周四 6月15日)一位好友推荐、分享了一篇短篇小说《你在天堂里遇见的五个人》。于是那天夜里抱着试试看的心态看了一部分,觉得这本书很有趣,然后昨天晚上着迷般读完了昨晚看剩下的一半,不长,几个小时即可读完。

也因为这本书挺有趣,所以就稍微写一点文字作为读后感(虽然小时候特别讨厌写读后感,但现在发现确实是一个不错的学习方法)。希望不要因为这篇文章掉粉啊(总感觉这句话是个 flag……=。=),毕竟当年高考语文没及格的我,语文作文一直是我硬伤……

高能预警:严重剧透

高能预警:严重剧透

高能预警:严重剧透

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

先说说读这本书的感受,

起初读这本书时,会感到一些恐惧,但是渐渐会被温暖、慰藉所代替。当沉浸于这本书时,内心变得安宁、平和。

不自禁地会把自己代入进去:会去反思自己过去所做所为,重新审视对他人的看法是不是带有偏见、误会,会去尝试换位思考。会去思考,谁可能是我遇见的五个人?

看到第三个人说完爱迪父亲真实的死因的时候,就感觉自己快流眼泪了;接着继续看到最后,遇见的第五个人,小女孩的故事,终究还是没忍住流下眼泪……

比较巧合的是,前几天(6月13日)刚巧是我生日,而这本书里面,也频繁出现了主角爱迪的生日场景。有点巧。

再说说自己的联想

看完整本书以后,第一个想到的就是一首歌,最近经常单曲循环,骑车回家的路上也经常哼的一首歌:五月天的《少年他的奇幻漂流》。如果感兴趣可以看看这首歌的 MV 以及歌词(都很用心):《少年他的奇幻漂流》MV

以下是部分节选,看到书中遇见的第一个人:蓝皮人的时候…… 就想起了其中的一段歌词……

诸神已离开 鬼在狂欢 而人们在纠缠
谁生错血脉 谁长错色彩 谁梦错了期待

漂流无边汪洋 不叫做孤单
夜色的最黑暗 那不是最黑暗
而是人们无穷 无尽的争端
将你我推向了 最远两端
异端 极端 遗落的遗憾

我们会航向怎样的未来
无数命运流转
打造了 无数的
相异的罗盘

如果世界只剩你我存在
为何人们依然
争论著 那未来
而践踏着现在

我们该珍惜如何的现在
无数交织自传
相遇在 汪洋中

第四个人,玛格丽特说的话,

失去的爱仍然是爱,只不过形式不一样了。你看不见他们的笑容,不能为他们端上三餐,不能拨弄他们的头发,不能拥着他们在舞池里转。可是,随着这些感受的褪去,会有另一种感觉逐渐转浓。那是记忆。记忆变成你的伴侣。你灌溉它,你拥有它。你与记忆共舞。

“人生总会结束。”她说:“爱,没有终点。”

这让我忆起同样是五月天的《转眼》,也是我很喜欢的一首歌:

我不怕死亡 只害怕遗忘

回忆是你我 生存的地方

然后脑洞大开,突然又回忆起大学时选修《英美诗歌》这门跨专业选修课,貌似还是第一堂课介绍的莎翁的《Sonnet 18》,异曲同工。

Nor shall death brag thou wander’st in his shade,
When in eternal lines to time thou grow’st,
So long as men can breathe, or eyes can see,
So long lives this, and this gives life to thee.

而关于全书最后的那段话:

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

有一种《云图》的既视感……六个环环相扣的故事,时间跨度从十九世纪到后末日时代,波及全球各地……

接着说说个人理解,

在读完前四个人的故事后,我的理解是:作者想表达每个人要理性、慎重、谨慎地做出生活中的每一个决定,但我觉得若过于极端的话,就可能导致人变的消极、犹豫、无为、懊悔;

直到读完最后一个故事,自我救赎。觉得作者还是希望人们不必太自责,要放下过去,“悟已往之不谏,知来者之可追”。毕竟人无完人,每个人在各自成长过程中,难免会留下遗憾,也难免会给别人带来伤害,我们能做的便是宽恕他人、宽恕自己、积极面对生活、善待他人、善待自己。

而这篇小说的几个核心:公平、牺牲、宽恕、爱、自我救赎。给我的感觉是作者主要描述的还是一些理想的概念,现实生活中必然受限于各种因素,包括且不限于文化的差异、价值观的差异、经济的差异等等。作者只是将这些概念抛出来,虽然略带有说教性质,但主要目的还是希望能引起读者的自我思考,也算是一件积极的事情。

至于这本书对我的影响,

也许以后我也会思考,我接下来做的事情,也许哪怕是不经意的事情,会给别人带来多少影响?就比如前阵子我结合我个人的  『前端开发技术成长过程中的知识点整理』,以及 『team leader 的实践经历』 写了两篇文章,也许会对他人有所影响、有所帮助、有所改变。

也坚定了我成为一名优秀引导者的信念,因为我的成长过程中,离不开他人的指导,也就是所谓的站在巨人的肩膀上,而我也愿意为之出一份力,希望有一天我也能通过我的努力,对他人的成长带来积极的影响。前阵子产出的一篇关于『前端实习生培养体系』的文章就是依赖于前辈们的经验,再结合自己的想法、理念完成的。

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

最后,

突然觉得活着、积极地生活着、朝着理想生活积极地活着真的都是很美好的事情。

Carpe diem.

附:

一些语录

一次意外看似偶然,其实也有它的必然。你的一次不经意的决定也许就会改变另一个人的命运。

出生和死亡,皆是一个整体的一部分”。人的存在就是这样强烈地影响了另外一个人。这种影响,关乎死亡,看起来很随机,与公平、公正没有丝毫关系。

年轻人上战场,有时是因为他们不得不去,有时是因为他们想去。但是,他们永远觉得,他们应该去。千百年悲哀的、错综复杂的人类历史让人们误认为拿起武器便是勇敢,放下武器便是怯懦。

“你不明白,自我牺牲其实是生命的一部分。就应该是这样。它不是需要惋惜,而是值得追求的东西。渺小的牺牲。宏大的牺牲。一位母亲去工作,以便送她的儿子上学。一个女儿搬回家住,以便照顾她患病的父亲。

“我开枪打了你,没错,”他说道,“你失去了一些东西,但你也得到了一些东西。你只是不知道而已。我也得到了一些东西。” “我得以遵守了我的诺言。我没有让你掉队。”

“在你出生以前所发生的事情,还是会影响到你。”她说:“比你早来到这世上的人,也会对你造成影响。 “我们每天进出的场所,如果没有前人的付出,今天就绝对不会存在。我们每天在工作场所投注许多时间,我们常常以为,那些地方是因为有了我们之后才出现的。其实并非如此。”

露比朝着他走去,柔声叫了他一声“艾德华”。这是她第一次喊他的名字:“听我的劝告。心中留着愤怒,对人是有害处的。愤怒会腐蚀你的内心。我们以为怨恨是一项武器,可以用来攻击那些伤害过我们的人。可是,仇恨是一把弯曲的刀;我们造成了伤害,其实是伤害了自己。

“艾迪啊,失去的爱仍然是爱,只不过形式不一样了。你看不见他们的笑容,不能为他们端上三餐,不能拨弄他们的头发,不能拥着他们在舞池里转。可是,随着这些感受的褪去,会有另一种感觉逐渐转浓。那是记忆。记忆变成你的伴侣。你灌溉它,你拥有它。你与记忆共舞。

“人生总会结束。”她说:“爱,没有终点。”

白色。只有白色。没有地,没有天,没有大地之间的地平线。只有一片纯洁而宁静的白,有如最寂静的黎明时分落下最深的雪,安静无声。

每一个人都会对另一个人造成影响,另一个人又对其他人造成影响,这整个世界充满了故事,然而所有的故事共同串连成一个完整的故事。

吃土小2叉
2017年6月17日20:26:38

写给 25 岁、26 岁以及 17 岁的自己

前言:这是一篇非技术文,这个月我会不断维护、迭代,目的是为了自我认知更全面,以及凭借我糟糕的文笔,不断完善本文措辞。好记性不如烂笔头,通过这篇文章记录一下自己成长过程中属于此刻的独特阶段。(逢文章写前言的习惯看来是改不掉了)

初衷:个人成长

  • 自我认知:2016.06 ~ 2017.06
  • 自我分析:2017.06
  • 自我规划:2017.06 ~ 2018.06 & 2017.06 ~ 20xx.xx

自我认知

尽量只描述客观事实,避免情绪化干扰

经历

写给 25 岁的自己:记录了我 25 岁这一年,对于我来说影响比较大的一些经历

  • 2016-03 ~ 2016-11
    • 单反弃坑 2016.06
    • 王者荣耀弃坑 2016.06
    • 沉迷天涯明月刀 2016.06 ~ 2016.11
    • 在后端客服系统中初次应用 Require.js 2016.06 ~ 2016.07
    • 追妹子(第三年)
      • 澳洲 7 日游 2016.03
      • 澳洲代购 2016.03 ~ 2016.11
      • 放弃 2016.11
      • 天涯明月刀弃坑 2016.11
  • 2016-07 ~ 2016-12
    • 周末一天学开车
  • 2016-09 ~ 2017-01
    • Vue 从入门到上线项目 2016.09 ~ 2017.01
      • 对比 React & Vue 2016.08
      • 学习 Vue.js 2016.09
        • 官方文档
        • hackernews
        • vuestrap、elementui
      • 开发 UI 基础组件库 2016.09 ~ 2016.10
        • 团队分工协作
      • 在多页传统网站中应用 Vue.js、Vuex 2016.11 ~ 2017.01
        • 后端渲染数据保存至 Vue 实例
        • 假的 table 组件
          • 2.0 版本已弃用的 Vue.partial
        • Vuex 的 XX 式应用
        • 写业务过程中,不断迭代基础 UI 组件库
        • 业务业务业务
    • 购置二手旧房 2016-10 ~ 2016-11
      • 物色合适房源
      • 学习如何避免买房遇到坑
      • 花完了家中全部积蓄
      • 公积金贷款 15 年 + 商业贷款 30 年
  • 2017-02 ~ 2017-03 转折点
    • 小程序从入门到上线项目 2017.02 ~ 2017.03
      • 学习小程序
        • 官方 API 文档
        • 微信小程序联盟
      • 开发公司的小程序
      • 参与到技术社区:微信小程序联盟论坛
        • 论坛发帖
        • QQ 群每日答疑
      • 小程序推广的想法
  • 2017-02 ~ 2017-05
    • 关键点
      • 2017 前端生存指南 by XX // 2017.02
        – 关键词:修炼、协作、产出
      • GitChat // 2017.04
        • 非常棒的技术分享交流模式
        • 技术成长上,感谢小爝大大的一篇文章
          • 让我时隔 3 年多,重新在 GitHub 开了新项目并投入了不少精力
        • 团队建设、个人综合成长方面,最想感谢姬光老司机的文章
          • 启发我完成了两篇文章《前端开发负责人修炼指北》、《前端开发实习生织梦计划》
      • 马克飞象
        • 非常适合我的写作工具,让我重新爱上写博客
    • 前端开发 leader 的自我修养
    • 沉迷翻译
    • 恢复写博客
    • 项目救火、填坑
      • 京东合作
      • 努比亚合作
      • 锤子合作
      • 芝麻信用合作
      • 后端收货系统

过失、困境、困惑

Learn from your mistakes , adversity and worries.

过失

困境

困惑

收获

喜好

厌恶

价值观

自我分析

写给 26 岁的自己

SWOT

Strengths

  • 收集信息
  • 写计划
  • 写总结
  • 学习能力
    • 前期活跃,中期疲软,后期发育尚可型
  • 基础能力
  • 知识掌握程度
    • 广度不错
    • 深度比较平均

Weaks

  • 依赖于明确的目标与计划
  • 价值观导向
    • 如果某件事情不符合我的价值观,会很困惑

Opptunity

Threats

成长

自我规划

前阵子,参加了书虫部落的一次线下读书交流会,关于《 On Managing Yourself 》的纯英文导读交流会。为了认真参加这次交流会,我比较认真地回答了一些很有价值的导读问题。而这些问题以及我的解答,之后我会详细整理一下再写一篇文章。

而正是这一次交流会,以及准备参与到这个交流会的过程,促使我明确了未来自己努力挖掘的特质

核心:改变

USED 落实方案

Use

Stop

Exploit

Defend

一年内规划

理想中的自己

What you wanna be ?

特质

很多没做的事情,其实可以串联到同一个目标上(安慰自己)

舍弃,减法生活

想对 17 岁时自己说的话

每一年都是 17 岁

版本规划

  • 过去
    • 高中
    • 大学
    • 职场
      • 前三年
      • 近半年
  • 现在
    • 学习
    • 工作
    • 健身
  • 未来
    • 特质
    • 价值观

前端开发知识点整理

Growth Front-End Knowledge Summary

前言: 本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理,涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么,看上去有很多,但具体你要学什么,还是要 follow your heart & follow your BOSS

初衷。写这篇文章主要有以下几个初衷:

  • 梳理知识体系。网上虽然有许多类似的内容,但每个人都有各自独特的思维方式,适合自己的才是最好的。
  • 探索不足之处。明确自己到底掌握了哪些,哪些本应掌握但还没有学习。
  • 完善公司的前端培训方向。前端技能培训的方向由懂前端、懂公司前端团队的人来设定最好不过了。
  • 希望借此激发大家的一点思考。我们都在路上,我不是成功的例子,我写下我的思考,希望借此激发大家的一点思考。
  • 一个梗。自 2012 年以来,我知乎上获赞最多的答案却是引用他人的答案……有点尴尬:《一名合格的前端工程师的知识结构是怎样的?》

目录

专业技能

前端理论

浏览器

  • 浏览器内核渲染原理
    • HTML 解析器
    • CSS 解析器
    • JavaScript 引擎
    • 渲染流程
      • 加载
      • 解析(确定结构、计算样式)
      • 构建 DOM 树、应用样式
      • 绘制
      • 回流
      • 重绘
  • 浏览器调试
    • 工具
      • F12
      • 扩展插件
      • 浏览器常用快捷键
    • 调试内容
      • 元素
        • 结构
        • 属性
      • 样式
      • 脚本
        • 日志
        • 断点
        • 事件
        • 变量监听
        • 调用堆栈
      • 性能
        • snapshot
        • 耗时
      • 网络请求
        • 模拟请求
        • 审查网络
        • 模拟网络环境
      • 内存
      • 本地存储信息
        • cookie
        • local storage
        • cache
    • 调试技巧
  • 浏览器事件
    • 常见事件
      • 鼠标事件
      • 表单元素事件
      • 键盘事件
      • 文档事件
      • CSS 事件
      • ……
    • 事件处理、添加、移除
  • 浏览器任务调度机制
    • micro queue
    • macro queue
  • 浏览器兼容性
    • 各平台浏览器的坑(家家有个难填的坑,有的坑深,有的坑浅)
      • 移动端浏览器
        • UC
        • Safari
        • 微信浏览器
        • 百度
        • ……
      • PC 端浏览器
        • Chrome
        • Firefox
        • IE
        • Edge
        • ……
      • 小程序
    • 不同浏览器内核差异
      • CSS 私有属性前缀(注:建议使用 postcss 自动化补全)
      • Polyfill
    • HTML、CSS、Javascript 特性支持度
      • MDN
      • Can I use ?
  • 常见问题
    • 请求跨域
    • iframe 跨域通信
    • 各种兼容性问题
    • 网页加载速度慢
    • 按钮点击没反应……

HTML

吃土小2叉:据说 HTML 和 CSS 一起学习体验最佳哦

  • 语法 & 语义
    • !DOCTYPE HTML 文档标准
    • head
      • meta 元数据标签
        • 网页描述
        • 设备描述
        • HTTP 请求描述
        • HTTP Client Hints
    • body
      • 装饰型标记(不推荐、部分已废弃)
      • 功能型标记
        • 无语义容器(div、span)
      • 用户交互(交互型标记)
        • 输入框
        • 选择器
        • 多选框
        • 单选框
        • 按钮
      • 数据可视化(展示型标记)
        • 定义列表
        • 无序列表
        • 表格
        • 结构化数据标记、微数据
        • 多媒体
          • 图片
          • 视频
          • 音频
        • SVG、Canvas
        • 文章(正文、摘要、段落、章节、前言、结语、引用)
  • 规范
    • HTML 代码规范
    • HTML 使用规范(标签嵌套规则)
      • 标签类型
  • 可访问性、无障碍体验
  • 常见问题
    • 图片空 src 导致页面加载两次
    • iframe 空 src 导致无限循环加载本页面

Alt text

上图据说是 HTML5 规范中关于 HTML 标签嵌套规则的示意图

CSS

吃土小2叉:用设计师的思维去理解 CSS,用程序员的思维去写 CSS

  • 语法(CSS 从入门到放弃)
    • 基本用法
    • 选择器
    • 媒体查询
    • 简写属性
    • 注释
    • 属性运算 calc()
  • 规范(编写可读性良好的 CSS)
    • 用例规范
      • 权限控制
      • 最佳实践
      • 不良习惯
    • 格式规范
      • 风格
      • 复用
      • BEM 规范
  • 逻辑特性(在 CSS / Less 中运用 OO 思想和设计模式)
    • 权重(优先级)
    • 作用域
    • 封装(mixins)
    • 组合(mixins+)
    • 扩展(:extend)
    • 继承(mixins)
    • CSS 变量、Less 变量
    • 模块化(import)
  • 视觉设计(单一状态设计)
    • 布局
      • 盒模型(高度、宽度、边框、外边距、内边距、溢出控制)
      • 定位方式
      • 层叠上下文(z-index)
      • display 类型(table、inline、inline-block、block、flex、grid)
      • 浮动
      • 伪元素::after、:before
    • 字体排印(厉害了 word 哥)
      • 字体(字体族、网络字体)
      • 文本(删除线、下划线、斜体、粗细、字号)
      • 段落(行高、缩进、断句方式、换行方式)
      • 对齐
      • 方向
    • 装饰(神说,要有光)
      • 颜色
      • 背景
      • 边框(border、outline)
      • 圆角
      • 阴影
      • 渐变
      • 透明度
      • 变形(旋转、缩放、矩阵变化)
  • 交互设计(多状态设计)
    • 动画(运动和静止是对立的统一)
      • 过渡效果
      • 动画关键帧
    • 反馈
      • active、checked 状态
    • 引导
      • 结合 Javascript
      • CSS 动画
    • 互动
      • hover 状态
  • 多设备设计
    • 响应式设计(多套代码,多种设备)
      • 媒体查询
    • 自适应设计(一套代码,多种设备)
      • 最小固定宽度布局
      • 百分比布局
      • 栅格布局、弹性布局
      • js + rem 方案(rpx)
  • 常见问题
    • 视觉还原度
    • 调试技巧
    • 属性“失效”问题
      • transition “失效”?
      • z-index “失效”?
    • 外边距合并
    • 边框 1px 问题
    • 垂直居中
    • 大屏幕 rem 小屏幕 px
    • 图片适配
    • 可维护性
      • 权重控制
      • 嵌套层级
      • 语义性
  • 扩展内容
    • 预处理器:Less、Sass
    • 后处理器:postcss
    • 小程序的 WXSS
    • Weex、RN 中的 CSS

JavaScript

吃土小2叉:至今还没看完一遍《JavaScript 高级程序设计》的我是该好好面壁思过了。

本段内容大量参考了:《The Modern JavaScript Tutorial》http://javascript.info/ ,推荐阅读。

  • JavaScript 标准
    • 严格模式
    • 兼容模式
  • 开发工具
    • IDE
    • 轻量编辑器
  • 基础语法
    • 数据类型
      • 基本数据类型 numberstringbooleannullundefinedobjectsymbol
      • 数据类型检测
      • 解构赋值
        • 数组
        • 对象
      • date 与时间
      • JSON
        • 格式说明
        • 序列化
        • 反序列化
      • 数组
        • 数组操作(增、删、改、遍历、复制)
        • 多维数组
    • 变量
      • 声明 varletconst
      • 声明提升
    • 作用域
    • 逻辑控制
      • 循环
      • 分支
      • 判断
    • 对象(基础部分)
      • 对象操作(增、删、改、查、复制)
      • Symbols
      • 类型转换
      • 垃圾回收机制
      • 对象方法中的 this
      • new
    • 函数
      • 函数默认值
      • 函数声明
      • 立即执行函数
      • 箭头函数
    • 运算符
      • 数值运算
      • 逻辑运算
    • 事件
      • 浏览器事件
      • 冒泡、捕获
      • 事件捕获
      • 浏览器默认行为
    • 文档
      • DOM 树
      • 节点
        • 节点类型
        • 节点标签
        • 节点内容
      • window 对象
    • DOM 操作
      • 元素节点(增、删、移、换、复制)
      • 元素属性(增、删、改、查)
      • 文本内容(增、删、改、查)
    • 网络请求
      • ajax(回调函数)
      • Promise
      • async、await
  • 深入细节
    • 对象、类、继承
      • 属性标记与属性描述
      • 原型、原型链
      • 继承
      • 属性定义
      • 对象混合
      • 类型检测
    • 数据类型
      • 基本类型
    • 函数进阶
      • 递归、调用堆栈
      • 闭包
      • 函数绑定、上下文
      • 剩余参数、扩展语法
      • 函数对象
      • 任务调度:定时器
      • 柯里化
      • 深入箭头函数
      • 函数式
    • 面向对象
    • 错误处理
      • 错误捕获
  • 代码质量
    • 注释
    • 相关工具
      • ESLint、JSLint
      • Standard.js
      • Prettify
      • 自动化测试工具:Jest、Mocha
    • 用例规范
      • 最佳实践
      • 不良习惯
    • 格式规范
      • 风格
  • 正则表达式
    • 普通字符、转义字符
    • 元字符
    • 字符类
    • 分支条件
    • 分组
    • 反义
    • 贪婪与懒惰
    • 后向引用
    • ……

编程通用

软件工程的核心就是管理复杂度 —— 《代码大全 2》

推荐阅读:来自法海@淘宝前端团队《从达标到卓越 —— API 设计之道》

  • 达标(语法、词法)
    • 正确拼写
    • 准确用词
    • 注意单复数
    • 不要搞错词性
    • 处理缩写
    • 用对时态和语态
  • 熟练(语义、可用性)
    • 单一职责
    • 避免副作用
    • 代码一致性
    • 合理设计函数参数
    • 合理运用函数重载
    • 使返回值可预期
    • 固话术语表
    • 遵循一致的代码风格
  • 卓越(系统性、大局观)
    • 版本控制
    • 确保向下兼容
    • 设计扩展机制(易于扩展)
    • 控制 API 的抽象级别
    • 设计模式
    • 注释
    • DRY
    • 编码规范
    • 解耦
    • 复杂度控制

SEO & 数据统计 & 数据分析

吃土小2叉:尽人事,听天命(天者,用户也)

  • SEO
    • 影响因素
      • 相关性
        • title
        • 关键词密度
      • 权威性
        • 外链
        • 内链
        • 域名年限
        • 网站收录
        • 安全性
      • 用户体验
        • 广告
        • 加载速度
        • 内容质量:内容真实性、内容原创性、内容有益性
    • 不良行为
      • 堆叠关键词
      • 抄袭、作弊
      • 大量低价值外链
      • 广告、木马、病毒 -数据统计
    • 工具
      • 统计、埋点工具:Google Analytics、百度统计、Piwik……
      • 站长工具:Google Webmaster 、百度站长工具
      • 其他工具:百度指数、SEO 各项指标助手工具……
  • 数据分析
    • 工具
      • 同数据统计工具
      • 脑子是个好东西
    • 分析方法
      • 归因、排查
      • 细分
        • 来源、渠道
        • 用户属性
          • 人口统计学
        • 用户行为
          • 站内搜索关键词
          • 自定义事件(埋点事件)
          • 浏览频率、时间、跳出页
          • 访问内容
          • 访问漏斗
        • 站点属性
      • 对比
        • 时间维度
        • 统计指标维度
    • 目标设置
      • 转化路径
      • 转化目标
      • 转化价值

网络基础

此处是不是又要出现,经典问题:当你在浏览器输入 URL 并回车(非单页应用的传统网站),直到你看见这个页面,此时经历了哪些过程(略去浏览器渲染环节)。

  • TCP / IP
    • HTTP
      • 请求
        • 请求头
        • 请求正文
      • 响应
        • HTTP 状态码(2xx、3xx、4xx、5xx)
        • 响应头
        • 响应正文
      • 过程:三次握手
    • HTTP2
    • HTTPS
    • Web Socket
    • CORS
    • Session、Cookie
    • RESTful / RPC
  • DNS 、域名、IP
    • 域名劫持
    • 内网、公网地址段
  • 缓存
    • 服务端缓存
    • 客户端缓存
  • 常用工具
    • F12 Network Panel
    • Advanced REST client
    • EditThisCookie
    • Wireshark
    • Fiddler、Charles
  • 常见问题
    • HTTP 迁移到 HTTPS 站点部署问题
      • HTTPS 证书部署
        • TLS 版本问题
        • 证书作用域(是否包含子域名)
        • 证书、秘钥配置文件
      • 资源加载同协议
        • error 级
          • 外部 JavaScript 加载
          • iframe
        • warning 级
          • img
          • CSS
      • 网络请求同协议
        • error
          • ajax
          • jsonp

交叉领域理论

吃土小2叉:学习交叉领域知识的一个很朴实的目的 —— 掌握如何甩锅

产品设计相关

吃土小2叉:学会优雅地质疑设计 => 给用户更好的体验

  • 与设计师的沟通、协作
  • 设计理念 => 用户体验
    • 一致性
    • 可用性
    • 易用性
    • 反馈
  • 提升审美
    • 单反穷三代 // 单身狗 XX:也许学好摄影就能追到女神了呢?
    • 竞品分析 // 知己知彼,重视对手
  • 常用工具

后端基础

吃土小2叉:只要把这篇文章《系统设计入门》上面你不认识的术语弄懂就可以了 (迷之微笑)

XX 的观点:时刻谨记编程语言只是一种工具,分别有不同适用的场景罢了。理性、客观、结合实际。

  • 与后端开发工程师的沟通、协作
    • 明确分工
    • 文档先行
    • mock 数据
  • 简单了解一门后端语言 // XX 注:如果你已经自己搭建了个人博客站点,后端语言的语法层面足够了。
  • 了解前端路由与后端路由的区别
  • 简单应用数据库(MySQL)
    • 增、删、改、查
    • 备份、导出
  • 了解作用与概念
    • GraphQL
    • Nginx
    • Redis
    • 负载均衡
    • CDN
    • 数据库主从备份
  • 计算机相关基础知识 // 有时间多重温(预习)重温(预习)
    • 数据库
    • 操作系统
    • 编译原理
    • 离散数学
    • 数字逻辑

前端实践

实践是检验真理的唯一标准,在此引用 Vue.js 作者尤雨溪的一段话:

技术方案都是先有问题再有思路同时伴随着取舍。在选择衡量技术的时候,尽量去思考这个技术背后是在解决什么问题,它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术,也为以后哪天你遇到业务中的特殊情况,需要自己做方案的时候打好基础。

解决实际问题

Learn from you mistakes.

吃土小2叉:写下这篇文章的时候恰逢今年高考,很感谢高一的英语老师当时给我们布置的一个作业:整理考试错题集。因为经历过太多次,同样类型的题目这次错,下次仍然错。而我又是一个比较较真的人,每次整理错题的时候,不单单只记录做错的问题和答案,还会去分析这里的考点,所涉及的知识点,去试着换位思考如果我是出题人,会怎么出这道题,考哪些知识点可以坑一下考生。而这一过程,又有着考试做错题的心理愧疚感,记忆会特别深刻。另一方面,在复习阶段,也可以更具有针对性地复习,为自己减压。要尽量把大脑当成 CPU 来用,或者倒排索引,而非硬盘、数据库。

Learn from your practice.

而在编程过程中,也是比较接近。我们可以记录下自己犯过的错误,不良的编码案例。同时,我们也可以像经常收集一些名人名言、固定搭配等写作套路一样,去整理、收集自己在开发过程中的最佳实践。当然若是有时间再去思考、反思、优化,那就更好了。

Learn from your worry & adversity.

另外,抱着积极的态度强大的内心去面对开发过程中的任何困惑、困境,都是助力快速成长的好机会。

前阵子我在 GitHub 上也开了一个项目,专门记录、收集我最近在前端开发过程中遇到的一些问题,有已经解决的,也有仍待解决的。

https://github.com/xunge0613/front-end-practice-collections

目前整理的已解决问题有:

仍待解决的问题:

  • 如何优雅地监听元素高度变化?
  • 移动端 banner 轮播图自适应的各种坑

当然我也简单写了一些方法论,包括:

后续我也会不断完善这一块内容。重点是:形成一套属于自己的最佳实践经验库。

学习型项目

这一部分内容更推荐大家关注 Phodal 大神的 Growth 系列

https://github.com/phodal/growth

而我给准备入门前端的新手的建议是:

拥有一个完全属于自己的博客、域名、网站、服务器,并每周固定更新博客文章、每年为博客更新一次主题。

前端工程

勿忘自己的 title:前端工程师

以下引用张云龙 dalao 的文章:前端工程 —— 基础篇

第一阶段:库/框架选型 第二阶段:简单构建优化 第三阶段:JS/CSS模块化开发 第四阶段:组件化开发与资源管理

由于先天缺陷,前端相比其他软件开发,在基础架构上更加迫切的需要组件化开发和资源管理,而解决资源管理的方法其实一点也不复杂:

一个通用的资源表生成工具 + 基于表的资源加载框架

第一阶段:框架应用

吃土小2叉:只要是一个文档友好的框架,遇到不会的问题,去翻翻文档,如果解决不了,再去认真翻一次。因此,第一阶段,亦可认为是:面向文档编程

此处建议再回忆一下刚才提及的尤大的话。

以下是我个人的框架/库应用路线:

jQuery => jQuery + artTemplate => Vue.js + lodash => Vue.js 全家桶

  • jQuery // 此处参考张鑫旭的 jQuery 1.4 中文文档
    • 核心
      • 对象访问
      • 数据缓存
      • 队列控制
      • 插件机制
      • 多库共存
    • 事件
      • 页面载入
      • 事件处理
      • 事件委托
      • 事件切换
      • 常用事件
        • 鼠标事件(click、dbclick、hover、mouse*……)
        • 键盘事件(key*……)
        • 表单事件(blur、change、focus、submit、select)
        • 浏览器事件(error、resize、scroll)
        • 触摸事件(touch*……)
    • 选择器
      • 基本
      • 组合
      • 伪类
      • 内容
      • 可见性
      • 属性
      • 表单
    • 筛选器
      • 过滤
      • 查找
      • 串联
    • CSS
      • CSS
      • 位置
      • 尺寸
    • DOM 操作
      • 元素节点(增、删、移、换、复制)
      • 元素属性(增、删、改、查)
      • 文本内容(增、删、改、查)
    • 网络请求
      • Ajax
      • when
      • deferred
    • 特效
      • 基本(显示、隐藏)
      • 滑动
      • 淡入淡出
      • 自定义动画控制
    • 辅助工具(类似于 lodash)
      • 数组、对象操作
      • 函数操作
      • 字符串操作
      • 浏览器及特性检测
      • 类型检测
      • JSON 序列化
  • artTemplate
    • 模板引擎
  • Vue.js
    • MVVM 思想
    • 声明式渲染
    • 条件与循环
    • 处理用户输入
    • 数据绑定、响应式数据
    • 组件化应用构建
      • 组件间通信
  • lodash.js // 提供各种 helper 方法,专注于数据处理
    • 数据类型
      • 数组
      • 集合
      • 日期
      • 函数
      • 数值
      • 对象
      • 字符串
    • 语言特性
      • 类型检测
      • 类型比较
      • 复制
    • 数学运算
    • 辅助工具

XX:

  • 学你会用 artTemplate 以后,会发现 Vue.js 很容易上手
  • 当你学会 Vue.js 以后,你会发现小程序真的很容易上手

第二阶段:简单自动构建优化

专注业务开发

  • 工具
    • Grunt
    • Gulp
  • 预处理
    • Less
    • Babel
    • TypeScript
  • 后处理
    • PostCSS
  • 校验
    • ESLint
  • 压缩
    • 代码
    • 图片
  • 合并
  • 打包
  • 自动化测试
  • mock 接口调试

第三阶段:JS/CSS模块化开发

张云龙:分治、分治、分治

  • AMD
  • CommonJS
  • UMD
  • ES6 Module
  • ……

第四阶段:组件化开发与资源管理

核心目的:提高开发效率 & 兼顾运行性能

  • 分治、解耦、自由组合、就近维护
  • Vue.js 组件化开发
    • 抽象业务逻辑组件
      • 组合基础 UI 组件形成业务组件
      • 独立编写业务相关组件
      • ……
    • 定制基础 UI 组件库
      • 轮播图组件
      • 弹窗组件
      • ……
  • 资源管理

项目技术选型

理性、客观、避免偏见

  • 预计投入
    • 开发资源
      • 时间
      • 人手
      • 技术储备
    • 项目资源
      • 沟通成本
      • 设计文档、功能文档、产品原型
      • 后端接口文档
      • 项目排期
    • 产品资源
      • 用户群体
        • 浏览器兼容性
        • SEO 问题
  • 期望回报
    • 开发人员自我成长
    • 公司技术栈
    • 开发效率
    • 可维护性
    • 性能、稳定性
    • 易于测试
    • 易于把控项目周期
  • 应急预案
    • 兼容方案
    • 回退方案
    • A / B Test
    • 渐进增强
    • Plan B

造轮子

要么站在巨人的肩膀上,要么自己成为巨人

未完待续……

  • UI 组件库
  • 前端工具
  • 前端微服务
  • 前端框架
    • (以下内容是 XX 的 YY 内容)
    • 学习优秀框架源码
    • 仿写核心内容
    • 掌握山寨一个框架的套路
    • 发现问题
    • 具备扎实的前端基础 + 运气 + 灵感
    • 解决问题

版本规划

本文会在 GitHub 上持续维护,欢迎大家提 issue ~

地址是:https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-front-end-summary.md

v x.x.x

  • 更新 造轮子
  • 考虑翻译成英文?
  • 加入重要性评分功能
    • 引导目前阶段应该掌握哪些
    • 分为:初级、中级、高级

v 0.0.3 内容迭代

  • 更新 编程通用
    • 条目更新
  • 更新 JavaScript
  • 更新 前端实践
    • 新增引导语
  • 更新支付宝图标、微信图标……

===== 当前版本分割线 =====


v 0.0.2 内容迭代

  • 新增 后端基础
  • 新增 前端工程 第一阶段 jQuery、Vue.js 介绍
  • 新增 常见问题
  • 更新 前言
  • 更新 网络基础
  • 更新 学习型项目

致谢

  1. 前端工程 —— 基础篇 by 张云龙
  2. 从达标到卓越 —— API 设计之道 by 法海@淘宝前端团队
  3. The Modern JavaScript Tutorial by Ilya Kantor
  4. jQuery 1.4 中文文档 by 张鑫旭
  5. MDN Web 开发 // 这里有个小彩蛋,这个页面右上角有某 XX

联系方式

欢迎联系我讨论本文的不足、问题或者意见。

可以在我的 GitHub 主页上找到我的联系方式

亦可关注我的微信公众号:清风迅来

清风迅来

结语

作为一个老菜鸟,我只是知识的搬运工

本文大多讨论的是有哪些知识点(what),至于如何学习与应用这些知识点(how & why),敬请期待我之后的一系列文章,目前已完成一些雏形,仅供试阅:

感谢您一路看到这里,欢迎点击阅读原文在我的博客上进行留言一同探讨。(小透明表示公众号至今未开通留言功能……)

若有帮助,尽情打赏!^_^

ps: 好像图片有点大=。=

如果有帮助,欢迎打赏~如果有帮助,欢迎打赏~

许可

MIT

TECH × 大学路 第二期小结(和尤大合影了!)

内心非常excited


上线了组织的一场小型技术交流会,地点就在大学路,真的离公司好近好近好近。(听完讲座还可以回公司加个班,完美)
全英文的演讲非常有趣(非常庆幸自己最近沉迷翻译技术文)
特地早到坐在最前排,近距离和尤大接触还合照了~ 迷弟心愿达成√

下面说说技术小结,毕竟全英文演讲,很可能我理解错了哈哈哈哈,如有错误望指正~
这次有三个演讲,第一个演讲是一个德国小哥,聊了聊V8引擎的工作原理,包括JS API 调用后经历哪些过程(例如:console.log()),pre-parse 和 full-parse 的区别,以及如何利用立即执行函数提升性能(避免 pre-parse?)?

另外花了较多篇幅讲了内存分配,并提到几个优化内存分配的方法或者说一些避免额外内存开销的原则:

比如:同一类型对象,应该保持相同的属性,避免不同属性:

//  good
a.prop1;
b.prop1;

// bad: extra memory allocation for that
a.prop1;
b.prop1, b.prop2;

另外还介绍了几种不同数据结构的内存使用量,包括对象,数组,也提到了在数组中,尽量保持数组元素类型一致,可以优化内存分配。

原始例子:[1,2,3],3个基本类型,假设占据3单位内存

反面例子:[1,2,”abc”],在内存中,此处1,2会被隐式转为 { num : 1 },{ num : 2 },不再是基本类型而是复杂类型?而 “abc” 此时同样也是引用类型。这样会大大增加内存的开销。

so,简而言之就是涨姿势了。

 

第二位演讲者是strikingly的创始人郭达峰,主要议题是介绍了几次 react conf 的心得体会。

2015 React Conf

  • flux,flux,flux,flux,flux; // 大会重点讨论 flux
  • Redux;  // 有人提出了 redux
    • hotreload
    • time travel
    • functional
  • css in js;
  • GraphQL;
  • React as the UI virtual machines.

2016 React Conf

  • redux,redux,redux,redux,redux; // 今年轮到 redux 成了焦点
  • react native; // 有人提出 RN
  • more GraphQL // 更多的人讨论 GraphQL

2017 React Conf

  • performance:
    • react fiber
      •  reconciliation
      • Priority Scheduling 优先级调度
    • react 16
    • SSR
    • streaming,rakt(leaf,preserve)
  • pollishing tools:
    • create-react-app
    • Jest // 2年前一般般的测试工具,现在咸鱼翻身了:)
      • fast,
      • snapshot testing,
      • nice interactive CLI
  • js fatigue
  • mature community
  • AOT (gatsby, svelte,prepack)
    • less runtime cost,
    • less framework,
    • more build time cost

以及提到未来的js可能的方向:

in other languages

  • Reason:OCaml
  • Closure script:Closure
  • Web Assembly

XX注:关于 React Fiber ,突然觉得很像是平时开发团队的项目管理模式。每周五分配任务A、任务B、任务C,按优先级一个个完成。假如周一还在做任务A的时候,突然来了一个临时的老板级紧急需求任务D,那么就先把任务D安排到任务A前面……

最后是尤大…前端界的颜值担当
首先介绍了Vue 受哪些启发

  • Braid
  • web components
  • Ractive

然后是vue单文件组件实现原理,

先讲了 template,script,style 分别是如何解析,然后介绍了这三者是如何合在一起构成一个组件的。

另外提到了 hot reload 的注意事项,script 层面由于 state 的问题,需要整个component 全部 reload,避免副作用?

最后还提及一个等式:

Standard source format + extension compilation pipeline = evolution with less churn…

后面就是问答环节,印象比较深的一个按业务级切分文件,某个业务涉及到的文件(style,js,template,lib)组织在一起

尤大也提到希望有一个比 Vuex 或者 Redux 更轻量的状态管理工具?

另外尤大又提到了,技术方案,必须要结合实际问题,结合真实场景。

引用一下前几天尤大的知乎 live 的总结:

总结一下吧,我们聊了很多东西,可能比较杂,但我希望大家发现其中一些共性的东西:技术方案都是先有问题,再有思路,同时伴随着取舍。在选择衡量技术的时候,尽量去思考这个技术背后是在解决什么问题,它做了怎样的取舍。这样一方面可以帮助我们更好的理解和使用这些技术,也为以后哪天你遇到业务中的特殊情况,需要自己做方案的时候打好基础。

以上,可能有一些内容理解有误~ 望大家指正哈~ 多谢~ ……

最后再次感谢strikingly这么棒的一次分享活动,干货满满。

其实我还是蛮期待平时可以多交流交流, 大神就在离公司那么近的地方~~~

吃土小2叉

2017年6月3日21:31:26