Web 开发技术分析，前端开发学习历程。
269 篇文章最近接触到了 gerrit ，主要方便大家进行代码 Review； 当然大家可能会遇到 review 发出去后，发现还有一些需要更改的，又需要重新提交一些。为了保持同一个 commit id ，你可以使用 # 回撤 git reset --soft HEAD~1 git add . git commit -m 'paste your commit content' 你只需要把网页里面的 commit 内容粘贴进去就好，这样发就回指向到同一个 review url 地址了。 详情 »
各大厂商在媒体播放这块一般管控都比较严格，所以经常会出现一些非常规的行为，比如 iOS 唤出全屏，比如自动播放，比如画中画(PiP) 无法唤起等问题。 在 iOS 中，我们各个 App 引入的 Webview 容器都是官方推荐的 WKWebView ，我们需要它来加载我们的网页，从而完成部分功能。但是处于安全隐私的考虑，它默认的一些属性是并不开启的。其中我们比较关注的视频播放有这么几项： applicationNameForUserAgent 用于设置 WebView user agent allowsInlineMediaPlayback 是使用h5的视频播放器在线播放, 还是使用原生播放器全屏播放 mediaTypesRequiringUserActionForPlayback 允许哪些媒体格式需要用户手动触发播放 allowsAirPlayForMediaPlayback 是否允许 Apple 的 Airplay allowsPictureInPictureMediaPlayback 是否允许 画中画模式(PiP) 在 Swift 中，我们可以简单的初始化一个 webview struct WebView: UIViewRepresentable { let request: URLRequest var config = WKWebViewConfiguration( 详情 »
As is known to us. HLS is an important video format for all big video service platform for Apple, Netflix and Tencent Video Entertainment. HLS is a media streaming protocol for delivering visual and audio media to viewers over the internet. HLS protocol chops up MP4 video content into short (10-second) chunks with the .ts file 详情 »
iOS 13 在升级的时候 Webkit 更新了部分描述，其中有一点 Added a permission API on iOS for DeviceMotionEvent and DeviceOrientationEvent. 开始对设备运动和旋转进行授权才可以启用数据的读取。 关于设备运动和旋转的数据，iOS 12+ 时候就进行过一次调整，需要用户手动前往 Safari 设置。这个时候你需要提示用户如何进行设置; 当然对于 iOS 13 的话，我们需要在用户和页面交互后，出发 权限申请; $('.btn').on('click', function() { if (typeof DeviceOrientationEvent.requestPermission === 'function') { DeviceOrientationEvent.requestPermission() .then(permissionState => { if (permissionState === 'granted') { // handle data } else { // handle denied } }) .catch( 详情 »
由于公司年前的一些战略调整，和自己预感公司路线的担忧，自己也不得不提前准备一些后路，这期间陆续面试了头条，西瓜视频这边，支付宝公益这边和猿辅导这块。这次和三年前的职业变更，leetcode 刷了一些，但是其实也没刷多少，至少面头条的时候，也只是刷了少数 easy / medium 和那些后端相比少了很多。 然后就是特别推荐这个技术图，去准备复习的知识点: 现代前端技术知识体系 这期间，还有就是对自己特别模糊记忆不清楚的一定记笔记，这期间自己 Evernote 也不断誊抄“答案” 也有 32篇左右，主要还是需要不断加强记忆，尤其面试前。 简单说下三家的各自经历吧。 字节跳动-视频架构 这个大概是十一月面的，这个时候离职意愿还没有那么强烈，而是帮助前同事去完成一个内推名额。打心底，我觉得头条加班多，以及江湖一些小恩怨，我不太偏向去。不过面试还是认认真真的准备，听闻面试很难，加上自己本身是偏 Engineering (Production > Science)多点那种， 所以感觉跪的概率还是比较大。 大概一面是交叉面，是在头条的海淀总部那边，是安全的前端小哥，感觉年龄很年轻（我前同事说她去头条最大感觉就是小鲜肉太多了）。一面纯粹是基础面试题，涉及 JS 的非常多，大概题目我后面记录了下： 详情 »
如何监听浏览器崩溃一直都是前端的难点。本文利用 Service Worker 的一些特性，实现对页面的崩溃的监控。 详情 »
原文链接: https://uxdesign.cc/human-eyes-understanding-of-space-for-augmented-reality-d5ce4d9fa37b @Kore 从工程的角度来看，我们的眼睛是精密的光学传感器，其结构长期以来一直被用作设计相机的蓝图。光通过一系列光学元件进入，其中折射和聚焦都发生在这里。光圈控制通过光圈的光量。随后的光图案落在图像平面上，电信号从该图像平面发送到大脑。然后将这些信号解码为图像。尽管眼睛的功能本身就是一个有趣的话题，但是为了简单起见，我还是自由地忽略了眼睛如何工作的很大一部分。但是，我敢肯定，您会有所了解。 可见光谱 人类的视觉离不开光的存在。光是电磁辐射的一种形式，是刺激人类视觉的关键。这种辐射以波的形式在空间中移动，并能够刺激视网膜产生视觉感。电磁辐射根据其波长进行分类，波长是波的两个波峰之间的距离。尽管整个电磁频谱都包括无线电波，红外线，X射线和其他波类型，但人眼仅对380-740纳米之间的款窄带*敏感。这称为可见光谱。 1纳米= 1米的十亿分之一 人眼的基本特性 视场角（FOV） 它定义为两只眼睛都能看到的图像的总角度大小。平均而言，水平双眼FOV为200度，其中120度为双眼重叠。双眼重叠对于进一步讨论的立体和其他深度提示尤其重要。垂直视场约为130度。 瞳距（IPD） 顾名思义，它是眼睛的瞳孔之间的距离，是双目观察系统的一个非常重要的考虑因素。这个距离因性别和种族而异。不正确的IPD可能会导致不良的眼镜对准，图像失真，眼睛疲劳和头痛。成人的平均IPD约为63mm， 详情 »
Step1: 下载 Chrome 浏览器; Step2: （跨过山和大海）后打开浏览器，浏览 Medium ,然后打开你想阅读的文章；你可能会看到下面提示； step3: 没关系，接下来，你可以使用无痕模式，打开 Chrome 的无痕模式，然后将 url 粘贴进去就行了。 温馨提示: 如果有能力可以付费订阅的还是可以尽力付费 每月5刀，也不是很贵，也算是鼓励创作者。 详情 »
原文地址: https://medium.com/hackernoon/fundamentals-of-display-technologies-for-augmented-and-virtual-reality-c88e4b9b0895 @Kore 之前在AR/VR 显示技术原理-上篇翻译过关于人类视觉基本原理和对于空间的理解，这一部分主要翻译现有显示技术的硬件和底层材料使用。 显像技术 图像显示技术在过去一些年发展的极为迅速。高端的 CRT 已经被四种主要的技术所取代: 液晶显示器(LCD) LCD在高清电视中很常见，并且自1980年代以来一直用于AR/VR显示器中。这种显示类型由包含液晶分子的单元阵列组成，该单元夹在两个偏振片之间。这种装置安置于在于数百万个晶体管的薄玻璃基板之间。对于彩色LCD，将包含红色，绿色和蓝色滤光片的附加基板，放置在该基板的每个单元上方。单个RGB液晶单元称为子像素。三个子像素形成一个像素。 电流流过玻璃材料，改变电流可以使LCD调节光的通过以产生精确的颜色。如果所有子像素都完全打开，则会产生白光。 液晶单元不发光，需要背光。液晶单元只能改变光的通过以产生所需的颜色并随后产生图像。 发光二极管（OLED） 此显示技术基于有机（碳和氢键结合）材料，当施加电流时会发光。这是一种固态显示技术，其中通过有机片的能量以光的形式释放，也称为电致发光。可以通过仔细设置有机发光来控制颜色，但是大多数制造商在OLED堆栈中添加了红色，绿色和蓝色薄膜。OLED面板有两种类型： 被动矩阵有机电激发光二极管（PMOLED）： 与CRT一样，此显示类型由复杂的电子网格组成，以按顺序控制每行中的各个像素。它不包含使更新速度变慢并且保持像素状态高功耗的存储电容器。 详情 »
基本类型 void 空类型,即不返回任何值 bool 布尔类型 true,false int 带符号的整数 signed integer float 带符号的浮点数 floating scalar vec2, vec3, vec4 n维浮点数向量 n-component floating point vector bvec2, bvec3, bvec4 n维布尔向量 Boolean vector ivec2, ivec3, ivec4 n维整数向量 signed integer vector mat2, mat3, mat4 2x2, 3x3, 4x4 浮点数矩阵 float matrix sampler2D 2D纹理 a 2D texture samplerCube 盒纹理 cube mapped texture 详情 »
