随笔-20180617

不知不觉已是6月中旬。告别了父母的期中考试,也很开心有了最后勇气,去完成人生的第一件大事情,虽然压力多了些,但是好歹今年的一个重要目标完成了。 其实上周真的很累,已经连续上了2周班,看着凌晨1,2点的望京 SOHO ,大概这就是最后的战役。所以自己坚持着,工作不是付出所有,但是人的时候确实需要在强大的压力下去完成一些事情。最近世界杯,记得06年的世界杯决赛,最后点球大战,自己很能想象那个时候球员的压力,作为球迷都不敢看电视。 昨晚梅老板又射飞了点球,看过梅老板射飞过美洲杯的决赛点球,大概真的觉得这是非常残忍的事情,但是想起了,罗志祥的那句话: 你是一个专业的舞者,而不是传统街舞舞者。 其实这句话也想送给产品经理和工程师,你的 title 决定着你所做的事情,不能逃避,更加需要慎重。 希望未来会更好, mark~ 详情 »

随笔-20180610

不知不觉已是6月上旬末尾了。 大概对于上周,真的只有一个字,“忙”; 最近开始用 Google Calendar 做日程的一些计划。大概这样下去感觉对写周报帮助是最直观的帮助,不过这样弄起来也很有条理,大概很多人都有 TODO Lists 不过,重新设计的 Google Calendar 确实 UI 很赞,最近最大的发现的确是 现在 Material Design 作为一门设计预言,感觉非常漂亮,都有意愿把 vue-core-image-upload 的文档改成这种风格。 最近世界杯的事情,确实琐碎不少,但是这的确是自己认为最为困难的挑战,很多事情都是临时准备的,需要短时间做出响应,难度远比双十一和春晚,这一次以及定性为战役,很开心现在路走到当初的预测的另一面。 最近是有给我普及的 “3F” 方法,之前我们学习似乎并没有太注重一个度量的内容。而其实有三个关键词是提升效率的关键; "Focus" 专注,专注眼前的学习,不要想东看西看,或者一会玩手机,一定在学习的时间强迫自己远离别的事情; “feedback” 回馈,现在越来越多的学习都是自学,其实互相一起学习,反而是有助于提升的,比如想想高中一个班级; 详情 »

使用 core-version-manager 解决版本号的问题

最近在写工具处理的时候,想到做这么一个库,用于解决版本号之间的问题,比如打小,比较等问题。常见的比如确定 A/B 两个版本谁比较新,又或者 选出一系列版本中最大的。于是 core-version-manager(名字有点土) Github 怎么使用 $ npm install --save core-version-manager 引入模块; import version from 'core-version-manager' API check() 检测传入的是不是一个版本号; version.check('1.2.4') next() 传入版本的下一个版本号; version.next('1.2.4') // 1.2.5 pre() 传入版本的前一个版本号; version.pre('1.2.4') // 1.2.3 max() 获取传入一系列版本中的最大的版本号; version. 详情 »

查看详情

六月天

不知不觉已是六月份。 江湖难再见 五月底,飞哥离职。大概去年的小伙伴,似乎走的都差不多了。每每回忆起去年五月份,我们一起通宵的等候上线,一起等待每个关键时间点的红包雨,一起等待兑奖的喜悦。自己手机里还留着,四点钟拍的黎明的中关村,到家时候等着洪总前线的消息,和小侄女一起找主客的人"算账",和昊哥一起"怂" 设计师,那个时候,真的虽然累,或许认识我,是你们"倒霉" 的日子开始,但是真的很开心认识你们,能交到这么多朋友。 技术影响力 忽然又想起这个话题。大概谈及"影响力",自己最初想到的是奇舞团 JK 给我们培训的第一课: 前端影响力; 大概是叫我们在今后的工作中,不能把自己定位成一个螺丝钉。因为前端是和设计,产品沟通相对多,又决定了用户第一印象的工作,我们需要从多个角度去进行思考,而不止是编码角度。最近内部分享的关于开源以及团队的影响力,更多的是技术的积淀和内部工具和产出。这一年其实在这方面,大概感受最深的还是来自外部社区,对于开源社区的回馈,比如 Weex 详情 »

JS 中匹配任意字符方案

背景,最近需要匹配出某段脚本里的字符串比如: <script type="text/javascript">window._debug = false</script> 从中截取 到下面内容: window._debug = false 第一时间想到了 .* 来进行中间的匹配: /<script .+>(.*)<\/script>/ 但是实际情况是,大多数脚本和测试的是不一样,都是多行的,会存在换行符。 <script type="text/javascript"> window._debug = false window._obj = { a: 1, b: 2 } </script> 这个时候你可以使用取反的字符匹配类似来避免: var reg 详情 »

PWA fetch 事件不生效

PWA fetch 事件不生效 最近接入 PWA ([Progressive Web App](Progressive Web App)), 我们不是 从 0 开始做,而是基于现在已有的架构,我们是服务端 Node 层做大前端支持,前端构建基于 Ykit 来进行 less 和 es6 的处理。 大概照着 官方教程 做的时候,无非就是注册 service worker, 然后标记需要缓存的资源,然后再进行请求拦截。巴拉巴拉巴拉~~~ 感觉应该很 easy 的事情,然而问题来了: 我注册了 service worker , 打开控制台 然后你可以到这里点击这里: 查看缓存的资源列表。然后点击进去调试,没有发现异常,install active 事件都触发了,但是 唯独 fetch 事件没有触发。 大概弄清楚原因后,首先谷歌了, 详情 »

来自三十岁的日志

今年三十岁了。 大概希望自己明白,“幸福”的定义。 大概那个时候,自己能够在一个足够大的平台工作着,谈不上多棒的工作,但每每回顾起来,至少明白幸福其实也就那么简单。有经历过无数次纠结,无数次错误,不过没能想之前,因为 I am the one. And trus all you guys. 发现和朋友谈论的话题更多的开始是 生活。虽然琐事很多,但是还好,能够有这么一个人一直理解和支持你。大概幸福就是分享的一点点的琐碎。 爽约了4年年前的 Border collie 终于还是兑现了。果真很有很多无法预料的事情,但是经过无数次的的教训,学会了 peace && patient 。但是好在,顺顺利利陪它度过了开心的童年。 自己还是找机会去了美国,去了码农圣地,看过金门大桥,也看过石景山城的谷歌 Logo ,当然也去了一直想去的 Facebook 总部,五味杂陈,会后悔当初的不努力,但也庆幸后来的坚持,大概于我而言,这算一种信仰吧。 今年请了一个月的假,因为要去兑现去非洲的愿望啦。 详情 »

查看详情

使用 JS 直接截取 视频片段 生成 gif 动画

最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频,所以就干脆直接再进一步,以后直接通过一个库快速生成 gif 。 直接放参考 DEMO 效果 实现原理 其实相对而言,也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。 var gif = new GIF({ workers: 2, quality: 10 }); // add an image element gif.addFrame(imageElement); // or a canvas element gif.addFrame(canvasElement, {delay: 200}); // or copy the pixels from a 详情 »

查看详情

使用 mediaSession 实现媒体播放的通知栏控制

Chrome 在其移动版本的 57 开始后 支持了一个的 新的 API mediasession。(目前桌面版本浏览器不支持) 它能够做什么呢? 你可以通过提供自定义的 metadata 信息来设置通知栏的效果。 我们以音频为例的话,差不多是你可以在播放音乐的时候你可以设置锁屏或者通知栏上的效果: 1: 默认播放 2:通知栏 3: 锁屏 我们看小具体的代码: if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: 'Never Gonna Give You Up', artist: 'Rick Astley', album: 'Whenever You Need Somebody', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' 详情 »

查看详情

Chrome 新的自动播放策略

最近看 来自 Chrome 团队在 IO 2018上的 分享 《Build awesome media experiences on the web》 。大概主要是说关于 音视频在 Chrome 上的更新。其中业务团队需要及时关注新的 自动播放策略,虽然在去年9月份 Chrome 团队就更新了博客 《Autoplay Policy Changes》。 Chrome 会在 2018年 的第二个季度,采取新的自动播放策略。自己在去年 2017年9月 更新了关于 最新的 Webkit 内核团队关于新版本的 Safari 的 《MacOS High Sierra Safari 11限制了 video 自动播放》 一些处理方法,而这些方法也可以运用到现在的 Chrome 自动播放策略中去。 自动播放的策略调整 如图中所示: 页面中的视频处于静音状态下是允许自动播放的,大概这个产品交互可以参考 微博的主站策略 如果用户与当前页面有任何的交互比如点击或者 详情 »