first do it, then do it right, then do it better.

子曰：offsetWidth、clientWidth、scrollWidth 区分

简介

offsetWidth = border+padding+width+scrollbar
clientWidth = padding+width
scrollWidth = padding+width >= clientWidth

用例

前端开发工程师在根据设计师给定的标注进行设计时，通常会发现，字体通常是是这种样式

1
2
3
4
5
6

font-family: PingFang-SC-Medium;
font-size: 14px;
color: #333333;
letter-spacing: 0;
text-align: justify;
line-height: 22px;

在开发中，需要根据font-family 来使用font-weight 来进行替换，替换规则如下：

1
2
3
4
5
6
7
8
9

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

而下面是根据上述规则进行的总结，因为设计师使用苹果系统，所以得出了如下替换规则：

1
2
3
4

PingFangSC-Regular - 400
PingFang-SC-Medium - 500
PingFangSC-Semibold - 600
PingFang-SC-Bold - 700

字体粗细：font-weight 属性

font-weight 属性执行字体中字形的重量，这取决于黑度等级或笔画粗细。
其值的意义如下：
100至900
这些有序排列中的每个值，表示至少与其起身拥有相同黑度的重量。其大致符合下列通用重量名称：

1
2
3
4
5
6
7
8
9

100 - Thin
200 - Extra Light (Ultra Light)
300 - Light
400 - Normal
500 - Medium
600 - Semi Bold (Demi Bold)
700 - Bold
800 - Extra Bold (Ultra Bold)
900 - Black (Heavy)

normal
与400 相同。
bold
与700 相同。
bolder
指定外观的重量大于继承的值。
lighter
指定外观的重量小于继承的值。

通常一个特定的字体家族仅包含少数的可用重量。若一个重量所指定的自行不存在，则应当使用相近重量的字形。通常，较重的重量会映射到更重的重量、较轻的重量会映射到更轻的重量。下面的例子展示了不同重量将使用的外观，灰色表示该重量的外观不存在、使用的是相近重量的字形：

值bolder 和lighter 表示其值相对于其父元素的重量。基于继承的重量值，其重量值，其重量通常是使用下表计算而得的。子元素将继承计算后的宽度，而不是值bolder 和lighter。

参考文档

1.CSS3字体模块 字体粗细font-weight 属性

子曰：前端技术的基石：浏览器

参考文档

1.protocol buffer 官网
2.Cocos2d-JS/Ajax用Protobuf与NodeJS/Java通信

子曰：安全三要素是什么？

下文是从《白帽子讲web安全》的读书笔记

CIA

安全三要素是安全的基本组成元素，分别是机密性（Confidentiality）、完整性（Integrity）、可用性（Availability），简称为CIA

机密性

机密性要求保护数据内容不能泄漏，加密是实现机密性要求的常见手段。

完整性

完整性则要求保护数据内容是完整、没有被篡改的。常见的保证一致性的技术手段是数字签名。

可用性

可用性要求保护资源是“随需而得”

其他

在拿权领域中，最基本的要素就是这三个，后来人们想扩充这些要素，增加了诸如可审计性、不可抵赖性等，但最最重要的还是以上三个要素。在设计安全方案时，也要以这三个要素为基本的出发点，去全面地思考所面对的问题。

参考文档

1.《白帽子讲web安全》1.5 安全三要素

子曰：一日一练-CSS BFC、IFC、GFC和FFC

0x00

FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

0x01

BFC(Block Formatting Contexts)直译为”块级格式化上下文”。Block Formatting Contexts 就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

0x02

IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。 同个ifc下的多个line box高度会不同。 IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

0x03

GFC(GridLayout Formatting Contexts)直译为”网格布局格式化上下文”，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

0x04

FFC(Flex Formatting Contexts)直译为”自适应格式化上下文”，display值为flex或者inline-flex的元素将会生成自适应容器（flex container），可惜这个牛逼的属性只有谷歌和火狐支持，不过在移动端也足够了，至少safari和chrome还是OK的，毕竟这俩在移动端才是王道

子曰：merge 使用

在工作协作开发中，使用git 进行版本管理，下面整理了使用git stash 的流程

流程

1.首先是在develop 分支上进行开发，对内容进行了修改，但是并没有进行提交，此时状态为：

1

git status

提示如下

1
2
3
4
5
6
7
8

On branch develop
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   aaa.txt

no changes added to commit (use "git add" and/or "git commit -a")

2.此时需要跳到master 分支上进行开发，但是你不想提交你现在正在进行的工作，所以你需要存在这些变更git stash

1

git stash

提示如下

1

Saved working directory and index state WIP on develop: 61b5a09 abb page

此时调用git status

1

git status

提示显示

1
2

On branch develop
nothing to commit, working tree clean

3.此时再切换到master 分支进行处理其他事务

1

git checkout master

处理完其他事务之后，进行提交

1
2
3

git add .
git commit -m 'some msg'
git push origin master

4.再次切换回develop 分支进行处理

1

git checkout develop

5.查看现在的存储列表

1

git stash list

提示如下

1

stash@{0}: WIP on develop: 61b5a09 abb page

6.重新应用储藏，同时立刻将其从堆栈中移走

1

git stash pop

提示如下

1
2
3
4
5
6
7
8
9

On branch develop
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   abb/aaa.txt

no changes added to commit (use "git add" and/or "git commit -a")
Dropped refs/stash@{0} (8a2838ea4ee8c037685f27922586388e49f3ec76)

现在就可以继续在之前的存储上进行开发了

子曰：非真即假

JavaScript 中Falsy 值

1.undefined
2.null
3.false
4.+0，-0，NaN
5.""

任何没有明确地存在于Falsy 列表中的东西都是truthy

参考文档

1.《你不懂JS：类型与语法》 第四章：强制转换

子曰：转载-深入响应式原理
这是位于Vue 中文文档上的介绍，需要多看几遍加深理解

关于本文：
原文：https://cn.vuejs.org/v2/guide/reactivity.html
作者：Vue.js 中文官网

深入响应式原理

现在是时候深入一下了！Vue 的一个最明显的特性就是其不太引人注意的响应式系统。数据模型仅仅是普通的JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以回避一些常见的问题。在这个章节，我们将进入一些Vue 响应式系统的底层的细节。

如果追踪变化

当你把一个普通的JavaScript 对象传给data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty 把这些属性全部转为getter/setter。Object.defineProperty 是ES5 中一个无法shim 的特性，这也就是为什么Vue 不支持IE8 以及更低版本浏览器的原因。

子曰：介绍npx：npm 包运行器

关于本文：
原文：https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b 俄语版
作者：@Kat Marchán

将npm 升级到最新版本npm@5.2.0 的人可能会注意到它会在通常的npm 旁边安装了一个新的二进制文件：npx。

npx 是一个工具，旨在帮助完善使用npm 注册表中的包的体验 – 同样地，npm 使得安装和管理托管在注册表上的依赖项变得非常容易，npx 使得使用CLI 工具和托管在注册表上的其他可执行文件变得容易。它大大简化了许多事情，直到现在，还需要一些普通npm 的仪式：

子曰：一日一练-网络 缓存最佳实践

关于本文：
原文：https://jakearchibald.com/2016/caching-best-practices/
作者：@Jake Archibald

正确地获得缓存会带来巨大的性能优势，节省带宽并降低服务器成本，但许多站点都会降低缓存，导致竞争条件导致相互依赖的资源不同步。

绝大多数最佳实践缓存属于以下两种模式之一：