10個面向程式員的線上編程網站

標籤：style   http   io   color   ar   os   使用   sp   java   

在過去的幾年裡，在互連網上出現了許多為開發人員提供的線上編程網站（Coding playgrounds）。這不是一件壞事情，畢竟，如果一個編程網站的話，開發人員們遲早會膩的。在這些網站上，你在網頁上編寫代碼，可以即時地看到效果。你可以編輯所有的東西並預覽其效果。當然，這些網站最適合編寫HTML，CSS和JavaScript代碼了。最贊的地方在於他們大多都是免費的，你可以很容易地與別人分享你的編程現場，這很適合於團隊工作和創新想法的交流。

如果你深入地想想這種編程模式的話，你就會發現這種模式對於項目合作很有協助。而且如果你使用得當的話，你會收穫很多。如果你在Coding 的時候發現你遇到問題了，你可以找你的朋友來跟你一起來玩，說不定問題很快就解決了。因此我們想給你推薦10個線上編程網站，去試試這些個工具，然後告訴我們你的感覺如何，隨時歡迎你的評論！

你或許也對CSS Code Snippets 和Javascript Resources and Tools感興趣。

1、Codepen

這個工具寫前端代碼最合適了，其包括了教學，分享和設計構想的方方面面。這個網站提供了許多實用的功能，比如說分享代碼，內嵌程式碼片等。我們建議你邊開發項目邊使用Codepen來進行測試。

2、JSFiddle

這是一個shell 編輯器，而且因為可以使用JS庫來編寫用戶端介面，所以用JSFiddle編寫JS代碼將會特別舒服。現在你就可以選擇一些JS庫來開始你的代碼之旅。我覺得這或許是最好、最完美的JS研發、測試和分享平台了。

3、JS Bin

這是為那些想要測試CSS和JavaScript程式碼片段的開發人員設計的網站，你還可以去這裡調試代碼。如果對自己的代碼很滿意的話，你可以儲存自己的項目並分享給朋友。

4、CSSDeck

這是一個線上的CSS沙箱軟體，你可以快速地測試你的CSS代碼片，並能感受到完成作品所帶來的成就感。這個工具還可以顯示程式碼數，並且有文法高亮。最贊的特性是可以你可以把代碼分享給任何人，可以是你的朋友或其他的人。

5、Dabblet

如果你想快速地測試你的HTML和CSS代碼片的話，那麼這個工具將是你的不二選擇。該軟體實現了Prefix-free 理念來簡化開發人員的工作，Prefix-free就是開發人員勿需寫CSS 首碼，由軟體來自動完成。你還可以將你的代碼儲存到Github上和朋友或別人來分享你的作品。當下該工具只支援Google Chrome，Safari和Firefox，但很明顯你很少用別的瀏覽器對吧？

6、Liveweave

如果你是一個Web設計人員或開發人員，那麼這個工具會很適合你，該工具支援HTML5和CSS3，當然還支援JavaScript。你可以用它來測試你的作品或工具。遇到問題了你可以和朋友一起來Coding一起來解決問題，寫出了很酷炫的代碼，你也可以炫耀一番。值得一提的是，該工具還有代碼智能提示哦。

7、Google‘s Code Playground

當所有人都來參與線上編程的時候，我們知道Google肯定也會來分一杯羹的。 GoogleCode Playground是一個基於Web的工具，旨在讓開發人員來更方便地使用Google提供的API介面。你可以修改代碼然後查看結果。這個工具可以讓你查看任何的代碼而無需開啟一個外部編輯器。它還為開發人員提供了預設的API，你只需要選擇你想用的就可以了。

8、Editr

這是一個相對簡單的工具，你甚至可以在自己的伺服器上搭建該工具。該工具基於ACE編輯器，搭建起來非常簡單，支援水平、垂直和單一三種視圖。前兩種視圖用於線上編程，後一種用於展示你的作品。該工具遵循MIT License，所以我敢保證用起來絕對很爽。另外，Editr 設計簡潔美觀，絕對會招你青睞的。

9、D3 Playground

這個工具是為了更全面地支援D3.js庫而設計的，所有改變將即時地反映到輸出中。 當下CSS的角色已經舉足輕重，所以CSS代碼已經是Web開發中不可或缺的 一部分，幸運的是，該工具內嵌了CSS編輯環境，你可以輕鬆地編寫CSS代碼。

10、HTML5 Playground

這個工具提供了很多代碼和工具庫供開發人員學習和使用，當然很多是關於HTML5的有趣的新特性的，比如說是audio標籤，互動式form等。當然，還有很多的element，比如說range，date input，甚至還有郵件地址格式的自動檢查。這個工具很有前景，而且肯定能在工作中給你很多協助。

10個面向程式員的線上編程網站