首頁

0

鐵人賽:別使用平面繪圖軟體繪製 UI 設計

除了前端課程外,自己也是有辦一些額外的活動,而這些都會說到我是一名設計師轉職的前端工程師,除了介紹前端外,我也會介紹一些設計觀念。介紹時我大多都會使用 Sketch 來進行說明,主要原因是 Sketch 的工具非常貼近於網頁及 UI 上的開發。 而這些活動結束後,都會有些朋友詢問到:「一定要用 Sketch 來做設計嗎?Illustrator 或 Photoshop 不足夠嗎?」,我總是會不厭其煩

0

鐵人賽:前端「設計」聖光之路

我是卡斯伯,本身是設計出身,從高職 -> 大學 -> 研究所都是設計相關領域,出社會後從事網頁設計後來轉職為前端工程師。雖然主要工作是前端,但還是會有不少時間接觸網頁設計,所以相信我的經驗也是能夠帶給大家許多參考,並且完整的前端經驗也會有助於這些概念的實作。 為什麼要寫這系列文?不同領域的人們在協作時都會有些許的紛爭,設計師與工程師一直以來也會有這樣的嫌隙,但其實並非所有「設計師與工程

0

Github Pages 自訂網域免費升級 https

Chrome 在 68 版以後會將沒有 https 連線的網站標上不安全的字樣,如果使用 Github Pages 但又不想花大錢買憑證的朋友,可以參考本篇免費安裝 https 憑證。 現在 Github Pages 免費提供自訂網域核發 HTTPS 憑證,且這段流程是完全自動,不需要額外申請,雖然是全自動的,但也需要符合規範才能自動申請。 需要注意的地方憑證是 Github 代為與 Let’s

0

老同學來相找,一同轉行做 UI 設計師

最近有些高中、研究所老同學、朋友們看到我在六角學院,也會問到如何轉行 UI、前端,很高興你們來詢問,如果對於此領域有興趣的朋友都可以來聊聊。 在此我推薦一些資訊,可以協助你們(或大家)從網頁設計慢慢轉行到 UI、網頁設計師。不過首先,平面設計的觀念到這個領域不一定受用,有許多邏輯性的概念是不同的。如:單位尺寸、色彩、字體字型、資訊流觀念都還是要重新學習,許多東西簡化了,也有許多複雜化了,可以先花點

0

Github 中的 ssh、https 路徑有什麼差異? - 如何設定 Github SSH 金鑰

再推出 Hexo 介紹影片以後,會有許多同學私下問我關於 https 與 ssh 這兩個有什麼差異?另外會不會影響部署?為什麼看老師是使用 ssh 而自己用 ssh 卻跳出權限不足? Git 中 https 與 ssh 這兩個有什麼差異?這兩個均是 Git 儲存庫的路徑,Github 官方推薦使用 https 但同時也提供 ssh 的連線方式,兩者差異點在於: https: 在上傳時需要輸入帳密

0

鐵人賽:邁向 JavaScript 的勇者

這次是第四次參加鐵人賽,先前參加的主題分別為兩次 CSS 及一次 JavaScript (D3.js)。 因為原本是視覺設計師,在過去曾經打算專精於 CSS 就好,所以不斷專精 CSS 的表現模式以及他的開發模式,我還曾經開發過幾次的 CSS Framework (有實際運用過),不過隨著時間發展這個概念有了改變 :D。 撇開 CSS 不說,對於多變的 JavaScript 還是有一些自己的看法,

0

鐵人賽:透過 ESLint 學習 JavaScript ES6

至於 ES6 該怎麼學比較好!?很建議安裝 ESLint 來邊學邊修正觀念。ESLint 是一個團隊統一程式碼結構的工具,如果程式碼不符合規範,則會出現相對應的提示,而其中有三大主流規範是許多開發者愛用的: Google Airbnb JavaScript Standard Style 三個都有各自的擁護者,風格上 Airbnb 較為嚴謹,每一種語法都有嚴格的規範;而 JavaScript S

0

鐵人賽:ES6 建構式語法糖

這一段與先前介紹的建構式概念接近連結,單篇觀看可能無法理解為何 JavaScript 要加入 Class 的概念,而 Class 在 JavaScript 只是個語法糖,讓建構式及原型更容易被表現而已。 ES6 建構式這裡我們先將先前章節的程式碼整理過來,除了順序有些調換外,觀念上是沒有差異的,最後產生的值包含了物件屬性及原型的方法。 1234567891011121314151617181920

0

鐵人賽:JavaScript Await 與 Async

不知道上一篇大家對於 Promise 概念如何,本篇介紹的內容與 Promise 依然有相關性,因為這兩者就是建構於 Promise 之上的,如果直接從原始碼看可能不是很好瞭解這語法怎麼使用,不過可以先直接用 Google 翻譯了解大概意思: await: 等待 async: 非同步 Await 等待Promise 中完成會透過 then 來回傳,在 await 中他則是會等待這段函式完成後在

0

鐵人賽:使用 Promise 處理非同步

JavaScript 中有很多非同步的事件,而這些事件我們很常使用 callback,在一層包一層後就會出現知名的 callback 地獄,而 Promise 就是為了解決此問題而生的,因此每次介紹到 Promise 都會先下以下這張圖鎮鎮樓。 上一篇所介紹到的 Fetch() 就是使用 Promise,資料接收後才會繼續跑 then() 的內容。而 fetch() 是已經包裝好的 Promis