มีสองวิธีทำ web development: text editor way 和 GUI editor way วิธีแรก สำหรับ advanced developers 主要 เข้าใจ code รู้ว่าอยากได้อะไร ไม่ต้อง visual aids สร้าง web pages ใช้ programs เช่น vim, emacs, Notepad++, Kate, หรือ text editors อื่นๆ และ load webpages 到 browsers 當รู้สึกต้อง看 end result งานของพวกเขา Approach นี้ minimalistic, efficient - และ harder
วิธีที่สอง = สิ่งที่คนส่วนใหญ่ทำ: ใช้ program 通常 hide code away from users 讓 focus on content Programs ใช้目的นี้ เรียกว่า web editors 而且 屬於 What You See Is What You Get (WYSIWYG) 意味著 page displayed 在 editor's GUI จะ match end result Popular titles: KompoZer, Dreamweaver, Quanta, Bluefish, และ friendly web development software อื่นๆ 讓人 approach subject with mindset of Lego building WYSIWYG editors 容易กว่า text editors แต่通常 less efficient
และพวกเขาทิ้ง crud มาก
當ทำงานกับ text editors 每 byte ของ code ใน web files วางโดยคุณ แต่ web editors 通常 quite liberally pepper code with auto-generated meta fields, self-promotional comments 和很多 unneeded breaks 和 whitespaces ทำให้ code ใหญ่กว่าที่ intended
大多數人不會注意或在乎 surplus 但如果你喜歡 web development อย่าง clean, orderly, spartan แต่仍想用 GUI editors 有 tools 幾個ช่วย maintain lean 和 neat code
這些 tools 稱為 lint/tidy utilities 使用來 render output of HTML 和 accompanying files smaller, cleaner, better laid out ใน tutorial นี้ ผมจะ present collection of these utilities 大部分我 personally use 這樣你也能 enjoy more elegant 和 cholesterol-free web development 開始吧
HTML Tidy
HTML tidy = 可能是 most popular HTML tidying utility available 這個小程序能做 wonders with your code ช่วย fix invalid HTML, remove extra whitespace characters, 改善 layout 和 indentation of final markup
ใช้ได้ all major OS 而且 most web editors capable of running tidy from within their own GUI 使 easier to both work 和 maintain clean code
Example ใน Bluefish on Linux Mint 6 Felicia:
Example Tidy configuration 在 KompoZer on Windows XP:
更多關於這兩個 excellent web editors 請看文章 熱門 Windows text editor Notepad++ 有 Tidy plugin installed 已經 所以 edit code 不離開 editor
Example Tidy works: 寫幾個 words 在 blank text document 然後 run Tidy against it 不只 beautify output 還 add missing, necessary HTML (XHTML) tags 和 create proper indentation
Before:
After:
Or this:
也可以 convert HTML to XHTML, convert to 或 reindent XML, use wrap, 甚至 clean Microsoft Word documents!
一般 Tidy 是 command line utility 所有需要 run คือ invoke against desired HTML file by running tidy filename.html HTML file 不應有 dots 除了 expected extension 或 whitespaces 在名字 因為這些可以 break functionality utility 這 stand to reason 和 general "good" coding guidelines
同樣 如果 invoke Tidy 在 web editors 取決於如何 configured 你可能得到 long report of all discrepancies, errors 和 warnings found Bluefish 會做這個給你
Get Tidy
Tidy 有 many shapes and forms Best source of information 是 official page 也 welcome 看 Dave Raggett's page original developer 雖然 development, fixes, improvements 在 project 現在 all consolidated at SourceForge site
Linux
Tidy 包含在 repositories of most popular distros 所以得到不應該是問題
Windows
Windows users 有 several choices: 使用 Notepad++ 例如 或去 Windows executable 然後 invoke either command line against HTML files 或用 web editor like KompoZer เรียก via plugins
如果不喜歡 command line Dirk Paehl 也開發了 GUI version 也 available on other OS
Online services
Tidy 也可以用 directly online 不需要 installation Several websites offer service 包括 W3C international WWW standards organization 本身 你只是需要 link to URLs of your HTML files 和 run them through Tidy
Firefox extension
也有 Firefox extension available 雖然 Windows only Extension 相當 hefty 2.6MB downloads 但提供 extended validation capabilities 在 browser 也應該 visit official site 更多細節
還有 Java, Python, PHP, Ruby version of Tidy List 几乎 endless
CSSTidy
CSSTidy = open-source CSS parser and optimizer 像 HTML Tidy 用來 clean code of CSS files convert property strings to hex code where available, remove whitespace characters, remove 和 merge duplicate properties 更多 這樣 CSSTidy 可以 bring down total size of CSS files by tens of percents
CSSTidy = cross-platform solution available on Linux, Windows, Mac C++ 和 PHP versions 也有 online formatter 和 optimizer available in five languages 很像我們見過 HTML Tidy
像 HTML Tidy CSSTidy 是 command line utility 和 extremely simple to use
Example CSSTidy optimizing a CSS file:
Weblint
這是 another HTML optimization utility 你可能想考慮 雖然 less powerful 和 less portable than HTML Tidy 因為只 works with HTML 4.0 documents 隨 Bluefish มา general Weblint 只 available for Linux (in the repos)
Conclusion
HTML 和 CSS tidying utilities 很 useful 不管你 amateur 或 professional developer 如果 strive to create high-quality content meets strict international standards of compliance 應該 consider using them
不僅 help create better laid output 和 make files more compact 他們จะ force you to change the way you think and work โดย adhering to web standards 你將 improve overall quality 和 consistency of web documents 讀者ของ你จะ能 enjoy first-class content 不擔心 output 可能看起來如何在 this or that browser, on this or that resolution
如果想 enter world of web development 或 making first steps 在它 這是 best time consider using HTML Tidy 和 CSSTidy 不只會 make your own work more pleasant 你會 help big world of code become a tiny bit better Hey, every humble contribution matters
Cheers.
