前端开发知识点整理

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

前端开发实习生培养体系的探索:前端开发实习生织梦计划

前端开发实习生培养体系的探索:前端开发实习生织梦计划 v 0.1.0

谨以此名称『织梦』致敬 15 年前在初中第一次接触“前端”时用的编辑器: Dreamweaver

前言:

由于意识到目前的前端团队趋于稳定,可以适当加入一些实习生为团队注入活力。于是这段时间主动积累了一些相关经验,决定就前端技术团队的实习生培养这一主题,进行概念梳理以及雏形规划,顺便文末整理了一些优质学习资料和学习社群。另外,受限于 XX 的前端水平只有中级左右,文中对知识体系的整理可能不够深入和全面,也欢迎大家提提建议!

XX 的价值观 —— 80%+ 完美主义:当意识到重要性的时候,就应该充分利用已有资源,做到当前迭代的最好状态,或者至少是最好状态的 80%

强烈推荐: 姬光大佬的 gitchat《怎样实习才能成长最快》,非常感谢姬光大佬的这篇文章

注意:

此版本未经过任何实践!有待验证,仅供参考。

此版本未经过任何实践!有待验证,仅供参考。

此版本未经过任何实践!有待验证,仅供参考。

设定

定位(角色)、要求(输入)、愿景(输出)

以某 MMORPG 游戏为参考系,结合实习生系统(实习荣耀??),分别描述主要角色的定位、要求(输入)、愿景(输出)

尝试站在不同角色,不同角度思考各种问题,并简要概括

公司

定位:游戏世界

要求:

  • 实习薪资、下午茶(补给、金币、回血、回蓝)
  • 提供办公设备(游戏装备)
  • 公司氛围(buff、赠送 VIP 会员)
  • 公司文化(mutation @elona)
  • 公司理念、愿景(我司:减法新生活~)

愿景:

  • 实习生 => 公司
    • 树立、传播公司良好形象
    • 公司文化的传承
  • 公司 => 实习生
    • 公司文化的影响
    • 物质

业务

定位:游戏任务

要求:

  • 安排合适的业务任务(游戏主线任务)
  • 鼓励发现、提出业务问题(游戏支线任务)

愿景:

  • 实习生 => 业务
    • 提出业务的改进意见
    • 不强求解决业务问题,但如果能,再好不过。
  • 业务 => 实习生
    • 了解公司业务

团队

定位:NPCs、可爱的小姐姐们、帅气的大叔们(雾

要求:

  • 交流(提供任务线索)
  • 知识点、概念指点(buff、治疗)
  • 学习方向引导(buff、T)

愿景:

  • 实习生 => 团队
    • 沉淀团队技术、整理文档(经验包)
    • 储备新鲜血液、给团队注入活力(欢迎新 dalao……)
    • 打造技术学习小社区(战队、公会)
  • 团队 => 实习生
    • 熟悉团队开发模式(通用技能)
    • 团队技术知识库 wiki(各类技能书、经验包)

导师

定位:新手村村民(头上带问号的?王者农药主界面右下角的妲己?)

要求:

  • 理性维度
    • 技术指导、方法指导(讲清楚的程度、通通透透)
    • 善于观察(了解实习生的长处与短板)
    • 客观评估:对事不对人
    • 代价:额外占用时间(蛤?-1s)
  • 感性维度
    • 真诚待人
    • 认真负责
    • 谦虚谨慎
    • 乐于助人
    • 充分沟通
    • 忍耐能力

愿景:

  • 实习生 => 导师:
    • 成就感
    • 教学相长:基础知识梳理、深入理解、剖析、总结(经验包)
    • 沟通能力(带团能力)
    • 团队贡献积分(DKP)
  • 导师 => 实习生
    • 个人成长
      • 知识、技能(经验、技能)
      • 学习方向、职业规划(职业进阶路线)
    • 人脉(游戏好友)
    • 激励(buff)
    • 评估(战斗力估算?游戏解说???)

实习生

XX 注:人无完人,对于小公司而言,千里马难觅。要善于挖掘实习生的亮点,借助团队这个小社区引导实习生各方面成长。

定位:勇者

要求:

  • 理性维度 (能力 ability)
    • 学习能力
      • 知识记录、梳理、总结、抽象
      • 学习方法
      • 学习态度
    • 解决问题能力
      • 提问技巧
      • 思考、针对性练习、反思
    • 自我管理 & 效率
      • 碎片时间
      • 专注
      • 能量管理
    • 业务能力
      • 负责、谨慎、细心
  • 感性维度(特质 traits)
    • 心态、自信、耐心、不浮躁
    • 认真、积极、主动
    • 沟通能力
    • 友善、虚心、正直

愿景:

  • 实习生 A => 实习生 B
    • 竞争(排行榜)
    • 协作(队友、基友)
  • 实习生 A <=> 实习生 A
    • 个人成长(经验、技能、职业进阶选择)
    • 个人经历(成就、称号)

监督人

定位:新手村村长(隐藏 BOSS?大龙???)

要求:

  • 理性维度
    • 中立、客观
    • 观察力
  • 感性维度
    • 包容但不偏袒

愿景

  • ???

方案

总共招 1~2 个实习生

人员安排

1 监督人: XX 1 导师:老员工(2 年+经验) 1~2 实习生

实习生任务列表

师傅领进门,修行靠个人

注:实际安排的任务因人而异,可选择性增加或加强……:)

任务标准:SMART 任务 + 主动汇报

  • 主动汇报
    • 每日日报:产出(工作内容)、收获(知识)
      • 主动、认真
      • 审视、自省、回顾
      • 规范
    • 每周周报
      • 一周总结
  • SMART 任务
    • 【SMART】
  • 隐藏任务
    • GitHub
      • 鼓励分享、鼓励创新

任务内容

  • 个人成长线(高经验值主线)
    • 综合
      • 【SMART】博客文章(每周一篇)
      • 优秀源码学习
        • Bootstrap
        • jQuery
        • Element UI
        • Vue.js、lodash
    • 实践
      • 学习型项目
        • 【SMART】phodal growth 系列
        • 【SMART】导师自定义任务
    • 理论
      • 通用技能
        • 《暗时间》
        • 《On Managing Yourself 自我发现与重塑》
        • ……
      • 专业技能
        • 相关工具
        • 推荐书单
        • 编程基础
          • 软件构建
            • 《代码大全 2》
          • 算法
            • 【SMART】leetcode 刷题
          • 设计模式
            • 《Head First 设计模式》
          • 编码规范
            • 迭代 wiki 的“编码规范”
        • 前端理论
          • HTML、CSS、Javascript
            • 《CSS 揭秘》、《Javascript 高级程序设计》
            • 【SMART】freecodecamp、codewar 练习题
            • MDN 文档
          • Vue.js
            • Vue.js 官方文档
          • 前端工程、组件化、前端服务化
      • 前端应用
        • 团队相关
        • 业务相关项目
          • 根据实习生实际情况,安排合适的任务量、任务复杂度
  • 团队贡献线(高 DKP 支线)
    • 综合
      • 协作
        • 与前端
        • 与后端
        • 与测试
        • 与设计师
        • 与产品
    • 理论
      • 更新团队知识库 wiki
        • 维护团队插件、组件说明文档
        • 经验分享、bug 记录……
      • 撰写团队技术博客文章
      • 参与每周前端组周会
    • 实践
      • 学习型项目(团队 wiki 站点、团队技术博客站点维护迭代等)
  • 业务线(高 DKP 支线)
    • 综合
      • 发现、提出业务问题,尝试解决
    • 实践
      • 【SMART】解决导师布置的业务需求
    • 理论
      • 梳理业务流程图
      • 梳理网站功能

导师任务列表

  • 传道
    • 前端的 what、why、how
    • 开阔技术视野
    • 解决问题的套路
    • 愿景(vision)
  • 授业
    • 介绍团队
    • 工作流程
    • 学习方法
    • 文档说明
    • 安排工作
  • 解惑
    • 告知所以然
    • (若导师无法解答,很正常,毕竟闻道有先后、术业有专攻。重点在于)
  • 评估
    • 认真审查实习生的 ① 日报 ② 周报 ③ 文档、代码、文章并积极、客观反馈
    • 定期与实习生交流
      • 主动挖掘实习生存在的问题,予以引导
      • 主动挖掘实习生的长处,并加以培养
  • 激励
    • 适当的团队活动
    • 正面引导
    • 不要吝啬表扬
  • 负责
    • 对实习生的代码负责
      • Code Review
      • 追踪代码质量、产品上线后的质量
      • 跟踪项目进度,把控风险
    • 对实习生负责
      • 真诚
      • 正面引导
    • 对自己负责
      • 不断提升自己的姿势水平
      • 共同成长

举例

背景

1 个本科大三暑期实习生,2 个月的工作时长,每周来 4 天。

已知

  • 实习生
    • 协作 专业能力 无工作经历
    • 专业能力 能使用 jQuery 较为熟练地写带有简单交互的静态页面
    • 专业能力 只照官网写过 Vue.js demo,没有写过具体项目
    • 协作 代码不规范
    • 专业能力 会一些 PHP
    • 通用能力 性格偏外向、求知欲强、不够细心、略微有点浮躁
  • 任务痛点
    • 团队 团队编码规范不完善、未统一
    • 团队 团队的知识库不完善
      • 缺少组件库说明文档(Vue.js 组件库,总共约 20 个 UI 组件)
      • 缺少公共方法说明文档
    • 团队 项目代码注释不完善
    • 业务 偶尔有紧急的市场活动小需求插入
    • 公司 培养储备人才

方案

注:方案中,专业能力 表示此任务对于 专业能力 有要求或能带来提高,即任务目的(why)

第一个月

  • 整理团队组件库使用说明文档(每周至少完成 1+ 个组件说明文档;最坏情况在指导下可能需要 24 天,熟悉后预计工时 0.52 天)
    • 专业能力 阅读组件源码
    • => 通用能力 学习能力 技术视野 导师指导(最坏情况在指导下可能需要 12 天,熟悉后预计工时 00.5 天)
    • 代码规范 专业能力找出源码中难以阅读、理解的代码块
    • 文档沉淀 代码规范 编写说明文档
    • => 通用能力 学习能力 技术视野 导师审查文档 => 反馈
  • 应对紧急的市场活动页面(预计工时 1 天)
    • 业务需求 编写静态页面
    • => 通用能力 学习能力 技术视野 导师审查代码 => 反馈
  • 【待定】团队知识库站点搭建(预计总工期 2 个月,每周安排 1~2 个工作日开发)
    • 团队 专业能力 代码编写
  • 阅读推荐资料
    • 专业能力 Vue.js 官方文档阅读、《某书》
    • => 通用能力 学习能力 导师指导答疑
  • 每天日报 (预计工时 0.5~1 小时,合计 0.5 天)
    • 通用能力 专业能力 知识收获
    • 通用能力 专业能力 工作内容
  • 每周周报(预计工时 1~2 小时,合计 0.25 天)
    • 通用能力``专业能力 知识收获
    • 通用能力 专业能力 工作内容

未完待续……

推荐资料

以下仅收集 XX 读过的资料或者经常参与讨论的社群。也欢迎大家推荐~

书单

通用能力

《暗时间》、《On Managing Yourself 自我发现与重塑》

专业能力

《代码大全 2》 《CSS 揭秘》 《Javascript 高级程序设计》 《Head First 设计模式》

博客

学习社群

引用庄表伟大佬的一段话……

求知欲不能教授 但可传染 学习能力无从教 却能修炼

  • 群(吹水少、禁广告)
    • 豪情大佬 QQ 群
    • 前端之巅微信群
  • 组织
  • gitchat 、知乎 live 活跃大神
    • 专业技能
      • 姬光、hax、小爝、justjavac、phodal……
    • 通用技能
      • Lachel、Warfalcon……
  • 小密圈
    • T 型学院
    • 前端早读课
    • 小胡子哥
  • 微信公众号
    • 前端早读课(起床第一件事……看前端早读课……肯定有更新……)
    • 前端大全
    • ……
  • github 学习项目

参考资料

  • 强烈推荐:姬光大佬 gitchat《怎样实习才能成长最快》
  • 姬光大佬 gitchat《老司机导师陪你聊聊带新人的那些“套路”》
  • ZoomQuite 大佬 gitchat 《初学者如何通过技术社区加速成长?》
  • 刘未鹏 《暗时间》

版本规划

本文和上次写的《前端开发负责人修炼指北》一样,会在 GitHub 上持续维护,欢迎大家提 issue ~

本文地址是:https://github.com/xunge0613/front-end-growth/blob/master/team-growth/weave-dreams-for-interns.md

v 0.1.1

  • 完善举例
  • 导师任务优化
    • 加入【SMART】 类型任务
  • 完善监督人模块内容
    • 增加监督人任务
    • 完善监督人描述
  • 推荐资料更新
  • 考虑是否要在后续版本更新“公司”、“业务”相关内容

结语

v 0.1.0 版本主要是理论的规划,由于自己 80%+ 的完美主义特质,希望能借此规划团队的实习生体系,并不断优化,对团队的实习生负责,对团队负责。也希望这篇文章能给大家带来一些思考。接下来会在实践的过程中思考、反思,不断迭代该计划。

最后,以《云图》全书最后一段结尾:

“要和人性的九头蛇进行斗争的人必须以经受巨大的痛苦为代价,而且他的家人必须跟他一起为此付出代价!不见棺材不落泪,你要明白,你生命的价值不过像是无边无垠的海洋里的一滴水!”

“但是如果没有众多的水滴,哪会有海洋呢?” *“What is any ocean but a multitude of drops?” *

鸣谢

感谢姬光大佬的两篇文章…… 强烈建议大家读一读……

感谢提出宝贵意见的大伙伴们~

感谢大家抽出时间来围观我这篇文章……

感谢马克飞象这款性价比超高的记录工具~

最后,感谢自己~

如果有帮助,欢迎打赏~

提高阅读效率的技巧:提问式导读、引导式目录、引导者作者

纯英文读书会|《On Managing Yourself》,5.29

首先感谢哈比同学推荐的这个活动,这篇文章里有一大段关于《On Managing Yourself 自我发现与重塑》的导读,在回答了一半导读问题,之后在洗澡的过程中,突然来了灵感,以下是脑洞时间,见笑了。

就技术类、科普类书籍来说,如果内容质量高,为了方便读者理解,那么该书作者最好是一个好的“引导者”,并且有一个好的引导式目录,或者有一篇好的提问式导读。

关于好的目录,私以为一级目录至少需要蕴含 how 和 why,或者具有一定抽象,而不单单只有 what。借助于 how 和 why ,那么能帮助读者更快理解相关知识的作用、目的及原理。举个例子:《代码大全 2》的第一部分、第二部分目录的标题是:打好基础、创建高质量的代码。这样读者可以更有选择性地并且带着目的性地去了解相关内容。

【划重点】关于好的导读,而我更欣赏“提问式导读”,就像是小时候做英语考卷的阅读理解题,先快速记下全部问题的关键点,若能当场解决就直接做掉,若不能,就带着问题(目的)去阅读文章,这样可以大大提高阅读的速度。就如同这篇文章中,有十分详尽的导读问题。虽然还没看这本书,但凭感觉认为回答了这些问题后,就好像是换位思考,将自己置于作者的角度,去进行思考,同时也深刻了解了书籍的范畴、关键点、核心内容。这样再去阅读这本书可以大大提升自己的阅读效率并且加深理解和记忆。

而为了做出如此详尽的“提问式导读”,那么必然也需要对原文进行深入的理解,或者说自身具有较高的抽象能力,对于一本高质量的书,写下这些问题的过程也是十分有价值的。

以上,一些脑洞。非常兴奋,感觉发现了如何阅读一本好书的新技巧。(前提是有高质量的“提问式导读”)

 

from 吃土小2叉

2017-05-29

 

 

Growth CSS

Growth CSS

@(Front End Growth)[前端开发, Vue.js, JavaScript, github]


Front End Growth 系列文章。记录 XX 前端成长过程的点滴。仅供参考,也许不具备通用性,请结合自身实际,切勿强行模仿~
Growth CSS 介绍了 XX 对 CSS 的认知以及学习、应用上的建议。


What is CSS

是一门面向交互设计、视觉设计的声明式语言

  • 视觉
    • 布局 (display、margin、padding、width)
    • 字体排印 (font、text、color)
    • 装饰 (background、box-shadow、gradiant)
    • 动画 (animation、transistion、transform)
  • 交互
    • 反馈 (:hover, :visited)
    • 引导 (position: fixed)
    • 互动 (:hover .show)

也是一门需要一些技巧或工具来优雅编码的伪 OO 语言

  • 面向对象
    • 继承 .parent{styleA: xxx;} .child { styleA: inherit; } / .parent() {} .child { .parent(); }
    • 扩展 .classA.classB / .classA() {} .classB() {} .classC() {} .classFinal {.classA(); .classC(); style:xxx;}
    • 重载 .classA.classB .classA { xx: oo} .classB { xx: xx}
  • 代码规范
  • 代码复用 DRY (Less)
  • BEM
  • 变量、函数命名
  • 权重控制
  • 语义性

How I learn CSS

  • 概念(flexbox 布局)
  • demo(动手调试一下所有 flex 属性)
  • 应用(使用所学技术,实现一个页面 or 模块 or 方案)
  • 融汇(与已有知识体系进行关联,梳理知识、归纳、分类)
  • 贯通(结合已有的相关联知识点,头脑风暴,例如:实现垂直居中的 N 种不同方案 )
  • 初心(根本目的是为了实现视觉效果,所以心中永远有一个当前场景最合适方案)

How I Code CSS

Consideration

  • 视觉还原度
  • 兼容性
  • 性能
  • 开发效率
  • 可维护性
    • 语义性
    • 权重控制
    • 嵌套层级
  • 可控颗粒度
  • 调试技巧

CSS Code Standards

BEM

Less

Learning Tips

毕竟 CSS 是一门“面向视觉”的语言,所以学习资料尽量以图像为主,可以加深记忆效果。

@Design

与设计师的沟通

设计理念

一致性 可用性 易用性 反馈

这里不一定实时更新,可以关注 github 地址获取最新内容:

https://github.com/xunge0613/front-end-growth/blob/master/tech-growth/growth-css.md

【开源】梦里和现实中语言表达、组织的方式是否一样?

现象:梦里自己说话是脱口成章,现实自己说话却言语迟钝

分析:

① 是否是因为梦里能意识到自己控制的那个人时,已经处于意识和半意识之间,是直接由语感完成语言组织和表达?而此时的语言能力最好?
② 还是说梦中的语言只是,只是对于梦的呈现,是控制着自己说出本就注定要说出来的话?

YY :如果将上述情况通过某种途径(比如:催眠?)应用到改善语言能力中,是否会有效果呢?

以上,昨晚做梦有感……

清风迅来
Dalston Xu
2012年6月24日

【开源】【AI】如何在互联网上进化出生命?

如何在互联网上进化出生命?

前几日,遇到一个问题:如何在互联网上进化出生命?
爱好胡思乱想的我,就开始胡思乱想了……

听说这个想法,我的第一反应是:病毒…… 然后又想到了“网络爬虫”。但两者终究都属于带有一定智能的计算机程序,而称不上一种生命。
之后我又觉得是否存在这样一个模型:
① 外部世界
② 计算机硬件
③ 计算机内部0101信息 ,
其中 ③ 中那些信息有一种能力,使其可以脱离获得物理实体,而脱离计算机硬件这种介质进入外部世界,当接受到某种特定信号时,可以再次通过某个与计算机硬件的接口进入,再次转化为信息流……(为啥我写到最后越来越觉得这像一个U盘 = =||| )
此外,最近看了一篇文章对LISP语言的介绍,http://coolshell.cn/articles/7526.html
说LISP语言是一种了一种定义语言的语言:元语言(Meta Language),可以自定义语义,也就相当于创造了一门语言。我又搜了些资料,发现这门语言的确是目前研究人工智能所用的编程语言。问题是LISP终究还是人类所创造的,假设计算机能够创造一门语言,那么.我想那样计算机离“智能”又进了一步了。
以上是一个没有学过AI课程、书籍的菜鸟的胡思乱想……我严重怀疑我偏题了……而且越写越觉得自己的想法不靠谱……
另:写完以上的文字,我又有点疑惑,到底什么才是生命?什么才是生命的本质

欢迎各路大神一次探讨探讨~~ 随意交流~


Dalston
2012年6月8日

【开源】那些给程序猿洗脑的语录……

一时兴起,整出此文章,想以此洗脑,并且锻炼自己的翻译能力=v=

原文:When you get bored, click something. If that doesn’t help, then turn off your computer immediately.

出处:Douglas Crockford

拙译:无聊时,随便点。还是无聊?果断关机。

原文:用正确的方法,做有用的研究!

出处:语音识别基本原理介绍 杜俊

拙译:Research for good purpose , on right way.


原文:以总结分享为荣 , 以跪求其解为耻

出处:Pythonic八荣八耻

拙译:Do Summarize & Share , and Do NOT knee & beg for solutions.

原文:把时髦的技术挂在嘴边,还不如把过时的技术记在心里

出处:请不要做浮躁的人

拙译:Better keep outmoded techniques in mind , than gorgeous ones over mouth.