《你真的会切图吗》
切图概念
前端职责
与产品经理和交互、视觉设计师协作，根据需求文档、线框图、设计稿完成页面制作（切图部分）；
与后台工程师协作，完成数据交互、动态信息展现和用户的互动
切图定义
- 设计思路的理解和还原
- 页面模块化制作的预演
切图理论储备
常见图片格式
设备像素比
devicePixelRatio = 物理像素 / dips(device-independent像素，设备无关的像素)，常见@1x，@2x，@3x
切图实践要领
心中有数
需求定位、结果模块、资源细分、 疑难杂症
大刀阔斧
-
工欲善其事，必先利其器：硬件舍得、软件恰当、工具够用
-
图层的合理运用：选择、分组、复制
精雕细磨
压缩图片体积、图片大小范围、仿色杂边处理、雪碧图合并
simple than simple
不切图、让他人切图、自动化切图
《HTML构建之法》
HTML释义
HTML与XHTML、结构与表现分离、使用语义化标签
语义化
What：用合理的HTML标签标记相应的内容。
Why：可用性、易用性、可维护、SEO等
How：认识HTML标签、理解标签的意义
HTML5
新特性
- Canvas 元素
- Video 、 Audio 元素
- 本地离线存储
- 新标签： article、footer、header、nav、section
- 新表单： calendar、date、time、email、url、search
模块化
可复用性、方便维护、利于协作
BEM：B -> 块（Block）、E -> 元素 （Element）、M -> 修饰符（Modifier）
最佳实践
- 书写规范：小写、闭合
- 合理使用标签：语义化、模块化
- 声明正确的文档类型
- 少使用框架
- 结构、表现、行为分离：不写内联样式
学习提升
- 多看手册（W3School）
- 分享文章（UED、个人博客、前端社区）
- 查看元素（Chrome、Firefox）
- 告别随意（实践出真知...）
《CSS基础》
CSS概念
CSS基本概念、引入方式、CSS规则
CSS选择器
CSS基本选择器：标记选择器、类别选择器、ID选择器、伪类选择器、伪元素选择器
选择器优先级：从高到低：
- 使用了 !important声明的规则。
- 内嵌在 HTML 元素的 style属性里面的声明。
- 使用了 ID 选择器的规则。
- 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
- 使用了元素选择器的规则。
- 只包含一个通用选择器的规则。
CSS继承：继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。一般文本样式和列表样式可继承。
CSS盒模型
CSS内定义的宽（width）和高（height），指的是填充以内的内容范围
实际宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距
实际高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距
CSS定位和布局
常规流(Normal Flow):static position、relative position
浮动(Float)
绝对定位(Absolute Position):absolute position、fixed position
CSS3介绍
- 文字渲染
- 边框和颜色
- 渐变效果
- 阴影和反射
- 变换和动画
- 多列布局
浏览器兼容性
兼容性查询：http://caniuse.com/
条件注释、CSS Hack、Javascript：http://browserhacks.com/
CSS预处理器
- Less、Sass、Stylus
- 变量、嵌套、混入(Mixin)、继承、函数和操作符
- 用户根据这些语法定义自己的样式规则，最终会通过解析器生成对应的 CSS 文件
《JavaScript Rocks》
JS能做些什么？
面试时都问些什么？
this、原型、作用域、函数各种方式定义
介绍
ECMAScript介绍、版本历史
JS宿主环境、Web解析引擎
特性
动态语言、松散类型、函数特征、原型
曙光
语言改善：ES6 / ES7、CoffeeScript、TypeScript
开发方式：React、AngularJS, Meteor等
跨平台：React-native
How to start
多造轮子、和优秀的人为伍、读万卷书、行万里路
《前端开发实践》
前端开发历史演变
系统在变，浏览器在变，终端在变，技术在变
对前端的要求越来越高，前端发挥的空间越来越大
前端开发流程
需求沟通
深入理解产品，了解需求，有利于后期排期
风险控制，与需求方确认详细交互细节，避免后期需求变更
提出自己专业性的意见建议，对产品负责，对自己负责
技术选型
- 基础库 ： jQuery、Zepto、Lodash、Angulajs、Backbone、Ember、React
- UI框架 ： Bootstrap、jQuery UI、Foundation
- 样式管理 ： LESS、SASS、Stylus
- 模块管理 ： SeaJS、RequireJS
- 模板选择 ： Smarty、Handlebars、Jade
- 构建工具 : NODE、Grunt、Gulp、F.I.S
- 包管理工具 ： Bower、SPM、Component
拥抱开源技术 、使用成熟稳定的产品、社区活跃， 文档丰富、功能、性能维度、可维护性、可扩展、团队学习成本、
规范意义
统一全局，促进团队合作、降低维护成本、提高代码的可读性、提升团队代码质量、降低缺陷引入机会、有利于知识传递
前后端分离意义
工作依赖关系解耦、让擅长的人做擅长的事、职责分工明确、修改维护方便
前端自动化处理
- 编译预处理语言比如LESS、SASS、CoffeScript
- 代码美化、压缩、合并、语法检查
- 静态资源版本号管理
- 图片压缩
- 图片自动合并
前端调试
chrome为主
前端优化
抛开背景谈优化都是耍流氓
可维护性为主，当性能成为问题的时候才谈优化
前端基本优化原则：降低HTTP请求数、降低文件大小、加载顺序
前端的发展
ATWOOD定律：任何可以使用JavaScript来编写的应用，最终会由JavaScript编写
扩展：如果一个软件可以被 JavaScript 实现，这个软件就一定会被 JavaScript 的实现版所取代——那个金科玉律的马云（反正大家也不知道真假）
浏览器、服务器、移动端、游戏端，全方位发展
前端最好的时代已经到来
《前端无线开发实践》
- viewport介绍
- 响应式介绍
- Hybird混合模式介绍
- 移动端事件介绍
- 移动端调试