blog
blog copied to clipboard
Pines-Cheng
技术博客
* OAuth是一个关于授权（authorization）的开放网络标准。[The OAuth 2.0 Authorization Framework](https://datatracker.ietf.org/doc/html/rfc6749) * JSON Web Token（缩写 JWT）是目前最流行的跨域认证解决方案。[JSON Web Token (JWT)](https://datatracker.ietf.org/doc/html/rfc7519) * 基于角色的访问控制 (Role-based access control, RBAC) 对于权限设计还是挺有参考的。 * Node 权限相关：[node_acl](https://github.com/optimalbits/node_acl)，[rbac](https://github.com/seeden/rbac)。 * 一个支持访问控制模型的认证库，支持 Node.js 和 Browser 的...
 * 实现了双向通信的统一接口，对比 [cyrus-and/chrome-remote-interface](https://github.com/cyrus-and/chrome-remote-interface) 使用协议定义文件自动生成 [Chrome Debugging Protocol](https://chromedevtools.github.io/devtools-protocol/) 接口，两种实现方式，各有千秋。 * 还可以参考 VSCode 的 Language server protocol Node 实现 [microsoft/vscode-languageserver-node](https://github.com/Microsoft/vscode-languageserver-node)，里面包含了 RPC 的 IPC 版本 [vscode-jsonrpc](https://github.com/microsoft/vscode-languageserver-node/tree/master/jsonrpc) * Theia 的 WebSocket 连接基于 RPC...
科学上网原理
## 背景 在很久很久以前，我们访问各种网站都是简单而直接的，用户的请求通过互联网发送到服务提供方，服务提供方直接将信息反馈给用户。  后来，[GFW](https://zh.wikipedia.org/wiki/%E9%98%B2%E7%81%AB%E9%95%BF%E5%9F%8E) 就出现了，他像一个收过路费的强盗一样夹在了在用户和服务之间，每当用户需要获取信息，都经过了 GFW，GFW将它不喜欢的内容统统过滤掉，于是客户当触发 GFW 的过滤规则的时候，就会收到 `Connection Reset` 这样的响应内容，而无法接收到正常的内容。  GFW 内部结构：  GFW 列表可以参考这里：[gfwlist/gfwlist](https://github.com/gfwlist/gfwlist)  聪明的人们想到了利用境外服务器代理的方法来绕过 GFW 的过滤，其中包含了各种HTTP代理服务、Socks服务、VPN服务等。 ## SSH Tunnel SSH（Secure Shell）是一个提供数据通信安全、远程登录、远程指令执行等功能的安全网络协议，由芬兰赫尔辛基大学研究员Tatu Ylönen，于1995年提出，其目的是用于替代非安全的Telnet、rsh、rexec等远程Shell协议。之后SSH发展了两个大版本SSH-1和SSH-2。 想深入了解SSH的原理，可以查看 O‘RELLY的...
随着前端这几年的风生水起，CSS作为前端的三剑客之一，各种技术方案也是层出不穷。从CSS prepocessor（SASS、LESS、Stylus）到后来的后起之秀 PostCSS，再到 CSS Modules、Styled-Component 等。有人维护了一份完整的 [CSS in JS 技术方案的对比](https://github.com/MicheleBertoli/css-in-js)，里面已经有将近50种技术方案。CSS Modules就是其中一种。 ## CSS Modules 介绍 要弄懂CSS Modules是什么，可以先看官方介绍：[GitHub – css-modules/css-modules: Documentation about css-modules](https://github.com/css-modules/css-modules) 通过上面介绍可以看出，CSS Modules既不是官方标准，也不是浏览器的特性，而是在构建步骤（例如使用Webpack或Browserify）中对CSS类名选择器限定作用域的一种方式（通过hash实现类似于命名空间的方法）。例如我们在buttons.js里引入buttons.css文件，并使用.btn的样式，在其他组件里是不会被.btn影响的，除非它也引入了buttons.css. ## CSS模块化 JS已经全面实现了模块化，但是css还处于探索阶段。为什么我们需要css模块化？主要由一下几个原因。 ### CSS全局作用域问题 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。现在的前端工程大多是基于组件开发，随着工程的页面数量好复杂度的提升，相信写css的人都会遇到样式冲突（污染）的问题。一般我们会采用一下几种方法：...
* [InversifyJS](https://github.com/inversify/InversifyJS) 是 Theia/VSCode 的基础，而且有丰富的[生态](https://github.com/inversify/InversifyJS/blob/master/wiki/ecosystem.md) * 了解 SOLID / DIP / IoC / DI / IoC 容器的概念 * ES6 的平时业务中相对使用较少的特性：[Reflect](https://es6.ruanyifeng.com/#docs/reflect)、[Proxy](https://es6.ruanyifeng.com/#docs/proxy)、[Decorator](https://github.com/tc39/proposal-decorators)、[Map](https://es6.ruanyifeng.com/#docs/set-map)、[Symbol](https://es6.ruanyifeng.com/#docs/symbol) 等都在 InversifyJS 中广泛使用 * 了解 DI，参考：[JS 依赖注入(DI) 的实现及使用场景](https://github.com/Pines-Cheng/notes/issues/88)，前端最代表性的应该是 Angular ：[Dependency...
 > 翻译原文：MongoDB 官方文档：[SQL to MongoDB Mapping Chart](https://docs.mongodb.com/manual/reference/sql-comparison/) ## 前言 很多开发者首次接触数据库（通常是在高校课堂）的概念，或者说接触第一个数据库，通常是 SQL 数据库，而现在，NoSQL 数据库越来越流行，很多原 SQL 数据的使用者难免有转向 NoSQL 的需求。而作为 NoSQL 数据库的代表，MongoDB 在社区越来越流行，生产环境的使用也日益广泛。 对于 SQL 转战 NoSQL的开发人员来说，最难的一步其实是将原有的 SQL 的概念和知识直接复用过来，最大化的减小学习的成本。 其实，这一步 MongoDB 官方已经为大家考虑到了，那就是在：`MongoDB...
- [es6-design-patterns](https://loredanacirstea.github.io/es6-design-patterns) - [The Catalog of TypeScript Examples](https://refactoring.guru/design-patterns/typescript) > Back in 1994, a book was authored by Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides that discusses 23 desgin...
 ----- > 2021.8.25 日补充：推荐文章 [大型 Web 应用插件化架构探索](https://developer.aliyun.com/article/782744) ----- * Theia 插件系统功能非常强大，这么大的工程，依然能保持高质量的代码和清晰的架构，值得思考和学习 * VSCode Extension API 和配置的定义规范且抽象 Eclipse Theia 是一个可扩展的平台，可以利用最先进的 Web 技术开发多语言的 Cloud & Desktop IDE。 ## 名词解释 -...
* GraphQL 的核心价值在于一整套的[体系](https://github.com/chentsulin/awesome-graphql)、生态、工作流，如：DSL，解析器，调试工具，代码生成等，这些在针对类似的场景或解决方案很有参考意义。 > 官方文档最棒：[GraphQL 入门](https://graphql.bootcss.com/learn/) > 缺点：每一个 field 都对数据库直接跑一个 query，会产生大量冗余 query。 GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。 GraphQL 作为 FaceBook 2015 年推出的 API 定义/查询语言，在历经了两年的发展之后，社区已相对发达和完善。目前社区相关的文章已经很多，有兴趣的同学可以去 Google，或者直接看 [GraphQL 官方教程](http://graphql.org/learn/) 以及 [Apollo GraphQL Server...
* RPC 的概念在前端应用还是比较广泛的 * VSCode 的 [Debug Adapter Protocol](https://microsoft.github.io/debug-adapter-protocol/) 的协议定义上更加丰富 * 大部分并没有严格遵守：[JSON-RPC 2.0 Specification](https://www.jsonrpc.org/specification) * 源码及相关的可以参考：[Chrome DevTools Frontend 运行原理浅析](https://zhaomenghuan.js.org/blog/chrome-devtools-frontend-analysis-of-principle.html)，写得很详细，不想重复了。 > 默认是 http://localhost:9222/devtools/inspector.html ，带模拟器；http://localhost:9222/devtools/devtools_app.html 不带模拟器。 DevTools 本质上可以看成是一个前端小应用，代码在这里： [ChromeDevTools/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend)，当然，你也可以在 Chrome 浏览器直接打开：`devtools://devtools/bundled/inspector.html` 查看运行效果。...