第 7 頁

方框上有代碼的符號

可以怎麼使用 JavaScript 條件運算子?

流程控制是程式語言中基礎不可少的概念之一,除了使用 if、else 之外,JavaScript 還提供一個簡潔的寫法,就是條件(三元)運算子,顧名思義,由三個片段所組成,分別是:「條件、成功流程與失敗流程」。用更精簡的語法來撰寫流程控制,條件運算子是常見且必學的語法之一

雙箭頭符號

為什麼你需要 JavaScript 預設參數?

在 JavaScript 中函式可以使用任意數量的參數與引數,如果參數沒有對應的引數將導致該變數成為未定義,參數(佔位符)代表一個值你期望函式所接收;引數(實際值)則是函式呼叫時所傳遞的值,讓我們用預設參數來解決這個問題吧!

JS 物件語法符號

為什麼你需要 JavaScript 加強版物件實字?

在 JavaScript 中活用 ES6 帶來的加強版物件實字可以精簡程式片段,甚至還可以動態的計算創造物件內的項目!實字(Literal) 指的是代表它自己的數值,舉例來說數字 `25` 或 `你好世界` 而進階物件實字就是在物件中使用的值。

圓框中有打勾的符號

為 Astro 設置 ESLint 與 Prettier

我喜歡使用自動化的工具來為專案的代碼提供錯誤檢查與整理,因此使用 ESLint 與 Prettier 讓撰寫的代碼更一致無錯,還有額外添加 TypeScript 的檢查與 VSCode 提示,本篇文章有詳細的教學範例引導你在 Astro 中安裝 ESLint 與 Prettier 套件。

愛心符號

製作個人前端作品集 - 實作篇

Astro 作為一個靜態內容為主的生產器非常適合用於打造靜態網頁,這次我將用自己的作品集為案例教你打造一個實際的靜態網站,透過以自己的作品集網站為範例,借助這個機會來展示這個框架好用與強大的地方。只需要有基礎的 HTML 與 CSS 知識就能跟著這篇文章創造一個屬於自己的作品集。

愛心符號

製作個人前端作品集 - 準備篇

記錄一下我是如何製作自己的前端作品集的,隨著從大學畢業,很快也要步入社會尋找正職工作,因此急需一個可以展示自己作品的平台,既然身為前端開發者,何不動手製作一個作品集網站呢?製作自己的作品集是必經歷的體驗,也是一趟很有趣的體驗。

圖片符號

我可以把圖片放在標題裡面嗎?

有時候為了裝飾用途會需要用圖片來顯示標題,於是我開始思考「把圖片放在標題裡面」是不是和規的 HTML?是不是一個好的作法?主要查閱了 Google Search Central 的回應以及 MDN 文件,結論是和規的,以及有更多可以留意的細節。

Astro Logo 符號

創建靜態為主的網站?一定要來試試 Astro.js!

目前本部落格就是使用 Astro 所建構,在從正式版還沒推出之前就使用著它來創建網頁到目前算是小有心得,加上也有許多人詢問過,於是就寫這篇文章來分享一下。在這之前我使用過很多不同的框架,像是 Next、Gatsby、Jekyll、HUGO,它們都是很好的框架,但一直沒有戳中我的需求……

開放框線中央有一個旋轉箭頭符號

了解網頁的三大渲染模式 Rendering Patterns feat. SSG, SSR, CSR

當建構一個網頁的時候,最首要面對的問題就是「網頁內容要怎麼生成並提交給用戶?」,而為了解決這個問題所產生的解決方法就是「網頁渲染模式 (Rendering Pattern)」。建構網站有許多種方式,藉由了解它們之間的取捨可以更好的幫助你建構下一個網頁專案。

六角符號

近一年來擔任六角學院助教的過程與心得總結

總結在六角學院擔任線上助教一年來總結的三大心得以及給同學助教老師們的話。從去年七月至今已在六角學院擔任近一整年遠端助教,準備在下個月畢業、服兵役並開始下段旅程,打算藉由這篇文章談談這段時間的心路歷程與未來的規劃。期待六角學院未來的發展,培養更多新一代的工程師。

圖片符號

所有最佳化網頁圖片的技巧都寫在這了!

圖片是豐富網頁內容避不可少的元素之一,大家都會在網頁中添加圖片,並且大多數網站中圖片與影片是傳輸資料中最繁重的存在,了解如何改善它們是最划算的選擇,如果網站效能或加載速度出現問題,第一步可以從圖片或影片開始改善。讓我們先從簡單的例子一步一步找出潛在的問題以及如何解決,了解圖片實際上有很多有趣的細節可以調整。

雙向箭頭符號

什麼是 Ajax 以及為什麼不是 Ajaj?

「什麼是 Ajax 以及為什麼不是 Ajaj?」,這個問題一直在腦海中停留許久,有人和我一樣思考 Ajaj 之類的稱呼的可能性嗎?經過一些調查了解背後的原因並寫成文章,關於 Ajax 的歷史以及名稱的由來可以參考看看我的發現。

超出界線符號

怎麼解決網頁中莫名其妙出現 x 軸的問題

響應式網頁內的內容像水一樣,順應著瀏覽器的尺寸(容器)自動填裝,只要內容擠破容器就會產生 x 軸,因此解決方法無疑就是「找出網頁中超出瀏覽器寬度的元素」。這是大多數人困惑的地方「知道問題點,但是不知道怎麼下手 🥺」。實際上這個問題的解決方法很簡單,本篇文章提供提供兩種解決方案。

箱子符號

網頁就是一堆箱子組成的概念:CSS 盒模型

唯有了解盒模型才能開始學習更多網頁切版布局的技巧,本文由內至外拆解盒模型,並且解說相關的特性與屬性。如果你對於網頁有這麼多間距可以被調整所困惑,或是初入門 CSS 我都非常推薦要先理解 CSS 的盒模型概念,網頁其實就是一堆箱子組成的概念。