Có hai cách để phát triển web:cách soạn thảo văn bản và cách soạn thảo GUI. Cách đầu tiên chủ yếu dành cho các nhà phát triển nâng cao hơn, những người hiểu mã, biết họ muốn gì và không yêu cầu hỗ trợ trực quan để xây dựng trang web của họ. Họ làm việc với các chương trình như vim, emacs, Notepad++, Kate hoặc các trình soạn thảo văn bản khác và chỉ cần tải các trang web vào trình duyệt khi họ cảm thấy cần xem kết quả cuối cùng của công việc. Cách tiếp cận này là tối giản, hiệu quả - và khó hơn.
Cách thứ hai là cách mà hầu hết mọi người làm:sử dụng một số loại chương trình thường ẩn mã khỏi người dùng và cho phép họ tập trung vào nội dung. Các chương trình được sử dụng cho mục đích này được gọi là trình chỉnh sửa web. Hơn nữa, chúng thuộc danh mục Những gì bạn thấy là những gì bạn nhận được (WYSIWYG), nghĩa là trang được hiển thị bên trong GUI của trình chỉnh sửa sẽ khớp với kết quả cuối cùng. Một số tựa game phổ biến hơ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 chủ đề với tư duy xây dựng Lego. Trình soạn thảo WYSIWYG dễ làm việc hơn nhiều so với trình soạn thảo văn bản, nhưng chúng thường kém hiệu quả hơn.
Và họ để lại rất nhiều cặn bã.
Khi bạn làm việc với trình soạn thảo văn bản, mỗi byte mã trong tệp web đã được bạn đặt ở đó. Mặt khác, các trình chỉnh sửa web thường khá tự do thêm mã bằng các trường meta được tạo tự động, các nhận xét tự quảng cáo và rất nhiều dấu ngắt và khoảng trắng không cần thiết, khiến mã lớn hơn nhiều so với dự định của bạn.
Hầu hết mọi người sẽ không chú ý hoặc quan tâm đến phần dư thừa, nhưng nếu bạn muốn phát triển web của mình theo cách gọn gàng, ngăn nắp, nhưng vẫn muốn sử dụng trình chỉnh sửa GUI, thì có một số công cụ có thể giúp bạn duy trì tinh gọn. và mã gọn gàng.
Những công cụ này được gọi là tiện ích lint/gọn gàng và được sử dụng để hiển thị đầu ra của HTML và các tệp đi kèm nhỏ hơn, gọn gàng hơn và có bố cục tốt hơn. Trong hướng dẫn này, tôi sẽ trình bày một bộ sưu tập các tiện ích này, hầu hết trong số đó cá nhân tôi sử dụng, để bạn cũng có thể tận hưởng sự phát triển web thanh lịch hơn và không có cholesterol. Hãy bắt đầu.
HTML gọn gàng
HTML gọn gàng có lẽ là tiện ích dọn dẹp HTML phổ biến nhất hiện có. Chương trình nhỏ này có thể làm nên điều kỳ diệu với mã của bạn, giúp sửa lỗi HTML không hợp lệ, loại bỏ các ký tự khoảng trắng thừa, cải thiện bố cục và thụt lề của phần đánh dấu cuối cùng.
Nó có thể được sử dụng trên tất cả các hệ điều hành chính. Hơn nữa, hầu hết các trình chỉnh sửa web đều có khả năng chạy gọn gàng từ bên trong GUI của riêng chúng, giúp dễ dàng làm việc và duy trì mã sạch hơn.
Đây là một ví dụ trong Bluefish trên Linux Mint 6 Felicia:
Đây là một ví dụ về cấu hình ngăn nắp trong KompoZer trên Windows XP:
Để biết thêm về hai trình soạn thảo web xuất sắc này, vui lòng 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 với plugin Tidy đã được cài đặt sẵn, vì vậy bạn có thể chỉnh sửa mã mà không cần rời khỏi trình chỉnh sửa.
Đây là một ví dụ về cách thức hoạt động của Tidy. Tôi sẽ viết một vài từ trong một tài liệu văn bản trống và sau đó chạy Tidy đối với nó. Tidy không chỉ làm đẹp đầu ra mà còn bổ sung các thẻ HTML (XHTML) cần thiết, còn thiếu và tạo thụt lề thích hợp:
Trước:
Sau:
Hoặc cái này:
Bạn cũng có thể chuyển đổi HTML sang XHTML, chuyển đổi sang hoặc trình bày lại XML, sử dụng trình bao bọc và thậm chí làm sạch các tài liệu Microsoft Word!
Nói chung, Tidy là một tiện ích dòng lệnh. Tất cả những gì cần thiết để chạy là gọi nó dựa trên tệp HTML mong muốn bằng cách chạy tên tệp gọn gàng.html. Tệp HTML không được có bất kỳ dấu chấm nào, ngoại trừ phần mở rộng dự kiến hoặc khoảng trắng trong tên của nó, vì những dấu chấm này có thể làm hỏng chức năng của tiện ích. Điều này phù hợp với lý do và hướng dẫn viết mã "tốt" chung.
Tương tự, nếu bạn gọi Tidy bên trong một trong các trình chỉnh sửa web, tùy thuộc vào cách chúng được định cấu hình, bạn có thể nhận được một báo cáo dài về tất cả các điểm khác biệt, lỗi và cảnh báo được tìm thấy. Bluefish sẽ làm việc này cho bạn:
Ngăn nắp
Tidy có nhiều hình dạng và hình thức. Nguồn thông tin tốt nhất là trang chính thức. Bạn cũng có thể xem qua trang của Dave Raggett, nhà phát triển ban đầu, mặc dù việc phát triển, sửa lỗi và cải tiến trong dự án giờ đây đều được hợp nhất tại trang SourceForge.
Linux
Tidy được bao gồm trong kho của hầu hết các bản phân phối phổ biến, vì vậy việc lấy nó không phải là vấn đề.
Cửa sổ
Người dùng Windows có một số lựa chọn:chẳng hạn, họ có thể sử dụng Notepad ++ hoặc sử dụng tệp thực thi Windows, sau đó có thể gọi tệp này từ dòng lệnh đối với tệp HTML hoặc sử dụng trình chỉnh sửa web như KompoZer và gọi nó qua một trong các plugin.
Nếu bạn không thích dòng lệnh, Dirk Paehl cũng đã phát triển một phiên bản GUI, cũng có sẵn trên các hệ điều hành khác.
Dịch vụ trực tuyến
Tidy cũng có thể sử dụng trực tiếp trên mạng, không cần cài đặt. Một số trang web cung cấp dịch vụ này, bao gồm cả tổ chức tiêu chuẩn WWW quốc tế W3C. Bạn chỉ cần liên kết tới các URL của tệp HTML của mình và chạy chúng thông qua Tidy.
Tiện ích mở rộng Firefox
Ngoài ra còn có một tiện ích mở rộng của Firefox, mặc dù chỉ dành cho Windows. Tiện ích mở rộng khá nặng, 2,6 MB tải xuống, nhưng nó cung cấp cho bạn khả năng xác thực mở rộng bên trong trình duyệt của bạn. Bạn cũng nên truy cập trang web chính thức để biết thêm chi tiết.
Sau đó, cũng có phiên bản Tidy cho Java, Python, PHP và Ruby. Danh sách gần như vô tận.
CSSTidy
CSSTidy là một trình tối ưu hóa và phân tích cú pháp CSS mã nguồn mở. Giống như HTML Tidy, nó được sử dụng để làm sạch mã của các tệp CSS, chuyển đổi các chuỗi thuộc tính thành mã hex nếu có, xóa các ký tự khoảng trắng, xóa và hợp nhất các thuộc tính trùng lặp, v.v. Bằng cách này, CSSTidy có thể giảm tổng kích thước của tệp CSS xuống hàng chục phần trăm.
CSSTidy là một giải pháp đa nền tảng, có sẵn trên Linux, Windows và Mac. Phiên bản C++ và PHP cũng có sẵn. Ngoài ra còn có một trình định dạng và trình tối ưu hóa trực tuyến, có sẵn bằng năm ngôn ngữ, rất giống với những gì chúng ta đã thấy với HTML Tidy.
Giống như HTML Tidy, CSSTidy là một tiện ích dòng lệnh và cực kỳ đơn giản để sử dụng.
Đây là một ví dụ về CSSTidy tối ưu hóa tệp CSS:
Liên kết web
Đây là một tiện ích tối ưu hóa HTML khác mà bạn có thể muốn xem xét, mặc dù nó kém mạnh mẽ hơn và ít di động hơn HTML Tidy, vì nó chỉ hoạt động với các tài liệu HTML 4.0. Nó đi kèm với Bluefish. Nói chung, Weblint chỉ khả dụng cho Linux (trong kho lưu trữ).
Kết luận
Các tiện ích dọn dẹp HTML và CSS rất hữu ích, cho dù bạn là nhà phát triển nghiệp dư hay chuyên nghiệp. Nếu bạn cố gắng tạo nội dung chất lượng cao đáp ứng các tiêu chuẩn tuân thủ nghiêm ngặt của quốc tế, thì bạn nên cân nhắc sử dụng chúng.
Chúng không chỉ giúp tạo đầu ra có bố cục tốt hơn và làm cho các tệp nhỏ gọn hơn mà còn buộc bạn phải thay đổi cách suy nghĩ và làm việc bằng cách tuân thủ các tiêu chuẩn web. Bạn sẽ cải thiện chất lượng tổng thể và tính nhất quán của các tài liệu web của mình. Và người đọc của bạn sẽ có thể thưởng thức nội dung hạng nhất mà không cần lo lắng về kết quả đầu ra trông như thế nào trong trình duyệt này hay trình duyệt kia, ở độ phân giải này hay độ phân giải kia.
Nếu bạn muốn bước vào thế giới phát triển web hoặc đang thực hiện những bước đầu tiên trong đó, thì đây là thời điểm tốt nhất để cân nhắc sử dụng HTML Tidy và CSSTidy. Bạn không chỉ làm cho công việc của mình thú vị hơn mà còn giúp thế giới mã rộng lớn trở nên tốt hơn một chút. Này, mọi khoản đóng góp khiêm tốn đều quan trọng.
Chúc mừng.