Posts
Posts
从输入URL到页面展示发生了什么
Oct 9, 2024 09:41 AM
本文详细介绍了从输入URL到页面展示的整个HTTP请求流程，包括请求的构建、缓存查找、TCP连接建立、HTTP请求发送、服务器处理请求及返回结果等九个阶段。还探讨了浏览器缓存的作用、TCP三次握手的必要性以及如何通过Cookie实现用户登录状态的管理，最后回答了一些常见问题，如站点加载速度快的原因和UDP与TCP的优缺点。
JavaScript
03.【个人网站】如何做网站自定义页面 URL 映射
Oct 16, 2024 03:51 AM
pageUrlOverrides 是一个配置对象，用于在 Notion 集成中定义自定义页面 URL 映射，以替换自动生成的 URL。它有助于 SEO 优化和用户体验。示例中展示了如何将 Notion 页面 ID 映射到更友好的自定义 URL，并提供了一个清理页面 URL 映射的函数 cleanPageUrlMap，确保映射的有效性。
Notion
Next.js
Website
02.【个人网站】如何在Next中集成Notion数据库
Oct 16, 2024 03:51 AM
在Next.js项目中集成Notion数据库的步骤包括获取Notion API密钥和数据库ID、安装Notion官方SDK、设置Notion客户端、获取数据库内容、部署与验证，以及使用封装的Notion API进行交互。通过这些步骤，可以有效地将Notion作为内容管理系统，并利用
react-notion-x组件渲染Notion页面，提升代码的可维护性。Notion
Next.js
Website
01.【个人网站】如何使用Notion作为数据库进行全栈开发
Oct 17, 2024 08:12 AM
使用 Notion 作为数据库进行全栈开发的步骤包括注册 Notion 账号、获取 Notion API Token、创建数据库页面并配置相应的列。文中详细介绍了如何创建新集成、共享数据库权限以及获取数据库ID，以便进行数据管理和展示。
Notion
Next.js
Website
Next基础知识点
Oct 23, 2024 11:06 AM
Next.js 是一个用于构建 React 应用的框架，它提供了服务端渲染(SSR)和静态网站生成(SSG)的功能，能够提升页面加载速度和 SEO 效果。通过自动化路由系统、数据获取策略（如 getStaticProps 和 getInitialProps）以及增量静态生成 (ISR)，Next.js 能够灵活地生成静态页面或根据需求进行服务器端渲染。它非常适合用于内容不频繁变化的博客、作品集、文档等静态网站，同时还能支持动态路由和嵌套路由。此外，Next.js 支持 API 路由，可以将后端功能集成到应用中。
Next.js
Next踩坑记
Oct 9, 2024 09:43 AM
实际开发中遇到的Next相关的bug，记录下来和大家分享
Next.js
06.【个人网站】使用Mailchimp做网站邮件订阅功能
Oct 16, 2024 03:50 AM
Mailchimp 是一个流行的电子邮件营销平台，提供多种功能，如受众管理、自动化和分析报告。它的免费计划适合小型企业，允许最多 500 个联系人和每月 1,000 封邮件。文中还详细介绍了如何通过 Mailchimp API 集成邮件订阅功能到 Next.js 项目中，包括创建账户、获取 API Key、编写订阅函数和创建 API 路由。Mailchimp 的强大功能和免费计划使其成为初学者的理想选择。
Website
Next.js
Mailchimp
05.【个人网站】基于i18n在Next项目中搭建国际化网站
Oct 16, 2024 03:50 AM
本文分享了如何在Next.js项目中使用i18n实现国际化网站，包括依赖安装、项目结构、配置文件、国际化文件的设置，以及组件的使用示例。此外，还提供了常见错误及其解决方案，确保服务器端和客户端的语言设置一致。
Website
Next.js
Notion踩坑记
Sep 8, 2024 05:52 AM
记录实际开发中遇到Notion的报错问题
Notion
04.【个人网站】如何使用 Vercel 快速部署个人网站 | 全流程指南
Oct 16, 2024 03:51 AM
Vercel 是一个专注于前端开发的平台，提供简单快速的静态网站和前端框架应用部署服务。其主要特点包括一键部署、自动化 CI/CD、全球 CDN、预览部署、自定义域名和无服务器函数等。适用于静态网站、单页应用、服务器端渲染应用及电子商务网站。部署流程包括注册、创建项目、导入 Git 仓库、配置项目和管理监控。Vercel 使开发者能够专注于代码，而无需担心部署和性能优化问题。
Website
Vercel
【面试精选】TypeScript 常见8道面试题
Oct 14, 2024 04:03 AM
本文详细介绍了TypeScript的优势、与JavaScript的主要区别、基本数据类型、泛型、unknown与any的区别、readonly修饰符与const关键字的区别、装饰器的使用及其类型，以及interface与type的区别。TypeScript通过静态类型检查、增强的代码编辑体验和更好的工具支持，提高了代码的可维护性和开发效率。
JavaScript
面试
10.【个人网站】Next.js 项目性能优化全攻略：从图片加载到 JavaScript 减少
Oct 17, 2024 02:58 AM
在现代网站开发中，优化图片和减少未使用的JavaScript对于提升网站性能至关重要。本文详细介绍了如何在Next.js项目中使用next/image组件优化图片资源，并通过动态导入、按需加载等技术减少未使用的JavaScript，进而提升网站加载速度和用户体验。我们还探讨了通过预先连接外部资源和启用缓存来加速加载第三方服务如Google Ads。
Website
Next.js
09.【个人网站】在 Next.js 中集成百度翻译：无需额外的 Node.js 服务器实现安全翻译功能
Oct 17, 2024 02:58 AM
将百度翻译功能集成到Next.js应用中，无需单独的Node.js环境。通过定义API路由、服务器端翻译逻辑和客户端集成，确保API密钥安全并实现便利的翻译功能。使用标准的Next.js命令即可运行应用，翻译功能完全集成，无需额外脚本。
Website
Next.js
Notion
在 Next.js 项目中结合 Webpack 实现高级功能：自定义配置详解
Oct 14, 2024 09:29 AM
在 Next.js 项目中，如何通过自定义 Webpack 配置实现高级功能？本篇文章详细介绍了如何添加自定义 loader 和插件、优化代码分割、处理 CSS 与 Sass、配置 SSR 和环境变量等内容。
Next.js
Webpack
Webpack基础知识分享
Oct 9, 2024 09:41 AM
无内容
Webpack
Webpack零基础小白学习路径分享
Oct 9, 2024 09:41 AM
学习Webpack的路径包括理解基础概念、动手搭建项目、深入理解加载器和插件、优化构建性能、源码阅读与调试、探索进阶功能、实践项目以及参与社区与开源项目。通过这些步骤，可以全面掌握Webpack的原理与应用。
Webpack
链表
Oct 9, 2024 09:41 AM
链表是一种由节点组成的数据结构，分为单向链表、双向链表和循环链表。其优点包括便于插入和删除、动态长度和有效利用内存，但随机访问效率低且需要额外空间。链表在前端开发中应用于实现DOM结构、异步队列、LRU缓存等。处理链表时需注意指针丢失、越界和内存泄露等问题，使用哨兵节点可以简化操作。经典链表题目包括反转链表、合并有序链表等。
LeetCode
【面试精选】JavaScript常见面试题
Oct 9, 2024 09:42 AM
本文总结了 JavaScript 常见面试题，包括数据类型、null 和 undefined 的区别、call、apply 和 bind 的用法、let、var 和 const 的区别、闭包、原型链、事件循环以及性能优化策略。重点强调了 JavaScript 的基本概念和性能提升方法，如减少 HTTP 请求、使用 CDN、资源压缩、延迟加载、缓存策略等。
JavaScript
面试
08.【个人网站】接入Google广告营收插件
Oct 16, 2024 03:50 AM
在 Next.js 项目中集成 Google AdSense 广告的步骤包括在
_document.js 文件中添加验证代码，创建广告组件并在页面中使用。需要注意广告展示的延迟、广告位的正确配置，以及在开发环境中禁用广告代码以避免展示广告。Website
07.【个人网站】如何在Next.js中提升SEO及配置站点地图：完整指南
Oct 16, 2024 03:50 AM
本指南详细介绍了如何在Next.js项目中使用next-sitemap插件配置站点地图，以提升SEO和加快Google搜索引擎收录。步骤包括安装依赖、配置next-sitemap、生成站点地图、部署和验证。还提供了如何在Google、Bing和百度等搜索引擎中提交站点地图的说明，以及如何查看站点地图的收录情况和SEO优势。
Website
Tailwind踩坑
Oct 9, 2024 09:41 AM
要修复Tailwind CSS中的“未知规则@tailwind”警告，首先安装Tailwind CSS IntelliSense插件，然后将CSS文件与Tailwind CSS关联。打开CSS文件，按Shift + P并搜索“更改语言模式”，输入“tailwindcss”并选择它，这样警告就会消失。
Tailwind CSS
函数式编程
Oct 9, 2024 09:41 AM
函数式编程强调不可变性、函数作为一等公民、无副作用和高阶函数等核心特点。通过示例展示了如何使用高阶函数和纯函数来简化代码，提升可读性和可维护性。柯里化和组合函数的概念被详细介绍，强调了它们的灵活性和复用性。最后，介绍了 JavaScript 中的 reduce() 方法及其用法，展示了如何通过高阶函数处理数组数据。
JavaScript
变量命名规范
Oct 9, 2024 09:41 AM
本文介绍了变量命名规范，包括文件资源命名、变量命名、函数命名、常量命名及函数注释的规则。文件名应使用小写字母和连词线，变量和函数采用小驼峰命名法，常量使用全大写和下划线分隔，函数注释需遵循特定格式。
JavaScript
如何保证登陆数据传输安全
Oct 9, 2024 09:41 AM
本文讨论了如何确保登录数据传输的安全性，涵盖了前端存储方式、Cookie的配置及使用、服务端Session管理、Token机制、JWT、Refresh Token以及单点登录(SSO)的实现。重点强调了Cookie的安全配置（如Secure和HttpOnly属性）以及加密技术在数据传输中的重要性，提供了具体的代码示例和加密解密过程。
JavaScript
ECMAScript
Oct 9, 2024 09:43 AM
本文介绍了ECMAScript中的Set、WeakSet、Map和WeakMap类型，包括它们的定义、属性、方法及应用。Set用于存储唯一值，支持操作如添加、删除和查找，且时间复杂度为O(1)。WeakSet仅存储对象并具有弱引用特性。Map允许使用任意类型的值作为键，提供了丰富的方法来操作键值对。WeakMap与Map类似，但键名是弱引用，适合存储临时数据，避免内存泄漏。
JavaScript