Có một thời, trình soạn thảo HTML trực quan là trào lưu. Bạn mở một chương trình giống trình duyệt và chỉ gõ trang, không nghĩ nhiều về mã nguồn, script, thậm chí giao diện. Phép màu xảy ra đâu đó hậu trường. Sau đó, từ từ nhưng chắc chắn, CMS trực tuyến bắt đầu xuất hiện, và cuối cùng trở thành chuẩn mực hiện đại. Nhưng nếu bạn vẫn muốn viết Web offline?
Nghe hơi như nghịch lý - cuối cùng, bạn SẼ upload tài liệu một ngày. Vẫn, viết offline có ích và tiện. Hơn nữa, nếu bạn không dùng CMS, viết HTML thuần túy có thể nhàm chán. Có một frontend đẹp giúp bạn tập trung vào thứ bạn muốn người đọc, không nhất thiết máy phải diễn giải và hiển thị. Câu hỏi là, việc này khó đến đâu trong năm 2018?
Trình soạn thảo HTML, tại dịch vụ
Có một thời, có chục trình soạn thảo WYSIWYG, mỗi cái cung cấp kỳ quan riêng, cũng như loạt inconsistency, code rác và chức năng riêng. Tôi gặp Nvu cũ năm 2006, nâng cấp lên Kompozer khi nó ra, và dùng nó từ đó dưới hình thức này hoặc khác, vì nó cung cấp sự đơn giản viết mà không lo code, cộng với một số lợi ích usability nghiêm túc mà không chương trình nào khác dường như cung cấp. Nhưng rồi, Kompozer không thấy cập nhật منذ lâu, và cần một sự làm mới. Chúng ta có gì trên bàn?
Bluefish
Chương trình này đã có mặt lâu. Nó không phải trình soạn thảo WYSIWYG thuần túy. Thực tế, về mặt này nó không khác trình soạn thảo văn bản nào. Tốt nhất nó làm chỉ là chạy trình duyệt ngoài cho bạn. Nghe decent, nhưng cuối cùng, Bluefish cảm thấy cồng kềnh/nerdy và không phải thứ chúng ta thực sự cần cho viết đơn giản.
Hơn nữa, tôi gặp nhiều vấn đề khi dùng nó. Ví dụ, nó có menu output rất phong phú, và có thể validate code, chuyển HTML sang XML, tidy HTML, v.v., nhưng rồi nó không chạy được Tidy, dù chương trình đã cài trong hệ thống.
Brackets
Hiện đại, mượt mà, và có lẽ hơi overwhelming, cách tốt nhất mô tả Brackets. Thực tế chúng ta đã nói về chương trình này ở độ dài nào đó trong bài OCS-Mag về trình soạn thảo HTML năm 2015. Nó là tiện ích cố gắng nối thế giới cổ điển viết với thế giới code giàu metadata mới. Nó cũng được thiết kế cho người dùng có kỹ năng hơn, không phải newbie. Brackets có hàm live preview, nhưng nó không thực sự cho bạn thấy trang trông như thế nào khi bạn viết. Vậy về bản chất, nó không chính xác thứ chúng ta tìm.
Bluegriffon (BlueGriffon)
Đây là người kế thừa trình soạn thảo Nvu cũ - vốn cũng được fork thành Kompozer, hiện đã ngừng phát hành lâu, dù vẫn dùng được hoàn hảo, ít nhất dạng Windows. Trên Linux, bạn sẽ cần thư viện cũ, và đây có thể là nỗi đau. Anyway.
Bluegriffon trông hợp phần và xử lý HTML5 tốt. Có một vài tùy chọn neat, và về bản chất, đây là WYSIWYG đúng duy nhất còn lại. Mặc dù nó phần lớn làm những gì nó nên, và người mới có thể không nhận ra vấn đề ở cấp độ code, tôi gặp nhiều vấn đề khiến tôi thắc mắc có thực sự có tương lai cho trình soạn thảo HTML offline.
Bluegriffon có một vài vấn đề usability rõ rệt. Nếu bạn thêm hình ảnh hoặc link đến tài liệu khác, chúng được đánh dấu là đường dẫn tuyệt đối - và không phải tương đối - mặc định, làm cho một cú click thêm nhàm chán ở khắp nơi, hoặc trang bị hỏng nếu bạn quên. Nếu bạn thắc mắc ý tôi, giả sử bạn muốn link đến trang dedoimedo.html cùng thư mục với tệp bạn đang viết. Về mặt tương đối, a href="dedoimedo.html" là link hoàn toàn hợp lệ, và miễn hai tệp cùng thư mục, nó sẽ chạy tốt. Tuyệt đối nghĩa là C:\dedoimedo\dedoimedo.html, vô nghĩa online, và sẽ hỏng ở hầu như mọi nơi ngoài máy cục bộ.
Bạn phải thủ công tick hộp. Mỗi lần. Bluegriffon cũng không dùng phím tắt nhiều như Kompozer - không có cho chèn link, hình ảnh hoặc gọi spellchecker. Middle click không làm gì hữu ích, trong khi Kompozer nó mở và đóng tab (tài liệu), như bất kỳ trình duyệt hiện đại nào. Nếu bạn muốn đánh dấu một phần văn bản và style nó, bạn phải trước định nghĩa nó thành span rồi mới áp dụng class/style, trong khi Kompozer làm tự động, tiết kiệm click và hành động chuột. Cuối cùng, Bluegriffon cũng thay đổi code, nhưng nói sau.
SeaMonkey (Composer)
Khi tôi nói Bluegriffon là WYSIWYG đúng duy nhất còn lại, tôi hơi phóng đại. Trong số những cái hiện đang phát triển và hỗ trợ tích cực, và những cái tôi test, có HAI, trừ rằng chúng rất, RẤT chặt chẽ liên quan. Bộ SeaMonkey jack-of-all-trades cũng đi kèm Composer (phân biệt với Kompozer), và cung cấp chức năng tương tự nếu giao diện hơi khác Bluegriffon.
Về cơ bản cùng ưu và nhược điểm, bao gồm hỗ trợ HTML5 và vấn đề với hình ảnh. Ở đây, vấn đề thể hiện khác. Trên một số trang, nó không link hình ảnh mới. Trên cái khác, nó luôn bắt đầu với đường dẫn tuyệt đối (prefix file:///), và hộp Relative URL bị xám. Bạn thực sự phải thủ công sửa URL và bỏ phần không tương đối trước khi làm nó chạy. Chậm và nhàm chán. Và ngay cả khi SeaMonkey có nút nói nó sẽ giữ format nguồn gốc, nó không thực sự làm vậy. Thêm về thay đổi code sau.
Nói chung, có một vài tùy chọn cồng kềnh ngạc nhiên, tôi thấy khá lạ vì chúng đã được giải quyết trong Kompozer lâu rồi. Thiết lập Linux cũng cần một vài thư viện 32-bit, nếu không bạn có thể gặp lỗi:
XPCOMGlueLoad error for file /home/roger/Downloads/seamonkey/libmozgtk.so:
libgtk-3.so.0: cannot open shared object file: No such file or directory
Couldn't load XPCOM.
Đối với tôi, bộ thư viện cần thiết (tự giải quyết phụ thuộc) bao gồm - test trên các bản 64-bit openSUSE KDE, Kubuntu và Ubuntu:
libgtk-3-0-32bit libgthread-2_0-0-32bit libXt6-32bit
Kompozer (KompoZer)
Người lao động cũ và tin cậy. Kompozer không hỗ trợ HTML5 và CSS3, nên mọi thứ sẽ trông kỳ lạ nếu bạn tải code hiện đại. Mặt khác, nó có workflow được streamlined nhất, với phím tắt, link tương đối, và một vài quickies khác mà tất cả chương trình khác thiếu. Phiên bản mới nhất về 2007, nhưng có beta 2010. Golly.
HTML Tidy
Điều xảy ra, tôi cũng viết về chủ đề này, năm 2009, gần một thập kỷ trước. Tôi chỉ cho bạn kỳ diệu của HTML Tidy, lúc đó có nhiều dạng, bao gồm tiện ích Firefox (những ngày tốt đẹp) và plugin Notepad++. Có GUI, và công cụ riêng prettify CSS. Lựa chọn nhiều và đầy đủ.
Năm 2018, mọi thứ hơi khác. Tidy gốc đã chết, nhưng sau đó được hồi sinh, với focus làm nó tuân thủ HTML5. Nó giờ sống như chương trình độc lập, thư viện tải được (DLL), và cũng có thể cài làm plugin Notepad++ dưới tên Tidy2.
Vấn đề thiết lập
Nhưng không phải all smooth sailing. Tôi muốn xem Tidy mới hoạt động tốt thế nào. Trên Linux, tôi đã có Tidy cũ cài, và phải force gỡ nó và thư viện liên quan trước khi cái mới cài được. Ít nhất mọi thứ từ repo, nên bạn không cần đổ mồ hôi.
Trên Windows, standalone và DLL chạy ổn. Trên Notepad++, bạn chỉ có thể dùng plugin với phiên bản 32-bit. Tidy HTML cũ hoàn toàn hỏng, và nếu bạn chạy, Notepad++ sẽ disable nó. Để lấy cái mới, bạn phải trước cập nhật trình soạn thảo lên phiên bản mới nhất rồi dùng plugin manager cài Tidy2, dựa trên tidy-html5. Xong.
Bạn cũng có thể dùng bản standalone on-demand qua Kompozer. Nghe kỳ lạ, nhưng Kompozer có extension riêng, HandCoder, có thể gọi Tidy executable on-demand. Kỹ thuật, bạn có thể đặt path của nó thành bất kỳ phiên bản Tidy nào, bao gồm bản build mới (Nov 2017 trong test), và nó sẽ chạy chúng tốt cho trang HTML cũ và hiện đại. Thực tế, Kompozer 2007 và HandCoder lâu đời có thể triệu hồi Tidy từ 2005 đến 2017. Nice.
Dùng Tidy mới
Tổng thể, chương trình dường như hoạt động tốt. Tôi đặc biệt ấn tượng với Tidy2, dường như cung cấp nhiều flag và tùy chọn hơn. Tham chiếu online là một time killer decent, bạn có thể mất vài giờ tìm hiểu mọi thứ hoạt động như thế nào.
Cái nói vậy, cũng có nhiều vấn đề với Tidy/Tidy2 mới và cách nó thao tác code, và tôi thấy khá lạ rằng những người phát triển này - nerd nghiêm túc và thông minh - không nghĩ đến một số lựa chọn rõ ràng về cách chương trình nhỏ của họ xuất markup đã tidy.
Tập trung chủ yếu vào Tidy2, đầu tiên, nó dùng space để indent code - không phải tab. Điều này lãng phí cho tài liệu lớn, vì bạn kết thúc với nhiều ký tự hơn, và cuối cùng tệp lớn hơn. 1K tab thành 4K space. Thứ hai, nó làm hỏng code, bao gồm script và thuộc tính script. Đây có thể là vấn đề lớn nếu bạn dùng snippet Javascript từ nhà xuất bản như Google (Adsense hoặc Analytics), ví dụ, bắt buộc bạn dùng code của họ as is. Nó cũng thay thế ký tự đặc biệt như dấu ngoặc kép hoặc ampersand, có thể phá vỡ script và URL của chúng.
Lúc này, tôi quyết định tham khảo trang tham chiếu - chúng đến như trang offline qua giao diện Notepad++, hoặc đọc online, dù danh sách có vẻ date back 2008. Bạn có ba cấu hình, và có thể tinh chỉnh riêng.
Dù sao, config trông như:
indent: auto
indent-spaces: 2
wrap: 120
markup: yes
output-xml: yes
input-xml: no
quote-marks: no
quote-nbsp: no
quote-ampersand: no
...
Tôi học, qua nhiều giờ thử và sai, nếu bạn muốn giữ code nguyên vẹn nhất có thể, cả giao diện LÀ chức năng, thì bạn nên đặt các biến sau:
quote-marks: no
quote-nbsp: no
quote-ampersand: no
preserve-entities: yes
literal-attributes: yes
Ít nhất, năm dòng sau sẽ đảm bảo URL và biến script không thay đổi. Nhưng Tidy2 (và Tidy tất nhiên) vẫn sẽ chỉnh sửa và thay đổi thứ như forms và blocks ins, ngay cả khi bạn không nhờ, làm cho việc dùng nó bên cạnh code snippet bên thứ ba gần như bất khả thi. Ví dụ, này không bao giờ chạy:
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-xxxxxxxxxx"
data-ad-slot="yyyyyyyyyy"></ins>
Điều này đưa tôi đến vài điểm then chốt - tại sao Tidy không cho phép bỏ qua phần code nhất định. Và tại sao không thể markup code đẹp mà không thao tác. Tidy nên tidy - không validate code - hoặc ít nhất, nên optional. Khi nói đến giao diện đẹp, tôi đã triển khai thứ tương tự trong chương trình nhỏ của tôi gọi là recursive LDD, implementation đệ quy của LDD. Bất cứ khi nào nó xuất code ra màn hình, nó tính toán cần bao nhiêu tabulation để indent văn bản in dựa trên separator (tab) x số entry vào hàm đệ quy. Cùng có thể làm ở đây mà không cần đổi HTML sang XML và那些.
Ở đây, chúng ta gặp vấn đề khác. Nếu chọn markup=no, Tidy sẽ xóa sạch tài liệu. Nếu chọn output=html, nó không làm gì - không indent và/hoặc xóa dòng trống.
Inconsistency khác
Tệ hơn, không dường như có tiêu chuẩn về đầu ra trông như thế nào. Làm việc với Tidy 12-13 năm, tôi thấy ít nhất ba bốn cách khác nó thao tác code. Ví dụ, Tidy 2005 format đoạn văn:
<p>
Text here
</p>
Tuy nhiên, Tidy mới làm như này:
<p>Text here</p>
Tidy cũ dùng drop dòng sau và indent cho TẤT CẢ yếu tố. Tidy mới chỉ làm cho yếu tố nhất định (như divs), không phải đoạn văn và list. Rồi, có vấn đề code incapsulation. Tidy 2005 không thay đổi script - dù vẫn làm hỏng forms và ins. Tidy 2009 thực sự wrap code trong block <![CDATA[]]>. Tidy mới dường như hành xử như 2005, trừ nó thêm số indent space gần như ngẫu nhiên, đẩy script sâu vào block code, không liên quan đến hierarchy 'tidy' đầu ra. Như bạn tưởng tượng, đây là vấn đề lớn, đặc biệt nếu bạn có hàng tấn tệp, và không muốn phải validate thủ công đầu ra của chương trình nên làm cho bạn.
Vấn đề đầu ra code & trình soạn thảo HTML khác
Thật tiếc, Tidy không đơn độc làm thay đổi không mong muốn cho code HTML. Bluegriffon cũng làm việc của nó. Nếu nó gặp cú pháp cũ mở ngoặc đoạn văn, dòng mới, text, dòng mới, đóng ngoặc đoạn văn, nó sẽ inline code:
<p> Text here </p>
Nó thực sự THÊM hai space đầu và cuối block. Tệ nhất, những thứ này không hiển thị trên màn hình, nên tôi thắc mąc gì xảy ra hậu trường, và tại sao convention kỳ lạ này. Nó cũng thêm space giữa các yếu tố khác, như hình ảnh và đóng div. Điên rồ.
Bluegriffon cũng có hàm markup riêng - tôi thử - và nó thay đổi một số code, nhưng mỗi lần cho số dòng khác. Sau chỉnh sửa, trang marked-up bị hỏng thảm hại. Một số div bị hỏng hoàn toàn. Cuối cùng, Bluegriffon cũng làm hỏng forms và blocks ins.
SeaMonkey (Composer) có vấn đề tương tự. Nó cũng thay đổi dòng đoạn văn, chỉ nó dùng styling riêng, nghĩa là tab thêm PLUS padding space. Và ngay cả với hộp đúng tick, nó vẫn chỉnh sửa source, làm hỏng blocks ins.
Kết luận
Vâng, tôi biết. Viết code độc lập có thể không phải cách "hiện đại" làm việc. Rồi, nếu bạn muốn làm việc HTML/CSS đơn giản với code hợp lệ, bạn trong rắc rối nghiêm trọng, vì bạn phải chọn giữa trình soạn thảo văn bản và trình soạn thảo trực quan nhai code không thực sự tỏa sáng ở thứ họ tự nhận. Thêm vào đó, khi nói đến code tidying, oh my, đây là Far West. Cẩn thận, vì bạn thực sự có thể phá vỡ script và form, và tệ nhất, không có convention nào về code nên bị phá như thế nào. Cuối cùng, với thay đổi sắp tới thế giới CMS, như đại tu WordPress Gutenberg, tôi thực sự lo lắng tương lai của code sạch dành cho chúng ta, hoặc có thậm chí bất kỳ tương lai nào.
Ngạc nhiên, công cụ 2007 tên Kompozer làm tổng thể tốt nhất ở đây, bất chấp hạn chế và không hỗ trợ tiêu chuẩn hiện đại. Nhưng nó ít xâm nhập nhất, và cũng năng suất nhất. Bluegriffon và Seamonkey chạy ổn, nhưng họ trộn vấn đề cổ xưa với giao diện hiện đại, và điều đó không giúp gì. Kompozer đã giải quyết bug UI đầu 2000, và nó nên là baseline cho các iteration tương lai. Cuối cùng, bạn còn lại với lựa chọn sub-optimal.
Không quan trọng bạn đi đường nào, bạn sẽ phải compromise giữa dễ dùng, tiện lợi trực quan, hỗn loạn code, và hiệu quả thuần túy. Dường như năm 2018 ít đồng cảm với những ai muốn làm việc offline hoặc dùng code tidy, tuân thủ. Mặt tốt, bạn có thể wild với Notepad++ hoặc Brackets. Vậy là có đó ít nhất. Về bản chất, chúng ta đã đi vòng tròn, và không thực sự获得 gì. Ở phía xa của spectrum, thế giới CMS online như hành trình cloud. Mọi người có API đẹp chạy thứ của họ và UI fancy-ish, nhưng không thực sự có quyền truy cập thứ hậu trường, và đó là hỗn loạn phức tạp, kinh khủng. What You See is What Once Was. Welcome to Abstraction. Dedoimedo out.
Chúc vui.