Polychromatic 是用于 GNU/Linux 的外设 RGB 灯光管理软件,由 OpenRazer 提供支持。Polychromatic 用于管理照明、RGB 效果和键盘、鼠标、小键盘和 GNU/Linux 系统上几乎任何其他游戏外设的一些特殊功能。该软件旨在使创建和协调适用于所有兼容硬件的照明效果变得容易,即使更换至其他 Polychrom 也支持的品牌设备。Polychromatic 本身只是一个前端应用程序,它需要安装一个后端来提供与硬件的实际通信。目前,OpenRazer 是唯一受支持的后端。
songjinzang14 发布的帖子
-
开源的外设RGB灯光管理应用Polychromatic
-
RE: nuxt 生成静态后,事件失效了
在 nux.config.js 中加入以下配置
export default { generate: { subFolders: true } } ```js
-
响应式整改后台
为了提升业务人员操作管理后台的体验,花了点时间进行响应式的改造,紧急情况时,掏出手机就能工作。利用CSS3的媒体查询,就能根据不同屏幕的尺寸采用不同的样式来渲染,目前使用的移动端屏幕阈值为750px。
为了便于管理,基于Less的语法,声明了一个常量,专门记录屏幕尺寸。首先是管理后台整体结构的改造,包括左边的菜单栏,右边的快捷按钮,登录信息等。
第一个部分是:菜单栏。原显示界面上左边的菜单在手机界面还是蛮占地方的,默认情况下需要将其隐藏,还有那张Logo图,也需要隐藏,最大限度的将区域留给菜单。在Chrome的控制台,切换成手机屏幕时,右半部分会出现挤压的问题。
可以将右半部分设置为绝对定位,脱离正常流,再向左偏移菜单栏的宽度就能避免内容被挤压。之后就到了整改快捷键部分,快捷按钮有3个,PC界面这块的高度是固定的,并且是横向布局。移动端的屏幕比较窄,更适合纵向布局。并且为了节约空间,登录后的昵称,也隐藏了,免得破坏布局。
第三个部分是全局样式。这些按钮默认是没有上下间距的,需要手动添加,例如修改Ant Design 的下拉框、搜索框、日期选择框的下边距,存储在 global.css 文件中。在之前的页面开发中,很多组件的宽度都是以内联的方式声明的。当时的确很方便,但是现在改造给我制造了障碍。如果直接在CSS文件中声明,那么特殊性不会比内联的高,也就不会生效,所以得用另一种方式。后面就想用脚本来做样式的更新,脚本比较好写。但是需要考虑一种情况。那就是页面初始化时不存在的DOM元素,需要点击或其他交互后才能被添加进来。因为需要监听DOM的变化,所以自然就想到了MutationObserver。
-
煮豆黑体Zhudou Sans
煮豆黑体是衍生自 Noto Sans 和思源黑体的标点符号字体家族,支持中日韩标点、全角字母、全角数字及一些特殊符号。标点造型主要来源于 Noto Sans,可以为类似风格的西文字体带来更加协调的多语言混排效果。此字体为可变字体,支持字重无级变化,同时提供对应思源黑体 7 个字重的静态版本。
-
基于vue2.0的组件库element
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。
Consistency与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
Feedback通过界面样式和交互动效让用户可以清晰的感知自己的操作;操作后,通过页面元素的变化清晰地展现当前状态。
Efficiency设计简洁直观的操作流程;语言表达清晰且表意明确,让用户快速理解进而作出决策;界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
Controllability根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
-
Markdown编辑器框架Milkdown
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看板系统
grafana是一款开源监控度量的看板系统,可以连接Graphite数据源,Elasticsearch数据源,InfluxDB数据源等多种数据源,定制化非常高。
grafana是可以用于可视化大型测量数据的一个开源程序,它提供了强大和优雅的方式去用来创建、共享、浏览数据。dashboard中显示了不同metric数据源中的数据。
grafana最常用的是用于因特网基础设施和应用分析,但在其他领域也有机会用到,比如:工业传感器、家庭自动化、过程控制等等。grafana有热插拔控制面板和可扩展的数据源。
简单来说,Grafana其实可以看作一个可视化面板(Dashboard),有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编辑器,经常被用作基础设施的时间序列数据和应用程序分析的可视化,它在其他领域也被广泛的使用包括工业传感器、家庭自动化、天气和过程控制等。
Grafana支持许多不同的数据源。每个数据源都有一个特定的查询编辑器,该编辑器定制的特性和功能是公开的特定数据来源。
-
Activity响应多元的属性动画
响应逻辑的作用是在于从一个界面的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包含多个属性动画集合的属性动画类。
属性动画与普通动画类似,同样可以在资源文件中静态声明,也可以在代码中动态声明,但是由于其作用对象可以是任何对象,而且属性动画的优势在于为作用对象的属性提供一组变化的属性值,所以属性动画只能在需要绑定作用对象的代码位置动态使用。由于静态声明的属性动画可以针对多个对象使用,在开发过程中推荐使用静态声明+动态使用的方式。
-
TypeScript 入门教程
从 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/ -
UmiJS可插拔的企业级 React 应用框架
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/ -
ng-alain基于 ng-zorro-antd 的中后台前端解决方案
NG-ALAIN 是一个企业级中后台前端/设计解决方案脚手架,ng-alain秉承 Ant Design 的设计价值观,目标也非常简单,希望在 Angular 上面开发企业后台更简单、更快速。ng-alain提供了很多的通用业务模块,能够让开发者更加专注于业务。同时ng-alain是MIT协议的开源项目。
特性:基于 ng-zorro-antd;响应式;国际化;基建类库 @delon(包括:业务组件、ACL访问控制、缓存、授权、动态表单等);延迟加载及良好的启用画面;良好的UI路由设计;定制主题;Less预编译;良好的目录组织结构;简单升级;支持Docker部署。
而中台则是属于前台的一部分,例如淘宝,天猫等一些平台他们都拥有一部分重复的服务,比如微聊服务,搜索服务等一些服务,而把这些重复的服务抽取出来作为公共的服务,这便是中台。
-
JavaScript 超集的TypeScript类型系统
TypeScript是Microsoft公司注册商标。TypeScript具有类型系统,且是JavaScript的超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。
TypeScript目前还在积极的开发完善之中,不断地会有新的特性加入进来。 因此本手册也会紧随官方的每个commit,不断地更新新的章节以及修改措词不妥之处。
所谓超集,就是在JavaScript的基础之上多了一些扩展特性,多出来的就是一套更强大的类型系统,以及对ECMAScript的新特性的支持。它最终会被编译为原始的JavaScript。也就是说,使用TypeScript后,就可以使用TypeScript的新特性,以及它更强大的类型系统。完成开发后,再将代码编译成能够在生产环境中直接运行的JS代码。
-
现代 JavaScript简介
JavaScript 最初被创建的目的是“使网页更生动”。这种编程语言写出来的程序被称为 脚本。它们可以被直接写在网页的 HTML 中,在页面加载的时候自动执行。脚本被以纯文本的形式提供和执行。它们不需要特殊的准备或编译即可运行。
JavaScript 在刚诞生的时候,它的名字叫 “LiveScript”。但是因为当时 Java 很流行,所以决定将一种新语言定位为 Java 的“弟弟”会有助于它的流行。随着 JavaScript 的发展,它已经成为了一门完全独立的语言,并且也拥有了自己的语言规范 ECMAScript。现在,它和 Java 之间没有任何关系。
如今,JavaScript 不仅可以在浏览器中执行,也可以在服务端执行,甚至可以在任意搭载了 JavaScript 引擎 的设备中执行。浏览器中嵌入了 JavaScript 引擎,有时也称作“JavaScript 虚拟机”。
现代的 JavaScript 是一种“安全的”编程语言。它不提供对内存或 CPU 的底层访问,因为它最初是为浏览器创建的,不需要这些功能。
JavaScript 的能力很大程度上取决于它运行的环境。例如,Node.js 支持允许 JavaScript 读取/写入任意文件,执行网络请求等的函数。浏览器中的 JavaScript 可以做与网页操作、用户交互和 Web 服务器相关的所有事情。
-
Angular应用程序设计框架和开发平台
Angular用于创建高效且复杂的单页应用程序。横跨所有平台:学会用 Angular 构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。
速度与性能:通过 Web Worker 和服务端渲染,达到在如今(以及未来)的 Web 平台上所能达到的最高速度。Angular 让你有效掌控可伸缩性。基于 RxJS、Immutable.js 和其它推送模型,能适应海量数据需求。
美妙的工具:使用简单的声明式模板,快速实现各种特性。使用自定义组件和大量现有组件,扩展模板语言。在几乎所有的 IDE 中获得针对 Angular 的即时帮助和反馈。所有这一切,都是为了帮助你编写漂亮的应用,而不是绞尽脑汁的让代码“能用”。
百万粉丝热捧:从原型到全球部署,Angular 都能带给你支撑 Google 大型应用的那些高延展性基础设施与技术。
-
ECMAScript标准
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
ECMAScript是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript最先被设计成一种Web脚本语言,用来支持Web页面的动态表现以及为基于Web的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言, ECMAScript具备同其他脚本语言一样的性质,即“用来操纵、定制一个已存在系统所提供的功能,以及对其进行自动化”。
-
面向金融场景的Vue.js移动端组件库mand-mobile
面向金融场景的移动端UI组件库,基于Vue.js实现。一个移动UI工具包,基于Vue.js2,专为金融场景设计。丰富、灵活、实用,快速打造优质金融产品,让复杂的金融场景变得更简单。
基于“合理易用”的设计价值观,将从交互操作、视觉抽象、图形可视化的角度,共同解决问题。提供相关资源的下载和输出,帮助快速构建高质量的产品页面原型或高保真视觉效果。
-
P2P文件分发系统Dragonfly
Dragonfly(蜻蜓)是阿里自研并捐献给 CNCF 的 P2P 文件分发系统,用于解决大规模文件分发场景下分发耗时、成功率低、带宽浪费等难题。大幅提升发布部署、数据预热、大规模容器镜像分发等业务能力。
Dragonfly 可用于 P2P 文件分发、容器镜像分发、局部限速、磁盘容量预检等。它支持多种容器技术,对容器本身无需做任何改造,镜像分发比 natvie 方式提速可高达 57 倍,Registry 网络出流量降低99.5%以上。
-
Bootstrap官方开源SVG图标库BootstrapIcons
Bootstrap Icons 是 Bootstrap 开源的 SVG 图标库,此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建,现在可以免费用于任何项目,无论此项目是否使用了 Bootstrap。
Bootstrap Icons 是 SVG 图标库,因此它们可以快速、轻松地扩展,并且可以配合 CSS 的使用进行个性化定制。
根据自己的设置,可以通过多种方式将 Bootstrap Icons 添加到项目:将 SVG 复制粘贴为内嵌式的 HTML 元素;通过元素引用;使用 SVG sprite等。
最新的 Bootstrap Icons 发布版包含数十个新图标、重新设计的文档和呼声最高的新特性 —— 图标字体!多亏了一个很棒的项目 Fantasticon,我们正为我们的图标生成 Web 字体。首先,要生成 2 种 Web 字体格式 —— .woff 和 .woff2。借助一个生成的 CSS 文件,我们还引入了一个包含所有 Web 字体图标的 HTML 索引。