面试时不懂应该猜答案吗？为什么？
近期在面试考一些常见逻辑测验题目而在与朋友对谈到这件事的过程中，发现一种观点是「时间到也宁愿留白也不要乱填」，以免被发现了仰赖运气不懂装懂又要解释。我很讶异自己当过多年的学生，却是第一次反思这项行为背后的动机与取舍。人的偏见不是那么轻松就能够改变的，但透过思考能更明白自己是否知行合一。
近期在面试考一些常见逻辑测验题目而在与朋友对谈到这件事的过程中，发现一种观点是「时间到也宁愿留白也不要乱填」，以免被发现了仰赖运气不懂装懂又要解释。我很讶异自己当过多年的学生，却是第一次反思这项行为背后的动机与取舍。人的偏见不是那么轻松就能够改变的，但透过思考能更明白自己是否知行合一。
近期在尝试 n8n 时碰上了不少麻烦，但在问题解决后觉得其实也不是什么太大的问题但就是莫名的卡住流失了许多时间，我踩过的坑或许也是你踩过的坑。这篇文章适合像我一样没特别看文件直接跳进去玩的开发者，后续细读文件反省把问题都列出来。
网页东东至今仍完全以本地为主，所有代码、字体、图片影片与文章内容都记录于 Git 当中，并通过 Git LFS 来管理大文件。这样的决定有好有坏，其中一个问题便是内容与代码的耦合高，任何一个想维护的人要把我撰写的几百篇文章连带抓下来 😅，随着项目成熟我决定要将两者分离。
近期在琢磨刚玩上手的 n8n 的各式功能，其中在制作 AI 流程时发现如果其中一个环节不如预期整个流程重来十分的耗费时间与金钱，这时候我们就可以添加上人类的反馈，重复的修改提示词直到满意为止。在制作文章研究生成 AI 时我也运用了相关功能来达成与 AI 沟通动态调整需求的目的。
近期在熟悉 n8n 流程自动化的工具，发现值得推荐给任何人（特别是软件工程师）n8n 算是一种 low-code / no-code 解决方案可以帮助任何人通过现有的整合来快速实践流程自动化的目的。这次教学通过简单的串接 Google 服务来展现它的灵活性和强大功能。
近期工作顺代研究到使用 Mermaid 来快速生成图表，这是一个很方便的工具，可以快速生成各种图表，例如流程图、心智图、圆饼图……等，你能想到的图表基本都有支援。大致纪录一下选择这项技术的原因以及使用上的心得。 Mermaid 与 AI 结合完美的免去了复杂度，让我们能够更专注在内容上，而不是花太多时间在制作图表上。
手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能，并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。
随着前端演进，我们时常需要依靠现成的框架轮子协助，而其中Vue 又是继React 外第二热门且成熟的选项，但很少有教学提到一个完整的专案该如何建构，以及有哪些模式可以遵循。这次来介绍一下如果从头开始我会怎么建构一个 Vue 专案，在 2025 年！
TypeScript 存在一些不太直觉但背后却有合理因素的问题要留意，像是无论传入任何对象进 `Object.keys` 都仍会返回 `string[]` 型别是其中之一，本文探讨背后因素与提供不同方向的解套方法供不同情境使用。
CORS (Cross-Origin Resource Sharing) 跨来源资源共享，是一个机制用来决定网页是否能够存取其他来源的资源，能有效防止不同来源之间的不正当资源存取。透过 CORS，可以在保护用户资料的同时，允许合法的跨来源请求。
总结是无论如何都不轻易相信用户输入即能最大程度防范 XSS。最近在碰一些资安的东东，发现自己对这一块知识都比较薄弱，身为前端工程师资安通常并不是首要关注的职责，但一旦有漏洞保证后果不堪设想，于是近期来补足一下这方面的知识。现代齐全的工具与文件帮助下意外执行用户提供的恶意脚本的概率已经大幅降低。
我之所以调查这个主题，是因为目前所在的团队大量使用这种模式，但 Vite 在开发中不进行 Tree Shake，导致每次开发环境都有大量无用代码被打包，严重影响开发体验。因此研究一下这种方法的理念与优缺点以架构更好的项目。
近期我对自己看待撰写程式这件事有更高的期许，除了最基本的效能、阅读性、扩充性……之外还有一个非常重要的领域就是：测试。不过程式好端端的能动就代表测试没有必要了吗？在我刚工作时实际上做了一段时间的自动化 QA 工程一段时间，不过那时候的我其实也并不明白写测试的原因，就是有程式就拿来自动化测试，并没有想太多。
发现身为初阶打工人其实通常只是看见问题并拼命解决它，但换个角度思考：“如果现在手上项目烧起来，主管定个超乎预期的时程但你也没有自己一套说法，要如何交代？”，最贴近实作的人其实是最能开出真实预估的人。参考：The work is never just “the work” - Dave Stewart 文章。
近期执行的专案在进行翻新包含了整体的视觉设计，因此前端也面临要如何同步管理产品视觉的问题。先说痛点，先前专案并没有具体的规范应该如何定义 UI 当中的数值，导致魔法数字（没有规范与描述的值）流窜于整个产品当中，造成了非常大的的困扰。我会解释得尽量具体明白如果要重新设计一款数字产品会怎么管理其中的数值。
先前提到「添加深色模式要考虑的代价」无可避免的会增加比预想中还要多的成本，但如果能在一开始用正确的方式制作网页风格，那么可以有效的避免掉许多问题。如果你希望制作不同风格的数字产品都可以参考本篇文章，用更省力的方式定义风格。
近期将公司的新 Nx Monorepo 架构专案透过 GitHub Action 添加了自动更新套件的功能，会想实践该功能是因为旧专案疏于更新导致吃了非常多的苦头，希望在新架构下可以有更轻松且自动化的方式去执行更新。其中 Nx 有专属的 nx migrate 指令帮助我们达成这件事，并且背后有些非常有趣的机制与理念。
近期维护的项目希望引入深色模式，但分析后我认为实现这个需求并不是一个划算的选择，本文将讨论原因。如今许多网站和应用程序默认提供深色模式，这是一种将背景色转为深色，前景色转为浅色的设计手段，具备各种功能性和情感上的特点，例如：节省设备电力、降低眼睛疲劳……
近期在替项目做大型重构，其中就有将技术转换为 TypeScript 与 Monorepo，途中一些还没有头绪如何解决的类型问题，就会使用 `@ts-ignore` 或 `@ts-expect-error` 来先行忽略，但这两者的使用时机有所不同，这篇文章就来谈谈这两者的差异。
我是一个物欲非常低的人，日常东西就是用到坏才换新，直到某天常用的薄膜键盘坏了才开始寻找新的键盘。在挑选新键盘的过程中让我想到选择键盘的一些故事促使写下这篇文章。作为软件工程师不外乎每天接触到的硬件生产力工具大概就是：键盘、鼠标、电脑、屏幕、椅子、笔电、大水杯（喝水非常重要），其中键盘绝对是情感最深厚的一一个。
近期重写的专案中有许多状态需要管理，会需要统一管理资料于专案中，为了避免写死代码（Hard Coded）并且让接手的人都能轻易地了解资料型态，这里记录一些过程中的发现。结论是应该使用 as const 来达成列举资料管理，因为它更加直觉没有什么认知负担，并且更加灵活。
为什么如今网站大多数都长得差不多，就连体验也差不多？我们时常会联想设计网页是一门富含创意创新的工作，但对使用者来说创新并不全然是一件好事。本篇文章希望引导读者了解网页发展的经历并推导出为什么「无聊的使用者介面是好的使用者体验」这个结论。
身为前端工程近期工作的感悟是很多时候开发问题还是陷于界面的外观、行为或互动层面上，并不是说花时间制作这些层面的事情就很逊，它们实际需要依靠经验丰富的开发者通过多方面的研究与考量才能打造合理的架构，例如有许多要留意的事：性能、适用性、可维护性、可测试性、搜索引擎优化、跨平台兼容性、多语言……
AI 并不会离开我们的生活，并且只会越来越普及，这也意味着我们的生活将受到影响。什么事情是人类能 AI 不能的？未来的工作会是怎么样？人们能做什么来保证未来？什么事情是人类能 AI 不能的？未来的工作会是怎么样？人们能做什么来保证未来？思考以上问题。
不到 3 步骤让你的网站拥有以 WebAssembly 高效驱动的客制化搜寻功能。静态网站像是部落格、文件、个人网站、公司网站……等这类阅读体验为主的网站通常都有搜寻内容的需求，恰逢 Pagefind 1.0 的推出我把原先自制的fuse.js 搜寻功能换成Pagefind，分享如何在任何静态网站上加入搜寻功能。
近期工作接触使用 Shadcn for Vue 来打造网页 UI，这是一款基于 Tailwind 可弹性客制化的组件组合，让我们可以快速建立出符合需求的网页界面。本文将介绍现有样式库的问题及 Shadcn UI 的特色，以及为什么在前端圈这么火爆。
JavaScript 有 try...catch 语法用于捕捉程序中的错误情境，在需要时使用 throw 语法来抛出「任何错误」，通常建议会抛出 JS 默认的错误对象，但在 TypeScript 要怎么做才能确保抛出的错误的类型？
TDD 测试驱动开发是一种开发方法论，先写测试再实践代码，应该如何撰写测试？或许听过 TDD 但不清楚与单纯写测试差别在哪？这篇文章详细描述 TDD 的优势与实际操作范例快速了解 TDD 为什么这么赞。TDD 目的便是打造一个工作流程能够验证代码的行为，让开发者能够更有信心的重构、更动代码。
观察并厘清什么样的「品格」是一位软件工程师可以具备的，以及普遍工作环境和社群带给我的感受，总结出几点可以解决问题的模式，在日常也作为我自己参考与努力的依据。有耐心、能沟通、跳脱框架是我理想中软件工程师可以具备的美德，不知道你是不是也认同这样的想法？
JSON-LD 是一种夹带更多资料以描述网页内容的方式之一。通常不太留意它，直到真正实施后也不知道有无用处？该如何检验搜索引擎是否正确抓到这笔资料？这篇文章分享我的经验以及让你实际验证 JSON-LD 是否和规范且被正确解读。
设计令牌（Design Tokens）或令牌是一种管理设计属性与数值的方式，用于建构 UI 最细小的元素，适当的使用设计令牌可以让设计系统更加弹性与可扩展，不论是任何职位，只要与设计系统相关的人士都应当了解设计令牌的概念。
近期公司购买了设计相关的课程，期望透过研究改良目前的设计来提升与开发合作的效率，恰好我之前的工作领域也与设计相关，而且我很早就想跨领域多写与网页相关的文章！因此打算特地开一系列文章记录课程笔记以及我自己补充的想法与资源。
NPM 是 JavaScript 开发环境中必不可少的软件包管理器。本文将以导演一部电影为比喻，解释 NPM 的运作方式。编程就像拍摄一部电影，可以亲自设计和管理演员，也可以雇佣他人设计好的演员。NPM 就像一个平台，可以在上面找到许多现成的演员，这些演员就是软件包（Package）。
通常写多个 h1 都会被教育这是错误的做法，但实际上真的是如此吗？我深入的研究各方面说法。整理 Google 与 MDN 文件的说法，一个页面有很多个「重磅级标题」的情况非常少见的，如果这么写在阅读结构上是合理的话，使用多个 <h1> 在单个页面之中是完全没问题的，此外有许多更值得探讨的细节。
useEffect 是 react 中一个相当基础常见的 Hook，要真正学会它就必须要对 React 如何运作有基础的认识才行，它是 React 提供的一个 Hook 用于操作副作用，举例来说：送出请求、操纵 DOM、设定监听器……等都是副作用。
记录一下我是如何制作自己的前端作品集的，随着从大学毕业，很快也要步入社会寻找正职工作，因此急需一个可以展示自己作品的平台，既然身为前端开发者，何不动手制作一个作品集网站呢？制作自己的作品集是必经历的体验，也是一趟很有趣的体验。
Astro 作为一个静态内容为主的生产器非常适合用于打造静态网页，这次我将用自己的作品集为案例教你打造一个实际的静态网站，通过以自己的作品集网站为范例，借助这个机会来展示这个框架好用与强大的地方。只需要有基础的 HTML 与 CSS 知识就能跟着这篇文章创造一个属于自己的作品集。
总结在六角学院担任线上助教一年来总结的三大心得以及给同学助教老师们的话。从去年七月至今已在六角学院担任近一整年远端助教，准备在下个月毕业、服兵役并开始下段旅程，打算藉由这篇文章谈谈这段时间的心路历程与未来的规划。期待六角学院未来的发展，培养更多新一代的工程师。
「什么是 Ajax 以及为什么不是 Ajaj？」，这个问题一直在脑海中停留许久，有人和我一样思考 Ajaj 之类的称呼的可能性吗？经过一些调查了解背后的原因并写成文章，关于 Ajax 的历史以及名称的由来可以参考看看我的发现。
「为什么想经营网站？」在制作之前要好好想清楚这件事，制作网站与经营网站是完全不同的技能。举我自己的部落格「网页东东」为例，直到近期才比较有「写部落格」这件事究竟是什么的体会，透过探讨分析我自己经营网站内外动力，希望能帮助你重新思考自己经营网站的真正的目标与动机。
Hoppscotch 是一个线上工具，可以让你在浏览器上迅捷的测试后端提供的 API。很常遇到到后端的文件就直接上手写程式，导致在写程式的时候常常疏漏许多问题，像是请求方式错误、少夹带参数、网址错误、资料不存在……等，因此我都会建议先熟悉怎么用现成的工具来测试 API，使用图形化的介面可以更直观的管理API 们。
React Hook 是 React 16.8 版本新增的功能，可以让你在不写 class 的情况下使用 React 的功能。 「要如何区分 Hook 与方法的差别？什么情况下在 React 里称为 Hook？什么时候才只能称为方法？」于是写这篇文章来解释清楚。
OBS 是Open Broadcaster Software 的缩写，是一个在开源社群非常热门的录影软体，由于时常有录制影片的需求，于决定把设定OBS 的过程记录下来，让有需要的人可以依照简单的图示快速上手，从安装到实际录影。
CodePen 是一个线上的模拟开发环境，功能很简单，就是一个网页可以在上面写HTML、CSS、JavaScript，并且可以直接在网页上看到结果，而且还直接分享连结给别人看，对初学者来说介面友好基本没有上手难度，我是非常推荐的。
写程序久了会发现编写干净的可被维护的程序是一件相当困难的事情，其中一个造成维护困难的原因是因为「函数除外并返回结果除了过程中产生变化对其他的程序产生影响」，换句话说问题就是「不需要的结果，让程序变得捉摸不定理解难以」，应该纯粹了解函数的定义以及如何使用，以便更进一步编写干净的代码。
作为前端必学如何操控网页就需要学习 DOM，用一篇文章快速教你如何程序化的更动网页，一起来学会如何存取、编辑与监听 DOM，还有综合懒人包！如果对 Javascript 对象有一定的了解，代表你已经差不多会操纵 DOM 了，如果还不熟悉，建议可以先了解后再学习 DOM API。
CSS 预处理器已经深刻地改变了前端开发的方式，成为一项必备工具。但随着时间推移，新标准不断推出，我们还需要它们吗？在前端开发领域，经常会听到一些预处理器 (Pre-processor)，比如 Sass、Less、Stylus，这些工具是什么？为什么会存在？本文将主要探讨以下几个重点（附带示例）。
BEM 是一种管理 CSS 撰写方式的一种规范。撰写小型的网站时通常不需要特别考虑到未来样式的命名与权级的规划，但随着网站的复杂度增长就必须需要一套可预测与可扩充的方式，BEM CSS 由于概念简洁好懂，成效显著，并且有着相对长远的历史被测试与应用过，很适合作为初学者第一套管理 CSS 的办法。
我们每天都会囤积大量的文件、笔记、素材、累积下来就像乱糟糟的房间一样需要整理，如果你也同样在困扰这样的问题，这篇文章是为你准备的。本次文章想分享我们团队是如何建立一个系统应对基本的档案分工与备份的流程。好的档案管理是可以被追溯、被规范的，这样才好合作，好在未来被回顾。
字体是版面的灵魂，好的字体能够更好地表达文词间的情绪与情境！本篇文章收集了实用且来源可靠、授权清楚的字体网站并且是我平时设计时会考虑参考的网素材网站，像是：Google Fonts、FontShare……在使用时请务必注意授权范围限制。