自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

奇舞周刊

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

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

转载 ECMAScript 2024 新特性解读!

大家好,我是 ConardLi。ECMAScript 2024(https://tc39.es/ecma262/2024/) 语言规范的最终版本于 6 月 26 日获得批准。今天带大家一起来看一下这个版本新增了哪些走进标准的提案。提案1:Well-Formed Unicode StringsJavaScript 中的字符串由一系列 UTF-16 编码点表示。名称中的 16 表示可用于存储编码点的位...

2024-09-20 17:43:26 203

转载 Mitosis:跨框架的UI组件解决方案

定义Mitosis是一个开源工具,可以将 JSX 组件转换为 Angular、React、Qwik、Vue、Svelte、Solid 和 React Native 等框架的功能齐全的组件。为什么要使用 Mitosis?借助 Mitosis,您可以简化工作流程并减少冗余,同时又不会损害设计系统的质量。无论您使用的是 React、Vue 还是任何其他框架,Mitosis 都能确保您的设计语言清晰一致。...

2024-09-19 19:01:08 149

转载 Chrome Extension 开发解析

一、Chrome Extension 简介Chrome Extension,本质上是一个由 HTML、CSS、JavaScript 等前端技术开发的程序,就像我们平时开发的前端项目一样,它只是一个有各种资源组成的程序,被安装到浏览器后,能极大地扩展浏览器的功能。Chrome Extension 可以理解为一个独立运行在 Chrome 浏览器下的 APP,能够与打开的网页、Chrome 控制面板、第...

2024-09-18 19:02:14 296

转载 奇舞周刊第541期:暗水印显隐术助力生产排障提效|得物技术

奇舞推荐■■■暗水印显隐术助力生产排障提效|得物技术对于水印,相信大家都不陌生。在很多内部平台、对数据信息较为敏感的中后台系统当中,我们基本上都会在系统关键数据展示区域中,加上一个半透明的文字水印(通常是用户名或用户id等能够唯一识别用户的标识),以防止使用者通过截图、拍照等方式将目标页面的数据泄露出去。携程酒店前端BFF实践携程酒店前端 BFF 实践探讨了如何通过能效变革提升前端性能。产品:...

2024-09-14 19:31:23 60

原创 Go 语言入门

本文作者为360奇舞团前端开发工程师Go 语言是诞生于 2009 年的编程语言,发展到今天已经有过去了 15 年。目前 Go 语言在国内外的社区都非常热门,很多著名的开源框架,例如:Docker、k8s、 Prometheus 等都使用 Go 语言开发,越来越多的公司也将 Go 作为技术选型之一。下面我们一起来了解下 Go 语言的一些知识,帮助大家快速入门 Go 语言数据类型在介绍数据类型之前...

2024-09-12 18:00:27 793

原创 Visual Studio Code 插件开发中的语言功能

本文作者为360奇舞团前端开发工程师本文将以 CodeLens 功能为例,通过 vscode.languages.* API 调用来讲解如何使用 Visual Studio Code 插件开发中的语言功能(Language Feature)。Visual Studio Code 的语言功能可以提供智能编辑能力。VS Code 本身并不提供内置的语言支持,而是提供了一组 API 来实现丰富的语言...

2024-09-11 18:00:27 461

转载 B站监控2.0架构落地实践

背景众所周知,Metrics指标数据是可观测重要的基石之一,在2021年底的时候,B站基于Promtheus+Thanos 方案,完成了统一监控平台的落地。但随着B站业务迅猛发展,指标数据级也迎来了爆炸式增长,不仅给现有监控系统的稳定(可用性, 云上监控数据质量等)带来冲击,也无法满足公司层面可观测稳定性建设(1-5-10)目标。当前架构面临的痛点总结如下:稳定性差:由于当时告警计算是基于Prom...

2024-09-10 18:00:32 247

转载 你的Agent稳定吗?——基于大模型的AI工程实践思考

阿里妹导读本文总结了作者在盒马智能客服的落地场景下的一些思考,从工程的角度阐述对Agent应用重要的稳定性因素和一些解法。一、背景随着大模型技术的发展,越来越多的大模型应用开始涌现,并且应用到越来越多的业务场景中,比如AIGC生图、小蜜机器人、客服机器人、自动文档处理等等;并且Agent的planning能力使得基于大模型的底座,AI应用可以处理越来越高级的事情。但是随着大模型的广泛应用,在面对各...

2024-09-09 18:00:22 110

原创 奇舞周刊第540期:Vue 3.5 正式版发布,都有哪些变化?

奇舞推荐■■■Vue 3.5 正式版发布,都有哪些变化?Vue3.5版本版本正式发布,此更新聚焦于性能优化和新功能。响应式系统重构,内存占用减少56%,同时提升了大型数组的响应速度。新版本稳定了响应式Props解构,简化了props的使用。SSR功能得到增强。Rspack 1.0 发布了!Rspack 1.0正式发布,1.0版本标志着Rspack的成熟,兼容大多数webpack API和功能,...

2024-09-06 18:09:04 1151

转载 React Compiler 进阶: useRef 也可以被淘汰啦

React Compiler 是 React 官方团队提供的通过自动缓存的方式来优化性能的重要手段。他可以做到元素级别的细粒度更新。对于 React 性能优化掌握得不太好的小伙伴来说,这无疑是开发利器。在刚开始接触 React Compiler 时,我明确表示了自己对于 Compiler 的抵触心理。这一抵触心里来源于对于 Compiler 的出现,到底会对代码逻辑造成什么样的影响的不可控性。好在...

2024-09-05 18:01:41 361

原创 Gemini:谷歌AI模型的革新之路

本文作者系360奇舞团前端开发工程师2023-2024年是AI领域蓬勃发展的时期,各家科技巨头纷纷推出自家的大模型,竞争激烈。谷歌在AI领域持续深耕,并于2024年8月1日发布了Gemini 1.5 Pro(0801),其卓越的性能超越了ChatGPT-4,使得谷歌夺得lmsys竞技场第一,中文任务也位列榜首。本文将深入探讨Google的AI大模型发展历程,并以实际案例展示Gemini的强大功能。...

2024-09-04 19:32:18 903

转载 天天用 antd 的 Form 组件?自己手写一个吧

大家写中后台系统的时候,应该都用过 Ant Design 的 Form 组件:用 Form.Item 包裹 Input、Checkbox 等表单项,可以定义 rules,也就是每个表单项的校验规则。外层 Form 定义 initialValues 初始值,onFinish 当提交时的回调,onFinishFailed 当提交有错误时的回调。Form 组件每天都在用,那它是怎么实现的呢?其实原理不复...

2024-09-03 18:01:56 205

原创 在未知中前行:梯度下降算法的直观理解

本文作者系360奇舞团前端开发工程师各位帅哥美女大家好!!!俗话讲温故而知新,在AI技术日新月异的今天,很荣幸为大家分享一些AI相关的内容。也欢迎各位积极留言讨论。梯度下降(Gradient Descent)是机器学习和深度学习中最常用的优化算法之一,通过迭代地调整参数来减少误差,梯度下降帮助模型从初始状态逐渐学习到数据中的复杂模式。在最近一年的研究论文中,梯度下降及其各种变体继续扮演着重要的角色...

2024-09-02 18:01:23 550

转载 以后用 ElementUI、Ant-Deisgn 的前端只会越来越少

前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~老牌的组件库相信组件库这东西大家都不陌生吧?组件库其实就是大佬们提前封装好的一些组件的集合体,我们在项目中可以直接拿来使用,无论是Element-UI还是Ant-Design,想使用无非就是分几步:NPM安装页面引入使用组件这也是我们现在大部分项目都在使用组件库的方式,但是说实话,大家真的...

2024-08-29 21:04:25 144

原创 IndexedDB-浏览器端的数据库

在现代Web应用开发中,数据存储和管理至关重要。随着Web应用的复杂性增加,传统的存储解决方案如Cookies和LocalStorage已经无法满足需求。IndexedDB 作为一种高效的浏览器端结构化数据存储 API,逐渐受到开发者的青睐。IndexedDB 概述IndexedDB 是一个用于在浏览器中存储大量结构化数据的底层 API。它允许开发者将数据存储在用户的浏览器中,而无需依赖外部服务器...

2024-08-28 18:31:00 770

转载 利用 Tree-sitter 进行语法树分析

在现代软件开发过程中,随着项目规模的不断增大,开发者面对的挑战也越来越多,我们需要借助开发工具帮助我们更好地理解整个项目,比如:代码编辑器的代码高亮功能帮助开发者迅速区分语法元素,如变量、函数、关键字等,鼠标 hover 上去还可以快速查看变量属性和函数定义。当我们在 Github 中查看源码时,Github 提供了 Navigating code 的能力,帮助我们快速在函数或变量的定义和引用之间...

2024-08-26 19:41:36 129

转载 奇舞周刊第539期:10 个像专业人士一样使用 <template> HTML 标签的基本技巧

奇舞推荐■■■10 个像专业人士一样使用 <template> HTML 标签的基本技巧HTML中的<template>标记是 Web 开发中一个功能强大但经常未得到充分利用的元素。它允许你定义可重复使用的内容,这些内容可以克隆并插入 DOM 中而无需最初渲染。此功能对于创建动态、交互式 Web 应用程序特别有用。一文吃透 WebSocket 原理通常我们开发H5,都是...

2024-08-23 18:34:32 122

转载 SVG中的paint-order现在也支持普通文本了

很多CSS特性更新是非常隐晦的,导致很容易被忽视。最近,Chrome 123就新增了paint-order对普通文本的支持,这就让文字描边实现更加容易了。这并不是一个新属性,SVG中已经支持很多年了。一起了解一下吧一、过去只支持 SVG 元素paint-order,顾名思义,表示绘制的顺序。对于一个图形的绘制,顺序还是非常重要的。例如用SVG来绘制一个带边框的矩形<style>...

2024-08-22 18:00:39 99

原创 WebAI(rust, wasm)

本文作者为 360 奇舞团前端开发工程师引言在现代 Web 开发中,将高性能计算和智能分析集成到前端应用中已经成为一种趋势。本文将介绍在超大型远洋航运颗/货船舶管理系统中,借助于 Rust 和 AI 技术实现 Web 侧 端智能数据分析处理海量传感器数据进行可视化界面的渲染工作,通过一系列的数据清洗、转换和分析,提升用户体验。背景数据分析与预处理的需求在现代 Web 应用中,特别是在数据密集型的应...

2024-08-21 18:00:48 1096

原创 Vue 项目 SEO 优化的关键

本文作者为 360 奇舞团前端开发工程师最近在一个 Vue 项目中,发现了许多在开发前、中、后期需要特别注意的细节,以确保性能和 SEO 的最佳结合。本文将聊聊 Vue 项目要做 SEO 优化方向侧的一些相关内容什么是 SEO,为什么它如此重要?SEO(Search Engine Optimization),即搜索引擎优化,是指通过优化网站的内容、结构和技术,使其在搜索引擎的自然搜索结果中获得更高...

2024-08-20 18:04:16 1010

转载 一次网络请求的顿悟之旅

????目录1 IP、DNS 和 CDN2 TCP、消息分包和协议设计3CGI 和 FastCGI4服务器模型谈5数据层的演进当你在浏览器输入 qq.com 按下回车键,到页面呈现在你面前,整个过程发生了什么?我以前思考过这个问题,从最前面的浏览器到最后的 db 都梳理的一遍,触发了一次技术顿悟,将很多散落的知识点贯通起来了。01IP、DNS 和 CDN如果面试时问你「局域网 IP 有哪些 IP ...

2024-08-19 18:00:43 116

转载 奇舞周刊第538期:前端在线代码编辑器技术杂谈

奇舞推荐■■■前端在线代码编辑器技术杂谈本文介绍了一个代码编辑和实时预览的项目,调研了多个开源库,并对这些库的实现细节进行了深入分析。比较了不同方案在代码编译、依赖处理和模块导入方面的优缺点。前端H5与客户端Native交互原理 - JSBridge在混合应用开发中,一种常见且成熟的技术方案是将原生应用与 WebView 结合,使得复杂的业务逻辑可以通过网页技术实现。实现这种类型的混合应用时,...

2024-08-16 18:03:40 125

转载 消灭 DOM 型 XSS 的终极杀招!

大家好,我是 ConardLi。最近发现 Chrome 团队在博客更新了一篇文章,表示 YouTube 要实施 Trusted Types(可信类型)了,要求相关插件的开发者尽快完成改造,不然插件可能就用不了了。Trusted Types 要求第三方浏览器扩展程序在为 DOM API 赋值时使用类型化对象而不是字符串。自 2024 年 7 月 25 日起,不符合 Trusted Types 安全要...

2024-08-15 18:01:27 127

原创 纯前端实现语音文字互转

本文作者系360奇舞团前端开发工程师在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环。Web Speech API 的引入使得开发者能够在浏览器中轻松实现语音识别和语音合成功能,为用户带来更加直观和便捷的操作体验。本文将介绍 Web Speech API 的基本概念、功能特性以及如何利用它来构建创新的应用程序。什么是 Web Speech API?Web Speech API 是一组...

2024-08-14 18:01:37 1211

原创 常见的加密算法

本文作者系360奇舞团前端开发工程师前言密码学是一门研究信息加密和解密技术的科学,通过数学方法设计和分析加密算法和协议,以确保数据在传输和存储过程中的保密性、完整性、真实性和不可否认性。在前后端的各种重要交互场景中(登录,支付)往往都会用到一种或者多种加密算法,来保护用户的信息安全。古代密码学凯撒密码凯撒密码是一种替换加密方法,将字母表中的每个字母替换为其后固定位置的另一个字母。阴符和阴书阴符是一...

2024-08-13 18:04:16 460

转载 无意中发现 Vue3 的小技巧,帮我节省很多代码

无意中发现 Vue3 的小技巧,帮我节省很多代码前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~最近在开发 Vue3 项目时偶然发现了一个技巧:组件的事件往下传可以进行叠加!,感觉对大家的开发肯定有帮助,能节省很多代码量!!!我会通过一个小案例来跟大家讲解这个小技巧的好处体现在哪~场景先来说说我的场景吧,我在项目开发中对一个基础组件BasicCom...

2024-08-12 18:00:26 115

转载 奇舞周刊第537期:WebGPU和WebAssembly能否克服DOCKER的AI GPU问题?

奇舞推荐■■■WebGPU与WebAssembly能否克服Docker的AI GPU问题"WebGPU和WASM能否颠覆AI GPU领域?本文探索其在解决DOCKER AI GPU问题上的潜力与挑战。跟随我一起揭开技术的神秘面纱,看看未来的GPU加速世界如何重塑我们的AI体验!"N种集成Rust与Nodejs的方案"探索 Rust 和 Node.js 的最佳结合方式!从跨越编程语言界限到优化性...

2024-08-09 15:45:20 122

转载 70%的人都答错了的面试题,vue3的ref是如何实现响应式的?

前言最近在我的vue源码交流群有位面试官分享了一道他的面试题:vue3的ref是如何实现响应式的?下面有不少小伙伴回答的是Proxy,其实这些小伙伴只回答对了一半。当ref接收的是一个对象时确实是依靠Proxy去实现响应式的。但是ref还可以接收string、number或boolean这样的原始类型,当是原始类型时,响应式就不是依靠Proxy去实现的,而是在value属性的getter和...

2024-08-08 18:06:45 120

原创 使用 React Context API 的最佳实践

本文作者为 360 奇舞团前端开发工程师本文将详细介绍如何使用 React 的 Context API 优雅地实现多主题切换,解决 props 穿透问题,并避免不必要的重新渲染。通过具体的示例代码,展示如何在浅色和深色模式之间切换,并探讨在实际项目中管理多个 Context 的最佳实践。目录什么是 React Context API,何时使用?在浅色和深色模式之间切换 UI 主题使用属性传递方案C...

2024-08-07 18:05:35 465

原创 AI视频解决方案汇总

本文作者为 360 奇舞团前端开发工程师随着人工智能技术的不断发展,AI生成视频的领域也在不断壮大。从基于大规模数据的深度学习方法到创新的算法和工具,各种解决方案正在不断涌现,为视频制作带来了新的可能性,从最开始的Pika、Runway到一经问世就惊艳众人的Sora,可以说大模型在多模态,特别是视频模态的发展速度远超我们的想象。不过就文生视频而言,目前市面上仍然没有像ChantGPT这样的现象级产...

2024-08-06 18:01:33 414

转载 深度对比 React 与 Vue 的 Diff 算法

昨天接了个广子,恰了点饭。你们的吐槽我的认了,哎呀,你们都说得对。所以我今晚连夜爆肝写了一篇专门用来面试的干货,总计 7000 字左右,分享给大家,必须要抢救一下想要取关的大佬们!许多朋友会在简历上同时写自己会 React、Vue,但是倒霉的面试官一看到这种简历,就喜欢问它们有什么区别。其中频率比较高的一个问题就是 React 与 Vue 的 diff 算法有啥相同之处和不同之处...很显然,这种...

2024-08-05 18:01:52 107

原创 奇舞周刊第536期:B端常用交互方式的量化及优化实践和指引|得物技术

奇舞推荐■■■B端常用交互方式的量化及优化实践和指引|得物技术B端前端交互领域是处于视觉设计师、产品和前端之间的交叉地带。Vue3 用了组合式 (Composition) API 后代码变得更乱了,怎么办?组合式 (Composition) API 的一大特点是“非常灵活”,但也因为非常灵活,每个开发都有自己的想法。加上项目的持续迭代导致我们的代码变得愈发混乱,最终到达无法维护的地步。本文是我...

2024-08-02 18:26:50 871

转载 next.js 的成熟,到底意味着什么

随着 SPA 技术的兴盛,前端这十年以来,开发方式从早期 asp/jsp/php 实现了一个非常大的转变。前后端分离、纯客户端方案成为了前端开发中的主流选择。当我们在讨论 react、vue、angualr 时,大多数时候,讨论的都是客户端渲染时的表现,其实很少会考虑他们在服务端渲染这一块做的到底如何了。但是事实上。服务端渲染方案一直是一个巨大的刚需。 他虽然没有被更普遍的提及,但是在大多数团队中...

2024-07-31 18:48:27 131

转载 深度解析 tailwindcss 设计源规则

这段时间陆陆续续收到了很多朋友对于如何更进一步使用 tailwindcss 的提问,发现大家在学习和使用 tailwindcss 的过程中,并没有掌握真正的核心的要点。所以经常会在一些时候比较无所适从。例如,如果公司有自己的设计规范,我应该如何调整 tailwindcss 去自定义我的设计方案?又或者有的同学不太喜欢 tailwindcss 的默认尺寸 m-1 表示 margin: 0.25rem...

2024-07-30 18:34:42 137

转载 如何实现一个分词器

如何实现一个分词器在开发代码补全插件的过程中,根据项目需要,我实现了一个分词器,本文将介绍分词器的具体实现细节。一、什么是分词器?分词器是 NLP(natural language processing,自然语言处理)领域的一个重要部分,它可以把一段文本转换为小的单元,称为 token 。token可以是单词、字符、标点符号等。在基于 Transformer 的 LLM (Large Langua...

2024-07-29 18:39:45 126

原创 奇舞周刊第535期:AI Code 在团队开发工作流的融合思考

奇舞推荐■■■AI Code 在团队开发工作流的融合思考在2024年,生成式人工智能(Generative AI)显著提升了软件开发效率,渗透到编码、测试和文档等各个环节。AI与低代码平台的结合提升了功能交付的效率,但面临定制化和成本挑战。2024 Vue 生态工具最能打的组合!2024 年 Vue 开发生态系统推荐使用 create-vue 脚手架、Pinia 状态管理、Vue Router...

2024-07-26 18:09:01 471

原创 安卓手机部署大模型实战

本文作者系360奇舞团前端开发工程师前言自ChatGPT发布以来,大语言模型(Large language model, LLM)就成了AI乃至整个计算机科学的话题中心。学术界,工业界围绕大语言模型本身及其应用展开了广泛的讨论,大量的新的实践层出不穷。由于LLM对计算资源的需求极大,有能力部署大语言模型的公司和实验室一般通过搭建集群,然后开放API或者网页demo的方式让用户可以使用模型。在人们纷...

2024-07-25 18:00:43 2594

转载 基于大模型 + 知识库的 Code Review 实践

背景???? 想法源于在一次 Code Review 时,向 Claude 询问哪种写法代码更优雅得来。当时就想能不能让 AI 帮我们辅助做 Code Review?痛点信息安全合规问题:公司内代码直接调 ChatGPT / Claude 会有安全/合规问题,为了使用 ChatGPT / Claude 需要对代码脱敏,只提供抽象逻辑,这往往更花时间。三星引入 ChatGPT 不到 20 天,被曝发生 3...

2024-07-24 18:00:58 162

原创 一文带你了解 Chrome AI

本文作者系360奇舞团前端开发工程师在人工智能迅猛发展的今天,Google Chrome 正在通过其前沿的技术推动浏览器体验的革新。特别是 Gemini 大模型作为 Chrome 的核心AI技术之一,正引领着智能化应用的新时代。本文将深入探讨 Gemini 大模型及其在 Chrome 浏览器中的应用,涵盖 Built-in AI 、DevTools AI 以及如何在网页中直接调用 Gemini A...

2024-07-23 18:01:18 978

转载 NPM 依赖管理的复杂性

这是一个很少被提及的话题 —— 「依赖管理」(Dependencies Management) 。在开源文化盛行的现代,多数时候我们都不必从零开始搭建一套软件系统,转而可以借助诸多开放的代码片段及其他资源更快速高效开发软件应用,这算的上软件工程发展史上一次巨大革命,因为它能大幅提升软件工业的生产效率,我们不必再从底层开始编写所有代码,大部分问题与常见的编程模式都能在社区找到相应的解决方案,且这些被...

2024-07-22 18:00:55 146

空空如也

空空如也

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

TA关注的人

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