自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

奇舞周刊

《奇舞周刊》是由奇舞团维护的前端技术周刊.除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送周刊汇总内容

  • 博客(1132)
  • 收藏
  • 关注

转载 使用 Ollama + Flutter 开发本地跨平台聊天机器人

前言Ollama 是一个基于 Go 语言开发的可以本地运行大模型的开源框架。Flutter 是由 Google 开发的开源移动跨平台开发框架。基于这两个开源项目,我们可以开发一个 极简 的完全在本地运行的聊天机器人。其中 Ollama 提供的模型能力作为服务端。客户端使用 Flutter 开发,支持 iOS、Android、macOS 等平台。效果演示macOS 的运行效果:Android 的运行...

2024-05-21 18:30:48 2

转载 AI驱动的前端UI组件生成器(Next.js,GPT4,Langchain和CopilotKit)

AI驱动的前端UI组件生成器(Next.js,GPT4,Langchain和CopilotKit)本文译者为 360 奇舞团前端开发工程师原文标题:AI-Powered Frontend UI Components Generator (Next.js, GPT4, Langchain, & CopilotKit)原文作者:Bonnie原文地址:https://dev.to/tcms/ai...

2024-05-20 17:27:59 16

转载 5分钟带你了解【前端装饰器】,“高大上”的“基础知识”

装饰器来啦前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。基本介绍装饰器是一种以 @ 符号开头的特殊语法,放在目标代码的前面用于包装或扩展代码功能。JavaScript 的装饰器语法目前仍处于提案阶段,现阶段使用的话需要通过 bable 等方式进行编译之后,才能在浏览器正常运行。装饰器分为两种:类装饰器,类成员装饰器,分别用于装饰我们的类以及类的成员...

2024-05-18 18:02:15 12

转载 奇舞周刊第528期 如果您的网站 "禁用 JS "怎么办?

奇舞推荐■■■Website with javascript disabled4 月 24 日是无 JavaScript 日,这是一个完全没有 JavaScript 的日子。目的是测试下你的网站能不能脱离 JavaScript 运行。在一些国家,"4 月 24 日 "可以写成 "4/24",这也是表示依赖失败的 HTTP 424(Failed Dependency)。JS "裸奔"日 "就...

2024-05-17 20:14:32 15

原创 web过渡动画

本文作者系360奇舞团前端开发工程师Web 动画不仅能够提升用户界面的美观度,还能增强用户的交互体验。在手机app中,经常会见到这种丝滑的交互动画,用来引导用户的视线,使用户更加关注产品的重要信息。这种交互动画在安卓端被称为共享元素动画。通过观察可以发现这种动画的特点,就是在动画前后有一个或者多个相同的元素。那么在浏览器里前端如何实现这样的动画呢?通常都会在触发动画的时候新建一个dom结构,计算动...

2024-05-16 18:01:17 871

转载 React19 她来了,她来了,他带着礼物走来了

❝一个人是没法被一句话两句话改变的❞大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder前言xdm,5.1玩的还可以吗?既然已经玩够了,那么我们又得切换到上班模式。其实这篇文章是5.1之前开始写的,为了让大家能够有一个轻松的假期,索性就没在节内发送。今天我们来聊聊前端的内容。React19她来了,她来了,她带着????走来了。时隔2年多,React终于有了新版本了。...

2024-05-15 18:00:37 18

原创 大模型RAG入门及实践

本文作者系360奇舞团前端开发工程师前言在大语言模型(LLM)飞速发展的今天,LLMs 正不断地充实和改进我们周边的各种工具和应用。如果说现在基于 LLM 最火热的应用技术是什么,检索增强生成(RAG,Retrieval Augmented Generation)技术必占据重要的一席。RAG 最初是为了解决 LLM 的各类问题的产生的,但后面大家发现在现阶段的很多企业痛点上,使用RAG好像是更好的...

2024-05-14 18:03:21 366

原创 奇舞周刊第527期:​Virtual DOM(虚拟DOM) 的地位再一次被挑战 !!!

奇舞推荐■■■Virtual DOM(虚拟DOM) 的地位再一次被挑战 !!!最近在前端圈有一个 Github Repo 算是蛮受关注的 - proposal-signals,这是一个由 Daniel Ehrenberg 为主导,向 TC39 提案的项目,主要是希望可以通过一系列名为 Signal 的 API 来为 Javascript 提供一个更方便的状态(State)与视图(View)更新...

2024-05-11 18:00:31 422

转载 HTML特性与DOM属性

本文译者为 360 奇舞团前端开发工程师原文标题:HTML attributes vs DOM properties原文作者:Jake原文地址:https://jakearchibald.com/2024/attributes-vs-properties/特性和属性在本质上是不同的东西。您可以将相同名称的特性和属性设置为不同的值。例如:<divfoo="bar">…</div&...

2024-05-09 17:33:39 15

转载 被嫌弃的CSS的一生

本文译者系360奇舞团前端开发工程师 闫俊启文章标题:被嫌弃的CSS的一生原文标题:The modern web’s underrated powerhouse原文链接:https://github.com/readme/featured/css-futureCSS是互联网最重要的组成部分之一,但却未得到足够重视。您当前浏览到的这个网页。链接、页眉和分段符都是用 HTML 标记的。但CSS才真正...

2024-05-08 16:29:40 8

转载 异步难题:前端并发控制全解析

❝本文为稀土掘金技术社区首发签约文章❞本文讲解Promise,callback,RxJS多种方式实现并发限制,通过示例循序渐进讲解,如何实现带数量限制的并发请求,这来源于笔者业务中的真实场景,同时也是一道前端面试题,作为面试题的话,一般是考察对Promise的理解。问题笔者的业务中,经常存在通过一堆ids,批量获取的场景,其中最复杂的一个场景是获取数千个手机号的数据,对于这种场景,发送请求并不容易...

2024-05-07 17:41:12 28

原创 Ollama:本地大模型运行指南

本文作者为 360 奇舞团前端开发工程师Ollama 简介Ollama 是一个基于 Go 语言开发的可以本地运行大模型的开源框架。官网:https://ollama.com/GitHub 地址:https://github.com/ollama/ollamaOllama 安装下载安装 Ollama在 Ollama 官网根据操作系统类型选择对应的安装包,这里选择 macOS 下载安装。安装完在终端输...

2024-04-28 18:01:11 1176

转载 关于 React19,你需要了解的前因后果

大家好,我卡颂。React当前的稳定版本是18.2,发布时间是22年6月,在此之后就没有新的稳定版本发布。直到今年2月15日,官方博客[1]才透露下一个稳定版本的计划。没错,他就是React19。为什么时隔1年多才公布下个稳定版本的计划?为什么下个版本直接跳到了19?18我都还没升呢,19就来了,是不是要学很多东西?这篇文章会为你详细解答这些疑问。从React16聊起近年来React最为人津津乐道...

2024-04-26 16:51:04 37

转载 Tango 低代码引擎沙箱实现解析

Tango 基本介绍Tango 是一个用于快速构建低代码平台的低代码设计器框架,并以源代码为中心,执行和渲染前端视图,并为用户提供低代码可视化搭建能力,用户的搭建操作会转为对源代码的修改。借助于 Tango 构建的低代码工具或平台,可以实现 源码进,源码出的效果,无缝与企业内部现有的研发体系进行集成。开源进展目前 Tango 设计器引擎部分已经开源,正在积极推进中,可以通过如下的信息了解到我们的最...

2024-04-25 15:30:09 34

原创 一个Level 0富文本编辑器的进化历程

本文作者为 360 奇舞团前端开发工程师一个Level 0富文本编辑器的进化历程富文本编辑器是我们在生活中常用到的编辑工具,本文将为大家介绍富文本编辑器技术成长的历程,在最后会带大家利用document.execCommand实现一个简单的传统编辑器。ps:document.execCommand 是实现富文本编辑器的核心 API 。但遗憾的是 document.execCommand 已经被 M...

2024-04-24 17:07:55 838

原创 更轻巧的状态管理工具——Hookstate

本文作者为 360 奇舞团前端开发工程师Hookstate前言作为 React 开发人员,管理中型应用程序的状态可能很困难。在开发小型应用程序时,将状态从一个组件传递到另一个组件相对简单。当应用程序的规模发生变化时,就会变得不方便,因为你需要无层级关系组件状态的互相访问支持。Hookstate是一个完全基于React状态hook的状态管理库。它实施简单、快速、直接且可扩展。不需要模版,它也可以在 ...

2024-04-22 16:58:05 413

原创 奇舞周刊第526期:Vue3 超前版发布三个新特性!有望全面拥抱 JSX/TSX!

奇舞推荐■■■‍Vue3 超前版发布三个新特性!有望全面拥抱 JSX/TSX!我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写。而就在最近,Vue3 的超前项目 Vue Macros 中,发布了 defineRender、setupComponent、setupSFC 这些新的 API,这代表了,以后 Vue3 有可能可以全面拥抱 JSX/TSX 了!!基于源码的 W...

2024-04-19 17:37:43 275

转载 Web 端 RTL 适配实践

前言在业务全球化的进程中,我们会面对产品本地化的需求。在中东地区,许多国家使用阿拉伯语、希伯来语等语言,其书写和阅读习惯是从右向左(简称 RTL),与我们日常使用的中、英文环境中的从左向右(简称 LTR)阅读习惯相反。为了确保我们的产品在 RTL 语言用户中依然能够提供良好的体验,需要进行 RTL 适配。RTL 布局概述如上图所示,左右两边分别展示了 RTL 和 LTR 的效果图。从图中我们可以直...

2024-04-18 18:36:14 29

原创 小学生都开始学 Python 了!

本文作者系360奇舞团前端开发工程师前言Python 被认为是人工智能、机器学习的首选语言。因为人工智能要求机器能自主学习成长,机器要会学习,首先要积累大量的数据,然后运用机器学习算法如线性回归、决策树、神经网络等,让机器能从大量的数据中自主实现学习。Python 简洁易用的特点,以及在数据处理方面的强悍能力,使得目前市面上大部分人工智能的代码,都由 Python 来实现。一、Python 语言的...

2024-04-17 17:47:38 780

原创 前端常用的几种请求方式

本文作者系360奇舞团前端开发工程师前端数据请求方式主要包括XMLHttpRequest、Fetch、Axios、WebSocket等。这些请求方式各有特点,适用于不同的场景。本文将从综合性能、优缺点、最佳使用场景以及使用方式的角度对这些数据请求方式进行分析。介绍XMLHttpRequest(XHR)XMLHttpRequest 是前端最早使用的数据请求方式。它支持异步请求,可以通过设置回调函数处...

2024-04-16 17:24:40 687

转载 当我们执行 npm run serve 时到底发生了什么?

在前端开发中,npm run serve 是一个常见的命令,尤其是在使用 Vue CLI 构建项目时。但是为什么直接运行 vue-cli-service serve 会报错,但使用 npm run serve 却可以成功启动项目呢?npm scripts 的基本原理先回顾一下 npm 命令的基本原理。在 package.json 文件中的 "scripts" 字段允许我们定义一组自定义的命令。例如...

2024-04-15 16:42:35 41

原创 奇舞周刊第525期:TypeScript很麻烦,不想使用!

奇舞推荐■■■TypeScript很麻烦,不想使用!文章提供了解决TypeScript使用问题的具体方法,还强调了代码复用、一致性和可维护性的重要性。对于正在或计划使用TypeScript的团队来说,这些都是非常有价值的建议和启示。‍Corona技术专题-网易云音乐大前端性能监控服务的设计与实现本文主要介绍了云音乐大前端性能监控服务在从 0 到 1 快速搭建期的整体设计与实现。重点介绍了配置式...

2024-04-12 20:17:13 593

转载 看不懂来打我,vue3如何将template编译成render函数

前言在之前的 通过debug搞清楚.vue文件怎么变成.js文件 文章中我们讲过了vue文件是如何编译成js文件,通过那篇文章我们知道了,template编译为render函数底层就是调用了@vue/compiler-sfc包暴露出来的compileTemplate函数。由于文章篇幅有限,我们没有去深入探索compileTemplate函数是如何将template模块编译为render函数,在这篇...

2024-04-11 19:39:52 105

原创 探探各个微前端框架

本文作者为 360 奇舞团前端开发工程师微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。本文会从框架的应用隔离实...

2024-04-10 20:01:47 6633 3

原创 使用React Context的一些优化建议

React ContextContext 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。常用 APIReact.createContextconstMyContext=React.createContext(defaultValue);创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件,这个组件会从组件树中离自身最...

2024-04-09 18:45:40 854

转载 面试官居然要我用JS代码计算LocalStorage容量!

前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心LocalStorage 容量localStorage的容量大家都知道是5M,但是却很少人知道怎么去验证,而且某些场景需要计算localStorage的剩余容量时,就需要我们掌握计算容量的技能了~~计算总容量我们以10KB一个单位,也就是10240B,1024B就是10240个字节的大小,我们不断往loc...

2024-04-08 19:04:51 107

转载 奇舞周刊第524期:这Proxy能干啥?

奇舞推荐■■■这Proxy能干啥?文章介绍了proxy的基础概念以及,并在文章最后会给出几个 proxy 的实际应用案例,扩展了对 proxy 使用的场景。让大家写出逼格更高,更有深度的代码。Vite 的实现原理,确实很巧妙本文采用代码断点调试的方式,从vite启动开始深入浅出的讲解了vite在开发和生产不同流程里中,如何进行的代码编译和打包。React 中 Form 的最佳实践本文将介绍 R...

2024-03-29 22:01:59 235

转载 CommonJS 和 ES Module 终于要互相兼容了???

大家好,我是 ConardLi。在现代 JavaScript 开发中,ECMAScript Module 已经逐渐成为了公认的业界标准。自 ESM 被引入 Node.js 以来,它的异步加载特性和模块解析逻辑广受大家好评。然而,由于历史原因,很多既有代码和第三方库仍依赖于 CommonJS 模块系统,然而因为 ESM 的异步加载的设计,两个模块化方案一直是无法共存的,这也成了很多开发者的一大痛点。...

2024-03-28 19:01:12 264

转载 React vs HTMX ,谁更适合你?

大家好,我是 ConardLi。HTMX 的终极目标目标,就是让开发者在 HTML 中就能实现现代浏览器级的交互性,而无需使用 JavaScript。这个前端库虽然起步晚,首次亮相是在 2020 年底,但却迅速吸引了开发者社区的眼球。在 2023 年的 "JavaScript Rising Stars" "前端框架” 类别里,HTMX 排名第二,仅次于 React。此外,HTMX 还在 GitHu...

2024-03-27 19:00:58 206

原创 了解下handsfree.js-集成手势面部表情的前端库

本文作者系360奇舞团前端开发工程师一 介绍Handsfree是一个通过计算机视觉集成手势,面部表情和各种姿势识别的前端库。其核心ai技术用到了tensorflow,可在浏览器上触发交互事件,比如滚动网页,检测人脸并展示相关表情,控制桌面游戏。也可以通过websocket接口控制任意与电脑连接的设备。原来这个库有详细的文档和相关代码示例,但不清楚为什么最近都找不到了,作者也很多年没有更新了,这个库...

2024-03-26 16:04:56 561

原创 奇舞周刊第523期:来自 rust 生态的强烈冲击?谈谈 Leptos 在语法设计上的精妙之处...

奇舞推荐■■■来自 rust 生态的强烈冲击?谈谈 Leptos 在语法设计上的精妙之处过去很长一段时间,前端框架们都在往响应式的方向发展。同时又由于 React hooks 的深远影响,函数式 + 响应式成为了不少前端心中最理想的前端框架模样。Solid 成为了这种模式里最具代表性的框架。号称迄今最快?又一个新的 JavaScript 运行时发布了WinterJS 是一款极快的 Winter...

2024-03-22 19:16:58 725

转载 Beyond Compare! Rust Vs Js

本文作者系360奇舞团前端开发工程师文章标题:Beyond Compare! Rust Vs Js前言笔者最近计划开发一个SSR渲染的Blog。筹备之初,一度犹豫不决:是继续沿用较为熟悉的JavaScript技术栈,还是尝试当下非常热门的Rust相关技术栈,经过考虑,决定要做一些有挑战性的尝试。一般而言,WEB开发,动手之前,我们都会在脑海里会有一个大概的雏形,也就是说无论采用哪种语言、哪种方案...

2024-03-21 18:58:28 308

转载 Qwik 与 React Hydration 有何不同

本文译者为 360 奇舞团前端开发工程师原文标题:JavaScript on Demand: How Qwik Differs From React Hydration原文作者:Paul Scanlon原文地址:https://thenewstack.io/javascript-on-demand-how-qwik-differs-from-react-hydration/在本文中,我将深入介绍...

2024-03-20 15:42:41 292

转载 从简单中窥见高端,彻底搞懂任务可中断机制与任务插队机制

React 知命境第 42 篇,原创第 155 篇前面用了几篇文章来跟大家分享什么是任务可中断,不过呢,可能是我介绍的方式太过于简单粗暴,以致于还是有部分同学没太明白,所以今天我就用最基础的方式重新跟大家分享一下什么是任务可中断0任务拆分首先,我们要明确的一个前提,是一个完整的函数执行是不可以中断的。因此如果你把一整个任务全部都放到一个函数中来执行,那么想要做到任务可中断是不可能的。例如,现在我有...

2024-03-19 14:47:14 338

转载 调教 AI:让 ChatGPT 陪你玩猜单词游戏(附完整提示词)

如果你只是简单地使用 ChatGPT 来聊天,你可能还没有体会过 ChatGPT 提示词的真正魅力。之前我也觉得“「提示词工程」”这个概念有点小题大做,简单的写写 Prompt,怎么能叫做工程呢?写 Prompt 的普通人,连代码都不会写,又怎么能成为工程师?但是,当我做过几个项目之后,我才发现,原来 Prompt 真的是有很大的想象空间,一些看起来简单的指令,就能让 AI 帮你完成不可思议的事情...

2024-03-18 18:14:07 384

原创 奇舞周刊第522期:“Vite 又开始搞事情了!!!”

奇舞推荐■■■Vite 又开始搞事情了!!!Vite 的最新版本将引入一种名为 Rolldown 的新型打包工具。unocss 究竟比 tailwindcss 快多少?我们知道 unocss 很快,也许是目前最快的原子化 CSS 引擎 (没有之一)。巧用滤镜实现高级感拉满的文字快闪切换效果这类文字快闪切换效果运用得当的话,能比较好的吸引用户的眼球。当然,今天并非是想用 CSS 实现上述的的效果...

2024-03-15 19:09:33 745

转载 ECMAScript 2024(ES15)将带来这些新特性,超实用!

ECMAScript 语言规范每年都会进行一次更新,而备受期待的 ECMAScript 2024 将于 2024 年 6 月正式亮相。目前,ECMAScript 2024 的候选版本已经发布,为我们带来了一系列实用的新功能。接下来,就让我们一起先睹为快吧!全文概览:Promise.withResolversObject.groupBy / Map.groupByArrayBuffer.protot...

2024-03-14 18:47:33 531

转载 改了一行代码,数组遍历耗时从10.3秒降到了0.5秒!

大家好,我是江南一散人,本文是程序性能调优系列专题第一篇。本专题除讲解常见性能问题以及分析、调优手段外,还会重点讲解一些对系统性能至关重要,却又经常被忽视的高级话题,如Cache、指令流水线、Superscalar、SIMD、分支预测、内存屏障等。此外,还会涉及到编译器、操作系统等话题。两个简单的测试程序定义一个同样大小的二维数组,然后循环遍历,对数组元素赋值。• array1.c 对数组按行进行...

2024-03-13 16:37:31 435

原创 Vite为什么比Webpack快

本文作者为 360 奇舞团前端开发工程师一.引言Vite和Webpack作为两个主流的前端构建工具,在近年来备受关注。它们的出现使得前端开发变得更加高效和便捷。然而,随着前端项目规模的不断增大和复杂度的提升,构建工具的性能优化也成为了开发者关注的焦点。在性能方面,Vite相比于Webpack表现出了明显的优势,尤其是在本地开发时冷启动速度、HMR性能和构建速度等方面。本文将深入解析Vite为什么比...

2024-03-12 17:49:32 1538

原创 Redux Toolkit

本文作者为 360 奇舞团前端开发工程师阅读本文章前,需要先了解下 redux 的基本概念与用法,Redux Toolkit 是建立在 Redux 基础之上的工具包,因此需要对 Redux 的基本概念有一定的了解,包括 Action、Reducer、Store、Middleware 等。理解 Redux 的工作原理和数据流程有助于更好地理解和使用 Redux Toolkit。简单复习下 redux...

2024-03-11 19:02:28 857

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除