一个bug引起关于react解析渲染的思考
先看如下代码 bug的代码很简单 实现的逻辑就是父组件通过一个开关 判断是否可以渲染子组件的内容。默认 即不渲染子组件... 先有问题再有答案 1. 2. 3. 4. 预期结果 当 时 通过父组件的条件语句控制，child组件没有被执行到 所以不会报错。 此时组件结构如图所示： 当 时 child组件被执行，当执行 时因为a未定义 所以child组件发生报错。 此时组件结构如图所示： 实际结果 无论 还是 都会发生 的执行错误，导致渲染...
单行文本展示（自动隐藏或缩小）
❓ 在开发h5页面的时候，常常会需要展示各种文案，前端开发会根据UI出的设计图去实现。这里列出的是单行文本的展示，当文本的宽度超出了可视页面宽度的时候，会出现什么情况呢？ 一行只放一种类型的文本，文本会超出元素展示 一行放了多种类型的文本，文本会覆盖其他元素，错乱展示 ❎ 错误展示： ✅ 正确展示： 除了上面列出的2种展示方式，还会有其他的情况么？ 答案肯定是有的。能想到的还有很多，举例说明 超出宽度换行展示，不滚动（没有最大高度） 超...
实现自定义脚手架
首先，每次创建项目后都需要很多重复性操作，比如安装UI库、css预处理器。在业务层面，每次也要添加一些必备的功能，比如登录、404页面等。其次，可以锻炼自己的技术。 脚手架创建项目的流程： 1. 让用户选择模板； 2. 根据用户输入填充模板； 3. 下载模板文件到创建的新文件夹中； 从框架来看，创建项目的时候需要选择是vue框架还是react框架，以及是否需要添加 typescript。 从插件来看，需要安装UI库、CSS预处理器、路由...
搭建前端脚手架
需求： 公司里前端初始项目有多个比如： 管理系统、electron、h5... 每次新项目都需要去找仓库里对应的基建代码？于是准备自搭一个脚手架，实现新项目时直接使用脚手架创建对应项目的模板。 采用monorepo的模式来管理脚手架、在这里只提供核心代码实现，废话不多说开干！开干！ 1、初始化项目 2、修改package内容 3、使用第三方包解析交互命令 使用prompts来解析命令，实现目标如通过 创建项目，如图： 在 文件中 使用...
【本地npm包调试】有了它，再也不用npm link了
问题 ：我们开发完一个npm包，有没有这样一种方式，既不用正式发包，又能像正式发包一样本地直接安装调试呢？ 答案是：有的！！！ 它就是： Yalc Yalc 完美地模拟了正式发包及装包的流程，它既可以将本地构建好的包发布到本地全局的.yalc文件夹下，也可以将发布在本地的包安装到本地的任何一个项目里。 安装 全局安装yalc 发布本地包——在npm包根目录下执行 1、调整包版本号 2、构建包，即build 3、将本地构建好的包内容发布到...
React 19 公测版升级完全指南：破坏性更改
给前端以福利，给编程以复利。大家好，我是大家的林语冰。 React 团队爆料最新主版本升级 React 19 Beta（公测版）已经正式上线 npm，想要提前沉浸式体验最新版本的 React 发烧友可以深度阅读这份 React 官方博客的升级指南。 React 19 中新增的改进需要某些破坏性更改，但预计这些变更不会影响大多数应用程序。 在这篇 React 官方博客中，我们将指导你将库升级到 React 19 beta（公测版）的完整步...
使用 WebCodec 在浏览器解码视频、抓帧截图、转GIF
在浏览器内将视频转GIF，无需上传，速度飞快 ✨ 已上线 使用 ffmpeg 生成高质量GIF，全是技巧和折磨 上周五写一个材料的时候，需要插入几个 GIF 演示动图。一开始我熟练的打开终端，使用了我这段祖传 ffmpeg 生成高质量 GIF 的命令： 但是转换过程不太顺利，因为输出的 GIF 文件太大了，我不得不去精细地调整参数，把各种骚操作都尝试一遍，包括但不限于： 剪辑视频：在 前插入想要的时间范围 调整分辨率： 表示宽度 320...
再遇协同编辑：Yjs + Quill，文档协同编辑竟如此简单
通过上一篇文章 ，相信各位小伙伴对 OT 和 CRDT 协同算法有了一定的了解，并且对 Yjs 有了初步的认识，本文主要教会大家如何使用 Yjs 来实现 Quill 的协同编辑，以及针对 Yjs 的一些重要概念进行讲解。 因为协作需要服务端的支持，所有没有 demo，具体实现请 。 Yjs 介绍 官方介绍： 用于构建 Google Docs 和 Figma 等协作应用程序的模块化构建块 。 基于 CRDT ，帮助实现高性能的协作应用程序...
浏览器画中画
作者GitHub： 有兴趣可关注！！！ 尽管效果可以，但是api兼容性不理想🤦 安全上下文 ：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。 Document Picture in Picture API（文档画中画API） 文档画中画API（pip api）可以打开一个始终在顶部的窗口， 该窗口可以填充任意HTML内容 ，它扩展了早期的 画中画API，专门支持将HTML 元素放入始终在顶部的窗口中。 兼容性...