iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1700 瀏覽

鐵人賽 Modern Web DAY 22

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 22 篇

技術 Day 22 Lightning 喜歡文章功能

看到一篇優秀的文章，總是會給它按個讚，也可以從點讚次數來了解這篇文章的受歡迎程度。本篇就來實作這個功能，不過我會叫它「喜歡文章」嘻！喜歡功能不要重複造輪子...

Lucas Yang ‧ 2020-09-24

0 Like 0 留言 1683 瀏覽

鐵人賽自我挑戰組 DAY 5

從零開始的 Tailwind CSS 學習之旅系列第 5 篇

技術 Day05 - Tailwind JIT 模式使人快樂

什麼是 JIT？ JIT 為 Just In Time 的縮寫，開發的專有名詞可以比喻成即時編譯，即時生成樣式的 class。這個即時引擎是 Tailwind...

肉鬆 ‧ 2022-09-18

0 Like 0 留言 1649 瀏覽

鐵人賽自我挑戰組 DAY 6

從零開始的 Tailwind CSS 學習之旅系列第 6 篇

技術 Day06 - 自定義參數

配置先前有提到 Tailwind CSS 是一套以 utility-first 為基礎的 CSS 框架，它的設計從一開始就考慮到定制。如何設定參數透過終...

肉鬆 ‧ 2022-09-19

0 Like 0 留言 1581 瀏覽

鐵人賽 Modern Web DAY 26

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 26 篇

技術 Day 26 Lightning 顯示文章留言 & 刪除留言

文章留言功能的最後一步，來做留言列表和刪除留言，把上篇新增的留言秀出來！文章留言列表先來新增一個留言列表組件： resources/js/Lightnin...

Lucas Yang ‧ 2020-09-28

0 Like 0 留言 1517 瀏覽

鐵人賽 Modern Web DAY 13

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 13 篇

技術 Day 13 Lightning 刪除帳號 & 用戶頁面

接續上篇，做刪除帳號和用戶頁面，一口氣完成用戶的功能！刪除帳號新增刪除帳號的路由： routes/web.php // User ... Route::d...

Lucas Yang ‧ 2020-09-15

1 Like 1 留言 1515 瀏覽

鐵人賽自我挑戰組 DAY 7

從零開始的 Tailwind CSS 學習之旅系列第 7 篇

技術 Day07 - Display 的大小事

什麼是 Display？每一種 HTML 標籤都有預設的 Display 屬性，這些 Display 會影響網頁上的排版，要學會網頁排版我們得先了解基本的...

肉鬆 ‧ 2022-09-20

1 Like 0 留言 1476 瀏覽

鐵人賽 Modern Web DAY 20

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 20 篇

技術 Day 20 Lightning 完善文章列表 & 優化資料庫查詢

列表組件已經完成，再來可以做用戶頁面的文章列表了。用戶頁面的文章列表首先先修改用戶頁面的 Controller 部分，因為之後這個頁面還要放用戶喜歡的文章...

Lucas Yang ‧ 2020-09-22

1 Like 1 留言 1462 瀏覽

鐵人賽自我挑戰組 DAY 10

從零開始的 Tailwind CSS 學習之旅系列第 10 篇

技術 Day10 - 為背景增添變化吧！

背景 Background 語法相信大家都不陌生，最常使用在調整背景顏色及背景圖片的設定。Tailwind CSS 預設許多顏色，詳細可查閱 Tailwind...

肉鬆 ‧ 2022-09-23

0 Like 0 留言 1461 瀏覽

鐵人賽自我挑戰組 DAY 2

從零開始的 Tailwind CSS 學習之旅系列第 2 篇

技術 Day02 - Bootstrap 與 Tailwind CSS 差異

請問你使用的是 Bootstrap 還是 Tailwind CSS？先前待的公司是屬於網頁接案類型，會依據客戶的產業類別、文案去做客製化網站。每個案子的設計...

肉鬆 ‧ 2022-09-15

0 Like 0 留言 1453 瀏覽

鐵人賽 Modern Web DAY 23

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 23 篇

技術 Day 23 Lightning 喜歡文章功能的問題

在上篇中已經做完了喜歡文章的功能，但還存在一些問題，本篇就來看這些問題。預加載 likers()->count() 問題首先看到的是重複的 Quer...

Lucas Yang ‧ 2020-09-25

0 Like 0 留言 1418 瀏覽

鐵人賽 Modern Web DAY 16

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 16 篇

技術 Day 16 Lightning 文章頁面

再來要做 Lightning 的文章頁面，上篇新增的文章終於可以看到了。文章頁面文章頁面比較複雜一點點，我們把它抽出一個單獨的 ShowPost Cont...

Lucas Yang ‧ 2020-09-18

0 Like 0 留言 1394 瀏覽

鐵人賽 Modern Web DAY 12

Full Stack Web Development 網站實作系列第 12 篇

技術 Day 12 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (3) -- Navbar

新增 Navbar 至每個網頁頂端：利用 Next 的 Layout 元件，來建立每個網頁都可以看到的 Navbar。新增 components/Layout....

tjabi ‧ 2022-09-27

0 Like 0 留言 1378 瀏覽

鐵人賽 Modern Web DAY 25

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 25 篇

技術 Day 25 Lightning 新增留言

首先先新增一個輸入留言的組件，裡面會使用之前做的 Markdown 輸入框組件，enabled prop 為 true 時可正常輸入留言，為 false 時禁...

Lucas Yang ‧ 2020-09-27

0 Like 0 留言 1361 瀏覽

鐵人賽 Modern Web DAY 12

從零開始打造炫砲個人部落格，使用 Next.js、ContentLayer、i18next 等現代技術系列第 12 篇

技術首頁樣式切版 - Modern Next.js Blog 系列 #12

TL;DR 這是「Modern Blog 30 天」系列第 12 篇文章，上一篇我們使用 Tailwind CSS 美化了 navbar, footer 等全站...

EasonChang ‧ 2022-09-27

1 Like 0 留言 1325 瀏覽

鐵人賽 Modern Web DAY 18

關於我用 Laravel 寫 SPA 卻不寫 API 的那檔事系列第 18 篇

技術 Day 18 Lightning 文章、草稿列表

文章列表文章列表的路由已經存在 Resource 裡，只要再加一個草稿列表的路由，而且一定要放在 ShowPost 上面： routes/web.php /...

Lucas Yang ‧ 2020-09-20

0 Like 0 留言 1189 瀏覽

鐵人賽 Modern Web DAY 14

Full Stack Web Development 網站實作系列第 14 篇

技術 Day 14 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (5) -- 讀取 Supabase 資料

讀取 Supabase 資料首先安裝 supabase-js： npm i @supabase/supabase-js 接著，在根目錄，建立 client.j...

tjabi ‧ 2022-09-29

0 Like 0 留言 1172 瀏覽

鐵人賽自我挑戰組 DAY 29

我獨自開發 - Supabase 打造全端應用系列第 29 篇

技術第二十九關 - 來企排隊：Google 地圖整合與簡訊邀請

功能在「來企排隊」系統中，我們整合了 Google 地圖功能，讓用戶可以：查看附近的商家位置獲取商家詳細資訊（名稱、地址、電話）直接發送簡訊邀請商家...

william ‧ 2025-10-12

0 Like 0 留言 1151 瀏覽

鐵人賽 Modern Web DAY 13

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 13 篇

技術 [Day 13]每天前進一點應該也是進步吧?(前端篇)

挑戰目標: MockNative Camp 今天我們來整理昨天沒有弄好的footer右邊的部分，這是我們的目標昨天完成的今天完成的今天決定另闢蹊徑到uxwi...

Moscle.dev ‧ 2021-09-28

0 Like 0 留言 1104 瀏覽

鐵人賽 SideProject30 DAY 18

從零開始的firebase與Vue框架ーSNS專案系列第 18 篇

技術 Day18—開發日記（二）Tailwind

前言今天繼續開發，重點著重在：初步探索Tailwind與理解App.vue。工作重點 Tailwind 之前的專案架構下是使用了boostap切版，這次先諮...

ch0902 ‧ 2023-10-03 ‧團隊好想工作室 v7.0

0 Like 0 留言 1066 瀏覽

鐵人賽 Modern Web DAY 10

Full Stack Web Development 網站實作系列第 10 篇

技術 Day 10 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (1)

這個 app 將從 supabase 讀取資料，在透過自製 Tailwind CSS 元件，呈現類似 netflix，hulu 的影像畫廊(image gall...

tjabi ‧ 2022-09-25

0 Like 0 留言 1007 瀏覽

鐵人賽 Modern Web DAY 15

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 15 篇

技術 [Day 15]吶吶，還有一半別想跑(前端篇)

挑戰目標: MockNative Camp 今天繼續來製作我們的Footer，目標前兩天我們已經將這些顯示文字都寫入到config中next.config.j...

Moscle.dev ‧ 2021-09-30

0 Like 0 留言 962 瀏覽

鐵人賽 Modern Web DAY 17

Full Stack Web Development 網站實作系列第 17 篇

技術 Day 17 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (9) -- Head 元件

更改網頁的 title，建立 Meta 元件：(1)更改網頁 title 及其他 meta 資料(2)更改 Contact Us 網頁 title(3)更改個別...

tjabi ‧ 2022-10-02

0 Like 0 留言 900 瀏覽

鐵人賽 Modern Web DAY 7

從0開始的的Angular站台架設-Stnadalone 系列第 7 篇

技術 D6 為自己的開發鮮豔上色，先用Tailwindcss來塗上喜歡的顏色

在前端進行開發的時候我們經常面對在設計整個畫面的排版與樣式時，有UI design跟design吵，自己開發跟自己吵的狀況。因為我們在開發時常常面對到css的...

Otto_auto ‧ 2023-09-17

0 Like 0 留言 862 瀏覽

鐵人賽 Modern Web DAY 16

Full Stack Web Development 網站實作系列第 16 篇

技術 Day 16 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (8) -- 顯示 Supabase 資料在螢幕上

繼續加其他文字資料到圖卡上，增加圖片 title 到圖卡上。在 /components/ImageCard.js 加上下列指令。 <div classNa...

tjabi ‧ 2022-10-01

0 Like 0 留言 809 瀏覽

鐵人賽 Modern Web DAY 15

Full Stack Web Development 網站實作系列第 15 篇

技術 Day 15 使用Next.js, Tailwind CSS 和 Supabase 做一個影像畫廊 image gallery app (6) -- 顯示 Supabase 資料在螢幕上

將 Supabase 資料秀在螢幕上從 Supabase 成功讀取資料後，要秀出這些資料在螢幕上，需要兩個動作。每一個影像(image)需要一個圖片卡來放圖片及...

tjabi ‧ 2022-09-30

1 Like 0 留言 797 瀏覽

鐵人賽 Mobile Development DAY 15

掌握 React Native 與 Expo：30天雙打，新手也能精通跨平台開發！系列第 15 篇

技術 Day 15 - 第二個 App 簡介與專案 Tailwind CSS 設定

今天已經是第 15 天了，轉眼間鐵人賽也達成了二分之一的進度。今天開始要來實作第二個專案，我們要來做的是一個即時天氣 App。這次除了一樣使用 React N...

Bucky ‧ 2023-09-30 ‧團隊大船要開囉

0 Like 0 留言 748 瀏覽

鐵人賽 Software Development DAY 13

我獨自開發 - 用 Supabase 打造全端應用系列第 13 篇

技術第十三關 - 支配者之手：Supabase Database API

在前面的文章中，我們學會了如何使用 Supabase CLI 管理專案、建立資料表，以及各種開發工具。今天要介紹的是 Supabase 的核心功能之一：Dat...

william ‧ 2025-09-26

0 Like 0 留言 710 瀏覽

鐵人賽 Software Development DAY 15

我獨自開發 - 用 Supabase 打造全端應用系列第 15 篇

技術第十五關 - 影子軍團：Supabase Edge Functions

什麼是 Edge Functions？ Supabase Edge Functions 是一個基於 Deno 運行時的無伺服器函數服務，可以在邊緣節點執行，T...

william ‧ 2025-09-28

0 Like 0 留言 543 瀏覽

鐵人賽自我挑戰組 DAY 7

我獨自開發 - Supabase 打造全端應用系列第 7 篇

技術第七關 - Supabase 自部署：打造專屬的後端服務

除了使用 Supabase 官方雲端平台，你也可以選擇在自己的伺服器上部署 Supabase！這就像是把整個 Supabase 搬到你自己家裡，完全由你掌控。...

william ‧ 2025-09-20

0 Like 0 留言 520 瀏覽

鐵人賽 Software Development DAY 4

我獨自開發 - 用 Supabase 打造全端應用系列第 4 篇

技術第四關 - Supabase CLI（上）- 安裝、設定、指令

Supabase CLI 是開發者在本地環境中管理 Supabase 專案的強大工具。透過 CLI，你可以在本地建立完整的 Supabase 開發環境，包括資...

william ‧ 2025-09-17