20240322 前端开发周报

纯 CSS 检测文本是否溢出；十分钟学会WebSocket；我为什么从WebStorm换到了VSCode？；前端开发人员注意，这是一个【神奇】的网站；技术资讯：Volar正式更名为Vue-Official；没想到三天10KStar的营销利器MediaCrawler开源作者已经删库了；一个近乎完美的vue页面复用方案；前端大神 Anthony Fu 新作：Shiki v1.0 重磅发布

1. 纯 CSS 检测文本是否溢出

   介绍一个CSS检测文本溢出的小技巧。 一直以来，CSS 都无法很好的检测出一段文本是否溢出。但这又是一个非常普遍的需求，比如多行文本展开，展开按钮只有在文本溢出的时候才出现 由于无法直接CSS判断，这

2. 十分钟学会WebSocket

   WebSocket简介 WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个TCP连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。 W

3. 我为什么从WebStorm换到了VSCode？

   因为是后端Boy，所以一直用的是IDEA，于是在选择前端IDE的时候自然而然选择了全家桶中的WebStorm，但是在使用的过程中也是遇到了很多问题，于是

4. 前端开发人员注意，这是一个【神奇】的网站

   工具集合应用，这种类型已经卷成麻花了。有 Reycast、He3、uTools、Alfred、DevToys、IT-Tools 等等等。Sinqi.tools，又一个的工具集合应用，为什么能脱颖而出？

5. 技术资讯：Volar正式更名为Vue-Official

   Vue3旧语言工具 Volar 退了，一个更加强大的Volar升级版，Vue-Official 来了！Volar 正式升级更名为 Vue-Official ！

6. 没想到三天10KStar的营销利器MediaCrawler开源作者已经删库了

   前言 一站式社交平台数据抓取利器，带你玩转小红书、抖音、快手、B站和微博数据分析。前两天应该是出事了，要不然不会这么快被和谐了。

7. 一个近乎完美的vue页面复用方案

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

8. 前端大神 Anthony Fu 新作：Shiki v1.0 重磅发布

   Shiki 是一个使用 TextMate 语法和主题的语法高亮器，与 VS Code 使用相同的引擎。它为您的代码片段提供了最准确、最美观的语法高亮。Pine Wu 于 2018 年在 VS Code

9. 哈士奇的一周面经：腾讯某部门前端开发

   先写总结，这次面试寄了，而且哈士奇没有坚持过二十分钟。。。 说说自己整个面试的过程，首先哈士奇海投简历，本以为大厂会直接筛掉哈士奇的简历，没想到直接就给过了，还很快给哈士奇发邮件通知。

10. Rust 的风，终究还是吹到了前端

    大家好，我是风筝 前些天有一个叫做Rolldown的工具悄悄开源了，做前端开发的同学可能已经了解到了。到文章发布的时候 star 数量已经是 5.8k 了。而此工具的开源作者正是前端大佬，Vue 创始

11. 一天涨 23k Star 的开源项目「GitHub 热点速览」

    ​在 GitHub 上做过开源项目的小伙伴，可能都经历过截图自己项目 100 Star、1000 Star 的时刻，但有些时候事情发生的太快来不及截图，因为可能一觉醒来就破万了。这件事看似有些天方夜谭

12. 连yyx都要借鉴的二维双链表到底怎样？揭秘vue3.4神秘黑魔法

    Vue3.4黑魔法：双链表重构后的新响应式系统～本文为新式响应式系统的解析，该pr已被正式合并入minor分支，如果解析有不到位的地方，望各位提表建议。

13. 马斯克开源Grok-1：3140亿参数迄今最大，权重架构全开放，磁力下载

    今天凌晨，马斯克旗下的大型模型公司 xAI 宣布正式开源了一款名为「Grok-1」的混合专家（MoE）模型，该模型包含着 3140 亿个参数，成为当前参数量最大的开源大语言模型之一。

14. 57K star开源BI神器，比收费软件还好用的数据可视化工具

    企业光拥有冷冰冰的数据毫无价值，想要取得商业成功，如何分析和利用拥有的数据才是关键。 今天我们推荐一款开源数据可视化项目，它比很多收费软件还要强大，更好的让数据产生价值实现商业智能。

15. 一行代码引发的离奇问题，众多大佬纷纷参与点评，最终Typescript之父出手解决

    故事的起因是这样的， 一个前端开发人员(也算是挺有名的，ariakit.org的作者， wrodPress的前维护者)在社交媒体上发了这么一条帖子。 短短几天就有了51.8万次的view。 简单的文案

16. 2万星开源低代码平台，帮你节省数百小时的工作

    今天我们来推荐一个开源低代码平台，帮助工程师节省上百小时的时间去构建工作流类的应用， 目前在GitHub已超过20K Star，他就是：budibase 。

17. 比 Bun 还快的 JS 运行时来了WinterJS 1.0 发布

    WinterJS 是一个非常快的、与 WinterCG 兼容的 Javascript 运行时，使用 Rust 编写，使用 SpiderMonkey 引擎执行 JavaScript，并使用 Tokio

18. 啥？线上css样式错乱了？我本地运行没问题啊

    记录一次线上问题，可以作为一个深入了解打包工具的切入点，阻止出现和测试同学扯皮不过的场景发生，提高前端同学的公信力

19. 面试官：说一说Transactional注解实现原理

    本文从源码的角度，剖析了Transactional注解的实现原理：包括注解的解析，代理对象的创建，事务增强方法的使用，同时还从源码的角度分析Transactional注解失效的原因。

20. Vue3+不正规ts实现不正规的落叶飘落效果

    大家好，今天我向大家分享一个基于 Vue3+ts+canvas 实现的落叶飘过效果。当然这里并没有做一些基础的知识的科普，我们讲究实现的逻辑。（多多包涵）

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

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

22. Vue3 动态组件？原来是这样啊

    本篇文章主要以理解Vue3动态组件，及其相关应用与问题解析。 什么是 Vue3 动态组件？ 简单来说，这里的动态，即：能够根据组件的呈现条件，来调整好自己需要呈现的组件，以此来满足对需求的实现。 基本

23. 了解一下 Git 的一些现代命令和特性?

    你应该了解的现代 Git 命令和功能. 现在已经不是 2005 年了, git提供的不仅仅是add, commit, push和pull. 让我们来探讨一下你应该了解的新的现代化的 git 命令吧.

24. 我和我的4年前端生涯

    我是一个普普通通的前端开发工程师， 除了我的同事，在这个圈子内没人认识我，想听听我的故事吗？我和我的4年前端生涯

25. ReduxToolkit、CSS/SVG实现复杂线条光效、MySQL 优化器索引选错、布隆过滤器、Android perfetto | 酱酱的下午茶第316期

    【本期掘金酱的下午茶】亮点： 不要再写满屏import导入啦 Redux Toolkit 准线上事故之 MySQL 优化器索引选错 布隆过滤器：原理与最佳方案实践 浅聊下对 app 开发成长有益的一些

26. 面试官：在连续请求过程中，如何取消上次的请求？

    如 Boss 搜索框所示： 请求参数通过右侧的 query 参数也可以看到，一共请求了四次。 不难发现，这里已经做了基本的防抖，因为我们连续输

27. 面试字节 被算法题给干懵拉

28. ️ 一键清空 GitHub 仓库

29. 一行代码极速部署：开源流数据库推出面向个人开发者的流计算平台

    在 2024 年这个时间点上，让流计算普及化的时机是否已经成熟？开源流式数据库 RisingWave 推出了面向开发者的本地版，让广大开发者和中小企业轻松享受到流计算带来的价值。

30. Flutter 知识集锦 | extension 拓展类方法

    Dart 的拓展类方法已经支持很久了，之前忘了写篇文章介绍一下。最近写了几个拓展方法，借此机会，好好介绍一下 extension 关键字对类的拓展。 1. 从密文的字符串开始说起 比如现在有个需求:

31. 面试官：聊聊 nextTick

32. 《金融行业前端探索》（2）使用electron-vite-vue 搭建一个金融终端框架

33. 纯前端实现 PNG 图片压缩 | UPNG.js

    最近在迭代应用的时候用到了 UPNG.js 压缩 PNG 图片，这里记录分享一下使用经验，并附上完整 Demo。

34. gu：轻松切换个人和工作的 Git 用户配置

    开发者在处理多个项目时常面临切换Git用户配置的需求。gu命令行工具，专为简化这一流程而设计，允许用户在个人和工作项目间轻松切换Git配置

35. vue3继承并扩展三方组件完成二次封装

36. node.js vue ElementUI axios vuex vue-router typescript 及相关技术栈之间的层级关系和互依性解析

    文章浏览阅读227次，点赞2次，收藏7次。这样，你就可以看到这些技术之间的基本关系和它们各自的作用了。

37. Electron 通用数据持久化 适合vue、react…

    文章浏览阅读282次，点赞8次，收藏6次。electron通用的数据持久化方案，解决了electron localstorage存储数据失效的问题。

38. 不知道，但是可能超有用的 Web API

39. 面试题：如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

40. Github主页设置贪吃蛇详细教程

    先看最终实现结果： 有条贪吃蛇放在主页还是蛮酷的哈哈哈。接下来我来讲一讲怎么在Github主页添加一条贪吃蛇。 首先要修改自己的Github的主页，我们得有一个特殊的仓库——这个仓库必须与你的Gith

41. 父爱如山-用vue3给女儿做做个10以内加减法练习工具–3/1000

    背景 我可爱的女儿，现在正在幼儿园中班就读。她已经开始学习10以内的加减法了，为了帮助她学习与成长，所以我决定给她写一个练习工具，让她感受无边的父爱。

42. Next.js v14 实现乐观更新，面向未来的 UI 更新方式，你可以不去做，但你不应该不了解

    其实乐观更新并不是一个新潮的思想，但大家普遍不会去实现乐观更新，归根到底还是实现成本太高。所以本篇会结合 Next.js 和 useOptimistic 讲解如何低成本并考虑全面的实现一个乐观更新。

43. Flutter 调用Google内购支付最新教程

    前言： 各位同学大家好， 之前看到有人在群里问flutter 怎么调用Google支付， 今天就准备整理写一篇文章。 效果图 实现方式： 我们是通过flutter和安卓交互 然后在原生安卓里面加入了内

44. 实战开始 在 React 和 Vue3 中使用 Headless UI 无头组件库

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

46. 前端面试题:说一下map和weakMap的区别

47. Webpack处理less模块的细节

48. 封装像素流送功能为Vue组件

49. Flutter&Flame游戏实践#05 | 打砖块 – 基础功能

    Flutter&Flame 游戏开发系列前言: 该系列是 [张风捷特烈] 的 Flame 游戏开发教程。Flutter 作为 全平台 的 原生级 渲染框架，兼具 全端 跨平台和高性能的特点。目前官方对

50. 带你走进 HarmonyOS：前端如何迎接新技术的到来

51. 免费开源、支持自建服务的团队协作、个人学习文档管理系统

52. 262：vue+openlayers 移动地图获取中心点经纬度信息

    文章浏览阅读186次，点赞48次，收藏34次。本示例介绍演示如何在vue+openlayers中移动地图并获取中心点经纬度信息。这里主要用到了是view的getCenter方法，这一功能在实际项目中很有用，能给出一个清晰的定位。

53. 为什么面试官都爱问websocket？

54. CSS Tips：用于按钮上的小技巧

55. Vue3 v-model的使用

    文章浏览阅读217次，点赞2次，收藏2次。inputvalue最新的值为 = {{ inputString }}

56. 彦祖，vuex源码真的不学吗？

57. vue中ref/reactive的区别是什么

    文章浏览阅读160次。**作用对象**：`reactive` 用于将普通的 JavaScript 对象转换为响应式对象，使对象的属性发生变化时能够触发视图更新。- **作用对象**：`ref` 主要用于将基本数据类型（如数字、字符串等）或非响应式对象（如 DOM 元素）转换为响应式对象。- **使用场景**：通常用于对单个数据进行响应式处理，例如在组件中声明一个响应式的变量。- **使用场景**：适用于处理复杂的对象或嵌套对象，需要对对象的多个属性进行响应式处理。

58. 一文盘点Typescript中23个内置类型工具 (建议收藏)

59. 大模型基础应用框架（ReACTSFTRAG）技术创新及零售业务落地应用

    一、前言 2023年，大语言模型以前所未有的速度和能力改变我们对智能系统的认知，成为技术圈最被热议的话题。但“百模大战”终将走向“落地为王”，如何将大语言模型的强大能力融入实际业务、产生业务价值成为致

60. GitHub 一周热点汇总第14期(2024/03/10-03/16)