个人技术分享

前端canvas项目实战——在线图文编辑器(十)：小地图MiniMap(上)

上一篇博文中，我们引入了「逻辑画布」的概念，让整个工具的页面看起来“专业”了很多。这也为后续的很多实用的功能打下了基础，例如本篇博文要讲到的小地图MiniMap。这篇博文是《前端canvas项目实战——在线图文编辑器》付费专栏系列博文的第十篇——小地图MiniMap(上)，主要的内容有：1. 小地图的作用及实现前的设计。2. 实现为小地图添加背景图、滑动窗口和遮罩。

微软Edge

微软Edge是一款基于Chromium开源项目的网页浏览器，旨在提供更快的网页加载速度、更高的安全性和更好的用户体验。它支持多种操作系统，包括Windows、macOS、Android和iOS，能够满足不同用户的需求。Edge浏览器拥有多项实用功能，如分屏、网页捕获、集成的PDF查看器、语音识别功能等，这些功能增强了用户在工作、学习和娱乐等方面的体验。

【CSS】媒体（媒介 / media）查询

媒体查询（Media Queries）是 CSS3 中引入的一种技术，用于根据设备的特性和属性，为不同的媒体类型提供不同的样式规则。媒体查询使得我们可以根据设备的屏幕尺寸、分辨率、屏幕方向、设备类型等条件来适应不同的设备和媒体类型。表示媒体类型，比如screen（屏幕）、print（打印）等，而是媒体特性，比如width（宽度）、height（高度）、（方向）等。未指明类型为默认值 all。

Day06：Flex 布局

本文学习Flex布局，首先讲解了什么是标准流（文档流），接着将了浮动（float）布局，浮动布局为什么会脱标以及如何解决脱标的情况。接下来讲解了本文学习的重点，flex 弹性布局，关于 flex 弹性布局主要讲解了 flex 的组成、主轴对齐方式、侧轴对齐方式、如何修改主轴方向、弹性伸缩比、弹性盒子换行以及行内对齐方式，并通过多个例子详细讲解了弹性盒子的布局方式和常用属性，希望对大家有帮助！

react之refs与dom

ref是一种脱围机制，用于保留不用于渲染的值。ref是一个普通的JavaScript对象，具有一个名为 current的属性，你可以对其进行读取或设置你可以通过调用useRef Hook 来让react给你一个ref与state一样，ref允许你在组件的重新渲染之间保留信息与state不同，设置ref的current值不会触发重新渲染不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测Refs是一种通用概念，但大多数情况下你会使用它们来保存DOM元素你通过传递。

Day06：Flex 布局

本文学习Flex布局，首先讲解了什么是标准流（文档流），接着将了浮动（float）布局，浮动布局为什么会脱标以及如何解决脱标的情况。接下来讲解了本文学习的重点，flex 弹性布局，关于 flex 弹性布局主要讲解了 flex 的组成、主轴对齐方式、侧轴对齐方式、如何修改主轴方向、弹性伸缩比、弹性盒子换行以及行内对齐方式，并通过多个例子详细讲解了弹性盒子的布局方式和常用属性，希望对大家有帮助！

webpack编译过程

hash：一种算法，具体有很多分类，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变。此步骤非常简单，webpack将利用node中的fs模块（文件处理模块），根据编译产生的总的assets，生成相应的文件。chunk hash是根据所有chunk assets的内容生成的一个hash字符串。每个chunk都有一个模块记录,一个模块编译完了之后,会对依赖的模块继续进行编译(将多个chunk的assets合并到一起，并产生一个总的hash。