赵康的日常专栏-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

赵康的日常专栏

专栏成员

86

文章

16759

阅读量

11

订阅数

你也许不再需要使用 CSS Media Queries（媒体查询）了

css class container media 布局

最近，CSS 引入了一项新功能：Container Queries (https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_container_queries)。它可以替代 Media Queries 并实现 Media Queries 无法胜任的任务。

2023-10-23

3320

为什么 CSS flex 布局中没有 `justify-items` 和 `justify-self`?

css flex self 布局语法

为什么在 CSS flex 布局中存在 align-items 和 align-self，却没有 justify-items 和 justify-self 呢？要解答这个问题，首先需要理解主轴（main axis）和交叉轴（cross axis）之间的差异。

2023-10-17

3840

如何编写难以维护的 React 代码？耦合通用组件与业务逻辑

react function title 系统重构

在众多项目中，React代码的维护经常变得棘手。其中一个常见问题是：将业务逻辑直接嵌入通用组件中，导致通用组件与业务逻辑紧密耦合，使其失去“通用性”。这种做法使通用组件过于依赖具体业务逻辑，导致代码难以维护和扩展。

2023-10-17

2190

5 分钟理解 Next.js Static Export

网站 export next static 性能

Static Export 是一种 Web 开发模式，它允许我们在构建网站时将页面提前生成为静态 HTML 文件，而不是在每次请求时动态生成。这意味着页面内容在构建时就已经准备好，而不是等待用户请求时才生成。这样做的好处是：

2023-10-17

4680

使用 MediaStream Recording API 和 Web Audio API 在浏览器中处理音频（未完待续）

api audio web 浏览器音频

最近项目上有个需求，需要实现：录音、回放录音、实现音频可视化效果、上传wav格式的录音等功能。于是乎，我就顺便调研了下如何在浏览器中处理音频，发现 HTML5 中有专门的API用来处理音频。

2023-10-17

5360

如何编写难以维护的React代码？耦合组件

react 开发事件通信优化

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是：子组件直接操作父组件方法，从而导致父子组件深度耦合。这样的实现让子组件过于依赖父组件的具体实现细节，使得代码难以维护和扩展。让我们来看一个例子：

2023-10-17

1220

如何编写难以维护的React代码？——滥用useEffect

react filter list 数组优化

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子，特别是在处理衍生状态时。让我们来看一个例子：

2023-10-17

1590

从零开始，开发一个 Web Office 套件（16）：拖动控制点，调整编辑器大小

office web 编辑器富文本编辑器开发

原因分析：这是因为编辑器平移或调整大小后，editor.blankSpace没有及时更新。

2023-10-17

1400

从零开始，开发一个 Web Office 套件（15）：拖动边框，平移编辑器

office web 编辑器开发事件

Bug表现：如下图，我加了一些辅助线。当我的鼠标从两个边框重叠处开始拖动，且我拖动了一定距离（记为n），但是编辑器却移动了2n的距离。

2023-10-17

1580

从零开始，开发一个 Web Office 套件（14）：复制、粘贴、剪切、全选

office web 富文本编辑器开发算法

在Mac上，当用户按下command键时，KeyboardEvent.metaKey为true；在Windows上，当用户按下ctrl键时，KeyboardEvent.ctrlKey为true.

2023-10-17

2540

从零开始，开发一个 Web Office 套件（13）：删除、替换已选中文字

office web 富文本编辑器开发算法

2023-10-17

1800

从零开始，开发一个 Web Office 套件（12）：删除文字 & 回车换行

office web 开发事件算法

2023-10-17

1660

从零开始，开发一个 Web Office 套件（11）：支持中文输入法（or 其它使用输入法的语言）

office web 富文本编辑器开发事件

输入中文（或者其它需要输入法的语言），跟输入英文的不同之处在于：我们通过键盘输入的文字，并不是直接显示在input框里。而是要通过输入法进行映射、选择，再填入input框里。

2023-10-17

2420

从零开始，开发一个 Web Office 套件（10）：捕获键盘事件，输入文字

存储 office web 开发事件

为了实现键盘输入，我们需要在container div元素（canvas父元素）中插入一个input（或者textarea）元素，作为代理，来捕获键盘相关事件。

2023-10-17

1820

从零开始，开发一个 Web Office 套件（9）：拖动鼠标选中文字 Edge Case

case edge office web 开发

上一节我们初步完成了拖动选中文字的feature，不过还遗留了一些 edge case。这篇文章我们来处理它们。

2023-10-17

1600

从零开始，开发一个 Web Office 套件（8）：状态管理 & 拖动鼠标选中文字

office web 博客管理开发

之前，我们的一些全局状态是以class static field的方式存在的。这样做刚开始可能不会出现问题，但是到后面会出问题：

2023-10-17

1650

从零开始，开发一个 Web Office 套件（7）：新的问题—— Click 事件的 z-index

click office web 开发事件

为了实现这个feature，我们就要监听编辑器空白处的click事件。与此同时，我们会遇到和hover事件相同的问题: 我们需要找到最上层的元素（Char or 空白），触发它的点击事件。

2023-10-17

1200

从零开始，开发一个 Web Office 套件（6）：光标 & Click 事件

click office web 开发事件

然后，在CanvasTextEditor中添加函数createBlinkingCursor，暂时将光标绘制在最后一个字符后面。

2023-10-17

2010

从零开始，开发一个 Web Office 套件（5）：Mouse hover over text

hover office text web 开发

如上图，CanvasTextEditorChar的包围盒是由：left, boundingBoxTop, width, height定义的。另外，其top仅指的是textBaseLine的纵坐标，跟包围盒没有直接的关系。我们期望的结果是：当鼠标hover在包围盒上时，产生相应变化。所以，不能直接让CanvasTextEditorChar直接继承ResponsiveToMouseHover，因为二者的top含义完全不同。而是要让CanvasTextEditorChar持有它作为自己的包围盒。

2023-10-17

1140

从零开始，开发一个 Web Office 套件（4）：新的问题—— z-index

office web 博客函数开发

《从零开始, 开发一个 Web Office 套件》系列博客目录这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件,

2023-10-17

1210

点击加载更多

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态