码表符号

面试时不懂应该猜答案吗?为什么?

近期在面试考一些常见逻辑测验题目而在与朋友对谈到这件事的过程中,发现一种观点是「时间到也宁愿留白也不要乱填」,以免被发现了仰赖运气不懂装懂又要解释。我很讶异自己当过多年的学生,却是第一次反思这项行为背后的动机与取舍。人的偏见不是那么轻松就能够改变的,但透过思考能更明白自己是否知行合一。

检测性能符号

使用 Edge Function 生成 OG 图,构建时间缩短 90%

随着博客文章逐渐增多,静态生成压力也随之上升,例来说在日常开发会需要近 10 分钟的时间,大多是生成图片占据大多时间,建构预览图的数量是:`(语言 x 文章数量)`。延续最大程度的静态渲染是合理的选择,而针对 OG 图片渲染可以包成 Serverless Function 在需要时呼叫。

錨点符号

关于 HTML 锚点标签 <a> 相关的 SEO 知识

了解 `<a>` 是网页资源相互连接、搜索引擎排序判断的关键,甚至与资安也有一定的关联,对于 SEO 与前端来说是必须了解的知识点之一。搜索引擎依赖 HTML 文件中的 `<a>` 标签了解页面之间的关联并进而评分,理解 `<a>` 能够更好地处理与标识页面与页面之间的关系。

旋转符号

n8n 几个初学最重要的概念

近期在尝试 n8n 时碰上了不少麻烦,但在问题解决后觉得其实也不是什么太大的问题但就是莫名的卡住流失了许多时间,我踩过的坑或许也是你踩过的坑。这篇文章适合像我一样没特别看文件直接跳进去玩的开发者,后续细读文件反省把问题都列出来。

箭頭融合符號

整合不同 Git 仓库在一起(符号链接、Git 子模块)

网页东东至今仍完全以本地为主,所有代码、字体、图片影片与文章内容都记录于 Git 当中,并通过 Git LFS 来管理大文件。这样的决定有好有坏,其中一个问题便是内容与代码的耦合高,任何一个想维护的人要把我撰写的几百篇文章连带抓下来 😅,随着项目成熟我决定要将两者分离。

旋转符号

n8n Human in the Loop 替 AI 流程建構反饋

近期在琢磨刚玩上手的 n8n 的各式功能,其中在制作 AI 流程时发现如果其中一个环节不如预期整个流程重来十分的耗费时间与金钱,这时候我们就可以添加上人类的反馈,重复的修改提示词直到满意为止。在制作文章研究生成 AI 时我也运用了相关功能来达成与 AI 沟通动态调整需求的目的。

文章上有箭頭符號

简单自架 n8n 回馈表单小试水深

近期在熟悉 n8n 流程自动化的工具,发现值得推荐给任何人(特别是软件工程师)n8n 算是一种 low-code / no-code 解决方案可以帮助任何人通过现有的整合来快速实践流程自动化的目的。这次教学通过简单的串接 Google 服务来展现它的灵活性和强大功能。

图表图示

使用 Mermaid 通过文字快速生成图表

近期工作顺代研究到使用 Mermaid 来快速生成图表,这是一个很方便的工具,可以快速生成各种图表,例如流程图、心智图、圆饼图……等,你能想到的图表基本都有支援。大致纪录一下选择这项技术的原因以及使用上的心得。 Mermaid 与 AI 结合完美的免去了复杂度,让我们能够更专注在内容上,而不是花太多时间在制作图表上。

简报符号

Slidev:基于网页的简报创作方案

近期工作研究到使用 Slidev 来呈现简报,一个基于 Vite + Vue3 的简报工具整合了大大小小的套件方便用网页创作简报,主要以 Markdown 来撰写内容,这样的方式让我们可以专注在内容上,而不用花太多时间在花俏的简报软体操作。

清单符号

使用 Details 与 Summary 制作原生手风琴 (含收合动画!)

手风琴是一种常见的网页 UI 模式,通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯,在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能,并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。

下载符号

使用 preload、prefetch、dns-prefetch、preconnect 最佳化资源加载顺序!

先前面试时面试官询问到我早期制作的一个 SPA 网站在换页后图片载入体验不太好的问题,当时我把脑袋能想的所有答案都提出来了😅,最终有答到一点边缘知识,但太少用所以回答的不是很确定,因此这次来补齐这方面浏览器提供的机制,主要介绍浏览器如何处理安排资源的加载。

人影符号

使用 Express.js Session 实作会员系统

依照先前的教学我们已经可以创建基本的CRUD 程式,但基于HTTP 是无状态的协议,如果单纯实作会员系统用户将会需要在每次操作登入会员相关的行为时重复验证,明显是糟糕的使用体验。一种解决方案是在请求时伺服器将会建立 Session。

星星符号

如何架构一个超赞的前端专案于 2025 年 (feat. Vue)

随着前端演进,我们时常需要依靠现成的框架轮子协助,而其中Vue 又是继React 外第二热门且成熟的选项,但很少有教学提到一个完整的专案该如何建构,以及有哪些模式可以遵循。这次来介绍一下如果从头开始我会怎么建构一个 Vue 专案,在 2025 年!

打开的书图示

Express.js 串接 MySQL 实作书本管理 App

先前系列提到使用 Express.js 简单的创造一个 CRUD App 并用 MVC 分层,这次流程差不多,目标是把后端接上本地的 MySQL 服务器并使用 MySQL2,一个专为 Node.js 应用设计的 MySQL 数据库连接工具。

更新符号

撰写自动化发布语义化版本 TypeScript NPM 套件

使用套件时总是会好奇一般管理套件开发的流程是如何?我通过 Matt Pocock 的 Blazing Fast Tips: Publishing to NPM 教学视频顺手实作了一次,并且把自己之前遇过的需求写成一个独立的 TS 套件公开发布:edit-element。