標籤：JavaScript
升級 Livewire V3 的踩坑心得
萬眾期待的 Livewire V3 終於在前陣子推出了正式版本 (8/25)，這個版本做了相當多更動，也加入了許多新功能。看了 Livewire 作者在 Laracon US 的介紹後，就非常期待正式版本的到來。V3 剛推出 beta 的時候其實有著...
在 Laravel 中使用 Algolia 實作搜尋功能
Algolia 是一個專精於搜尋的網路服務。與 Elasticsearch 類似，只要將可供搜尋的資料匯入至 Algolia 的資料庫 (Index) 就可以在前端使用 Call API 的方式進行搜尋並取得搜尋結果。有許多網站或是程式文件都是使用 Al...
JavaScript 的 Intersection Observer API 應用
最近在 iThome 看到一篇文章。GitHub揭露讓自家首頁飛快的開發秘訣文章中有說明 Github 是如何在自家首頁中實作「當畫面滾動到某個位置時，就會出現對應的動畫特效」。小弟的前端技術還在努力中，但看到這一段還是讓...
CKEditor 5 教學 (五)，超連結要小心的安全性問題
超連結是很多編輯器都會有的功能，CKEditor 也不例外。讓你在編輯內容中可以插入像是下方的連結：<a href="連結在此">我是超連結</a>當文章中的連結會導向至其他網站時。這個時候網站通常會在新視窗中開...
CKEditor 5 教學 (四)，如何顯示編輯好的文章
當文章編輯好之後按下儲存送出，接下來就要來查看編輯好的文章內容啦！這時候如果你開啟文章顯示的頁面，你會發現剛剛編輯的效果並沒有完整顯示出來，像是馬克筆沒有顏色。如果你有插入影片的話，甚至連影片都看不到...
CKEditor 5 教學 (三)，上傳圖片至 Amazon S3
要想讓文章的內容更為生動，圖片可以說是必不可少的東西，畢竟圖文並茂的文章絕對是大大的加分。一般的文章編輯器，都會提供插入圖片的功能。本文中我們會使用 CKEditor 官方提供的 CKFinder 套件，實作一個將圖片插...
CKEditor 5 教學 (二)，客製化編輯器的功能列
本文章已經偏舊，但是主要架構不變。最近幾個版本官方已經改為使用 TypeScript 作為主要語言。在上一篇文章中，我們簡單介紹了一下 CKEditor 如何安裝。CKEditor 雖然功能非常多，但預設的功能非常少，需要我們再進...
CKEditor 5 教學 (一)，在網站中使用 CKEditor 5
CKEditor 是一款老牌的富文本編輯器 (Rich Text Editor)。這類編輯器最大特性就是 WYSIWYG (What You See Is What You Get)，原本的 CKEditor 4，因為年代較為久遠，所以官方後來重新打造，也就有了現在的 CKEditor...
PurgeCSS，清除沒有使用到的 CSS
最近開始在學習 Tailwins CSS，Tailwind CSS 有一個很讚的功能，就是使用 PurgeCSS 去清除沒有使用到 CSS class name，將 CSS 檔案進行大幅度的瘦身。此時小弟我有一個念頭。「PurgeCSS 可不可以幫 Bootstrap 的 CSS...