台灣製造,新一代部落格平台 Logdown 團隊專訪(上)

由國內團隊打造的部落格平台「Logdown」前兩天登上了 Hacker News 首頁,在國外的開發者圈引發了一陣話題。Inside 訪問到背後的團隊,來看看一個駭客松的作品如何發展成一個產品的開發故事吧。
評論
評論

「部落格」至今已經發展多年,國外有 WordPress、Blogger 等老牌平台,國內也有 邁向死亡中的 無名小站與痞客邦等,然而幾年前由 Twitter、新浪微博、Plurk 等興起「微網誌(Micro Blogging)」風潮稍稍將網友們的目光焦點從傳統部落格移開,一度引發「人們不寫長篇文章了」、「文字內容過短、支離破碎」等擔憂,不過最近又重新吹起強調優質內容與良好寫作環境的部落格風潮,其中以 Medium 特別受到矚目,中國也類似的平台「简书」1,由 WordPress 前員工在 Kickstarter 成功募資的「Ghost」也將在今年推出 2。(值得一提的是,身為 Blogger、Twitter 與 Medium 創辦人的 Evan Williams 可說是無役不與,引領趨勢走向——哪怕他起初無意如此。)

台灣也有人參與了這股浪潮。

最近有台灣團隊推出了一個全新的 部落格平台「Logdown」,主打好用的「Markdown 編輯器」與順暢的文章編輯介面,上傳圖片只需要用拖拉的方式即可(用傳統的選擇檔案上傳當然也行),目的就是要讓使用者專心於寫作這件事。

Markdown 是由美國 果粉 部落客 John Gruber 於 2004 年發表的一種標記語言(Aaron Swartz 也有參與 3),根據 John Gruber 本人的說法,Markdown 是一種專為網路寫作者設計、將文字轉換成 HTML 的語言標記與工具(他以 Perl 語言寫成),讓作者可以用簡單的純文字格式寫作,然後轉換成 HTML 格式。

Markdown 比起 HTML 更加好讀也更容易學習,如同「Markdown 語法說明」網頁所稱:「一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈,並且看起來不會像是由許多標籤或是格式指令所構成。」4 Markdown 更是逐漸成為網路上受歡迎的語言標記,還發展出許多工具。許多網路公司與開發者愛用的 GitHub 網站甚至將 Markdown 稍加修改後做為網站的文件、評論格式。Inside 也有幾位作者是以 Markdown 語法在寫文章。

Logdown 的主要特色是:

  1. 簡單大方的 Markdown 編輯器。
  2. 圖片上傳方便,用滑鼠拖放圖片即可上傳。
  3. 適用於開發者,但也沒有複雜的設定。(well,當然也適用於一般使用者——如果沒有要加裝一堆外掛或小工具的話)

Logdown 編輯介面操作影片:

開發中的功能:

  • Github / Dropbox 備份
  • 客製化佈景主題
  • 客製化 CSS
  • 族繁不及備載(他們也很歡迎使用者寫信去「要」功能)

Logdown 前兩天在 Hacker News 上引起話題,最高曾衝到首頁第三名(下方截圖為第四名)。也許登上首頁的方式有點怪(請看下篇),但無論如何,Logdown 跟 世界迷霧POP 一樣,都在上線後沒多久便登上 Hacker News,讓更多國外的使用者知道他們的產品。

Logdown 還在開發階段,預計於今年九月推出正式版,目前的 beta 版已開放給所有人使用,也支援使用者從 WordPress、Blogger、Tumblr 與 Octopress 等平台匯入內容。


左四是 Mark Zuckerberg,右二是 xdite,右四是 zhusee

我們透過 E-mail 訪問了 Logdown 的開發團隊,其中兩位成員是去年 Facebook Developers World HACK 大獎 得主 XDiteZhusee,目前團隊有 4 位成員,其中三位來自 Rocodev,一位來自 T 客邦,Logdown 是他們利用下班時間與假日開發出來的。

以下是這次的專訪內容:

請先簡單介紹一下團隊成員的背景

xdite
Rocodev CEO,負責後端功能開發,文案,以及回覆客服信件。曾經拿到 2012 Facebook World Hack Grand Prize

zhusee
Rocodev Frontend Developer,負責視覺設計、UI 設計與實作。曾經拿到 2012 Facebook World Hack Grand Prize

tonilin
Rocodev Developer,Frontend / Rails 雙棲,主力在 Markdown 編輯器與 Markdown Parser。

chitsaou
Techbang Developer,Frontend / Rails 雙棲,負責後端功能開發。

為什麼想要做部落格平台?有受到什麼外在的影響或啟發嗎?

我們平常在開發產品之餘,都有寫部落格分享技術的習慣。剛開始大家都是使用 WordPress + HTML 或 Blogger + HTML,但這只是能寫字的解決方案,真的要認真貼程式碼或貼圖都相當麻煩。

後來 Markdown 這門標記語言興起,大家開始發現使用 Markdown 寫作是一件很輕鬆舒服的事。但是那時候沒有一個部落格平台「原生」提供 Markdown 格式寫作,唯一接近這樣條件的只有 Jekyll 這樣的靜態網站產生器 (Open Source),後來有人基於 Jekyll 之上做出了一堆外掛懶人包,包裝成了專門寫部落格的 Octopress(Open Source)。 xdite 後來終於忍不住搬家到了 Octopress,還寫了一篇搬家的原因,當時也造成了一股技術 Blogger 搬家旋風。

為什麼要叫「Logdown」?

Blog + Markdown。

為何選定 Markdown 編輯器做為你們的主打特色?

我們是 Mou 這個 Mac 上的 Markdown 軟體的愛用者,Mou 的標語是:Markdown editor for web developers,on Mac OS X。Mou 是目前市面上我們覺得做了最多「正確」的事的 Markdown 編輯器,應該也是最多開發者愛用的 Markdown Editor。

編按:Mou 是一款由中國開發者羅晨所開發的 Markdown 編輯軟體(目前還是免費的 beta 版),Inside 的幾位編輯也是用這套程式 ,雖然我們不是開發者 XD

程式碼要能夠被上色排版

但幾件遺憾的事之一是 Mou 不支援 Github Flavored Markdown,據作者說將來也不打算支援(能夠理解開發者不想支援格式以外……)。Github Flavored Markdown 並不是 Markdown 的標準規格。但它卻是開發者 100% 會用到的格式之一,因為 GFM 支援程式碼上色高亮(highlight)。這件事為什麼相當重要是因為,我們幾乎都是使用 Mou 在寫 Octopress 上的 Markdown,而不支援 GFM 讓我們在寫作貼程式碼時,排版爆炸的一塌糊塗,這點實在讓人覺得很無奈。

傳圖貼圖要很方便

其二就是 Mou 也沒有上傳貼圖功能(我們也能夠理解開發者不想支援)。寫部落格能夠邊寫邊順暢地貼圖是一件很重要的事。因為傳統的編輯流程是:想到需要一張圖 => 跑去 Flickr 傳圖 => 拿到貼圖程式碼後 => 拿回來貼到 Markdown 編輯器預覽,要是不合意就退回到 Flickr 挑選適當尺寸的再重貼。這件事一旦在寫文章編輯過程中重複幾次,就會讓人感覺悲劇,想好好寫作的心情都沒了。

好的編輯器佔了使用意願的 70% 以上

Markdown 被發明的原因,就是希望人們能夠別管排版,專注在內容之上。我們發現大多數的編輯器都沒有很好的去解決寫作流程中會遇到的問題。我們是很樂於付錢給開發出能夠開發出流暢寫作方案的人,可是我們等了一兩年,發現沒有人作,於是只好自己做了…… 我們希望開發出一個讓寫作者能夠很專注在「寫作本身」的環境,要達成這件事,針對編輯器與 Markdown 解析器的功大概要佔了 70% 以上。

投入之前做了哪些評估?

老實說我們都只有做了簡單的評估而已。要做成什麼樣的介面,做成這樣的介面要採用什麼技術,採用這樣的技術大概會遇到什麼天險,如果遇到麻煩當下是否有解決辦法……

介面的評估

與其要講技術的評估,不如來講講我們對於介面上的評估,這很大的決定後面了我們要走的路。如果有看到我們編輯器的主介面,應該可以注意到我們並不是採用其他 Markdown 編輯器看起來很炫、包含即時預覽的兩欄式介面,而只是一欄式的「半即時」預覽。

這樣的設計其實是有原因的。早在 2011 年很久以前我們就有想自己做 Markdown 編輯器的衝動,那時候也是覺得兩欄式的寫作模式很酷。但實際後來自己刻一個作實驗以後,發現兩欄式雖然看起來很酷,但寫作體驗卻非常的差,特別是在「Web 介面」上。

因為硬要即時預覽的結果是,只能將寫作介面一分為二,這讓瀏覽器的操作介面區變得非常擁擠(特別是在蠻普遍的筆電機型:13 吋 MacBook Air 上),造成一個最糟的結果:作者無法舒適地撰寫文章。

寫作區不但被壓縮到只佔操作介面的一半,作者還會不自覺得地被另外一半的預覽效果吸引住目光而分心。

請記得,這樣的「即時預覽」的設計原先是要解決一件事:「確認格式不會跑掉」。但效果卻本末導致了。Markdown 被設計出來的初衷就是要使用者「儘量」不要去理「排版」管這件事。而所謂很炫的即時預覽,檢視過相關技術後,開發者也發現這是個假議題,因為目前再快的 Javascript Markdown Compiler 都很難做到「即時」預覽和精準的即時定位點。

那麼也就是說,寫作者原先應擁有的 100% 寫作空間,被這個「即時預覽」的功能排擠到只剩下 50%。而那 50% 其實根本就是被活生生白白浪費的。

既然是這樣,為何不還寫作者 100% 的寫作空間,而以熱鍵半即時預覽+ syntax highlight 讓作者舒服寫作呢?而以 Server Side 實作預覽另外一個好處也是 syntax 容易開發疊加,使用 JavaScript 要實作這件件事困難太多了。

兩欄式寫作還有一個缺點,寫作者常常會為了對齊預覽效果,下意識的移動滑鼠去操作這個視窗,但是蘋果的 magic mouse + 瀏覽器編輯器是個相當危險的事,因為方向一歪就會造成 <- -> 的翻頁效果,然後內容就不見了…… orz

市場的評估

我們相信這一塊看起來是「小眾」的市場可能不是「很小」。前一陣子在 Kickstarter 上有個很紅的 Markdown Blog 軟體募資專案「Ghost」(使用 Node.js 開發),打算募 25,000 英鎊,結果一下子就募到 19 萬英鎊。顯見這市場上缺乏一個真正「好」的 Markdown 軟體,而且大家非常期待這套軟體。


▲ Ghost 的兩欄式編輯介面

我必須要坦承的說,我並沒有 back Ghost 這個專案,很大的原因是我第一眼看到,我打從心理就覺得 Ghost「做錯」了方向,而且 Ghost 的作者「也許」不是一個「作者」。為什麼這麼說呢? Ghost 有漂亮的「兩欄式」寫作介面,以及相當漂亮的後台。(編按:Ghost 有在自己的 Kickstarter 上說過,雙欄式介面不是新鮮的東西,但他們的編輯器是受到 Mou 的啟發 XD 但 Mou 也可以關閉即時預覽改回單欄模式。)

作者真的需要這些東西嗎?我自己是重度的 Blogger,兩欄式的缺點剛剛說過了。漂亮的 Dashboard,我真的不需要那些東西,我只需要一個簡單直覺的後台,讓我管理、搜尋文章,有個極好用的編輯器讓我寫作毫無障礙。


▲ Ghost 後台

Ghost 並沒有聚焦在這些「作者極想要的功能上」,相當可惜。

我們等一個好用的部落格軟體已經很久了,我認為等 Ghost 的作者意識到這些事並且實做出來後,應該又是一兩年後了。我們不想再等了,所以只好自己來做了。我們都是 Blog 軟體的重度使用者,我們知道自己需要什麼、不要什麼。(待續)

>> 〈 專為駭客打造,部落格平台 Logdown 團隊專訪(下) 〉


蛻變敏捷開發組織並不難! AWS Amplify幫前端工程師從雲端快速建立REACT程式

台灣企業勢必需要明確轉型策略,搭配適合的雲端工具作為入場券,一來降低數位化門檻、二來減少摸索資源的浪費。
評論
shutterstock_1451794139.jpg
評論

打造敏捷開發流程、加速前後端工程師的協作效率,是許多企業在面臨疫情之後,認為亟需將彈性元素納入為企業文化當中。雲端運算服務領導業者 AWS 台灣,觀察到前端工程師主要負責處理最貼近用戶的 Web、行動應用程式,但他們往往需要與後端團隊合作過程,遭遇耗費大量討論時間,才能處理使用者介面事項。

為了降低前後端的溝通成本,有些前端工程師在掌握介面管理能力之後,開始橫跨到後端的伺服器、資料庫開發經驗,甚至進一步培養技能,成為能負責測試、安全、效能多面向的全端工程師。

有的人會透過 Side Project(利用業餘時間開發有興趣的專案)或參加 Hackathon(黑客松)方式,運用 AWS 雲端工具嘗試自行擴展後端,並建立簡單易用的工具程式。究竟,AWS 平台提供哪些資源幫助前端工程師擴展更多元的技能樹?

掌握入門教學!前端工程師如何將 REACT 程式快速上雲

前端工程師運用 AWS Amplify,快速在雲端建立 REACT 應用程式

事實上,AWS 的入門課程指出,運用 AWS Amplify 在雲端建立 React 應用程式及服務集,只需五個學習歷程,包含建立 React 應用程式、初始化本機應用程式、新增身份驗證、新增 API 和資料庫、新增儲存體。如果想快速了解 REACT 程式快速上雲的方法及示範教學,本文節錄 AWS QUICKSTART 學習資源內容,幫助前端工程師更快掌握重點。

首先,何謂 AWS Amplify?AWS Amplify 是一項全托管 Front-End Web & Mobile 服務,採取無伺服器模式,在後端建立、部署和託管單一頁面 Web 應用程式或靜態網站的 Git 型 CI/CD 工作流程,加速開發過程直接整合其他 AWS 服務。舉例來說,像是整合封裝好的 Library 資源、或運用一些 Components UI 軟體去配置後端,以及利用 Admin 的 UI 做資源上的管理。

透過 AWS 增加雲端技能 在組織發揮你的影響力

AWS Amplify加速Develop、Deliver 與 Manage流程

AWS Amplify 主要優勢展現在三大項工作階段,分別是 Develop、Deliver 和 Manage。Develop 部分可利用 CLI(Command-Line Interface)或 Admin UI 設定後端,使用 GraphQL 或 REST API 設定也是可行的,進而快速建構一個前後端專案。此外,開發者還能搭配 AWS 其他服務,例如使用 AWS Authentication 全托管認證服務,或 DataStore、Storage 等多項 Feature Categories。

到了 Deliver 階段,若是要透過 AWS Amplify 執行 Web Hosting 任務,可拆解出三個流程。首先是將 Repository 與 AWS Amplify 進行連結,這邊可整合 Amplify Console 提供的支援資源包含 Github、Bit Bucket、Gitlab、以及 AWS 的程式碼代管工具 AWS CodeCommit。一旦連結以後,開發者可透過自己的 Configuration,决定在各個不同的 Build 要執行什麽樣的指令,最後再透過 Deploy 方式,幫助工程師進行前端的 Hosting。

在最後一個 Manage 階段,開發者則可利用 AWS Amplify 的 Admin UI,以開啓瀏覽器方式,透過視覺化介面統一管理資源。例如在 Admin UI 介面左側選單,涵蓋 Content、User Management 的區塊,讓參與專案但沒有 AWS Console 權限的使用者,可利用 E-mail 方式邀請使用者進到 Admin UI,進行一些設定或觀看其他相關資源;甚至在 Set Up 區塊還有相關選項,例如要針對 Data Modeling 或 APP User 做權限管理,以及可連結到 AWS 其他服務。

運用開放資源 AWS Amplify Framework,打造高效能應用服務

AWS QUICKSTART 學習資源還介紹到另一個 AWS 提供的開放資源 Amplify Framework,一樣可利用 Amplify CLI 的方式,配置 Web 和行動應用程式的前後端,以及開發者需要用到的服務,讓應用程式更易於構建,並獲得安全、高性能的使用體驗。

Amplify CLI 一樣有支援多個不同 Category,例如較常使用的幾個 Comment Line,像是Amplify Init 指令做初始化或創建幾個不同資源;或是 Amplify Status 指令,隨時在開發過程查看各個 Category 狀態;甚至專案結束後,可利用 Amplify Delete 直接把 Amplify 所創建的資源做一次性删除。另外也可透過 AWS Amplify Client 利用比較抽象化方式,讓開發者直接利用 Component 實現想要完成的項目。

填寫表單 找到適合你的快速上雲服務與工具!

實際示範給你看,設定 React 程式可以如此簡單

假設前端工程師現在要快速部署一項有驗證功能(Authentication)還要搭配 Rest API、GraphQL、Analytics 等服務的應用,如何快速設定 React 程式?在 AWS QUICKSTART 的學習資源後半段,有詳細說明要啟動這類型專案的操作方法。

開發者可以先利用 AWS Lambda Function 結合 Amazon API Gateway 方式,創建出一個 Rest API,到了 Authentication 階段,則使用到 AWS Cognito 的服務,接著針對 GraphQL 需求,可利用 AWS AppSync 服務,以及最後如果有 Analytics 的需求,也可以串聯 Amazon Pinpoint 工具。Amazon Pinpoint 是一項彈性而可以擴展的行銷通訊服務,開發人員可利用 Amazon Pinpoint API 追蹤 Web 使用者的行爲,或是針對 APP 推送、電子郵件、簡訊點擊行為蒐集到具體的資訊。

在這整套流程示範之後,值得特別強調的是,AWS AppSync 是一項全托管的服務,能及時更新,甚至在使用者離線時仍可以持續去創建和修改數據。一旦設備連上線之後,這項應用程式就可重新連線,並接到後端同步數據,達成彈性、自動化擴展或減縮各式 API 的請求。

打造第一個你在 AWS 上的應用程式

AWS 最後強調,Amplify 是相當適合建構出一個靜態 Web、Apps 服務模式,例如說像是打造部落格,或者是一項 APP 內的代辦事項應用等;加上 Amplify 具全托管服務特色,可串聯上述 AWS 在雲端所提供的資源,都能在部署過程加以整合,加速開發流程及效率,並且有效節省開發資源。如果想用低門檻的雲端解決方案,其實前端工程師是能在開發流程更靈活配置資源,甚至為公司的商業、服務模式挖掘出創新價值。

了解更多:AWS 開發者系列