小编最近在修测试反馈的微信播放视频的问题时候，发现微信播放视频，快进偶尔会回退几秒。才开始一直一直以为是代码在 play 之后事件监听问题。微信（X5 nn内核） Android 必须在 (durationchange) 事件触发后才能进行正常 Seek 操作。可是无论怎么调试都还是有问题，于是尝试播放了一个外链的 mp4 文件，结果惊呆了。 心情💢ORZ <imgsrc="http://img1.vued.vanthink.cn/20160801164141_2drSZ.thumb.700_0.jpeg" /> 目前问题已经反馈了涉及到QQ浏览器(9.5.0.5052+ X5: 039515GPU-SS)和微信(7.0.5)内嵌的浏览器。只能期待官方修复把，感觉腾讯 X5 团队还是需要颜控代码继承和功能回归测试。 详情 »
新海诚 导演的新作《天气之子》还是如期在19号全日上映。 在《你的名字》大火之后，这一部作品压力会显然大很多，毕竟你的名字之后越来越多的人开始和宫崎骏进行比较。如同《秒速五厘米》后新海诚的作品自己都会担心画质的问题，但是导演真的很厉害，无论是之后的《言叶之庭》 的下雨天还是《你的名字》 的陨石，都还是给了自己非常大的惊喜感觉。所以对于新作，自己还是会非常期待新的画面，当然音乐依旧是非常让人期待的，再次和 RAWINDS 的合作，以及听完部分 OST 自己也打消了疑虑。由于内地还未定档，大家可以看下海外的 tweet ，话说新电影有《你的名字》的彩蛋。由于取景大多都还是在东京，因此肯定少不了圣地巡礼，不过国内还是等电影上映吧。 大意是：在创造了一个热门作品之后，下一部作品会比预期变得困难很多，但实际上我看到它真的很棒，《天气之子》真的很有趣，如果你还没有看到它，请一定去看看！ 大意是： 看完《天气之子》，就个人而言无疑是一部杰作。有利有弊，这也是我第一次在动画电影里哭了三次，如果有时间和兴趣，不要错过。 非常开心可以看到《天气之子》，已经无法用言语去表达， 详情 »
如果第一次接触 Media Source ，大家都会注意到有一个关于 视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); //console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', 详情 »
确实标题党了，不过还是可以关心一下。最近看到苹果内部公开的一些 PPT,其中覆盖到产品说明，SDK 使用，以及具体的代码展示这些，有差不多十几个 PPT ，虽然只是 PDF ，但是还是觉得这其中有些很重要的 "原则" 值得大家去学习。后面也会提供苹果的 PDF 的下载 参考。 使用表格 其实做类比的时候，表格一直都是最直观的手段去进行对比，而这次表格非常直观的用了单线条去展示，没有混用背景色，非常清楚。 展示代码 代码展示，由于我们知道代码非常多，文字内容多，而 Apple 则采用了全屏贴代码，整张 PPT 都是代码，通过高亮来展示重要内容。 使用代码和文字段落混排的时候，一定要切记代码内容和正文的背景区分； 背景透明 为什么总觉得苹果的 PPT 高大上？其实我们在使用手机或者 笔记本的时候，一定选择去掉背景色或者透明的 PNG ，其实你去搜索谷歌图片的时候在后面加个 xxx png 自然而然就会出现背景透明的图片列表 局部高亮 我们无论是在展示菜单或者列表的时候，我们可以通过设置透明度来强调当前关注的内容。 黑色遮罩 详情 »
篮球的夏天 六月初， NBA 迎来了夏天的结局。勇士和猛龙的系列赛，有太多的故事可以说。杜兰特用自己的倔强和坚毅告诉大家，自己不是那个投敌的软蛋。卡哇伊用整个季后赛的坚持和努力，证明去年的夏天，自己不是那个因为各种原因背叛马刺的球员。尤其猛龙和雄鹿的第三场，拖着伤腿打了50分钟，他不是为谁而打球，他只是为了喜欢的这件事情。记得总决赛，卡哇伊接受采访的时候被闻到去年夏天所经历的， 卡哇伊连续说了几个 "hey man"。似乎他有太多的话想对大家说，但是只是全部静静的留在心底，当夺冠那一刻，所谓机器人也难免控制不住情绪。确实很感动。 Man! Last summer man, it's going to a lot. It's going to a lot. Oh I have a great support. I just work hard and work hard. And I 详情 »
React.js, Vue.js 的流行不是偶然，现代的工程化体系中离不开组件化的体系。我们充分享受了组件化带来工程效率的提升以及社区的优势。 Web Component是 是一些 W3C 官方定义的一些技术的合集表现，主要是下面三个内容： 自定义元素 Shadow DOM HTML 模板 自定义元素 自定元元素，也就是在 Html 中实实在在的标签，就像 DIV, SPAN ，ARTICLE 一样，我们可以写在我们 HTML 代码中一样。不过他们都是由短线连接表示的。诸如下面这些都可以 <new-slider> <base-player> <photo-dialog> 自定义元素包含自己的语义，行为以及标签内容，并且可以在不同的框架和浏览器使用。 一个简单的元素代码; class MyComponent extends HTMLElement { connectedCallback() { this.innerHTML = `<h1> 详情 »
天渐渐热起来了，有的时候早上起来就闻到空气中夹杂着夏日的气息，至于傍晚，河道两旁的青蛙也自然而然的参与到这个节气中来。 软实力 最近在知乎看到了一篇讨论 《为什么强如『死月』在阿里也只有 p6?》 。其实里面有篇回答是这样的: 实际上，我们在公司的Title叫做“工程师”，所谓工程师，是一种利用技术产生经济效益的岗位，公司去评价一个人的职级，更多是看他的工程价值，也就是能给公司带来的收益。这个收益不一定是直接的营收或者利润，可能有一定的推导关系，比如团队效率、线上质量、技术攻关等等。但是这是不是意味着技术就没用了呢？不是的，越是高级别的工程师，就越依赖深度的技术去解决工程问题。所以你可以认为，技术水平决定了你的天花板。在阿里巴巴，每年总结的时候，除了绩效，还会做人才盘点看每个人的潜力，这时候，技术水平就是主管们非常关注的选项了。 这应该是今年至少第三次谈关于 title 或者叫职责的事情。很多时候，我们总有种“自大”的感觉，觉得自己在这个方向已经很专业，感觉有时候老板都还不如自己，我们在职业成长工程中，所谓专业性，这是自己认为你在前三年职业生涯发展最重要的事情，关注技术的发展，注重自己的产出。然而当我们很多人觉得已经是 高级的 title 的时候，自我已经处于一个非常健康的学习成长和积累的 circle 详情 »
最近分享了关于前端测试的一些内容，关于开发如何通过测试来提升效率，常见的测试框架，以及什么的测试指标是我们关心的。 [1] 经常会遇到代码审查时候遭遇到非常多的"同事不理解" [2] 经常会遇到线上产生很多未知的 bug [3] 经常会遇到 Dev 和 测试理解的不一致 那么我们如何避免这样的问题发生？ 作为开发而言，我们关注，代码规范，单元测试，集成测试; 代码规范 单元测试 [11] 通过单元测试确认程序的正确性以及发现问题。 [12] 追求代码覆盖，发现无用代码 使用 Enzyme 测试 React 应用 集成测试 性能测试 [26] 我们关注页面的性能，开发在开发完成后，一定要做性能测试，这是对自己代码负责的表现。而对于线上应用级别，如果存在高并发的情况，我们需要去预估 QPS ，及时和 运维沟通，机器的数量，限流策略等。2/8 法则 可以帮助我们预估应用的 QPS 峰值（ 详情 »
很早之前，写过一篇 《使用enzyme 测试你的 React 组件》, 综合叙述了如何利用 Karma + Webpack + Enzyme 进行组件的测试， 从而确保我们的质量。 相对而言，这次会丰富一些，比如组件的 UI 事件以及 redux 引入后的测试。 项目使用 yarn-react-webpack-seed 为案例，你可以在项目里找到源码。 建立测试 安装 karma $ npm install karma karma-chai karma-chrome-launcher karma-coverage karma-jasmine karma-sourcemap-loader jasmine-core karma-webpack --save-dev 安装 enzyme 相关 npm install enzyme redux-mock-store enzyme-adapter-react-16 jasmine-enzyme --save-dev 在项目建立 test 目录，新增 karma.conf.js 然后在 package. 详情 »
同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下，我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后，我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 浏览器，我们小使用 online 事件进行监听。 document.addEventListenner(‘online’, () => { // todo }); document.addEventListenner(‘offline’, () => { // todo }) 网络心跳检测 然后很早的时候，很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。 const pingUrl = ‘https://ipv4.icanhazip.com'; 详情 »
