升級 Livewire V3 的踩坑心得

萬眾期待的 Livewire V3 終於在前陣子推出了正式版本 (8/25)，這個版本做了相當多更動，也加入了許多新功能。看了 Livewire 作者在 Laracon US 的介紹後，就非常期待正式版本的到來。Livewire V3 剛推出 beta 的時候...
Laravel JavaScript TypeScript Livewire

PurgeCSS，清除沒有使用到的 CSS

最近開始在學習 Tailwins CSS，Tailwind CSS 有一個很讚的功能，就是使用 PurgeCSS 去清除沒有使用到 CSS class name，將 CSS 檔案進行大幅度的瘦身。此時小弟我有一個念頭。「PurgeCSS 可不可以幫 Bootstrap 的 CSS...
Laravel CSS JavaScript Bootstrap

在 Laravel 中使用 Algolia 實作搜尋功能

Algolia 是一個專精於搜尋的網路服務。與 Elasticsearch 類似，只要將可供搜尋的資料匯入至 Algolia 的資料庫 (Index) 就可以在前端使用 Call API 的方式進行搜尋並取得搜尋結果。有許多網站或是程式文件都是使用 Al...
Laravel PHP JavaScript

JavaScript 的 Intersection Observer API 應用

最近在 iThome 看到一篇文章。GitHub 揭露讓自家首頁飛快的開發秘訣文章中有說明 Github 是如何在自家首頁中實作「當畫面滾動到某個位置時，就會出現對應的動畫特效」。小弟的前端技術還在努力中，但看到這一段還是...
JavaScript

CKEditor 5 教學 (五)，超連結要小心的安全性問題

超連結是很多編輯器都會有的功能，CKEditor 也不例外。讓你在編輯內容中可以插入像是下方的連結：<a href="連結在此">我是超連結</a>當文章中的連結會導向至其他網站時。這個時候網站通常會在新視窗中開...
CKEditor JavaScript

CKEditor 5 教學 (四)，如何顯示編輯好的文章

當文章編輯好之後按下儲存送出，接下來就要來查看編輯好的文章內容啦！這時候如果你開啟文章顯示的頁面，你會發現剛剛編輯的效果並沒有完整顯示出來，像是馬克筆沒有顏色。如果你有插入影片的話，甚至連影片都看不到...
CKEditor JavaScript CSS

CKEditor 5 教學 (三)，上傳圖片至 Amazon S3

要想讓文章的內容更為生動，圖片可以說是必不可少的東西，畢竟圖文並茂的文章絕對是大大的加分。一般的文章編輯器，都會提供插入圖片的功能。本文中我們會使用 CKEditor 官方提供的 CKFinder 套件，實作一個將圖片插...
CKEditor Laravel PHP JavaScript

CKEditor 5 教學 (二)，客製化編輯器的功能列

本文章已經偏舊，但是主要架構不變。最近幾個版本官方已經改為使用 TypeScript 作為主要語言。在上一篇文章中，我們簡單介紹了一下 CKEditor 如何安裝。CKEditor 雖然功能非常多，但預設的功能非常少，需要我們再進...
CKEditor JavaScript CSS

CKEditor 5 教學 (一)，在網站中使用 CKEditor 5

CKEditor 是一款老牌的富文本編輯器 (Rich Text Editor)。這類編輯器最大特性就是 WYSIWYG (What You See Is What You Get)，原本的 CKEditor 4，因為年代較為久遠，所以官方後來重新打造，也就有了現在的 CKEditor...
CKEditor JavaScript