<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:media="http://search.yahoo.com/mrss/"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>前端技术 - 四号程序员</title>
	<atom:link href="https://www.coder4.com/archives/category/web/feed" rel="self" type="application/rss+xml" />
	<link>https://www.coder4.com</link>
	<description>Keep It Simple and Stupid</description>
	<lastBuildDate>Mon, 07 Jul 2025 02:13:30 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.3</generator>
	<item>
		<title>如何给项目配置prettier</title>
		<link>https://www.coder4.com/archives/8007</link>
					<comments>https://www.coder4.com/archives/8007#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Sat, 02 Dec 2023 15:42:40 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[prettier]]></category>
		<category><![CDATA[vscode]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=8007</guid>

					<description><![CDATA[1 安装 yarn add --dev --exact prettier 2 配置文件 node --eval "fs.writeFileSync('.prettierrc','{}\n')" .prettierignore # Ignore artifacts: build coverage 3 执行一次 一般用于第一次“清理” yarn prettier . --write 4 文件变更时自动格式化 这个方案和下面的5、6任选一种就行 “文件变更[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/8007/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Typescript小知识</title>
		<link>https://www.coder4.com/archives/7975</link>
					<comments>https://www.coder4.com/archives/7975#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Tue, 17 Oct 2023 06:46:05 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[typescript]]></category>
		<category><![CDATA[Utility Types]]></category>
		<category><![CDATA[小知识]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7975</guid>

					<description><![CDATA[1 Utility Types(工具类型) keyof 只抽属性名 interface exampleA { name:string; id:number; create:string; } type TypeA = keyof exampleA; // 其实就相当于 type TypeA = 'name'&#124;'id'&#124;'create' let b:TypeA = 'name'; b = 'id'; // b = 'end'; // Type '"end"[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7975/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>vscode如何折叠(隐藏).d.ts文件</title>
		<link>https://www.coder4.com/archives/7890</link>
					<comments>https://www.coder4.com/archives/7890#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Wed, 30 Aug 2023 11:03:16 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[.d.ts]]></category>
		<category><![CDATA[ts]]></category>
		<category><![CDATA[vscode]]></category>
		<category><![CDATA[折叠]]></category>
		<category><![CDATA[隐藏]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7890</guid>

					<description><![CDATA[1 配置VSCode 打开Settings，搜索 file nesting File Nesting: Enabled打开 File Nesting: Patterns里*.ts增加map和.d.ts配置，如下图 配置完成后，默认会把.d.ts、.js折叠到.ts下，如下图： 2 Explorer中默认折叠 配置搜索expand 更改为alwaysCollapse [......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7890/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>ts如何merge两个obj的数组(基于key)</title>
		<link>https://www.coder4.com/archives/7889</link>
					<comments>https://www.coder4.com/archives/7889#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Wed, 30 Aug 2023 07:20:55 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[ts]]></category>
		<category><![CDATA[合并数组]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7889</guid>

					<description><![CDATA[数据例子： const arr1 = [ { id: 1, name: 'John' }, { id: 2, name: 'Alice' }, { id: 3, name: 'Bob' } ]; const arr2 = [ { id: 2, age: 30 }, { id: 3, age: 25 }, { id: 4, age: 28 } ]; 代码： const mergedArray = arr1.map((item) =&#62; {[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7889/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>puppeteer如何做性能分析</title>
		<link>https://www.coder4.com/archives/7888</link>
					<comments>https://www.coder4.com/archives/7888#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Thu, 17 Aug 2023 01:18:44 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[计算机技术]]></category>
		<category><![CDATA[puppeteer]]></category>
		<category><![CDATA[tracing]]></category>
		<category><![CDATA[性能]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7888</guid>

					<description><![CDATA[毕竟也是Chrome goto前：awaitpage.tracing.start({ path:'trace.json' }); waitxx后：awaitpage.tracing.stop(); 生成的trace.json文件，用以下3种方式分析： Chrome DevTools timeline viewer trace cafe &#160;[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7888/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>小程序云开发使用axios，报错-504002问题</title>
		<link>https://www.coder4.com/archives/7866</link>
					<comments>https://www.coder4.com/archives/7866#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Wed, 10 May 2023 12:06:53 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[504002]]></category>
		<category><![CDATA[axios]]></category>
		<category><![CDATA[小程序云开发]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7866</guid>

					<description><![CDATA[本地没问题，部署函数到云端后提示："must use import to load es module"... 解法：直接降axios版本到0.27.2，就好了[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7866/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Ubuntu安装指定Node版本</title>
		<link>https://www.coder4.com/archives/7800</link>
					<comments>https://www.coder4.com/archives/7800#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Thu, 17 Nov 2022 02:00:25 +0000</pubDate>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[前端技术]]></category>
		<category><![CDATA[计算机技术]]></category>
		<category><![CDATA[nodejs]]></category>
		<category><![CDATA[安装]]></category>
		<category><![CDATA[版本]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7800</guid>

					<description><![CDATA[https://github.com/nodesource/distributions 可以参考上面的项目，哪个版本都能装 以Ubuntu安装18.X为例： curl -fsSL https://deb.nodesource.com/setup_18.x &#124; sudo -E bash - &#38;&#38;\ sudo apt-get install -y nodejs &#160;[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7800/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>如何在React组件中动态加载js脚本</title>
		<link>https://www.coder4.com/archives/7773</link>
					<comments>https://www.coder4.com/archives/7773#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Fri, 26 Aug 2022 10:45:57 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[React]]></category>
		<category><![CDATA[动态加载js脚本]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7773</guid>

					<description><![CDATA[网上找了很多方案，比如react-helmet等各种包，都不行。 从原理上，他们都是类似如下的原生方案： const script = document.createElement("script"); script.src = url; document.head.appendChild(script); 这种方案是存在问题的，script是异步加载的，不等加载完毕直接往下执行，是找不到对象的。 这里给出最终解法：在onload回调中再渲染。 interface Prop[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7773/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>使用AntDesign的MenuItem如何再集成React Router</title>
		<link>https://www.coder4.com/archives/7772</link>
					<comments>https://www.coder4.com/archives/7772#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Thu, 25 Aug 2022 10:52:52 +0000</pubDate>
				<category><![CDATA[Linux]]></category>
		<category><![CDATA[前端技术]]></category>
		<category><![CDATA[AntDesign]]></category>
		<category><![CDATA[MenuItem]]></category>
		<category><![CDATA[React Router]]></category>
		<category><![CDATA[useNavigate]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7772</guid>

					<description><![CDATA[新版AntD已经不能使用MenuItem了，而是需要传入数据，这样使用React Router会有点麻烦。 解决方案是给Menu做一个click事件，里面再使用useNavigate分发路由，如下： import { Breadcrumb, Layout, Menu } from 'antd'; import React, { Fragment } from 'react'; import { Routes, Route, useNavigate } from "[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7772/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>[转]单点认证协议有哪些</title>
		<link>https://www.coder4.com/archives/7736</link>
					<comments>https://www.coder4.com/archives/7736#respond</comments>
		
		<dc:creator><![CDATA[coder4]]></dc:creator>
		<pubDate>Thu, 02 Jun 2022 01:51:33 +0000</pubDate>
				<category><![CDATA[前端技术]]></category>
		<category><![CDATA[计算机技术]]></category>
		<category><![CDATA[协议]]></category>
		<category><![CDATA[单点认证]]></category>
		<guid isPermaLink="false">https://www.coder4.com/?p=7736</guid>

					<description><![CDATA[单点登录协议有哪些？CAS、OAuth、OIDC、SAML有何异同？[......] 继续阅读]]></description>
		
					<wfw:commentRss>https://www.coder4.com/archives/7736/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
