苧晩から聞えるコ`ディングツ`ル
- 1. 苧晩から聞えるコ`ディングツ`ル HTML5 fun 2014.09.27
- 2. me ? Tomokazu Kiyohara ? Kanazawa Japan ? JAIST ? clwit, inc.
- 4. 苧晩から聞えるコ`ディングツ`ル 笋g えるのが酒g
- 5. 3 themes ? Template ? Edit ? Reference
- 6. その念に´
- 8. 3 themes ? Template ? Edit ? Reference
- 12. HTML5 Boilerplate ? Web サイトのひな侘 ? モダンなサイトをBする恷詰泙離侫．ぅ詒 ? HTML5 を試喘した？な碧Mみが秘gみ ? 駅勣な何蛍をコピ`するだけでも噴蛍旋喘できる
- 13. Demo
- 14. カスタマイズしたひな侘を聞おう
- 16. Initializr ? HTML5 Boilerplate をさらにカスタマイズ ? Responsive デザイン ? Bootstrap デザイン
- 17. Demo
- 18. パ`ツ阿砲劼偏里鯤垢う
- 20. coveloping{} ? Coding のための？なツ`ルを戻工 ? 蒙にコ`ドジェネレ`タが宴旋 ? よく聞う仝パ`ツ々の HTML / CSS を恬撹 ? GUI でた朕を_Jしながら
- 21. Demo
- 22. more keywords ? HTML5 & CSS3 Tools and Tutorials ( http://tools.webdirections.org/ ) ? HTML KickStart ( http://www.99lime.com/elements/ ) ? Foundation ( http://foundation.zurb.com/ ) ? Pure ( http://purecss.io/ ) ? Topcoat ( http://topcoat.io/ ) ? bootmetro ( http://aozora.github.io/bootmetro/ ) ? Yeoman ( http://yeoman.io/ )
- 23. Edit エディット
- 24. 徭強でブラウザをリロ`ドしよう
- 25. ATOM + LiveReload Plugin https://atom.io/
- 26. ATOM ? モダンなテキストエディタ ? Github が_k ? _k宀に耙しいC嬬が際d ? プラグインによるがg
- 27. LiveReload Plugin ? ファイルｼrにブラウザを徭啜弔縫螢踪`ドさせる ? ATOM のプラグインとしてg悶で嘛 ? Guard や Gulp は音勣
- 28. How to Use ? ATOM Plugin install ? Browser extension install ? LiveReload setup ? File edit
- 29. How to Use ? ATOM Plugin install ? Browser extension install ? LiveReload setup ? File edit
- 30. ATOM Plugin install (1/4) ? Menu ? Atom ? Preferences´
- 31. ATOM Plugin install (2/4) ? Packages
- 32. ATOM Plugin install (3/4) ? Install Packages ? Search packages ? ＾LiveReload￣
- 33. ATOM Plugin install (4/4) ? Install
- 34. How to Use ? ATOM Plugin install ? Browser extension install ? LiveReload setup ? File edit
- 35. Browser extension install ? http://go.livereload.com/extensions unstable
- 36. Browser extension install (Firefox) ? https://addons.mozilla.org/ja/ firefox/addon/livereload/
- 37. How to Use ? ATOM Plugin install ? Browser extension install ? LiveReload setup ? File edit
- 38. LiveReload Setup (1/2) ? Atom ? Menu ? Packages ? LiveReload ? Toggle Server
- 39. LiveReload Setup (2/2) ? Browser ? Open target file ? via http:// (Not file://) ! ? Enable LiveReload extension
- 40. LiveReload Setup (2/2) ? Browser ? Open target file ? via http:// (Not file://) ! local http server ? ? Enable LiveReload extension
- 41. Easy http server (example) ! $ cd <working directory> ! $ sudo ruby -run -e 'httpd' . ★ http://localhost/ ! or ! $ ruby -run -e 'httpd' -- --port=8080 . ★ http://localhost:8080/ ! ! ^C ○ K阻('control' + 'c')
- 42. How to Use ? ATOM Plugin install ? Browser extension install ? LiveReload setup ? File edit
- 43. Demo
- 44. 徭強で園鹿堕sを函ろう
- 45. fswatch + git-now http://emcrisostomo.github.io/ fswatch/
- 46. fswatch ? ファイルの厚仟rに峺協したプログラムをg佩 ? g佩するプログラムは徭喇 ? sass のコンパイルをしてみたり ? ftp でファイルをアップロ`ドしてみたり ? OSX 喘の ＾コマンド￣ タ`ミナル / Terminal.app
- 47. git-now ? ファイル蛤のスナップショットを函る ? git のサブコマンド ? OSX 喘の ＾コマンド￣ タ`ミナル / Terminal.app
- 48. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 49. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 51. homebrew install ! $ ruby -e "$(curl -fsSL https:// raw.githubusercontent.com/Homebrew/install/ master/install)￣ ! $ xcode-select --install !
- 52. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 53. fswatch install ! $ brew install fswatch !
- 54. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 55. git-now install ! $ brew install git-now !
- 56. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 57. git initialize ! $ cd <working directory> ! $ git init ! $ git add . ! $ git commit -m 'init' !
- 58. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 59. watching setup (fswatch usage) ! $ fswatch-run <target path> <command> ! ! $ fswatch-run -e <except path> <target path> <command> ! ! ! ^C ○ K阻('control' + 'c')
- 60. watching setup (fswatch usage) ! $ fswatch-run <target path> <command> ! ! $ fswatch-run -e <except path> <target path> <command> ! ! ! ^C ○ K阻('control' + 'c')
- 61. watching setup ! $ cd <working directory> ! $ fswatch-run -e ./.git ./ 'git now' !
- 62. watching setup ! $ cd <working directory> ! $ fswatch-run -e ./.git ./ 'git now' !
- 63. How to Use ? homebrew install ? fswatch install ? git-now install ? git initialize ? watching setup ? File edit
- 64. Demo
- 66. more keywords ? BrowserSync ( http://www.browsersync.io/ ) ? LiveReload ( http://livereload.com/ ) ? Emmet LiveStyle ( http://livestyle.emmet.io/ ) ? takana ( http://usetakana.com/ ) ? atom-lint ( https://atom.io/packages/atom-lint ) ? Gulp ( http://gulpjs.com/ ) ? Grunt ( http://gruntjs.com/ )
- 67. Reference リファレンス
- 69. Can I use http://caniuse.com/
- 70. Can I use ? ブラウザサポ`ト彜rをチェック ? HTML5 タグ ? 恷仟の CSS ? 恷仟の JavaScript API
- 71. Demo
- 72. 階互堀にマニュアルを哈こう
- 74. Dash ? 互堀なリファレンスビュ`ア ? _J堀業は_k堀業 ? ショ`トカットキ`で軟咫キ`ワ`ド秘薦 ? Docset を弖紗することで？なリファレンスに
- 75. Demo
- 76. more keywords ? HTML5 晩云ZU ( http://momdo.github.io/html5/Overview.html ) ? HTML5 Cheat Sheet ( http://www.smashingmagazine.com/2009/07/06/html-5-cheat-sheet-pdf/ ) ? HTML5 Tag Reference ( http://reference.hyper-text.org/html5/ ) ? Validator.nu (X)HTML5 Validator ( http://html5.validator.nu/ ) ? The W3C Markup Validator Service ( http://validator.w3.org/ ) ? HTML Tidy for HTML5 (experimental) ( http://w3c.github.io/tidy-html5/ )
- 77. 3 themes ? Template ? Edit ? Reference
- 79. Thank you Tomokazu Kiyohara http://github.com/kiyohara http://facebook.com/tomokazu.kiyohara