文章列表 頁1

[CSS] 使用十六進位色碼表示半透明顏色

在 CSS 使用十六進位的色碼也可以直接設定半透明度了,只要在色碼後面加上 00~99 就可以直接設定透明度。

[AMP] 點擊按鈕與內容複製功能

說明如何在 AMP 的頁面使用點擊按鈕複製功能。

[WordPress Plugin] 在 Contact Form 7 使用下拉式選單(select)、checkbox 與 radio

在 Contact Form 7 設定下拉式選單(select)、checlbox 及 radio 的方法。

[CodeIgniter] XSS 輸入過濾

在 CodeIgniter 只要透過 xss_clean() 就可以做 XSS 的輸入內容過濾。

使用 reCAPTCHA v3 做表單送出驗證

相信大家在看到使用者填資料時,都有看過出現要你輸入驗證碼,或是勾選「我不是機器人」這樣選項的東西,這個 google 本身有提供一個服務叫做 reCAPTCHA 就可以簡單做到,而現在最新的 v3 版甚至不用去勾選「我不是機器人」就可以幫你驗證了。

[PHP] 去除字串內空白字元的方法

要在 php 內去除字串內的空白字元,可分為使用 trim()去除前後空白及使用 preg_replace() 去除字串內空白。

使用 Intersection Observer API 來偵測元素進入目標的事件

以往我們要做偵測頁面滾動到何處時會偵測 scroll 的事件,然後透過 scroll 捲動回傳的位置再去做不一樣的事情,不過這樣變成你只要捲動就會一直回傳事件,那是否可以讓想要偵測的事件自己去判斷是否已經進入指定的範圍呢? 在現在是可以的,就是使用 Intersection Observer API。

[Tailwind CSS] 使用 Aspect Ratio 設置固定比例區塊

在 Tailwind CSS 如果我們要設置一個固定比例的區塊,可以使用他們提供的 Aspect Ratio 的 class。

[Tailwind CSS] 使用 Grid 來排列 RWD 版型

說明使用 Tailwind CSS 來排版並製作 RWD 的方法。

[WordPress Plugin] All-in-One WP Migration- 一鍵下載與一鍵安裝的 WP 搬家工具

網站做久了難免會遇到需要搬家的時候,All-in-One WP Migration 就是一個讓你可以一鍵下載與一鍵安裝的 WP 搬家工具。

在 Laravel 專案使用 Tailwind CSS 和 Font Awesome

說明如何在 Laravel 專案使用 Tailwind CSS 和 Font Awesome。

[Tailwind CSS] 自訂元件(component)

說明透過 @apply 的方式來自製以 Tailwind CSS 為基礎的元件(component)。

[Tailwind CSS] 設定 container

Tailwind CSS 利用 container 這個 class 來設定內容的最大寬度不要延伸到整個頁面,一般建議切版最外層都要加上 container 這個 class 會比較好。

[Laravel] 設定全域變數(global variable)

要在 Laravel 設定一個全站都能夠用的變數可以在 config 資料夾內建立一個新的檔案,設定完關聯式陣列在讀取即可。

在 Laravel 安裝 tailwindcss

tailwindcss 是近年流行的 CSS 框架,如果要在 Laravel 上使用的話可以依據以下步驟。

[CSS] 修改點擊(focus)輸入欄位時光標的顏色- caret-color

我們在點擊輸入欄位的時候會有一個一閃一閃的光標,如果要修改該顏色,只要設定 caret-color 就可以了。

[SEO] 圖片的最佳做法

Google 說明在 SEO 上如何對圖片做最佳化。

Composer detected issues in your platform: Your Composer dependencies require a PHP version 處理方法

在開發 Laravel 專案時遇到 Composer detected issues in your platform: Your Composer dependencies require a PHP version 的處理方法。