第 3 页

箭頭融合符號

整合不同 Git 倉庫在一起(Symbolic Link、Git Submodule)

網頁東東至今仍完全以本地為主,所有代碼、字體、圖片影片與文章內容都紀錄於 Git 當中,並透過 Git LFS 來管理大檔案。這樣的決定有好有壞,其中一個問題便是內容與代碼的耦合高,任何一個想維護的人要把我撰寫的幾百篇文章連帶抓下來 😅,隨著專案成熟我決定要將兩者分離。

旋转符号

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

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

旋轉符號

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

近期在琢磨剛玩上手的 n8n 的各式功能,其中在製作 AI 流程時發現如果其中一個環節不如預期整個流程重來十分的耗費時間與金錢,這時候我們就可以添加上人類的反饋,重複的修改提示詞直到滿意為止。在製作文章研究生成 AI 時我也運用了相關功能來達成與 AI 溝通動態調整需求的目的。

文章上有箭頭符號

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

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

文章上有箭頭符號

簡單自架 n8n 回饋表單小試水深

近期在熟悉 n8n 流程自動化的工具,發現值得推薦給任何人(特別是軟體工程師)n8n 算是一種 low-code / no-code 解決方案可以幫助任何人透過現有的整合來快速實踐流程自動化的目的。這次教學透過簡單的串接 Google 服務來展現它的靈活性和強大功能。

图表图示

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

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

圖表圖示

使用 Mermaid 透過文字快速生成圖表

近期工作順代研究到使用 Mermaid 來快速生成圖表,這是一個很方便的工具,可以快速生成各種圖表,例如流程圖、心智圖、圓餅圖……等,你能想到的圖表基本都有支援。大致紀錄一下選擇這項技術的原因以及使用上的心得。Mermaid 與 AI 結合完美的免去了複雜度,讓我們能夠更專注在內容上,而不是花太多時間在製作圖表上。

簡報符號

Slidev:基於網頁的簡報創作方案

近期工作研究到使用 Slidev 來呈現簡報,一個基於 Vite + Vue3 的簡報工具整合了大大小小的套件方便用網頁創作簡報,主要以 Markdown 來撰寫內容,這樣的方式讓我們可以專注在內容上,而不用花太多時間在花俏的簡報軟體操作。

清单符号

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

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

清單符號

使用 Details 與 Summary 製作原生手風琴 (含收合動畫!)

手風琴是一種常見的網頁 UI 模式,通常是一系列垂直堆疊的標題可以用於展開收合顯示不同資訊,在 HTML 當中有項新穎的語法 <details> 和 <summary> 可幫助快速實現類似的功能,並且配合上最新的 interpolate-size 和 transition-behavior 製作滑順的展開閉合動畫。

下载符号

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

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