Web 开发技术分析，前端开发学习历程。
277 篇文章近期开始陆续把 https 证书往 EC2 上开始部署；由于 Chrome 67 版本对 https 的要求更高了，加上近期会实验 http2，所以不得不开始把 HTTPS 启用了；之前写过为什么没有启用 SSL 的原因，很大程度上是因为 vanthink.cn 的七牛图床没有开启 HTTPS 导致这边的前端静态资源一直没能够使用到 https ，但是随着近期图床的迁移，应该会在两三周内完成域名的全部迁移； 证书用的是 腾讯云 的免费的证书。按照官方教程来的，但是结果还是出错了。始终访问不到。如果你启动的时候 nginx 没有抛出错误的话，你可以优先去看 AWS 控制台的安全组: 一定要开启对应的端口； 第二个排查就是，你需要去看 nginx 的错误日志; 一般在 /usr/log/nginx/error.log 报了什么错误; 这个问题其实还是比较好解决的， 详见这里 server { listen 详情 »
好久不看 webpack 已经从 3到4了，其实很早到今年2月份就开始发布 webpack 4 的 beta 版本； 每一次 webpack 的升级都还是建议阅读下 《webpack 4: released today! - Sean T. Larkin》。你需要明白，为什么 webpack又要迭代一个新的里程碑，以及带了什么新的特性； 这里简单总结下: Faster！！！ Webpack 在 bundle bundle 的时间会缩短至少 60 个点，最高可以到 98%; (我们似乎可以节省一些时间去这些事情) Mode 增加了新的属性，来支持 development 和 production 的区别，从而达到更好的优化效果； CommonsChunkPlugin 不将启用；取而代之的新的 API optimization.splitChunks; WebAssembly 的支持，现在默认支持 import export 详情 »
大概这是之前看 The Cost Of JavaScript In 2018 中提到的以参考索引，其实里面很多点挺重要的，当然推荐大家阅读下全文 A Pinterest Progressive Web App Performance Case Study; 后面其实说几点自己印象非常深刻的点； 为什么做这次性能改造 其实很多时候做性能改造，都会面临这样的质疑，它不是对现有版本的任何功能性的迭代，而是从多个方面去提升一些所谓数据指标。因此很多 产品(🐩) 都会去质疑这一件事情，但是 Pinterest 这次改造给出了更为直接的数据，性能的优化与用户数据方面的正相关： 其中相比老版本，用户的停留时间和核心参与度都有非常大的提升；其中和广告相关的数据，也有非常显著的增加；不难理解，当用户用更短的时间触达到页面， 合理的设置 chunks 如果我们是做基于 vue 项目或者 React 的项目，我们可以参考下 Pinterest 的 JS Bundles; js vendor 包含一些第三方的库比如(React, Redux, React-Router) 等; 详情 »
最近用 Cocos Creator (cc) 开发微信小游戏。由于 微信小游戏存在 主域和子域的隔离； 主域，你的主要游戏场景，和一些交互按钮等内容； 子域，主要用于获取用户数据和排行榜的显示； 微信这样分开也是为了更好地保护用户数据，防止数据泄露。因此一定要合理的设计自己的主域和子域； 凡是设计从微信里获取数据的比如用户头像，游戏成绩等；一定需要在子域的canvas 完成绘制； 实际在完成排行榜的功能时候遇到了一点兼容性的问题，Android 的部分机型(自己这边全部复现)和 iOS 设备上存在画布模糊的问题: ios 的截图如下: 搜索了一下，发现没有多少人提出这样的问题，但是看别的游戏也存在同样的问题； 不过，灵机一动！！！ 如果前端接触 canvas 的话，才开始都会遇到一个问题，就是再 PC 上看着挺好的，但是在移移动端就模糊了，因为这里存在一个 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例 因此你的 canvas 设置的像素要比实际多出一些比如会有: canvas.width = window.innerWidth * window. 详情 »
最近大量时间参与到做一些宣传类的活动页，这里主要记录一些自己的心得。差不多一周会完成三个左右，还算比较紧凑。 选好模版 好的模板可以节省你非常多的时间，我理解的模版类似这样: 模版 = sass + es6 + webpack + server + html 自己选用的 ykit 作为脚手架，可以很方便的进行前端工程化的配置； 其次还有比较重要的就是明确自己页面的功能类型，比如是动画效果为主，这需要选择合适的基础框架，由于自己是一页一页切换的，所以，自己选用了 swiper ,它可以很好将每个 slide 组合起来； html 模板可以方便帮助你设置一些微信分享的 icon 和内容，这些你值需要根据自己的业务 填写响应字段或者数据就好； 微信分享 微信分享又两种链路，一种是基于 url 传递，还有一种是基于 图片的二维码形式，由于会存在被封的可能性，第二种的形式现在页比较多。很多时候大家都可以通过一个活动，计算初某种结果，然后生成一种图片，然后用户保存到自己手机。 当然第一种，也可以实现动态短链来防止被封的可能性。后面主要说第二种形式； 根据用户的动态生成的内容，比如选项或者输入，需要将 dom 结点转换成 base64 的图像， 详情 »
最近在写工具处理的时候，想到做这么一个库，用于解决版本号之间的问题，比如打小，比较等问题。常见的比如确定 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. 详情 »
背景，最近需要匹配出某段脚本里的字符串比如: <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 事件没有触发。 大概弄清楚原因后，首先谷歌了， 详情 »
最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的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' 详情 »
