Web 开发技术分析，前端开发学习历程。
277 篇文章移动设备相对传统 PC , 对 Web 的限制相对而言会更加严格一点，尤其 Webkit 针对 网页的权限限制非常严格。 比如我们常见的自动播放，随着 Safari 的限制，后面 Chrome 也开始限制音视频的自动播放功能。 同样的对于头显类设备，注入 Facebook Oculus 系列(Go, Quest 等)，三星 MR 等，作为移动设备对音视频同样采取了一些限制。我们在开发 VR 的时候，必然需要唤起 VR 模式， 类似自动播放 的策略，我们也需要做唤起 VR 的手势交互逻辑。 当然唤起失败后，我们需要在界面出现点击的按钮，让用户手动点击。 // display 是 之前 navigator.getVRDisplays() 获取的关于可用头显设备对下 display.requestPresent([ { source: canvasElement, }, ]) .then(() => { console.log( 详情 »
目前小程序生态越来越丰富，微信给予了小程序一定的硬件通信能力这是之前 Web 很少尝试的事情。 关于蓝牙，常见的就下面几个 API： startBluetoothDevicesDiscovery 开始搜寻附近的蓝牙外围设备 openBluetoothAdapter 初始化蓝牙模块 wx.onBluetoothDeviceFound 监听寻找到新设备的事件 wx.writeBLECharacteristicValue 向低功耗蓝牙设备特征值中写入二进制数据 wx.onBLEConnectionStateChange 监听低功耗蓝牙连接状态的改变事件 wx.createBLEConnection 连接低功耗蓝牙设备 不过实际我们在实现过程中，我们可能还会遇到一些本身 API 在不同平台上 BUG。 中文乱码 打印的时候，第一个发现的问题便是打印机无法正常打印中文字符串。在向蓝牙写数据的时候，我们实际上市向蓝牙发送的 buffer ，因此我们需要将对应的字符串转换成设备可支持的中文转码，比如 GBK GB2312，网上有一些现成的库，安利一个简单的 github https://github.com/inexorabletash/text-encoding 这样的话，我们只需要进行引用，然后 // text-encoding 为引用的代码目录 import { TextEncoder } from '../text-encoding'; 详情 »
一般接触音视频开发的前端比较少，但实际里面涉及的知识点非常多，因此做一个脑图，帮助有兴趣的同学学习和研究相关知识点。 基本 Web 多媒体开发覆盖非常多的方面，其中，视频，音频，以及 WebRTC 都比较成熟，而近年来的 WebXR(AR/VR) 也成为大家比较热情研究的内容。它旨在给人类带来听觉和视觉上的冲击。 其实 Mozilla 做过一个专项的列表 Web media technologies ，列举出当前音视频的知识点。 Audio Video WebRTC Media Capture and Streams API WebGL WebXR WebVR 虽然看着只是一个小的点，但是进去了解后，其实每个领域都需要掌握一定基础知识才能深入学习。 于是自己的初衷便是罗列一些关键的知识点帮助大家有一个总体的概念。 Github 地址: https://github.com/JackPu/web-media-developer-guide 罗列一些常用的知识点和资源： Video Video 元素 Video Element Video Events 详情 »
原文地址: https://medium.com/netflix-techblog/modernizing-the-web-playback-ui-1ad2f184a5a0 这一篇是奈飞前端工程师分享 Web团队在构建新的播放器时候遇到的困惑和解决思路，我们在设计播放器的时候，可能需要考虑到诸多方面，UI 扩展，测试，底层设计，面向多业务多团队等。希望这篇文章可以帮助到你。 从2013年开始，Netflix 的团队一直将重心放到开发视频播放的新特性，而始终未关注播放的视觉UI的改进。 而在过去两年，Web UI 团队制定了一个非常长远的计划，给我们的会员提供更加出色的播放体验。 播放由下面三个维度构成: 播放前(Pre Play，前贴) 主要是视频播放前给用户呈现的内容 视频播放中(Video Playback， 中场) 当用户正在观看视频，用户进行视频播放、暂停控制，调节音量等 播后结束(Post Play， 后贴)当用户观看的视频结束的时候，出现下一集或者推荐内容等 在经过复杂的 AB 测试， 以及随后的总结，我们完成了我们播放器的 UI，下面是我们的分享这一路的心得体会。 成功没那么容易 从2016开始，我们优先是使用 React 详情 »
原文： 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 随后选择具体的颜色就可以了。 红色: 详情 »
小编最近在修测试反馈的微信播放视频的问题时候，发现微信播放视频，快进偶尔会回退几秒。才开始一直一直以为是代码在 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 团队还是需要颜控代码继承和功能回归测试。 详情 »
如果第一次接触 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 自然而然就会出现背景透明的图片列表 局部高亮 我们无论是在展示菜单或者列表的时候，我们可以通过设置透明度来强调当前关注的内容。 黑色遮罩 详情 »
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> 详情 »
最近分享了关于前端测试的一些内容，关于开发如何通过测试来提升效率，常见的测试框架，以及什么的测试指标是我们关心的。 [1] 经常会遇到代码审查时候遭遇到非常多的"同事不理解" [2] 经常会遇到线上产生很多未知的 bug [3] 经常会遇到 Dev 和 测试理解的不一致 那么我们如何避免这样的问题发生？ 作为开发而言，我们关注，代码规范，单元测试，集成测试; 代码规范 单元测试 [11] 通过单元测试确认程序的正确性以及发现问题。 [12] 追求代码覆盖，发现无用代码 使用 Enzyme 测试 React 应用 集成测试 性能测试 [26] 我们关注页面的性能，开发在开发完成后，一定要做性能测试，这是对自己代码负责的表现。而对于线上应用级别，如果存在高并发的情况，我们需要去预估 QPS ，及时和 运维沟通，机器的数量，限流策略等。2/8 法则 可以帮助我们预估应用的 QPS 峰值（ 详情 »
