Artin's Blog

谁有天大力气可以拎着自己飞呀

0%

最近在忙一个外包,因为大屏展示页面是用 React 写的(使用 create-react-app),甲方想访问后端控制页面的网址就能直接访问这个大屏展示,而不是前后端分离部署。

自己尝试了一下,还是遇到了点问题。

create-react-app 会将打包的结果放在项目根目录中的 build 文件夹,打包后的路径结构:

build directory structureSource
- build - static - css - style.[hash].css - style.[hash].css.map - js - main.[hash].js - main.[hash].js.map - index.html - [more meta files]

create-react-app 打包的静态资源都放在了 static 路径下。比如打包后 index.html 中的一个链接:

index.html
<link href="/static/css/2.0a6fdfd6.chunk.css" rel="stylesheet" />

浏览器解析后,会发出一个请求 GET /static/css/2.0a6fdfd6.chunk.css

如果简单的添加一个路由返回 index.html 文件的话,就有以下的问题出现:

因为 Flask 本身就有 static_folder 的概念,所有请求 /static 路径的请求都会从配置的 static_folder 中读取文件并返回。

graph LR
A(Browser) -->|GET /index.html| app(Flask app)
A(Browser) -->|GET /static/css/style.css| app(Flask app)
app --> C{endpoints}
C -->|/index.html| view[Handled by `View` Function]
C -->|/static/\*| static[Load files from `static_folder`]

index.html 中请求的资源都会从 static_folder 中拉取,那你说把打包后的文件直接放在 static_folder 不就好了?

因为本身 static_folder 中就有一些后台页面需要的静态资源,也是按类型建立了文件夹:css/js 等,如果直接把 React 打包后的资源直接复制到 static_folder 中,那么不同的 js 文件都混杂在一起了。React 每次重新打包生成的 js 文件都不一样的话,每次更新起来还要把原来的删除再复制过去。

阅读全文 »

这是系列博客 《我的 Hexo》的第零篇,其他篇见:


使用 Hexo 已经四年已久,四年以来对博客做了很多的优化,也积累了很多经验,现在想写一写都做了什么。

可能也许大概会有这么多东西:

  1. 利用 GitHub Actions 自动部署博客
  2. 编写 scripts 在 hexo 各阶段生成内容
  3. 使用 VS Code 写博客
    1. 使用插件
    2. 使用 code snippets
  4. _config.yml 中使用危险 token
  5. 你不曾注意过的 _config.yml
  6. 在 next-theme 主题中添加自定义内容
  7. 利用好 package.json 文件中的 scripts 字段
  8. 利用好 Node.js 脚本
阅读全文 »

译自:https://arpitbhayani.me/blogs/function-overloading
作者:@arpit_bhayani
翻译已获原作者授权


函数重载是指可以创建多个同名函数,但是每个函数的形参以及实现可以不一样。当一个重载函数 fn 被调用时,运行时会根据传入的参数 / 对象,来判断并调用相应的实现函数。

int area(int length, int breadth) {
  return length * breadth;
}

float area(int radius) {
  return 3.14 * radius * radius;
}

上面这个例子中 (C++ 实现),函数 area 被两个实现重载,第一个函数允许传入两个参数 (且都是整数型),根据传入的长方形的宽高,返回长方形的面积;第二个函数需要传入一个整形参数:圆的半径。当我们调用函数 area 时,如调用 area(7) 时会使用第二个函数,而调用 area(3, 4) 时则会使用第一个。

阅读全文 »

我之前都是使用自己的邮箱订阅 Newsletter,但是每天好多邮件发送给你,混杂在一些提醒和交流邮件中,怪麻烦的。

也尝试过好几个订阅 newsletter 的应用,也了解了 mail2rss 这方面的网站和开源项目,一直没有啥好的解决方案。

有一天偶然看到 testmail.app 这个可以让开发者测试邮件服务的网站,每个用户可以有一个 namespace,然后可以构造出无限个邮件地址,也有相应的 API 用来过滤邮件等等。

testmail 免费版每个月可以接收 100 封邮件,邮件能保存一天。但是只需要设置 RSS 阅读器请求频率低于一天,肯定就能接收到所有邮件了。

那么项目思路就有了,使用 serverless 实现一个函数,这个函数每次接受 RSS 阅读器请求时都去抓取最新的邮件列表,然后响应一个 RSS 格式的 XML 文档即可。

sequenceDiagram
loop 每十分钟
RSS 阅读器->>Serverless 函数: a.获取 tag 的最新 RSS 内容
activate Serverless 函数
Serverless 函数->>testmail.app: b.请求 tag 对应的邮件列表
testmail.app-->>Serverless 函数: c.返回邮件列表
Note right of Serverless 函数: 1.处理邮件列表、内容等
Serverless 函数-->>RSS 阅读器: d.根据邮件列表生成 RSS 并返回
deactivate Serverless 函数
end
阅读全文 »

好久好久之前,看 sorrycc 的视频的时候,发现他用了一个很 tricky 的命令:cdtmp,执行命令后 shell 就会跳到 /tmp/sorrycc-xxxxxx 文件夹下,觉得十分好用。

自己也用了蛮久了,真的十分好用,有很多场景都需要用到:

想写一个验证想法的小 case,或者验证一下某个函数的用处,或者 clone 一下某个仓库查看一下相关内容。直接 cdtmp 打开一个临时文件夹,在里面直接做你想做的事情,而且完全不需要担心这些文件后续的清理问题,Windows 来说使用清理软件清理垃圾时一般都会删除临时文件,Linux 下也有相应的清除 tmp 目录的逻辑和方法。

简单介绍一下这个命令,给出 zsh 中的实现以及一个 Windows 下 PowerShell 里的同样功能的函数。

阅读全文 »

最近在学习 electron,因为在 Windows 上 electron 自带的 Notification 功能有点少,没法加按钮啥的。

查了一下,发现有人已经基于 NodeRT 做了 electron-windows-notifications,可以在 electron 展示原生的通知框。NodeRT 能让我们在 Node.js 中使用 Windows Runtime API。

然后兴高采烈的执行 yarn add electron-windows-notifications, 结果报错了:

[4/4] Building fresh packages...
[1/5] ⠈ @nodert-win10-au/windows.applicationmodel
[2/5] ⠁ @nodert-win10-au/windows.data.xml.dom
[3/5] ⠁ @nodert-win10-au/windows.foundation
[4/5] ⠁ @nodert-win10-au/windows.ui.notifications
error SECRETPATH\node_modules\@nodert-win10-au\windows.foundation: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments:
Directory: SECRETPATH\node_modules\@nodert-win10-au\windows.foundation
Output:
...
[SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
  _nodert_generated.cpp
  NodeRtUtils.cpp
  OpaqueWrapper.cpp
  CollectionsConverterUtils.cpp
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\nodertutils.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\_nodert_generated.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
  win_delay_load_hook.cc
NPMPATH\node_modules\node-gyp\src\win_delay_load_hook.cc : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\opaquewrapper.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\collectionsconverterutils.cpp : fatal error C1107: 未能找到程序集“Windows.winmd”: 请使用 /AI 或通过设置 LIBPATH 环境变量指定程序集搜索路径 [SECRETPATH\node_modules\@nodert-win10-au\windows.foundation\build\binding.vcxproj]
gyp ERR! build error
阅读全文 »

作为一个前端开发者(,偶尔会写点用户脚本 [1] 增强自己的浏览体验。

对于传统服务端渲染的页面可以直接在页面上执行脚本达到自己的目的,但是对于现在的数据流驱动的前端开发框架来说,原来的那种做法行不通了,需要找到一个方式参与到页面的渲染中。

so how to hack(actually: modify) an angular page?

阅读全文 »

做一个 React 项目的时候,想在网页上渲染数学公式,不想用别人封装好的 React 组件,采用动态加载的方式直接渲染 DOM。

[email protected] 做了很大的一个更新,使用方式也和 2.x 版本不同。

阅读全文 »

暗影精灵的键盘上有一个自带的 OEM 键,按了之后可以打开 OMEN Command Center, 一个可以对笔记本的性能,网络管理的工具。

但是我对这个控制中心需求很小,所以我直接把软件卸载了 (●´ω ` ●)。

所以,怎么去利用这个键呢?

注意:该键是没有 keycode 的,也就是不被作为键盘的输入键。

阅读全文 »