30 seconds of code
透過一篇又一篇一口大小的文章快速理解某項議題,主要聚焦在前端開發議題,同時也有面試題目解析。適合在零散時間閱讀擴充見識。
- #免費
透過一篇又一篇一口大小的文章快速理解某項議題,主要聚焦在前端開發議題,同時也有面試題目解析。適合在零散時間閱讀擴充見識。
與遊戲開發相關的部落格,像是遊戲美術、特效、開發與採訪,雖然我不做遊戲,但誰對好玩精美的遊戲與背後的過程不感興趣呢?
全面的網頁共筆文件,內容包含了開發、設計、內容經營、UX……等,是一個資訊量非常豐富完整的網站。
Brrad Woods 的數位花園
Brian Lovin 部落格
文章聚焦在各式 CSS 實驗性特效的嘗試,以及蒐集不同獨特網頁樣式為參考。
由 Figma 推行的線上刊物,由淺入深的探討留白、格線和字體等設計基礎,為設計師提供寶貴參考。實例與理論的結合了解更多有關設計系統的一切。
UI/UX 相關部落格
著重在前後端開發、AI 或職涯發展相關的議題,有許多高品質的面試題庫與文章還有全端雙週報,非常精采有料。
一個圍繞在設計相關議題的線上刊物平台,由 AIGA 創立,關注全球設計界的重要議題,提升當代設計師的聲音,旨在建立一個更參與的設計社群。
一名開發者的部落格,文章用簡白高效且親切的方式描述各式各樣前後端開發技術。有許多免費系列文章值得一看。
freeCodeCamp 絕對是全球開發者免費學習社群的龍頭,而 news 是一個由 freeCodeCamp 社群維護的部落格,內容包含了各種廣泛開發技術文章,以及一些網頁開發的相關資訊。
Josh W Comeau 的個人部落格親切有趣,常用簡單的描述與實例來示範與解決問題,我很感激有這樣熱心教學產出優質內容的開發者,著重於前端開發。
台灣本土最棒的字體學習部落格,許多關於字體設計以及背後的知識、採訪專題都值得一看。
一名在日本生活的軟體工程師部落格
一個充滿 Emoji 的可愛教學網站,網頁的方方面面像是:UX、前端基礎、資料結構、演算法都有涉略,每篇文章都有詳細的圖示由淺入深的挖掘不同知識。
Maggie Appleton 撰寫有關程式設計、設計和人類學的視覺文章。
輕鬆學習程式語言和最新技術趨勢,踏上從小工到大師之旅!
前端大佬部落格,看就對了。
寫程式的文字人
專為專業的網頁設計師、開發者和其他參與開發網站和在線業務的人所設計的刊物,內容涵蓋前端的方方面面。
酷酷的設計師雜誌,談論生活與工作,舒適漂亮的網站讓我想要一直讀下去。
當我說「遺留程式碼」時,我指的是您害怕更改的有價值的程式碼。我們都必須處理遺留程式碼。 但實在太難了!在這裡您將找到問題的答案。 我正在分享有用的技巧和具體建議,它們將幫助您馴服您繼承的遺留程式碼庫。
技术圆桌部落格
不同面向的有趣文章,我希望有時間能多看看他的文章。
如果有在接觸前端 YouTube 教學頻道,大概率你也看過 Kyle 的同名頻道影片,他的部落格算是教學影片的文字版本,同樣內容精彩豐富,著重在前端開發。
獲得個人化的開發者資訊推薦,在每次開啟新分頁面的剎那快速了解有興趣的主題最近的趨勢,很快可以運用零散的時間多讀幾篇文章,追蹤業界發生的新事件。
快速放大或縮小檢視網頁的圖片,
阻擋任何彈出式視窗,當彈跳視窗被觸發時該擴充功能會顯示通知,你可以自由決定拒絕或接受彈跳請求。
鑑別網站背後所使用的技術,如果你對於一個網站背後可能技術棧感到好奇,可以使用這個套件檢查相關資訊。
最大的網頁靈感網站,著重在展示實驗性質的介面與體驗設計,可以過濾各式各樣的顏色、行業或世界各地國家……的網頁,一窺網頁可能性的極限。
透過模擬真實 UI 與頁面來了解顏色的易用性,且會提供 WCAG 等級檢測,並且還會提供建議替代顏色,非常適合快速的網站顏色檢測。
尋找最創新且使用友好的產品,包括網站建構工具、模板、平面設計軟體等等。推薦那些滿足我們對品質、功能和視覺美感期望的產品。
由 Indian Type Foundry 提供篩選與檢核通過的高品質免費字體,主要為拉丁語系語言,可用於個人與商業用途,詳細可查閱個別字體的授權許可。
免費的網頁字體庫,提供多樣化的字體選擇,讓網站和設計更具個性。
最齊全的線上 Icon 搜尋工具,沒有任何廢話和廣告,享受格式各樣的大型設計系統與字體提供的精美 Icon。
在極短的時間內輕鬆製作專業水準的短特效影片,用於製作行銷短動畫特別好用,且一切編輯皆在雲端執行,無須手動渲染影片或下載相關程式。我用它來製作教學動畫或作品展示,體驗都非常不錯。
上千種漂亮的日文網站透過行業類別、顏色系與設計技巧分類顯示,從同樣使用到漢字的日本網站尋找範例總是更為親切。
自從我主要改行開發者之後,就馬上把 Creative Cloud 訂閱給停掉了,Adobe 年費是設計者都懂的痛,如果你也有同樣的看法,嘗試這款線上編輯軟體做些簡單的編輯看看吧?
創意者的靈感產生器,透過閱覽與收藏無限量的圖片瀑布,任何種類的題材與發想主題皆能在 Pinterest 中找到靈感。
實時的調配網站的強調色/輔助色/主色調與字體等搭配,更直觀的及時預覽與抓住網站的風格調性,線上即可操作且可以輸出 Tailwind 或 CSS 設定檔!如果你考慮創建新網站但沒概念整體調性可以怎麼搭配可以嘗試看看。
線上壓縮與最佳化 SVG 檔案的工具,特別適合開發與設計網頁,檔案尺寸分毫必爭時使用,進一步減輕 SVG 圖示大小。
如果你在建構任何組件為主的用戶介面,都可以參考看看 The Component Gallery ,這是一個蒐集全球各大優秀設計系統為範例的參考網站。
上百款各式各樣適合應用到網頁背景上的透明材質,可自由選取顏色與過濾想要的樣式,可生成 CSS 或是作為桌布使用。
由 Jeremiah Shoaf 個人建構的字體部落格,內容有他根據自己見解成立的字體推薦清單與案例研究。如果你認同他對字體的見解與搭配可以購買額外的書籍。
透過模擬視覺障礙人士的視覺,理解顏色間的對比如何影響妳的使用者,從各式各樣的色盲到視力模糊、白內障、環境光影響都可以模擬,並且會提供對比度數值與 WCAG 等級的檢測。
老牌好用的 SEO 檢測工具,功能十分全面,幫助這個部落格檢測出許多未知的問題。
專門檢查網頁技術兼容性與版本的網站,只需要搜尋關鍵字便能得到相關的解釋、版本資訊、全球覆蓋率、相關問題回報……等對開發決策極有幫助的資訊。
線上生成並分享漂亮的程式碼圖片,支援無數種語言與代碼高光風格,甚至可以客製化背景、字體細節與邊距,支援不同尺寸與格式輸出。製作教學文章或分享代碼片段時很好用。
將你的開發環境搬運到雲端上,一些實驗性質或簡單的專案都可以在該平台上編寫,適合一個網頁專案快速演進與分享時使用。
即時的線上開發環境,輕鬆地創建網頁應用程式、實驗程式碼、測試想法,並分享創作。通常規模大一點的實驗性專案我會用它來製作。
讓學習程式就像鍛鍊武功,在這裡每一道題目都著重在幫助你提升技術能力,題目總共分 8 級以可以自由選擇不同種類的程式語言練習。
你能想像與開發有關的文件都詳細集合在一起,有即時搜尋、離線支援、行動版本、深色主題與鍵盤快捷鍵……等功能。這是一個由 freeCodeCamp 主導的開源計畫
根據一天的地點和時間調整螢幕的色溫,目的是減少夜間使用時的眼睛疲勞和晝夜節律的中斷。通常大多時間都會開著減輕眼睛對強光螢幕的不適,特別適合長時間程式開發時使用。
對於撰寫一些重複的 Boilerplate Code 或是簡單的概念 Copilot 都能夠秒速解決,學生有全額免費優惠,還不快去體驗!
開源 API 開發工具,透過簡潔美觀的介面與豐富的延伸功能管理與紀錄 API,無須登入也能快速上手使用。
將資料轉換為可互動的圖表,不管是 JSON、YAML、XML、CSV……基本常見的資料格式都有支援,如果冰冷攏長的資料難以閱讀會建議嘗試看看使用這個工具。
我將 notepad++ 作為臨時的程式和想法剪貼簿,它極快的啟動速度和少量的資源消耗讓我非常滿意。
線上即刻評測你的網站分數,並給予反饋。與 Lighthouse 相同,同為 Google 團隊所研發出來的檢測工具。
用於計算與生成響應式圖片的尺寸的工具,用於生成圖片的 sizes 與 srcset 屬性值特別好用。
找工作、製作與參考線上作品集,也有相關的部落格與社群,介面乾淨漂亮、社群活潑有趣且功能強大,就算不付費使用體驗也讓我非常滿意。
由行政院主計總處推出的台灣薪資查詢平台,可以直觀的計算自己的薪資與全體受雇員工之間的關係、了解各產業薪資間的差異……等
透過分享職場或面試經驗或購買方案,解鎖網站內的評論。並且也有搭配插圖的勞動知識相關的部落格文章值得一看。
全匿名的意見交流平台,雖然網站背後沒有再繼續營運,不過還是可以嘗試打探出一些網路上對不同公司的評價(參考性質)。
關於職責、關於技術、關於團隊、關於未來可能的同事、關於公司……等可以詢問公司的問題開端。以下清單裡的問題對於參加技術面試的人來說可能有些用途。清單裡的問題並不一定適用於某個特定的職位或者工作類型。
主打手繪風格的線上白板,操作直覺且功能強大,想要快速線上討論會考慮使用。
直覺多功能的白板工具,如果團隊使用 Figma 可以考慮滑順接軌使用 FigJam 來構築想法。
一系列的思考與決策框架幫助你了解問題 > 溝通 > 做出決定 > 解決問題,如果要嘗試系統性的解決問題可以參考看看有那些思考框架可以應用,方法論都有詳細的解釋。
集合了各種與學習網頁無障礙相關知識的網站。提供了豐富的現成模式,包含了代碼示例和圖示解說,輕鬆學習如何使網頁更具可訪問性。
給開發者的無障礙指南
清晰的圖文與互動性案例幫助你了解如何撰寫不過時且防範錯誤的 CSS,對響應式網頁觀念不熟悉的開發者看完絕對會有收穫。
從專案發想到設計規劃與實作的實際流程與建議,優秀的資源統整與翻譯。
上百個與瀏覽器相關的技巧,包含了各式各樣瀏覽器的範例與分類,重點是有詳細的圖解與說明十分實用。
超齊全的前端開發者面試問題,包含多國語系並且在 GitHub 上有著近 60k 星的好評,如果你是前端開發者一定會對這些問題感興趣。
身為前端工程師,無論工作年頭長短都應該掌握的知識點。
從糟糕的實際案例中學習 HTML,不良實踐的集合
如果有人(或我自己)想要入門 JavaScript 或對 JavaScript 不熟悉,我會第一時間想到這個網站,毫無遲疑,這是超棒的入門資源。
主打在 x 分鐘內上手 y,這裡 y 可以是任何事情,分享在 GitHub 上,有不同語系的熱心人士分享的精煉文章,簡練到有點 CheatSheet 的感覺。
強化你建構網頁應用的能力……透過學習各式各樣常見的 pattern!包含 JS、React、Vue 以及各式各樣相關的資源。
免費學習最齊全的重構技巧與設計模式,透過選擇不同程式語言代碼與親切的插畫了解更多。
從 2019 開始的年度 CSS 統計,紀錄全球大眾對於新技術的期望與看法,了解趨勢有助於更清楚網頁世界的走向。
最全面的 HTML 統計,紀錄全球大眾對於新技術的期望與看法,了解趨勢有助於更清楚網頁世界的走向。
從 2016 開始的年度 JS 統計,紀錄全球大眾對於新技術的期望與看法,了解趨勢有助於更清楚網頁世界的走向。
有關前端技術與UI設計的資訊,W3Hexschool 通通都有。在這裡,你可以學習新知識,增加自己的能力; 同時,你也可以分享新知識,幫助更多人學習。 不管是遊戲還是教學文章,都是能幫你累積實力的好工具。
Chrome 團隊建立的全面知識庫,從效能、隱私到無障礙各種網頁開發的方方面面都有系列文章可以閱讀。
接續 ChatGPT 的後起之秀,有時候它太忙我會找 Gemini 聊聊,效果一樣不錯且看起來預設功能更多,都是協助寫作發想的好夥伴。
書寫正式英文文書時常會擔心忽略錯字或措辭不夠完美,透過它們提供的免費功能時常能幫我揪出許多書寫上能改進的地方,十分推薦需要校稿助手輔助寫作的你。