查看详情

【译】21个 VSCode 快捷键，帮助你快乐编程

原文： https://medium.com/better-programming/21-vscode-shortcuts-to-make-coding-faster-and-more-fun-b18b25083def @jsmanifest 我们通过安装一些工具或者扩展，有助于提升我们的编程效率，同样的掌握一些非常有用的快捷键，可以促使我们更加愉悦的开发。虽然每个人并不一定有足够的时间和经历去掌握每个快捷键的细节，但是下面 21 个快捷键一定可以帮到你。 一次性搜索全部文件 Windows: Ctrl + Shift + F Mac: Control + Shift + F 设置 Tab 颜色 (Material Theme) 如果你希望自己的 每个 Tab 与众不同，那么你可以通过设置来实现它。在 Material Theme 中提供了很多颜色可以选。 通过 快捷键 Ctrl + Shift + P 或者 Control + Shift + P 唤出面板，然后选择 Material Theme: Set accent color 随后选择具体的颜色就可以了。 红色: 详情 »

查看详情

微信视频快进回退的Bug

小编最近在修测试反馈的微信播放视频的问题时候，发现微信播放视频，快进偶尔会回退几秒。才开始一直一直以为是代码在 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 团队还是需要颜控代码继承和功能回归测试。 详情 »

查看详情

使用 JS 获取视频 Codec

如果第一次接触 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

确实标题党了，不过还是可以关心一下。最近看到苹果内部公开的一些 PPT,其中覆盖到产品说明，SDK 使用，以及具体的代码展示这些，有差不多十几个 PPT ，虽然只是 PDF ，但是还是觉得这其中有些很重要的 "原则" 值得大家去学习。后面也会提供苹果的 PDF 的下载 参考。 使用表格 其实做类比的时候，表格一直都是最直观的手段去进行对比，而这次表格非常直观的用了单线条去展示，没有混用背景色，非常清楚。 展示代码 代码展示，由于我们知道代码非常多，文字内容多，而 Apple 则采用了全屏贴代码，整张 PPT 都是代码，通过高亮来展示重要内容。 使用代码和文字段落混排的时候，一定要切记代码内容和正文的背景区分； 背景透明 为什么总觉得苹果的 PPT 高大上？其实我们在使用手机或者 笔记本的时候，一定选择去掉背景色或者透明的 PNG ，其实你去搜索谷歌图片的时候在后面加个 xxx png 自然而然就会出现背景透明的图片列表 局部高亮 我们无论是在展示菜单或者列表的时候，我们可以通过设置透明度来强调当前关注的内容。 黑色遮罩 详情 »

查看详情

Web Components

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> 详情 »

查看详情

Web 前端测试指南

最近分享了关于前端测试的一些内容，关于开发如何通过测试来提升效率，常见的测试框架，以及什么的测试指标是我们关心的。 [1] 经常会遇到代码审查时候遭遇到非常多的"同事不理解" [2] 经常会遇到线上产生很多未知的 bug [3] 经常会遇到 Dev 和 测试理解的不一致 那么我们如何避免这样的问题发生？ 作为开发而言，我们关注，代码规范，单元测试，集成测试; 代码规范 单元测试 [11] 通过单元测试确认程序的正确性以及发现问题。 [12] 追求代码覆盖，发现无用代码 使用 Enzyme 测试 React 应用 集成测试 性能测试 [26] 我们关注页面的性能，开发在开发完成后，一定要做性能测试，这是对自己代码负责的表现。而对于线上应用级别，如果存在高并发的情况，我们需要去预估 QPS ，及时和 运维沟通，机器的数量，限流策略等。2/8 法则 可以帮助我们预估应用的 QPS 峰值（ 详情 »

查看详情

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

很早之前，写过一篇 《使用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. 详情 »

查看详情

使用 JavaScript 探测网络状态

同步 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'; 详情 »

查看详情

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

Chrome 75 开始支持 Web Share API - Level 2, 这也就意味着你可以通过 JS 分享 文件，链接或者文本到其他的 App 了。 其实这个需求很早很早，我们的 PM 就开始提了，关于实现，目前比较成熟的是通过 JS Bridge，然后利用 APP 的能力唤起分享面板。但是我们还是无法通过 Chrome 或者 Safari 实现页面内通过 JS 执行唤起分享面板。详情可以见《H5 互动营销》。 canShare() 以及 share() 当然目前这个还是一个处在实验性的 API ，我们还是需要去做一些兼容性判断。分享文件，我们还需要确认这些文件是否处于可分享的状态。可以尝试 Chrome 团队给的代码 const shareData = { files: filesArray }; if (navigator.canShare & 详情 »

查看详情

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

才开始大家一直在想，什么是移动均线？ 哪里会用到？？ 对于常规的页面，实际上很难说需要到具体到有需要用到 网络宽带的预估，但是对于流媒体或者上传服务时候，这个就很重要了，我们需要根据不同网速情况，做策略上的更改，从而改善体验。 做视频播放的很多童鞋，经常在 Youtube 上看到这么一个仪表盘，界面。 大家会看到网速的实际情况。 如果叫大家来实现，实际上，或许很轻而易举会想到用一个网络资源的请求，和时间来完成做一次除法就OK了。 const start = Date.now() fetch(url, {}).then((result) => { const end = Date.now(); const bw = length / (end - start) * 8000; }) 似乎，这样就可以表示一个当前分片的网速了，但是我们实际上并不会用当前的瞬时值作为一个衡量当前宽带是否满足我们播放某种清晰度的标准。 而 hls.js 巧妙的借鉴了 移动平均 来反映当前网络的一个趋势。 移动平均 移动平均（moving average，MA），又称“ 详情 »