最近遇到了个平时很少遇到的 Bug，理论上代码压缩混淆后大多数都不会存在问题(之前确实没有遇到)，但是最近却不小心给遇到了。 大概在测试的时候，没有混淆前，代码是可以正确执行的，但是混淆后，代码就出现部分 JS 未顺利执行的情况。然后通过代码一步步调试，发现，在进行混淆的时候，会把一些变量命名转化成类似字幕 a, b, c等这样。然后这次在组件注册的时候，比较偷懒，用了 Function.name 来代表注册组件的名称，而不是独立命名。 自己在 ES6 偷懒这样写了： import PlayComponent from './play-component'; // ... ui.register(PlayComponent); // register 的实现 ui.register = function(func) { const name = func.name; } 这样就导致在压缩的时候的 传入的参数会变成 t 这样就会知道命名失效，始终都是 t 。 所以在实现的时候尽量少用 Function.name 详情 »
天气晴。 好久没写随笔了。和同事调侃这周 三天打鱼，两天晒网。可是这周确实只上了两天班。 大概又想起了《中国合伙人》里的那句台词: 明天去杭州，9月份又一次。此地有雨，还需带伞。 详情 »
vue-core-image-upload 是一款方便的 vue.js 图片上传裁剪插件，你可以用它进行图片的上传，裁剪和压缩。 vue-core-image-upload 提供 is-xhr 这个属性来 取消默认的上传方式。然后通过 imagechanged 来获取文件内容。 参考示例 下面我们简单实现一套代码，实现自定义图片处理，我们不用自动上传，我们上传一张 png 然后将图片进行压缩和重命名上传到我们的服务器。 安装依赖 默认的一些 vue ，webpack 这些安装就省略了，我们直接开始先安装插件 : npm i vue-core-image-upload --save 然后安装 j-i-c 用于图片的压缩。 npm install j-i-c --save 安装完成后，我们还需要做点小事情，我们需要将 jic 改成 common.js 的模式。这个时候我们更改下 src/JIC.js 。我们需要在文件末尾将模块导出； // ... above contens module.exports 详情 »
我们经常通过事件代理会取到一些元素，大概我们第一个想到的 tagName 来判断，但是这样的确需要写过 map 来判断。我们可以有个快捷的方法： const el = document.querySelector('.svg-inner'); el.ownerSVGElement // true 则表示式 svg 元素 如果 false 则不是 参考: https://stackoverflow.com/questions/20748836/how-do-i-tell-if-a-dom-element-is-html-or-svg#= 详情 »
caniuse caniuse 是一个在线查看浏览器的对某些特性的支持情况，如果你需要查看某些语法比如新的 ES6 语法 或者 H5 中一些新的 API （web worker, mediaSource等。作者还提供了一些开放的 API 让你将它嵌入到你的页面中。自己之前写过 《在自己的网站或者博客嵌入浏览器支持情况》 有兴趣的可以阅读下。 在线地址 icomoon.io icomoon.io 是一款在线生成 iconfont 或者 SVG sprite 的网站。你可以选择免费或者付费的字体图标（海量），然后会自动生成字体或者 SVG 代码，然后你可以打包下载，非常方便使用，比如自己的网站就采用了它生成的 SVG 图标。 在线地址 uigradients uigradients 是一款在线的编辑或者选择渐变的网站，你可以自定义渐变的色彩也可以从比较流行的渐变中选择一种，你可以获取到它的颜色值以及 css 代码片段。 base64-image base64-image 这个不必多说了，图片进行 Base64 压缩的网站，支持多种格式，包括 详情 »
Last year, I have tried to finish an interesting react-native project on my GitHub. React-native-percentage-circle is a component which supports you to define your percent data and draw a circle. And also you can use it as a progress bar and show some data in the circle. It does make a difference to my life. Opearation 详情 »
平常我们使用制作进度条的时候都是想的用 div 去模拟，在 html5 后，我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式，这时候效果如图: 这个时候我们可以设置它的 border 或者 background 等信息。 如果是 chrome 或者 safari 浏览器，以及其他支持设置 设置控制条轨迹的样式的浏览器可以使用伪类 -webkit-slider-runnable-track 来设置控制条轨迹的背景和边框样式; input[type='range']::-webkit-slider-runnable-track{ background-color: #eee; } 而 firefox 则需要使用 ::-moz-range-track: input[type='range']::-moz-range-track{ background-color: 详情 »
东野圭吾的另一部小说。非常暖的故事，大概人会有烦恼，很大程度上都需要一个人去给出一个指引。如图小说里的故事，很多事情都是冥冥之中，即使作为书信给出的指引，更多还是人很多时候自己都有一个自己事先考虑到的答案。 需要的仅仅是有人可以给予一个肯定。 ⭐️⭐️⭐️⭐️⭐️ 五星推荐~ 这部电影今年已经排成了电影了，贴下预告，国内有望上映~ 详情 »
天气晴。北京的天气最低温度已经只有16度，快有秋天的气息。 今日深圳来的大学同学小聚。谈起最多的是迷茫中如何寻找清晰的目标。人会迷茫，但是不要沉迷这种状态，学会打破这样的舒适感，去寻找目标感。 最近 player 项目开始灰度，发现最难的挑战是策略优化。如何提高成功率和缓存优化还有很长的一步路。 今日七夕，不知道为什么去年秀恩爱的人为什么今年都没秀了，😂😂。 详情 »
原文地址: https://webkit.org/blog/6784/new-video-policies-for-ios/ @jernoble 如果接触过 ios 上的开发，在iphoneOS 3 的时候 safari 只允许用户与 video 进行交互的时候才会触发数据的加载。但是为了将更多的媒体播放控制权重新回到网页开发者，iOS 8放宽了这一限制：Safari开始支持 preload="metadata" 属性，允许<video>和<audio> 元素加载足够的媒体数据，以确定媒体的大小，持续时间和可用的轨迹。对于iOS 10中的 Safari，进一步放宽了对静音<video>元素的用户手势要求。 缘由 事实证明，人们很喜欢GIF。但与现代视频编解码器（如H.264）相比，GIF格式的编码方式与编码动画图像非常不具有性价比。我们发现，GIF的带宽可以高达十二倍。 详情 »
