最新消息

關於五倍還有更多你可以發掘的,都在這邊說給你知!

Jan 18 2020

圖片作者:MustangJoe 圖片來源連結 開發網站過程中,環境部署或是寫設定檔是一件不簡單的事。比起寫程式,寫設定檔不是開發過程中那麼「頻繁」需要做的事情,所以熟練度跟寫程式比起來多少有落差。 每次要部署或是做 CI / CD 相關的設定時,幾乎都是拿手邊的設定檔來修修改改,如果沒有什麼太特殊的功能,每個專案要做的設定也不會差太多。有沒有什麼服務可以幫我們把這些事做好,讓我們把程式推到 GitHub / GitLab 上的時候,就自動幫我們跑測試或是部署? 在以往只想得到 Heroku...

Jan 4 2020

大家好,新年快樂!對於現代 web 開發框架來說,登入驗證幾乎都有成熟的 library 可以使用,例如 Rails 可以搭配 Devise gem 快速的搭建一個會員登入的系統。但是如果在前後端分離的單頁式網頁(Single Page Application ,以下簡稱 SPA)上,該怎麼跟後端的 API server 好好說哈囉呢? 本文會先討論我們每天在接觸的一些網站基本原理: 一般網站如何實作登入 Cookie、localStorage 與 sessionStorage API...

Dec 28 2019

什麼是 Rake? Rake 是由大師 Jim Weirich 所開發的任務程式工具,就像是 Ruby 版的 Make,可以用來執行各式任務。 Rake 是以 Ruby 語法編寫任務於 Rakefile 檔案中,並用 command-line interface(CLI)輸入指令 $ rake 來執行任務。Rake 可以使用在任何環境,並非只有 Ruby 專案可以使用,只要有 Rakefile 就可以使用 Rake 來執行任務。 文章之後會簡稱 command-line interface...

Dec 21 2019

SASS (Syntactically Awesome Stylesheet) 是一種預處理語言 (pre-processing language),透過 SASS 可以更有效、更結構化的產生 CSS,並有助於減少撰寫重複的樣式,讓你的 CSS 更易於維護。今天要跟大家分享的是 SASS 的 @mixin 與 @include。 SASS 提供兩種語法,分別是 SCSS (Sassy CSS),以及 Indented,最大的差別在語法上 {}、;、= 的有無,以及前者的副檔名為 .scss

Dec 14 2019

前言 這篇文章主要是提供給初學網站設計或由平面設計轉網站設計新手的文章。 我將分享我在設計網站的過程,希望可以幫助新手在開始進行時不至於毫無頭緒。 另外,不管你是新手設計或是已經入行一陣子的設計師,在設計的領域上每個人獲得靈感的方式、設計流程都不同,這邊分享其中一個方式,提供你作為參考,期許你也可以找到屬於自己的設計流程和工作模式,一起面對各種設計挑戰。:) 第一步|你所要設計的網站類型? 首先,你必須要確認你目前設計的網站是屬於哪個類型? 他要達成什麼目的?他提供什麼樣...

Dec 7 2019

(範例會以 Rails 來實作,登入的部分使用 devise 套件為例) 前言 不知不覺來到了 2019 年末。從 2016 年到現在,AMP 也越發成熟完整(但我怎麼還是覺得 bug 還是有點多w),有很多實用的 components 也有豐富的範例可以參考。如果想要大大地提升網站在手機上的搜尋排序,實作 AMP 網頁會帶來相當不錯的效益呢。 由於 AMP 的種種限制,除了拿來實作 content 為主、功能不多的網站,大家很可能仍然對 AMP 望之卻步。今天就要來跟大家介紹透過實...

Nov 30 2019

(Cover Photo by John Schnobrich on Unsplash) 所謂「半路出家」的工程師 也許以下的故事對你/妳而言似曾相識: 之前沒有程式或相關背景的你/妳,透過自學或參加線上/實體課程,找到了第一份工程師的工作。 到了就職報到的第一天才發現,主管跟同事所說的話怎麼都聽不懂;好像當初所學的,其實對於工作情境而言根本就不夠用。過了幾天,把主管交代的任務完成、開始在專案發 PR 。這些 PR 中,有許多部分都被主管評為需要修改。更不幸的是,好像怎麼修改都無...

Nov 23 2019

身處在講求效率的時代,完整的開發流程當然少不了 CI/CD。什麼是 CI/CD 呢?CI(Continuous integration)中文為「持續性整合」,目的是讓專案能夠在每一次的變動中都能通過一些檢驗來確保專案品質。 CD(Continuous Deployment)中文則為「自動化佈署」,讓專案能夠自動在每次變動後能以最新版本呈現。 由於想要體會 CI/CD 到底有多方便,於是想要藉由實做一個簡單的 Node.js 專案來實際體驗看看。 內容架構 寫簡易的 Node.js Server

Nov 16 2019

前言 「工欲善其事,必先利其器」,通常看到這個開頭,就知道今天要來介紹工具。在寫程式時,大家通常習慣的 Editor 是哪些呢? Vim、Emacs、Atom、Sublime、VSCode、記事本。而上述的 Editor 中,最廣為人知的就是被譽為「編輯器之神」的 Vim 和被譽為「神之編輯器」的 Emacs。由於這兩款 Editor 不同的特色與本質,形成了各自的派系並且相互歧視,因此還引發了 Editor 界的一場聖戰「Editor War」。 回到正題,這次主題的 VSCode ...

Nov 9 2019

前言 大家自助旅行時喜歡搭車還是自駕呢?有經驗的旅人會說「看情況」。熱門景點大多交通便利,雖然行程多少會受到路線和班次限制,但整體來說一般還是會因為各種方便,選擇搭乘大眾交通工具吧。那如果是要去比較特別的景點的話呢?或者是雖然是要去四通八達的地方,但帶了一家老小呢?你確定你真的要帶著父母(或小孩)和大包小包的行李,在沒有電梯的月台狂奔去趕兩小時才一班的車嗎?這種情況下,正常人都會勸你們跟團或自駕的。 專案開發其實也是類似的狀況。敝公司的讀者想必對 Ruby on Rails 都很熟悉;Rails...

Nov 2 2019

時間永遠是固定的24小時這麼多,如何掌握在有限的時間內取捨事情的優先順序? PM 手中可能會有多個專案在進行,最有可能遇到的狀況,例如: 你一早進到公司,正打開電腦要回 A 專案客戶的訊息,結果不到兩秒鐘, B 客戶問你能不能開個簡短的視訊會議討論他剛剛新開的 issue,接著 C 客戶突然又在群組上問你昨天會議的事情,然後同事走過來問你午餐要吃什麼(咦)。 是的,彷彿受到詛咒一般,點開什麼東西,事情就會一卡車的跟著飛來XD 做事之前,先排列好優先順序,勇者打怪也是要照步驟來的。

Oct 26 2019

通常我們在編寫 HTML 表單中的輸入標籤(或稱 Input Tag)時,都會在每個 Tag 前後加入一些附帶特定樣式,通常是 CSS Class 的 HTML Tag 作點綴修飾,本篇文章的目的為透過 Step by step 的方式,介紹如何透過繼承與拓展 Ruby on Rails 的 FormBuilder 來建立適用於 Bulma CSS Framework 的 FormBuilder。 Bulma CSS Framrwork 與安裝 Bulma 是一個純 CSS 的前端網站...

Oct 19 2019

PM 除了常被討論到的溝通、專案管理技能,在團隊中是否具備補位能力,也是能否讓團隊成員妥善發揮的重要指標,尤其在小團隊協作中,善於補位的 PM 能給的 buff 效果也會更為顯著。 那什麼是補位?補位又該做什麼呢? 簡單來說,在專案過程中能讓開發流暢進行,但沒有專人負責、沒被注意到、可能讓夥伴被打斷的事項,或是需要反覆確認的細節等,都會需要有人能適時補上空缺。當然,這也不僅是 PM 的責任,就像出團打副本,如果每個人都能靈活支援彼此,應該都能滿載而歸才對 XD 而在小團隊中, PM ...

Oct 1 2019

「咦?為什麼系統的訂單金額一直都是顯示成 0 元?」「從什麼時候開始有這問題的?」 主管看到訂單系統的顯示結果不正常,想問到底是怎麼一回事。但這個專案的開發團隊有二十多人,大家每天都有許多的 Commit,也許某位同事無意間改了計算稅務的功能,結果不小心跟著改到訂單顯示金額了。 如果很明確的知道問題是出在哪一個檔案的話,我在「為你自己學 Git」一書的「【狀況題】等等,這行程式誰寫的?」章節曾經介紹過 git blame 指令可以找出指定檔案的第幾行是誰在什麼時候寫的,一下子就可以把犯...

Sep 28 2019

大家好,今天要來跟大家說一個如果是非本科系的工程師不確定上課有沒有學過,如果是本科系的應該是上課有學過,菜鳥工程師可能會不小心踩到的坑,在開始說明之前先給大家看一段程式碼。 這是一段很簡單的 Ruby 程式碼,表示調整廣播電台頻道的類別,支援預設電台的功能,也就是說使用者在按下某個按鈕,就可以跳到喜歡的頻道(話說現在年輕人還知道電台嗎?@@)。 class Tuner def initialize(presets) @presets = presets clean ...