Attack on Life ⚔️

最近NAS Download Manager (for Synology)插件更新后发现只支持HTTPS地址，但是我的NAS下载服务目前仅支持HTTP，因此考虑在客户端解决该问题。

解决方案- whistle

whistle可以代理HTTPS请求，自行签发证书，因此可以解决。

1. 配置whistle及Chrome插件，确保可以拦截请求

   步骤如下，具体可查看whistle官方文档

   1. whistle开启HTTPS
   2. rootCA证书安装且信任
   3. 安装插件比如SwitchyOmega，解决Chrome走whistle代理

2. 增加并开启rule，解决HTTPS到HTTP的转换，使whistle代理后，最终还是发起http请求

   1 2	# NAS服务链接 /https(://110.100.176.222:50098.+)/ http$1

如上配置后，将地址贴到下载插件下，即可正常联通使用。

最近nginx有需求实现上传feat，惊喜发现已经支持js了，因此尝试使用js实现上传。

nginx配置

1. 为了支持njs需要模块加载

2. 具体使用js业务模块，需要使用js相关指令

3. load_module指令需要放在全局即default.conf下

例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

load_module modules/ngx_http_js_module.so;

events { }


http {

    # 这里就不再限制了，nginx默认为1MB
    client_max_body_size 0;

    js_path "/etc/nginx/njs/";

    js_import main from upload.js;

server {

   ...
    location /upload-cert {
        js_content main.resolve;
    }
   ...
}

团队最近的项目使用SB进行UI组件库开发及文档维护，在CI部署时，遇到报错如下

1
2
3
4
5
6
7
8
9
10
11

vendors~main.54994c12.iframe.bundle.js:2 Unexpected error while loading ./button.stories.tsx: Module parse failed: Unexpected token (22:2)
File was processed with these loaders:

 * ../../../cache/node_modules/@storybook/source-loader/dist/cjs/index.js
   You may need an additional loader to handle the result of these loaders.
   |     backgroundColor: { control: 'color' },
   |   },

> } as ComponentMeta<typeof Button>;
> | 
> | // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args

查询官方repo发现有个问题描述类似，解决方案是升级SB相关包npx sb upgrade

按照提示进行了下包升级，果然问题解决。

但该问题原因如何？查看下官方PR。

现象

进入页面后，一段时间内网页交互操作延时响应明显，比如光标移动到链接上，也并没有手型图标出现，同时更没法点击。等一段时间后，页面数据都完全显示出来，恢复响应。

针对这个问题，需要解决下。

首先先梳理下当前WEB页面加载后的几个操作

1. 请求后台数据
2. 数据进行base64解码
3. 表格渲染显示数据

在办公PC remote时拉取私服镜像报错，Service Available，调研发现可以如下解决。

解决办法

1. 关闭Docker App的代理

2. 本地hosts增加配置，比如9.111.111.111 xxx.1991421.cn

3. 设置~/.docker/config.json，增加hosts

   1 2 3 4 5 6 7

   { "credsStore" : "desktop", "auths" : { }, "hosts":["tcp://127.0.0.1:12639"] }

CSS中关于透明度相关设定有三个地方，RGBA中的Alpha、颜色值设定中的transparent值、Opacity属性。

平时样式写的少，导致这些基本概念模糊，这里梳理Mark下。

alpha的单词含义

Alpha 通道 - 指定对象的不透明度。

曾经一直以为这个代表着透明度，跟opacity相反，当然这个认知是错的，为什么一直被误导，其中一个原因是该词在某些词典的解释误导人，如下为欧陆词典查词，其中一部分的解释。

不自觉就会以为alpha相关设定就会是透明度的设定，其实大大的错。

准备工作

1. 下载Tuxera NTFS for Mac软件，有15天试用，因此够用

   • 选择该软件是因为Mac系统磁盘工具没有提供NTFS格式化选项
   • NTFS默认为只读，利用该软件改为读写支持

2. 格式化移动硬盘/U盘

   • 如果盘里有数据，使用工具，格式化磁盘，格式为Microsoft NTFS
   • 不要选择FAT格式，ExFAT不能正常引导，FAT要求文件大小小于4GB，超过了Windows10文件大小

3. 下载Windows镜像

   • https://www.microsoft.com/zh-cn/software-download/windows10ISO

4. 挂载系统镜像到Mac上

   • 双击ISO镜像文件即可

5. 打开终端，输入如下命令，前者为挂载的镜像文件路径，后者为挂载的硬盘/U盘路径，执行该命令

   1	cp -rp /Volumes/CCCOMA_X64FRE_ZH-CN_DV9/* /Volumes/THINK_DISK

OK后系统盘即制作完成

Chrome下习惯使用Vimium进行书签检索，针对输入，因为有些书签是中文，而有些是英文，因此还存在输入法切换情况，留意发现，Vimium是直接根据输入的字符实时检索，不论是否是中文输入法，都直接根据输入字符进行检索。因为开发场景并没遇到类似考虑，提前扫盲，这里就系统了解下。

JS下能否获取当前输入法名称信息/能否临时修改输入法？

答案都是否，JS下并不能获取输入法信息，更不能修改输入法，而部分网页做到的提示用户是否是在中英文输入法状态等，是通过输入事件及输入字符来判断的。

Chrome插件呢？如Vimium这些插件，本身除了JS能力外，还有Chrome App层面提供的一些能力，但可惜也是无法修改输入法。

JS中的输入事件input/composition

JS是单线程执行，假如前端有阻塞性运算，那么用户侧会感到UI操作卡顿，为提升体验，可以将这部分的运算交给Web Worker来解决。当然也可以将这部分运算交给后台，但具体选择哪种取决于场景及拓展性考虑，最近在开发WEB中遇到了这类问题，考虑后决定交付给前端解决，这里记录下Web worker使用。

最近做的小程序有个海报分享feat，大致做法是将一些图片+文本都绘制在一个海报Canvas上，Canvas同时支持输出为dataURL，因此下载也就很简单。但图片资源中有一种是GIF，它是动态资源，包含多帧，测试发现GIF资源在绘制海报时没有问题，但疑问是GIF动画生成静态图片时使用的哪一帧，同时如果想改怎么做呢？借着假期，了解下。

canvas.getContext(‘2d’).drawImage

绘制海报使用的即该函数，因为GIF的每帧可能是不同的，因此查看几个典型的GIF，对比发现，绘制时，使用的会是GIF的第一帧。

在Mac下可以使用preview 来预览GIF，显示的数字即帧数。