webpack 4 升级迁移

好久不看 webpack 已经从 3到4了,其实很早到今年2月份就开始发布 webpack 4 的 beta 版本; 每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白,为什么 webpack又要迭代一个新的里程碑,以及带了什么新的特性; 这里简单总结下: 详情 »

Pinterest PWA 案例学习

大概这是之前看 The Cost Of JavaScript In 2018 中提到的以参考索引,其实里面很多点挺重要的,当然推荐大家阅读下全文 A Pinterest Progressive Web App Performance Case Study; 后面其实说几点自己印象非常深刻的点; 为什么做这次性能改造 其实很多时候做性能改造,都会面临这样的质疑,它不是对现有版本的任何功能性的迭代,而是从多个方面去提升一些所谓数据指标。因此很多 产品( 详情 »

解决微信小游戏排行榜 Android 模糊问题

最近用 Cocos Creator (cc) 开发微信小游戏。由于 微信小游戏存在 主域和子域的隔离; 主域,你的主要游戏场景,和一些交互按钮等内容; 子域,主要用于获取用户数据和排行榜的显示; 微信这样分开也是为了更好地保护用户数据,防止数据泄露。因此一定要合理的设计自己的主域和子域; 凡是设计从微信里获取数据的比如用户头像,游戏成绩等;一定需要在子域的canvas 完成绘制; 实际在完成排行榜的功能时候遇到了一点兼容性的问题,Android 的部分机型(自己这边全部复现)和 iOS 详情 »

微信活动宣传页实践

最近大量时间参与到做一些宣传类的活动页,这里主要记录一些自己的心得。差不多一周会完成三个左右,还算比较紧凑。 选好模版 好的模板可以节省你非常多的时间,我理解的模版类似这样: 模版 = sass + es6 + webpack + server + html 自己选用的 ykit 作为脚手架,可以很方便的进行前端工程化的配置; 其次还有比较重要的就是明确自己页面的功能类型,比如是动画效果为主,这需要选择合适的基础框架,由于自己是一页一页切换的,所以,自己选用了 swiper ,它可以很好将每个 slide 详情 »

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

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

JS 中匹配任意字符方案

背景,最近需要匹配出某段脚本里的字符串比如: <script type="text/javascript">window._debug = false</script> 从中截取 到下面内容: window._debug = false 第一时间想到了 .* 来进行中间的匹配: /<script .+>(.*)<\/script& 详情 »

PWA fetch 事件不生效

PWA fetch 事件不生效 最近接入 PWA (Progressive Web App), 我们不是 从 0 开始做,而是基于现在已有的架构,我们是服务端 Node 层做大前端支持,前端构建基于 Ykit 来进行 less 和 es6 的处理。 大概照着 官方教程 做的时候, 详情 »

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

最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频,所以就干脆直接再进一步,以后直接通过一个库快速生成 gif 。 直接放参考 DEMO 效果 实现原理 其实相对而言,也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。 详情 »

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

Chrome 在其移动版本的 57 开始后 支持了一个的 新的 API mediasession。(目前桌面版本浏览器不支持) 它能够做什么呢? 你可以通过提供自定义的 metadata 信息来设置通知栏的效果。 我们以音频为例的话,差不多是你可以在播放音乐的时候你可以设置锁屏或者通知栏上的效果: 1: 默认播放 2:通知栏 3: 锁屏 我们看小具体的代码: if ('mediaSession' in navigator) 详情 »

Chrome 新的自动播放策略

最近看 来自 Chrome 团队在 IO 2018上的 分享 《Build awesome media experiences on the web》 。大概主要是说关于 音视频在 Chrome 上的更新。其中业务团队需要及时关注新的 自动播放策略,虽然在去年9月份 Chrome 团队就更新了博客 《Autoplay Policy Changes》 详情 »