20240405 前端开发周报

使用最快的 Rust web 框架 Farm 迁移最火的 Vue3 后台管理系统;2024年3月前端面试记录:裸辞、旅游、面试;Node.js 为什么在改版中使用了Next.js;node_koa封装smtp,使用coze调用api发送html邮件(gmail/outlook);RWKV-6 1.6B(2.5T Tokens)模型于3月29日开源;揭秘,unibest诞生过程;浅谈,开源真不容易;“作为一名学前端的我,如何实现渲染十万条数据?”;太难了,Java和Go,面试了30多场,终于上岸了

  1. 使用最快的 Rust web 框架 Farm 迁移最火的 Vue3 后台管理系统

    Farm 是一个基于 Rust 实现的极速构建引擎,帮助您更快地构建 Web 程序 和 JavaScript 库。

  2. 2024年3月前端面试记录:裸辞、旅游、面试

    前言 个人原因主动离职,感觉工作内容比较简单,没有成长;提离职的那天就买好了泰国来回的机票,和对象一起在泰国玩了一周 基本概括:6年前端,有管理经验 在职期间面试 富途 有效括号匹配 判断b是否是a的

  3. Node.js 为什么在改版中使用了Next.js

    深入探讨 Node.js 网站重新设计 Node.js 刚刚推出了一个新的 Next.js 网站并分享了幕后细节。他们考虑过 Nextra,但最终选择了自定义 Next.js 设置。该网站是静态构建的

  4. node_koa封装smtp,使用coze调用api发送html邮件(gmail/outlook)

    分享 node_koa封装smtp,使用coze调用api发送优雅的邮件(gmail/outlook)。 背景: 每个用户都有一个邮箱,通过发送邮件传递消息引流 面向对象:广告投递、毕业寄语等

  5. RWKV-6 1.6B(2.5T Tokens)模型于3月29日开源

    3 月 29 日,RWKV 开源基金会宣布正式向全球开源 RWKV-6 1.6B(2.5T Tokens)模型。

  6. 揭秘,unibest诞生过程;浅谈,开源真不容易

    揭秘,unibest诞生过程;浅谈,开源真不容易 大家好,我是 unibest 作者菲鸽,今天带给大家一篇新文章《揭秘,unibest诞生过程;浅谈,开源真不容易》。 unibest 背景 去年开始我

  7. “作为一名学前端的我,如何实现渲染十万条数据?”

    在我的项目中,有时需要展示上万条甚至十万条数据,而如何在保证性能的前提下高效地渲染这些数据成为了我面临的难题。在经过一段时间的摸索和实践后,我积累了一些经验和技巧,现在我将这些分享给大家。

  8. 太难了,Java和Go,面试了30多场,终于上岸了

    我就请假约面试,没想到,被社会毒打了,Java太卷了,要求好高,各种拷打底层。后来想请假面试也不批,咋搞!?老子不惯着,裸辞了!春节之后,我是从3月份才开始约面的,到3月27号面试了大概20多家公司

  9. 基于nginx+ffmpeg+vue3+TypeScript在网页上显示监控的实时画面

    最近在忙比赛的项目,项目有一个实时预览监控摄像头的画面的需求。按道理说我一个臭前端不负责这一块的东西,但是没办法,时间紧任务重,只好硬着头皮上了….

  10. Flutter Web 的未来,Wasm Native 即将到来

    早在去年 Google I/O 发布 Flutter 3.10 的时候就提到过, Flutter Web 的未来会是 Wasm Native ,当时 Flutter 团队就表示,Flutter Web

  11. 哦吼前端异常处理一站式详解(大量DEMO,很干很干)

    前端异常种类有哪些?怎捕获异常?sourcemap到底有啥用?如何搭建一个错误监控的平台?关于那些前端异常的秘密,本文结合源码带你一一揭开!!!(文章内容较长,需要点耐心啦~,先赞后看,年薪百万!!)

  12. 15K star开源免费的高效投屏工具,无需root

    上班时总是掏出手机不太好?那不如试试把手机投屏到电脑上。今天介绍一个开源免费的工具,可以实现高效稳定的安卓手机投屏,并且支持无线连接,它就是:QtScrcpy。

  13. 开源一款剪贴板跨设备共享工具

    昨天遇到了一个很棘手的问题:我的手机剪贴板需要同步到另外的两台设备上。遗憾的是手机上并没有安装相同的通讯软件。用网上免费的剪贴板共享工具吧,方便是方便,但是觉得还是不安全,关键是不能实现特定的需求。

  14. Next.js v14 报 document is not defined 这种错怎么办?基本都会遇到,深入解析,收藏备用

    使用 Next.js 的时候,经常会在引入三方库(比如 antv)的时候,遇到 “document is not defined”、“window is not defined" 这样的报错,此时该怎

  15. 都2024年了,还不知道 Web Components 呢

    现在面试也问Web Components话题,尤其是频频出现Shadow DOM,不仅面试常考,也已经应用到了前端框架中,浏览器也开始逐渐兼容,不跟上时代的浪潮,我们是不是注定会被抛弃。

  16. 超详细的大文件分片上传⏫实战与优化(前端部分)

    支持断点续传, 文件秒传, 使用了 Web Worker, 并基于WebWorker 实现了前端线程池用于哈希计算速度的优化.

  17. iframe嵌入页面实现免登录思路(以vue为例)

    最近实现一个功能需要使用iframe嵌入其它系统内部的一个页面,但嵌入后出现一个问题,就是一打开这个页面就会自动跳转到登录页,原因是被嵌入系统没有登录(没有token)肯定不让访问内部页面的

  18. Vue2的项目自适应屏幕大小

    甲方爸爸之前的需要只是要PC端访问,没有做不同屏幕的自适应尺寸,这个年代谁的屏幕没有1980.然后经过几个月的页面修改好现在需要适应各式各样的屏幕,做自适应。关键项目写完了,一个个改费时费心费力。经过

  19. flutter-barrage-craft — 能成为pub.dev中最好用的弹幕插件吗?

    Hi,最近我开发了一个弹幕插件,想知道它是否有成为 pub.dev 中最好用的弹幕插件的潜力。能帮我评估一下吗?‍

  20. vue3:reactive,ref,toRefs,computed的使用

    文章浏览阅读86次。3.computed:计算属性 里面的依赖项变化的时候才会更改,缓存优化。2.toRefs的作用:使从reactive定义的结构数据变成响应式的。代码示例:这里顺便用了Element-plus 里的form 双向绑定。ref能指定基础类型和复杂类型,reacive不能指定基础类型。

  21. Flutter实现酷狗歌词逐字上色的效果

    Flutter巧妙实现酷狗歌词逐字上色的效果,利用TextStyle的`foreground`属性,定义一个渐变,基于渐变创建着色器`Shader`复杂给`foreground`

  22. Flutter 刷新页面:通过下拉刷新提升用户体验

    在移动端应用中,为用户提供一个直观的方式来更新内容是很重要的。在丰富的挂件中,Flutter 提供了一个很好的方式实现下拉来刷新应用。这个手势,对很多用户来说很熟悉,就是下拉页面来触发更新的动作…

  23. 跃然纸上的灵感再现,手绘风格的开源绘图白板工具:Excalidraw

    Excalidraw:即绘即思,直观呈现未来流程图!- 精选真开源,释放新价值。 概览 在撰写文章或构建演示案例的过程中,为了增强视觉表现力和信息传达深度,适时融入图表或图形显得至关重要。Excali

  24. Nodejs 第六十二章(短链接)

    短链接介绍 短链接是一种缩短长网址的方法,将原始的长网址转换为更短的形式。它通常由一系列的字母、数字和特殊字符组成,比起原始的长网址,短链接更加简洁、易于记忆和分享。 短链接的主要用途之一是在社交媒体

  25. vue与react的对比

    文章浏览阅读220次,点赞3次,收藏5次。Object.defineProperty或Object.proxy 数据劫持,监听数据变化,通过渲染函数编译模板,形成虚拟dom,setter,getter更新dom。react 类组件或函数式组件,react-router,redux/zustand/mobx。react:虚拟dom的差异比较,来最小化实际的dom更新次数,从而提高应用的性能和效率。受控组件和非受控组件最大的区别在于组件的值是由React状态控制还是Dom节点控制。vue 复合式Api,vue-router,vuex/pinia。

  26. Flutter大型项目架构:分层设计篇

    Flutter App 大型项目是如何进行分层设计的?每个分层组件都有自己的职责互不干扰,都支持单独的开发测试,尽可能的做到依赖于抽象而不是具体的实现。

  27. 拖拉拽做游戏?轻松打造个人掌机世界 | 开源日报 No.176

    gb-studio 是一个快速、易于使用的拖放式复古游戏创建器,适用于您最喜爱的掌上游戏机系统。 该项目主要功能、关键特性和核心优势包括: – 快速且易于使用 – 使用 Electron 游戏构建应

  28. Windows 最佳文件管理器:快速、简单、直观、自由 | 开源日报 No.175

    Files 是为 Windows 构建的最佳文件管理器应用程序。该项目解决了在 Windows 上进行文件管理时的困难。

  29. electron+VUE Browserwindow与webview通信

    文章浏览阅读198次,点赞3次,收藏7次。如果能看到webview控制台里面的命令:window.electronAPI 说明已经通信成功了,后面就可以自己实现自己的逻辑了。1,porelaod注入的路径需要以file:///开头的绝对路径,如果不能保证 可以直接在vue中如下写法来进行测试。例如:file:///C:/porelaod/webPreload.js。webview.openDevTools()打开webview的控制台。其中preloadPath需要以file:///开头的绝对路径。// 在webview中注入脚本。

  30. CSS Tips:边框动画

    对于许多 Web 开发者来说,使用 CSS 制作边框动画并不容易,事实上,借助现代 CSS 特性和 CSS 动画,我们有更多技巧可以给边框添加动画效果。而且事情越来越简单,效果越来越优雅和引人注目。

  31. 前端视频处理利器:ffmpeg.wasm网页中预览非mp4视频并嵌入字幕

    借助ffmpeg的wasm版本,可以实现本地网页处理视频、预览非mp4格式的视频等,最近用到了视频中分离音频、预览视频、截取分割等功能,简单记录下。 获取 ffmpeg.wasm 首先需要执行npm以

  32. Vue3.0中的ref与reactive

    文章浏览阅读468次,点赞5次,收藏13次。ref和reactive是Vue 3中用于创建响应式数据的两个重要函数。通过使用这些工具,我们可以轻松地创建响应式对象,并实现自动更新视图的效果。无论是处理简单类型的数据还是复杂类型的数据,Vue 3提供了适用的工具来满足不同的需求。希望这篇博客能对您有所帮助。

  33. vue3+ts 第四章(认识Reactive全家桶)

    文章浏览阅读476次,点赞16次,收藏20次。reactive 源码约束了我们的类型这样是不允许 会给我们报错绑定普通的数据类型 我们可以 使用昨天讲到ref你如果用ref去绑定对象 或者 数组 等复杂的数据类型 我们看源码里面其实也是 去调用reactive使用reactive 去修改值无须.valuereactive 基础用法name:"小满"})person.name = "大满"数组异步赋值问题这样赋值页面是不会变化的因为会脱离},1000)解决方案1使用push。

  34. 对比:React 还是 Vue

    文章浏览阅读434次,点赞19次,收藏11次。随着 Vue、React 的演进,其各自框架的基本形态和功能已经很完备,最根本差异点逐渐演变成了框架开发者各自的理念差异,不同的理念让框架有了各自的设计模式和最佳实践。然而,对于使用者来说,搞懂其设计模式、沉淀其最佳实践、了解其基本原理,是掌握一门框架的捷径,也是衡量对其熟悉程度的标尺。Vue 更贴近传统前端开发方式,更符合人的直觉,更易上手更简单;React 让函数变得更加复杂,使用者有更大的控制权,更加灵活,从而优雅。

  35. vue3源码解析——ref和reactive定义响应式的区别

    文章浏览阅读562次,点赞20次,收藏18次。ref 和 reactive 是 Vue 3.0 中用于定义响应式数据的两个新 API。它们有以下区别:ref 定义单个响应式数据 数据类型可以是任意类型。它通常用于定义原始数据类型为响应式数据。返回一个响应式对象,该对象包含一个 .value 属性,可用于获取和设置数据。底层采用Object.defineProperty()实现reactive 定义多个响应式数据 数据类型必须是对象返回一个响应式对象,必须使用响应式对象来获取属性和设置数据

  36. 从虚拟dom知识无痛深入vue与react的原理

    文章浏览阅读600次,点赞21次,收藏10次。我们都知道像vue、react都有用到虚拟dom,那么虚拟dom到底是什么?框架为什么不直接操作真实dom而要在中间要引入虚拟dom呢?vue和react的虚拟dom又有什么异同呢?我们就从虚拟dom开始讲起,再来逐步引入讲解vue与react的部分原理及其异同,这里会顺便讲解到数据驱动视图及视图驱动数据,顺便明白MVVM、MVC这两种模式,顺便引入相关的八股文知识点,不小心一下子就明白了一大堆知识。

  37. 一道字节面试题,不会的还有太多

    — theme: channing-cyan highlight: vs2015 — # 前言 彦祖们,阅读本文前,希望你对 [Proxy](https://developer.mozil

  38. 你还在用for循环遍历集合?试试JavaScript新增的7种方法吧

    集合操作方法的介绍 JavaScript的Set对象自从ES6引入以来,主要用于确保列表中没有重复的元素。然而,随着即将推出的7种内置Set方法,我们可能会发现自己更频繁地使用它们。 注意:这些新功能

  39. Flutter 进阶:RichText/TextSpan 富文本终极版

    一、需求来源 工作中经常遇到一些富文本的样式,每次写许多的 TextSpan 的不胜其烦;今天终于想到一种完美处理高亮文本样式和段落样式的办法,核心是通过 splitMapJoin 方法配合 RegE

  40. WebSocket 和 HTTP 的区别:简单了解

    在当今的数字时代,及时交付内容和维持用户互动已成为网络应用不可或缺的要素。这一需求催生了新的通信规范——WebSocket 和 HTTP,尽管两者都服务于网络通讯,它们之间却存在显着的差异。本篇文章旨


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流