呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#优质博文 #前端
1. 宣布推出 TypeScript 5.8 —— 经过四个月的发展，TypeScript 5.8 以 Node 为重点。您现在可以在 nodenext 模块中对 ES 模块使用 require() ，对于希望继续以 Node 18 为目标的开发人员，有一个新的 node18 模块，最值得注意的是，现在有一个 --erasableSyntaxOnly 选项来确保不能使用仅限 TypeScript 的运行时语义（如果您使用 Node 的类型剥离功能直接运行 TypeScript 代码，则这是理想的选择） #typescript #node （机翻）
2. 使用 Playwright 进行动态网页数据抓取
3. 具有现代依赖项的 Electron 应用程序样板 —— 一个基本的模板应用程序，使用 React 19、Tailwind CSS 4、shadcn/ui、Electron Vite、Biome，并包括 GitHub Actions 发布工作流程。 #template #tailwind #shadcn
via Node Weekly 568
1. 宣布推出 TypeScript 5.8 —— 经过四个月的发展，TypeScript 5.8 以 Node 为重点。您现在可以在 nodenext 模块中对 ES 模块使用 require() ，对于希望继续以 Node 18 为目标的开发人员，有一个新的 node18 模块，最值得注意的是，现在有一个 --erasableSyntaxOnly 选项来确保不能使用仅限 TypeScript 的运行时语义（如果您使用 Node 的类型剥离功能直接运行 TypeScript 代码，则这是理想的选择） #typescript #node （机翻）
2. 使用 Playwright 进行动态网页数据抓取
本文通过 YouTube 案例，介绍如何利用 Playwright 工具解决动态网页（依赖 JavaScript）的数据抓取问题。
文章首先指出传统基于 Cheerio 的静态网页抓取工具无法处理动态渲染内容的问题，提出使用 Playwright 的浏览器自动化方案。 文章包含详细的代码片段和配图说明，重点展示了 Playwright 的 Locators API 和浏览器上下文操作能力，最终实现动态加载视频数据的结构化抓取。 #WebScraping #javascript #网页抓取 #教程
3. 具有现代依赖项的 Electron 应用程序样板 —— 一个基本的模板应用程序，使用 React 19、Tailwind CSS 4、shadcn/ui、Electron Vite、Biome，并包括 GitHub Actions 发布工作流程。 #template #tailwind #shadcn
via Node Weekly 568
Microsoft News
Announcing TypeScript 5.8
Today we’re excited to announce the release of TypeScript 5.8! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by adding syntax for types. Writing types in our code allows us to explain intent and have other tools…
#开源 #profile #template
这个好诶，可以作为灵感参考。
developer-portfolio-v2 是一个基于 Nuxt.js 3.0 构建的开源开发者个人主页模板，可托管在 Netlify 。该项目提供了一种易于配置的方式来展示个人信息、项目和联系方式，灵感来源于代码编辑器，并包含主页上的贪吃蛇游戏，该项目采用 MIT 许可，可自由 Fork 和修改，适合开发者或设计师快速搭建个人作品集网站。
https://developer-portfolio-v2.netlify.app/
这个好诶，可以作为灵感参考。
developer-portfolio-v2 是一个基于 Nuxt.js 3.0 构建的开源开发者个人主页模板，可托管在 Netlify 。该项目提供了一种易于配置的方式来展示个人信息、项目和联系方式，灵感来源于代码编辑器，并包含主页上的贪吃蛇游戏，该项目采用 MIT 许可，可自由 Fork 和修改，适合开发者或设计师快速搭建个人作品集网站。
https://developer-portfolio-v2.netlify.app/
GitHub
GitHub - alexdeploy/developer-portfolio-v2: Awesome porfolio design for developers or designers, with easy configuration. Inspired…
Awesome porfolio design for developers or designers, with easy configuration. Inspired by a code editor and with a snake game on homepage. - alexdeploy/developer-portfolio-v2
#优质博文 #工程化 #前端 #template
Mark 一下给某初学萌新看（）
Setting up a ESLint, Prettier, Husky and lint-staged Integration with TypeScript in Next.js 13 | 14
AI 摘要：这篇文章详细介绍了如何在 Next.js 项目中集成 ESLint、Prettier、Husky 和 lint-staged，确保代码质量和一致性。
主要步骤：
1. 创建 Next.js 项目：使用
2. 安装依赖：安装 ESLint、Prettier、Husky、lint-staged 等开发依赖。
3. 配置 Prettier：通过
4. 配置 ESLint：通过
5. 配置 Husky：使用 Husky 在提交前运行 `lint-staged`，确保代码在提交前经过格式化和检查。
6. 配置 lint-staged：通过
7. 更新 package.json：添加脚本命令以便执行 lint、prettier 和 Husky 初始化。
8. 测试配置：通过运行
此设置帮助开发者在提交代码时自动执行格式化和 lint 检查，从而保证代码质量并减少潜在问题。
Mark 一下给某初学萌新看（）
Setting up a ESLint, Prettier, Husky and lint-staged Integration with TypeScript in Next.js 13 | 14
AI 摘要：这篇文章详细介绍了如何在 Next.js 项目中集成 ESLint、Prettier、Husky 和 lint-staged，确保代码质量和一致性。
主要步骤：
1. 创建 Next.js 项目：使用
npx create-next-app 创建 Next.js 项目并选择 TypeScript。2. 安装依赖：安装 ESLint、Prettier、Husky、lint-staged 等开发依赖。
3. 配置 Prettier：通过
.prettierrc 文件设置 Prettier 格式化规则，使用 prettier-plugin-tailwindcss 插件进行 Tailwind CSS 格式化。4. 配置 ESLint：通过
.eslintrc.js 文件设置 ESLint 规则，扩展 Next.js、TypeScript 和 React 规则，确保代码的一致性和可维护性。5. 配置 Husky：使用 Husky 在提交前运行 `lint-staged`，确保代码在提交前经过格式化和检查。
6. 配置 lint-staged：通过
.lintstagedrc 文件设置 lint-staged 规则，限定仅对已暂存的文件进行格式化和检查。7. 更新 package.json：添加脚本命令以便执行 lint、prettier 和 Husky 初始化。
8. 测试配置：通过运行
npm run lint 等命令检查设置是否生效。此设置帮助开发者在提交代码时自动执行格式化和 lint 检查，从而保证代码质量并减少潜在问题。
