简单自架 n8n 回馈表单小试水深
近期在熟悉 n8n 流程自动化的工具，发现值得推荐给任何人（特别是软件工程师）n8n 算是一种 low-code / no-code 解决方案可以帮助任何人通过现有的整合来快速实践流程自动化的目的。这次教学通过简单的串接 Google 服务来展现它的灵活性和强大功能。
近期在熟悉 n8n 流程自动化的工具，发现值得推荐给任何人（特别是软件工程师）n8n 算是一种 low-code / no-code 解决方案可以帮助任何人通过现有的整合来快速实践流程自动化的目的。这次教学通过简单的串接 Google 服务来展现它的灵活性和强大功能。
近期工作顺代研究到使用 Mermaid 来快速生成图表，这是一个很方便的工具，可以快速生成各种图表，例如流程图、心智图、圆饼图……等，你能想到的图表基本都有支援。大致纪录一下选择这项技术的原因以及使用上的心得。 Mermaid 与 AI 结合完美的免去了复杂度，让我们能够更专注在内容上，而不是花太多时间在制作图表上。
手风琴是一种常见的网页 UI 模式，通常是一系列垂直堆叠的标题可以用于展开收合显示不同资讯，在 HTML 当中有项新颖的语法 <details> 和 <summary> 可帮助快速实现类似的功能，并且配合上最新的 interpolate-size 和 transition-behavior 制作滑顺的展开闭合动画。
先前面试时面试官询问到我早期制作的一个 SPA 网站在换页后图片载入体验不太好的问题，当时我把脑袋能想的所有答案都提出来了😅，最终有答到一点边缘知识，但太少用所以回答的不是很确定，因此这次来补齐这方面浏览器提供的机制，主要介绍浏览器如何处理安排资源的加载。
依照先前的教学我们已经可以创建基本的CRUD 程式，但基于HTTP 是无状态的协议，如果单纯实作会员系统用户将会需要在每次操作登入会员相关的行为时重复验证，明显是糟糕的使用体验。一种解决方案是在请求时伺服器将会建立 Session。
随着前端演进，我们时常需要依靠现成的框架轮子协助，而其中Vue 又是继React 外第二热门且成熟的选项，但很少有教学提到一个完整的专案该如何建构，以及有哪些模式可以遵循。这次来介绍一下如果从头开始我会怎么建构一个 Vue 专案，在 2025 年！
先前系列提到使用 Express.js 简单的创造一个 CRUD App 并用 MVC 分层，这次流程差不多，目标是把后端接上本地的 MySQL 服务器并使用 MySQL2，一个专为 Node.js 应用设计的 MySQL 数据库连接工具。
使用套件时总是会好奇一般管理套件开发的流程是如何？我通过 Matt Pocock 的 Blazing Fast Tips: Publishing to NPM 教学视频顺手实作了一次，并且把自己之前遇过的需求写成一个独立的 TS 套件公开发布：edit-element。
Express 提供便捷优雅的API 让我们接收请求经过处理后回应，但会发现随着规模庞大起来路径、商业逻辑、资料……等代码都塞在一个 app.js 实在不是一个好做法，于是这篇文章介绍使用MVC 架构替代码进行用途上的切割，以方便维护。
近期正在学习后端相关领域，与前端最贴近的框架绝对就是 Express.js 了，很适合目标为全端的工程师。这次实作并不会牵扯到数据库相关的部分，侷限在使用 Express.js 打造一个简单的 in-memory 待办事项后端服务器。
TypeScript 存在一些不太直觉但背后却有合理因素的问题要留意，像是无论传入任何对象进 `Object.keys` 都仍会返回 `string[]` 型别是其中之一，本文探讨背后因素与提供不同方向的解套方法供不同情境使用。
「如何编写 GitHub 个人档案」这个问题其实就像是「开发者怎么制作自己的名片」，毕竟对你感兴趣的人来说 GitHub 个人档案就是第一印象，所以可以斟酌放些「你热爱参与的专案或展示专业」基本不会错。像我有热情持续经营展现技术博客那就放上最大篇幅去介绍，把作品、博客或履历放上。
之前碰到一道有趣的前端 UI 题，发现需要对于前端有较为全面的认知才有办法解出来，并且也可以针对感兴趣的领域延伸提出更更多问题，于是特地纪录一下我的思考解题过程。身为一名前端工程师，你会怎么实作上图的电影院座位选位系统？
实际网页很少遇到特殊的视觉会需要动用到 CSS Grid 的情况，而我近期在制作一些比较特殊视觉的网页布局，事后感觉特别适合作为一个 CSS Grid 的启发教材，于是写下了本篇文章帮助透过真实世界案例更深刻了解 CSS Grid。
CORS (Cross-Origin Resource Sharing) 跨来源资源共享，是一个机制用来决定网页是否能够存取其他来源的资源，能有效防止不同来源之间的不正当资源存取。透过 CORS，可以在保护用户资料的同时，允许合法的跨来源请求。
这次我透过一步一步拆解解题路径来描述如何解题。从基本解到分离资料与逻辑、保持 immutable 以及边缘案例还有文件编写都有涵盖。打印出 1 到 100 的数字、假如数字是 3 的倍数，则打印 Fizz、假如数字是 5 的倍数，则打印 Buzz、假如数字是 3 和 5 的公倍数，则打印 FizzBuzz。
总结是无论如何都不轻易相信用户输入即能最大程度防范 XSS。最近在碰一些资安的东东，发现自己对这一块知识都比较薄弱，身为前端工程师资安通常并不是首要关注的职责，但一旦有漏洞保证后果不堪设想，于是近期来补足一下这方面的知识。现代齐全的工具与文件帮助下意外执行用户提供的恶意脚本的概率已经大幅降低。
我之所以调查这个主题，是因为目前所在的团队大量使用这种模式，但 Vite 在开发中不进行 Tree Shake，导致每次开发环境都有大量无用代码被打包，严重影响开发体验。因此研究一下这种方法的理念与优缺点以架构更好的项目。
前面写了一篇文章关于 ES6 JavaScript 当中的内建数据结构： Map，这次来谈谈 WeakMap，它又与 Map 有什么不同呢？会发现 WeakMap 相较 `Map` 少了非常多可用的方法，这是因为它们的根本处理数据的方式不同，Map 是强引用，而 WeakMap 是弱引用。
从很早以前就大致知道浏览器开始推出 Web Components 相关 API 与标准，但一直没有机会在实战中使用这项技术。想撰写这篇文章记录是因为随着时间推移发现 Web Components 的应用范围越来越广，因此趁着有空也来了解一下相关知识，并且分析它与现有的解决方案有什么不同。
近期我对自己看待撰写程式这件事有更高的期许，除了最基本的效能、阅读性、扩充性……之外还有一个非常重要的领域就是：测试。不过程式好端端的能动就代表测试没有必要了吗？在我刚工作时实际上做了一段时间的自动化 QA 工程一段时间，不过那时候的我其实也并不明白写测试的原因，就是有程式就拿来自动化测试，并没有想太多。
JavaScript ES6 中有一个用法与对象近似的数据结构我一直不是很清楚用途。—— Map，这篇文章将比较常见的对象与 Map，以辨别 Map 的特性与使用时机。总的来说可以把 Map 当作是用来频繁读写的对象，它具备更好的性能、更明确的语法。
发现身为初阶打工人其实通常只是看见问题并拼命解决它，但换个角度思考：“如果现在手上项目烧起来，主管定个超乎预期的时程但你也没有自己一套说法，要如何交代？”，最贴近实作的人其实是最能开出真实预估的人。参考：The work is never just “the work” - Dave Stewart 文章。
近期执行的专案在进行翻新包含了整体的视觉设计，因此前端也面临要如何同步管理产品视觉的问题。先说痛点，先前专案并没有具体的规范应该如何定义 UI 当中的数值，导致魔法数字（没有规范与描述的值）流窜于整个产品当中，造成了非常大的的困扰。我会解释得尽量具体明白如果要重新设计一款数字产品会怎么管理其中的数值。
为了确保页面内容保持在合理的范围内，很多时候会需要在外层使用固定的尺寸作为网页内容的容器。而近期在翻新的页面有一些独特的布局样式，透过 CSS Grid 来更灵活的让容器内容也能跳脱安排在各处，主要参考 Kevin Powell 的做法。
先前提到「添加深色模式要考虑的代价」无可避免的会增加比预想中还要多的成本，但如果能在一开始用正确的方式制作网页风格，那么可以有效的避免掉许多问题。如果你希望制作不同风格的数字产品都可以参考本篇文章，用更省力的方式定义风格。
经营这个部落格时我逐渐养成了「不管再忙也要推新进度上来」的习惯，不管是写文章、小短文、找题材、修复BUG 推新功能……总之每天都要尽量以让部落格更好这个方向努力进而强制自己去精炼思考。这种生产力非线性与专注在目标大方向的概念帮助我建立了不少习惯。
开发到现在为止都没有特别去了解如何好好的进行代码审核，大家默认会写代码就代表你也有能力去审核别人的代码，但我想这是一门额外的学习问题，从而促使我写下这篇文章去了解如何进行代码审核。审核代码是最直接可以养护并改善问题的阶段，主持得当的代码审核能够补足团队成员间的知识盲区进一步提升整体代码水平。
身处开发领域会发现很多时候都是在做架构信息的工作，所以我觉得称呼自己的日常工作像是「🌵 软件园丁」是十分贴切的。如果你也同意写作是为了思考更多，并期望透过输出写作来精炼自己的思考那么「数字花园」这个概念你应该也会有兴趣。
浏览器引擎前缀是为了让开发者在浏览器尚未正式支援的情况下先使用这些前缀来实现一些新的 CSS 特性，甚至当时还时常会使用 PostCSS 这类预处理器的 autoprefixer 插件来预处理 CSS 添加上这些前缀。近期发现需要前缀的属性越来越少，未来也大机率不会再有新的前缀被加入了。
Git 允许我们纪录任何档案的变更，并且可以轻松地回溯到任何一个版本，但是当需要储存大型档案时Git 就会显得力不从心，因为Git 并不是为了储存大型档案（图片、影片、音乐……等二进制档案）而设计的。而这次介绍的 Git Large File Storage 是 Git 的扩充，专门用于解决以上问题。
如今 Git 与 GitHub 已经成为业界主流，有很大机率你的专案也会使用到它们来进行版本控制，但由于 GitHub 是一款基于 Git 附加的服务，所以我们时常会轻视它的功能，其实 GitHub 有许多不错的功能却不是那么明显，因此主要分享一些我认为有用但日常使用没有查觉到的功能。
一开始听到CSS Container Queries 这个名词还是在一两年前，随着时间演进建构网页的模式也变动了许多次，我也越来越确信这项技术会是未来建构 RWD 网页的一块重要拼图，文章将介绍现有的Media Queries 有哪些缺陷，新解方则具备哪些优势？
近期将公司的新 Nx Monorepo 架构专案透过 GitHub Action 添加了自动更新套件的功能，会想实践该功能是因为旧专案疏于更新导致吃了非常多的苦头，希望在新架构下可以有更轻松且自动化的方式去执行更新。其中 Nx 有专属的 nx migrate 指令帮助我们达成这件事，并且背后有些非常有趣的机制与理念。
近期维护的项目希望引入深色模式，但分析后我认为实现这个需求并不是一个划算的选择，本文将讨论原因。如今许多网站和应用程序默认提供深色模式，这是一种将背景色转为深色，前景色转为浅色的设计手段，具备各种功能性和情感上的特点，例如：节省设备电力、降低眼睛疲劳……
近期在替项目做大型重构，其中就有将技术转换为 TypeScript 与 Monorepo，途中一些还没有头绪如何解决的类型问题，就会使用 `@ts-ignore` 或 `@ts-expect-error` 来先行忽略，但这两者的使用时机有所不同，这篇文章就来谈谈这两者的差异。
撰写这篇文章是因为接手过非常反人类的 Tailwind 项目，一些不应该出现的反模式其实都可以在早期被轻松避免，随着项目规模变大，这些反模式就会变成一个巨大的问题难以修正。本文将介绍一些我在项目中看到的反模式，并提醒你千万不要这样做！
我是一个物欲非常低的人，日常东西就是用到坏才换新，直到某天常用的薄膜键盘坏了才开始寻找新的键盘。在挑选新键盘的过程中让我想到选择键盘的一些故事促使写下这篇文章。作为软件工程师不外乎每天接触到的硬件生产力工具大概就是：键盘、鼠标、电脑、屏幕、椅子、笔电、大水杯（喝水非常重要），其中键盘绝对是情感最深厚的一一个。
近期重写的专案中有许多状态需要管理，会需要统一管理资料于专案中，为了避免写死代码（Hard Coded）并且让接手的人都能轻易地了解资料型态，这里记录一些过程中的发现。结论是应该使用 as const 来达成列举资料管理，因为它更加直觉没有什么认知负担，并且更加灵活。
为什么如今网站大多数都长得差不多，就连体验也差不多？我们时常会联想设计网页是一门富含创意创新的工作，但对使用者来说创新并不全然是一件好事。本篇文章希望引导读者了解网页发展的经历并推导出为什么「无聊的使用者介面是好的使用者体验」这个结论。
身为前端工程近期工作的感悟是很多时候开发问题还是陷于界面的外观、行为或互动层面上，并不是说花时间制作这些层面的事情就很逊，它们实际需要依靠经验丰富的开发者通过多方面的研究与考量才能打造合理的架构，例如有许多要留意的事：性能、适用性、可维护性、可测试性、搜索引擎优化、跨平台兼容性、多语言……
AI 并不会离开我们的生活，并且只会越来越普及，这也意味着我们的生活将受到影响。什么事情是人类能 AI 不能的？未来的工作会是怎么样？人们能做什么来保证未来？什么事情是人类能 AI 不能的？未来的工作会是怎么样？人们能做什么来保证未来？思考以上问题。
Lighthouse 是一款开源的自动化网页性能检测工具，通常在遇到网页性能问题时才逐个打开网页测试，手动测试总是会有：单次的测试结果不稳定、耗时费力、不利于团队开发的问题，今天来尝试使用 Lighthouse CI 自动化在每次代码更动时检测网页的性能问题吧！
不到 3 步骤让你的网站拥有以 WebAssembly 高效驱动的客制化搜寻功能。静态网站像是部落格、文件、个人网站、公司网站……等这类阅读体验为主的网站通常都有搜寻内容的需求，恰逢 Pagefind 1.0 的推出我把原先自制的fuse.js 搜寻功能换成Pagefind，分享如何在任何静态网站上加入搜寻功能。
近期工作接触使用 Shadcn for Vue 来打造网页 UI，这是一款基于 Tailwind 可弹性客制化的组件组合，让我们可以快速建立出符合需求的网页界面。本文将介绍现有样式库的问题及 Shadcn UI 的特色，以及为什么在前端圈这么火爆。
JavaScript 有 try...catch 语法用于捕捉程序中的错误情境，在需要时使用 throw 语法来抛出「任何错误」，通常建议会抛出 JS 默认的错误对象，但在 TypeScript 要怎么做才能确保抛出的错误的类型？
Zod 是以 TypeScript 为首的 Schema 声明和验证库，为什么有了 TypeScript 还需要 Zod？轻易的撰写运行时数据验证就是 Zod 的目的，像是验证第三方 API 传递的数据、用户输入在 URL 中或表单中的数据使用 Zod 来验证都很方便。
最近阅读 Stay SasSy 提到的 Goals, Problem, Solutions 猛然察觉这不是我日常工作拆分问题的方式吗！简直是不谋而合，正好也想写一篇文章来分享这个达成共识的方法，同时这也是一个很好向上沟通的方式，不管是对团队还是对上级沟通都有帮助。
TDD 测试驱动开发是一种开发方法论，先写测试再实践代码，应该如何撰写测试？或许听过 TDD 但不清楚与单纯写测试差别在哪？这篇文章详细描述 TDD 的优势与实际操作范例快速了解 TDD 为什么这么赞。TDD 目的便是打造一个工作流程能够验证代码的行为，让开发者能够更有信心的重构、更动代码。
观察并厘清什么样的「品格」是一位软件工程师可以具备的，以及普遍工作环境和社群带给我的感受，总结出几点可以解决问题的模式，在日常也作为我自己参考与努力的依据。有耐心、能沟通、跳脱框架是我理想中软件工程师可以具备的美德，不知道你是不是也认同这样的想法？
JSON-LD 是一种夹带更多资料以描述网页内容的方式之一。通常不太留意它，直到真正实施后也不知道有无用处？该如何检验搜索引擎是否正确抓到这笔资料？这篇文章分享我的经验以及让你实际验证 JSON-LD 是否和规范且被正确解读。
近期面对许多陈旧代码维护的问题，碰巧我翻找到这个博客：Understand Legacy Code，记录一下「重写」陈旧系统可能会遇到的困境与解套方案。以我自己手上的项目为例，在进行项目升级评估时发现事情比原先想象还要复杂！
开发者在记录或转移知识方面的「失败」并不是因为懒惰或缺乏关心。 相反，[环境压力]促使他们在绩效和学习目标之间的复杂紧张关系中找到平衡。当让学习变得显见并不安全时，绩效文化就会获胜。透过每日小会的方式，每天花费短小的时间让学习在团队中被提倡鼓励。
随着前端的复杂程度增加，Monorepo 这个词汇也时常出现，可惜的是相关介绍资源非常不足，趁着近期较为闲暇的时间来统整记录一下我对 Monorepo 的理解。受到不同好文章与影片的启发，我想写一篇最直白的 Monorepo 解释，希望能够帮助更多人理解 Monorepo 的概念。
近期在大改造现有产品的设计系统，预期会与来自不同领域的人合作，因此这篇文章是写给对网页无任何前置知识的人的，主要介绍「界面组件化」这个概念。组件是一块拼图、一个积木、一个齿轮……，就是一个可以被重复使用并且可被组合成更大物件的概念。
设计令牌（Design Tokens）或令牌是一种管理设计属性与数值的方式，用于建构 UI 最细小的元素，适当的使用设计令牌可以让设计系统更加弹性与可扩展，不论是任何职位，只要与设计系统相关的人士都应当了解设计令牌的概念。
开会是一门学问，也是身为团队领袖必备的软技能之一，架构差劲的会议会不只影响个人更甚至会整体团队的生产力，特别是在远端工作盛行的时代沟通技巧更尤为重要，架构差劲的会议会不只影响个人更甚至会整体团队的生产力，本篇文章探讨开会前中后有哪些细节是可以注意的。
近期公司购买了设计相关的课程，期望透过研究改良目前的设计来提升与开发合作的效率，恰好我之前的工作领域也与设计相关，而且我很早就想跨领域多写与网页相关的文章！因此打算特地开一系列文章记录课程笔记以及我自己补充的想法与资源。
在加入新工作的数个月内我撰写了接近百支大大小小功能的E2E 测试，打算透过边撰写这篇文章边阅读文件稳固自己的知识，同时也方便团队成员能够快速上手我从零开始建立的E2E Cypress 测试专案，并且最终期望能够尝试实验导入BDD 流程到团队开发流程当中。
开发者们对 CSS 有不同的意见，有的人说它很简单、有的人说它难以驾驭，这些都是事实。我时常听到苦恼的后端或是与其打交道多年的自己脱口而出：「CSS 真的好诡异阿！」，这篇文章来总结为什么CSS 是一个让人又爱又恨的存在，它为什么这么难学这么诡异？
开发者的工作性质造就我们注定要站在最前线与 AI 并肩作战，而 GitHub Copilot 这些年的陪伴显著的提升了我的开发生产力与更有效率的学习开发技巧，是少数我觉得真正值得付费的服务之一，不管你是新手还是老鸟 Copilot 都有对应的定位帮助你加速开发。
不要让使用者等待！越多的等待时间，就越容易让使用者流失，因此让应用程式的回馈即时，是很基础重要的原则。 Optimistic UI 强调即时、乐观的使用者介面回馈。在用户触发操作后，系统即时假定成功，迅速更新介面，提升使用者体验。这种方法有效缩短用户等待时间，创造更流畅、令人满意的互动体验。
我既设计网页也开发网页，并且在过去几年经验中总结发现设计与开发配合上容易遇到的问题像是：我需要绘制多少种尺寸的网页？我需要为网页设置多少个断点？这篇文章我分享自己作为设计者与开发者的经历以及你为何应该使用越少的断点来制作响应式网页越好。
赋予网页元素相对的关系而非绝对的数值，让我们强烈联系元素之间的差异，而非取决于某个魔法数字可以避免很多折腾。最近看到一篇文章，作者提到用 CSS Variable 来赋予相对而非绝对数值的 `z-index` 值，真是优雅简洁的方法！完美的发挥了 CSS 变量的优势，促使我写下这篇文章。
近两个月来在军队中学到的三点重要能力，时隔两年重温的两个月军旅生活说不上会对人生有什么大改变，但让我重新体会到自由的可贵。距离上次当兵已是 2 年前的事，在大学毕业后提前申请入伍进入了桃园杨梅再服役两个月，这篇文章主要想在没文章产出期间分享一下这两个月来的感想与活动。
程序中出现错误是必不可少的，有千万个原因可能造成程序出现错误无法运行，这时候在 JavaScript 中就可以使用 try...catch 语法来处理错误情境，除了拦截错误也可以自行定义与抛出错误，让程序中的错误更容易被理解与管理。
NPM 是 JavaScript 开发环境中必不可少的软件包管理器。本文将以导演一部电影为比喻，解释 NPM 的运作方式。编程就像拍摄一部电影，可以亲自设计和管理演员，也可以雇佣他人设计好的演员。NPM 就像一个平台，可以在上面找到许多现成的演员，这些演员就是软件包（Package）。
通常写多个 h1 都会被教育这是错误的做法，但实际上真的是如此吗？我深入的研究各方面说法。整理 Google 与 MDN 文件的说法，一个页面有很多个「重磅级标题」的情况非常少见的，如果这么写在阅读结构上是合理的话，使用多个 <h1> 在单个页面之中是完全没问题的，此外有许多更值得探讨的细节。
useEffect 是 react 中一个相当基础常见的 Hook，要真正学会它就必须要对 React 如何运作有基础的认识才行，它是 React 提供的一个 Hook 用于操作副作用，举例来说：送出请求、操纵 DOM、设定监听器……等都是副作用。
流程控制是程式语言中基础不可少的概念之一，除了使用if、else 之外，JavaScript 还提供一个简洁的写法，就是条件（三元）运算子，顾名思义，由三个片段所组成，分别是：「条件、成功流程与失败流程」。用更精简的语法来撰写流程控制，条件运算子是常见且必学的语法之一
在 JavaScript 中函式可以使用任意数量的参数与引数，如果参数没有对应的引数将导致该变数成为未定义，参数（占位符）代表一个值你期望函式所接收；引数（实际值）则是函式呼叫时所传递的值，让我们用预设参数来解决这个问题吧！
在 JavaScript 中活用 ES6 带来的增强版对象字面量可以精简代码片段，甚至可以动态计算创建对象内的项目！字面量指的是代表它自己的数值，例如数字 `25` 或 `你好世界`，而增强对象字面量就是在对象中使用的值。
记录一下我是如何制作自己的前端作品集的，随着从大学毕业，很快也要步入社会寻找正职工作，因此急需一个可以展示自己作品的平台，既然身为前端开发者，何不动手制作一个作品集网站呢？制作自己的作品集是必经历的体验，也是一趟很有趣的体验。
Astro 作为一个静态内容为主的生产器非常适合用于打造静态网页，这次我将用自己的作品集为案例教你打造一个实际的静态网站，通过以自己的作品集网站为范例，借助这个机会来展示这个框架好用与强大的地方。只需要有基础的 HTML 与 CSS 知识就能跟着这篇文章创造一个属于自己的作品集。
有时候为了装饰用途会需要用图片来显示标题，于是我开始思考“把图片放在标题里面”是不是和规的 HTML？是不是一个好的作法？主要查阅了 Google Search Central 的回应以及 MDN 文件，结论是和规的，以及有更多可以留意的细节。
总结在六角学院担任线上助教一年来总结的三大心得以及给同学助教老师们的话。从去年七月至今已在六角学院担任近一整年远端助教，准备在下个月毕业、服兵役并开始下段旅程，打算藉由这篇文章谈谈这段时间的心路历程与未来的规划。期待六角学院未来的发展，培养更多新一代的工程师。
图片是丰富网页内容避不可少的元素之一，大家都会在网页中添加图片，并且大多数网站中图片与影片是传输资料中最繁重的存在，了解如何改善它们是最划算的选择，如果网站效能或加载速度出现问题，第一步可以从图片或影片开始改善。让我们先从简单的例子一步一步找出潜在的问题以及如何解决，了解图片实际上有很多有趣的细节可以调整。
「什么是 Ajax 以及为什么不是 Ajaj？」，这个问题一直在脑海中停留许久，有人和我一样思考 Ajaj 之类的称呼的可能性吗？经过一些调查了解背后的原因并写成文章，关于 Ajax 的历史以及名称的由来可以参考看看我的发现。
响应式网页内的内容像水一样，顺应着浏览器的尺寸(容器)自动填装，只要内容挤破容器就会产生x 轴，因此解决方法无疑就是「找出网页中超出浏览器宽度的元素」。这是大多数人困惑的地方「知道问题点，但是不知道怎么下手 🥺」。实际上这个问题的解决方法很简单，本篇文章提供提供两种解决方案。
指标就是为了能够客观的测量网站体验而生的统计数值，本篇文章挑战用自己的方式去理解并解释所有Google 提出网页体验相关的指标，我发现没有必要一次性的记忆所有种类的指标，因此制作了一个懒人包与该文章，方便你我查询与学习。
唯有了解盒模型才能开始学习更多网页切版布局的技巧，本文由内至外拆解盒模型，并且解说相关的特性与属性。如果你对于网页有这么多间距可以被调整所困惑，或是初入门 CSS 我都非常推荐要先理解 CSS 的盒模型概念，网页其实就是一堆箱子组成的概念。
「为什么想经营网站？」在制作之前要好好想清楚这件事，制作网站与经营网站是完全不同的技能。举我自己的部落格「网页东东」为例，直到近期才比较有「写部落格」这件事究竟是什么的体会，透过探讨分析我自己经营网站内外动力，希望能帮助你重新思考自己经营网站的真正的目标与动机。
Hoppscotch 是一个线上工具，可以让你在浏览器上迅捷的测试后端提供的 API。很常遇到到后端的文件就直接上手写程式，导致在写程式的时候常常疏漏许多问题，像是请求方式错误、少夹带参数、网址错误、资料不存在……等，因此我都会建议先熟悉怎么用现成的工具来测试 API，使用图形化的介面可以更直观的管理API 们。
React Hook 是 React 16.8 版本新增的功能，可以让你在不写 class 的情况下使用 React 的功能。 「要如何区分 Hook 与方法的差别？什么情况下在 React 里称为 Hook？什么时候才只能称为方法？」于是写这篇文章来解释清楚。
柯里化就是将使用多个参数的函式转换成一系列使用一个参数的函式，用不同的思考方式来撰写函式，藉由将一个大函式分解成很多仅使用一个参数的函式，打造可被重复利用与轻松除错的函式，透过实际制作三明治函式案例简白的说明柯里化的概念。
讲解中「表达式」与「陈述式」的区别。表达式会产生一个值，而陈述式则是执行动作。表达式必须存在于某个陈述式中才能被使用。我回过头来才发现表达式与陈述式的重要性，了解 JavaScript 底层的逻辑对我们使用像是 React 这类框架也有帮助。
意思是说「如果你熟悉编写原生 CSS 的话，那么学 Tailwind 对你来说是易如反掌」。在 2022 CSS 调查中 Tailwind 都是最受欢迎、最多人使用的 CSS 框架，它开创性的设计理念打破了传统语义化架构 CSS 的方式，值得尝试用不同的方式架构网站！
通过解构语法可以快速取出当前数组或对象的数据，是个常见且必学的语法糖。通过解构可以快速取出当前数组或对象的数据，并且可以将取出的数据重新命名，让代码更简洁，是个简单方便的语法，举几个实际例子就会发现它的用处很多且很好懂。
通过学习 ES6 推出的展开与其余运算子，在许多场合可以更直觉易读的编写相同的代码，通过动图与实际案例来了解它们的用途吧。语法一模一样都是三个点，但在不同的位置会有不同的效果，这篇文章也会介绍展开运算子 (Spread Operator) 与其余运算子 (Rest Operator) 之间的差异。
OBS 是Open Broadcaster Software 的缩写，是一个在开源社群非常热门的录影软体，由于时常有录制影片的需求，于决定把设定OBS 的过程记录下来，让有需要的人可以依照简单的图示快速上手，从安装到实际录影。
CodePen 是一个线上的模拟开发环境，功能很简单，就是一个网页可以在上面写HTML、CSS、JavaScript，并且可以直接在网页上看到结果，而且还直接分享连结给别人看，对初学者来说介面友好基本没有上手难度，我是非常推荐的。
在程式语言中最基本的问题就是问题就是如何纪录与操纵资料，牵扯到传值与传址的问题，这篇教学使用 JavaScript 搭配图表帮助你了解它们的差异。了解如何储存变数有助于更好的操控资料，避免出现改 A 却动到 B 的状况。
写程序久了会发现编写干净的可被维护的程序是一件相当困难的事情，其中一个造成维护困难的原因是因为「函数除外并返回结果除了过程中产生变化对其他的程序产生影响」，换句话说问题就是「不需要的结果，让程序变得捉摸不定理解难以」，应该纯粹了解函数的定义以及如何使用，以便更进一步编写干净的代码。
JavaScript 箭头函式是 ES6 版本中新增的语法，能够简洁明了地定义函式，并且已经被广泛的使用当中。于本篇文章中我们将会学习如何使用箭头函式来简化程式码，并且了解这个语法的特性以及要注意的地方，以及它可以被使用在那些场合当中。
绝大多数时候你不会想要使用「松散比对」，尝试使用「严格的比对」将程序撰写得严谨精确一些。在绝大多数的情况下，你不会想要使用松散比对，但是在某些情况下，可能会使用它会更为便利，本篇文章将介绍相关取舍，以及你可以在什么时候使用不同的比较方式。
如果你需要大于 3 层的嵌套，代表你已经搞砸了，应当考虑重构程式码，应当透过反转与封装程式来重构逻辑。这篇文章将详细的介绍现有问题以及使用 Guard Clauses 技巧撰写更好阅读的代码，也就是透过反转逻辑的技巧来撰写更少嵌套逻辑的程式。
为了优化网页加载顺序，本文通过实际案例说明为什么应该使用 HTML 内建的 `defer` 和 `async` 属性，先从问题出发再到三种解决方案与对比，利用原生 HTML Script 标签属性及能规划脚本的加载顺序。
搜寻列是普遍输入资料于 HTML 中最常用的方式之一，让我们学会如何使用它。本篇文章将会练习从无到有包含介面制作一个搜寻框，可以输入结果并比对现有资料显示关联的内容，是一个非常适合 JavaScript 新手的一道实用练习题目。
计数器是入门各大框架基本会见到的习题，可以说是任何 App 最低限度的功能展示。这次使用原生的 JavaScript 来重现该题目，并且一步一步的思考并改善结果，本篇文章将会练习制作一个具备加、减、重制功能的 JavaScript 计数器。
待办事项是非常常见的习题，其中需求含括了增、删、读、改资料，充分的模拟到未来在操纵资料时会碰上的各种情境与问题。可以说各式各样的软体都是一种客制化的待办事项，透过制作待办事项足以熟悉编写应用的方方面面，跟着步骤写一次来练习基本的应用撰写。
HTML 元素可以拥有自己的属性，用于表达各种类的资讯，像是从外观样式到无障碍资讯到各式各样的预设属性，而 data 属性是一个正式存储资料于 HTML 元素的属性，将资讯储存在 HTML 标签属性上，使 JavaScript 与 CSS 都能读取得到元素的资料。
作为前端必学如何操控网页就需要学习 DOM，用一篇文章快速教你如何程序化的更动网页，一起来学会如何存取、编辑与监听 DOM，还有综合懒人包！如果对 Javascript 对象有一定的了解，代表你已经差不多会操纵 DOM 了，如果还不熟悉，建议可以先了解后再学习 DOM API。
学习任选串联语法可以让我们安全的访问某个询问且的对象属性，即使其属性并不存在也不会导致错误。访问对象属性对开发者来说是一件非常直觉的事情。做的事，但当数据的来源不稳定时，如果使用第三方来源的数据或用户输入，应该如何避免因使用不存在的值而出现的错误呢？来试试看任选染色体语法。
行动装置占了现代网际网路流量的一半以上，并且这样的趋势只会越来越高，随着行动装置的普及，像手表、手机、平板……等装置，连结上网页的装置只会越来越多元零碎，而每个装置又有不同的解析度与尺寸，因此市场对「能够适应各种装置」的网页需求是大大的增加，因此出现了 Responsive Web Design (RWD) 的做法。
CSS 预处理器已经深刻地改变了前端开发的方式，成为一项必备工具。但随着时间推移，新标准不断推出，我们还需要它们吗？在前端开发领域，经常会听到一些预处理器 (Pre-processor)，比如 Sass、Less、Stylus，这些工具是什么？为什么会存在？本文将主要探讨以下几个重点（附带示例）。
BEM 是一种管理 CSS 撰写方式的一种规范。撰写小型的网站时通常不需要特别考虑到未来样式的命名与权级的规划，但随着网站的复杂度增长就必须需要一套可预测与可扩充的方式，BEM CSS 由于概念简洁好懂，成效显著，并且有着相对长远的历史被测试与应用过，很适合作为初学者第一套管理 CSS 的办法。
好的文档应更容易的被撰写，更简单去维护，好的文档可以帮助人们更快、更有自信的去上手某一项技术。本篇统整帮助你理解文档可以被拆分为的 4 个种类，并且如何更好的整理、传递你的知识和想法，撷取自 Daniele Procida 发表的演说所总结的观点笔记。
我们每天都会囤积大量的文件、笔记、素材、累积下来就像乱糟糟的房间一样需要整理，如果你也同样在困扰这样的问题，这篇文章是为你准备的。本次文章想分享我们团队是如何建立一个系统应对基本的档案分工与备份的流程。好的档案管理是可以被追溯、被规范的，这样才好合作，好在未来被回顾。
字体是版面的灵魂，好的字体能够更好地表达文词间的情绪与情境！本篇文章收集了实用且来源可靠、授权清楚的字体网站并且是我平时设计时会考虑参考的网素材网站，像是：Google Fonts、FontShare……在使用时请务必注意授权范围限制。