- 博客(2117)
- 收藏
- 关注
RSS订阅转载 【Web技术】2137- 纯前端实现语音文字互转
本文作者系360奇舞团前端开发工程师在现代互联网的发展中，语音技术正逐渐成为改变用户体验的重要一环。Web Speech API 的引入使得开发者能够在浏览器中轻松实现语音识别和语音合成功能，为用户带来更加直观和便捷的操作体验。本文将介绍 Web Speech API 的基本概念、功能特性以及如何利用它来构建创新的应用程序。什么是 Web Speech API？Web Speech API 是一组...
2024-08-23 19:02:29
转载 猴急！送《黑神话：悟空》啦
我知道你每天都加班！下班后都没时间打游戏。但刷刷朋友圈，你会发现别人居然在热聊《黑神话：悟空》，这是怎么回事？他们不忙吗？????原来，他们秘密武器就是——豆包MarsCode！???????? 只要你把需求一扔，豆包MarsCode！就能自动生成代码，单测用例、代码优化全都搞定！瞬间让你工作效率飞升，早早解放双手！???????????????????? 工作搞定后，时间怎么花？当然是痛快地畅玩游戏啦！????豆包MarsCode已经帮大家准...
2024-08-22 18:21:43
4
转载 【工程化】2136- 如何实现一套完整的CI/CD？
本文转载于稀土掘金技术社区，作者：liyu11原文链接：https://juejin.cn/post/7398342856018837539CI/CD在项目中的作用不可言喻，避免了手工操作的低级失误以及便捷了开发部署项目。首先实现完整CI/CD，需要一些前置知识。CI是什么？CI是持续化集成。他主要流程其实就是开发将代码上传到Github，持续集成工具（Github action， Jenkins...
2024-08-21 09:37:55
3
转载 【Vuejs】2135- 理解 Vue 3.4 中的 defineModel() 宏
v-model 可以在组件上使用以实现双向绑定。从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏：<!-- Child.vue --><script setup>const model = defineModel()function update() { model.value++}</script><...
2024-08-19 09:28:55
5
转载 【TS】2134- 重新学习 TypeScript 类型系统
作者：转转技术团队https://juejin.cn/post/7374614838008774656很多开发者已经将 Typescript 加入到自己的项目里进行开发，初衷是为了项目在开发时拥有类型检查能力。 TypeScript 通过易上手且功能强大的类型系统，为 JavaScript 提供了强大的类型检查能力。在类型的帮助下，我们无需实际运行代码，就能通过类型的流转观察到变量的值是如何改变的...
2024-08-18 17:11:26
13
转载 【总结】2133- 前端组长应该如何管理前端团队
前言在最近的一年，我的工作重心逐步从一线开发人员开始往技术管理者的方向发展，在这一年的时间里，我深深的感受到执行者与管理者的不同之处，在这个过程中，需要多方面的转变才能适应这个角色。下面我将以我的个人经验和理解来总结前端组长应该如何管理团队，希望能给那些刚从开发人员往管理方向发展的小伙伴们一点参考和帮助。我认为要管理好前端团队：本质上：让团队少走弯路，并引领团队走在正确的道路上。理念上：让团队高效...
2024-08-17 17:16:16
10
转载 【总结】2132- 10 分钟带你构建monorepo架构，前端通用自动化 CI/CD 方案
今天我们主要讨论3方面内容：如何搭建比较高效好用的monorepo工程前端如何基于搭建的monorepo工程实现自定义cli工具普通前端项目以及monorepo工程项目自动化cicd核心问题以及解决方案基于 pnpm-workspace + Turborepo + lerna 搭建 monorepo 的 cli 工程首先利用 pnpm 初始化一个工程执行命令初始化工程：pnpminit-yim...
2024-08-16 13:17:16
7
转载 【Web技术】2131- 一个前端非侵入式骨架屏自动生成方案
背景性能优化、减少页面加载时间、提升用户体验，是前端领域的一个永恒话题。在前后端分离、异步渲染在页面中被普遍应用的背景下，大量页面在用户访问时不可避免的会出现一段短时间白屏。目前的解决方案一般为以下几种：服务端同步渲染增加页面 loading增加页面首屏骨架屏这几种方案各有优缺点，服务端同步渲染优点在于效果最好，缺点在于成本过高，需要在服务器部署、运维方面有较大的投入；页面loading是优点是通...
2024-08-15 09:38:14
5
转载 【总结】2130- 8 个解决移动端1px 边框困境的方案
您是否注意到 1px 边框在移动设备上有时会显得比预期的要粗？这种不一致源于移动屏幕的像素密度不同。在 Web 开发中，我们使用 CSS 来设置页面样式。但是，CSS 中的 1px 并不总是转换为设备上的物理 1px。这种差异就是我们的“1px 边框问题”产生的原因。罪魁祸首：像素密度每个设备都拥有特定的像素密度，由 devicePixelRatio 测量，它告诉我们物理像素与设备独立像素之间的比...
2024-08-14 07:59:30
7
转载 【CSS】2129- 现代 CSS 解决方案：文字颜色自动适配背景色！
accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。简单而言，CSS accent-color 支持使用几行简单的 CSS 为表单元素着色，是的，只需几行代码就可以将主题颜色应用到页面的表单输入。表单元素一直被吐槽很难自定义[1]。而accent-color...
2024-08-13 08:02:30
31
转载 【总结】2128- ServiceWorker 让你的网页拥抱服务端的能力
ServiceWorker 是一个运行在浏览器背后的独立线程，它拥有访问网络的能力，可以用来实现缓存、消息推送、后台自动更新等功能，甚至可以用来实现一个完整的 Web 服务器。因为ServiceWorker运行在浏览器背后，因为这个特性，它可以实现一些不需要服务器参与的功能，比如消息推送、后台自动更新等。什么是 ServiceWorkerServiceWorker提供了一个一对一的代理服务器，它可...
2024-08-12 09:29:03
23
转载 【Web技术】2127- 前端字体渲染闪烁？来试试预加载
闪烁问题原因？其实这里背后的原因 很简单就是，我们没有提前加载字体包，导致进入页面使用到了字体然后进行网络请求，但由于网络请求需要一段时间向服务端获取资源，这段时间前端页面会使用默认字体，此时从默认字体转化为请求的字体就出现闪烁。33f66144c3fecf45bc43b564c736033.png使用 css发送网络请求加载字体@font-face{font-family:'JD-U...
2024-08-11 15:49:37
26
转载 【JS】2126- 7 种JavaScript中新的 Set 方法
作为开发人员，不断探索新内容，是我们必备的技能之一，今天就让我们一起来探索一下Set 对象的出色新增功能，我整理了7个内容，希望对你们有所帮助。1. Intersection()：寻找共同点这个方法揭示了两个集合之间的共同元素。把它想象成一个维恩图，突出显示重叠区域。让我们看看实际效果：const setA = new Set([1, 2, 3, 4]);const setB = new Se...
2024-08-10 15:22:54
12
转载 面了8个前端开发，发现了一个通病……
最近在网上看到很多人找前端工作一直碰壁，甚至有些人心态崩溃都产生转行的想法，今天通过这篇文章，以一个8年经验老开发的角度，分享一套大而全的面试资料合集。不可否认，现在找工作要比之前难一些，但这是经济下行带来的，你不干前端，去干别的，也一样不好找工作。那些说什么前端已死、互联网已死的请绕道。这套资料涵盖了「中大厂面试考点、难点」，从八股文到框架底层和面试真题都有，400+面试题，3套+面试资料，领取...
2024-08-09 10:20:48
24
转载 【总结】2125- 字节 Rspack 家族再添一员，又一个全新构建工具来了！
最近，字节跳动的 Rspack 家族又来了一个新成员：Rslib。至此，Rspack 家族目前已经拥有了 5 个成员：Rspack、Rsbuild、Rspress、Rsdoctor、Rslib。本文就来看看这些工具都是什么，有什么特点！RslibRslib 是一个由 Rsbuild 驱动的库构建工具，基于 Rsbuild 的配置和插件构建，提供最佳的 ESM 和CJS 输出。Rslib 解决了传统...
2024-08-08 21:22:31
41
转载 【总结】2124- 轻松实现前端错误上报
前言项目上线之后，用户如果出现错误（代码报错、资源加载失败以及其他情况），基本上没有办法复现，如果用户出了问题但是不反馈或直接不用了，对开发者或公司来说都是损失。由于我这个项目比较小，只是一个迷你商城，所以不需要收集很复杂的数据，只需要知道有没有资源加载失败、哪行代码报错就可以了，市面上有很多现成的监控平台比如sentry，在这里我选择通过nodejs自己搭一个服务。概述我的项目是使用Vue2写的...
2024-08-07 09:32:06
33
转载 【总结】2123- 如何二次封装 Axios 下载文件和上传文件？
一 下载文件正常情况下，我们用axios下载下来的文件是一个二进制的东西，需要处理才能成一个真真的文件。比如：我用express写一个接口，就是当页面访问的时候，下载这个美女图片。服务端客户端浏览器console上图里面，对象data里面放了很多二进制的东西，就是我们的文件内容，我们需要用Blob对象，把他转成Blob，然后用 window.URL.createObjectURL(blob) 给出...
2024-08-05 09:23:05
186
转载 【React】2122- React 19 升级官方指南：值得注意的变化
前言在本文中，我们将科普将库升级到 React 19 beta 值得注意的变化：新的弃用功能显著更改TS 更改新的已弃用功能1. 已弃用：element.refReact 19 支持ref作为prop，因此我们弃用element.ref来代替element.props.ref。2. 已弃用：react-test-renderer我们弃用了react-test-renderer，因为它...
2024-08-04 18:56:28
32
转载 【Vue】2121- 总结 12 种 Vue 设计模式
转自：前端开发博客设计模式，说白了就是写代码的“套路”。用好了，你的代码就能更健壮，更易于维护。几乎所有应用都会遇到一些共性问题，设计模式就像一个宝库，提供了很多经过验证的解决方案。可关于 Vue 中的设计模式，很多人都说不清道不明。尤其是 Vue 独有的设计模式，更是少有人提及。今天，我就来给大家分享 12 种 Vue 设计模式，每个模式都附带一个简单的例子，让你快速上手！这只是个开胃菜，想要深...
2024-08-03 10:05:13
35
转载 【总结】2120- 前端在本地开发还能用https？
该文章是实践了这篇文章 juejin.cn/post/7141308011921801223之后想写的。原文已经讲得很详细了，内容也详实，我只是想分享一下对我而言最简单好用的同时再讲一下为什么这样配置能够生效。前言一般情况下，前端在开发本地项目的时候大都用不到https，但有些特殊情况不同，比如你需要使用service worker，又或者需要使用cookie而后端又设置了secure。nextj...
2024-08-02 22:26:18
43
转载 【CSS】2119- 15 个你不知道的 CSS 属性
在Web 开发领域中，CSS（层叠样式表）是构建网站视觉美感和布局的支柱。虽然许多开发人员熟悉常用的 CSS 属性，但仍有大量隐藏的宝石等待被发现。在今天这篇文章中，我们揭示了 15 个隐藏的 CSS 属性，这些属性可能没有引起您的注意，但在增强您的网页设计能力方面具有巨大的潜力。1.backdrop-filter:此属性将图形效果（例如模糊或色移）应用于元素内容后面的区域。它非常适合创建磨砂玻璃...
2024-08-01 23:59:23
32
转载 【Vue】2118- 2024 Vue 生态工具最能打的组合！
经过 10 年的演进，Vue 已经构建了一个极为丰富且强大的生态系统，本文就来盘点 2024 年 Vue 开发最能打的技术组合！脚手架：create-vuecreate-vue 是 Vue.js 官方推出的一个快速启动 Vue.js 项目的脚手架工具。它基于 Vite，为开发者提供了一种快速、便捷的方式来创建 Vue 项目模板，降低了项目的入门门槛。Github：https://github.co...
2024-07-31 23:36:56
46
转载 【总结】2117- 带你了解前端单例模式
本文转载于稀土掘金技术社区——Aplee概述单例模式 （Singleton Pattern），保证一个类只有一个实例，并提供一个访问它的全局访问点。也就是说，第二次使用同一个类创建新对象的时候，应该得到与第一次创建的对象完全相同的对象。单例模式.png重点：一个类只能生成一个实例对象提供一个全局访问点来获取这个实例单例模式为了限制对单例实例的访问，且保证所有代码使用同一个实例。现在我们想一下在前端...
2024-07-30 10:19:50
40
转载 【JS】2116- 无限滚动加载数据利器：IntersectionObserver
今天和同事讨论时，讨论了页面滚动加载数据的事情，正好我去年年底也做过相同的功能，只是当时因为各种原因吧，没有做总结。现在回想起来，只是记得以前做过，在哪个页面实现的，具体实现的方法，确实有点忘记了。记得当时好像也尝试了很多的方法，最后才实现，这里又要吐槽一下自己的笨了。所以把当时的代码给扒出来，是利用IntersectionObserver这个api实现的，然后在网上找了一些资料，准备输出整理一下...
2024-07-29 07:54:54
52
转载 【总结】2115- 低成本的 H5 秒开方案-接口预请求
背景作为直接面向用户的前端开发人员，我们都知道页面首屏打开速度的重要性，直接关系到用户的留存。提升 H5 页面打开速度的方法也有很多，有从网络优化入手的 CDN、gzip压缩、Keep-Alive等，有从加载优化入手的资源大小优化、懒加载、按需加载、代码拆分、Tree Shaking等，以及页面渲染时的一些优化。在我们的项目中，上述优化基本都有使用，当优化达到一定程度，想要继续仅基于 H5 自身优...
2024-07-28 23:51:21
67
转载 【AI】2114- 汇总 11 个 AI 领域的优质飞书知识库，完全免费，赶紧收藏起来！
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！近期推荐PPT：Tome｜美图PPT｜AiPPT｜Gamma学习：Elmo｜Grammarly｜灵动翻译｜DeepL编程：Codeium｜通义灵码｜SafurAI｜Comate其他：TinyWow|PixVerse|Toolkit|SeekAI|腾讯帮小忙????2023 AI 工具汇总｜????在线知识库????9 款...
2024-07-27 16:34:08
131
转载 【CSS】2113- 快速了解 CSS light-dark 函数及其应用
介绍一个和主题密切相关的CSS特性：light-dark，有了它，可以更灵活的适配各种主题模式。一、prefers-color-scheme一般来讲，网站会有三种主题模式，白天、黑夜、自动跟随系统，比如下面的MDN官网前面两者是固定的，不会跟随系统变化。这里简单实现一下三种主题模式，假设有这样一个结构<body> <h1>前端侦探</h1></b...
2024-07-26 22:26:49
44
转载 【AI】2112- 一文带你了解 Chrome AI
本文作者系360奇舞团前端开发工程师在人工智能迅猛发展的今天，Google Chrome 正在通过其前沿的技术推动浏览器体验的革新。特别是 Gemini 大模型作为 Chrome 的核心AI技术之一，正引领着智能化应用的新时代。本文将深入探讨 Gemini 大模型及其在 Chrome 浏览器中的应用，涵盖 Built-in AI 、DevTools AI 以及如何在网页中直接调用 Gemini A...
2024-07-25 19:37:27
47
转载 【总结】2111- 总结 3 种如何防止接口重复请求的方案！
前言虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做全局处理。下面就来总结一下这次的防重复请求的实现方案：方案一这个方案是最容易想到也是最朴实无华的一个方案：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦...
2024-07-24 19:31:42
45
转载 【React】2110- React 性能优化十大总结
本文转载于稀土掘金技术社区——敲代码的彭于晏前言性能优化是软件开发中永远不会过时的话题，本篇将介绍在React编码过程中需要注意的性能优化点。鉴于图片懒加载、虚拟滚动列表等已成为广为人知的通用性能优化手段，本文将不再赘述这些内容。1. memomemo允许组件在 props 没有改变的情况下跳过重新渲染默认通过Object.is比较每个prop，可通过第二个参数，传入自定义函数来控制对比过程con...
2024-07-23 09:40:23
32
转载 【总结】2109- 手把手教你写一个前端脚手架
作者：猪头切图仔https://juejin.cn/post/7260893255189758010引言脚手架是什么，相信各位已经熟悉得不能再熟悉了，毕竟无论是vue开发者（vue-cli）还是react（create-react-app）开发者，他们都有各自的脚手架，个人虽是用react更多，但不得不说是更喜欢vue-cli的，它的插件机制非常有意思，虽不如webpack的plugin那么方便，...
2024-07-22 19:53:41
36
转载 【总结】2108- 写一个倒计时功能刷掉了80% 的人
阿里的大佬自己说的在面试时候必问的一个题目，其实这个问题不仅是在面试中，也在我们的业务里也会经常用到，所以才会写这么一篇文章，那么到底如何才能写一个完美的倒计时呢？首先我们在写倒计时的时候必须要考虑到两点：准确性、性能。接下来我们来一步一步实现一个准确的定时器。setInterval：我们先来简单实现一个倒计时的函数：functionexample1(leftTime){lett...
2024-07-21 17:15:52
47
转载 【总结】2107- Node.js + typescript 写一个命令批处理辅助工具
作者：掘金 - 用户名还没想好https://juejin.cn/post/69305658603484610631.背景工作中遇到这样一些场景：在php混合html的老项目中写css，但是css写着不太好用，然后就想使用预编译语言来处理，或者写上ts。然后问题来了: 每次写完以后都要手动执行一次命令行把文件编译成css文件，然后又要再输入一行命令把css压缩添加前缀；或者把ts编译成js，然后...
2024-07-20 12:46:51
41
转载 【ES】2106- 重磅更新！ECMAScript 2024 全新特性全面解析
转自：OSC开源社区（oschina2013）2024 年 6 月 26 日，第 127 届 ECMA 大会正式批准了 ECMAScript 2024 语言规范，这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2024 都有哪些新特性吧！1. Group By 分组Map.groupBy()将可迭代对象分组为一个新的Map，Map中的key由回调提...
2024-07-19 20:48:37
30
转载 再见了JS、TS！前端Rust已成风气！
2024下半年，产业转型加速，互联网进一步内卷已成风气，前端的突破点和进阶方向在哪？长期来看，优秀的前端首先要有箭头思维。箭头的方向就是我们发展的方向，箭头的长短就代表了那个方向上的能力大小。不要只盯着老板、公司的向量看，其实自己也是个向量，应该有自己的发展方向。落地到技术层，未必只专注现公司业务所需的技术，更要拉高视野，体系化打开学习思路。好比很多人还在撸JS源码，但从去年起，「Rust」已是高...
2024-07-18 08:30:53
25
转载 【总结】2105- 前端代码规范- Commit 提交规范
什么是约定式提交约定式提交（Conventional Commits）是一种用于代码版本控制的规范，旨在通过明确和标准化提交信息来提高代码协作质量和效率。其基本原则是通过规定提交信息的结构和语义来提高代码版本控制的可读性、可维护性和自动化程度。约定式提交规范通常要求提交信息包括一个描述性的"类型"、一个可选的"作用域"、一个用于简洁说明的"主题"，以及可选的"正文"和"尾部"等组成部分。这些组成部...
2024-07-17 15:44:58
31
转载 【总结】2104- 高效传输大的 JSON 数据，流式处理真香！
什么是 TextDecoder APITextDecoder[1] API 是一个用于将二进制数据（通常是 ArrayBuffer 或 TypedArray）解码为字符串的 JavaScript API。它是 Web 平台的一部分，主要用于处理文本编码的解码工作。比如，从服务器接收到的流式数据、文件数据等。为什么使用 TextDecoder API在处理 Web 应用中的二进制数据时，通常需要将这...
2024-07-16 21:31:54
37
转载 【AI】2103- 11 款热门 AI 视频生成工具，文生视频、图生视频都有！
关注 “AI 工具派”探索最新 AI 工具，发现 AI 带来的无限可能性！最近很多小伙伴在群里了解 AI 视频生成工具，这几天 Chris 精心整理了 11 款优秀的 AI 视频生成工具，每款工具都有各有特色，大家可以体验看看。有需要加入 AI 工具交流群，可以私聊我。往期推荐：9 款热门 AI PPT 生成工具8 款热门文本转语音 AI 工具8 款强大 AI 图片无损放大工具5 款优秀的 AI ...
2024-07-15 22:55:05
859
原创 【工具】2102- es-toolkit：一个现代 JavaScript 工具包，体积更小，内置 TypeScript 支持...
介绍es-toolkit 是一款先进且具备高性能的现代化 JavaScript 实用工具库，其拥有较小的捆绑包规模以及强大的类型注解，同时还提供了一系列非常不错的函数，适合日常使用。相较于 lodash 等替代方案，es-toolkit 所提供的包体积显著减小（最多降低 97%），且运行时性能提升 2 - 3 倍。大部分功能是借助最新的 JavaScript 特性实现。工具地址：https://e...
2024-07-14 11:02:44
1139
转载 【总结】2101- 手把手教你写一个前端脚手架
引言脚手架是什么，相信各位已经熟悉得不能再熟悉了，毕竟无论是vue开发者（vue-cli）还是react（create-react-app）开发者，他们都有各自的脚手架，个人虽是用react更多，但不得不说是更喜欢vue-cli的，它的插件机制非常有意思，虽不如webpack的plugin那么方便，但也很强大。不过再讲这强大的功能之前，原谅我先水一篇脚手架的基础。脚手架会分两篇来讲，本篇为基础篇，...
2024-07-13 18:46:07
21
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人