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 剥离音轨 详情 »
很久没写了，大概这期间穿插很多小事情。 反寒 头一次经历北方四月飞雪的天气，作为一个南方人看见雪花似乎已经没了那么多惊喜感，反而这次只能大声惊叹： 斯可矣！ 到了北方这么久，也算是各种天气都经历了，经历过四月的沙城暴，经历过七月的大暴雨，经历过12月不见阳光的雾霾，这一次也算人生的另一种经历吧。虽然还是会冷，但是毕竟春天还是会来的。 复杂情绪 由于某厂的四月份要求，部分人会开始想着自己的职业发展，于是乎离职在这个月份久特别的多，看着一些之前的小伙伴陆续离开，也确实不是滋味。前些天 娜姐答应了去爱奇艺的 Offer ，虽然说她觉得面试不咋好，但还是回去了。Qsir 也准备换工作了，出去面试了，推荐了一些机会，自己希望他们都能够去大一点的平台，简历有的时候真的很重要!对于一些有其他诉求的同事，去小公司也不错，毕竟那里有更加足够的薪水和待遇，无论如何，结合自己的出境和诉求，做正确的选择。 回归 下周上班久又从新回到望京了，一算也有一年时间了，去之前没想打很多事情，但是自己还是坚持住了这一年。想想才去的五月份夜里的奋战，第一次接触大局营销，一起和小侄女排查劫持的问题，一起帮着洪帮主搞定脚手架的事情，一起看着它的取消，转折到上线。随后开始鼓捣播放器四个人的小团队的封闭开发，其实那段日子也很开心，接触了很多以前没有接触的内容，感觉超级棒。明天开始上班，希望不忘初心。 最后安利点轻松的 详情 »
目前我们大多数网站都是启用的 gzip 来进行 资源传输的压缩，这有利于我们更加快速的访问我们的网站；但是除了 gzip 外，我们或许还有别的选项，而且性能会更好，比如 Facebook 便是启用的 Brotli 算法; Brotli Brotli 最初发布于2015年，用于网络字体的离线压缩。Google软件工程师在2015年9月发布了包含通用无损数据压缩的Brotli增强版本，特别侧重于HTTP压缩。新版本还展现了跨平台的性能改进，以及减少解码所需的内存。 与常见的通用压缩算法不同，Brotli使用一个预定义的120千字节字典。该字典包含超过13000个常用单词、短语和其他子字符串，这些来自一个文本和HTML文档的大型语料库。预定义的算法可以提升较小文件的压缩密度。 对全球1000个访问量比较大的地址进行测试，使用 Brotli 算法可以得到明显的性能改善: 14% smaller than gzip for JavaScript 21% smaller than gzip for HTML 17% smaller than gzip for CSS 使用brotli取代deflate来对文本文件压缩通常可以增加20%的压缩密度，而压缩与解压缩速度则大致不变。 当然如同 HTTP2, 详情 »
由于需要支持 IE8 ，因此我们直接使用 babel 转换出来的 es5 代码在 IE8 上并不能很好的运行，而且修复这个问题会让大家 头痛 ヽ(｀Д´)ﾉ。 大概这里简单说下解决问题的一些关键方法吧。 es3ify-loader es3ify-loader 大概是第一个让你看到希望的。你需要在 postLoaders 或者放在 babel 转换前。 module: { loaders: [ { test: /\.js?$/, loaders: ['es3ify-loader'], }, { test: /\.js?$/, loaders: ['babel-loader'], }, ] } 这个是可以解决抛出 default 关键词的问题， 比如我们会看到 这样的问题： expected identifier es5-shim 当然这个问题解决后面，可能还会遇到这个问题: Exception throw and not caught 你可以在入口文件引入 require('es5-shim') require('es5-shim/es5-sham') 如果还是错误定位到 defineProperty 详情 »
