查看详情

头条/支付宝/猿辅导 Web 前端面试经历

由于公司年前的一些战略调整，和自己预感公司路线的担忧，自己也不得不提前准备一些后路，这期间陆续面试了头条，西瓜视频这边，支付宝公益这边和猿辅导这块。这次和三年前的职业变更，leetcode 刷了一些，但是其实也没刷多少，至少面头条的时候，也只是刷了少数 easy / medium 和那些后端相比少了很多。 然后就是特别推荐这个技术图，去准备复习的知识点: 现代前端技术知识体系 这期间，还有就是对自己特别模糊记忆不清楚的一定记笔记，这期间自己 Evernote 也不断誊抄“答案” 也有 32篇左右，主要还是需要不断加强记忆，尤其面试前。 简单说下三家的各自经历吧。 字节跳动-视频架构 这个大概是十一月面的，这个时候离职意愿还没有那么强烈，而是帮助前同事去完成一个内推名额。打心底，我觉得头条加班多，以及江湖一些小恩怨，我不太偏向去。不过面试还是认认真真的准备，听闻面试很难，加上自己本身是偏 Engineering (Production > Science)多点那种， 所以感觉跪的概率还是比较大。 大概一面是交叉面，是在头条的海淀总部那边，是安全的前端小哥，感觉年龄很年轻（我前同事说她去头条最大感觉就是小鲜肉太多了）。一面纯粹是基础面试题，涉及 JS 的非常多，大概题目我后面记录了下： 详情 »

查看详情

Web 前端崩溃监控优化历程

如何监听浏览器崩溃一直都是前端的难点。本文利用 Service Worker 的一些特性，实现对页面的崩溃的监控。 详情 »

查看详情

【译】人眼对 AR 空间的理解

原文链接: 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， 详情 »

查看详情

如何免费阅读 Medium 文章

Step1: 下载 Chrome 浏览器; Step2: （跨过山和大海）后打开浏览器，浏览 Medium ,然后打开你想阅读的文章；你可能会看到下面提示； step3: 没关系，接下来，你可以使用无痕模式，打开 Chrome 的无痕模式，然后将 url 粘贴进去就行了。 温馨提示: 如果有能力可以付费订阅的还是可以尽力付费 每月5刀，也不是很贵，也算是鼓励创作者。 详情 »

查看详情

AR/VR 显示技术原理 (下)

原文地址: 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一样，此显示类型由复杂的电子网格组成，以按顺序控制每行中的各个像素。它不包含使更新速度变慢并且保持像素状态高功耗的存储电容器。 详情 »

查看详情

《转》着色器语言 GLSL (opengl-shader-language)入门大全

基本类型 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 详情 »

查看详情

Getting Started with vue-core-video-player to create video player

I have focused on the video player in the last few years. With the growth of video content and bandwidth, so many websites using video to give users more information. So I hope this vue.js plugin helps you solve it. vue-core-video-player is a lightweight video player for Vue.js. It is easy to get started. 详情 »

查看详情

使用 chrome://media-internals 更好的进行音视频 Debug

随着短视频和在线教育办公的兴起，我们非常倚重浏览器的音视频项目开发。 Chrome 提供了一款非常好的内部状态栏，帮助我们去了解当前音视频的编码，buffer 状态等信息。 我们可以随机打开两个在线视频播放网站比如: https://www.bilibili.com/bangumi/play/ep313573 https://v.youku.com/v_show/id_XMzQ2OTk2Mjky.html 然后我们可以在浏览器新建 tab 输入 chrome://media-internals/ 我们可以看到四个 tab Players 当前播放视频的日志信息 Audio 当前音频的播放日志信息 Video Capture 当前摄像头的状况 Audio Focus 当前音频播放的 Session 其中我们主要关心前两个 Tab。 在 Players 我们是一个看到一个历史纪录，我们可以根据视频的 CDN 源找到当前正在播放的视频。然后点击，最底部我们可以在最底部看到两栏，Player Properties 和 Log。 详情 »

查看详情

[转]10种常见的软件架构模式

原文地址: https://www.cnblogs.com/IcanFixIt/p/7518146.html Tips 原文作者：Vijini Mallawaarachchi 原文地址：10 Common Software Architectural Patterns in a nutshell 有没有想过要设计多大的企业规模系统？在主要的软件开发开始之前，我们必须选择一个合适的体系结构，它将为我们提供所需的功能和质量属性。因此，在将它们应用到我们的设计之前，我们应该了解不同的体系结构。 什么是架构模式？ 根据维基百科中的定义： 架构模式是一个通用的、可重用的解决方案，用于在给定上下文中的软件体系结构中经常出现的问题。架构模式与软件设计模式类似，但具有更广泛的范围。 在本文中，将简要地解释以下10种常见的体系架构模式，以及它们的用法、优缺点。 分层模式(Lyered pattern) 客户端-服务器模式(Client-server pattern) 主从设备模式(Master-slave pattern) 管道-过滤器模式(Pipe-filter pattern) 代理模式(Broker pattern) 点对点模式( 详情 »

查看详情

terraform aws_lb_listener 配置详解

terraform 是一款通过代码来组织基础架构的工具。 Use Infrastructure as Code to provision and manage any cloud, infrastructure, or service 如果你是用的 AWS 的整套服务，你可以通过它实现对 S3, ECR, web load balancer 等服务的配置。当然它除了支持 AWS 也支持 阿里云 Google Cloud 等平台。非常适合不需要太多运维知识的工程师。 今天主要是我们需要配置域名和应用的绑定。比如我们部署了某个 Web 服务，实现域名和应用的关联，我们需要用到 aws_lb_listener 官方有提供一段参考，类似这样的: resource "aws_lb_listener_rule" "static" { listener_arn 详情 »