brackets html的八卦，Yahoo名人娛樂都在討論

剛被朋友推坑這一套編輯器，他的特色是整合了 livereload，不過好像不能修改主題 :（
我好想要黑色的主題歐 XDDDD
http://brackets.io/

來看看世界級的網頁工程師用什麼環境開發程式？

NetTuts+ 最近發表了一篇文章，訪問了 15 位世界級的網頁工程師，詢問他們下列四個問題：
1. 你主要的工作是什麼？
2. 你用什麼樣的電腦開發程式？
3. 你用什麼樣的軟體來撰寫程式碼？
4. 哪些軟體你不用會死

結果...清一色全部用 Mac 系統啊！我之前也建議，Mac 有比 Windows 更友善的介面，但又使用 FreeBSD 這顆 Unix 家族的強力引擎，兼具 Linux 的強大。真的是軟體工程師的上上之選哪～（個人也已經使用快一年了）。

另外，寫碼工具也由 Sublime Text 獲得壓倒性勝利！我之前也在這個版推薦過好幾次。真的非常鼓勵程式師們去學啊！

原文在此，順便幫大家翻譯一下：
http://net.tutsplus.com/articles/what-are-you-using/

Scott Gonzalez: jQuery UI 主要作者之一
* 主要工作：JavaScript & Node.js
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text + TrailingSpaces, Pretty JSON, GitGutter, Markdown Preview 四個外掛
* 必備軟體：Git/GitHub, Apache, Chrome, Linkinus, Skype, Node

Raymond Camden: Adobe 資深工程師，制定各種網頁標準
* 主要工作：制定各種網頁標準
* 硬體平台：MacBook Pro
* 開發工具：Brackets
* 必備軟體：Chrome, Brackets, Tweetdeck, Evernote

John-David Dalton: jsPerf 與 Benchmark.js 作者，JavaScript 狂熱愛好者
* 主要工作：撰寫各種函式庫
* 硬體平台：MacBook Pro
* 開發工具：Komodo Edit
* 必備軟體：Total Finder, Chrome/Firefox/Opera/Safari/IE, Node, Ringo, Rhino, Narwhal

Stephanie Sullivan Rewis: HOW Design, UI16, An Event Apart, Microsoft’s MIX, Macworld, SXSW, Adobe Max 等大型研討會策展人
* 主要工作：前端網頁開發（HTML/CSS/JavaScript）
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：CodeKit, Tower, HipChat, Fireworks, Chrome

Christian Heilmann: Web 技術專欄作家
* 主要工作：科技文章撰寫
* 硬體平台：MacBook Air
* 開發工具：Sublime Text
* 必備軟體：瀏覽器, Git, IRC, Dropbox, Spotify

Ryan Grove: SmugMug 這個 JavaScript 元件的作者
* 主要工作：JavaScript 函式庫撰寫
* 硬體平台：Mac Pro（桌機，工作站等級）
* 開發工具：Sublime Text
* 必備軟體：Sublime Text, JSHint, Adium, Tower, Dropbox, Rsync, Arg, Gmail, GitHub, Chrome, Google Hangouts...等

Cody Lindley
* 主要工作：前端網頁技術（HTML/CSS/JavaScript）
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：SmartGit, Sublime, Divvy, JumpCut, Skype, Chrome...等。

Luke Smith: YUI 這個 JavaScript 函式庫的主要作者
* 主要工作：JavaScript 函式庫撰寫
* 硬體平台：MacBook Air
* 開發工具：Vim
* 必備軟體：Vim, Git

Chris Williams: SaferAging 副總，JSConf US 與 RobotsConf 會議主席
* 主要工作：各類硬體感知器的程式撰寫
* 硬體平台：Mac Pro, MacBook Air, Mac Mini
* 開發工具：Sublime Text 3
* 必備軟體：Sublime Text, iTerm2, Fish Shell, Wunderlist

Aaron Newton: Thanx 專案經理
* 主要工作：HTML5
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：CloudApp, Jing, Sequel Pro, Jumpcut, Total Terminal, GitX

Ben Cherry: Pushd 工程師
* 主要工作：Ruby, iOS, JavaScript
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text
* 必備軟體：Sublime Text 2, iTerm 2, Chrome, 1Password, Gmail, Flipboard, Twitter, Facebook, Reddit

Jacob Thornton: @medium, Bootstrap, Bower 等知名 JavaScript 函式庫作者
* 主要工作：HTML, CSS, JavaScript
* 硬體平台：MacBook Pro
* 開發工具：Sublime Text 2
* 必備軟體：Rdio

Lea Verou: W3C 委員會開發者
* 主要工作：HTML, CSS, JavaScript
* 硬體平台：MacBook Air
* 開發工具：Espresso
* 必備軟體：Espresso, Transmit, CodeKit, Adobe Illustrator, Chrome, Safari, Firefox, Opera, WebKit nightlies, Chrome Canary

Jonathan Snook: Shopify 工程師
* 主要工作：HTML/CSS/JavaScript
* 硬體平台：MacBook Air
* 開發工具：Vim
* 必備軟體：Vim, Chrome,

Peter Wagenet: Ember 這個 JavaScript 函式庫的主要成員
* 主要工作：JavaScript
* 硬體平台：MacBook Air
* 開發工具：Sublime Text 3
* 必備軟體：Chrome, Firefox, Adium, GTalk, Twitter, Divvy, 1Password, Bartender

HTML/CSS/JavaScript 開發工具總整理

這篇幫您整理出實作 HTML/CSS/JavaScript 時，一些比較酷的工具、函式庫。非常有用！很推薦大家看！我簡單翻譯一下大綱，不過我會推薦以：

(1) 編輯器：教您用那個工具來撰寫 HTML/CSS/JavaScript 會比較好。
(4) 函式庫：補充 JavaScript 原來不足之處。如同加上「金剛飛翼（函式庫）」後的「鐵金剛（JavaScript）」就突然能飛是一樣的。
(3) 前處理器：把常用、好用、可能高達數百行的 CSS/JavaScript 程式碼，濃縮成一個名字，讓您使用後，彈指之間有如寫出數百行 CSS/JavaScript 般。
(2) 框架：原始碼外觀可能完全不像 JavaScript，但寫完後，會由框架轉換成 JavaScript 去執行。讓您不但「寫得少」，還有「功能多」的好處。有點像「前處理器」+「函式庫」的綜合體。
(5) 工具：一些測試、編譯、模板等工具，可以讓你的程式設計工作，更加自動化、更輕鬆。

這樣的順序來研讀。不過我底下的翻譯為了配合原文，無法調整成我認為理想的順序，請大家見諒囉！

原文連結：
https://tutsplus.com/tutorial/essentials-tools-for-a-modern-front-end-development-workflow/

---------

(1) 編輯器（寫碼之用）：

- 「Sublime Text 3」：
這個我們介紹過好幾次了！個人非常推薦！Sublime Text 3 是要錢的，不過它的前一版 Sublime Text 2，則可以「試用」到天荒地老，不另收費！

- 「Light Table」：
它的好處就是一邊編輯，可以一邊看到結果。不必等到用瀏覽器秀出來才知道對錯。不過這個特性個人沒有覺得有多好，我自己不太推。

- 「WebStorm」：
一個將「寫碼、偵錯、看結果」全部整合在一個視窗的工具。是很不錯！但如果您不喜歡掏錢買軟體，這個可能不是你要的。

- 「Vim」：
已經五十歲的一個老牌編輯器！免費、不太好學、但學會後您不會想換其它編輯器。這有點像開慣手排車的人，要他回來開自排車，簡直要了他的命一樣。

- 「Brackets」
也是整合「寫碼、偵錯、看結果」於一身的工具。Adobe 研發、免費。不過整合得沒有 WebStorm 好，很多功能 Sublime Text 2/3 也做得到。所以個人還是認為學 Sublime Text 比較划算。

(2) JavaScript 程式框架（Frameworks）：

所謂「框架」，就是把本來要自己寫兩三百行程式碼才能實現的功能，讓您在彈指之間就寫出來的工具。如果您的程式碼用了「框架」，外觀上有可能看起來一點都不像 JavaScript 原始碼！不過它在底層「展開」後，仍然是 JavaScript 原始碼無誤！只不過你要寫的是那一兩行「未展開」的框架原始碼，而非「展開後」那兩三百行 JavaScript 原始碼就是了。

用框架來寫程式，就像你包餃子是買做好的「餃子皮（框架）」來包，而非買「麵粉（JavaScript）」從頭做起。時間上省了很多！

比較著名的 JavaScript 框架有（可以混用）：

- Backbone：jQuery （一種函式庫，後述）最流行的框架。
- Ember.js：提供一堆很美麗的 Cocoa UI（一種用 JavaScript 寫成的人機界面），還讓你用少少幾行完成。
- AngularJS：Google 提供！主要用來擴充 HTML 的功能之用。著重在功能面上的一個框架。
- Knockout.js：它著重在「資料綁定」。這是 Backbone 比較弱的一環。Backbone 做資料綁定可能要好幾百行，Knockout.js 大概只要十幾行就完成了。
- Meteor：架構在 Node.js（一種跑在伺服器上的 JavaScript，地位等同 PHP）的框架，目的是希望讓 Node.js 的程式師能少寫幾行程式碼。
- Mocha：一種針對「JavaScript」做「單元測試」的框架。類似 Java 裡的 JUnit。競爭對手包括「Jasmine」與「QUnit」。

(3) 前處理器（Preprocessors）:

所謂「前處理器」，就是把一些常用、複雜的 CSS/JavaScript 寫法，賦予它一個簡短名字。然後只要你在 CSS/JavaScript 原始碼內 寫上這個名字，這些前處理器，就會把它展開，還原成原來 CSS/JavaScript 的樣子。這會讓你大大縮短開發時間！著名的前處理器排列如下（大部份人會慣用其中之一即可，雖然也可以混用）：

以下是 CSS 的三大前處理器：
- Sass
- LESS
- Stylus

以下是 JavaScript 的兩大前處理器：
- CoffeeScript
- TypeScript

以下是全方位的前處理器：
- CodeKit
- LiveReload

(4) 函式庫（Libraries）：

所謂函式庫，就是人家幫你寫好的 JavaScript 副程式。想用時，直接拿來呼叫即可。正如「鐵金剛（JavaScript）」本來不會飛，加上「金剛飛翼（函式庫）」後，就有飛的功能了。著名的函式庫如下所示：

- jQuery：它是用來操縱整個 HTML 節點（或稱 DOM 結構）最棒的函式庫！講到操作 DOM，除了 jQuery 外不作第二人想！
- Underscore：它是用來補足 JavaScript 沒提供「顯而易見」函數而被發明出來的。如 find(), shuffle()...等。它與 Backbone 框架緊密結合。用了 Backbone 的人很少沒聽過 Underscore 的大名的。
- D3：它的拿手好戲就是顯示統計圖表！如果你想用 JavaScript 顯示各類統計圖表，D3 絕對不可錯過！

(5) 工具（Tools & Utilities）

- RequireJS：一個 JavaScript 檔案/模組載入器。允許你把 JavaScript 寫成小小模組，然後像樂高積木一樣載入使用。不好學，但學會後很值得。
- Testem：JavaScript 的測試用工具。
- Grunt：一個可以將 JavaScript 的編譯、載入、測試、執行工作，自動化的命令列工具。類似 C 語言世界裡的 make。
- Normalize：可以將你的程式碼，改到連用 IE 低版本瀏覽器來看，效果都跟 Chrome 或 Firefox 一樣的工具。
- HTML5 Boilerplate：它裡面包含了上百個「模板」，可以讓你「拷貝與貼上」，就能擁有強大的網頁功能，不必寫大量程式碼。
- Twitter Bootstrap：由 Twitter 工程師貢獻的大量模板，也是可以讓你「拷貝與貼上」使用它們。
- Foundation 4：與 Bootstrap 是競爭對手、也有大量模板供你拷貝與貼上使用之。

https://tutsplus.com/tutorial/essentials-tools-for-a-modern-front-end-development-workflow/

---
原文已經率先刊登於 G+ 私密社團「紀老師網頁程式設計」。對 HTML/CSS/JavaScript 感興趣的朋友，可以申請加入：

https://plus.google.com/communities/100793154849235819235

（申請制，審核時間 24 小時內）

６、７年前のパソコンでもちょっと手を加えてあげれば、用途次第で十分快適動作します！
ただカスタマイズは自己責任も伴いますのでお気をつけ下さい！
にしてもSSDやメモリが安くなりましたよね(^^ゞ

サウンドスマイル佐々木さんのチャンネル:https://www.youtube.com/channel/UC-2-FPFfw3jzURApEn0DIXA/about

～以下参考リンク～

[中古パソコン] [AT-473][超小型デスクトップPC][第3世代Corei5] [Windows10]LENOVO ThinkCentre M72e Tiny Corei5プロセッサ 2.9GHz 4096MBメモリ 320GB HDD Windows10 Pro64bit [秋葉原]《パソコン販売 アキバパレットタウン》
https://amzn.to/2xkoOKn

Crucial クルーシャル SSD 240GB BX500 SATA3 内蔵2.5インチ 7mm CT240BX500SSD1【3年保証】 [並行輸入品]
https://amzn.to/2XeFGS1

CFD販売 ノートPC用 メモリ PC3-12800(DDR3L-1600) 4GB×1枚 1.35V対応 SO-DIMM (無期限保証)(Panram) D3N1600PS-L4G
https://amzn.to/2J9RoU8

ThinkCentre Tiny バーティカル スタンド 3
https://www.lenovo.com/jp/ja/accessories-and-monitors/tiny-accessories/tiny-brackets/MECH-BO-Tiny-IV-Vertical-Stand/p/4XF0N03160

サンワサプライ エアダスター(逆さ使用OKエコタイプ) CD-31ECO
https://amzn.to/2xlYMX0

ザワード 絶縁タイプ熱伝導グリース 4g入 MX-4/4g
https://amzn.to/2Ymhmu7

サンワサプライ VESAマウント取付けテレビハンドル MR-VESA5N
https://amzn.to/2Xj8p8c

中古液晶モニター メーカー不問 _ （1189910）【訳あり特価品】【液晶モニター 15インチ】
https://store.shopping.yahoo.co.jp/junkworld-webshop/1189910.html

【この動画の情報はアップロード日時点のものです。情報の劣化や急遽内容変更、また、情報に誤りがある場合もございますのでご注意下さい】

Amazonプライム会員はこちら↓配送特典、プライム・ビデオ等 お得感満載！
https://www.amazon.co.jp/gp/prime/pipeline/landing/ref=as_li_ss_tl?ie=UTF8&ref=pd_prim_g_prim_prime_0086&linkCode=ll2&tag=kajimack-22&linkId=9898dcf14595f792fb783150f03d18e8

Amazon Mastercardクラシックに新規ご入会で6,000ポイントがもらえる！！！
https://www.amazon.co.jp/MasterCard%E6%96%B0%E8%A6%8F%E5%85%A5%E4%BC%9A%E3%82%AF%E3%83%AC%E3%82%B8%E3%83%83%E3%83%88%E3%82%AB%E3%83%BC%E3%83%89/b/ref=as_li_ss_tl?ie=UTF8&node=3497243051&linkCode=ll2&tag=kajimack-22&linkId=3a4996e2dded28552e99aaa4e42616ff&language=ja_JP

かじまっくのTwitter：https://twitter.com/kajimack_ch

かじまっくのInstagram：https://www.instagram.com/kajimack.ch/

かじまっくチャンネル中の人（ブログお休み中）：https://kajimack.blogspot.jp/
使用音源：YouTubeオーディオライブラリ

※上記Amazonリンクはアソシエイトリンクを使用しています。

使用アプリ

LINE camera
https://itunes.apple.com/jp/app/aillis-jiuline-camera/id516561342?mt=8

iMovie（ios iPad）
https://itunes.apple.com/jp/app/imovie/id377298193?mt=8

モザイク　ぼかし & モザイク加工アプリ
https://itunes.apple.com/jp/app/モザイク-ぼかし-モザイク加工アプリ/id964220645?mt=8

MovStash
https://itunes.apple.com/us/app/movstash/id1058281885?mt=8

Luma Fusion
https://itunes.apple.com/jp/app/lumafusion/id1062022008?mt=8

CPU-Z
http://www.cpuid.com/softwares/cpu-z.html

CrystalDiskMark
http://forest.watch.impress.co.jp/library/software/crystaldisk/

CrystalDiskInfo
http://forest.watch.impress.co.jp/library/software/crdiskinfo/

Open Hardware Monitor
http://openhardwaremonitor.org/downloads/

ドラゴンクエストX ベンチマークソフト
http://hiroba.dqx.jp/sc/topics/detail/c042f4db68f23406c6cecf84a7ebb0fe/#up2

MLG Dallas:Sen(Z) vs Iron(T) Game1-1
http://media.mlgpro.com/brackets/10/procircuit/dallas/sc2/open/matches/4979.html Subscribe now / 訂閱Joe的頻道 ：http://goo.gl/H5hUk7

MLG Dallas:Sen(Z) vs Iron(T) Game2
http://media.mlgpro.com/brackets/10/procircuit/dallas/sc2/open/matches/4979.html Subscribe now / 訂閱Joe的頻道 ：http://goo.gl/H5hUk7