Mica

Results 195 issues of Mica

今天解决一个 bug 的时候发现了 ref 的两种赋值方式是有区别的。 先说说我这里所说的两种方式具体是指什么。 第一种:使用 `useRef()`: ```jsx function MyInput1(props) { const inputRef = useRef(null) useEffect(() => { inputRef.current?.focus() }, []) return } ``` 第二种:使用 `useState()`: ```jsx function MyInput2(props)...

TypeScript
React

## 常用的选择:[GitHub Pages](https://pages.github.com/) ### 优点 - 自带域名可 https 访问 - 可配置自定义域名 ### 缺点 - 无法给自定义域名配置 SSL ## [Bitbucket Cloud](https://confluence.atlassian.com/bitbucket/publishing-a-website-on-bitbucket-cloud-221449776.html) 跟 GitHub Pages 的功能一样,但是: - 无法自定义域名 - 能且只能通过 https 协议访问(http 协议会被跳转到...

### 2019.04.25 更新: 大家可以用 [dart-sass](https://sass-lang.com/dart-sass) 无缝替换 [node-sass](https://github.com/sass/node-sass) 了!dart-sass 兼容 node-sass 的 API,而且安装过程无需下载二进制文件,这样大家就不需要用本篇文章的方式安装 node-sass 了。 -------- 安装 [node-sass](https://github.com/sass/node-sass) 的时候总是会各种不成功,今天我琢磨了一会儿总算知道要怎么解决了。 首先要知道的是,安装 `node-sass` 时在 `node scripts/install` 阶段会从 github.com 上下载一个 `.node` 文件,大部分安装不成功的原因都源自这里,因为 GitHub Releases...

Sass

事情是这样的。用户在划词翻译里可以选择付费使用翻译服务,后台里扣费的代码如下: ```js // 执行翻译功能的路由 router.get('/translate', async (ctx) => { const { apiName, userId } = ctx console.log('开始调用' + apiName) const user = await UserModel.findOne(userId) console.log('用户的余额为:', user.balance) // 从翻译服务那里获取翻译结果,并返回需要扣除的费用 const {...

划词翻译

一直以来,我所以为的 [sessionStorage](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage) 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除。注意:**这是错误的。** 我之所以会这么认为,是因为我写代码的时候,sessionStorage 给我的表现就是这样的。 假设我们有一个 `index.html`: ```html open myself ``` 接下来: 1. 在浏览器中打开这个 index.html,我们称之为标签页 A。注意:需要用 http 协议打开!例如 http://localhost/index.html 2. 点击页面上的链接,此时会弹出来标签页 B。 3. 在标签页 B 中打开控制台并执行 `sessionStorage.getItem('j')` 控制台会输出...

黑科技

前段时间趁腾讯云做活动的时候买了个低配的主机,想了想总不能拿来吃灰吧,所以决定在主机上装个 Docker 玩玩。腾讯云默认提供的账户是 ubuntu,安装 Docker 总是需要敲 sudo,所以我想直接用 ssh 连接到 root 用户,没想到踩了很长时间的坑,这里写个流水账记录一下过程。 ## 第一步:配置使用密匙登陆到主机 从网页登陆到主机无法方便的复制文件到主机里,所以我使用了密匙登陆的方式,这个步骤比较简单: 1. 创建一对密匙。在腾讯云的控制台里创建密匙时有两种选择,一种是让腾讯云帮你生成一对密匙,然后你下载私匙;另一种是自己在电脑上创建一对密匙,然后将公匙提供给腾讯云。 2. 创建完后,将密匙关联到主机。这一步其实就是将公匙写入了主机的 `/home/ubuntu/.ssh/authorized_keys` 文件中。 3. 如果你选择让腾讯云生成密匙,那还需要将下载的私匙放到当前登陆账户的 .ssh 文件夹下:`mv path/to/id_rsa_test ~/.ssh` 并且修改文件权限 `chmod 600 ~/.ssh/id_rsa_test`,否则会报“Permissions...

Linux
SSH

开发划词翻译的服务端时,我是直接在 Windows 10 上开发的,但会遇到一些问题,最不方便的就是终端命令不一样。比如为了删除某个文件,在 Bash 里用的是 `rm file`,但在 Windows 10 的 PowerShell 里就不一样,我目前的做法是用 [shx](https://github.com/shelljs/shx),但这样饶了一圈比较麻烦。 我今天突然想到,是不是可以在开发时让代码直接跑在 Windows 10 的 WSL Ubuntu 里?试了一下确实是可以的。 ## 配置 WSL 让项目能在 Ubuntu 里运行 以划词翻译的服务端项目为例,假设我的项目地址在 `C:\Users\xxx\hcfy-backend`,那么首先在 PowerShell...

划词翻译
WSL

## 2021 年 9 月更新 再次遇到这个问题,具体步骤: 1. 打开 Allow LAN 2. 鼠标移动到 Allow LAN 这一栏会显示一个浮窗,可以查看 WSL 的 IP 地址,一般是 172.21.xxx.xxx 3. 进入 WSL 后运行 `export https_proxy=http://172.21.xxx.xxx:7890` 4. 测试 `curl -vv...

Windows
WSL

Yarn 2 已经发布了一年多了,今天我尝试将划词翻译从 Yarn 1 迁移到了 Yarn 2,但折腾了几个小时之后,我决定重新用回 Yarn 1。 在这里记录一下原因,等到以后再准备用 Yarn 2 时,看看有没有改进。 ## Webstorm 对 PnP 的支持不够好 使用 PnP 之后,Webstorm 报了两个错误: - eslint: 找不到 eslint 的 package 了。...

Yarn v1

经过一番折腾,我终于将划词翻译的网站从 hcfy.limingkai.cn 迁移到 hcfy.app 了,本来以为万事大吉了,但测试的时候又发现了一个问题:跨站请求没有携带 cookie,但是在迁移前是正常携带了 cookie 的。 先说一下背景:用户在划词翻译内登录之后,会有一个 cookie 被写进浏览器,cookie 的域跟接口地址是同一个:`hs-api.limingkai.cn`。然后,hcfy.limingkai.cn 会通过接口获取用户的信息,在请求接口的时候,浏览器会自动带上 cookie,从而实现了用户认证。 但是,当我把网站地址从 hcfy.limingkai.cn 迁移到 hcfy.app 之后,这个 cookie 没有被浏览器携带上去。 我首先确认了调用 `fetch()` 时正确设置了 `credentials: 'include'`,然后确认在浏览器地址栏里直接打开 `hs-api.limingkai.cn` 的时候,通过 Chrome Dev...

划词翻译