0%

简介

Monorepos

Monorepos 是一种软件开发实践,其中多个项目(通常是相关或依赖的项目)存储在同一个版本控制库中,而不是分散在多个独立的仓库中。这种方法可以在大型组织中使用,以便更好地管理代码共享、依赖关系和版本控制。

Git Submodule

Git Submodule 是 Git 中的一种机制,允许你将一个 Git 仓库作为另一个 Git 仓库的子目录。每个子模块都有自己的版本控制历史记录。

阅读全文 »

Observable Plot 初探

Observable Plot 简介

What is Plot

Observable Plot是一个免费的开源 JavaScript 库,用于可视化表格数据,专注于加速探索性数据分析

why-plot

Observable Plot用于探索性数据可视化。它用于快速发现见解。它的 API 不仅富有表现力且可配置,还针对简洁性和易记性进行了优化。我们希望首次绘制图表的时间尽可能快。

而且速度还不止于此:Plot 可帮助您快速调整和优化数据视图。我们希望 Plot 能让您花更少的时间阅读文档、搜索要复制粘贴的代码和调试 — 而花更多时间询问数据问题。

与其他可视化工具(包括 D3 等低级工具和图表模板等表达能力较弱的高级工具)相比,我们认为使用 Plot 探索数据会更有效率。您将花更多时间“用视觉思考”,而花更少的时间处理编程机制。

阅读全文 »

基于大语言模型的Code Review体验

Code Review一直是一个重人力的工作,有时项目紧任务重Review就会流于形式,单人Review难以避免错漏。多人Review则面临成本问题。 有些单人负责的项目甚至没有reviewer。本文简单分享基于大模型的Code Review体验以及遇到的一些问题。

阅读全文 »

HTML attributes 与 DOM properties

属性和特性是完全不同的东西

1
2
3
4
5
6
7
8
9
10
11
12
<div foo="bar">…</div>
<script>
const div = document.querySelector('div[foo=bar]');

console.log(div.getAttribute('foo')); // 'bar'
console.log(div.foo); // undefined

div.foo = 'hello world';

console.log(div.getAttribute('foo')); // 'bar'
console.log(div.foo); // 'hello world'
</script>
阅读全文 »

数据可视化之美

简介

本文是《数据可视化之美》的阅读笔记,解构并重组了其原本的组织形式,剔除了部分具体的可视化案例(如词云、纽约地铁、美国民航以及本书后期的大量具体案例)。目的是从中分析和总结一些可视化设计的原则和方法论,以指导未来的可视化设计和开发。

《数据可视化之美》主要讲述了可视化的一些设计准则,如何通过数据可视化来讲述故事,以及一个可视化项目的执行流程,并通过具体案例了解可视化探索的过程和一些有趣的发现。

其中,大多数信息可视化的原始驱动力在于对数据的探索和描述,推动其发展的主要是一些出版机构(如《纽约时报》、《连线》)。可视分析的推动者多为非营利组织或学术组织,而在一些科学可视化和可视化软件中则可以看到商业组织的身影。

阅读全文 »

基于Dom的无限画布实现方案

针对无限画布这个场景,在业界figma的画布交互体验是公认的比较好的。不过figma采用的是canvas方案。本文介绍基于Dom的无限画布实现方案。

image-20240507100547446

主体结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 画布容器 -->
<InfiniteCanvas>
<!-- 渲染器 -->
<Renders>
<!-- 布局器 在合适的位置渲染元素渲染器 -->
<Layouter>
<!-- 元素渲染器 -->
<ItemRender/>
</Layouter>
</Renders>
<!-- 设计器 -->
<Designer>
<!-- 已选中元素的指示器 -->
<SelectedBox/>
<!-- 布局提示线 -->
<LayoutHintLine/>
<!-- 右键菜单 -->
<ContentMenu/>
<!-- 刷选框 -->
<SelectBox/>
<!-- 拖拽添加元素时的蒙板 -->
<DragOverMask/>
<Designer/>
<!-- 控制器 -->
<Controller/>
</InfiniteCanvas>

核心属性

1
2
3
4
5
6
7
8
9
10
11
// 画布的移动属性 
canvasTransform: {
// 缩放比例
scale: 1,
// 画布由于平移引起的 偏移量
translateX: 0,
translateY: 0,
// 画布由于缩放引起的 偏移量
canvasOffsetX: 0,
canvasOffsetY: 0,
}
阅读全文 »

完全基于云服务的Web应用开发过程

这里介绍一种完全基于云服务的Web应用开发过程,各云服务基本都包含免费方案。对于一些小型的非商业化Web应用完全可以基于云服务0成本开发、部署、落地。

过程 & 工具

Demo 开发 源码管理 测试 部署 数据存储
对象存储
CDN
image-20240410102256245 image-20240410101449634 image-20240410102356797 image-20240410102503333 image-20240410102558041 image-20240410103109672
image-20240410102657853
image-20240410102745415
阅读全文 »

Web Components 现状及发展趋势

笔者之前参与过两个低代码项目,大屏编辑器,图表编辑器。其表现形式均为通过拖拽和配置表单来编排物料,进而生成交付产物。其中物料的丰富程度、可复用程度又是重中之重。如果物料本身依赖某一种框架,比如ReactVue在大时间跨度下必然会产生迁移成本。届时面对海量的待升级的基础物料,如何迁移就会变成一个非常麻烦的问题。

Web Components提出了一种无需任何库或框架即可运行的组件化方案。用于将物料解耦具体前端框架十分合适。本文尝试从Web Components的发展历史、现状、优缺、趋势等方面尝试判断现在是否合适将已有的物料迁移至Web Components

阅读全文 »

NodeJs性能分析

这里提出一种面向NodeJs的基于Chrome Dev Tools的性能分析方法。

核心思路

  • 基于console.profile记录性能描述信息,输出.cpuprofile文件。
  • 基于Inspector记录内存占用信息, 输出.heapsnapshot文件。
  • 基于Chrome读取.cpuprofile.heapsnapshot文件分析性能问题。

效果

JS执行情况

image-20240111175431182

内存占用情况

image-20240111175943820

阅读全文 »