离梦之殇 如梦之境

认清自我,扩展边界.
To See Outer. To See Inner.

我们应该怎么记录和保存信息

理论篇:DIKW体系

信息,不单单只是一段文字,一句话,或者说脑海中的一个想法。

我觉得对于“信息”这两个字来说,首先应该明确的是,什么是信息,或者说有哪些层次的信息。

而这里的层次可以应用DIKW体系来进行分层:也就是数据(Data)、信息(Information)、知识(Knowledge)及智慧(Wisdom)。每一层的“信息”都是上一层“信息”的汇总和抽象。这里带引号的信息是广义的每一层的信息。

直接事实

其中对于数据而言,因为人无法直接地获取最底层的数据,哪怕得知也通常以信息的形式进行获取。所以其实数据和信息,可以归为一类,也就是“直接事实”。我们或许是需要记忆的,并且是可能会用到的。

这一类信息我想分为瞬期信息、短期信息和长期信息。

瞬期信息,一般可能是随知随忘的,一般时效性是几分钟到一天之内,比如验证码短信、天气信息……

短期信息,一般是某些短期的事情,因为可能有一个时间要求,时效性由事件的发生和结束决定。比如一些活动、一些项目或者作业的DDL……可能会需要进行一些辅助记忆。

长期信息,一般是指没有时效性的一些信息。一般伴生于事件,但是其信息有长期的效用,所以也需要进行一些长期的保存。

间接想法

对于知识和智慧,其实其中的关系也很玄妙。但是其实可以归为一类,也就是间接想法。可能是对于一些直接事实的思考,得出了这些想法。

我觉得想法本身可以不具备时效性。只是,想法本身可以有一个不断发展的过程,或许需要的是不断地将想法去记录下来,然后慢慢演化。

这一部分其实也是在一天晚上突然发现了 Flomo 的时候的感触,就是我们记信息,或者记笔记到底是为了什么?

首先虽然写出来都是文字,但是文字也是有层次的,有些是信息,有些是想法。我们应该怎么去管理这些东西,所以才产生了这篇文章。

工具&路径篇:怎么管理不同层次的“信息”

根据上面所分出来的两个层次:直接事实和间接信息。

对于直接事实,其实只需要一个方便打字并且多端的轻量的应用就可以了。

  • 对于一些瞬时信息,一般来说不需要记录。
  • 对于一些短期信息,我觉得可以记在 Sticky Notes,一方面也是考虑到其可以作为单个便签在电脑中打开。也可以及时向To Do进行迁移。总之这个里面并不需要长期保存一些东西,只是作为一个临时的落脚点。
  • 对于一些长期信息,可以记录在 Google Keep 中,其中也有归档功能,方便进行整理。

对于一些想法,可以用 Flomo进行记录,这本身也是他们的理念。

  • 如果想法催生了一些想做的事,可以记录在To Do里面。
  • 如果想法可以形成一篇文章,则可以整理一下写进博客。

下面是一个用 Mermaid 画的一个流程图。

webpack 备忘

配置

entry

入口,默认值是 ./src/index.js

1
entry: './path/to/my/entry/file.js',

output

输出,默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

1
2
3
4
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},

...More

一些JS函数

buildArray

1
2
3
4
5
6
7
8
9
/**
* 通过 `size` 和 `init` 函数来创建一个数组
*
* @param size 数组的大小
* @param init 初始化函数:(index) => element
* @returns {*[]}
*/
const buildArray = (size, init) =>
Array(size).fill().map((_, i) => init(i));

setDefaultArgs

为一个函数动态地设置参数的默认值。

支持复杂对象,支持链式调用,支持绑定

...More

Web 安全之 XSS 和 CSRF 备忘

XSS

跨站脚本攻击(Cross Site Scripting

攻击方式

  1. 通过inputtextarea注入
  2. 嵌入 JS 脚本
  3. imgonerror
  4. 直接使用 URL 参数

防御方式

  1. 输入验证、过滤
  2. Content-Type
  3. Session、验证码

...More

同源策略和跨域方法备忘

同源

同源定义

是指 协议域名端口 全都相同

同源策略

限制非同源的访问。

有三个标签是允许跨域加载资源:

  • <img src=XXX>
  • <link href=XXX>
  • <script src=XXX>

跨域

CORS

请求区分

简单请求
  • 使用 GET HEAD POST

  • Content-Type 的值仅限于text/plainmultipart/form-dataapplication/x-www-form-urlencoded
  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID

复杂请求

需要用OPTIONS预检。

请求头字段有:

  • Origin
  • Access-Control-Request-Method
  • Access-Control-Request-Headers

服务器相应的响应头信息为:

  • Access-Control-Allow-Origin

  • Access-Control-Allow-Methods

  • Access-Control-Allow-Headers

    以及

  • Access-Control-Allow-Credentials

  • Access-Control-Max-Age

1
2
3
4
5
// 一些例子
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

postMessage

发送

1
window.postMessage(message, targetOrigin, [transfer]);

接收

1
2
3
window.onmessage = function(e) {
console.log(e.data)
}

document.domain

只能用于二级域名相同的情况下

通过设置document.domain,实现同域

JSONP

使用JS,需要服务器支持

服务器代理

使用NodeJs或者nginx等服务器作为中介。

其他

标签中添加crossorigin

访问不再不受限制,而是通过使用CORS的方式加载。但是安全性更好,并且有更详细的报错。

1
crossorigin = anonymous | use-credentials 

关于Hexo安装中的一些问题和方法

执行npm install hexo-cli -g后无反应

解决方法是要把npm的仓库源换成国内的。

命令如下:

1
npm config set registry https://registry.npm.taobao.org

在Hexo中使用KaTeX的方法

目前看下来最好的方法是使用hexo-katex以及hexo-renderer-pandoc

操作如下:

1
2
3
4
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

npm install hexo-katex --save

并在_config.yml中加入

1
2
pandoc:
mathEngine: katex

参考《为 Hexo 更换数学渲染引擎为 KaTeX》

用hexo-abbrlink为博文绑定Disqus(Hexo主题 Journal)

先安装hexo-abbrlink.

然后将\themes\journal\layout\_include\comment_includes.ejs进行修改

1
2
3
4
5
var disqus_config = function () {
this.page.url = '<%= config.url + config.root + page.path %>';
this.page.identifier = '<%= page.abbrlink %>';
//'<%= config.root + page.path %>';
};

Proudly powered by Hexo and Theme by Hacker
© 2021 Rainbow Yang