2020的最后一篇

2020年我迎来了宝贝女儿的诞生。

2020年我通过了系统架构师考试。

2020年我做了很多小玩意儿。

2020年我思考了两年的小程序也在慢慢做起来。

2020年我慢慢开始学习理财、关注投资。

疫情之下,2020 仍然给我带来了很多惊喜。感恩、努力!

初学者在 UI 设计中需要知道的细节

Photo by Sandra Seitamaa on Unsplash

在实际开发中,在 UI 设计方面我总结了一些问题,其中包括色调,交互设计的一些细节。干货太多,现总结如下。

主色调明度饱和度适中

主色调主要用在突出显示按钮、交互图标的位置,高饱和度的色调更加容易和背景分离,视觉上更加突出。比如这里的叮咚买菜用的绿色,京东用的红色,闲鱼用的黄色都是明度比较适中,不会显得太白,饱和度也比较适中不会显得过于暗淡。

继续阅读初学者在 UI 设计中需要知道的细节

系统架构师备考指南

Photo by Waldemar Brandt on Unsplash

2020年9月至11月初,博客均未更新,主要是本人业余时间都用来备考软考系统架构师这一科目,考试的目的很简单,就是为了评职称。今天查分 59 58 53 顺利通过,幸喜之余分享一下备考中的干货,可以让备考的同学多一份指南,少走点弯路。

首先要从战略上明确一点,系统架构师考试并不是选拔性考试,而是一门面向社会的通过性考试,因此目标就是通过,即单科都在 45 分以上即可。考试分为三个科目分别是综合题(75道单选,2个半小时),案例分析题(简答题,一个半小时),论文(3000字大作文,2个小时)。备考也是从这三个方面展开。

继续阅读系统架构师备考指南

Hexo 本地图片上传完美解决方案

本来以为 Hexo 图片上传很容易,没想到搜索出来若干个解决方案。其中有若干还是淘汰的方案,浪费了不少时间。其实这边官方文档给出了一个最完美的解决方案

_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

然后在 hexo new post 之后把新的图片 image.jpg 放到对应的文件夹下,然后直接使用标记 ![](image.jpg) 引用即可。

Nginx 转发常规问题

Nginx 最让人头疼的其实是转发的语法。特此记录。

单条路径做映射

假如想把 /a?xxx 转发到 localhost:3000/b?xxx 那么可以写作

location /a {
        proxy_pass localhost:3000/b;
}

多条路径做映射

假如想把 /api/a /api/b 下所有路径转发到 localhost:3000/a localhost:3000/b 那么可以写作

location /api/ {
        proxy_pass localhost:3000;
}

Karma-Jasmin-Webpack 单元测试

Photo by Gabor Koszegi on Unsplash

为了确保 fast-recorder 能够在实际浏览器环境下如预期的执行,在单元测试阶段,就要在浏览器环境下进行测试。Karma 测试框架帮我很好地解决了这个问题。

Karma 本身可以提供浏览器环境,并在其中利用单元测试框架(jasmin)等来做单元测试。同时强大的是,它有一个 preprocessor(预处理器)模块,可以在浏览器加载脚本时,根据你的需要对程序进行预处理。

继续阅读Karma-Jasmin-Webpack 单元测试

IOS 视频播放黑屏问题解析

IOS 下浏览器播放本网站的视频会出现黑屏。假如在浏览器中直接访问视频文件的地址也出现黑屏,那么你就需要检查一下(通过 POSTMAN 等 HTTP 工具)后端有没有对 Range 请求头做出响应。

产生原因

IOS 下浏览器(Chrome,Safari)在请求视频流时,会默认在 HTTP 请求头中加入 Range 来向服务器请求对应的视频片段。参考这个在线视频链接,IOS 浏览器可以完美播放。使用 Fiddler 在 IOS 下抓包可以看到,在请求这个资源时(单单针对这个视频),手机发出了二次请求。

继续阅读IOS 视频播放黑屏问题解析

Fiddler IOS 抓包保姆级教程

Fiddler 端配置

选择 Tools —— Options——HTTPS,勾选如下配置。

选择 Tools —— Options——Connections,勾选如下配置。注意这里的 8888 为监听端口。

操作系统配置

确认操作系统关闭防火墙,或者开放 8888 端口。

网络配置

确保电脑和手机在一个网络中。在电脑端查看本机 IP 并记录。这里为 192.168.31.55

继续阅读Fiddler IOS 抓包保姆级教程

NGINX 反向代理百度 API

NGINX 反向代理到本机服务做过不少,但很少思考参数的意义。技术债的隐患往往会在特定时候爆发。为了解决如题的问题,我直接把配置改改拿来使用,却发现行不通。

问题

问题在于对于请求头 Host 属性的设置问题。Host 表示的是请求服务器的地址。在转发的时候,可以通过 proxy_set _header 来设置目的地址。

对于转发到本机服务,可以使用 $http_host 来指定本机作为目的地址。但是对于若想转发到非本机服务,Host 需要设置为目的服务所在的主机 IP 或者域名。

在如题所描述的场景中,我需要把请求转发到 vop.baidu.com 这个域名下的 server_api 接口。该接口属于非服务器本机服务,故需要替换 $http_host 为域名 vop.baidu.com。(场景描述 localhost/server_api => vop.baidu.com/server_api)

继续阅读NGINX 反向代理百度 API

使用 Babel Webpack 打造库

Photo by Lê Tân on Unsplash

本人工作后一直采用自顶向下的方法自学编程知识。初期的学习曲线就是直接上手框架加第三方类库,加之这些工具都比较成熟,自带转译(Babel)和打包工具(Webpack),故这两类工具的使用较少。今天在编写自己的类库后发现,使用这两种工具还是有很多问题,故记录分享如下。

工具链逻辑

转译(transpile)。Babel 转译工具的作用是将可在最新的 JavaScript 语法转化为可被旧浏览器运行的兼容代码。转译工具不会处理模块之间的依赖关系。Babel 默认会把 import export 等转译为 require 和 module.exports。

打包。在撰写本文的 2020 年,浏览器对 JavaScript 模块化的支持还是很糟糕,因此需要单独的打包工具来将各个模块聚合在一个文件中。而聚合的线索就是转译工具生成的 require 或者 import 语法。

继续阅读使用 Babel Webpack 打造库