使用 JS 获取视频 Codec

如果第一次接触 Media Source ,大家都会注意到有一个关于 视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported( 详情 »

技术人员如何做出苹果风格的 PPT

确实标题党了,不过还是可以关心一下。最近看到苹果内部公开的一些 PPT,其中覆盖到产品说明,SDK 使用,以及具体的代码展示这些,有差不多十几个 PPT ,虽然只是 PDF ,但是还是觉得这其中有些很重要的 "原则" 值得大家去学习。后面也会提供苹果的 PDF 的下载 参考。 使用表格 其实做类比的时候,表格一直都是最直观的手段去进行对比,而这次表格非常直观的用了单线条去展示,没有混用背景色,非常清楚。 展示代码 详情 »

Web Components

React.js, Vue.js 的流行不是偶然,现代的工程化体系中离不开组件化的体系。我们充分享受了组件化带来工程效率的提升以及社区的优势。 Web Component是 是一些 W3C 官方定义的一些技术的合集表现,主要是下面三个内容: 自定义元素 Shadow DOM HTML 模板 自定义元素 自定元元素,也就是在 Html 中实实在在的标签,就像 DIV, SPAN 详情 »

Web 前端测试指南

最近分享了关于前端测试的一些内容,关于开发如何通过测试来提升效率,常见的测试框架,以及什么的测试指标是我们关心的。 [1] 经常会遇到代码审查时候遭遇到非常多的"同事不理解" [2] 经常会遇到线上产生很多未知的 bug [3] 经常会遇到 Dev 和 测试理解的不一致 那么我们如何避免这样的问题发生? 作为开发而言,我们关注,代码规范,单元测试,集成测试; 代码规范 单元测试 [11] 通过单元测试确认程序的正确性以及发现问题。 [12] 详情 »

使用 Enzyme 进行 React 组件测试进阶

很早之前,写过一篇 《使用enzyme 测试你的 React 组件》, 综合叙述了如何利用 Karma + Webpack + Enzyme 进行组件的测试, 从而确保我们的质量。 相对而言,这次会丰富一些,比如组件的 UI 事件以及 redux 引入后的测试。 项目使用 yarn-react-webpack-seed 为案例,你可以在项目里找到源码。 建立测试 安装 karma 详情 »

使用 JavaScript 探测网络状态

同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下,我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后,我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 详情 »

使用原生 Web Share API 进行内容分享

Chrome 75 开始支持 Web Share API - Level 2, 这也就意味着你可以通过 JS 分享 文件,链接或者文本到其他的 App 了。 其实这个需求很早很早,我们的 PM 就开始提了,关于实现,目前比较成熟的是通过 JS Bridge,然后利用 APP 详情 »

移动平均(EWMA)在 HLS.JS 的实践

才开始大家一直在想,什么是移动均线? 哪里会用到?? 对于常规的页面,实际上很难说需要到具体到有需要用到 网络宽带的预估,但是对于流媒体或者上传服务时候,这个就很重要了,我们需要根据不同网速情况,做策略上的更改,从而改善体验。 做视频播放的很多童鞋,经常在 Youtube 上看到这么一个仪表盘,界面。 大家会看到网速的实际情况。 如果叫大家来实现,实际上,或许很轻而易举会想到用一个网络资源的请求,和时间来完成做一次除法就OK了。 const start = Date.now() fetch( 详情 »

解决 Synchronous XHR in page dismissal 的问题

如果你更新了最新的 Chrome (大约 >= 73 的部分版本),发现有些日志没有发送的时候,需要引起注意了。你需要关注是否有一些异常或者警告产生类似 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://xxxx/': Synchronous XHR in page 详情 »

Is Service Worker in Sandbox

其实这个话题,对很多人而言,如果之前没有细致了解过 Chrome 设计架构,还真不好说出答案,不过好在 Chrome 官方写了四篇文章,详细的阐释 Chrome 适合实现多进程,以及其具体作用的。 Chrome 的多进程设计 输入 URL 浏览器做了什么 Renderer process 如何渲染页面 Chrome 与页面的事件交互 那么 Service Worker 详情 »