frontend_frank的博客

原创 揭秘webpack插件工作流程和原理

前言通过插件我们可以扩展webpack，在合适的时机通过Webpack提供的 API 改变输出结果，使webpack可以执行更广泛的任务，拥有更强的构建能力。本文将尝试探索 webpa...

转载 我不要你来做，我要我来做！｜霸总宠你，来送好礼

点击阅读「原文链接」，马上体验豆包Marsode 编程助手，参与活动，祝大家好运！大家别猜啦！今天其实是豆包MarsCode 和你官宣了看再多的霸总语录也比不上老板的一句我来替你做！真的不敢想如果我的老板同事跟我说一句“你别做，我来做！”我会是多么幸福的小孩豆包MarsCode 霸总属性正式上线！只要你体验编程助手等功能，即可参与体验抽奖，90%超高中奖率，霸总宠你，我们是认真的。奖品包括：霸总同...

转载 揭秘海报生成技术

1 引言随着裂变营销策略的兴起，定制化海报分享的需求不断增加。作为开发者，一张背景图+一个二维码的海报合成的需求便会出现在我们的工作中，如下图。本文给大家介绍海报生成相关知识以及使用中常见的问题。希望能够抛砖引玉，为遇到类似需求或问题的伙伴们提供参考。2 实现方式2.1 生成步骤 在用户视角，海报生成像是“截图”，点击生成海报按钮之后，定制化海报便会呈现在屏幕上，再点击保存按钮，海报便会保存在手机...

转载 前端技术是什么？

(本文4500字，阅读时长 7-8分钟)在鹅厂，有一个名叫“行家”的平台。目的让在领域深耕多年的行家，给有困惑的小伙伴提供咨询服务。18年，我以一名在前端领域从业15年的身份加入到行家平台至今，已帮助 56 名存在职业发展困惑的前端开发同学，获得超过96%的好评。起初，加入这个平台的想法很简单。1. 我想了解现实中的一线开发同学，会因何事出现成长困惑。2. 能否通过我的一些思考给大家提供一些思路和...

转载 豆包MarsCode体验官-用React创建一个最经典的贪吃蛇游戏

背景在人工智能快速发展的时代，大模型（LLM）只要有足够的算力和数据就可以做到任何的事情，甚至可以模拟出另一个地球。LLM作为一个革命化的科技，可以取代很多岗位，甚至可以让人类达到“躺着领钱的时代”。Marscode作为一个新推出的IDE，紧跟时代的潮流，拥抱AI，顺应时代的潮流。各种各样的语言，都会有一个贪吃蛇的游戏去作为一个里程碑，我也完完全全用这个IDE去编写贪吃蛇游戏这个小demo。创建项...

转载 无笔试：面向全国心理爱好者！2024年心理咨询师招生渠道开启了！！可考心理证书增加收入...

心理咨询报考通知心理咨询行业人才招录告知书根据《2022年国民抑郁症蓝皮书》，我国18岁以下的抑郁症患者占总人数的30%，青少年抑郁症患病率已达15%至20%。从社会的大环境下，我国心理咨询专业人员相对匮乏。为降低心理疾病发病率，现开展心理咨询培训项目。选拔具备心理咨询实操能力的专业人才，补充心理行业130万职业人才缺口。同时为提升就业率和地区收入水平，获得证书后，可从事心理咨询相关工作（全职或副...

转载 JS高级-V8引擎的内存管理

该系列文章连载于公众号coderwhy和掘金XiaoYu2002中对该系列知识感兴趣和想要一起交流的可以添加wx：coderwhy666，拉你进群一起成长进步课程对照进度：JavaScript高级系列9-12集(coderwhy)脉络探索 在上一章节中，我们厘清了浏览器内核与JS引擎的关系也学习了JS代码如何通过V8引擎进行代码转化，进而能够在浏览器中进行执行的在本章节中，我们就要来探索在JS中，...

转载 聊聊如何在响应式页面中使用 rem

有粉丝朋友问了我一个问题：有一个 750 x 1500 尺寸的设计稿，设计稿上有一个 150 x 50 的按钮，那么在写页面布局的时候，应该如何确定按钮的尺寸呢？他想到了要使用 rem。但具体如何使用，他还是一头雾水。因此跑来咨询我。于是问题来了，rem 到底是什么？rem 是为了解决什么问题而存在的？rem 能够给我们带来什么样的便利？带着这样的问题，我们一起来总结一下 rem 的实践。rem ...

转载 【Vue 2 / Vue 3】一个简单易用、功能强大的图片裁剪插件，开源且免费！

大家好，我是CodeQi！一位热衷于技术分享的码仔。图片裁剪是许多现代网页应用不可或缺的功能，无论是社交媒体平台、电子商务网站，还是后台管理系统，都需要高效的图片处理工具。vue-img-cutter是一款基于 Vue3 的图片裁剪插件，拥有旋转、缩放、平移、固定比例裁剪、远程图片裁剪等强大功能，且使用简单、兼容性好，特别适合那些需要快速集成图片裁剪功能的项目。今天，我将介绍如何在 Vue3 ...

转载 通读 Taiwind CSS

来自团队同学「黄健」的技术分享。我是范文杰，一个专注于工程化领域的前端工程师，近期有不少 HC，感兴趣的同学可联系我内推！欢迎关注：Tailwind CSS 简介Tailwind CSS 是一个强大且灵活的框架，其核心设计是提供了一种全新的方式来构建用户界面，核心思想是通过使用预设类和定制功能，能够让开发者更专注在实现设计效果上，不再处理重复冗长的CSS文件，用最少CSS快速地创建出美观且响应迅速...

转载 前端构建系统浅析

开发者编写JavaScript代码，而浏览器运行JavaScript代码。从根本上说，前端开发不需要构建步骤。那么，为什么现代前端需要构建步骤呢？随着前端代码库越来越庞大，以及开发者体验越来越重要，直接将JavaScript源码传输给客户端会带来两个主要问题：不支持的语言特性：由于JavaScript在浏览器中运行，而浏览器种类繁多、版本各异，每增加一种语言特性，能运行你JavaScript的客户...

转载 [科普] Service Worker 入门指南

来自 「何天翔」 同学的内部分享。Service Worker 简介Service Workers 本质上是一种能在浏览器后台运行的独立线程，它能够在网页关闭后持续运行，能够拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源，从而实现拦截和加工网络请求、消息推送、静默更新、事件同步等一系列功能，是 PWA 应用的核心技术之一。与普通 JS 运行环境相比，Service Work...

转载 从零开始实现一个简单的低代码编辑器

来自 「赵越」 同学的内部分享，文章示例代码：「https://github.com/shadowings-zy/mini-editor」，欢迎 Star。目录：编辑器功能拆分编辑器数据格式的定义项目代码结构重点逻辑的实现（画布渲染、属性联动、拖拽组件）与后台交互还可以优化的点「Oh, 对了，文末有福利！！！」一、写在前面低代码编辑器作为一种能够极大地提升开发效率的PaaS软件，近些年来一直收到各...

转载 用 vue3 + phaser 实现经典小游戏：飞机大战，附带演示和源码

本文字数：7539字预计阅读时间：30分钟01前言说起小游戏，最经典的莫过于飞机大战了，相信很多同学都玩过。今天我们也来试试开发个有趣的小游戏吧！我们将从零开始，看看怎样一步步实现一个H5版的飞机大战！首先我们定好目标，要做一个怎样的飞机大战，以及去哪整游戏素材？刚好微信小程序官方提供了一个飞机大战小游戏的模板，打开【微信开发者工具】，选择【新建项目】-【小游戏】，选择飞机大战的模板，创建后就是一...

转载 V8引擎的运行原理

一. 认识JavaScript引擎 1.1. 什么是JavaScript引擎当我们编写JavaScript代码时，它实际上是一种高级语言，这种语言并不是机器语言。高级语言是设计给开发人员使用的，它包括了更多的抽象和可读性。但是，计算机的CPU只能理解特定的机器语言，它不理解JavaScript语言。这意味着，在计算机上执行JavaScript代码之前，必须将其转换为机器语言。这就是JavaScri...

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

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

转载 浅谈我对算法的理解，应用场景？

大家好，我是CodeQi！一位热衷于技术分享的码仔。在面试中，算法往往是一个不可回避的话题。面试官常常会问我们对算法的理解，以及我们如何在实际项目中应用算法。这个问题不仅考察我们的理论知识，还评估我们的实践能力。在接下来的内容中，我将通过几个具体的示例，详细讲解算法的基本概念及其在实际中的应用。????什么是算法？简单来说，算法是一组明确指令，用于解决特定问题的一系列步骤。一个好的算法应该具备以下特性...

转载 你做过什么有亮点的项目吗？

前言大厂面试中除了问常见的算法网络基础，和一些八股文手写体之外，经常出现的一个问题就是，你做过什么项目吗？看似简单的题目却让很多同学不知如何回答，因为面试就像相亲一样，你心仪的妹子不想听你说小学二年级还拿过三好学生，她其实只想了解现在的你，有什么特点和优点项目也是一样, 面试官其实是想看看你做过什么有亮点的项目, 其实大家日常做的项目都差不多，增删改查，登录注册，弹窗等等，所谓有亮点，就是在这些实...

转载 Pinia vs Vuex,应该选谁？

大家好，我是CodeQi！一位热衷于技术分享的码仔。当项目逐渐变大时，状态管理的问题开始显现了出来。这时，两个强大的状态管理工具：Vuex和Pinia。该选择哪一个呢？今天带各位大佬对比下两者的优势在何处，以及如何选择合适的状态管理库！什么是 Vuex？Vuex 是 Vue.js 的官方状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它...

转载 【Vue3 + Vite】6个非常强大的后台管理项目！开源且免费！

大家好，我是CodeQi！一位热衷于技术分享的码仔。前俩天给各位大佬推荐的5个开源的Vue3后台管理系统，很受大家喜爱，感谢各位前端开发过程中一定离不开后台管理项目，今天在给大佬们分享一些非常强大的 Vue 3+vite开发的后台管理项目。希望能为你的开发提供灵感和参考。????放心，都是开源且免费的！1. Vue Vben Admin项目特点Vue Vben Admin 是一个基于 Vue 3、Vi...

转载 想看源码但是无从下口怎么办？

前言相信不少同学都有欧阳这种情况，年初的时候给自己制定了一份关于学习英语和源码的详细年度计划。但是到了实际执行的时候因为各种情况制定的计划基本都没有完成，年底回顾时发现年初制定的计划基本都没完成。痛定思痛，第二年年初决定再次制定一份学习英语和源码的详细年度计划，毫无疑问又失败了。经过多年的摸索，对于如何查看源码欧阳终于有了一些自己的心得。有的同学还想问英语有什么心得没，不要问，再问欧阳哭给你看。一...

转载 腾讯文档前端工程架构改造实践

????目录1 老旧的工程架构让业务开发走得越来越慢2 上百个 npm 包仓库的自动化发布系统3优化组件库的构建体积与速度4多仓库带来困境重重，决心尝试大仓脱困5 如何阻止代码劣化6 总结腾讯基础开发中心负责维护着腾讯文档除编辑器外的大部分业务， 包括 90+ npm 包与 170+ 的 CDN 组件，还有六个 application 服务，散落在七个业务仓库中。随着业务量和开发同学的逐渐增多，基础...

转载 Vue3 除了Ref、Reactive还有哪些东西

点击下方“前端开发爱好者”，选择“设为星标”第一时间关注技术干货！哈喽，大家好 我是 xy????????‍????。使用 Vue3，如果你只会使用 Ref、Reactive，那你真的就该 Out 了！！！前言最近团队的工作相对较少，我决定利用闲暇时间对代码进行审查和优化。在此过程中，我发现了一个令我惊讶的现象：在项目中 99% 的响应式变量声明都使用了 Ref 或 Reactive。虽然这两个 API 在大多数场...

转载 推荐8个还在疯狂输出的前端大佬

前端学习，关注这几个大佬就够了。他们的文章提供的前端知识非常完备，也经常推荐前端面试、个人成长相关的文章，对于你来说，学前端，关注这些公众号就够了。不多说，直接看这些大佬的介绍。????程序员成长指北考拉，一个有趣且乐于分享的妹子！目前就职于某知名外企，负责部门中台搭建。公众号专注 Node.js 技术栈，从 高级前端 到 Node.js与前端工程化 再到 后端数据库，祝您成为优秀的高级 Node.js...

转载 浅谈编码提效

编码 是软件工程全生命周期中最最关键的环节，不幸的是，这同时也是最复杂最容易出问题的环节。编码是一种非常复杂抽象的脑力活动，开发者之间受技能、熟练度、经验、习惯、偏好等影响往往会呈现出较大的效率差异，这是普遍存在的客观事实，但站在工程化管理视角，我们需要设法尽可能克服这些差异，使得团队每一个个体都有较为稳定的编码产出；需要保证不同个体产出的代码集成后，系统各部件依然能如预期地正常运行；同时，需要确...

转载 Vue3 中的 v-bind 指令：你不知道的那些工作原理

大家好，我是欧阳！本文约1700+字，整篇阅读大约需要6分钟。前言v-bind指令想必大家都不陌生，并且都知道他支持各种写法，比如<div v-bind:title="title">、<div :title="title">、<div :title>(vue3.4中引入的新的写法)。这三种写法的作用都是一样的，将title变量绑定到div标签的title属性上。...

转载 学会这12个JavaScript实用技巧，做一个优雅的前端人

JavaScript 是一种应用场景多且功能强大的语言，对于现代 Web 开发至关重要。掌握一些 JavaScript 实用技巧对于提升代码质量和开发效率至关重要，这些技巧可以帮助开发者更高效地编写和维护代码，让代码变得优雅且不过时，让你成为更高效、更有效的前端开发人员。这篇文章就来和大家一起探讨几种 JavaScript 开发技巧，每种技巧都有介绍代码和示例，让我们一起来提升你的 JavaScr...

转载 Vue 开源项目：一款实用的个人音乐流媒体服务器，轻松打造属于自己的音乐天堂！！！...

点击上方蓝字关注我们大家好，我是CodeQi！你们是否曾经希望有一款属于自己的音乐流媒体服务器，可以随时随地播放你喜欢的音乐，而不必依赖于 QQ音乐 或 Apple Music？有时候，我们是不是会幻想自己是一个拥有私人音乐库的DJ，随时随地可以播放自己喜爱的曲目？别担心，我也有过这种想法。不过现在，这个梦想可以轻松实现了！让我为你们介绍 Koel，一款实用的个人音乐流媒体服务器，让你轻松打...

转载 tailwindcss 高级思维模型

时间是过得真快，从刚开始决定 all in tailwindcss，到现在非常熟练的使用，已经过去了一个多月的时间了。在这个期间，我写了几篇文章给大家分享我的使用感受。但是呢，还是有很多人不理解我为什么如此推崇它，因此，我决定再写一篇文章，来跟大家分享一下，在真实项目中，我是如何使用 tailwindcss 的。区分基础能力与高度封装随着几个版本的迭代，为了增强自己的适用范围，tailwindcs...

转载 深入了解Vite：依赖预构建原理

前言前面我们有提到Vite在开发阶段，提倡的是一个no-bundle的理念，不必与webpack那样需要先将整个项目进行打包构建。但是no-bundle的理念只适合源代码部分（我们自己写的代码），vite会将项目中的所有模块分为依赖与源码两部分。依赖：指的是一些不会变动的一些模块，如：node_modules中的第三方依赖，这部分代码vite会在启动本地服务之前使用esbuild进行预构建。esb...

转载 整理了几个输出原创文章的博主，收藏下来慢慢看

前端学习，关注这几个大佬就够了。他们的文章提供的前端知识非常完备，也经常推荐前端面试、个人成长相关的文章，对于你来说，学前端，关注这些公众号就够了。不多说，直接看这些大佬的介绍。????程序员成长指北考拉，一个有趣且乐于分享的妹子！目前就职于某知名外企，负责部门中台搭建。公众号专注 Node.js 技术栈，从 高级前端 到 Node.js与前端工程化 再到 后端数据库，祝您成为优秀的高级 Node.js...

转载 字节跳动发布“豆包MarsCode”智能开发工具，面向国内开发者免费

6 月 26 日，字节跳动在北京发布了基于豆包大模型打造的智能开发工具 - 豆包MarsCode ，面向国内开发者免费开放。本场发布会以“用 AI 激发创造”为主题，在草地露营的轻松氛围中发布了豆包MarsCode 并介绍了其主要功能，同时发布开发者及社区共创计划，吸引了众多业界人士、开发者和科技爱好者的关注。豆包MarsCode产品发布会现场豆包MarsCode——用 AI 激发创造字节跳动开发...

转载 AT大厂面试题与全栈知识体系结合

转载 20个超好看的落地页/首页模板

来分享 20 个超好看的落地页/首页模板。代码：https://github.com/RSurya99/nefa代码：https://github.com/RSurya99/trippi代码：https://github.com/cruip/tailwind-landing-page-template代码：https://github.com/vivid-labs/vivid-landing-te...

转载 精彩！Vue 实现消息列表向上无缝滚动！丝滑...

点击上方蓝字关注我们大家好，我是CodeQi！最近，我的老板又给我布置了一个有趣的任务——实现一个消息列表向上无缝滚动的效果。刚听到这个需求时，我差点以为要让我编写一个“电梯广告屏”！不过，作为一个乐于挑战的开发者，这种需求反而激发了我的兴趣。于是，我带上 Vue.js，开始了这次“无缝滚动”的冒险之旅。今天，我就来分享一下我是如何一步步实现这个效果的。项目初始化首先，我们需要初始化一个 V...

转载 逆天的react小游戏，附源码&体验链接

原文链接：https://gold.xitu.io/post/585a3e151b69e60056fe44fb点击下面原文链接体验游戏github源码：https://github.com/chvin/react-tetris先来个demo图正常速度的录制，体验流畅。不仅pc屏幕自适应，在手机使用手指也能响应式操作：将state储存在localStorage，精确记录所有状态。网页关了刷新了、程...

转载 罗列n个前端博主（简介、擅长领域等），希望对初学者有所帮助

推荐几个前端领域的公众号，他们不仅拥有丰富的技术内涵，还具备引人深思的原创能力。我相信，他们的文章总能给你带来启发和思考，关注他们，了解前端领域的前沿技术和最新动态，激发你对前端的热情和持续探索!前端开发爱好者「前端开发爱好者」号主xy，掘金签约作者，目前在某独角兽公司担任【前端Leader】，公众号创建的初心是【致力于基础到进阶再到实践总结】。目前已经分享了上百篇关于前端学习路线、前端进阶、数据...

转载 这12个前端库，帮我在工作中赢得了不少摸鱼时间

点击上方蓝字关注我们大家好，我是CodeQi！今天，我想跟大家分享一个小秘密：有12个前端库，帮我在工作中赢得了不少摸鱼时间。别误会，我不是在提倡懒惰，而是在强调如何通过高效的工具提高工作效率，从而有更多的时间来处理其他重要的任务，或者……摸鱼。没错！就是摸鱼。毕竟，提高效率后，工作做完了，摸鱼也是一种享受。下面，我就来详细介绍一下这12个神奇的前端库，以及它们是如何帮我节省时间的。1. A...

转载 使用 docker 搭建属于自己的个人相册，让生活中的美好不再丢失！

前言随着数码设备的普及，许多人都积累了大量的照片和视频。如何高效地管理、浏览和分享这些数字资产成了一个重要问题。PhotoPrism 是一款开源的照片管理应用，它通过先进的图像识别技术和用户友好的界面，帮助用户轻松地管理和分享照片。本篇文章将详细介绍如何使用 Docker 搭建属于自己的 PhotoPrism 个人相册。特性PhotoPrism 具备以下主要特性：1.强大的搜索功能：支持按地点、...

转载 听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！...

点击上方蓝字关注我们大家好，我是CodeQi！最近，我的老板给我布置了一个任务：实现一个用户可以随时增删字段的动态表单。你知道的，作为一个前端开发者，我平时和表单关系可不算好，这次的任务无疑是向我发起了挑战。于是，我带上了 Vue 3 这个利器，开始了我的动态表单征程。接下来，我会带着大家一起从入门到精通，深入了解如何在 Vue 3 中实现动态表单。介绍动态表单是一种允许用户根据需求动态调整...