Polychromatic 是用于 GNU/Linux 的外设 RGB 灯光管理软件，由 OpenRazer 提供支持。Polychromatic 用于管理照明、RGB 效果和键盘、鼠标、小键盘和 GNU/Linux 系统上几乎任何其他游戏外设的一些特殊功能。该软件旨在使创建和协调适用于所有兼容硬件的照明效果变得容易，即使更换至其他 Polychrom 也支持的品牌设备。Polychromatic 本身只是一个前端应用程序，它需要安装一个后端来提供与硬件的实际通信。目前，OpenRazer 是唯一受支持的后端。

项目地址：
https://www.oschina.net/p/polychromatic

在 nux.config.js 中加入以下配置

export default {
  generate: {
    subFolders: true
  }
}
```js

  为了提升业务人员操作管理后台的体验，花了点时间进行响应式的改造，紧急情况时，掏出手机就能工作。利用CSS3的媒体查询，就能根据不同屏幕的尺寸采用不同的样式来渲染，目前使用的移动端屏幕阈值为750px。

  为了便于管理，基于Less的语法，声明了一个常量，专门记录屏幕尺寸。首先是管理后台整体结构的改造，包括左边的菜单栏，右边的快捷按钮，登录信息等。

  第一个部分是：菜单栏。原显示界面上左边的菜单在手机界面还是蛮占地方的，默认情况下需要将其隐藏，还有那张Logo图，也需要隐藏，最大限度的将区域留给菜单。在Chrome的控制台，切换成手机屏幕时，右半部分会出现挤压的问题。

  可以将右半部分设置为绝对定位，脱离正常流，再向左偏移菜单栏的宽度就能避免内容被挤压。之后就到了整改快捷键部分，快捷按钮有3个，PC界面这块的高度是固定的，并且是横向布局。移动端的屏幕比较窄，更适合纵向布局。并且为了节约空间，登录后的昵称，也隐藏了，免得破坏布局。
　
  第三个部分是全局样式。这些按钮默认是没有上下间距的，需要手动添加，例如修改Ant Design 的下拉框、搜索框、日期选择框的下边距，存储在 global.css 文件中。在之前的页面开发中，很多组件的宽度都是以内联的方式声明的。当时的确很方便，但是现在改造给我制造了障碍。

  如果直接在CSS文件中声明，那么特殊性不会比内联的高，也就不会生效，所以得用另一种方式。后面就想用脚本来做样式的更新，脚本比较好写。但是需要考虑一种情况。那就是页面初始化时不存在的DOM元素，需要点击或其他交互后才能被添加进来。因为需要监听DOM的变化，所以自然就想到了MutationObserver。

煮豆黑体是衍生自 Noto Sans 和思源黑体的标点符号字体家族，支持中日韩标点、全角字母、全角数字及一些特殊符号。标点造型主要来源于 Noto Sans，可以为类似风格的西文字体带来更加协调的多语言混排效果。此字体为可变字体，支持字重无级变化，同时提供对应思源黑体 7 个字重的静态版本。

项目地址：
https://www.oschina.net/p/Zhudou-Sans

  Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

  Consistency与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

  Feedback通过界面样式和交互动效让用户可以清晰的感知自己的操作；操作后，通过页面元素的变化清晰地展现当前状态。

  Efficiency设计简洁直观的操作流程；语言表达清晰且表意明确，让用户快速理解进而作出决策；界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

   Controllability根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

  Milkdown 是插件驱动的所见即所得的 Markdown 编辑器框架。它由两部分组成：一个小巧的核心，提供了插件加载器和一些内置插件。大量的插件，包括语法、命令和组件。

  通过这种模式，开发者可以根据喜好开启或关闭语法和功能，例如表格，数学公式或斜线指令。当然也可以创造自己的插件来实现想法。所见Markdown - 以一种优雅的方式编写 markdown。可定制主题 - 主题可以通过 npm 包安装和共享。 -通过插件支持你的脑洞。 基于prosemirror 和 remark构。 让任何人都可以使用。LaTeX 数学公式支持。拥有流畅的 ui 的表格支持。-基于yjs的协同编辑支持。 支持 markdown 格式的复制粘贴。支持 emoji 快捷指令和选择器。

  Milkdown 基于这些工具：Prosemirror 和它的社区 - 一个用于在 web 端构建富文本编辑器的工具包；Remark 和它的社区 - 正确的 markdown 解析器；Postcss - 用于构建主题的强大的 css 工具；TypeScript - 以 TypeScript 编写；Prism - 代码块支持Katex - 高性能的渲染数学公式
项目地址：
https://milkdown.dev/#/zh-hans

grafana是一款开源监控度量的看板系统，可以连接Graphite数据源,Elasticsearch数据源,InfluxDB数据源等多种数据源，定制化非常高。

grafana是可以用于可视化大型测量数据的一个开源程序，它提供了强大和优雅的方式去用来创建、共享、浏览数据。dashboard中显示了不同metric数据源中的数据。

grafana最常用的是用于因特网基础设施和应用分析，但在其他领域也有机会用到，比如：工业传感器、家庭自动化、过程控制等等。grafana有热插拔控制面板和可扩展的数据源。

简单来说，Grafana其实可以看作一个可视化面板（Dashboard），有着非常漂亮的图表和布局展示，功能齐全的度量仪表盘和图形编辑器，经常被用作基础设施的时间序列数据和应用程序分析的可视化，它在其他领域也被广泛的使用包括工业传感器、家庭自动化、天气和过程控制等。

Grafana支持许多不同的数据源。每个数据源都有一个特定的查询编辑器,该编辑器定制的特性和功能是公开的特定数据来源。

项目地址：
https://github.com/grafana/grafana

响应逻辑的作用是在于从一个界面的Activity跳转到另一个界面的Activity，也可以理解为是某些视图View的相对变化。然而不管是启动一个界面执行新界面Activity的生命周期方法，还是视图的相对变化，都需要一段时间去实现，所以在响应的最终结果完成之前是有一段空白时间的。而在这段或长或短的时间里，该怎么给用户展示界面呢？这就用到Android系统推荐的动画流程了。

广义上说，Android系统在屏幕上绘制展示给用户的内容发生变化时，都可以使用相关动画过渡。与用户操作的响应一致，根据动画的作用对象不同，展示动画的效果可以作用于界面Activity，也可以作用于视图View。

响应丝滑动画：分别作用于普通视图、绘制视图的绘制对象、和界面这三种对象的动画效果，但是这些都有一定得使用的局限性。比如这些动画都只是以屏幕上绘制更新的方式绘制动画，并没有真实改变作用对象的实际位置或属性，这种问题在视图动画中尤为明显，在没有特别设置时，动画结束后的视图状态会还原到动画前，也就是说动画中及动画后的视图对象是没有保存动画中用到的一些属性的。这种情况就需要属性动画了。

属性动画本质是对某个对象的属性提供一组变化更新的属性值，他的作用对象不仅可以是视图和界面，也可以是任何具有上述需求的对象类。在Android3.0 API 11开始的AndroidSDK版本中，定义了android.animation.Animator类作为抽象父类来描述属性动画的结构，并提供了android.animation.ValueAnimator作为只变化属性值的属性动画类、android.animation.ObjectAnimator可以变化属性值并更新到对象属性的属性动画类、和android.animation.AnimatorSet包含多个属性动画集合的属性动画类。

属性动画与普通动画类似，同样可以在资源文件中静态声明，也可以在代码中动态声明，但是由于其作用对象可以是任何对象，而且属性动画的优势在于为作用对象的属性提供一组变化的属性值，所以属性动画只能在需要绑定作用对象的代码位置动态使用。由于静态声明的属性动画可以针对多个对象使用，在开发过程中推荐使用静态声明+动态使用的方式。

从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源于 GitHub 上。

它的第一个版本发布于 2012 年 10 月，经历了多次更新后，现在已成为前端社区中不可忽视的力量，不仅在 Microsoft 内部得到广泛运用，而且 Google 开发的 Angular 从 2.0 开始就使用了 TypeScript 作为开发语言，Vue 3.0 也使用 TypeScript 进行了重构。

TypeScript扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

如果你使用过JavaScript，你就会知道JavaScript是在运行的时候，才能发现一些错误的，比如：访问了一个对象没有的属性；调用一个函数却少传了参数；函数的返回值是个字符串你却把它当数值用了…而这些问题在TypeScript 这里都不算事。TypeScript 强大的类型系统可以在你编写代码的时候，就发现这些小错误。并且配合VSCode这类编辑器，你可以借助编辑器的提示愉快地使用 TypeScript。另外值得一提的是，深受前端开发者喜爱的 VSCode 也是使用 TypeScript 开发的哦。

TypeScript 通过类型批注提供静态类型以在编译时启动类型检查。这是可选的，而且可以被忽略而使用 JavaScript 常规的动态类型。

项目地址：
https://ts.xcatliu.com/

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50+ 的插件。

umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 600+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

umi 首先会加载用户的配置和插件，然后基于配置或者目录，生成一份路由配置，再基于此路由配置，把 JS/CSS 源码和 HTML 完整地串联起来。用户配置的参数和插件会影响流程里的每个环节。

umi实现插件化umi 的整个生命周期都是插件化的，甚至其内部实现就是由大量插件组成，比如 pwa、按需加载、一键切换 preact、一键兼容 ie9 等等，都是由插件实现。

开箱即用：你只需一个 umi 依赖就可启动开发，无需安装 react、preact、webpack、react-router、babel、jest 等等。约定式路由：类 next.js 的约定式路由，无需再维护一份冗余的路由配置，支持权限、动态路由、嵌套路由等等。

项目地址：
https://v2.umijs.org/