第 6 頁

Astro Logo 符號

Astro 系列文第八日:實作整合 Tailwind

這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得,如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕,現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro,對你來說都不會是問題了。

Astro Logo 符號

Astro 系列文第七日:實作按鈕元件

網站中要用到許多種類的按鈕,在本章節綜合了先前「基礎元件」與「樣式」兩章節的內容,打造出一個通用的網頁按鈕元件,一起來實作看看吧。按鈕是網頁極具代表性的元件之一,下一章節講解整合 Tailwind 也會以這個例子出發,敬請期待!

Astro Logo 符號

Astro 系列文第六日:樣式

綜合來說 Astro 讓你用自己習慣的方式撰寫 CSS,不管是 import 還是 <link> 還是 Scoped CSS 或是各式各樣的預處理語言或框架皆有支援。stro 中撰寫樣式是一件非常容易的事,並且有多樣選項可供挑選。

Astro Logo 符號

Astro 系列文第五日:基礎元件

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹構成 Astro 最核心的概念 —— 元件。前面除了創建新專案之外也了解了 Astro CLI 與設定檔的大致樣貌,本章節會從創建基本 Astro 元件開始。

Astro Logo 符號

Astro 系列文第四日:基礎指令與設定

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹 Astro 的 CLI 指令與設置 `astro.config` 檔案。你可以使用自己喜愛的套件管理器來執行 Astro ,不管是 npm、pnpm、yarn 甚至是 bun。

Astro Logo 符號

Astro 系列文第三日:建構新專案

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今日介紹如何從頭建構一個專案並且了解資料夾結構。前面提到 Astro 是如何建構頁面的,像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁,接著本章節就要來實際創建一個 Astro 專案囉!

Astro Logo 符號

Astro 系列文第二日:現有問題與解方

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!今天理解到了動態網站與靜態網站的區別,關係到了網頁「渲染模式」的抉擇,而 Astro 就及是一個瞄準生成靜態頁面為主的框架。要了解 Astro 的優勢就需要了解現有的問題,需要進一步了解什麼是所謂的「靜態網站」什麼是「動態網站」。

Astro Logo 符號

Astro 系列文第一日:起飛前置準備

藉由本系列文章將持續 30 日不間斷的更新帶領你上手它!學習 Astro 將會成為前端開發的一股新氣象,事實上也被前端社群評價為:「最喜愛的」、「最期待的」新技術之一,憑藉著它極為平緩的學習曲線、活耀的社群、踩到痛點的定位和極高的擴充性,它可以輕易上手成為前端的主力生產力工具之一。

爬山的人符號

當兵二階段兩個月以來的心得

近兩個月來在軍隊中學到的三點重要能力,時隔兩年重溫的兩個月軍旅生活說不上會對人生有什麼大改變,但讓我重新體會到自由的可貴。距離上次當兵已是 2 年前的事,在大學畢業後提早申請入伍進入了桃園楊梅再服役兩個月,這篇文章主要想在沒文章產出期間分享一下這兩個月來的感想與活動。

一隻手操縱觸控板符號

簡單明確的了解 HTML 表單使用方式

很多時候都會忽略掉 HTML 本身就有很好的支援輸入控制與提交,輸入選項的功能與介面都可以輕易的透過原生 HTML 標籤來完成,只要想要在網頁中提交資料,都是使用 HTML 表單的好時機,讓我們來了解怎麼使用 HTML 表單製作一個無障礙且語意化的輸入表單。

進度條錯誤符號

使用 JavaScript try...catch 來控制程式中的錯誤

程式中出現錯誤是必不可少的,有千萬個原因可能造成程式出現錯誤無法運行,這時候在 JavaScript 中就可以使用 try...catch 語法來處理錯誤情境,除了攔截錯誤也可以自行定義與拋出錯誤,讓程式中的錯誤更容易被理解與管理。

檔案與齒輪符號

藉由導演一部電影來解釋 Node Package Manager

NPM 是 JavaScript 開發環境中一定會使用到的一款套件管理器,本篇文章將比喻導演一部電影來解釋 NPM 如何運作。寫程式就像在拍攝一部電影,可以親自上陣設計並打理演員,也可以聘請別人設計好的,NPM 就像一個平台可以在上面找到很多現成的演員,這些演員就是套件(Package)。

方框上有代碼的符號

Null vs Undefined 差在哪?

null 與 undefined 兩者的意涵非常相近,意思都是「沒有東西」,但在根本上它們是截然不同的東西,雖然都代表「沒東西」,但一個是「存在沒東西」一個是「不存在沒東西」,藉由這篇文章我來釐清解釋他們兩者之間的關係。

重要星型符號

我可以在一個頁面裡面擁有多個 <h1> 嗎?

通常寫多個 <h1> 都會被教育這是錯誤的做法,但實際上真的是如此嗎?我深入的研究各方面說法。整理 Google 與 MDN 文件的說法,一個頁面有很多個「重磅級標題」的情況非常少見的,如果這麼寫在閱讀架構上是合理的話,使用多個 <h1> 在單個頁面之中是完全沒問題的,此外有許多更值得探討的細節。

菱形方框中央有加號符號

來聊聊為什麼你需要 useEffect 吧!

useEffect 是 react 中一個相當基礎常見的 Hook,要真正學會它就必須要對 React 如何運作有基礎的認識才行,它是 React 提供的一個 Hook 用於操作副作用,舉例來說:送出請求、操縱 DOM、設定監聽器……等都是副作用。