20240119 前端开发周报

44K star2023最火的前端开源项目；面试官： forEach怎么停止；前端对接电子秤、扫码枪设备serialPort 串口使用教程；给大家一些建议，2024 可以考虑放弃（纯粹的）技术路线，前端已死绝不是说说而已；11K star 这款开源神器帮你省下XX音乐的会员费；前端 同时多次调用同个接口，如何只触发一次而不是触发多次；2023前端各类明星项目排行榜；花 15 分钟把 Express.js 搞明白，全栈没有那么难

1. 44K star2023最火的前端开源项目

   今天我们推荐的就是2023年最火的前端开源项目，目前在GitHub已超过44K Star，它就是：shadcn-ui。

2. 面试官： forEach怎么停止

   介绍 在准备 JavaScript 面试时,理解数组方法的复杂性至关重要。一个常见的问题是是否可以停止或中断 forEach 循环。本文探讨了 forEach 方法的功能、其局限性以及 JavaScr

3. 前端对接电子秤、扫码枪设备serialPort 串口使用教程

   因为最近工作项目中用到了电子秤，需要对接电子秤设备。以前也没有对接过这种设备，当时也是一脸懵逼，脑袋空空。后来就去网上搜了一下前端怎么对接，然后就发现了SerialPort串口。 SerialPort

4. 给大家一些建议，2024 可以考虑放弃（纯粹的）技术路线，前端已死绝不是说说而已

   整篇文章，只有干货，没有心理按摩，想看心理按摩建议出门右转。如果说 2023 年前端最热门的话题， **「前端已死」** 势必是最热门的话题。

5. 11K star 这款开源神器帮你省下XX音乐的会员费

   平时你都有什么来听歌，都充哪些会员？今天我要帮大家省钱了。 今天我们推荐的开源项目是spotube，它是一款开源的Spotify客户端，本项目目前在GitHub已超过11K Star。

6. 前端 同时多次调用同个接口，如何只触发一次而不是触发多次

   前端同个接口请求多次，如何做到请求一次，都返回的是第一次请求的结果。常用场景例如请求中携带 token的案例

7. 2023前端各类明星项目排行榜

   欢迎来到JavaScript Rising Stars的第八版，这是一个展示2023年JS生态系统趋势的地方。 让我们看看您用的UI组件是如何席卷全球的！ 以下图表比较了过去12个月在GitHub上新

8. 花 15 分钟把 Express.js 搞明白，全栈没有那么难

   Express 是老牌的 Node.js 框架，以简单和轻量著称，几行代码就可以启动一个 HTTP 服务器

9. 23年一个迷茫老前端的总结和规划

   23年匆匆过去，回首一看，也算是充满挑战的一年，技术没提升多少，人差点干废了。考摩托车驾驶证、亲人的离去、卖房子，买房子、开始装修房子、筹备婚礼

10. 2024年的七大前端Web开发趋势

    前端开发领域不断发展，新的技术、框架和趋势不断出现。虽然适应快速变化可能具有挑战性，但保持对最新趋势的了解可以提升你的职业生涯和保持你的技能的现状。

11. 【面经】5年前端2023面经（滴滴、集度、百度、地平线）

    两岸猿声啼不住，轻舟已过万重山。我们终究都会找到一份满意的工作的，只要你能熬得住，有耐心，所以不管何时，我们都要心怀光明，船到桥头自然直，车到山前必有路，没有什么事情是到不了终点的,行则将至。

12. ⛳⛳你不得不知道的常用 Git 命令

    最近在学习的时候发现 git 命令没有自己想象中那么简单，特此做一期 《 常用 Git 命令 》，不仅是给掘友分享，也能巩固自己学到的知识。在此向大家推荐一个学习 git 指令的小游戏 [Learn

13. 专访 华为OpenTiny开源项目负责人 Kagol

    hi, 大家好, 我是徐小夕. 最近在我的公众号《趣谈前端》中上线了《小夕朋友圈》栏目, 我会定期采访国内外优秀的开源作者和独立开发者, 分享他们的学习成长经验和独立产品开发经验, 让更多热爱技术的小

14. 日历前端渲染开发记录

    需求分析 突然接到一个排班的需求。 看了下算是比较老的项目，使用的是vue2+element开发的，使用的是element的UI组件库。去查看下element的Calendar组件。⬇️长这样 看起来

15. 不喜欢原子化CSS得我，还是在新项目中使用了Unocss

    本篇文章主要讲述Unocss的使用和个人使用之后的感想 在此之前还写过一篇关于反对在Vue里使用tailwind CSS的一篇文章（主写Vue的，React等框架中没有抵抗）。当然，当时写那篇文

16. 从输入4399.com到页面渲染之间的回流和重绘（附字节面试题）

17. html中的lang起到什么作用？

    今天被lang="en"这玩意给坑了，平时看着不起眼的一个小配置，结果在中文换行的时候出现了不一样的效果…… 测试在火狐浏览器显示都一样，在chrome就是如图效果，起初还以为是chrome渲染机制的

18. 【18.3K⭐】WindTerm：一款功能强大、界面优美的开源跨平台终端软件

    【18.3K⭐】WindTerm：一款功能强大、界面优美的开源跨平台终端软件 由于我经常需要使用终端来连接远程服务器进行系统管理、编写代码和部署一些AI项目，因此我需要一款功能强大的终端工具，最好界面

19. 使用 Fuse.js 实现高效的模糊搜索

20. 中国行政区划数据：省级到村级详细信息 | 开源日报 No.148

    《中华人民共和国行政区划 (五级) 数据库》是一个提供中国省级、地级、县级、乡级和村级行政区划数据的项目。数据来源于国家统计局，已更新至最新发布时间。你可以通过 JSON 或 CSV 格式下载数据，也

21. 认识webpack | webpack作用 | webpack配置

    webpack说难很难，说简单也简单，难主要是loader和plugin模块 webpack是目前用的最多的构建工具，它不是个框架，webpack就是个打包工具，给项目做压缩处理，此前我介绍过vite

22. 这里有从零开始构建现代化前端UI组件库所需要的一切（一）

    这篇系列文章深入探讨了构建现代前端UI组件库的关键步骤。从设计理念到工程结构，再到流程优化和发布维护，为读者提供全面指南。学习如何避免陷阱，确保组件库的稳定性和用户体验。

23. Celeris Web，一套妹子都觉得好看的Vue3模板

    Vue3+Unocss+NaiveUI+Monorepo搭建一套妹子觉得好看的前端模板 一年前，我刚刚从后端转入前端的大门，兴奋又迷茫。身边的女性朋友们总是找我帮忙写小工具，但每次都被吐槽UI太丑了。

24. [Vue] vue组件通信 props和$emit 以及Vuex基础

25. js 系列第一篇：数组对象的 34 种官方用法

    前言 数组（Array）作为 JavaScript 位列第一的对象， 其重要性可见一般，在这里就让我们来详细的扒一扒数组对象都有哪些方法，它们分别能对数组做什么。 想一起学习 Js 语言知识的同学可以

26. 如何用 Canvas 实现 PS 的液化功能

    如何用 Canvas 实现 PS 的液化功能？本文带你进入 Canvas 和传统图像处理的魔法世界~

27. 前端基础-设计层次

    视觉设计的核心就是“让它们看起来好看”，但如果我们没有天生的设计天赋，我们会觉得很难实现。但并不是这样的，对于"变好看"这件事情本身其实是有理可依、有据可循的。而层次结构就是这其中的一部分。 视觉层次

28. threejs如何实现已编辑好的3D模型数据回填，并嵌入到多个不同项目代码中去展示

29. 前端Rust生态的背后，napi-rs如何让Rust与JavaScript可以相互调用

30. 开源一套更好用的表单渲染解决方案 SchemaRender

31. 你不知道的Less：使用Less生产原子化CSS

    你不知道的Less，用Less打造你的CSS原子化工厂。原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。

32. 前端工程化必备-实现一个自己的脚手架

33. 前端性能优化手册 – RoadMap

    本文旨在把常见的前端性能优化的手段归类整理，画大图，供大家在自己的自测流程中参考。对于性能优化，并不是说有了优化总结这张大图，就不管开发什么项目都对着来一遍。优化是有场景与前提的，「乱优化不如不优化」

34. Gitlab CI/CD自动化部署

    一来公司用的仓库本就是gitlab，其中的部分项目也用到了当中的CI/CD工具，但是这些都是前人留下来的遗产，具体的搭建过程对我来说就是个黑盒；二是很久很久之前买来的云服务器一直在吃灰。秉承着…

35. 基于 slate.js 框架 wandEditor 富文本渲染及源码分析

36. 如何实现一个Canvas渲染引擎(一)：节点和层级关系

    canvas并不会主动维护一个层级关系，我们能做的事情，只有画圆、画矩形、画线等，至于像DOM那样，在一个节点上调用appendChild来给这个节点添加子节点这种事情，在canvas里是不存在的..

37. nodejs+vue+ElementUi婚恋交友相亲网站yne25-vscode项目

    文章浏览阅读394次。管理员功能有个人中心，用户管理，会员管理，活动信息管理，活动类型管理，参加信息管理，签线服务管理，会员账户管理，充值信息管理，消费信息管理，会员参加管理，论坛管理，管理员管理，留言板管理等。基于vue的婚恋网站的设计与实现 1。

38. 一道字节的 TS 体操面试真题

    前天，小册群友问了我一个 TS 体操问题，说是面字节时遇到的。 今天又催了一下： 面试题是这样的： 让实现这个 FormatDate 的类型，用来限制字符串只能是指定的日期格式。 看起来好像没多大难度

39. 我打造了一款，平民化的、高性能、高灵活的表单（vue 篇 — @usaform/element-plus）

    我打造了一款，平民化的、高性能、高灵活的表单（vue 篇 — @usaform/element-plus） 该轮子是我对之前的原理篇的实践后的产物，如何打造一款，平民化的、高性能的，类表单体系（原理

40. toly 命令行工具 | Flutter 图标字体代码生成器

    上一篇 《Flutter 知识集锦 | Dart 开发命令行工具》 介绍了，如何通过 Dart 开发一个命令行脚本工具。本篇将结合一个具体的场景，介绍一下它的使用。toly 命令行工具目前已经开源并上

41. 开源的代名词「GitHub 热点速览」

    当开发者谈论开源时，通常会想到 GitHub，它不仅仅是一个代码托管平台，更是一个汇聚了全球开发者的社交中心。过去，开发者发布一款软件后，都是在自己的小圈子里默默努力和交流，现在通过 GitHub 平

42. Less 和 SCSS，哪一个更适合你？

    在前端开发的世界里，CSS 预处理器已经成为了一个不可或缺的工具，它们扩展了 CSS 的功能，使得样式编写变得更加高效和可维护。在众多预处理器中，Less 和 SCSS 无疑是最受欢迎的两个。

43. Vue3 源码解读-watch 实现原理

44. JSPDF + html2canvas A4分页截断

45. 一镜到底vue前端开发准备

46. 开源 UI 组件库和开发工具库概览 | 开源专题 No.59

47. Web前端 —- 【Vue3】ref和reactive实现响应式的区别和联系

    文章浏览阅读574次，点赞27次，收藏27次。本文介绍了ref和reactive直接实现响应式的原理以及区别和联系

48. Vue2 + Monaco Editor 使用教程

49. ES6弥补了数组的缺陷，请使用Array.of()方法

    Array.of()  静态方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型 官方解释 基本语法 Array.of() 是创建数组的方法，它接收若干个参数，返回一个新的

50. Flutter 知识集锦 | Dart 开发命令行工具

    在开始本篇之前，请确保命令行中可以支持 dart 命令，如果没有请下载 Dart SDK 或者 Flutter SDK。 我们的目的是让通过 dart 语言编写可支持程序，并在命令行中访问： 1. 创

51. 学习鸿蒙，不能错过关键问题解密，助你事半功倍 、napi-rs如何让Rust与JavaScript可以相互调用 | 酱酱的下午茶第 306 期

    看点：前端Rust生态的背后，napi-rs如何让Rust与JavaScript可以相互调用、前端性能优化：封装一个通用的懒加载组件、学习鸿蒙，不能错过关键问题解密，助你事半功倍、Hikari源码分析

52. [Saasfly前端小报] 国内卷团队，国外卷体验，我们落后了？

53. 如何应对Android面试官->我用RecyclerView实现了吸顶效果

    大厂面试官带你深度理解 RecyclerView 的 ItemDecoration，深度定制 ItemDecoration 实现吸顶效果，轻松应对 Android面试官连环炮

54. 「开源」一个可以对日期自定义标记并且生成分享图的日历 – Calendar Remark

55. 一次面试经历，细思极恐

56. Node.js 内置模块大揭秘：事件工具 （events） 模块解析

57. [Saasfly前端小报] 谁是2023年最好的前端框架？

58. 图解CSS：CSS 的值和单位

59. Web前端 —- 【Vue3】computed计算属性和watch侦听属性(侦听被ref和reactive包裹的数据)

    文章浏览阅读624次，点赞41次，收藏34次。本文介绍了vue3中的computed计算属性和watch侦听属性

60. 面试官：Redis除了缓存，还能做什么？

    啧啧，面试官又开始为难人了，Redis做缓存难道不香吗，非要问我还能做什么。 当代孔乙己有木有，非要问茴香豆中“茴”字的四种写法。