PointerEvent 来了

今天看了下搁置好久的 github 通知,watching 的 Zepto 通知中有这么一条。tap double trigger on chrome 55。其中大意是说在 Chrome55 中,Double Tap 事件异常。下面的 @mbyor (不知道为啥这家伙才注册11天?小号也不可能啊)给了个比较满意的解答,而且很详尽,改你的 touch module 就行啦,blabla。

其中提到了 pointerdown 这个事件,这是啥?貌似之前在哪儿听说过,但是没细研究过,马上 Chrome 打开 Console 输入以下代码:

1
monitorEvents(document.body, 'pointerdown')

之后鼠标点了下页面,嘿!有东西出来了啊:

1
pointerdown PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0.5…}

回去 issue ,顺藤摸瓜,搭梯子访问了下 https://developers.google.com/web/updates/2016/10/pointer-events

里面介绍了这次的主角 PointerEvent 的由来:

We’ve had touch events for a while to help us with that, but they’re an entirely separate API specifically for touch, forcing you to code two separate event models if you want to support both mouse and touch. Chrome 55 ships with a newer standard that unifies both models: pointer events.

大意就是我们很早以前就支持 touch 事件啦,但是后来发现开发者们为了兼容 PC 和 M 经常要监听同类型的两个事件以应付鼠标和触屏的触摸,所以呢,这次我们实现了 PointerEvent 标准,来解救你们来啦。

1
2
node.addEventListener('mousedown', handle)
node.addEventListener('touchstart', handle)

每次这么写是不是挺恶心的?以后直接监听 pointerdown 就行啦~而且这次的 Pointer 事件比 Mouse 和 Touch 设计的更精细、全面,如下:

  • pointerover The pointer has entered the bounding box of the element. This happens immediately for devices that support hover, or before a pointerdown event for devices that do not.
  • pointerenter Similar to pointerover, but does not bubble and handles descendants differently. Details on the spec.
  • pointerdown The pointer has entered the active button state, with either a button being pressed or contact being established, depending on the semantics of the input device.
  • pointermove The pointer has changed position.
  • pointerup The pointer has left the active button state.
  • pointercancel Something has happened that means it’s unlikely the pointer will emit any more events. This means you should cancel any in-progress actions and go back to a neutral input state.
  • pointerout The pointer has left the bounding box of the element or screen. Also after a pointerup, if the device does not support hover.
  • pointerleave Similar to pointerout, but does not bubble and handles descendants differently. Details on the spec.
  • gotpointercapture Element has received pointer capture.
  • lostpointercapture Pointer which was being captured has been released.

够用了吧?期待不久的将来(为什么是将来?因为标准普及到浏览器需要时间,值得庆幸的是,普及的时间越来越短了),我们能全面用上 Pointer 事件,告别事件绑定的尴尬境地。

新年来了,想说些啥,也实在不知道说啥,公司还好,团队还好,业务尚可,明年可以期待可以上更多的新技术,机会越来越多需要抓住。

在年前做个总结会吧,总结&激励&愿景,邀请其他部门的老大们过来听听,要不是UI老大想找我听听FE团队的总结,还真没重视这个事儿。

Vue看了一段时间,基本上算是会用了,也做了一些用得到Vuex,10个组件左右的不算复杂的小App,也都是练手学习用的,不过始终停留在如何使用上,还没细看过API里面的实现,怀疑自己是否会去看,心态有点变了呢。

今天就这样了,祝大家新年快乐,万事顺意,身体健康!

面试,我们面什么?(下)

上次提到面试时,我们面什么,讲了能力、态度、沟通。这次讲讲怎么看潜力。

潜力是什么?

潜在能力指个人能力发展的可能性,这种可能性在外部环境或教育条件许可时,可以通过一定的经验发展成为现实能力。

在前端技术这边,潜力就是在短短的几个月内,能突飞猛进到什么程度?这真的能看出来么?

突然发现自己学会思考了

标题其实也可以这么起《多角度的思考问题》,今天突然发觉自己思考问题的方式不想当初那么单线程了,貌似真的领悟了什么叫作「辩证得看问题」了,也不知道我到了如今这个年纪才明白这些是不是已经晚了,或者算是挺早的,特此记录下来,分享给大家。

漏点其他公司面试不到的前端面试题

最近面试有点多,最多一天7个人。。。但成功率着实不高,原因嘛,之前交代过了。

今天突发奇想,要聊聊面试题。好吧,既然笔试题取消了,面试题的比重当然就要有相应的增加。

我的面试题的比例大概是这么分配的:HTML 10% + CSS 20% + JS 50% + 前端外知识 10% + 技术视野 10%。这是个大概的比例,内容分类也就这么多,当然要看候选人的实际情况,偶尔出来灵感想起啥就问啥(虽然能让我兴奋起来的面试者,最近20人里才有俩)。

整个面试时间,从2分钟到1个半小时不等(尽量挖,挖到你的老底)。

回归今天的主题,漏点我的面试题: CSS部分

2016招人高峰期

好久没写新博了,今天聊聊最近火爆的招聘的事儿。

上周五面了6个,今天周一面了7个。。。

自己的HR不太给力啊,原因比较多:一来他还要负责别的部门.Net/Java一堆职位;二来市面上的前端流动人才少之又少。公司还为了一些稀缺资源启动了第三方服务商来挖简历。

顺便说下这个第三方服务商,倒是挺努力的,每隔2/3天就来几份简历,我从中看到比较合适的就约来看看,上周五一个姑娘,今天一个小伙儿,都是2分钟就打发走的水平,初级问题问了几个全挂,实在没法往下再问了。。。

跟HR吐槽了下这家简历的质量,这年头没有不会写简历的,但应聘者也不想想,用人单位能单凭简历就让你进来么?面试这关怎么过?自己能力和简历对不上号的话,自己的时间不也是耽误了么?想不明白。

下午去HR办公室,HR Boss找我聊了聊,问我对笔试题和笔试这个过程的意见。由于笔试时是可以使用移动设备度娘答案的,虽然在笔试题最上方已经明确说明了请真实答题不要度娘。HR Boss问我能否把笔试过程挪到线上去,总之各种弊端:效率低,真实性低。讨论的结果:决定笔试题环节取消,直接进入面试。so be it.

再说关于简历来源,求人不如求己,上周一注册了个 BOSS直聘 (这玩意是智联老老大出去做的产品),试了一把自己当BOSS,主动搭讪的人还真不少。
一看都是孩子,全90后。公司薪资不具备竞争力,招到P5难上加难,只能从中矬子里拔将军拣好苗子自己培养。

还真让我碰上个,上周四挖到个好小伙儿,offer顺利发掉,期望不要被其他公司截胡,最最关键的,这是我的人!!之前碰到好苗子都被其他团队定的,这次终于挖到自己的了,开心。

上周五还遇到个姑娘,笔试面试效果还都不错,而且出奇的便宜,我都想给她多要点。。。领导看了后让我留心其工作经验,有几个月缺失,HR的意见是培训机构出来的,没有实际工作经验,但在我看来,这姑娘水平比某些工作2/3年的都要好啊,有点犹豫呢。
姑且看看这周的集中面试结果吧,如果挑不到满意的,招她进来试试看。

除了要给自己招下属,更多的还要负责许多其它部门的前端招聘。移动部门的HR超级给力,简历量远远大于其它部门,而且要求还高,P5市面上难得一遇,要求还是1个P4多个P5…要知道我手下三大台柱也都才P4啊…

也遇到过比较好的实习生,但部门HC有限,有点可惜。

呃,最近还有件事:本周五要进行升职答辩了,希望自己推荐的几个人可以顺利4升5,前端的职级金字塔能健康起来。他们的能力其实早就达到了,主要看他们临场发挥和运气了,每天祈祷中。

今年不用去参加答辩做评委了,还是继续忙着招人开会吧。💦

团队节后回来一只处于忙碌状态,我们引以为傲的技术分享会被懈怠了,这事还得抓紧,Q2再说吧。4月1号要收下发的翻译任务啦。

ES6Cheatsheet中文版

最近Github上很火爆的一个项目 es6-cheatsheet,发本文时,该项目Star数在5732个。

得知这个项目后,动了翻译个中文版本的心思,用了一周多的碎片时间(年终总结会,第二天早上在酒店中爬起来),断断续续的翻译了个版本并提了PR,作者响应很快啊,马上就给予合并了,这是中文版地址

2015年的总结和回顾

2015年年底,这些日子在忙一些杂事:人员预算、考核、16年目标,总结会等等。

今年干了几件大事:

  1. 三大件规范落地:辅以Lint工具,规范这玩意终于可以落地了;
  2. Git落地:全公司前端的项目代码,在自建的Gitlab中,目前共有50个;
  3. gulp + SASS全统一:虽然大家水平不一,有些人的起点比较低,但起点低也开始接受这两项效率工具了,当然还有些天资聪颖的小伙伴开始自己写插件了,非常棒!
  4. 全年14次技术分享;
  5. 全年17篇外国先进技术文章翻译;

自己一,一年一个,拿了两次软件著作权。。。没想到这东西这么好拿?

下面是一起共事了近三年的同学,上交周报的最后一句话:

这是今年的最后一个周报,在这特别感谢蔡哥过去一年的培养和关照,年后回来攒足劲儿,努力学习,努力工作。😄😄

得到这样的肯定,很开心啊,甚至比Boss的直接表扬还开心。

最后来张全家福,纪念这一刻。缺了一个人,这家伙已经喝得边上躺着去了,还有几个姑娘提前回家了

NewThemeForHexo

花了不到一天的时间,写了一套自己的HEXO主题。

layout index list post 已经到位,接下来的工作是翻页,各种小元件,还有手机的适配。

由于目前的新版式,手机适配还是比较简单的,几个mq就搞定了。

难得的几个小时啊,能写点代码,心情舒畅很多。

未来想使用jade来做模板,看时间和心情了。

好久没见

好久没更新博客了,理由嘛,有很多:

  1. 这个博客建立一年有余,感慨~
  2. 工作好忙啊
  3. 自己的Macbook重装了,用了快3年,想折腾下
  4. 因为上面原因,虽然之前做足了备份,结果还是忘了些东西,其中包括Jekyll的一些插件,虽然博客源码还在remote repo上,这次改用 HEXO 继续写。

好久没写代码了,偶尔闲时会很惆怅~所以昨天就从JIRA上接了个小活儿,要了1天,2小时搞定。

关于博客:

  1. 由Jekyll迁移到HEXO
  2. 重新整理了文章们,标签啊等等
  3. HEXO的git depoly驯服有点困难,会遇到权限和仓库嵌套问题,generate 不支持制定目录的。。。
  4. 呃,先把内容整了,装修的事,等有时间慢慢小搞,收录最重要 XD 我还活着

最近发生了一些小事情:

  1. 自己和老婆一人一个KPW3入手,感谢京东全球购。
  2. 儿子从吐单字升级到今天的可以说简单的句子了:“游乐场玩够了么?”答曰:“玩不够”。
  3. 准备第四学期周末考试了,明年再坚持半年,拿学位!
  4. 胃肠出了点问题,坚持喝牛奶调制吧,第二天,已经见效。