最近在写工具处理的时候，想到做这么一个库，用于解决版本号之间的问题，比如打小，比较等问题。常见的比如确定 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 详情 »
背景，最近需要匹配出某段脚本里的字符串比如: <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 ([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 总部，五味杂陈，会后悔当初的不努力，但也庆幸后来的坚持，大概于我而言，这算一种信仰吧。 今年请了一个月的假，因为要去兑现去非洲的愿望啦。 详情 »
最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的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 详情 »
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 团队在 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 自动播放策略中去。 自动播放的策略调整 如图中所示: 页面中的视频处于静音状态下是允许自动播放的，大概这个产品交互可以参考 微博的主站策略 如果用户与当前页面有任何的交互比如点击或者 详情 »
初夏 翻过四月，还记得4月初还下过雪，五月初短袖已经满大街都是了，毕竟这是属于夏天的时节。其实夏天，打小就不喜欢，毕竟热的非常难受，直到大二那个暑假，经历了长沙持续45天的高温后，似乎都温度依然没有那么敏感的直觉，在 30 度的傍晚打过球，在35度的晌午骑过车。已是五月天，May the force be with u. 机遇 上周五 XJ 哥离职，和他接触一年有余，最后还是选择做更有挑战的事情。大概五月份 可能会是浮躁的月份，但是也是一个值得思考更多的月份。关于未来趋势虽也说不准，但是每一次选择似乎都无在乎两个角度，个人喜好，待遇发展。有的时候很难都满足，大概与心底，还是想想现在的出境，做最合适的选择。 刺杀骑士团长 最近读完了《刺杀骑士团长-上册》。大概这部故事最开始给我印象最深的是主人公对于离婚后那几个月的处理，心情不好这是自然的，骑士这也侧面告诉我们，未来的人生有很多很难预料的事情发生，主人公开着车度过了些许时日，最后重新开始绘画，展开了后面离奇的经历。大概如同《1Q84》 ，似乎下册才是真正意义上故事最为精彩内容的开始。伴随回忆者，现在往往会畏惧，于是乎到能体会自来也物语中独白，说白了， 详情 »
ffmpeg 是一款非常强大的音视频处理工具，它可以完成对视频的编码，解码以及整合等等功能。它有着强大的命令行操作选项，下面罗列一下非常使用的命令，方便大家处理视频(不依赖Adobe Premiere 等比较复杂软件)。 截取分帧的图片 ffmpeg -i video.mp4 thumb%04d.jpg -hide_banner 获取某一帧的图片 ffmpeg -i video.mp4 -ss 00:00:07.000 -vframes 1 thumb.jpg 截取某个片段 ffmpeg -i video.mp4 -t 00:00:50 -c copy small-1.mp4 -ss 00:00:50 -codec copy small-2.mp4 剥离音轨 详情 »
