高雄前端社群#5

網頁編輯軟體開發流程交流聚會





提供南部網頁設計師

有一個交流的場所


實體聚會不重複人數 203位(2012/11~2013/11) 





共同交流，一塊成長


　　廖洧杰 - Sublime text 2

　　鄭于庭 - dw

　　蕭宇男 - dw

　　王志誠 - Chrome tools

　　






網頁編輯器演化史


2008-2009                  2010-2013

                          




why?




電腦太..爛...冏

工作列永遠都是滿的



　1.身為前端工程師，工作列上有一堆瀏覽器是很正常低！
　2當年開瀏覽器和資料夾不會重疊再一起....OTZ

雖然可以重疊了，

但惡習難改...






同事看到後說了一句..


這高度..洛克人都要跳三次以上了..


Title

每半小時都必須

釋放一次記憶體

               

Photoshop + Dreamweaver = 1G 記憶體 掰掰





為了省記憶體空間

於是就挑了那時很夯的Sublime Text 2



陣痛期一個月

歷經三個專案後

開發效率開始比DW還快






以熱鍵取代
GUI操作





豐富的Package

視覺設計師：


哪呢！？用文字編輯器寫網頁！？

實際教學過後..



go to everything


  • Ctrl + N  (開新檔案)、Ctrl + W (關閉檔案)
  • Alt+數字 (移動檔案位置)、
    Alt+Shift+數字 (開啟視窗數量)、
    Ctrl+數字(移動視窗)
  • Ctrl+P  (搜尋檔案)
  • Ctrl+R  (快速到達命名:Class、function)
  • PageUP(向上瀏覽)、PageDOWN(向下瀏覽)
  • Ctrl+F2 (標記書籤)、F2(快速定位各書籤位置)
  • Ctrl+Shift+P (搜尋快捷指令)

    lIVE DEMO

    常用熱鍵

  • Ctrl+L (選取單行)
  • Ctrl + D  (選擇下個相同程式碼)、Alt+ F3 (全選相同)
  • Ctrl+X (刪除單行)
  • Ctrl+Enter (下一行)、Ctrl+Shift+Enter (上一行)
  • Ctrl+Enter+往上、往下 (該行程式碼往上、往下跑)
  • Ctrl+Shift+a  (全選下一層區塊)
  • Ctrl+[、Ctrl+]  (向右、向左推進)
  • Ctrl+k+數字 (程式碼折疊，按0便全展開)

    • LIVE DEMO


    安裝第一個package

    1. Ctrl+` 來開啟命令視窗

    2.輸入下列程式碼：
    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

    3.安裝完後按Ctrl+Shift+P搜尋到[install package]按Enter。

    4.選擇emmet插件並安裝。

    https://sublime.wbond.net/installation

    pACKAGE LIST

  • Emmet  (HTML、CSS快速輸入語法)
  • HTMLPrettify (HTML、CSS、JS排版)
  • Trailing Spaces (檢測是否有多餘空白)
  •  Emmet LiveStyle (同步新增CSS內容)
  • Goto-CSS-Declaration (追蹤CSS，熱鍵：微軟+.)
  • ColorPicker (CSS色盤，熱鍵：Ctrl+Shift+C。) 
  • https://sublime.wbond.net/


    • 學會一種熱鍵與package
    可讓自己快上2~3秒

    3600個動作就會快2~3個小時
    10天就是20~30個小時



    Thank you

    延伸閱讀


    高雄前端社群#5 網頁編輯軟體開發流程交流聚會

    By gonsakon

    Made with Slides.com

    高雄前端社群#5 網頁編輯軟體開發流程交流聚會

    • 4,152

    More from gonsakon