Web 开发技术分析，前端开发学习历程。
280 篇文章Ghost 是一款 Node.js 上非常好用的的内容发布平台。 The professional publishing platform 由于博客是 15年暑假弄得，那个时候 Node 版本还比较低，而且那个时候 Ghost 还并非是一个特比出色的产品。不像现在非常强大，有很多的主题可以选择，更加人性化的后台管理。 升级到 1.x 由于我已经很多年没有升级了，这次升级需要先从 0.x 的版本升级到 1.x 的版本，然后再升级到 2.x 的版本保持和 Ghost 的产品线一致。 无论如何都先请备份好你的博客 JSON 数据 资源和图片(content/images) 这目录。 你可以在后台 labs 选项里看到 export 选项，然后选择导出即可获得博客的 JSON 数据资源。 而图片目录需要自己去服务器上进行拷贝。 安装 Ghost-cli ghost-cli 详情 »
Chrome 在 72 或者之后的版本开始支持 WebVR 的 API （75+ 移至 WebXR 的草案之中）。包括所有集成 Blink 内核的浏览器都会默认支持这个 API。但是实际上，我们做 VR 开发体验的时候还是希望能在合适的头显设备(HMDs)进行功能展示。 我们看下 caniuse 对 WebVR 的支持情况 其中显示： 这个意思是目前依旧需要手动开启功能，对于 Oculus 或者 HTC vivi 的头显，集成 Chrome 内核的浏览器都对该功能表示支持。 由于国内厂商集成内核版本的问题导致一些移动端浏览器默认开启了对 webVR 的支持，但是实际效果并不是理想。 我们常规检测是 if (typeof navigator.getVRDisplays === 'function') { navigator.getVRDisplays().then(displays => { if (displays.length) { // support 详情 »
大家才开始学习 MediaSource 的时候，我们都会好奇，其中指定 mimeCodec 的行为: 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: ', 详情 »
移动设备相对传统 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: ', 详情 »
