Shang
4
位追蹤者
追蹤
轉職前端中,分享前端技術、澎湖在地生活、貓咪寫真、如何跟外國女友學英文
Shang的 前端開發筆記
3
會員
13
內容數
加入
前往沙龍
歡迎來到我的部落格!這裡是一個分享前端開發、貓咪寫真以及與菲律賓女友生活的文化衝擊與英文學習的個人空間。我熱愛前端技術,喜歡追求最新的網頁開發趨勢,並將這些知識分享給大家。
加入
前往沙龍
發佈內容
我的成就
由新到舊
CatHelper開發手記_太乙之初,專案設計與發想
CatHelper是我開發的前端 SideProject,是貓咪募資收養的一站式平台。 我用戶使用流程、資料庫、頁面來構思這個專案。
2024-03-21
2
如何用故事記憶法記住 JavaScript 運算子優先順序表
不同的運算子一起出現時,會根據其優先性(Precedence)來決定誰先誰後。MDN也很貼心的整理成表格了。 雖然有表格可以供我們查找,但是總不可能每一次用到運算子的時候,我們都去查找吧?我們最好對這張表有直觀上的理解與記憶。 那麼就讓我來分享我如何理解與記憶這張表吧! 運算子在做甚麼
2024-03-14
1
React如何處理非同步的資料-useEffect的使用方法與設計影響
當前大多數網站不再是靜態網站,需要向後端的 Server 請求資料。而且,這些資料的請求通常是非同步進行的。在React中,目前被視為最佳實踐的方式是使用 useEffect。
2024-02-08
2
Vue的開發筆記-建構與不建構的元件寫法差異
我在學習vue的過程中,一開始是先從輕前端(用CDN引入)開始學。這時候看Vue的官方文件會有些困惑,原因是有沒有用vite建構,在元件寫法上會有些差異。所以我寫下這篇筆記來整理這兩者寫法上的差異。 起手式 1.非建構:使用cdn 在html的header中插入以下script標籤 <s
2023-10-20
5
如何製作開關元件(Toggle Switch)
我相信大家應該都有在表單上看過開關元件,那麼我們會拿它來做甚麼?要怎麼把它做出來?
2023-10-20
3
Media query最簡單的基礎-跟著KP用21天征服Responsive Layout-W3
Media query可以很複雜,但是這裡KP只談最簡單、最實用的基礎。
2023-09-20
4
Flexbox基礎-處理圖片-跟著KP用21天征服Responsive Layout-W2
對於前端工程師而言,如何處理圖片是一個看是基本但是又重要的技能。就像是日本料理的師傅要懂得處理生魚片一樣。 因為flexbox的flex-item有自動伸縮的功能,所以要注意裡面的圖片如何被伸縮。
2023-09-20
0
跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的width與對齊
在上一篇文章-跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮 。我們提到了flex-item的width會由自身的內容長度決定。這其實是件很不可控的事情,所以我們在開發上會傾向於對flex-item設置width。 flex-item
2023-08-29
3
跟著KP用21天征服Responsive Layout-W2-優化flexbox的html結構
在學習了flexbox的起手式之後,讓我們來檢視與優化html結構吧。 <section class="three-col"> <div class="container"> <!--用來設置layout--> <div class="row"> <!-
2023-08-29
1
跟著KP用21天征服Responsive Layout-W2-Flexbox基礎-flex-item的伸縮
歡迎來到第二周,這一周我們就要進入Flexbox了。今天我們會先認識Flexbox的起手式與flex-item的伸縮規則。
2023-08-29
0
跟著KP用21天征服Responsive Layout-W1-使用max-width
這周KP分享的第三個概念是max-width,我們在甚麼狀況下會使用它。 情境:電腦版的文字太長,而缺乏可讀性。 在前面學到了對width設置百分比後,我們常會用以下的方式來設計個container,來達成內容置中,左右留白,內容佔螢幕85%(你想佔百分之幾都可以)的效果。 .contai
2023-08-23
3
跟著KP用21天征服Responsive Layout-W1-熟悉相對單位(relative units)
這周KP分享的第二個概念是相對單位(relative units) ,使用上的陷阱與原則,以及如何應用它們來做Responsive Layout。
2023-08-23
1
跟著KP用21天征服Responsive Layout-Day1-使用 percentages & 避免使用height
網頁中的元素本來都是Responsive的,是因為我們做了些什麼,才讓元素變成不是Responsive
2023-08-17
6
vocus 勳章
NFT
了解
如何蒐集勳章