邁向網頁前端宇宙
UI/UX 工程師

UI 設計工作一般包含互動設計、資訊架構、視覺設計、動作設計,台灣大多數在找的是負責畫 Wireframe 的平面設計師,還會要求 UI 設計師要會 HTML、CSS、JS。UI 設計包山包海,產出也包山包海。Functional Map、Flow Chart、UI Flow、Wireframe、Mockup、切圖、標示文件、Prototype,被叫去做使用者測試寫報告也不意外。
(資料來源:嫁給 RD 的 UI Designer)
一般必須具備 製圖工具、簡報工具、文書工具 等操作能力。
基本工具:Photoshop、Illustrator、Adobe XD、Sketch
加分工具:HTML、CSS、Bootstrap、Material Design
經驗分享:設計更具有競爭力的UI/UX作品集 Designing a more competitive ux/ui portfolio、如何準備您的 UI 作品集,打造完整的「作品集體驗」、怎麼做UX 與服務設計的作品集?
網頁設計師

運用電腦網頁設計軟體,結合電腦系統之文字、聲光、音樂、圖片、影像及動畫功能,將新聞、知識、資訊、輿論或廣告,編撰設計成網路媒體網頁內容。另外,測試、偵錯及安裝電腦網路媒體網頁。對電腦網路客戶,提供網頁設計諮詢服務及技術性建議。網站內容維護:包含活動網頁設計、Banner設計、EDM視覺設計。
(資料來源:1111人力銀行 薪資公秤)
一般必須具備以下能力:
- TIOBE 指數(程式語法流行度的指標,索引每月更新一次)
- HTML + CSS 網頁排版
- JavaScript 互動設計
前端工程師

負責 Web 前端開發並持續優化,與後端工程師協作,與 PM、UI/UX 設計師合作,討論畫面架構,分析討論前後端串接規則,並提升網頁質感與體驗。
- 熟悉 HTML、CSS、JavaScript 與頁面架構和佈局,熟悉 W3C 標準並了解 Web 語意化
- 了解任一前端框架:React / Vue / Angular
- 具備 SPA (Single Page Application) 經驗
- 能解決瀏覽器相容問題
除 網頁設計師 的技能外,還必須具備以下能力:
- 前端框架
- Git / Github
- AJAX / JSON
- 其他主流框架
- 其他學習資源(陸續增加中…):

關於艾倫
網域名稱申請及轉址
※同場加映:Namechk、nomino、Name checkr、The Name App、BrandHunt、CrunchBase...
虛擬主機
※同場加映:Gandi、SSL Checker、SSL for Free...
系統環境及工具
網頁瀏覽器

Google Chrome
Chrome程式碼是基於其他開放原始碼軟體所撰寫,包括Apple WebKit和Mozilla Firefox,並開發出稱為「V8」的高效能JavaScript引擎。Google瀏覽器的整體發展目標是提升穩定性、速度和安全性,並創造出簡單且有效率的使用介面。據StatCounter統計,截至2019年第一季度,Google瀏覽器在全球桌面瀏覽器的網頁瀏覽器的使用分佈為72%。

Mozilla Firefox
Mozilla Firefox(簡稱Firefox),中文通稱火狐,是一個自由及開放原始碼的網頁瀏覽器,由Mozilla基金會及其子公司Mozilla公司開發。Firefox支援Windows、macOS及Linux,其行動版支援Android及Firefox OS。Firefox有許多特色,如分頁瀏覽、拼字檢查、遞增搜尋、即時書籤、下載管理員、自訂搜尋引擎、隱私瀏覽等等。使用者還可以透過附加元件和布景主題來自訂Firefox的功能和外觀。

Cent Browser
近年在 Ptt 瀏覽器版很紅的瀏覽器,以 Chromium 為核心基礎修改而成,和許多人使用的 Google Chrome 可以說如出一轍,最主要的部份是已經針對記憶體進行最佳化,如果你對於 Chrome 記憶體怪物又愛又恨,或許能考慮試試看。Cent Browser 對於 Chromium 細節做出諸多改進,加入一些使用上更便利的功能,例如對於時常「下載」的朋友來說,它允許你在下載檔案時選擇自己慣用的下載程式;另一個我很喜歡的功能是可自動隱藏書籤列,不需要自己手動透過快速鍵隱藏。另外,還能在開啟分頁後透過滑鼠滾輪來左右移動分頁列,這都是當前官方版 Google Chrome 還無法做到的功能。

Opera
Opera是由Opera軟體為個人電腦推出的網頁瀏覽器。最新版本可用於Microsoft Windows、macOS和Linux作業系統,並使用Blink排版引擎。而早期版本則使用Presto排版引擎,並在FreeBSD系統上運行。Opera以高效能、高速度、高靈活性、高客製化度、安全性為其優勢,其支援多種網路標準並內置多種實用功能。

Vivaldi
Vivaldi是一款網頁瀏覽器,由韋瓦第科技公司(Vivaldi Technologies)所開發,該公司由Opera軟體公司的創辦人與前執行長譚詠文和資深副總經理富田龍起(Tatsuki Tomita)離開Opera公司後另起爐灶新創辦。Opera原有不少受歡迎的專屬功能,卻在從Presto引擎更換為Blink的轉型過程中被削減部分功能而少掉原味。為此,Vivaldi追求「為我們的朋友而打造」,旨在為原先Opera的忠實用戶,如高階技術專家、重度的網際網路用戶,提供原Presto Opera的諸多專屬功能,例如自訂面板、筆記、分頁群組、單鍵快捷鍵等等。2016年4月起,Vivaldi正式版發佈。Vivaldi名字來源於義大利作曲家韋瓦第。

UC Browser
UC瀏覽器是一款基於手機和電腦而研發的瀏覽器,由中國優視科技有限公司開發。UC瀏覽器電腦版是一款UC公司在原來UC手機瀏覽器基礎上推出PC平台瀏覽器,依靠領先的手機行動端的技術最佳化,打進桌面瀏覽器市場,UC瀏覽器電腦版組態雙核雙引擎Blink核心和Trident核心。電腦版的「智慧型拼頁」、「雲端加速」、「下載加速」、「紅杏出牆」等功能很明顯是將手機版瀏覽器的特色功能遷移至了PC端。
文字編輯器

Visual Studio Code
Visual Studio Code(簡稱VS Code)是一個由微軟開發的,同時支援Windows、Linux、和macOS系統且開放原始碼的程式碼編輯器,它支援測試,並內建了Git 版本控制功能,同時也具有開發環境功能,例如程式碼補全(類似於 IntelliSense)、程式碼片段、和程式碼重構等,該編輯器支援用戶個性化組態,例如改變主題顏色、鍵盤捷徑等各種屬性和參數,還在編輯器中內建了擴充程式管理的功能。

Adobe Dreamweaver
Adobe Dreamweaver(前稱Macromedia Dreamweaver)是Adobe公司的網站開發軟體。它使用所見即所得的介面,亦有HTML編輯的功能。它現在有Mac和Windows系統的版本。原本由Macromedia公司所開發。

Sublime Text
Sublime Text是一套跨平台的文字編輯器,支援基於Python的外掛程式。Sublime Text是專有軟體,可透過套件(Package)擴充功能。大多數的套件使用自由軟體授權釋出,並由社群建置維護。

Adobe Brackets
Adobe Brackets是Adobe Systems開發的一個以HTML、CSS及JavaScript編寫的HTML編輯器。在MIT授權條款下的免費軟體,並於GitHub上維護。現可供三個平台下載使用,包括在Microsoft Windows、Mac OS X及Linux。 Adobe Brackets支援增加外掛程式以提供額外的功能擴展,目前可用的外掛程式例如支援增加偵錯、瀏覽器特定CSS前綴、JSDoc註解等。

Atom
Atom是由GitHub開發的自由及開放原始碼的文字與程式碼編輯器,支援macOS、Windows和Linux作業系統,支援Node.js所寫的外掛程式,並內建由Github提供的Git版本控制系統。多數的延伸套件皆為開放原始碼授權,並由社群建置與維護。Atom基於使用Chromium和Node.js的跨平台應用框架Electron(最初名為Atom Shell),並使用CoffeeScript和Less撰寫。Atom也可當作IDE使用。被它的開發者稱為「21 世紀的「駭客」文字編輯器(hackable text editor for the 21st Century)」。自2014年5月6日起,Atom的核心程式、套件管理器以及Atom基於Chromium的桌面程式框架皆使用MIT授權條款釋出。

Codepen
Codepen 是近幾年很受歡迎的線上編輯器。與同為線上編輯器的 jsFiddle 相比,介面設計美觀許多,點進網頁就可以看到許多厲害的作品。Codepen 的 EXPLORE 做得很好,從進入首頁就可以看到各種作品,你也可以透過輸入 tag 搜尋你想看的內容,且分類也算是細緻,從 Pen 到 Project 都有,你可以依照個人想搜尋的專案大小來分別尋找更符合自己想看到的內容,甚至可以加入收藏,是兼具美觀與社群的超棒編輯器。