Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LiveStyle for Vim - Quick start
Search
Tomokazu Kiyohara
August 24, 2013
Technology
0
120
LiveStyle for Vim - Quick start
LiveStyle for Vim の使い方。
kanazawa.rb meetup 12 発表資料。
Tomokazu Kiyohara
August 24, 2013
Tweet
Share
More Decks by Tomokazu Kiyohara
See All by Tomokazu Kiyohara
首負担皆無!ゼログラビティ プログラミングスタイル
kiyohara
0
310
北陸で Ruby なお仕事に携わるための3つの戦略
kiyohara
1
1.6k
Algolia in CAMPFIRE
kiyohara
0
3.4k
地方エンジニアの日常 - 業務からコミュニティ活動まで
kiyohara
0
260
Web to macOS native app
kiyohara
0
340
金沢アプリ開発塾セミナー資料「テストについて」
kiyohara
1
230
Git インフラ選定事例 - 株式会社クルウィットが GitHub を選んだ理由
kiyohara
0
470
ベッドで技術書を快適に読むただひとつの方法
kiyohara
19
23k
JavaScript で OS X を自動操作
kiyohara
1
470
Other Decks in Technology
See All in Technology
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
580
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
500
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
730
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
820
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
519
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Agile that works and the tools we love
rasmusluckow
327
21k
How to Ace a Technical Interview
jacobian
275
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
We Have a Design System, Now What?
morganepeng
50
7.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A Tale of Four Properties
chriscoyier
156
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Faster Mobile Websites
deanohume
304
30k
Transcript
LiveStyle for Vim Quick start 2013/08/24 - kanazawa.rb meetup 12
Emmet LiveStyle http://livestyle.emmet.io/ "Instant updates: see changes as-you-type. No file
saving, no page reloading."
Demo Movie http://www.youtube.com/watch?v=iQLhGbkupS4
Quick start http://livestyle.emmet.io/usage/ "1. Install “LiveStyle” plugin from Package Control
in Sublime Text."
Quick start http://livestyle.emmet.io/usage/ "1. Install “LiveStyle” plugin from Package Control
in Sublime Text."
None
None
LiveStyle for Vim https://github.com/mattn/livestyle-vim
LiveStyle for Vim https://github.com/mattn/livestyle-vim http://mattn.kaoriya.net/ mattn_jp
LiveStyle for Vim http://mattn.kaoriya.net/ mattn_jp https://github.com/mattn/livestyle-vim also Emmet.vim http://mattn.github.io/emmet-vim/
Quick start for Vim
Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)
Google Chrome LiveStyle Extension
Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)
Google Chrome LiveStyle Extension
livestyle-vim Vundle.vim Bundle 'mattn/livestyle-vim' NeoBundle.vim NeoBundle 'mattn/livestyle-vim'
Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)
Google Chrome LiveStyle Extension
livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
livestyled LiveStyle connection handling server Compile required ${bundle_dir}/livestyle-vim/livestyled/livestyled.go
Setup Go lang (osx) $ brew install go
Setup depend libs (osx) $ brew install mercurial $ mkdir
~/.go $ export GOPATH=~/.go $ go get code.google.com/p/go.net/websocket
Compile livestyled $ cd ${bundle_dir}/livestyle-vim/livestyled $ go build livestyle.go
Quick start for Vim Vim livestyle-vim livestyled (included in livestyle-vim)
Google Chrome LiveStyle Extension
LiveStyle Extension https://chrome.google.com/webstore/detail/emmet- livestyle/diebikgmpmeppiilkaijjbdgciafajmg
LiveStyle Extension https://chrome.google.com/webstore/ Search 'Emmet LiveStyle'
How to Use
Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)
Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)
Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
Access site w/ Chrome
Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)
Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
Open Developer tool(LiveStyle Panel)
Open Developer tool(LiveStyle Panel)
Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)
Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
Launch Vim & livestyled
Launch Vim & livestyled
Launch Vim & livestyled
Launch Vim & livestyled
Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)
Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
Bind css via LiveStyle panel
Bind css via LiveStyle panel
Flow Access site w/ Chrome Open Developer tool (LiveStyle panel)
Launch Vim & livestyled Bind css via LiveStyle panel Edit Edit Edit
Edit Edit Edit
Edit Edit Edit
Caution
Restriction
Happy coding !!
"kanazawa.rb ?"
scss/sass supported
scss/sass supported scss/sass command required set ft=scss/sass Heavy ...
Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara