节点符号

Pointfree 代码风格通过函数组合提升代码质量

一种代码风格,着重于函式的组合关系而非具体资料,定义函式时不显式提其参数(points),而是透过函式组合与高阶函式来表达资料流动。可以减少不必要的命名保持代码简洁与达成更好的通用组合性,但是额外的抽象须被理解与熟悉。透过两个实际案例熟悉 Pointfree 开发风格。

形状转换符号

实际简单的 Functor 解释

我不是数学家也对于范畴论没有太大兴趣,但它深刻的与 Functional Programming 进阶理念挂勾,透过实战了解开发层面这些理论可以如何撰写更好维护的程式。 Functor 是一种具有 map 方法的结构,允许对其中的值进行转换同时保持结构不变、让函数可以基于容器进行组合,意味着可以被用于封装副作用或情境。

加载符号

探讨适当的加载时长如何打造更好的加载体验

最好的用户体验是即时的,因此追求更短的等待时间和更快的反馈非常重要,然而匆忙的将任何信息显示给用户未必是最佳体验,举例来说:1.进入网页 2.反馈“加载数据中……”3.显示加载完成的数据,以上流程简洁实在,会有什么问题呢?问题出在时机和时间。

人与各种形状图示

学习 Go interface 实践多型

对于「多型 Polymorphism」的概念理解像是「要做一件事,但这件事对不同对象来说实践的方式不同」。具体来说像是各种「形状」都可以「算面积」,但背后实践的方法却不同,而在 Go 当中 interface 就是方法的集合。

板手图示

像 Class Method 的奇特 Go Receiver Function

第一次看到 Go 的 Receiver 函数会觉得这是啥怪语法,函数名前面还能接收参数?Go 语言提倡「Composition over inheritance」,并极力追求代码的简洁性,以此规避 class-based OOP 所带来的复杂性。

指標图示

学习 Go Pointer 与 Passing by reference 的差异

Go 设计上一切数值都是直白的「Passing by value」,会有「Passing by value」的效果原因是因为 Reference Types 带有指标,复制时是复制指标值。要让 Value Types 有 Passing by Reference 的效果要显式的使用 Pointer。

表格图示

TanStack Table 拯救前端复杂的数据表格呈现问题

前端生涯中遇到无数攸关资料呈现的需求需要解决,而 TanStack Table 是一款第一眼看起来很多余复杂但实际上能省下无数时间的一个优质套件,如果有任何「大量表单、中大型表单应用」我会强烈推荐。在实际工作中我透过导入 TanStack Table 在几天时间内就能把现有表单大多复杂功能重现。

程式文件符号

打造前后端 API 数据合约(GraphQL、tRPC、oRPC)与相关变通方案

使用 TypeScript 确保程式型别安全以维持大型前端专案的品质和维护性已经是很成熟且常见的做法,但有一项最常见的破口会让程式变得脆弱且混乱:「程式间 API 沟通」。 TypeScript 本身虽然能静态检查程式内部的型别正确性,但只能在程式执行阶段验证资料格式才能真正确保型别安全。

手指移动符号

通过 Figma MCP 与 Shadcn MCP 通过与 AI 聊天打造前端界面

UI 通常仰赖设计者与前端耗费大量时间精力进行组织与维护,近期工作上进行前端翻新也遇到大量陈旧代码需要翻皮的作业,问题是谁有时间一个一个重新替换?尝试串上 Figma MCP 与 Shadcn MCP Server 让我们透过与 AI 聊天就能精准打造前端介面。

清单符号

网页渲染太多东西开始卡顿?让列表虚拟化来解决

渲染永远是网页运算中极度耗费效能的一块瓶颈之一,而在像是仪表板应用或是大量资料清单如社群媒体版面很容易会遇到前端渲染效率上的问题,透过「只渲染看得到的东西」来减少效能负担。这种模式通常称作 List Virtualization(虚拟化看不到的东西)或 Windowing(只渲染视窗内的东西)。

机器人符号

模型上下文协议(Model Context Protocol)是什么?对现代开发者有什么影响?

AI 解决一些上下文清晰的小题目如 LeetCode 会发现它通常有惊人的效率与准确率,然而在真实情境下 AI 通常没有这么厉害,因为环境上下文和需求是模糊的,如何更好的让 AI 看清与外部世界互动能够达成更有效率的产出,而 MCP 是一种大型语言模型的统一协定帮助达成该目标。

刷新符號

如何通过 TanStack Query 构建更好的前端数据获取体验

先前文章提到:如何优雅的于 Vue 正确的处理资料载入点出了一些获取外部资料延伸带来的问题与实际解方,这次我想透过 TanStack Query 的视角挖掘怎么建构更好的前端资料获取体验。本篇教学继续延续使用 Vue 框架,不过概念对主流框架基本相通。

资料夹与齿轮符号

如何管理 TypeScript 类型文件?

TypeScript 型别定义档案通常就是在全局创个 type.ts 档案并把所有型别丢里头,随处都能引用很方便,但很多专案初期沿用的习惯到了一定规模就会开始混乱,近期也遇到相关的问题因此研究一下一般有哪些方式管理型别档案。

旗子符號

什么是 Feature Flag 以及它解决什么问题?

还记得之前参与某个专案使用 Git Flow 的方式管理产品发布,但随着时间过去它与持续进行中的主支线差距越来越大,也是在那次问题之后我更认可 Trunk Based Development 流程的概念,其中提到 Feature Flag 是一种很好的技巧用来降低推送功能的风险与控制程度。