簡單頁面開發神器——畫容

阿枕發表於2018-09-10

作為一個前端工程師,恐難(jing)免(chang)接到這種需求:開發一個簡單頁面,需要處理好其中大段文字或大把圖片的排版,幾乎沒有 JS 邏輯(或很少)。由於需求方都認為這個頁面 非常簡單 所以要求 今天上線,搞得我們不得不放下手中正在進行的長(zhong)期(liang)限(ji)工作,來處理這個小需求並加緊申請一次發(tong)布(ku)。

然後,可能兩天後這個頁面就下線了。其實這倒還好,就怕兩天後不是下線而是要維護:“把某段文字刪掉”、“把某張圖片替換下”。顯然這就更加 極其簡單 了,需求方認為 上午上線 就可以了!

這類需求看似簡單,實則成本高昂:

  1. 文案,僅僅改兩個字,卻可能需要在郵件中寫兩百字來描述需求;
  2. 人力,可能要跨越需求方(市場/法務/客戶…)、PM、maybe UX、前端、maybe QA、運維等多個部門;
  3. 時間,畢竟包裹再小,總得開起貨車拉一趟的,即使碰上堵車,也只能瞪大眼睛、強壓怒火、保持等待並時刻準備;
  4. 腦力,流程中每個人都可能原本在進行深度思考(尤其是工程師),這麼一打攪,要想再下潛到原先深度,需要耗費多少腦袋的馬力呀。
    • 就怕即將抵達目標深度時,聽到“先別下潛了,一會兒還要叫你。”

終於,不堪其苦已多時,我們的前端工程師開發出了簡單頁面製作/開發神器——畫容,可將此類需求直接前置給需求方自己,無須麻煩任何人,也不必 上午上線,只需分分鐘修改完成,即可 秒秒鐘上線 完成。以下 Enjoy >

簡單頁面,從我做起

畫容 ( hallery.cn ) 是一個網頁編輯器,非常適合用來快速製作簡單的 HTML/H5 頁面,從而把前端工程師從 low level 的、無趣的工作中解放出來。

初來乍到

首先,它長這樣:

畫容編輯器

它生下來第一件事是,製作協議、規則等文案類頁面:

批量文字

為什麼不能用老式富文字編輯器做文案頁面呢,因為這頁面有個表格:

表格之合併單元格

而且有時候還會有一點點 有點非凡 的樣式的:

自定義標題樣式

協同編輯

然後,用畫容做了這個頁面的另一個致命優點是,某日有市場(或法務)同學找你說“My Dear,你得把第27段第4個逗號改成句號”時,你便可回應“Dear My, can't you DIY”,然後將畫容連結發給他,請他編輯後點一下 釋出 便是,“你負責文案,你當然能負責頁面”。

不要告訴我你真的會去數數第27段是什麼鬼~~

活動頁面

後來,畫容開始做活動頁面,like this:

活動頁面

what what,這是圖片堆砌的麼?額~,some 哥姐們兒確實喜歡這麼幹。But,you have choice,你可以使用健康潔淨的 HTML & CSS,like this:

彈性佈局

and this:

複製貼上格式

但是,我的活動頁面需要提交資料的呀,我需要讓我的 VIP 多看點兒東西呀。好吧,那麼必要的時候你可以:

直接寫 JS 程式碼

你可以 do anything,你已經看到了。

一鍵釋出

使用畫容的另一個重要原因是,可以避免我們如此簡單的頁面走過於隆(fan)重(suo)的釋出流程。我們可以配置一個或多個 FTP or SFTP 環境,畫容可以一鍵幫你把頁面釋出過去,如果你需要的話,畫容還可以同時幫你重新整理 CDN 快取,做到真正的一鍵釋出、全網生效。

釋出環境配置

頁面管理

我們已經用畫容做了上千張頁面,畫容所帶的部落、使用者組、標籤等等系統或機制可以幫助我們管理和重用我們的頁面。

頁面管理

最後,畫容遠不止這些,還有更多深維度的功能等你來探索&發現,此處附上註冊邀請碼一枚 A9A098。歡迎前來體驗畫容 ( hallery.cn ),一大波效率提升正在湧來哦。

從此就很少被打擾了,專心深度下潛吧。

相關文章