{friend.name ?? ''}{friend.title ?? ''}
+
+
+
+{/if}
+```
+
+根据具体的页面效果修改了 Demo 中的 CSS 样式
+
+```html title="/src/lib/components/extra/project.svelte"
+
+
+{#if project.id === 'footer'}
+
+{:else}
+
+
+ {#if friend.avatar}
+
+ {#if friend.descr}
+
+ 
+
+ {:else}
+
+
+ {/if}
+
+ {(friend.name ?? friend.title).charAt(0)}
+
+
+ {friend.name ?? ''}
+ {friend.title}
+
+ {friend.descr}
+ {/if}
+ {project.feature}
+
+
+
+{/if}
+```
+
+### 页面
+
+- 参考：`/urara/friends/index.svelte`
+- 新建：`/urara/projects/index.svelte`
+
+```html title="/urara/friends/index.svelte"
+
+
+
+
+
+ 
+
+
+
+
+
+ {project.name}
+
+ {#each tags as tag}
+ {tag}
+ {/each}
+
+ {@html project.description}
+
+
+
+
+
+
+
+
+
+
+```
+
+```html title="to-top.min.svg"
+
+```
+
+其他参考/实现方式：
+
+- [vue 返回顶部的组件 BackTop](https://blog.csdn.net/m0_46217225/article/details/117933815)
+- [vue-simple-scroll-up/ScrollToTop.vue · GitHub](https://github.com/asdf1899/vue-simple-scroll-up/blob/master/src/ScrollToTop.vue)
+- [Vue.js - Scroll Back To Top Button Without Library](https://codepen.io/webty_mizusawa/pen/QWLMeqE)
+- [Vue3 从 0 到 1 组件开发-基础组件：BackTop 回顶 - 掘金](https://juejin.cn/post/6993729338843594783)
+- [vue 相同路径刷新怎么回到顶部 - 掘金](https://juejin.cn/post/6873264845915947016)
+
+题外话：||BootStrap 的文档写得好烂||
diff --git a/urara/2022-06-12-cloudflare/+page.md b/urara/2022-06-12-cloudflare/+page.md
new file mode 100644
index 00000000..d06b9da4
--- /dev/null
+++ b/urara/2022-06-12-cloudflare/+page.md
@@ -0,0 +1,129 @@
+---
+title: VPS · 配置 Cloudflare 的免费 SSL 证书
+created: 2022-06-12
+summary: 关于如何为多个域名配置SSL证书的操作笔记
+tags:
+ - Nginx
+ - VPS
+---
+
+声明：我不知道这样安不安全哈，It just works，个人笔记，操作有风险
+
+参考：[申请 CloudFlare 免费 SSL 证书并应用到 nginx – 65536.io | 自娱自乐](https://65536.io/2020/03/607.html)
+
+先设置加密方式为`完全` ，否则之后可能会出现 526 错误
+
+
+
+## 1. 创建证书
+
+首先将主域名绑定到 Cloudflare，然后在`SSL/TLS` 下的源服务器证书处，点击`创建证书`
+
+
+然后选择私钥和 CSR 生成方式，以及证书的有效期（也可以不改），点击`创建`
+
+
+将下面的证书和私钥暂时复制到某个安全的地方，点击确定
+
+
+## 2. 密钥上传到 VPS
+
+连接 VPS 之后，创建一个文件夹存入密钥，我将其存到`/etc/nginx/cert/` 路径下
+
+```bash
+sudo mkdir /etc/nginx/cert && cd /etc/nginx/cert
+```
+
+写入证书,粘贴入刚刚保存的`证书` 栏里面的内容
+
+```bash
+sudo nano public.pem
+```
+
+修改权限
+
+```bash
+sudo chmod 644 public.pem
+```
+
+写入私钥，粘贴入刚刚保存的`私钥` 栏里面的内容
+
+```bash
+sudo nano private.key
+```
+
+修改权限
+
+```bash
+sudo chmod 600 private.key
+```
+
+## 3. 修改 Nginx 配置
+
+参考：[How to Redirect HTTP to HTTPS in Nginx](https://phoenixnap.com/kb/redirect-http-to-https-nginx)
+
+如果有用防火墙，请先打开 80 端口和 443 端口，不然可能会像我一样，卡在一个毫无意义的 522 Error 上 ^ ^
+
+```bash
+sudo ufw allow 80
+sudo ufw allow 443
+```
+
+打开 Nginx 配置
+
+```bash
+sudo nano /etc/nginx/nginx.conf
+```
+
+在 http 块里面配置一个默认 server，将 http 重定向到 https
+
+```bash
+ # 默认server
+ server {
+ listen 80 default_server;
+ server_name _;
+ return 301 https://$host$request_uri;
+ }
+
+ # ssl配置
+ server {
+ listen 443 ssl default_server;
+ server_name *.example1.com;
+
+ ssl_certificate /etc/nginx/cert/public.pem;
+ ssl_certificate_key /etc/nginx/cert/private.key;
+ }
+
+# 如果有多个域名，可以这样配置，证书也要按之前的添加一下
+ server {
+ listen 443 ssl;
+ server_name *.example2.com;
+
+ ssl_certificate /etc/nginx/cert/example2/public.pem;
+ ssl_certificate_key /etc/nginx/cert/example2/private.key;
+ }
+```
+
+然后`sudo nginx -t` 测试一下，没有问题的话就可以 Nginx 了：
+
+```bash
+sudo systemctl reload nginx
+```
+
+之后如果有域名要配置 ssl ，如 example.conf 中，可以直接将 `listen 80` 改为`listen 443 ssl`
+
+我常用的一个反代配置:
+
+```conf
+ server {
+ listen 443 ssl;
+ server_name 域名;
+ location / {
+ proxy_pass http://127.0.0.1:反代端口;
+ proxy_set_header HOST $host;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ }
+ }
+```
diff --git a/urara/2022-06-15-jellyfin/+page.md b/urara/2022-06-15-jellyfin/+page.md
new file mode 100644
index 00000000..80c635c5
--- /dev/null
+++ b/urara/2022-06-15-jellyfin/+page.md
@@ -0,0 +1,167 @@
+---
+title: VPS · Jellyfin结合Cloudreve开启线上影院
+created: 2022-06-15
+summary: 基于 Docker 和 Nginx 的信心搭建过程
+image: /2022-06-15-jellyfin/1.jpg
+tags:
+ - Nginx
+ - VPS
+ - Docker
+ - Self-host
+---
+
+昨天搭了一下 Pleroma，完全失败，完全没信心了，所以今天决定随便在[Awesome Self Hosted | LibHunt](https://selfhosted.libhunt.com/)找了一个排名很靠前的东西搭一下，给自己建立一点没有必要的信心……
+
+刚好最近朋友找电影资源很犯难，所以我决定拿排在 Media 第一的[Jellyfin](https://jellyfin.org/)试试手。
+
+## 关于 Jellyfin
+
+Jellyfin 是一个在线的流媒体影音库，对电影、音乐、有声书都有比较好的支持。除了在 web 端观看之外，它还支持很多的[客户端](https://jellyfin.org/clients/)，几乎是随处可用，目前我只试过安卓端的，其功能与网页端无异，适配得很好，体验流畅。
+
+可以在这里试一下 Demo：[Jellyfin](https://demo.jellyfin.org/stable/web/index.html)
+
+（用户名 demo，密码留空）
+
+下面是我的成果:-D
+
+
+
+
+||其实我也是搭完才知道它有什么功能的||
+
+## Cloudrever
+
+Jellyfin 目前不支持 S3 存储，所以我需要一个网盘来存储和管理 VPS 上的媒体资源。看了塔塔的 [音乐库搭建 ](https://mantyke.icu/2022/cloudreve-navidrome/) 文章后我决定试一下 [Cloudreve](https://cloudreve.org/) ，具体的搭建过程这里按下不表，是完全照着塔塔的教程和 [Cloudreve 文档](https://docs.cloudreve.org/getting-started/install) 做的
+
+### 反代
+
+需要注意的是，配置 Nginx 反代时，与往常不同，需要设置一下最大的文件大小，以免后期上传失败：
+
+```bash title="/etc/nginx/conf.d/jellyfin.conf" {7}
+ location / {
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header Host $http_host;
+ proxy_redirect off;
+ proxy_pass http://127.0.0.1:5212;
+
+ # 如果您要使用本地存储策略，请将下一行注释符删除，并更改大小为理论最大文件尺寸
+ client_max_body_size 20000m;
+ }
+```
+
+### 一些配置
+
+1. **最大容量**
+
+ 在 `管理面板-> 用户组` 里可修改
+ 
+
+2. **配置离线下载**
+
+ 配置好离线下载就可以用它在后台下载种子资源了。
+ 如果用的是 docker-compose 来安装，下面的应该这样配置：
+ 
+
+ - **[不可修改]** RPC 服务器地址 => `http://aria2:6800`
+ - **[可修改, 需保持和 docker-compose.yml 文件一致]** RPC 授权令牌 => `your_aria_rpc_token`
+ - **[不可修改]** Aria2 用作临时下载目录的 节点上的绝对路径 => `/data`
+
+最后在 cloudreve 面板里创建一个用来存放 jelly 用的文件夹，比如 `jellyfin`
+
+## Jellyfin
+
+### 搭建
+
+jellyfin 的搭建非常简单，给了我做人的很大信心（没有），我这里依旧选择用 docker-compose 来搭建。
+
+官方文档：[Installing Jellyfin | Documentation - Jellyfin Project](https://jellyfin.org/docs/general/administration/installing.html#docker)
+
+首先创建一个配置文件夹并进入：
+
+```bash
+sudo mkdir /opt/jellyfin && cd /opt/jellyfin
+```
+
+创建配置文件
+
+```bash
+sudo nano docker-compose.yml
+```
+
+写入：
+
+```yaml title="docker-compose.yml" {10-11}
+version: '3.5'
+services:
+ jellyfin:
+ image: jellyfin/jellyfin
+ container_name: jellyfin
+ user: root
+ network_mode: 'host'
+ volumes:
+ - /path/to/config:/config
+ - /path/to/cache:/cache
+ - /path/to/media:/media #修改为cloudreve的文件夹
+ - /path/to/media2:/media2:ro #修改为cloudreve的文件夹
+ restart: 'unless-stopped'
+ # Optional - alternative address used for autodiscovery
+ environment:
+ - JELLYFIN_PublishedServerUrl=http://你的域名
+```
+
+其中需要修改 `/path/to/media:/media` 的前半部分为 cloudreve 中在 VPS 中的存储路径，比如改为`/opt/drive/cloudreve/uploads/` ，如果有多个 cloudreve 用户则可以在后面加用户 id，比如 `/opt/drive/cloudreve/uploads/1` 这样
+
+然后`/path/to/media2` 也是同样的修改，改为 `/opt/drive/cloudreve/uploads/`
+
+改完域名之后，执行 `sudo docker-compose up -d` 就可以在端口 `你的ip:8096` 看到界面了。
+
+### 反代
+
+我用的是 Nginx 来进行反代，虽然每次都是一样的操作，但是直接写可以复制粘贴会比较简单，所以我现在准备说废话。
+
+首先，创建配置文件：
+
+```bash
+sudo nano /etc/nginx/conf.d/jellyfin.conf
+```
+
+写入：
+
+```bash title="/etc/nginx/conf.d/jellyfin.conf" {2,4}
+server {
+ listen 80;
+ server_name 你的域名;
+ location / {
+ proxy_pass http://127.0.0.1:8096;
+ proxy_set_header HOST $host;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ }
+}
+```
+
+SSL/TLS 配置可以看我之前这篇：[配置 Cloudflare 的免费 SSL 证书](/2022-06-12-cloudflare)，或者用 certbot 配置
+
+最后 `sudo nginx -t` 以及 `sudo systemctl reload nginx` 一下就可以在相应域名看到初始界面啦。
+
+### 媒体库路径
+
+这个地方我摸了好一会才明白.
+
+路径选择 media 或者 media2 下面的文件，然后后面的跟 cloudreve 里面的是一样的，比如在 cloudreve 中用户 1 创建的文件夹叫 jellyfin，则媒体库中路径为 `/media/1/jellyfin`
+
+
+
+### 插件安装
+
+Jellyfin 有很多实用的插件可以爬电影/音乐等元数据，可以在 `控制台-> 插件` 安装，需要注意的是，安装完插件需要重启一下才可以生效，也就是先`docker-compose down` 再 `docker-compose up -d`
+
+目前感觉比较好用的两个插件：
+
+- [Douban plugin for Jellyfin](https://github.com/Libitum/jellyfin-plugin-douban)： 可以抓豆瓣的元数据，需要通过链接安装
+- Open Subtitles：字幕资源，需要登录 [opensubtitles.com](https://www.opensubtitles.com/zh-CN)，并获取 API
+
+### 主题和语言
+
+可以在`display` 里面更改界面语言和主题，我比较喜欢的主题是 Purple Haze, 感觉是有些克制的赛博朋克风格
diff --git a/urara/2022-07-13-sql/+page.md b/urara/2022-07-13-sql/+page.md
new file mode 100644
index 00000000..1b89f1fd
--- /dev/null
+++ b/urara/2022-07-13-sql/+page.md
@@ -0,0 +1,134 @@
+---
+title: SQL 基础笔记
+created: 2022-07-13
+summary: 关于增改删查的方式
+tags:
+ - SQL
+---
+
+- 课程：[The Complete 2022 Web Development Bootcamp](https://www.udemy.com/share/1013gG3@wP9ybulEki65OWpaP1-gXEeRPJl4aj8eZNX7YYjFOgXlrxBGQyU6NniyJf2PqDI1EA==/)
+- 工具：[SQL Online Compiler - for Data Science](https://sqliteonline.com)
+- 教程：[SQL 教程 | 菜鸟教程](https://www.runoob.com/sql/sql-tutorial.html)
+
+## SQL vs. NOSQL
+
+
+
+
+
+- SQL
+ - 注重结构
+- NOSQL
+ - 更灵活，也更稳健
+ - MoogoDB
+
+## CRUD
+
+### Create
+
+```sql
+CREATE TABLE product(
+ id Int NOT NULL,
+ name STRING,
+ price MONEY,
+ PRIMARY KEY(id)
+ )
+```
+
+- `NOT NULL` 当此值为 null 时，不创建列
+- `PRIMARY KEY(id)` 主键必须包含唯一的值，这个不能有重复的值
+
+**插入数值**
+第一种形式无需指定要插入数据的列名，只需提供被插入的值即可
+
+```sql
+INSERT INTO _table_name_
+VALUES (_value1_,_value2_,_value3_,...);
+```
+
+第二种形式需要指定列名及被插入的值：
+
+```sql
+INSERT INTO _table_name_ (_column1_,_column2_,_column3_,...)
+VALUES (_value1_,_value2_,_value3_,...);
+```
+
+### Read
+
+SELECT 语句用于从数据库中选取数据。
+
+```sql
+SELECT _column_name_,_column_name_
+FROM _table_name_;
+```
+
+```sql
+SELECT * FROM _table_name_;
+```
+
+`*` 表示选择全部
+
+可以用`WHERE` 筛选选择结果，如：
+
+```sql
+SELECT _column_name_,_column_name_
+FROM _table_name_
+WHERE _column_name operator value_;
+```
+
+### Update
+
+```sql
+UPDATE _tablse_name_
+SET _column1_=_value1_,_column2_=_value2_,...
+WHERE _some_column_=_some_value_;
+```
+
+**ALTER TABLE 语句用于在已有的表中添加、删除或修改列。**
+如需在表中添加列，请使用下面的语法:
+
+```sql
+ALTER TABLE table_name
+ADD column_name datatype
+```
+
+如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
+
+```sql
+ALTER TABLE table_name
+DROP COLUMN column_name
+```
+
+### Destory
+
+```sql
+DELETE FROM _table_name_
+WHERE _some_column_=_some_value_;
+```
+
+## Understanding SQL Relationships, Foreign Keys and Inner Joins
+
+### FOREIGN KEY
+
+- 用`FOREIGN KEY` 来和外部表单链接
+- 一个表中的 FOREIGN KEY 指向另一个表中的 UNIQUE KEY(唯一约束的键)。
+
+### INNER JOIN
+
+选择相应列并合并表，`ON`后面写的是条件
+
+```sql
+SELECT _column_name(s)_
+FROM _table1_
+INNER JOIN _table2_
+ON _table1.column_name_=_table2.column_name_;
+```
+
+或：
+
+```sql
+SELECT _column_name(s)_
+FROM _table1_
+JOIN _table2_
+ON _table1.column_name_=_table2.column_name_;
+```
diff --git a/urara/2022-07-13-work/+page.md b/urara/2022-07-13-work/+page.md
new file mode 100644
index 00000000..b41ab8b6
--- /dev/null
+++ b/urara/2022-07-13-work/+page.md
@@ -0,0 +1,43 @@
+---
+title: 一些设计作品
+created: 2022-07-13
+summary: logo / UI / 包装 / 儿童玩具 ……
+---
+
+## 二十四节气茶包
+
+
+
+
+
+
+## UI 设计
+
+
+
+
+
+## 饼干包装
+
+升级前
+
+升级后（面对年轻人重新设计
+
+
+## Logo
+
+
+
+
+## 排版装帧
+
+
+
+
+
+
+## 儿童玩具
+
+
+
+未完待续……（也不知道续不续）
diff --git a/urara/2022-07-15-reading-6/+page.md b/urara/2022-07-15-reading-6/+page.md
new file mode 100644
index 00000000..59db73b0
--- /dev/null
+++ b/urara/2022-07-15-reading-6/+page.md
@@ -0,0 +1,92 @@
+---
+title: 我在看什么 · 6月
+created: 2022-07-15
+summary: Vue / 网页性能优化 / npm ……
+tags:
+ - 我在看什么
+image: /2022-07-15-reading-6/june.png
+---
+
+## 编程相关
+
+### 前端
+
+1. [Learn Debounce And Throttle In 16 Minutes](https://www.youtube.com/watch?v=cjIswDCKgu0)
+
+ 讲得挺好的一个视频。
+ 节流（debounce）和防抖（Throttle）是优化高频率执行代码的一种手段[^1] 如果把执行代码比喻成下楼拿快递的话:
+
+ - 不做任何处理时就是快递来了就下楼拿。
+ - 节流是不管快递来没来，每隔 10 分钟下一次楼。
+ - 防抖则是第一个快递来了，等上 10 分钟，要是在这个 10 分钟内第二个快递来了，就继续等 10 分钟看有没有第三个快递，如果 10 分钟内下一个快递没来就下楼拿前面的快递。
+
+2. [基于 Vue 实现一个简易 MVVM](https://juejin.cn/post/6844904099704471559)
+3. [Websocket 原理及具体使用（ws+socket.io）](https://juejin.cn/post/6857716625764777991)
+4. [String.prototype.localeCompare()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare)
+
+ - 一个用来比较字符串的方法，可以结合 sort 方法对字符串进行排序，因为 sort 方法是按 ASCII 值来排序的，很多时候使用表现并不好，结合`localeCompare`可以做到按大小写排序、对带有重音符号的字符排序……
+ - `localeCompare`接受三个参数：compareString、locales、options，其中 compareString（即用来比较的字符串）是必选的，其他为可选。
+ - `localeCompare`的返回值有三种，负数、正数、0，其中如果引用字符存在于比较字符之前则为负数; 如果引用字符存在于比较字符之后则为正数; 相等的时候返回 0 。
+
+5. Pinia 和 Optional API 的结合使用
+
+ - [Access Pinia State in the Options API](https://vueschool.io/lessons/access-pinia-state-in-the-options-api)
+ - [Usage without setup()](https://pinia.vuejs.org/cookbook/options-api.html)
+
+6. [How to Migrate from Vue CLI to Vite](https://vueschool.io/articles/vuejs-tutorials/how-to-migrate-from-vue-cli-to-vite/)
+7. [使用 pnpm 替换 npm 优化项目开发](https://juejin.cn/post/7067801337076908068)
+8. [剪贴板操作 Clipboard API 教程](https://www.ruanyifeng.com/blog/2021/01/clipboard-api.html)
+9. [如何做前端单元测试](https://juejin.cn/post/7039108357554176037)
+10. [Vue-测试](https://staging-cn.vuejs.org/guide/scaling-up/testing.html)
+11. [前后端加密（一）：前端请求加密封装](https://www.hsmus.top/202011210.html)
+12. [深入浅出 npm & yarn & pnpm 包管理机制](https://mp.weixin.qq.com/s/ZTI-8RI0l314Ki9oBxqRWw)
+ > 很多人认为 npm 是 node package manager 的缩写，其实不是，而且 npm 根本也不是任何短语的缩写。
+ > 它的前身其实是名为 pm（pkgmakeinst） 的 bash 工具，它可以在各种平台上安装各种东西。
+ > 硬要说缩写的话，也应该是 node pm 或者 new pm。
+13. [过度使用懒加载对 Web 性能的影响](https://juejin.cn/post/7074759905197948935)
+14. [Vue 项目性能优化 — 实践指南（网上最全 / 详细）](https://juejin.cn/post/6844903913410314247)
+15. [Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）](https://blog.csdn.net/zz00008888/article/details/119893222)
+16. [解决 NPM 安装应用出现 ERESOLVE 错误](https://blog.alanwei.com/blog/2021/03/30/npm-install-eresulve-error/)
+17. [Web 性能优化：FOUC](https://mp.weixin.qq.com/s/gCn_QwuhiT4aSKZB6bDs6g)
+18. [傻傻分不清之 Cookie、Session、Token、JWT](https://juejin.cn/post/6844904034181070861)
+19. [[译文]为什么 Angular 比 React 更适合企业级应用程序](https://juejin.cn/post/7060399592298250270)
+
+### 后端
+
+1. [Docker 从入门到实践](https://yeasy.gitbook.io/docker_practice/)
+2. [Ubuntu 安装新版本 nodejs 的 5 种姿势](https://uzykj.com/_posts/javascript/nodejs/basic/2021-08-17-ubuntu-install-nodejs.html#%E5%A7%BF%E5%8A%BFa-%E6%BA%90%E7%A0%81%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85)
+3. [npm does not support Node.js v10.19.0](https://askubuntu.com/questions/1382565/npm-does-not-support-node-js-v10-19-0)
+
+## 其他
+
+1. [详细的全自动追番教程：Sonarr+Jackett+qBittorrent+Jellyfin](https://www.dnlab.net/archives/65/)
+2. [Open Source Alternative to](https://www.opensourcealternative.to/)
+3. [在 GitHub 公开仓库中隐藏自己的私人邮箱地址](https://blog.walterlv.com/post/remove-personal-emails-from-public-repos.html)
+4. [各种开发者文档的以往版本](https://devdocs.io/)
+5. [Github 删除某个文件的所有提交记录](https://cloud.tencent.com/developer/article/1665810)
+
+## 互联网哲学
+
+1. [Who Actually Owns Your Device?](https://chuck.is/root/)
+ > What it means to truly own your device is having the power and ability to modify it at a system level should you choose to – even if you don’t know what you’re doing, you should have the right.
+2. [Information forest](https://tyler.cafe/information_forest)
+
+ 在产品沉思录周刊看到的推荐
+
+ > What should the browser of the 2020s be?
+ >
+ > What will a browser built for research, analysis, rabbit-hole exploration, messy thinking, and collaboration look like? These features are listed in the order I thought of them in, not necessarily by importance.
+ >
+ > 1. Graph visualization and mind mapping.
+ > 2. Interactive history and version control.
+ > 3. Predictive search paths.
+ > 4. Super Command-F (Superf).
+ > 5. Collaboration
+ > 6. Automatic scraping and clusterin
+ > 7. Built in word processing.
+ > 8. Backlinks.
+ > 9. An infinitely zoomable interface (ZUI)
+
+ 相关阅读：[Next Browser](https://mp.weixin.qq.com/s/6vKJxVhXXqLvBqf_V1KCwQ)
+
+[^1]: [什么是防抖和节流？有什么区别？如何实现？](https://vue3js.cn/interview/JavaScript/debounce_throttle.html#%E4%B8%80%E3%80%81%E6%98%AF%E4%BB%80%E4%B9%88)
diff --git a/urara/2022-07-16-reading-5/+page.md b/urara/2022-07-16-reading-5/+page.md
new file mode 100644
index 00000000..fb0ba3a2
--- /dev/null
+++ b/urara/2022-07-16-reading-5/+page.md
@@ -0,0 +1,42 @@
+---
+title: 我在看什么 · 5月
+created: 2022-07-16
+summary: Anki / JSDoc / 蘑菇 / Music-Map ……
+tags:
+ - 我在看什么
+image: /2022-07-16-reading-5/May1.jpg
+---
+
+## Productivity
+
+- [How To Create ANKI Flashcards From Your Kindle Vocabulary Builder](https://learnoutlive.com/kindle-vocabulary-builder-anki-flashcards/)
+- [SSH 使用入门](https://wiki.cheng-group.net/wiki/%E9%9B%86%E7%BE%A4%E4%BD%BF%E7%94%A8/ssh_note#ssh-%E4%BD%BF%E7%94%A8%E5%85%A5%E9%97%A8)
+
+ SCP 部分写得很清楚
+
+- [如何使用 JSDoc 保证你的 Javascript 类型安全性](https://mp.weixin.qq.com/s/PcHu-DeZDQCdtWjzb-QkBA)
+- [你不知道的 JSDoc](https://juejin.cn/post/7072685382323830821)
+- [codecombat](https://codecombat.cn/)
+
+ 哇哦，打游戏学编程
+
+- [讓有效學習更簡單！Markdown 匯出到 Anki | 使用 Flashcards 外掛](http://jdev.tw/blog/6505)
+- [建立一套完整的筆記複習流程，使用 Obsidian 插件 Spaced Repetition](https://ithelp.ithome.com.tw/articles/10280788?sc=iThomeR)
+- [硬核必备：Web3 生存指南之防骗反诈安全手册（65 页）](https://web3caff.com/zh/archives/8304)
+- [写作 12 年，我的经验和技巧](https://catcoding.me/p/writing-for-joy/)
+
+## 有趣的
+
+- [Maggie Appleton](https://maggieappleton.com/)
+
+ 很喜欢的一个博客！设计很漂亮，博文图文结合读起来让人很愉悦，是我理想的博客样子
+
+- [科普|“朝菌”毛头鬼伞的菇事](https://mp.weixin.qq.com/s/YeLuBH9VZ1l-bltKdEqxsw)
+- ["I'm Not Like Other Girls"](https://www.youtube.com/watch?v=7nL-kgbbcBA)
+ > _not like other girls_ can also be used as an insult
+- [Why Life Is So Boring (and why it's a good thing)](https://www.youtube.com/watch?v=Wuu-2CR8btw)
+- [吃蘑菇前我都会跟它说会儿话，因为我知道它是活的](https://mp.weixin.qq.com/s/qrtfEJMRn3LH0W05nBIa5Q)
+ > 「在期刊的原文中，阿达玛斯基写道：“我们不应该期望快速地得到一个结果，尽管我们与猫和狗生活了几个世纪，但我们还没有破译它们的语言，而对真菌的电子通讯的研究还处于纯粹的婴儿阶段。”
+ >
+ > 这么一想也不无道理，你甚至连自己家的猫猫狗狗在说什么都没搞明白，为什么一定要期待先跟一颗蘑菇对话呢？」
+- [Music-Map](https://www.music-map.com/)
diff --git a/urara/2022-07-17-vol1/+page.md b/urara/2022-07-17-vol1/+page.md
new file mode 100644
index 00000000..6d74ba86
--- /dev/null
+++ b/urara/2022-07-17-vol1/+page.md
@@ -0,0 +1,182 @@
+---
+title: Nonsense Wander ~ Vol1
+created: 2022-07-17
+summary: Kiwix / Leitner Box / Summer Sense / It’s Nicky Case!
+tags:
+ - Nonsense Wander
+---
+
+## 前言
+
+大家好，这是**无意义漫游记**的第一期，**Nonsense Wander ｜无意义漫游记** 是一个不求甚解、没有特定主题、也没有意义的周刊（或者月刊），我将在这里跟大家分享我最近发现的有意思的东西，新的旧的都有，一切只因好奇和有趣，内容随心所欲毫无边际，希望您喜欢，不喜欢也不要紧，我们来去自由。
+
+## Tools
+
+### 1. [Kiwix ——离线维基百科阅读器](https://www.kiwix.org/en)
+
+
+
+> Kiwix is an offline reader for online content like Wikipedia, Project Gutenberg, or TED Talks. It makes knowledge available to people with no or limited internet access. The software as well as the content is free to use for anyone.
+>
+> Kiwix 是一个在线内容的离线阅读器，如维基百科、古腾堡计划或 TED 演讲。它使没有互联网接入或互联网接入有限的人也能获得知识。该软件以及内容对任何人都是免费使用的。
+
+我是在[F-Droid](https://f-droid.org/zh_Hans/packages/org.kiwix.kiwixmobile/)上看到 icon 很可爱就下载了，没想到这么有趣，我用的移动端 APP 上有一个「图书馆」的页面，可以在这里下载许多不同领域的知识，除了上面提到的维基百科等平台之外，Stack Exchange、Khan Academy 、edX 等网站的知识板块也有比较完整的收录，其中我下载了 MDN Web Docs、wikiHow、Coffee Stack Exchange 等内容，不过……一个都还没有仔细看过。
+
+官网上中间那张讲朝鲜的图片让我想起了《鱿鱼游戏》在朝鲜的一些事情，感到很荒诞。
+
+
+
+- 了解更多：[What is Kiwix?](https://www.kiwix.org/en/about/)
+- 下载阅读器：[Download Kiwix Reader – Kiwix](https://www.kiwix.org/en/download/)
+- 一个名字相似的个人 Wiki：
+ - [Kiwi](https://kiwi.ssine.cc/)
+ - [GitHub – ssine/Kiwi: A flat file personal wiki](https://github.com/ssine/Kiwi)
+
+### 2. [Anki X Markdown X MindMap – AnkiWeb](https://ankiweb.net/shared/info/728482867)
+
+> An anki add-on to support writing markdown and preview as mind map
+> 一个支持 Markdown 和预览为思维导图的 Anki 插件
+
+安装代码：`728482867`
+
+**效果：**
+
+
+### 3. Leitner Box
+
+上面提到了用于间隔重复(Space Repetition)的工具 [Anki](https://apps.ankiweb.net/)，不过最近我还了解到另外一个同样有用的工具，叫 Leitner Box，是用实物卡片的方式来进行间隔重复式学习。了解更多可以看下面这个视频：
+
+> How to make and use a Leitner Box! The Leitner Box is a kind of spaced repetition system; basically, flashcards on steroids. It is one of the fastest, easiest, and most reliable ways to put lots of data into your long-term memory—and chances are, you have everything you need to make one already!
+>
+> [The Leitner Box—How to Remember Anything Forever – YouTube](https://www.youtube.com/watch?v=uvF1XuseZFE)
+
+## Blog
+
+这个栏目罗列了一些最近发现的有意思的个人博客，并摘录了一些博客内容作为介绍
+
+### 1\. [chuck.is](https://chuck.is/)
+
+> One of my hobbies is nerding out on technology. I enjoy tinkering with linux and any device that runs an operating system. I am not a programmer/developer.
+
+### 2\. [It’s Nicky Case!](https://ncase.me/)
+
+> Hi, I’m Nicky! I make shtuff for curious & playful folks.
+
+- 项目： [和焦虑一起冒险！](https://z-lyen.github.io/anxiety/)
+- 博文：[Mental Health Tips feat. Anxiety Wolf](https://ncase.me/mental-health/)
+- 相关介绍：[Nicky Case 可探索的解释 Explorable Explanations (2014)](https://mp.weixin.qq.com/s/3-1M8qJb0y_5Q2xgFJKUig)
+
+PS：上面提到的 Leiner Box 也是在 Nicky 的博客看到的，
+
+### 3\. [Henrique Dias](https://hacdias.com/)
+
+> I’m interested in how we can use computer networks to our advantage, prioritizing decentralized systems, capable of pushing the humanity forward. Web infrastructure, peer-to-peer systems, as well as human-computer interaction are at the core of my interests.
+
+博文：
+
+- [My Website After IndieWeb](https://hacdias.com/2022/06/18/my-website-after-indieweb)
+- [About Moving Away From Hugo](https://hacdias.com/2021/10/31/eagle-move-away-from-hugo)
+
+### 4\. [Paige Ruten](https://viewsourcecode.org/)
+
+> Hey, welcome to my collection of why the lucky stiff links. Everything \_why has published on the internet should be accessible from here. It works sort of like a museum that sells maps. Many of his abandoned writings are mirrored locally here, and everything else is through external links.
+
+## Video
+
+一些我喜欢的视频
+
+### 1\. [The Updated Last Whole Earth Catalog](https://youtu.be/8_xpq2IDNvw)
+
+> This is the last update to the last Whole Earth Catalog. There won’t be another! But where will we get things in the future if there are no more Whole Earth Catalogs? Where do YOU get things?
+>
+> The Whole Earth Catalog was a counterculture magazine and product catalog published by Stewart Brand several times a year between 1968 and 1972. The editorial focus was on self-sufficiency, ecology, alternative education, “do it yourself” (DIY), and holism, and featured the slogan “access to tools”. While WEC listed and reviewed a wide range of products (clothing, books, tools, machines, seeds, etc.), it did not sell any of the products directly. Instead, the vendor’s contact information was listed alongside the item and its review.
+
+### 2\. [Summer Sense](https://www.bilibili.com/video/BV1Db411V719)
+
+> 这支影片承载着我在荷兰接近一个月的时间里的各种回忆，从宁静小镇阿默龙恩到奇特疯狂的鹿特丹，从被朋友带着认识更多的朋友到独自一人在野外探寻。山河森林，微风树叶，音乐舞蹈…… 现在我希望能通过一种我的方式重新将这份感觉组合在一起。
+
+我特别喜欢片头在房子里面一起唱歌的场景，还有划着小船飘在小溪里什么也不做的场景……
+
+### 3\. [我 的 钱 呢](https://www.bilibili.com/video/BV1cK411G7aj)
+
+> 【配乐】
+>
+> SAM KIM - WHERE’S MY MONEY
+>
+> 【主演】
+>
+> 刘亚仁，主演的素材出自《少年菀得》《老手》《强哲》《燃烧》《活着》《无声》。
+>
+> 【素材】
+>
+> 少年菀得／九尾狐传／蜂鸟 ／灿实也多福／小公女 ／老手 ／强哲 ／门锁 ／未成年 ／小森林 ／人间课堂 ／钱 ／燃烧 ／摩天楼 ／Live ／读心术 ／金融决战 ／一条龙 ／单身骑士 ／一定要抓住 ／无声 ／恶人传 ／化时为机 ／活着 ／寄生虫 ／个人拍摄
+
+## What else
+
+### 1\. [LOW TECH WEBRING DIRECTORY](https://emreed.net/LowTech_Directory.html)
+
+> This [webring](https://en.wikipedia.org/wiki/Webring)is for homepages of people who are interested in low tech, small game tools, and other forms of Web 1.0 inspired creativity.
+> 这个 webring 适用于对低技术、小型游戏工具和其他形式的 Web 1.0 激发创造力感兴趣的人的主页
+
+### 2\. [Suricrasia Online](https://suricrasia.online/)
+
+> Suricrasia Online is a Toronto-based ISP staffed entirely by anthropomorphic sharks in maid outfits. Since our establishment in the mid-90s, we have made a name for ourselves in the internet marketplace by combining the allure of the sea with the adorable regalia of a maid cafe!
+>
+> Suricrasia Online 是一家总部位于多伦多的 ISP ，其工作人员完全由身着女仆装的拟人鲨鱼组成。自 90 年代中期成立以来，我们将大海的魅力与女仆咖啡馆的可爱形象相结合，在互联网市场上声名鹊起！
+
+### 3\. [Fantômes](https://fantomeszine.com/)
+
+> Fantômes is a yearly collaborative ghost story zine, bringing together story-telling, poetry, folklore, illustration and photography in a small hand-bound publication. It is a place to explore personal and collective ghosts, lend them a voice through summoning rituals, raw poetry or scribbled drawings and get familiar with their haunting presence.
+>
+> Fantômes 是一本一年一度的合作性鬼故事杂志，将讲故事、诗歌、民间传说、插图和摄影汇集在一个小型手工装订的出版物中。它是一个探索个人和集体鬼魂的地方，通过召唤仪式、原始诗歌或潦草的图画让它们发出声音，并熟悉它们萦绕的存在。
+
+## 后言
+
+最后，分享一下本周最喜欢的歌：[New Boy · 朴树](https://music.163.com/song?id=28996919)
+
+> 是的我看见到处是阳光
+> 快乐在城市上空飘扬
+> 新世纪来得像梦一样
+> 让我暖洋洋
+> 你的老怀表还在转吗
+> 你的旧皮鞋还能穿吗
+> 这儿有一支未来牌香烟
+> 你不想尝尝吗
+> 明天一早
+> 我猜阳光会好
+> 我要把自己打扫
+> 把破旧的全部卖掉
+> 哦这样多好
+> 快来吧奔腾电脑
+> 就让它们代替我来思考
+> 穿新衣吧剪新发型呀
+> 轻松一下 Windows98
+> 打扮漂亮
+> 18 岁是天堂
+> 我们的生活甜得像糖
+> 穿新衣吧剪新发型呀
+> 轻松一下 Windows98
+> 以后的路不再会有痛苦
+> 我们的未来该有多酷
+> 明天一早
+> 我猜阳光会好
+> 我要把自己打扫
+> 把破旧的全部卖掉
+> 哦这样多好
+> 快来吧奔腾电脑
+> 就让它们代替我来思考
+> 穿新衣吧剪新发型呀
+> 轻松一下 Windows98
+> 打扮漂亮
+> 18 岁是天堂
+> 我们的生活甜得像糖
+> 穿新衣吧剪新发型呀
+> 轻松一下 windows98
+> 以后的路不再会有痛苦
+> 我们的未来该有多酷
+> Babawowo
+> 向前走你的路
+> 猜猜未来给你什么礼物
+> Babawowo
+> 扔掉吧你的旧书包
+> Oh my international cool play boy
diff --git a/urara/2022-07-23-d3/+page.md b/urara/2022-07-23-d3/+page.md
new file mode 100644
index 00000000..82208b5a
--- /dev/null
+++ b/urara/2022-07-23-d3/+page.md
@@ -0,0 +1,446 @@
+---
+title: D3.js 基础笔记
+created: 2022-07-23
+summary: 即使是FreeCodeCamp也要做笔记
+tags:
+ - D3.js
+ - 数据可视化
+---
+
+内容出自：[FreeCodeCamp](https://chinese.freecodecamp.org/learn/data-visualization)
+
+> D3 或 D3.js 表示数据驱动文档。它是一个用于在浏览器中创建动态和交互式数据视觉化的 JavaScript 库。[^1]
+
+## 学习资源
+
+- [D3.js - Data-Driven Documents](https://d3js.org/)
+- [Data Visualization with D3 – Full Course for Beginners [2022] - YouTube](https://www.youtube.com/watch?v=xkBheRZTkaw&t=1s)
+ - [Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum](https://vizhub.com/forum/t/get-it-right-in-black-white-index/110/2)
+ - [New Livestream Series: Get it Right in Black and White](https://vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/)
+ - [Get it Right in Black & White Index - Get it Right in Black & White - VizHub Forum](https://vizhub.com/forum/t/get-it-right-in-black-white-index/110)
+- [The D3 Graph Gallery – Simple charts made with d3.js](https://d3-graph-gallery.com/)
+- [Introduction to D3.js | D3 in Depth](https://www.d3indepth.com/introduction/)
+- [数据可视化 认证 | freeCodeCamp.org](https://chinese.freecodecamp.org/learn/data-visualization/#data-visualization-with-d3)
+- [Amelia Wattenberger](https://wattenberger.com/blog/d3)
+- [GitHub - xswei/d3js_doc: D3js 中文文档 D3 中文](https://github.com/xswei/d3js_doc)
+
+## 基础操作
+
+### 修改元素
+
+- `select()` ：
+ - 功能：从文档中选择一个元素。
+ - 参数：它接受你想要选择的元素的名字作为参数，并返回文档中第一个与名字匹配的 HTML 节点。
+- `selectAll()`
+ - 选择一组元素。 并以 HTML 节点数组的形式返回该文本中所有匹配所输入字符串的对象
+- `append()`
+ - 功能：将 HTML 节点附加到选定项目，并返回该节点的句柄。
+ - 参数：接收你希望添加到文档中的元素
+- `text()`
+ - 功能：设置所选节点的文本，也可以获取当前文本。 也可以用来添加标签
+ - 参数：字符串或者回调函数
+
+```js
+const anchor = d3.select('a')
+```
+
+在 D3 中可以串联多个方法，连续执行一系列操作。->[[function chaining|链式调用]]
+
+### 使用数据
+
+[d3-selection](https://github.com/xswei/d3-selection/blob/master/README.md#selection_data)
+
+- `data()`：
+ - 将元素与数据绑定
+ - 不需要写 for 循环或者用 forEach() 迭代数据集中的对象。 data() 方法会解析数据集，任何链接在 data() 后面的方法都会为数据集中的每个对象运行一次。
+ - 可以使用方括号的方式，如 `d[0]`，来访问数组中的值。
+- `enter()`：获取需要插入的选择集(数据个数大于元素个数)的占位符.
+
+> 当 enter() 和 data() 方法一起使用时，它把从页面中选择的元素和数据集中的元素作**比较**。 如果页面中选择的元素较少则创建缺少的元素。
+
+可以理解为管理仓库的，选择的元素是货架，数据是货，如果货架不够了，就再补几个货架，如果多了就不管
+
+```html
+
+ Hello Vue.js
+ + + +``` + +或者 + +```vue + +Hello Vue.js
+ + + + +``` + +相关知识点：[单文件组件 CSS 功能 | Vue.js](https://staging-cn.vuejs.org/api/sfc-css-features.html) + +## Components + +### DOM 传送门 + +见上面 + +### Props 验证 + +验证 Button 组件的 Prop 类型 ，使它只接收: primary | ghost | dashed | link | text | default ，且默认值为 default + +```vue + + + + + +``` + +相关知识点：[Props | Vue.js](https://staging-cn.vuejs.org/guide/components/props.html#prop-validation) + +### 函数式组件 + +这题我不是很懂，翻了一下大家的解决方案，感觉这个比较能看懂：[21 - functional component · Issue #322 · webfansplz/vuejs-challenges · GitHub](https://github.com/webfansplz/vuejs-challenges/issues/322) + +```vue + + + +-
+
- {{ node.title }} + + // 用递归的方法来实现 +
State: {{ state ? 'ON' : 'OFF' }}
+Toggle state
+ +``` + +### 计数器 + +实现一个计数器 + +```vue + +``` + +### 实现本地存储函数 + +封装一个`localStorage`API + +```vue + + + +Counter: {{ counter }}
+ + +``` + +相关知识点： + +- [watchEffect()](https://staging-cn.vuejs.org/api/reactivity-core.html#watcheffect) +- [Window.localStorage - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) + +### 鼠标坐标 + +这个没通过单元测试，不知道什么原因，试了下其他人的也没能通过…… + +```vue + + +Mouse position is at: {{ x }}, {{ y }} +``` + +## Composition API + +### 生命周期钩子 + +```vue + + + +
+
+
+```
+
+- 相关知识点：
+ - [组合式 API：依赖注入 | Vue.js](https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html)
+ - [组合式 API：生命周期钩子 | Vue.js](https://staging-cn.vuejs.org/api/composition-api-lifecycle.html#onunmounted)
+
+### ref 全家桶
+
+```vue
+
+
+
+ Child Component: {{ count }}
+
+
+
+```
+
+相关知识点：
+
+- [isRef()](https://staging-cn.vuejs.org/api/reactivity-utilities.html#isref)
+- [unref()](https://staging-cn.vuejs.org/api/reactivity-utilities.html#unref)
+- [toRef](https://staging-cn.vuejs.org/api/reactivity-utilities.html#toref)
+
+### 响应性丢失
+
+保证解构/扩展不丢失响应性
+
+```vue
+
+
+
+ + - + {{ count }} + + +
+
+
+
+```
+
+相关知识点：[toRefs](https://staging-cn.vuejs.org/api/reactivity-utilities.html#torefs)
+
+### 可写的计算属性
+
+```vue
+
+
+
+ + - + {{ count }} + + +
+
+
+
+```
+
+相关知识点：[可写的计算属性 ](https://staging-cn.vuejs.org/guide/essentials/computed.html#writable-computed)
+
+### watch 全家桶
+
+```vue
+
+
+
+ {{ count }}
+{{ plusOne }}
+
+
+
+```
+
+相关知识点：[侦听器 | Vue.js](https://staging-cn.vuejs.org/guide/essentials/watchers.html)
+
+### 浅层 ref
+
+响应式 API: shallowRef
+
+```vue
+
+
+
+ + {{ count }} +
++ {{ age }} +
+
+
+
+```
+
+相关知识点：[shallowRef()](https://staging-cn.vuejs.org/api/reactivity-advanced.html#shallowref)
+
+### 依赖注入
+
+child.vue
+
+```vue
+
+
+
+ {{ count }}
+
+```
+
+相关知识点：[组合式 API：依赖注入 | Vue.js](https://staging-cn.vuejs.org/api/composition-api-dependency-injection.html)
+
+### Effect 作用域 API
+
+```vue
+
+
+
+ + {{ state.count }} +
+
+
+
+```
+
+相关知识点：[effectScope](https://staging-cn.vuejs.org/api/reactivity-advanced.html#effectscope)
+
+### 自定义 ref
+
+```vue
+
+
+
+
+
+```
+
+相关知识点：[customRef](https://staging-cn.vuejs.org/api/reactivity-advanced.html#customref)
+
+## Directives
+
+### 大写
+
+创建一个自定义的修饰符 `capitalize`，它会自动将 `v-model` 绑定输入的字符串值首字母转为大写：
+App.vue
+
+```vue
+
+
+
+
+
+```
+
+Input.vue
+
+```vue
+
+
+
+
+
+```
+
+相关知识点：[处理 v-model 修饰符](https://staging-cn.vuejs.org/guide/components/events.html#usage-with-v-model)
+
+### 优化性能的指令
+
+见上面。v-once
+
+### 切换焦点指令
+
+```vue
+
+
+
+
+
+```
+
+相关知识点：[自定义指令 | Vue.js](https://staging-cn.vuejs.org/guide/reusability/custom-directives.html)
+
+### 防抖点击指令
+
+尝试实现一个防抖点击指令
+
+```vue
+
+
+
+
+
+```
+
+相关知识点：[指令钩子](https://staging-cn.vuejs.org/guide/reusability/custom-directives.html#introduce)
+
+### 激活的样式-指令
+
+```vue
+
+
+
+ + {{ doubled }} +
+-
+
- + {{ item }} + +
{{ value }}
+ +``` + +## Event Handling + +### 阻止事件冒泡 + +```vue + + + +
+
+
+```
+
+相关知识点：[事件修饰符](https://staging-cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers)
+
+### 按键修饰符
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+相关知识点：[按键修饰符](https://staging-cn.vuejs.org/guide/essentials/event-handling.html#key-modifiers)
+
+## Global API:General
+
+### 下一次 DOM 更新
+
+在`Vue.js`中改变响应式状态时，DOM 不会同步更新。 `Vue.js` 提供了一个用于等待下一次 DOM 更新的方法
+
+```vue
+
+
+
+
+
+```
+
+相关知识点：[nextTick()](https://staging-cn.vuejs.org/api/general.html#nexttick)
+
+## Lifecycle
+
+### 生命周期钩子
+
+[同上：生命周期钩子](#生命周期钩子)
+
+## Reactivity:Advanced
+
+### 浅层 ref
+
+[同上：浅层 ref](#浅层-ref)
+
+### 原始值 API
+
+```vue
+
+
+
+ click me
+
+
+
+```
+
+相关知识点：
+
+- [toRaw](https://staging-cn.vuejs.org/api/reactivity-advanced.html#toraw)
+- [markRaw](https://staging-cn.vuejs.org/api/reactivity-advanced.html#markraw)
+
+### Effect 作用域 API
+
+[同上：Effect 作用域 API](#effect-作用域-api)
+
+### 自定义 ref
+
+[同上：自定义 ref](#自定义-ref)
+
+## Reactivity:Core
+
+### ref 全家桶
+
+[同上：ref 全家桶](#ref-全家桶)
+
+### 可写的计算属性
+
+[同上：可写的计算属性](#可写的计算属性)
+
+### watch 全家桶
+
+[同上：watch 全家桶](#watch-全家桶)
+
+## Reactivity:Utilities
+
+### 响应性丟失
+
+[同上：响应性丟失](#响应性丟失)
+
+## Utility Function
+
+### until
+
+```vue
+
+
+
+ + {{ reactiveState.count }} +
+Increase
+ +``` + +## Web Components + +### 自定义元素 + +```vue + + + + + +``` + +并且 vite.config.js 里要做相关设置 +相关知识点：[Vue 与 Web Components | Vue.js](https://staging-cn.vuejs.org/guide/extras/web-components.html) diff --git a/urara/2022-08-14-design/+page.md b/urara/2022-08-14-design/+page.md new file mode 100644 index 00000000..c03dc073 --- /dev/null +++ b/urara/2022-08-14-design/+page.md @@ -0,0 +1,183 @@ +--- +title: 通用设计 VS. 包容性设计 +created: 2022-08-14 +summary: Universal Design VS. Inclusive Design +tag: + - Design + - Notes +image: /2022-08-14-design/photo.png +--- + +这篇博文为测试博文，是读论文[《通用设计与包容性设计原则的发展和挑战》](https://www.researchgate.net/publication/328981184_tongyongshejiyubaorongxingshejiyuanzedefazhanhetiaozhan)的学习笔记，内容可能有不对的地方，逻辑也可能不通顺，感兴趣的朋友可以再研究一下。 + +## 社会背景和起源 + +- **人口老龄化和失能者增加** + + 老人和失能者的社会境遇往往与普通人明显不同 + +- **设计师摩尔（Patricia Moore）的变装实验** +- **无障碍（Barrier-free）运动** + + （20th50s）开启了公共政策和设计实践的变革 + +- 1963 年，英国建筑师戈登史密斯（Selwyn Goldsmith）出版了名为 **《为失能者设计》** 的综合建筑设计导则 +- **失能人士权力运动** +- **全球层面存在的具有地缘特征的挑战** + + 诸如越来越多的移民和流动人口造成的族群和文化多样性 ；经济发展失衡和贫富分化 ；城市化进程对生活方式的影响等等 + +## 共同的理念 + +> 产品和环境应考虑全体公民的需求和权利 + +> 减少和消除失能者与普通人之间在生理和思想观念上的隔阂 + +> 努力帮助失能者融入主流群体 + +> 失能者提供的许多环境变化实际上能使每个人都从中受益，许多类似的功能可以普及推广，从而更便宜，更有吸引力，甚至更有市场，并且不会带有污名化和歧视性标签 + +## 相关概念 + +### 无障碍设计 Barrier-free Design + +- 特点 + + 针对残疾人考虑 + +- 障碍的尺度 + - 永久性残疾 permanent disability + - 情境性残疾 situational disability + - 临时性残疾 temporary disability +- 设计的角度（障碍的具体原因） + - 视觉无障碍设计 visual + - 听觉无障碍设计 hearing + - 行动无障碍设计 mobility + - 认知无障碍设计 cognition + +### 跨代设计 Transgenerational Design + +- **起源** + + 美国雪城大学（Syracuse University）的**珀克尔**（James Pirkl）教授和他的同事们提出概念以及一系列适用于这一概念的指导方针和战略 + +- **定义** + + 主张产品、服务和环境同时满足**不同年龄**和能力人群的需求，尤其强调老年人应能与年轻人在同一环境中共事 + +### 全纳设计 Design for All + +- **起源** + + 北欧斯堪的纳维亚地区 + +- **概念** + + 强调产品应被设计为可让最广泛的用户群使用，包容人类的多样性，尊重人的**平等** + +### 通用设计 Universal Design + +- **特点** + + 从商业利益角度 + +- **起源** + - **美国**建筑师、设计师和教育先驱梅斯（Ron Mace） + - 将概念从无障碍设计强调环境应**适合失能人士**的语境 +- **概念** + + 强调产品和环境不需要作特别调整而尽最大可能为**所有人可用**的理念 + +- **NCSU 的通用设计原则** + + - 具体原则 + - 使用平等 + - 使用灵活 + - 使用简单直观 + - 信息可觉察 + - 容错 + - 不费力 + - 适于接近和使用的尺度与空间 + - 三个层次 + + 1. **价值** + + - "平等观" + - 强调对所有的用户一视同仁。 + 需注意这种一视同仁并非出于漠视用户的差别，而是指产品、服务和环境对用户使用体验和价值的一致性，即用户所得结果的一致性，此一致性不应受用户能力差异的影响。 + + 2. **需求** + - 强调尽可能降低对用户的能力要求，其所指的能力既包括了生理和感官能力，也涵盖了认知和表达。 + - 一般选择以最低能力的用户为标准进行设计，从而使产品、服务和建成环境得以覆盖全体用户的使用能力范围。 + 3. **供给** + + 主张提供尽可能高的灵活性和容错能力 + +- **设计的目标** + 1. 合身——适应各种体型和能力 + 2. 舒适——将需求保持在身体机能的理想限度内 + 3. 觉察——确保（产品）使用的关键信息易于获得 + 4. 理解——使操作和使用的方法直观、清晰、明确 + 5. 健康——有助于促进健康、避免疾病和预防伤害 + 6. 社会融合——以有尊严和尊重的方式对待所有群体 + 7. 个性化——包含选择机会和个人偏好的表达 + 8. 文化适宜性——尊重和加强设计项目的文化价值及社会和环境背景。 +- **案例** + - 斜坡入口 + - 自动门 + - 杠杆门把手 + - 平板灯开关 + - 任务照明 + +### 包容性设计 Inclusive Design + +- **起源** + + 英国 + +- **概念** + + 主旨是在认识到用户**群体多样性**的情况下，倡导主流的产品、服务和建成环境应尽可能满足更多人的需求 ，或者说，将设计可能产生的**排斥度降到最低**。 + +- **特点** + - 和通用设计与全纳设计强调在技术可能性允许的条件下将可及性最大化略有不同，包容性设计主张为产品、服务和建成环境选取**合适的市场区间**，通过降低对用户使用能力的要求，从而将产品的主要适用人群在合理的可能性下最大化，并提升用户体验和满意度 + - 并不以失能者为中心，也避免采用“辅助技术” + - 注重每个个体的福祉，但不再刻意追求在一项设计中满足所有群体的需求。 +- **意义** + + 包容性设计可以在有限的资源约束下，为创造尽可能多的普惠价值提供方法和途径，从而与辅助技术的发展相辅相成。 + +- **“群体金字塔”** +  + +展现了群体中的个体能力多样性差异 + +- **方法论** + + 通过合理降低能力要求，提升在不同情境下广泛客户群的产品体验 + +- **案例** + - 微软推出的 Xbox Adaptive Controller + - Chrome 浏览器的无障碍字幕 + +## 总结 + +- **通用设计**： + - 强调产品和环境无需做特别调整而尽最大可能为所有人而用。 + - 例如：公共空间的斜坡入口设计，既可以满足使用轮椅的人的需求，同时又有利于骑自行车的孩子、使用步行者的老年人、推婴儿车的父母等其他所有人群的使用。 +- **包容性设计**： + - 主张为产品、服务和建成环境选取合适的市场区间，通过降低对用户使用能力的要求，从而将产品的主要适用人群在合理的可能性下最大化。 + - 例如：微软推出的 Xbox Adaptive Controller 是一款针对残疾玩家和运动技能较差的人的游戏机，它有更大的按键和更容易被打开的包装设计，残疾人可以不费力使用的同时，普通人也能轻松地使用。 + +总而言之，两者都有相同的出发点，即"帮助失能人群更好地融入主流群体"，同时都务实地接受一种产品并不总是能够满足整个人群的需求。其中，通用性设计以全体大众为出发点，不特意针对某一类族群而设计，包容性则主张在满足特定困难人群需求的基础上辐射到最广泛人群上。 + +## Reference + +- [Universal Design 101 | Rick Hansen Foundation](https://www.rickhansen.com/news-stories/blog/universal-design-101) + +- [包容性设计(inclusive design)和通用设计(universal design)的区别是什么？](https://www.zhihu.com/question/26045305) + +- [从无障碍设计中学习如何成为一个更好的设计师](https://zhuanlan.zhihu.com/p/119766231) + +- [无障碍设计](https://zhuanlan.zhihu.com/p/31657525) +- [Microsoft-Inclusive Design](https://www.microsoft.com/design/inclusive/) diff --git a/urara/2022-08-15-vol3/+page.md b/urara/2022-08-15-vol3/+page.md new file mode 100644 index 00000000..520fa98f --- /dev/null +++ b/urara/2022-08-15-vol3/+page.md @@ -0,0 +1,128 @@ +--- +title: Nonsense Wander ~ Vol3 +created: 2022-08-15 +summary: ActivityWatch / scrut.ch / 微信聊天记录导出工具 / 秋天到了 +tags: + - Nonsense Wander +--- + +周日快乐！这是无意义漫游记的第三期，没想到居然~~糊弄~~写到第三期了……这两周我又收集了更多的个人博客和工具，虽然感觉自己有看蛮多博客的，但是要写的时候都找不到了，罢也，找不到也是一种缘分…… + +八月，秋天来得比我想象中还要快，已经过上了不需要空调和风扇也能入睡的日子了。 + +## Tools + +### 1. [ActivityWatch](https://activitywatch.net/) + +一个记录时间花费的 App，跨平台(Windows, macOS, Linux, and Android)且开源，我下了 mac 版本的，但是没有跑得起来。这个 App 目前还不支持同步，但是团队有在推进同步功能了，值得期待 + +> ActivityWatch is an app that automatically tracks how you spend time on your devices. +> +> It is open source, privacy-first, cross-platform, and a great alternative to services like RescueTime, ManicTime, and WakaTime. +> +> It can be used to keep track of your productivity, time spent on different projects, bad screen habits, or just to understand how you spend your time. + +### 2. [网页变动提醒 - 云端+开源自部署](https://creatorsdaily.com/4a320489-cede-40ce-8eec-85528e51d294) + +> 云端持续定时监控/检测一个网页的变化，间隔最小十分钟。 +> 如网页有变化或指定的关键词出现， 便发送电子邮件提醒，或电话提醒（开发中）。 + +### 3. [Rosé Pine](https://rosepinetheme.com/) + +一个多彩的色彩系统，有很多现成可用的样式方案，比如说 Pleroma、Misskey、VS Code……之类的 + +> A community-enriched theme and palette featuring all natural pine, faux fur and a bit of soho vibes for the classy minimalist. + +### 4. [scrut.ch](https://scrut.ch/) + +一个基于浏览器的 Markdown 写作工具，功能很少，但不需要注册还可以分享，应急用还挺好的 + +> scrut.ch is a non-bloated, secure editor with only one main feature: writing. Together with others or in private. You wouldn’t know you missed it, until you’ve tried it. + +### 5. [微信聊天记录导出工具](http://wxbackup.imxfd.com/) + +免费的聊天记录导出工具，可以导出为 html 格式，查看很方便 + +## Blogs + +当当当——又发现一些有趣的个人博客啦！请看： + +### 1. [maya.land](https://maya.land/) + +一个 oldschool 风格的个人博客，有点魔法的感觉，字体很好看 + +> Warning – this website may contain strong language (which may be unsuitable for children), time-wasting links (which may be unsuitable for adults), and nonliteral material (which may be unsuitable for STEM majors). + +> If you want someone to provide you with recipes without advertising or personal essays, buy a cookbook. +> ——[recipe blogs | maya.land](https://maya.land/recipe-blogs/) + +### 2. [RACH SMITH](https://rachsmith.com/) + +一个 Codepen 开发者的数字花园，更新比较频繁。风格蛮雅致和特别的，特别是首页燃烧的名字，非常亮眼（还可以停火），我很喜欢这个博客的方格背景和标签的样式。 + +> Hi 👋🏼 I'm Rach. A developer building software for CodePen, wife, mother of two, productivity nerd and recovering screen addict. This is my digital garden. + +> I honestly don’t think this note is very good. Fuck it, I’ll publish anyway. +> +> [Fuck it](https://rachsmith.com/fuck-it/) + +> Yes, we can design our learning strategy so that we are learning more efficiently, but there is no way to short-cut learning new things. You still have to put in work to gain knowledge and experience around a subject. Hopefully, if you’re making sure you’re relying on intrinsic motivation, it will be easier to keep going when things get difficult. +> +> [Learning how you best learn: some questions to ask yourself](https://rachsmith.com/learning-how-you-best-learn-some-questions-to-ask-yourself/) + +### 3. [Older Than Netfic](https://olderthannetfic.tumblr.com/) + +一个同人作者的博客，蛮有意思的 + +> I'm a filmmaker and novelist who is hopelessly addicted to old fandoms. +> I live in Oakland, CA. I like hanging out with fans in person. Look me up if you're in the area. I'm also on Dreamwidth as franzeska. + +### 4. [Forever's Home](https://aroace.space/) + +一个[GoToSocial](https://gts.superseriousbusiness.org/)实例站长的博客，基于 Hugo 搭建，也是比较复古的风格 + +> Hey. I’m Forever. I'm part of the Leptæniformia System, which is me and Lilith. This is our shared website, but mostly I write. Anyway, I’m a queer weirdo residing in Colorado with a hyperfixation on programming, specifically web programming and accessibility. Things I have been previously hyperfixated on include chess, cars, Linux, and theming. I believe minimalism is good, as it allows something to be robust; which is why this website is so tiny. I tinker around with things sometimes. + +### 5. [Nabeel Qureshi](https://nabeelqu.co/) + +这个博客好像蛮多人在关注的，效率类的内容比较多，风格比较小清新 + +> I work at Palantir on health research at NIH. This includes N3C, the US’s largest HIPAA-limited electronic health record dataset for researchers to better understand the long-term effects of COVID-19 and, soon, other diseases. + +> I concluded that what we call 'intelligence' is as much about virtues such as honesty, integrity, and bravery, as it is about 'raw intellect’. +> ——[understanding - nabeelqu](https://nabeelqu.co/understanding) + +好了，没有了，好像还看了蛮多的，但是找不到了 Orz…… + +## What Else + +### 1. [UNINCORPORATED ASSOCIATES](https://unincorporatedassociates.com/) + +这是一个设计工作室的网站，形式很特别，以桌面文件夹形式的展示图片/项目、还有打字机的文字效果，还做了权限控制，很酷 + +> WE ARE A FUTURIST, MULTI-DISCIPLINE DESIGN STUDIO. +> +> WE CREATE IMMERSIVE EXPERIENCES THAT TRANSFORM THE WAY WE LIVE, THE WAY WE FEEL AND OUR IMPACT ON THE PLANET. +> +> WE DO THIS BY BRINGING TOGETHER ARCHITECTURE, APPAREL AND CUSTOM AUTO DESIGN. + +### 2. [聊聊月经杯](https://hystericalanduseless.club/menstrualcups/) + +> 所有正在经历月经的女性都应该选择安全、舒适、有能力负担且尽可能环保的月经用品，为了实现这一目标，研究人员和政策制定者不仅需要综合考虑产品本身的安全性、更要考虑到产品分销过程的复杂性、产品之外的社会因素造成的影响，来改善女性的月经体验。这些问题的答案绝不可能是简单的，幸运的是，时至今日，相对成熟的科学研究方法能为解决这些复杂的跨界问题提供重要的支持。虽然现有研究的总体质量还有很大提升空间，但仍旧可以为我们提供大量层次丰富的信息。与此同时，专业人士也有责任向公众及时传达最新研究成果，科学知识的普及对于使公民做出明智的个人和专业选择至关重要。 +> +> 看见月经贫困仅仅是个开始，我们还有很长的路要走。 +> ——[#hystericalanduseless](https://hystericalanduseless.club/) + +### 3. [Lingdong Huang's Work](https://lingdong.works/) + +一个从事交互艺术编程的人的作品，有很多有趣的项目，比如[变老模拟镜子](https://age2death.glitch.me)、 [用文言文编程](https://wy-lang.org/)、[鱼画生成器](https://fishdraw.glitch.me/) 等等…… + +> My field of expertise is high-performance software development for the arts, multimedia, research, and entertainment. I am skilled in software development that entails novel combinations of machine learning, computer vision, computer +> graphics, and interaction design for applications such as interactive artworks, games, visualizations, and virtual realities. My effort contributes to the creation of experimental prototypes, installations and performances in museums, +> advertising, and online experiences. + +## 后记 + +今天是农历的七月十三，进小区的时候差点踩到一个橘子，确切地说，是插着一根香的半只橘子，走到楼底，看到有一位阿姨在点香，我突然想起来中元节到了，也就是鬼节，想必此时此刻的家里也点着这样的香。 + +妈妈前几天给我发来消息，说家里这几天在过节，杀鸡又杀鸭的，让我也加点菜，可是加点什么菜好呢？于是今晚吃了麦当劳。总是在下雨天来到麦当劳，伞是湿的，心情也是湿漉漉的，吃饱喝足之后在麦当劳度过了非常平静的一个小时，没有在看招聘软件也没有在学习，在嘟文编辑框里删删改改，写了又丢掉，父母、家庭、朋友、我……没什么特别的东西，想想还是算了，又刷了会儿嘟文，看到了某位象友去世的消息，悲伤渐渐地蔓延开来了，十年，很多人都不见了。 diff --git a/urara/2022-08-18-lwt/+page.md b/urara/2022-08-18-lwt/+page.md new file mode 100644 index 00000000..d5a50ac8 --- /dev/null +++ b/urara/2022-08-18-lwt/+page.md @@ -0,0 +1,134 @@ +--- +title: VPS · 用 docker 安装语言学习工具 LWT +created: 2022-08-18 +summary: Installing LWT with docker and docker composer +tag: + - VPS + - Self-host + - Docker +image: /2022-08-18-lwt/wizard.png +--- + +[LWT](https://learning-with-texts.sourceforge.io/) 是一个阅读分词软件，上传阅读材料后可以标记其中的生词并制卡复习，全称叫 Learning with Texts，不过我还没有怎么用过，详细的介绍可以看下面这几篇文章： + +- [英语学习软件推荐——Learning with text (LWT) | 软通达](https://cyddgh.github.io/post/20220311154810/) +- [Learning With Text 使用全解（也许） - 知乎](https://zhuanlan.zhihu.com/p/463832139) +- [LWT(learning With Text) 本地化安装 - 知乎](https://zhuanlan.zhihu.com/p/473056398) +- Demo： [Learning With Texts (LWT)](https://learning-with-texts.sourceforge.io/testdb/index.php) + +LWT 可以在本地安装也可以在 VPS 上安装，鉴于买了就要用的原则，我决定在 VPS 上安装看看。 + +我安装的 docker image 来源于：[GitHub - jsz4n/lwt-docker: Learning With Texts with Docker](https://github.com/jsz4n/lwt-docker)，还有试过一些其他的 docker image ，都不太顺利，这安装介绍也写得不太清楚，几番周折之后，我修改了`docker-compose.yml` 中的部分内容后部署成功了，下面是我的搭建过程。 + +## 0. 准备 + +前提：安装好 docker 和 docker composer、nginx + +如果还没安装的话，可以这样安装（Ubuntu）： + +```bash +sudo apt update +sudo apt install docker docker-compose +sudo apt install nginx +``` + +准备一个解析好了的域名，如在 Cloudflare 里面配置域名`n.example.org` ：添加一个 A 记录，名称为`n` ，内容为 VPS 的 IP 地址，如`123.123.123.14` + +我之前安装了比较新的 docker composer 版本(1.27.4)，如果没有装新版的话，下面操作的`docker compose`请全部替换为`docker-compose` + +## 1. 下载仓库源码 + +我决定在`/opt/`文件夹下面安装，首先进入 opt 文件夹 + +```bash +cd /opt +``` + +复制 git 仓库并进入文件夹 + +```bash +sudo git clone https://github.com/jsz4n/lwt-docker.git +cd lwt-docker +``` + +原 README 有讲需要本地 build 一下 image，但是感觉不是很必要？我直接用了 `suzanje/lwt:latest` 中的 image + +## 2. 修改配置 + +打开`docker-compose.yml`文件： + +```bash +sudo nano docker-compose.yml +``` + +修改密码： + +```yaml title="docker-compose.yml" {7,15} +version: '3' + +services: + mariadb: + image: mariadb:10.6 + restart: always + environment: + - 'MARIADB_ROOT_PASSWORD=密码' #改这里 + volumes: + - ./media/:/var/lib/mysql + lwt: + image: suzanje/lwt:latest + restart: always + environment: + - 'MARIADB_SERVER=mariadb' + - 'MARIADB_ROOT_PASSWORD=密码' #和上面的一样 + ports: + - '8080:80' #如果需要改端口的话改8080的地方 + depends_on: + - mariadb +``` + +## 3. 上线容器 + +```bash +sudo docker compose up -d +``` + +然后 `sudo docker compose ps` 一下看`lwt-docker-lwt-1` 和` lwt-docker-mariadb-1` 这两项的情况。 + +如果有错误的话，可以`sudo docker logs lwt-docker-lwt-1`看下日志 +或者试着在`/opt/lwt-docker`文件夹下创建一个 media 文件夹： + +```bash +sudo mkdir media +``` + +然后再重新上线容器 + +## 4. 配置反代和 SSL + +我比较懒，设置还是跟之前的[配置 Cloudflare 的免费 SSL 证书](/2022-06-12-cloudflare)里面一样配置，如果不想按照这个方法来配置反代的话可以参考：[利用 Nginx 进行反代](https://mantyke.icu/posts/2021/rsshub-miniflux/#%E5%88%A9%E7%94%A8nginx%E8%BF%9B%E8%A1%8C%E5%8F%8D%E4%BB%A3)中的配置 + +```bash +sudo nano /etc/nginx/conf.d/lwt.conf +``` + +写入 + +```bash title="/etc/nginx/conf.d/lwt.conf" {2,4} +server { + listen 443 ssl; + server_name 域名; + location / { + proxy_pass http://127.0.0.1:8080; + proxy_set_header HOST $host; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + } +} +``` + +接着`sudo nginx -t` 之后 `sudo systemctl reload nginx` 重启 nginx 之后就可以在配置好的域名看到 LWT 啦 + +## 后续 + +如果我有继续使用的话后面可能会更新阅读配置和使用细节等内容（不确定） diff --git a/urara/2022-08-28-vol4/+page.md b/urara/2022-08-28-vol4/+page.md new file mode 100644 index 00000000..4c76f94d --- /dev/null +++ b/urara/2022-08-28-vol4/+page.md @@ -0,0 +1,68 @@ +--- +title: Nonsense Wander ~ Vol4 +created: 2022-08-28 +summary: 1kb club / LOW-TECH MAGAZINE / Internet Time Machine / All About Birds +tags: + - Nonsense Wander +--- + +## Blogs + +### 1. [PLOG](https://hing9u.tistory.com/) + +一个喜欢薰衣草紫的韩国前端工程师，网页设计简洁优雅， + +### 2. [Passo uno](https://passo.uno/why-technical-writing/) + +> **About “passo uno”** +> Passo uno is Italian for stop-motion. It also means step one. +> Choosing the first step of a procedure is often the most critical part of technical writing. At the same time, good UX writing can be seen as a sequence of discrete steps, a stop-motion dialogue which flows like a real conversation. I also wanted the domain name to reflect my ancestry: I was born in Italy and consider myself Italian, though I’ve lived in Spain for longer. + +### 3. [政治学的邀约](https://finelin.notion.site/finelin/8f0e84b281894a9fb599e5ac8c511faf) + +> 我从 2020 年开始比较集中地在微博上写一些文献的介绍，旨在把有趣的研究分享给更多人，同时也是回报自己曾经收益于许多前辈相似的贡献。现在陆续累计了有七十余篇，按照话题整理一个目录，供新关注的朋友查询。原本只是想发长微博，可惜我似乎被限制发布链接了。正好借此机会，整理成文章，方便保存。目录中每个问题都对应一条微博，每条微博都是一篇文章。简介或长或短，并不固定，取决于我那天有多闲。 + +### 4. [4G Spaces](https://blog.youxu.info/) + +> 这个中文博客是我的思考记录，主要用来帮助我 debug/refactor 我的思想，但本人不对任何因为阅读造成的后果负责。 +> 一切文章皆为原创, 18 岁以上的网友转载本博客文章请保留出处. 这里欢迎留言, 但没有智力活动迹象的留言将会被删除. + +### 5. [rachelbythebay : Writing](https://rachelbythebay.com/w/) + +Software, technology, sysadmin war stories, and more +[More on geo-tagging photos with a time element](https://rachelbythebay.com/w/2022/06/20/exif/) + +> The best I can figure so far is that you'd send back a list of ALL of the place names for a given area and let the device figure out which times apply to which photos, and just discard the rest. Also, it should probably be "zoomed out" pretty far, such that only very coarse bounds are given to the server. Just return all of the mappings for all of the polygons or whatever inside some giant swath of space, and do all of the nitty gritty stuff on their device. + +## Explore + +### 1. [1kB](https://1kb.club/) + +一些在 1kb 一下的网页 + +> 1kB Club is a list of web pages weighing less than 1 kilobyte (1,024 bytes). + +### 2. [LOW-TECH MAGAZINE](https://www.lowtechmagazine.com/) + +Doubts on progress and technology + +> Low-tech Magazine underscores the potential of past and often forgotten technologies and how they can inform sustainable energy practices. Technology has become the idol of our society, but technological progress is—more often than not—aimed at solving problems caused by earlier technical inventions. + +> There is a lot of potential in past and often forgotten knowledge and technologies when it comes to designing a sustainable society. Interesting possibilities arise when you combine old technology with new knowledge and new materials, or when you apply old concepts and traditional knowledge to modern technology. + +### 3. [stickerlife.org](https://stickerlife.org/) + +收集了很多品牌贴纸的网站 + +### 4. [I Made an Internet Time Machine](https://www.youtube.com/watch?v=0OB1g8CUdbA) + +一个网页时间机器！简单来说就是通过 wayback machine 来获取之前的页面，通过树莓派代理网络请求。 + +### 5. [Mac Open Web, by Brian Warren](https://macopenweb.com/) + +> A collection of open and indie Mac, iOS, and web apps that help promote the open web. + +### 6.[All About Birds](https://www.allaboutbirds.org/) + +- [Online bird guide, bird ID help, life history, bird sounds from Cornell All About Birds](https://www.allaboutbirds.org/news/) +- [Turkey Vulture Life History, All About Birds, Cornell Lab of Ornithology](https://www.allaboutbirds.org/guide/Turkey_Vulture/lifehistory) diff --git a/urara/2022-09-02-reading-8/+page.md b/urara/2022-09-02-reading-8/+page.md new file mode 100644 index 00000000..e1e986b1 --- /dev/null +++ b/urara/2022-09-02-reading-8/+page.md @@ -0,0 +1,126 @@ +--- +title: 我在看什么 · 8 月 +created: 2022-09-02 +summary: 蝴蝶 / 驴肉火烧 / 如何给你的代码祝寿 / The Chicken and the Pig +tags: + - 我在看什么 +image: /2022-09-02-reading-8/augest.JPG +--- + +## 小碎步 + +- [翻译练习：如何损失金钱和时间](https://mp.weixin.qq.com/s/fyK0gp8rcaDnOJqfSAJFrw) + + > 几天前我意识到一些让人吃惊的事：人们在时间上发生的状况和在金钱上发生的状况很类似。损失时间最危险的方式不是花时间去玩耍，而是去做假工作。 + + > 天性和教养相结合，使得我们避免自我放纵。但今天的世界已经变得更为复杂：现在最危险的陷阱是一些新的行为，这些行为会通过模仿更具德行的行为来绕过针对自我放纵的报警器。最糟糕的是，它们甚至都不好玩。 + +- [为语言多样性现象点灯之作——《〈役割語〉小辞典》读后感](http://www.acgpiping.net/2022/10143/bookreview_9784767491134/) + + > 在阅读本书的过程中，我也不断思考，为什么在中文的中文作品里，似乎我感觉不到有那么多丰富的「役割語」呢？当然也不是说完全没有，例如北京的儿化音、上海人角色的「阿拉」，四川人角色的「脑斧」（「老虎」的 l 音变为 n 音）……不过或许是我阅读中文文学作品也并不多的原因吧，总感觉没有日语里那么多的对话变形现象。 + +- [“速通‘老头环’，但是小学生”](https://www.chuapp.com/article/288815.html) + + 触乐的文章都挺有意思的 + +- [蝴蝶并非个人专属](https://mp.weixin.qq.com/s/ToLKgr9q92HEYAnHb4ieXw) + + 一篇抄袭澄清文，对这个事件不太了解，我是被标题吸引进来的，很喜欢这句话：「蝴蝶并非个人专属」 + +- [《罗福兴，走出杀马特》](https://www.chuapp.com/article/288824.html) + + 再次，触乐的文章写得真好。 + + > 戏里还原了他前半生的经历：进过厂，开过美发室，拍过纪录片，搞过直播，做过装置艺术，演过话剧，但毫无例外地，他身上发生的一切都跟杀马特相关。他试图逃离这个定义，但杀马特又把他留在这里。 + + > 这种认知在 2013 年达到了顶峰，“反三俗”的社会气氛中，杀马特被当成低俗典型，人们“围剿”这些顶着夸张发型的年轻人，杀马特聚集的各大 QQ 群被解散，平台封杀。一些落单的杀马特在出门吃饭时被打，工厂也不再招收他们。 + > + > 这成了杀马特消失的最直接原因——没法进厂，就没饭吃。大批杀马特在一夜之间消失，包括罗福兴。 + + > “偶尔有几个顺着微信找我，想借几百块钱还花呗，我 ×，几百块，还花呗。” 罗福兴叹了口气，声音沉下来，长久的沉默后说：“我觉得好难受。” + +- [THE TASTE FOR ASS | Real Changzhou](https://realchangzhou.org/2022/07/08/the-taste-for-ass/) + 作者是一位大学老师，有次学生做 presentation 的时候介绍驴肉火烧时说味道是 **the taste of ass**，他笑喷了，然后他决定去试试驴肉火烧到底是什么 + + > There was even a picture of the beloved Shrek character Donkey on the wall. I am not kidding. + + > I cannot stop myself. Do I like eating ass? Yes. Have I hit the streets looking for ass? Yes. Do I like getting my hands around more ass? Yes. Do I wish I had more ass in my life? Yes. + +- 关于苹果位置标注的时间维度问题，作者之前标注为 Facebook 的照片最近自动变成了 Meta，由此展开了一番讨论 + + - [Place name mappings probably need a time dimension too](https://rachelbythebay.com/w/2022/06/15/places/) + - [More on geo-tagging photos with a time element](https://rachelbythebay.com/w/2022/06/20/exif/) + + > The best I can figure so far is that you’d send back a list of ALL of the place names for a given area and let the device figure out which times apply to which photos, and just discard the rest. Also, it should probably be “zoomed out” pretty far, such that only very coarse bounds are given to the server. Just return all of the mappings for all of the polygons or whatever inside some giant swath of space, and do all of the nitty gritty stuff on their device. + +## 前端 + +- [Avoiding `
+ ![]()
+ ![]()
+ ![]()
+ ![]()
+
+```
+
+## CSS
+
+```css
+div {
+ /*在容器内设置栏数*/
+ column-count: n;
+
+ /*垂直间距*/
+ column-gap: 0;
+
+ /*在间隔中加点线*/
+ column-rule: dotted;
+}
+
+img {
+ /*防止单个元素分栏*/
+ break-inside: avoid;
+}
+```
+
+元素是从上到下竖直排列的[^1]
+
+
+[^1]: [ Masonry (Waterfall) Layout with Pure CSS](https://www.simpleweblearning.com/masonry-waterfall-layout-with-pure-css/)
diff --git a/urara/2022-12-18-linkding-intro/+page.md b/urara/2022-12-18-linkding-intro/+page.md
new file mode 100644
index 00000000..f04c86de
--- /dev/null
+++ b/urara/2022-12-18-linkding-intro/+page.md
@@ -0,0 +1,133 @@
+---
+title: VPS · 搭建轻量便捷的书签应用 Linkding
+created: 2022-12-18
+summary: linkding is a simple bookmark service that you can host yourself. It's designed be to be minimal, fast, and easy to set up using Docker.
+cover: https://github.com/sissbruecker/linkding/blob/master/docs/linkding-screenshot.png?raw=true
+tags:
+ - VPS
+ - Self-host
+---
+
+## 前言
+
+在前文[Airtable · 网页剪藏](/2022-03-06-airtable/) 中提到了我是如何使用[Airtable](https://airtable.com/)来剪切网页的，虽然 Airtable 剪切时可以同时保留网页截图，但没办法自动 Archive 网页，有些内容时间久了还是一样在风里消散。于是某天我决定试试[Miniflux](https://miniflux.app/)最近支持的开源书签应用 [Linkding](https://github.com/sissbruecker/linkding)：
+
+
+
+