20240329 前端开发周报

一个vue页面复用方案；Vue3 新项目，没必要再用 Pinia 了；Google之野望：Dart一统前端；8个小而美的前端库；解锁前端难题：亲手实现一个图片标注工具；五年前端这题都做不对?；2024 年排名前 5 的 Node.js 后端框架； 前端要学会自己写shell脚本，让你的项目看起来非常牛逼

1. 一个vue页面复用方案

   如何通过继承扩展的方式复用页面，减少项目中大量相似度高但又不完全相同的页面，拒绝重复劳动，从你我做起。O.0

2. Vue3 新项目，没必要再用 Pinia 了

   使用Vue3组合式API开发的项目，有必要使用Pinia吗？其实可以不用，组合式函数完全可以解决状态管理问题

3. Google之野望：Dart一统前端

   JavaScript 长久以来都是无可争议的霸主。 然而，Google 却推出了 Dart 语言——一门旨在提供高性能、高生产力和极致用户体验的编程语言。

4. 8个小而美的前端库

   前端有很多小而美的库，接入成本很低又能满足日常开发需求，同时无论是 npm 方式引入还是直接复制到本地使用都可以。 2024年推荐以下小而美的库。 radash 实用的工具库，相比与 lodash，更

5. 解锁前端难题：亲手实现一个图片标注工具

   探索如何在前端开发中实现一个图片标注工具。本文详细介绍了从渲染图像到实现标注功能的关键步骤，并探讨了将技术抽象成通用开源库的可能性，为开发者提供实用指导和灵感。

6. 五年前端这题都做不对?

   实现汗颜,作为一个多年的老前端做了一遍题居然不及格! 一时陷入了反思中备受打击,诚请各位大哥来一探究竟!

7. 2024 年排名前 5 的 Node.js 后端框架

   自 2009 年以来，Node.js 一直是人们谈论的话题，大多数后端开发人员都倾向于使用 Node.js。在过去的几年里，它的受欢迎程度有所增加。它被认为是美国最受欢迎的网络开发工具，包括 Netf

8. 前端要学会自己写shell脚本，让你的项目看起来非常牛逼

   Husky 是一个流行的工具，它可以让你轻松地在 Git 钩子中使用脚本，从而在提交（commit）代码前运行诸如代码风格检查、单元测试等任务。这有助于保持代码库的质量和一致性。Husky 的工作原理

9. ES2024即将发布5个可能大火的JS新方法

   ECMAScript 2024（ES15） 即将发布（2024年6月），新的版本带来了非常多全新的特性。其中有 5 个全新的 JS 方法，可以大幅度提升我们的工作效率，从而让我们得到更多的摸鱼时间~~

10. Varlet Vue3 组件库 3.2 发布 | 拥抱 Nuxt、桌面端体验增强、支持原子化 CSS 框架

    Varlet Vue3 组件库 3.2 发布，拥抱 Nuxt、桌面端体验增强、支持原子化框架。Nuxt3、Material Design 3 主题配色、桌面端支持。

11. 用Three.js搞个炫酷雷达扩散和扫描特效

    雷达扩散和雷达扫描是3D建筑群常用特效，点进来就跟我学怎么用Three.js搞个炫酷雷达扩散和扫描特效！

12. 面试官：（…）扩展运算符是深拷贝吗？

    大家好，我是勇宝，一名正在学习前端的打工仔，欢迎大家关注我，一起探讨更多前端小知识。今天我们来好好唠一唠深浅拷贝。

13. Flutter & GLSL#8 | 乘法与矩形

    张风捷特烈 Flutter & GLSL 系列文章： 《Flutter & GLSL#1 | Shader 让绘制无限强大》 《Flutter & GLSL#2 | 从坐标到颜色》 《Flutter

14. Redis不再 “开源”

    Redis 官方今日宣布修改开源协议 —— 未来所有版本都将使用 “源代码可用” 的许可证 (source-available licenses)。 具体来说，Redis 将不再遵循 BSD 3-Cl

15. 2024 年 5 个令人兴奋的 JavaScript 新功能

    以下提案很有可能进入今年的 ECMAScript 版本： ECMAScript 更新 JS的新版本总是会引起轰动。自 ES6 更新以来，每年都会有新版本，我们预计今年（ES2024）将在 6 月左右发

16. 队友升职，被迫解锁 Jenkins（所以，前端需要学习Jenkins吗？）

    靓仔，听说你想有学习 Jenkins 的打算，欢迎看我的这篇 Jenkins 入门教程后，看完还不会 Jenkins，那你可以顺着网线过来打我。

17. 分享 Github 上 7 个 Rust 编写的高星级工具

    这是学习 Rust 时不可错过的资源，读代码是学习编程语言的最好方式之一。本文分享 7 个用 Rust 编写的开源软件，其中有些工具不提供统一的安装包，需要从源代码编译。

18. git如何实现一套代码同步到多个仓库

19. 面试官：只知道v-model是:modelValue和@onUpdate语法糖，那你可以走了

    你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？这一过程是在编译时还是运行时进行的呢？

20. vue3+elementPlus 二次封装表单

    功能 Input输入框 autocomplete自动补齐输入框 radio 单选框 checkbox 复选框 date 日期选择框 select 下拉框 如需添加更多功能参考elementPlus或者

21. React项目接入Kimi.ai

    这两天玩了一下月之暗面出的Kimi.ai，使用体验上个人觉得比字节的豆包，或者科大讯飞的好用很多。值得投币的是可以给它一个网页让它替我们总结这个网页的内容，还有导入pdf进行总结的功能。用完直呼666

22. 跟杰哥一起学Flutter (十三、从Widget源码 ✈ InheritedWidget)

23. 准实时前端监控探索

    实时数据能立即反映线上业务情况，对业务来说能很快看到业务变化带来的实时影响，对技术人员来说能实时观察线上出现的一些波动，有利于及时发现线上问题。 数据埋点上报经过数据部门处理后，有两个离线表，天表和小

24. 面试官：小伙子知道synchronized的优化过程吗？我：嘚吧嘚吧嘚，面试官：出去

    写在开头 面试官：小伙子，多线程中锁用过吗？ 我：那是自然！ 面试官：那你知道synchronized的优化吗？ 我：synchronized作为重锁，开销大，在早期不被推荐使用，后期进行了优化，至于

25. 高颜值轻量化跨平台 Redis 桌面管理器 | 开源日报 No.169

    tiny-rdm 是一款现代化的轻量级跨平台 Redis 桌面管理器，适用于 Mac、Windows 和 Linux。它的特点包括超轻量级、直观的用户界面、多语言支持和更好的连接管理。它还提供可视化的

26. CSS Tips：水波纹

    通常情况之下，开发者都习惯了规则的矩形布局的效果，对于 Web 设计师提供的不规则布局，难免会带有一种恐惧。这篇文章将告诉你如何使用 CSS 和 SVG 来实现类似水波纹这样不规则的 UI 效果！

27. Flutter – 升级3.19之后页面多次rebuild？

28. 十多年，前端生涯，就此结束了吗？（二）

29. Java 面试宝典：什么是大 key 问题？如何解决？

30. 通过 gitHub Action 自动发布博客文章

    因为之前的博客升级了，并且 gh-pages deploy 的命令好像也失效了，不知道是不是这个包已经被废弃了，折腾了一段时间发现，没什么卵用，导致每次博客推送都得自己手动打包发布。 我是个极其。。。

31. Flutter 打印功能

    本文，我们来讲讲，如何通过 Flutter 实现调其打印机️打印的功能。关于调起 `printer` 打印的功能。我们有以下的想法～ 我们还可以设定其打印的边距和指定内容的方向等…

32. Vite 的实现原理，确实很巧妙

    vite 是新兴的构建工具，它相比 webpack 最大的特点就是快。 那它是如何做到这么快的呢？ 因为 vite 在开发环境并不做打包。 我们创建个 vite 项目： 安装依赖，然后把服务跑起来：

33. 写html页面没意思，来挑战chrome插件开发

34. [Git] 解决 Git 证书失效导致的 unable to access:error setting certificate verify 问题

    一、问题描述 Git clone 远程仓库时失败，报错： 二、问题分析 这个错误是由于 Git 在尝试访问 HTTPS URL 时无法在本地找到证书文件ca-bundle.crt，没有这个文件，Git

35. Vue-esign手写签字、鼠标写名字目前兼容pc、桌面端（electron）、移动端；可返回base64或者文件流

    文章浏览阅读125次。vue3可直接导入后使用。// （vue2）签字。

36. 为什么我放弃了使用了4年的SASS转而选择使用回原生CSS

37. 面试必备：IO模型详解

38. 4G显存玩转AI绘画Stable Diffusion WebUI Forge来了

    对于8GB显存GPU，生成速度可以有大约30%至45%的提升，GPU内存峰值下降约700MB至1.3GB，最大扩散分辨率将提升约2到3倍，同时最大扩散批次大小将增加约4到6倍。

39. （技巧）当 Next.js 遇到频繁重复的数据库操作时，记住使用 React 的 cache 函数

    如果数据量大、操作比较费时，频繁重复的查询会浪费很多时间，为了提高性能，此时就需要加入数据缓存机制。那么该如何实现呢？这就是本篇要讲的主题之一 —— React cache。

40. 上车WebGL——用Three.js实战3D看车

41. 一篇文章，告别Flutter状态管理争论，问题和解决

    起因 每隔一段时间，都会出现一个新的状态管理框架，最近在YouTube上也发现了有人在推signals, 一个起源于React的状态管理框架，人们总是乐此不疲的发明各种好用或者为了解决特定问题而产生的

42. 替代 Redis 的开源项目「GitHub 热点速览」

    近日，知名开源项目 Redis 宣布修改开源协议，从原来的「BSD 3-Clause 开源协议」改成「RSALv2 和 SSPLv1 双重许可证」。新的许可证主要是限制托管 Redis 产品的云服务商

43. 纯前端实现 JPG 图片压缩 | canvas

44. 【踩坑实录】vue异步组件加载失败会怎样？

    写在最前 看官们好，我是JetTsang，之前都是在掘金潜水来着，现在偶尔做一些内容输出吧。 问题引出 项目技术栈： vue2.6 由于业务场景需要，会在同一个路由组件当中,有一部分页面的组件需要根据

45. Vapor mode研究计划：又回到 vue1.0 版本无虚拟DOM的细粒度绑定，是进步还是倒退？

46. 探寻HTTP革新 — 为什么HTTP/3是未来的前沿？

    最近，公司在面试新的小伙伴时，其中有一道面试题就是关于“HTTP”的，这是一个表面上看似简单但实际上颇具挑战性的问题：“你对 HTTP 协议了解多少？能不能把你知道的都详细说一下？” 问题虽简单，但其

47. Git Commit 提交规范，变更日志、版本发布自动化和 Emoji 提交标准

48. 顶级开源社区都能吵起来？

    因为订阅了 Pulsar 的开发者邮件，前段时间看到一封标题为《(Apache committer criteria) [ANNOUNCE] New Committer: Asaf Mesika

49. web3实战课01：链接你的钱包

    链接用户的钱包，是开发DAPP的第一步，跟着我，用最简单清晰的思路理解钱包链接协议，并完成一次实战链接吧！

50. 使用flutter_rust_bridge为dart构建第三方包

    1. 新建插件项目 2. 添加cargokit自动编译脚本 添加cargokit 到插件目录树 3.添加rust项目 这个命令会在插件的项目目录下添加一个rust目录,需要在里面编写rust代码 打开

51. vue3 key对diff的影响

    这是vue3系列源码的第十一章，使用的vue3版本是3.4.15。key在diff过程到底扮演什么样的角色

52. 轻量级 C++ UI 库：快速、可移植、自包含 | 开源日报 No.168

    imgui 是 C++ 的无臃肿图形用户界面，具有最小的依赖关系。 该项目的主要功能、关键特性、核心优势包括： * 为 C++ 提供了一个轻量级的图形用户界面库 * 输出优化的顶点缓冲区，可

53. Flutter&Flame游戏实践#07 | 打砖块 -功能菜单

54. 新的 CSS 属性 margin-trim

    新的 CSS 属性 margin-trim CSS 中最烦人的事情之一就是边距。它们与折叠有奇怪的相互作用，并且通常会在您不想要的地方产生额外的间距。当迁移到基于组件的设计系统时，这会变得更加痛苦，因

55. WebView组件封装(五)——实现H5页面秒开方案总结

56. 一网打尽手写Promise，妈妈再也不用担心我的面试了

57. Vue3中Hook函数，解锁新技能

58. 干货满满如何做好前端日志和异常监控

59. HTML + CSS实现毛玻璃效果

60. “【VUE3系列】常见的5种Vue组件通信方法”