<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Sestid的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Sestid</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Sestid]]></copyright><item><title><![CDATA[前端开发Claude Code使用指南]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/160340190</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/160340190</guid><author>Sestid</author><pubDate>Mon, 20 Apr 2026 16:24:36 +0800</pubDate><description><![CDATA[一、基础命令1️⃣ 常用斜杠命令2️⃣ 工作流命令3️⃣ 特殊命令二、核心插件（Skills）1️⃣ simplify - 代码优化审查最近修改的代码，检查代码复用、质量和效率问题。2️⃣ claude-api - Claude API 开发构建使用 Claude API 或 Anthropic SDK 的应用。3️⃣ code-review - 代码审查对 Pull Request 进行全面的代码审查。4️⃣ feature-dev - 功能开发。]]></description><category></category></item><item><title><![CDATA[前端Cursor使用指南（后续会更新Claude）]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/160106842</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/160106842</guid><author>Sestid</author><pubDate>Mon, 13 Apr 2026 11:17:48 +0800</pubDate><description><![CDATA[🚀 Cursor 使用指南（AI 代码编辑器）一、产品简介Cursor 是一款基于 VSCode 的 AI 代码编辑器，深度集成了 GPT-4、Claude 等大语言模型，提供智能代码补全、对话式编程、代码重构等功能。🌟 核心优势二、核心功能与快捷键1️⃣ Cmd/Ctrl + K - 行内编辑模式最常用的功能，在当前光标位置进行 AI 编辑。使用场景：// 1. 选中代码，按 Cmd+K，输入指令// 选中这段代码。]]></description><category></category></item><item><title><![CDATA[前端AI编程使用技巧（后续会更新cursor和claude code for vscode）]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/160025977</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/160025977</guid><author>Sestid</author><pubDate>Fri, 10 Apr 2026 17:08:45 +0800</pubDate><description><![CDATA[从“手写代码”为主，逐渐转向“人机协作开发”。本文结合我实际使用的 Cursor 和 Claude Code（VSCode 插件），总结一套前端工程师的 AI 使用方法和进阶技巧。好，这一部分我帮你无缝补进你第一版文章结构里，作为一个独立章节（可以放在 Cursor / Claude 之后，作为“进阶能力”），整体风格保持一致，直接可用👇。好，这一部分我帮你无缝补进你第一版文章结构里，作为一个独立章节（可以放在 Cursor / Claude 之后，作为“进阶能力”），整体风格保持一致，直接可用👇。]]></description><category></category></item><item><title><![CDATA[高阶前端面试题（含AI相关）]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/158777007</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/158777007</guid><author>Sestid</author><pubDate>Sat, 07 Mar 2026 19:59:07 +0800</pubDate><description><![CDATA[{ label: “三分法构图”, value: “rule_of_thirds” },{ label: “居中构图”, value: “centered” }{ label: “8mm鱼眼”, value: “highmm” },{ label: “高机位”, value: “high” },{ label: “无”, value: “” },{ label: “无”, value: “” },{ label: “无”, value: “” },Fiber 为什么是链表结构，而不是树或数组？]]></description><category></category></item><item><title><![CDATA[2020年12月TypeScript平均工资上涨后，TS 核心概念梳理]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/111037787</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/111037787</guid><author>Sestid</author><pubDate>Mon, 31 Oct 2022 17:49:34 +0800</pubDate><description><![CDATA[8月20日，TypeScript 4.0 正式发布了(Announcing TypeScript 4.0)，虽然没有重大的变更和特性，可以看做是 3.9 版本正常迭代，不过 Daniel 也在公告中说了：对于初学者而言，现在是最好的上手时机。

In fact, if you’re new to the language, now is the best time to start using it.

确实 TS 在经过了几年的发展后，使用 TS 的团队也越来越多，更重要的是 TS 的生态越来越完备，..]]></description><category></category></item><item><title><![CDATA[简单明了《a标签的href》跳转页面情况，看完秒懂！！！]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/117524039</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/117524039</guid><author>Sestid</author><pubDate>Thu, 03 Jun 2021 15:40:33 +0800</pubDate><description><![CDATA[概念

a标签的默认跳转链接行为是由href来实现的，同时设置href属性可以使a标签在hover状态下以手指指示的样式显示。但实际过程中发现对a标签的href属性的不同设置，可能会导致不同的行为反馈，故想要进行几种不同的设置情况总结一下。

1.a标签中设置href属性，没有赋任何值




&lt;a href&gt;&lt;/a&gt;


点击a标签会刷新页面，回到顶部。

2.a标签中设置href属性，赋值href="#"




&lt;a href='#'&gt;&lt;/a&gt;


..]]></description><category></category></item><item><title><![CDATA[萝卜青菜各有所爱------htm 与 html]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/117027186</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/117027186</guid><author>Sestid</author><pubDate>Wed, 19 May 2021 14:01:56 +0800</pubDate><description><![CDATA[htm 与 html 的区别

前者是超文本标记(Hypertext Markup)

后者是超文本标记语言(Hypertext Markup Language)

可以说 htm = html

同时，这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误（这是指打开而言，但是对于一个链接来说，如果它指向的是一个htm文件，而那个htm文件被更改为html文件，那么是找不到这个链接的）

那为什么出现两种文件格式呢？

htm 是来源于老的 8.3 文件格式，DOS 操作系统只能支持长度为三位的]]></description><category></category></item><item><title><![CDATA[js公共函数，自己在工作中接触到（遇到就及时更新）]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/115211244</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/115211244</guid><author>Sestid</author><pubDate>Thu, 25 Mar 2021 16:17:14 +0800</pubDate><description><![CDATA[数组按指定顺序排列


var objs = [
    {name: 'A', type: 'fly'},
    {name: 'B', type: 'blur'},
    {name: 'C', type: 'wipe'},
    {name: 'D', type: 'cube'},
    {name: 'B', type: 'zoom'},
    {name: 'C', type: 'cube'},
    {name: 'E', type: 'iris'},
    {name: 'F',]]></description><category></category></item><item><title><![CDATA[告诉你什么是图片懒加载！]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/114143127</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/114143127</guid><author>Sestid</author><pubDate>Fri, 26 Feb 2021 17:37:54 +0800</pubDate><description><![CDATA[什么是图片懒加载？


当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。



通俗一点：
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。ps：自定义属性可以取任何名字

]]></description><category></category></item><item><title><![CDATA[手写一个Redux，就能深入理解他的原理了]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113882479</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113882479</guid><author>Sestid</author><pubDate>Sat, 20 Feb 2021 14:16:15 +0800</pubDate><description><![CDATA[Redux可是一个大名鼎鼎的库，很多地方都在用，我也用了几年了，今天这篇文章就是自己来实现一个Redux，以便于深入理解他的原理。我们还是老套路，从基本的用法入手，然后自己实现一个Redux来替代源码的NPM包，但是功能保持不变。本文只会实现Redux的核心库，跟其他库的配合使用，比如React-Redux准备后面单独写一篇文章来讲。有时候我们过于关注使用，只记住了各种使用方式，反而忽略了他们的核心原理，但是如果我们想真正的提高技术，最好还是一个一个搞清楚，比如Redux和React-Redux看起来很像，]]></description><category></category></item><item><title><![CDATA[快读学习提高web性能4——AMP如何保证Next.js应用程序的牢靠性]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113753792</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113753792</guid><author>Sestid</author><pubDate>Mon, 08 Feb 2021 11:10:35 +0800</pubDate><description><![CDATA[AMP如何保证Next.js应用程序的牢靠性

在Next.js应用程序中了解支持AMP的好处和取舍

AMP是一个Web组件框架，可确保快速加载页面。Next.js具有对AMP的内置支持。

你会学什么？

本指南首先简要介绍AMP如何保证快速的页面加载，然后说明在Next.js应用程序中支持AMP的不同方法，然后帮助您确定最适合您的方法。

本指南的目标读者是决定使用Next.js但不确定是否支持AMP的Web开发人员。


本指南不是为决定使用AMP但不确定要使用哪种框架的Web开发人员编写的。但是，]]></description><category></category></item><item><title><![CDATA[快读学习提高web性能3——在Next.js中使用动态导入进行代码拆分]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113739765</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113739765</guid><author>Sestid</author><pubDate>Sun, 07 Feb 2021 13:47:24 +0800</pubDate><description><![CDATA[在Next.js中使用动态导入进行代码拆分

如何通过代码拆分和智能加载策略来加速Next.js应用程序。

基于路由和基于组件的代码分裂

默认情况下，Next.js将您的JavaScript分成每个路由的独立块。当用户加载您的应用程序时，Next.js仅发送初始路由所需的代码。当用户在应用程序中导航时，他们获取与其他路由关联的块。基于路由的代码拆分可最大程度地减少需要立即解析和编译的脚本的数量，从而缩短页面加载时间。

虽然基于路由的代码拆分是一个很好的默认设置，但是您可以通过在组件级别进行代码拆分来进]]></description><category></category></item><item><title><![CDATA[快读学习提高web性能2——Next.js中的路由预取]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113652255</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113652255</guid><author>Sestid</author><pubDate>Thu, 04 Feb 2021 16:20:19 +0800</pubDate><description><![CDATA[Next.js中的路由预取

Next.js如何通过路由预取以及如何对其进行自定义来加快导航速度。

你会学什么？

在本文中，您将学习Next.js中的路由如何工作，如何针对速度进行优化以及如何对其进行自定义以满足您的需求。

该&lt;Link&gt;组件

在Next.js中，您不需要手动设置路由。Next.js使用基于文件系统的路由，可让您仅在./pages/目录内部创建文件和文件夹：



要链接到不同的页面，请使用&lt;Link&gt;组件，类似于使用良好的旧&lt;a&gt;元素的方式：
.]]></description><category></category></item><item><title><![CDATA[快读学习提高web性能1——Next.js的默认性能]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113556496</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113556496</guid><author>Sestid</author><pubDate>Tue, 02 Feb 2021 14:56:45 +0800</pubDate><description><![CDATA[Next.js的默认性能

Next.js是一个自以为是的React框架，具有许多性能优化。该框架的主要思想是通过默认包含这些功能来确保应用程序启动并尽可能保持高性能。

简介将简要概述该框架提供的许多功能。本系列的其他指南将更详细地探讨这些功能。


Chrome正在与Next.js合作，以为希望构建快速的，服务器渲染的React应用程序的任何开发人员改善框架。最近添加了许多更新的优化，例如模块/无模块支持和改进的粒度分块策略。


你会学什么？

尽管默认情况下Next.js提供了许多性能优化，但是..]]></description><category></category></item><item><title><![CDATA[简单的代码提交，还能玩出这么多花样？]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113176826</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113176826</guid><author>Sestid</author><pubDate>Tue, 26 Jan 2021 11:41:37 +0800</pubDate><description><![CDATA[作为一个开发人员，每天必不可少要提交代码，但是你真的懂代码提交吗？

这篇文章带领大家熟悉一下常用的代码提交方式，大家可以根据自己所在公司的开发模式对号入座。

代码提交方式可以用一个专业术语描述：代码工作流。

在 SVN 时代大家会使用集中式工作流，所有人都往一个主库分支合入代码；随着技术的演进，以 Git 为代表的分布式代码管理工具横空出世，在 Git 的基础上又逐渐出现了多种代码管理工作流：功能分支工作流，Gitflow 工作流，Forking 工作流。

搬好小板凳，下面一一为大家讲解。



.]]></description><category></category></item><item><title><![CDATA[开发常用到的字符串截取方法，细节总会容易忘！看一遍就懂了]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/113109303</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/113109303</guid><author>Sestid</author><pubDate>Mon, 25 Jan 2021 14:10:15 +0800</pubDate><description><![CDATA[萝卜青菜各有所爱 ------ slice()、substring()、substr()。

他们都有截取字符串的作用，接下来是他们之间的区别：

一、substring()

substring()方法返回一个索引和另一个索引之间的字符串，语法如下：


str.substring(indexStart, [indexEnd])


下面有六点需要注意：


substring()从提取的字符indexStart可达但不包括 indexEnd
	如果indexStart 等于indexEnd，substr]]></description><category></category></item><item><title><![CDATA[为什么抖音快手这么吸引你?来看看什么是Feed流吧！]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/112618853</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/112618853</guid><author>Sestid</author><pubDate>Thu, 14 Jan 2021 17:05:00 +0800</pubDate><description><![CDATA[简介：Feed流是一个目前非常常见的功能，在众多产品中都有展现，比如微博，朋友圈，消息广场，通知，IM等。通过Feed流可以把动态实时的传播给订阅者，是用户获取信息流的一种有效方式。在大数据时代，如何打造一个千万级规模的Feed流系统仍然是一个挑战。本文中会介绍如何设计一个千万量级的Feed流系统的架构。

在互联网领域，尤其现在的移动互联网时代，Feed流产品是非常常见的，比如我们每天都会用到的朋友圈，微博，就是一种非常典型的Feed流产品，还有图片分享网站Pinterest，花瓣网等又是另一种形式的F.]]></description><category></category></item><item><title><![CDATA[圣诞节马上到了。H5+CSS3+JS制作圣诞帽头像源码送给你们。。。]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/111557351</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/111557351</guid><author>Sestid</author><pubDate>Tue, 22 Dec 2020 15:37:33 +0800</pubDate><description><![CDATA[先给大家看下页面效果

------这张图片源码到手后大家可以随便换的！！！





废话不多说，直接上源码：

这里是部分代码！！！



&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="cache-control" content="no-cache" /&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf.]]></description><category></category></item><item><title><![CDATA[超级全！js常用各种正则表达式]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/111320058</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/111320058</guid><author>Sestid</author><pubDate>Thu, 17 Dec 2020 17:18:57 +0800</pubDate><description><![CDATA[1.非负整数 /^\d+$/

2.正整数 /^[0-9][1-9][0-9]$/

3.非正整数 /^((-\d+)|(0+))$/

4.负整数 /^-[0-9][1-9][0-9]$/

5.整数 /^-?\d+$/

6.非负浮点数 /^\d+(.\d+)?$/

7.正浮点数 /^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$/

8.非正浮点数 /^((-\d+(.\d+)?)|(0+(.0+)?))$]]></description><category></category></item><item><title><![CDATA[赶快卸载！微软新公布了18个流氓浏览器插件！]]></title><link>https://blog.youkuaiyun.com/Sestid/article/details/110792223</link><guid>https://blog.youkuaiyun.com/Sestid/article/details/110792223</guid><author>Sestid</author><pubDate>Mon, 07 Dec 2020 10:06:38 +0800</pubDate><description><![CDATA[为了增强浏览器的功能，我们通常会在上面安装各种插件。



一些需要第三方软件才能实现的效果，通过插件都可以在浏览器内快速实现。



浏览器插件固然强大方便，但是也有一些弊端——近年来，大量恶意插件在Chrome插件商店浑水摸鱼，严重危害用户安全。







这些恶意插件往往伪装成正常的浏览器工具，被用户下载安装后，就能劫持用户电脑、植入恶意代码、钓鱼、窃取信息、挖矿、重定向到恶意网站等等。



这给Chrome开发团队带来不小的困扰，因为恶意插件屡禁不止，上架速度甚至比谷歌删除它们的速度...]]></description><category></category></item></channel></rss>