历史

我也是用了 spf13-vim + vundle 有七八年了, 之中还用过Pathogen 之类的

这次随着ubuntu $20\to 22$的升级, 有不少之前的插件不支持vim8,不能用了, 虽然根据官网消息,似乎vim9已经出来了

vim8 也有自带的package管理方案:h packages, 看起来需要自己用git维护, 而用vim-plug只需要维护vimrc, 而在8之上还有dein,minpac的插件管理工具

而且还有nvim和vscode+vim键位的一些解决方案

但我有点懒 宁愿多配配 也暂时没想着改习惯

本机是ubuntu, 就没管win和mac的, 其它的看各种工具的官方文档吧

閱讀全文 »

第一次被pip搞了几个小时

壮着胆子,在Ubuntu 22.10还没发布前,把系统从20.04.5升级到了22.04.1, 以我从12->14,14->16,16->18,18->20多年的经验来看, 这次竟然没问题! 厉害了, 以前每次升级都会炸点东西, 然后最终还是重装式升级, 这次竟然没啥严重的炸掉

然后pip3 install -e .出问题了

先是报没权限,但看报的路径,没往用户目录下写,在写root, 作为一个胆小的人, 向来杜绝777的

翻了半天google和github

看到一个方案:setup.py中加上

1
2
3
import site
import sys
site.ENABLE_USER_SITE = "--user" in sys.argv[1:]

加完以后, 恩 是没有问题了

然后报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
× python setup.py develop did not run successfully.
│ exit code: 1
╰─> [29 lines of output]
running develop
/usr/lib/python3/dist-packages/setuptools/command/easy_install.py:158: EasyInstallDeprecationWarning: easy_install command is deprecated. Use build and pip and other standards-based tools.
warnings.warn(
Traceback (most recent call last):
File "<string>", line 2, in <module>
File "<pip-setuptools-caller>", line 34, in <module>
File "/home/cromarmot/Documents/computer/oiTerminalv2dev/setup.py", line 6, in <module>
setup()
File "/usr/lib/python3/dist-packages/setuptools/__init__.py", line 153, in setup
return distutils.core.setup(**attrs)
File "/usr/lib/python3/dist-packages/setuptools/_distutils/core.py", line 148, in setup
return run_commands(dist)
File "/usr/lib/python3/dist-packages/setuptools/_distutils/core.py", line 163, in run_commands
dist.run_commands()
File "/usr/lib/python3/dist-packages/setuptools/_distutils/dist.py", line 967, in run_commands
self.run_command(cmd)
File "/usr/lib/python3/dist-packages/setuptools/_distutils/dist.py", line 985, in run_command
cmd_obj.ensure_finalized()
File "/usr/lib/python3/dist-packages/setuptools/_distutils/cmd.py", line 107, in ensure_finalized
self.finalize_options()
File "/usr/lib/python3/dist-packages/setuptools/command/develop.py", line 52, in finalize_options
easy_install.finalize_options(self)
File "/usr/lib/python3/dist-packages/setuptools/command/easy_install.py", line 270, in finalize_options
self._fix_install_dir_for_user_site()
File "/usr/lib/python3/dist-packages/setuptools/command/easy_install.py", line 400, in _fix_install_dir_for_user_site
self.select_scheme(scheme_name)
File "/usr/lib/python3/dist-packages/setuptools/command/easy_install.py", line 741, in select_scheme
scheme = INSTALL_SCHEMES[name]
KeyError: 'unix_user'
[end of output]

又搜,发现的确是setuptools有bug,然后60.0.2修复了

閱讀全文 »

写在 2022 年的 静态博客选择

调研

用了Hexo很久了,期间也有不少其它产品, 也试了试这些框架

对于我, 核心需求是markdown + code高亮 + tex + rss + 二进制分页+tags+category 支持, 操作期望是0代码, 可以简单yaml/toml配置,和复制配置的配置行为, 然后有个基本不错的theme

毕竟主要产出在markdown而不是搭建

本地方案是 obsidian/vscode/vim 就可以了

閱讀全文 »

TLDR: setuptools在2023的体验的确比不上新工具hatching

Step by Step

install build

1
pip install --upgrade build

基础使用

提供pyproject.toml文件, 包含build-system section

1
2
3
4
5
6
7
8
9
10
[build-system]
requires = ["setuptools"]
build-backend = "setuptools.build_meta"

[project]
name = "yourname-packagename"
version = "0.0.1"
dependencies = [
"requests",
]
閱讀全文 »

TS Cheat Sheet

为什么写这篇

antfu的题目 大多就是基础方法+递归, issues充斥着重复内容, 最开始还有点TS的味道, 后面完全变成了只有基础方法, 组合出一个东西, 感觉这个更适合作为递归练习题, 而不是TS练习题 (没有数值强行用数组拼接+length, 等等

TS有文档,是英文的,难以用中文检索

本篇呢,是cheatsheet,不是document,把实际会用到常用的一些列出来+一些场景描述

閱讀全文 »

带sudo的一定小心, 别选错盘了

工具推荐

bcompare

gparted

常用命令

io测试

https://linuxreviews.org/HOWTO_Test_Disk_I/O_Performance#Testing_random_4K_reads

大块读

1
fio --name TEST --eta-newline=5s --filename=temp.file --rw=read --size=2g --io_size=10g --blocksize=1024k --ioengine=libaio --fsync=10000 --iodepth=32 --direct=1 --numjobs=1 --runtime=60 --group_reporting

大块写

1
fio --name TEST --eta-newline=5s --filename=temp.file --rw=write --size=2g --io_size=10g --blocksize=1024k --ioengine=libaio --fsync=10000 --iodepth=32 --direct=1 --numjobs=1 --runtime=60 --group_reporting

随机4K读

1
fio --name TEST --eta-newline=5s --filename=temp.file --rw=randread --size=2g --io_size=10g --blocksize=4k --ioengine=libaio --fsync=1 --iodepth=1 --direct=1 --numjobs=32 --runtime=60 --group_reporting
閱讀全文 »

背景

众所周知, change detect要解决的事情,就是数据变化 触发 视图变化,而最常见的两个问题是如何探测变化,和如何减少不必要的更新

vue用修改getter/setter或proxy的方式 来完成依赖收集和变化通知,使用lazy watcher来减少更新

svelte 采用编译时更改代码的行为, 避免检测

react 采用setState函数调用 和 队列控制批量更新

那ng呢

NgZone

ng: 什么时候会有视图更新

  • 用户的操作事件: click/change/input
  • 去后台请求响应后
  • Timers:

zone.js 能够维持运行时上下文, zone有生命周期钩子, 且Monkey-patched了一些方法(setInterval,alert,prompt,addEventListener,removeEventListener)

NgZone, 提供 run(callback)/runOutsideAngular(callback), 分别用于当三方api中的异步回调想要修改内容时触发检查,和普通的操作中希望避开检查

你还可以设置 ChangeDetectionStrategy.OnPush, 手动触发更新检查

你也可以动态的通过ChangeDetectorRef进行检查的启用和停用

甚至你可以 通过 module 中 { ngZone : 'noop'} 去一定层级禁用它,然后自己实现响应式都可以

而react是把数据与视图绑定的叫做state,没绑定的叫做ref

总结一下

以渲染10000个可以draggle的svg作为例子, 通过cdr并不能完全避免检测,因为你的mouse move也会触发检测,只是没有变化发生而已

而通过在mouseDown中的runOutsideAngular中给mousemove绑定,就可以实现mouse move 也不触发检测, 再在mouseUp中移除监听,并且通过this.zone.run触发更新检测

而对于多个异步的调用过程,在zone的加持下也容易看到调用的“栈结构”

参考

youtube zone

https://github.com/angular/angular/tree/main/packages/zone.js

https://angular.io/guide/zone

https://angular.io/api/core/ChangeDetectionStrategy

https://angular.io/api/core/ChangeDetectorRef

问题

个人的网页需要一些书目数据,印象中,老的豆瓣直接是页面还是接口,能获直接取到,可以作为爬虫入门练手

然而前天一看,新版的豆瓣已经不明文返回数据了

https://search.douban.com/book/subject_search?search_text=%E5%AE%9E%E5%8F%98%E5%87%BD%E6%95%B0&cat=1001

预备知识

C++函数调用:这个知识点让你知道函数调用堆栈的常见设计

js调试:chrome断点,格式化代码,console,js基本语法,

思路

定位数据来源

一般来说 只要页面不用花里胡哨的技巧,比如把数据放在png里的话,一般来说,数据只会在Fetch/XHR,JS,htmlws

通过页面展示的实变函数论 去上述类型中搜索,结果没有任何内容中直接包含数据

閱讀全文 »

问题

一个支持 任意多参数,可以柯里化的加法函数

思路

直接返回函数 保留已传内容的加和

toString 支持输出值

实现

1
2
3
4
5
6
7
8
9
10
function add() {
const createF = (v) => {
const b = function () {
return createF(v + [...arguments].reduce((s, cur) => s + cur, 0));
};
b.toString = () => v;
return b;
};
return createF([...arguments].reduce((s, cur) => s + cur, 0));
}

使用

1
2
3
4
5
6
7
8
9
console.log(+add(1));
console.log(+add(1, 2));
console.log(+add(1, 2)(3));
console.log(+add(1, 2)(3)(4));
const x = add(5);
console.log(+x(6));
console.log(+x(7)(8));
const y = x(9)(9, 10);
console.log(+y());

问题

不论是面试也好,培训新人也好,自己总结也好,做个这些子集的超集。这里尽量给一手资料的链接,和一些公共维护的文档,也建议大家少看博客这类二手资料/非公共资料。

RoadMap

前端基础

HTML 与 语义化 HTML

css 与 css3

js

js mdn

基本开发技能

git

如何使用 google 搜索/《提问的智慧》

linux/wsl/常用 linux 命令

基本数据结构和算法(https://oi-wiki.org/ , codeforces.com 1900 分以下的题)

设计模式

前端包工具

npm/yarn , nvm

Webpack/Rollup/Parcel

Angular CLI/Nuxt/Next/Gatsby/CRA

Bazel

gulp/npm scripts

样式

sass/less/postcss

tailwind

Angular Material/Element UI/Ant Design

代码风格

Angular Styleguide/Vue Styleguide/Reactjs advanced guides

Angular Schematics

eslint/prettier/git hooks

三方基础

TypeScript

RxJs

状态管理

Flux/@ngrx/Angular Services/Vuex/Redux

PWA

@angular/pwa/Nuxt pwa/Workbox

Router

Vue router / Angular router / React router

非浏览器

Ionic/React Native/Electron

SSR

Flutter

WASM

Testing

单元:Jasmine/Karma/Jest

e2e:

Util

日期 dayjs/Momentsjs

轮播 swiper

图表 echarts

条形码 jsbarcode

二维码 qrcode

2021 frontend roadmap

常用知识

异步通信

callback

Promise

async/await

Observer

RxJs

0%