全部文章
共 1299 篇文章
搭建前端脚手架
需求： 公司里前端初始项目有多个比如： 管理系统、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 元素放入始终在顶部的窗口中。 兼容性...
浮动与BFC容器
浮动布局是面试中的一个考点，且大多数面试官在考你css时，问的最多的知识点就是浮动，所以我们不仅要会用浮动去布置页面，还要深入理解其原因，知其然，又要知其所以然，只有这样，你才能在面试官面前如鱼得水般的谈笑自如。下面我会引导你去理解浮动布局究竟有啥知识点和细节需要去理解和注意。 1\. 实现文字环绕效果和脱离文档流 在以前的网站上，有着这么一种典型布局方式（文字环绕图片），如图： 你写着写着，突然想插入一张图片，然后图片后面继续写字，这...
深入理解前端性能优化：图片懒加载实践
在当今的前端开发领域，网站性能优化是一个永恒的主题。性能优化不仅关乎用户体验，也直接影响到网站的搜索引擎排名。其中，图片加载优化是提升页面加载速度的重要手段之一。本文将深入探讨一种常用的图片优化技术——图片懒加载的原理和实现方法。 什么是图片懒加载？ 图片懒加载是一种常用的网页性能优化技术，其基本思想是延迟非可视区域图片的加载时间。换句话说，只有当用户滚动到页面的某个区域，位于该区域的图片才开始加载。这样不仅减少了无谓的网络资源请求，还...
[Android] Android开发中dip，dpi，density，px等详解
Px （Pixel像素） 也称为图像元素，是作为图像构成的基本单元，单个像素的大小并不固定，跟随屏幕大小和像素数量的关系变化（屏幕越大，像素越低，单个像素越大，反之亦然）。所以在使用像素作为设计单位时，在不同的设备上可能会有缩放或拉伸的情况。 Resolution（分辨率） 是指屏幕的垂直和水平方向的像素数量，如果分辨率是 1920\ 1080 ，那就是垂直方向有 1920 个像素，水平方向有 1080 个像素。 Dpi（...