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 小時內)
jquery 彈 窗 在 紀老師程式教學網 Facebook 的最佳解答
30 個讓你的網站看起來更優的點子
做網站的朋友,每天大多竭盡心思想著如何把網站變得更好看,但又不致於讓伺服器負擔太重。這裡有一篇「30 個立即可用的網站好點子」給大家參考。包含:
1. 使用者體驗測試
2. 適度的留白
3. 適當的字體
4. 以 CSS3 增加陰影,營造層次感
5. 添加背景紋理與樣板
6. 用 CSS3 替背景披上漸層色
7. 善用 Twitter 的 Bootstrap UI 函式庫
8. 善用 HTML5 Kickstart UI 函式庫
9. 使用 jQuery UI
10. 使用精美的全螢幕背景圖片
11. 以「圖示」(Icon)來代替單調的「選單(Menu)」
12. 常常更換整個網站的基礎色調
13. 盡可能將老舊瀏覽器的支援考慮在內
14. 善用搶眼的特殊字體營造網頁風格
15. 支援「社群分享」
16. 開放讀者討論
17. 較寬的「頁腳」設計(目前流行)
18. 使用相對大小來決定照片大小(如:以「100%」取代「180px」)
19. 提高「選單」的操作性(如:增加「首頁 > 產品 > 相機 > CM-100」這類超連結在頂端)
20. 為「照片」與「影片」以 HTML 屬性標籤添加關鍵字,方便搜尋引擎尋找
21. 別把選單項目埋得太深,讓使用者找不到
22. 增設「回到頁面頂部」(Back to Top)連結
23. 記得以 CSS 設定 與
標籤,使之易讀明顯
24. 記得增加圖片的 width 與 height 屬性
25. 以 alertify.js 這類函式庫,製作彈出式視窗
26. 版面要能適應「桌機」或「手機」等不同螢幕大小
27. 友站連結
28. 善用看起來很像圖示的字型
29. 圖片框加上陰影,營造層次感
30. 盡量以 CSS 代替 HTML 標籤排版,以利輕鬆更換版面
原文連結如下:
http://www.hongkiat.com/blog/ideas-to-nicer-websites/
jquery 彈 窗 在 web 实战-01-JQuery 如何实现弹出确认框 的推薦與評價
看网上的说法都是添加 \r\n 之类的。亲测无效。 后来测试下来应该使用 <br/> 来实现换行。 拓展阅读. layer 相关的弹窗 ... ... <看更多>
jquery 彈 窗 在 基于jQuery实现的各种弹窗(alert, confirm, toast, modal) 的推薦與評價
基于jQuery实现的各种弹窗(alert, confirm, toast, modal). Contribute to linwei0201/Modals development by creating an account on GitHub. ... <看更多>