腾讯2018年校园招聘即将开始，2019年毕业的同学欢迎自荐，有亲朋好友明年毕业的话也欢迎推荐。

微信支付今年招聘各个岗位的优秀人才，在这里你可以接触最前沿的互联网产品形态，可以学习和使用最先进的互联网技术，可以接触到和消费相关的各行各业。在这里你可以和优秀的同事们一起努力，让微信支付触达10亿微信用户，影响中国人的生活消费方式，让人们的生活更加便捷。

而且，微信支付即将入住腾讯公司新总部滨海大厦，腾讯滨海大厦靠近深圳湾公园和深圳湾体育中心，毗邻深圳生活娱乐中心海岸城，相信在这里的业余生活也将多姿多彩~~

深圳市政府对于新入深圳的毕业生有一定的租房和生活补贴，其中本科生 1.5 万，硕士 2.5 万，博士 3 万。虽然不是巨款但是简单买买买了~~

如果你有意来微信支付，请即刻发送简历给我!

当然，如果你有意腾讯的其它岗位也可以发简历给到我：

mienflying@gmail.com

请！注！意！4.1日前可获得内部推荐资格哦！

明天就要开抢 iPhone X 了，然而面对 iPhone X 这个奇葩的屏幕，你准备好了吗？

因为 iPhone X 的刘海设计，Web 在 iPhone X 横屏时，可能会有些问题：

1. 默认情况，iPhone X 会将页面填充到安全区域(safe area)，就像上面的图一样，一般情况下是没有问题的；
2. 但如果是全屏 Web App 就会有问题了，比如背景色和页面的契合程度之类的；
3. 有的 iOS app 内置 WKwebview 可能会为了避免一些bug，而采用统一的行为，就是禁用 iOS 11 自己的内容区域判断，从而让 H5 默认全屏，如下图：

解决方案

1. 默认全屏

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 

在 viewport 的 meta 属性中，添加 viewport-fit=cover 即可。

viewport-fit 默认值为 auto/contain，全屏值为cover，是不是感觉很熟悉？嗯，和 background-size 以及 object-fit 一样的。

2. 设置页面边距为安全区域边距

body{
    padding: 
        constant(safe-area-inset-top) 
        constant(safe-area-inset-right) 
        constant(safe-area-inset-bottom) 
        constant(safe-area-inset-left);  
}

嗯，constant() 以及 safe-area-inset-top safe-area-inset-right safe-area-inset-bottom safe-area-inset-left 是 iOS 11 webview 新增加的特性，专门用于应对刘海的。。。

当然，这里的padding只是用于匹配iPhone X默认的安全区域的，你可以设置任何值，不过建议要不小于默认的安全区域值。

当前版本，横屏时，各属性的值：

safe-area-inset-top = 0
safe-area-inset-right = 44px
safe-area-inset-bottom = 21px
safe-area-inset-left = 44px

竖屏时各值都是 0，但竖屏时需要特别留意 status-bar(44px) 和 home-indicator(34px)。

不是什么新知识，一个小技巧而已。

今天遇到一个项目中使用纯色图标的问题，用字体麻烦用图片low，所以就想直接用svg，毕竟只有一两个图标。

第一想法是用 DataURI，然后想到了之前 CSS-tricks 的文章，翻了下做下汇总：

• 不建议把 svg 转 base64 来用
• base64 本身浏览器解码也会消耗一定的资源
• svg 转 base64 后反而会变大

解决方案：

• 压缩 svg 文件，使用 SVGO 或者 SVGOMG
• 使用 DataURI 而不用 base64 ，DataURI 的用法是 data:[<mediatype>][;base64],<data> base64 只是声明 data 使用 base64 编码而已，非必须（via RFC 2397）
• 可以直接把 svg 代码用作 data，前提是进行 URL-safe 编码，可以通过 https://codepen.io/jakob-e/pen/doMoML 来完成这个倒也不难。

比如，前端观察的 logo 的 svg，sketch 导出后有 702 byte，svgo 压缩后是 292 byte，base64 转码后是 937 byte。

最后代码如下：

background-image: url("data:image/svg+xml,%3Csvg width='288' height='288' viewBox='0 0 288 288' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eqianduan logo%3C/title%3E%3Cpath d='M222 144v-6l-41-23v12l30.304 17L181 161v12l41-23v-6zm-144.304 0L108 127v-12l-41 23v12l41 23v-12l-30.304-17z' fill='%2318BC9C'/%3E%3C/svg%3E");

参考

• https://css-tricks.com/probably-dont-base64-svg/
• https://codepen.io/tigt/post/optimizing-svgs-in-data-uris

首届 < 腾讯Web前端大会 TFC 2017 /> 将于2017年6月24日在深圳召开，本次大会将是腾讯规模最大的Web前端盛会。主办方腾讯， 中国顶级互联网公司之一，创造了许多亿万海量用户级的优秀Web应用，积累了深厚的Web前端开发经验 。

大会讲师将会广邀国内外的前端知名大牛，他们有著名流行框架的作者、知名前端书籍的作者、Web工程化方面的权威等。其中还有部分讲师是从腾讯上千名前端工程师中精挑细选的优秀高级工程师，将为你带来最具实践价值、最接地气的前端开发经验分享，内容不仅涵盖Web新技术、Node.js、框架、工程化、 图形处理等前端前沿内容 ，还包含极致的性能优化、海量用户运营等具有腾讯前端特色的宝贵经验。

无论您是资深的前端大咖，还是初出茅庐的前端菜鸟，相信都可以通过本次大会获得非常有价值的帮助。

大会官方网站： http://tfc.alloyteam.com/
时间：2017年6月24日
地点：深圳福田区 CBD大中华广场 喜来登酒店 二楼会议厅

PS,还有鹅厂的舞团SOS女子组合和乐队的助兴表演，嗯，又有技术干货又有养眼妹纸，想想就觉得赏心悦目。

先看个例子:

console.log(a)
console.log(foo())
var a = 'hello world'

function foo() {
	console.log('foo')
}

估计大部分人早就对这种问题了如指掌了，输出结果也是脱口而出：

undefined
'foo'

请解释一下原因？

这不就是常说的 Hoisting 吗？

代码在执行的时候，其实是这个样子的：

function foo() {
  console.log('foo')
}
var a

console.log(a)
console.log(foo())

a = 'hello world'

是的，这样解释也可以，但是不够准确。如果仅仅理解到这个层面，而不把这里面涉及到的「执行上下文」(Execution Context, 下面简称 EC)这个概念弄明白，还是不能「知其所以然」。

首先需要澄清的一点是，像 C 和 Java 这类所谓的「静态语言」需要编译后才能运行，但其实 Javascript 一样也是有编译过程的，
只是处于一些限制，编译过程特别快(以微秒计)，以至于感觉上 Javascript 代码好像并没有经过编译。

当需要向别人描述一件事情的经过时，往往需要把事情的前因后果以及与其相关的场景预先说明一下。
类似，EC 就是一段代码涉及到的场景，在代码运行之前，js engine 会做一些变量内存分配，代码上下文关联的准备工作，这就是 EC。
EC 是 Javascript 引擎实现的一个内部机制，不能在代码中直接访问到。

对编程语言来说，给变量赋值，获取变量的值，是需要解决的基本问题，Javascript 当然也不例外。
EC 中会给变量分配一个存储空间，与之对应的数据结构称作 enviroment。

当程序流程需要从当前的 EC 进入另外一个和当前上下文无关的代码片段时，会创建一个新的 EC，并被推入栈中。这就是「执行上下文栈」(Execution Context Stack)，可以看作是
调用栈的镜像。由于所有的 js 代码都存在于全局环境中，所以首先会创建 「全局执行上下文」(Global Execution Context)，除此之外，js 中每一次的函数调用也会生成 EC，所以栈底肯定会是
全局执行上下文。

如果把 EC 视为作一个抽象对象，那这个对象包含了代码相关的 this、enviroment(存储标识符包括变量声明、函数声明、函数表达式的数据结构)和一个指向外部 enviroment 的指针。

Global Execution Context

	Global Execution Context = {
		global object,
		this: global object,
		outer environment: null,
		enviroment: {
			// all the identifiers
			variable,
			function expression,
			function declaration,
		},
	}

Function Execution Context

	Execution Context = {
		this: some value,
		outer environment: outer lexcial environment,
		enviroment: {
			// all the identifiers
			parameter,
			arguments,
			variable,
			function expression,
			function declaration,
		},
	}

在 EC 创建之后，js engine 会开始顺序执行代码。

/** 01 **/ var x = 'hello world'
/** 02 **/
/** 03 **/ function foo() {
/** 04 **/   var y = 'hellow foo'
/** 05 **/   console.log(y)
/** 06 **/ }
/** 07 **/
/** 08 **/ console.log(x)
/** 09 **/ foo()

代码执行前，首先创建全局执行上下文并设置为 「当前执行上下文」(running execution context)：

	Execution Context = {
		global object,
		this: global object,
		outer environment: null,
		enviroment: {
			x: undefined,
			foo,
			bar,
		},
	}

之后，顺序执行代码，执行到 ln 01 时，给变量 x 赋值，

	Global Execution Context = {
		global object,
		this: global object,
		outer environment: null,
		enviroment: {
			x: 'hello world',
			foo,
			bar,
		},
	}

代码执行到 ln 08 时，需要去 enviroment 中寻找 x 的值，此时为 'hello world'。

代码执行到 ln 09 时，因为是对函数的调用，会创建一个新的执行上下文，并置为「当前执行上下文」：

	foo Execution Context = {
		this: window,
		outer environment: Global.environment,
		enviroment: {
			arguments,
			y: undefined,
			bar,
		},
	}

然后代码继续执行，到 ln 04 时，有对 y 的赋值操作，此时

	foo Execution Context = {
		this: window,
		outer environment: Global.environment,
		enviroment: {
			arguments,
			y: 'hello foo',
		},
	}

代码执行到 ln 05 有对 y 的取值操作，y 值在当前的 enviroment 中为 'hellow foo'。

EC 栈的情况，可以参照下图「调用栈」(Call Stack)的状态：

到这里就基本上把执行上下文的一些基本概念讲完了，其中涉及到的一些内容目前不理解没有关系，后面会慢慢解释。

weui.js 是 WeUI 的轻量级 js 封装。

嗯，没啥好介绍的，直接复制项目的 Readme.md 过来好了，欢迎去项目的 Github 项目主页 star 并贡献代码。

概述

注意：由于微信小程序不支持dom操作，所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本，详情请看：https://github.com/weui/weui-wxss/

手机预览

https://weui.io/weui.js/

开发

安装

git clone https://github.com/weui/weui.js.git
cd weui.js
npm install
npm start

编译

npm run build

使用

global

<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.0/weui.min.css">
<script type="text/javascript" src="dist/weui.min.js"></script>
<script type="text/javascript">
    weui.alert('alert');
</script>

import as module

import 'weui';
import weui from 'weui.js';

weui.alert('alert');

文档

Documents

贡献

如果你有好的意见或建议，欢迎给我们提issue或pull request。

License

The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源

中国第三届CSS开发者大会将于 2016 年 12 月 17 日在广州召开，这次请来的分享嘉宾还是非常牛逼的，有不少国内外的大牛，也有我的几个同事。

感兴趣可以直接访问上面的链接了解动态和详情。

部分讲师简介

还没有勾三股四的议题，看来是要压轴啊，好期待！

这几年，前端技术发展很快，每年都有新的技术名词流行，ReactJS、Angular 2、VUE、微信小程序。。。而我重新学习了 swift ，是的，重新学习，之前读过《swift 1.0 从入门到放弃》。

想起当年学习前端开发的经历，我开始写一些实际的小 app 来练手，总算是没有又一次『从入门到放弃』

有一天突然想到，每一天不管开心还是难过，不管是平淡还是难忘，都要过的有意义——从来不写日记的我第一次想每天花几分钟记录一下自己的一天了。（日记？上个世纪的东西了吧？！）

于是就尝试了各种 app，记事类的、日记类的。却发现每个 app 都想做的很完美，带上各种功能，需要的不需要的全都有，干扰的东西太多。。。

我只想一个单纯的记录自己每一天的 app，几张图片，一段文字，最多再加上一个地理位置，嗯，真实的自己，只有自己能看到，也不用担心有没有人点赞。

干脆就自己用 swift 写一个吧：One Day.

One Day

有一天正在听最喜欢的《One Day》，嗯，海贼王中艾斯被行刑的那一段的主题曲，这段剧情也是海贼王中给我感受最深的一段。于是 App 的名字就叫 One Day 了。

专注

One Day 的目标就只有一个：记录『最真实的自己』。所以从一开始就完全抛弃了社交和分享的功能。

• 一段文字、几张照片，记录你的一天
• 可以使用 TouchID 保护隐私
• 支持常用的 markdown 语法，并有一个快捷键盘。
• 支持语音识别，基于 iOS 10 的 Speech Kit
• 纪念日和日历

后面还会增加备份和导出的功能。

下载地址： One Day - 我的私人日记

嗯，迟到的软文，这几天博客后台遇到了点儿问题，今天午休折腾了一番，也没有折腾对，但博客就这样恢复了。node nginx chrome spdy http/2 ...ghost 每次升级都各种蛋疼，前端技术这些年越来越牛逼了啊，每天不是折腾轮子就是被轮子折腾。。。

废话少说，赶紧把软文发了，不然。。。

项目地址： https://github.com/weui/weui-wxss
以下内容 copy 自项目的 README //懒癌患者。。。

概述

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览

用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目）

使用

• 组件的wxml结构请看dist/example/下的组件
• 样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss

文档

WeUI 视觉标准参考 weui-design

License

The MIT License(http://opensource.org/licenses/MIT)

请自由地享受和参与开源

贡献

如果你有好的意见或建议，欢迎给我们提issue或pull request。

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。

经过半年的打磨，WeUI 1.0 正式发布，主要是新增了一些常用组件，并使用 BEM 命名，为接下来的微信小程序开发做好准备。

主要features

• 【增强】 采用BEM命名规范
• 【增强】 新增Flex布局
• 【增强】 新增Gallery
• 【增强】 新增Preview
• 【增强】 新增Agreement
• 【增强】 新增Footer
• 【增强】 新增Dialog和Actionsheet的Android样式
• 【修复】 修正了部分组件的间距
• 【修复】 修复了已知问题

项目地址：https://github.com/weui/weui
预览地址：https://weui.io/

3个月前，我汇总了 iOS 10 中 Safari 的新特性，输出为《Safari 10 越来越像理想中的浏览器了》，嗯，Safari 10 对前端的支持确实令人欣慰。然而，还有一个非常重要的事情需要关注：

iOS 10 要求 app 必须启用ATS

ATS(App Transport Security)是苹果在 iOS 9/OS X 10.11 中开始引入的特性，旨在提高 app 的安全性，要求 app 的 HTTP 通信必须是加密的，而且还要求 HTTS 连接建立在 TLS 1.2 协议以上 (嗯，TLS 1.2 是目前最新的版本，它于 2008 年发布，在 2011 年发布了修正版，TLS 1.3目前还在草案中)

其实在 iOS 9 的时候，苹果就要求启用ATS了，但当时还可以用 NSAllowsArbitraryLoads 来避开从而让 app 可以继续访问 HTTP 网站，而从 2017 年 1 月 1 日开始，苹果开始禁用这项配置！也就是说，从此以后新提交的 APP ，只能访问 HTTPS 网络内容

而 Safari 10 作为 iOS 10 内置的官方 app，显然是要首当其冲的了，目测 Safari 10 依然可以访问非 HTTPS 的网站，但已经不能获取一些用户隐私的数据了，比如地理位置 ，而且不太确定什么时候会禁用对非 HTTPS 的访问。

还有，在 2017 年 1 月 1 日前，不确定非浏览器类 app 启用 NSAllowsArbitraryLoads 后是否还能通过审核，反正之后是肯定不行了吧。

所以可能有一天，微信或者 QQ 或者微博，在 iPhone 上，就不能访问非 HTTPS 的网站了。

另外，Chrome 桌面版已经开始限制非 HTTPS 网站的权限了，比如，从 Chrome 51 版本开始，非 HTTPS 网站就不能再获取用户的地理位置了，而从 Chrome 53 开始，会提示非 HTTPS 网站可能不安全。

所以，面对即将到来的限制非 HTTPS 大潮，你怕了吗？

快快部署 HTTP/2 吧！

最近在项目中遇到需要修改 input 的 disabled 状态的颜色的情况，然而无论如何都不成功，折腾了好久。后来发现还是 User Agent 样式的问题。

iPhone Safari/webview input disabled 的默认样式：

input:disabled{
    opacity: 0.4
}

嗯，开发者工具只能看到这一条。 即便是 reset 为 opacity : 1 也无效。因为还有一条隐藏的样式 -webkit-text-fill-color ，于是有效的样式为 ：

input:disabled{
    color:@disabledColor;
    opacity: 1;
    -webkit-text-fill-color: @disabledColor;
}

移动端web开发最头痛的还是浏览器支持。好在 X5 自己整理了各个版本对 web 标准的支持情况的速查表，类似 caniuse

由于会不断更新，这里就不再截图了，想要了解的自己去看吧：

个版本对比：
http://res.imtt.qq.com/tbs/incoming20160607/home.html

HTML5 支持
http://res.imtt.qq.com/qqbrowser_x5/h5/features.htm

最近开始学 swift ，就想要把遇到的问题给记下来，以备以后查阅，毕竟年纪大了，脑袋瓜不好使了。

后来就想不如索性搞个博客吧，虽然现在博客已经不流行了，自己记录和查找方便就行。关键是，Ghost 出了个客户端 Ghost Desktop，配合起来也是非常方便——虽然类似博客时代的各种客户端，但Ghost对我的最大诱惑是markdown呀。

预览： https://www.swiftnote.io

Github：https://github.com/qianduan/swiftnote

兄弟部门开发的一个工作流工具，终于发布了。

推荐一下， 这个工具是由大猫领导，littledu 和 hzlzh 主导的自动化打包和发布工具。

不多介绍，感兴趣自己去看吧，项目主页：http://weflow.io/