Có hai cách tiếp cận phát triển web: cách trình soạn thảo văn bản và cách trình soạn thảo GUI. Cách đầu tiên dành cho nhà phát triển nâng cao, hiểu code, biết mình muốn gì và không cần hỗ trợ thị giác để xây dựng trang web. Họ làm việc với vim, emacs, Notepad++, Kate, hoặc trình soạn thảo văn bản khác và chỉ load trang web vào trình duyệt khi muốn xem kết quả. Cách tiếp cận này tối giản, hiệu quả - và khó hơn.
Cách thứ hai là thứ hầu hết mọi người làm: dùng chương trình thường ẩn code khỏi người dùng và cho họ tập trung vào nội dung. Chương trình dùng cho mục đích này gọi là web editor. Hơn nữa, chúng thuộc danh mục What You See Is What You Get (WYSIWYG), nghĩa là trang hiển thị trong GUI editor sẽ khớp với kết quả cuối. Một số tiêu đề phổ biến bao gồm KompoZer, Dreamweaver, Quanta, Bluefish, và phần mềm phát triển web thân thiện khác cho phép mọi người tiếp cận với tư duy xây Lego. Trình soạn thảo WYSIWYG dễ làm việc hơn trình soạn thảo văn bản, nhưng thường kém hiệu quả hơn.
Và chúng để lại nhiều rác.
Khi bạn làm việc với trình soạn thảo văn bản, mỗi byte code trong file web do bạn đặt đó. Ngược lại, web editor thường khá phóng khoáng rắc rối code với meta field tự sinh, comment tự quảng cáo và nhiều break và whitespace không cần thiết, làm code lớn hơn ý định.
Hầu hết mọi người không chú ý hoặc quan tâm đến phần dư, nhưng nếu bạn thích phát triển web theo cách sạch, có trật tự, spartan, nhưng vẫn muốn dùng GUI editor, có một số công cụ giúp bạn duy trì code gọn gàng và sạch. Các công cụ này gọi là tiện ích lint/tidy và dùng để làm đầu ra HTML và file đi kèm nhỏ hơn, sạch hơn và bố cục tốt hơn. Trong hướng dẫn này, tôi sẽ trình bày bộ sưu tập các tiện ích này, hầu hết tôi dùng cá nhân, để bạn cũng tận hưởng phát triển web thanh lịch và không cholesterol. Hãy bắt đầu.
HTML Tidy
HTML tidy có lẽ là tiện ích dọn dẹp HTML phổ biến nhất. Chương trình nhỏ này làm kỳ diệu với code, giúp sửa HTML không hợp lệ, xóa ký tự whitespace thừa, cải thiện layout và indentation của markup cuối.
Nó dùng được trên tất cả hệ điều hành chính. Hơn nữa, hầu hết web editor có thể chạy tidy từ trong GUI của chính nó, làm cho việc làm việc và duy trì code sạch dễ dàng hơn.
Ví dụ trong Bluefish trên Linux Mint 6 Felicia:
Ví dụ cấu hình Tidy trong KompoZer trên Windows XP:
Để biết thêm về hai web editor tuyệt vời này, xem bài viết này. Trình soạn thảo văn bản Windows phổ biến Notepad++ đi kèm plugin Tidy đã cài, nên bạn có thể edit code mà không rời editor.
Ví dụ Tidy hoạt động như thế nào. Tôi sẽ viết vài từ trong file text trống và chạy Tidy đối với nó. Không chỉ Tidy làm đẹp đầu ra, nó thêm tag HTML (XHTML) cần thiết thiếu và tạo indentation đúng:
Trước:
Sau:
Hoặc này:
Bạn cũng có thể chuyển HTML sang XHTML, chuyển sang hoặc reindent XML, dùng wrap, và thậm chí dọn dẹp tài liệu Microsoft Word!
Nói chung, Tidy là tiện ích command line. Chỉ cần gọi nó đối với file HTML mong muốn bằng lệnh tidy filename.html. File HTML không nên có dấu chấm, trừ đuôi mở rộng mong đợi, hoặc whitespace trong tên, vì chúng có thể làm hỏng chức năng tiện ích. Điều đó hợp lý và phù hợp hướng dẫn coding "tốt".
Tương tự, nếu bạn gọi Tidy bên trong web editor, tùy theo cấu hình, bạn có thể nhận báo cáo dài về tất cả sự khác biệt, lỗi và cảnh báo. Bluefish sẽ làm điều đó cho bạn:
Lấy Tidy
Tidy có nhiều hình thức. Nguồn thông tin tốt nhất là trang chính thức. Bạn cũng chào đón xem trang của Dave Raggett, nhà phát triển gốc, mặc dù development, fix và cải tiến dự án hiện đều tập trung tại SourceForge.
Linux
Tidy có sẵn trong repository của hầu hết distro phổ biến, nên lấy nó không thành vấn đề.
Windows
Người dùng Windows có vài lựa chọn: họ có thể dùng Notepad++, ví dụ, hoặc dùng file executable Windows, sau đó gọi từ command line đối với file HTML hoặc dùng web editor như KompoZer và gọi qua plugin.
Nếu bạn không thích command line, Dirk Paehl cũng phát triển phiên bản GUI, cũng có trên hệ điều hành khác.
Dịch vụ trực tuyến
Tidy cũng có thể dùng trực tuyến, không cần cài đặt. Một số trang web cung cấp dịch vụ này, bao gồm tổ chức tiêu chuẩn WWW quốc tế W3C. Bạn chỉ cần link đến URL file HTML và chạy qua Tidy.
Extension Firefox
Cũng có extension Firefox, tuy chỉ cho Windows. Extension khá nặng, 2.6MB tải xuống, nhưng cung cấp khả năng validation mở rộng trong trình duyệt. Bạn cũng nên ghé trang chính thức để biết thêm.
Sau đó, cũng có phiên bản Java, Python, PHP, và Ruby của Tidy. Danh sách gần như vô tận.
CSSTidy
CSSTidy là CSS parser và optimizer open-source. Giống HTML Tidy, nó dùng để dọn code file CSS, chuyển chuỗi property thành mã hex nơi có, xóa ký tự whitespace, xóa và gộp property trùng lặp, và hơn thế. Cách này, CSSTidy có thể giảm tổng kích thước file CSS hàng chục phần trăm.
CSSTidy là giải pháp cross-platform, có trên Linux, Windows và Mac. Phiên bản C++ và PHP cũng có. Có cả formatter và optimizer trực tuyến, có sẵn năm ngôn ngữ, rất giống những gì chúng ta thấy với HTML Tidy.
Giống HTML Tidy, CSSTidy là tiện ích command line và cực kỳ đơn giản dùng.
Ví dụ CSSTidy tối ưu hóa file CSS:
Weblint
Đây là tiện ích tối ưu HTML khác bạn có thể cân nhắc, tuy kém mạnh và kém portable hơn HTML Tidy, vì nó chỉ hoạt động với tài liệu HTML 4.0. Nó đi kèm Bluefish. Nói chung, Weblint chỉ có cho Linux (trong repo).
Kết luận
Tiện ích dọn dẹp HTML và CSS rất hữu ích, dù bạn là developer nghiệp dư hay chuyên nghiệp. Nếu bạn nỗ lực tạo nội dung chất lượng cao đáp ứng tiêu chuẩn tuân thủ quốc tế nghiêm ngặt, bạn nên cân nhắc dùng chúng.
Không chỉ chúng giúp tạo đầu ra bố cục tốt hơn và làm file gọn gàng hơn, chúng ép bạn thay đổi cách suy nghĩ và làm việc, bằng cách tuân thủ tiêu chuẩn web. Bạn sẽ cải thiện chất lượng và tính nhất quán tổng thể của tài liệu web. Và người đọc của bạn sẽ tận hưởng nội dung hàng đầu, không lo đầu ra trông như thế nào trong trình duyệt này hay kia, độ phân giải này hay kia.
Nếu bạn muốn bước vào thế giới phát triển web hoặc đang bước đầu, đây là thời điểm tốt nhất cân nhắc dùng HTML Tidy và CSSTidy. Không chỉ bạn làm công việc mình dễ chịu hơn, bạn giúp thế giới code lớn trở nên tốt đẹp hơn một chút. Hey, mỗi đóng góp khiêm tốn đều quan trọng.
Chào.