กาลกรุงหนึ่ง โปรแกรมแก้ไข HTML แบบ Visual เป็นที่นิยม เปิดโปรแกรมแบบ Browser พิมพ์หน้าเว็บ ไม่ต้องคิดมากถึง Source Code, Scripts, หรือลุค Magic เกิดขึ้นเบื้องหลัง แล้ว Online CMS ปล้นขึ้นมา กลายเป็นมาตรฐานสมัยใหม่ แต่ถ้ายังอยากเขียน Web Stuff แบบออฟไลน์?
ดูเหมือน Paradox - คุณจะ Upload วันหนึ่ง อยู่ดี การเขียนออฟไลน์มี Perks และ Convenience เพิ่มเติม หากไม่ใช้ CMS เขียน HTML 純粋 อาจน่าเบื่อ Frontend ที่ดีช่วย Focus บนสิ่งที่อยากให้คนอ่าน ไม่ใช่สิ่งที่ Machine ควร Interpret/Display คำถาม: ยากแค่ไหนในปี 2018?
HTML Editors, At Your Service
กาลกรุงหนึ่ง มี WYSIWYG Editors หลายสิบตัว ทุกตัวเสนอ Wonder ของตัวเอง รวม Inconsistencies, Garbage Code และ Functionality ผมเจอ Nvu เก่า 2006 อัปเกรดเป็น Kompozer เมื่อออกมา ใช้ต่อเนื่องในรูปแบบต่างๆ มันเสนอความเรียบง่ายเขียนโดยไม่กังวล Code + Usability Benefits ที่โปรแกรมอื่นไม่มี แต่ Kompozer ไม่มี Update นาน กำลังต้องการ Refresh ตอนนี้มีอะไรบ้าง?
Bluefish
โปรแกรมนี้มีมานาน ไม่ใช่ WYSIWYG 純粋 ต่างจาก Text Editor ไหนไหน มากที่สุดคือ Launch External Browser ให้ ดูเหมาะแต่ Bluefish รู้สึก Clunky/Nerdy ไม่ใช่สิ่งที่ต้องการสำหรับการเขียนง่ายๆ
เจอปัญหาต่างๆ เช่น Rich Output Sub-menu Validate Code, Convert HTML to XML, Tidy HTML แต่ Fail Launch Tidy แม้ติดตั้งในระบบ
Brackets
Modern, Slick, Overwhelming นิดหน่อย ทางอธิบาย Brackets 好 好 在 OCS-Mag 記事 2015 HTML Editors 談過 試圖 跨越 Classical Writing 和 New Metadata-rich Code Writing 為 更 有 技能 的 用戶 不是 Newbies Live Preview 但 不 真正 顯示 頁面 外觀 當 寫作 本質上 不是 我們 要 找 的
Bluegriffon (BlueGriffon)
Successor ของ Nvu เก่า - Fork เป็น Kompozer ตอนนี้ Discontinued แตวยังใช้งานได้ดี ใน Windows ใน Linux ต้องใช้ Old Libraries ปวดหัว
Bluegriffon ลุคครบ รองรับ HTML5 ดี มี Option น่าสนใจ โดยรวมเป็น True WYSIWYG ที่เหลืออยู่ แต่มันทำสิ่งที่ควรทำ New Users อาจไม่เห็น Issues ระดับ Code แต่ผมเจอปัญหาใช้งานทำให้สงสัยว่ามีอนาคตสำหรับ Offline HTML Editors จริงไหม
Bluegriffon มี Usability Problems สว่าง: เพิ่มรูป/ลิงก์เอกสารอื่น Default เป็น Absolute Paths - ไม่ใช่ Relative - ทำให้ Click เพิ่มทุกครั้ง หรือ Broken Pages หากลืม ตัวอย่าง: ลิงก์ dedoimedo.html ใน Directory เดียว Relative: href="dedoimedo.html" Valid ทำงานได้ Absolute: C:\dedoimedo\dedoimedo.html ไม่มีความหมายออนไลน์ แตกทุกที่นอกเครื่อง Local
ต้อง Tick Checkbox 手動 ทุกครั้ง Bluegriffon ไม่ใช้ Shortcuts มากเท่า Kompozer ไม่มี Shortcut Insert Links, Images, Spellcheck Middle Click ไม่ทำอะไร ใน Kompozer เปิด/ปิด Tabs (Documents) เหมือน Browser สมัยใหม่ อยาก Mark Text ให้ Style ต้อง Define เป็น Span ก่อน Apply Class/Style Kompozer ทำ Auto ประหยัด Click/Action สุดท้าย Bluegriffon เปลี่ยน Code อีก ดูภายหลัง
SeaMonkey (Composer)
พูดว่า Bluegriffon True WYSIWYG เหลือตัวเดียว ผม誇張เล็กน้อย ในที่ Active Development/Support และที่ผมทดสอบ มี TWO ตัว แตเกี่ยวข้องมาก SeaMonkey Suite มี Composer (แยกจาก Kompozer) ฟังก์ชันคล้าย Bluegriffon ลุคต่างเล็กน้อย
ข้อดี/ข้อบกพร่อง เหมือนกัน รวม HTML5 Support และปัญหา Images ที่นี่ Manifest ต่าง: บางหน้า Link รูปใหม่ไม่ได้ บางหน้า เริ่ม Absolute Path (file:///) Checkbox Relative URL มืด ต้อง Edit URL 手動 ตัดส่วน Non-relative ก่อนทำงานได้ ช้า น่ารำคาญ แม้ SeaMonkey มีปุ่ม Preserve Original Source Formatting แต่ไม่ทำจริง Code Changes ดูภายหลัง
Setup Linux ต้อง 32-bit Libraries เยอะ ไม่งั้น Error:
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.
สำหรับผม Full Set Libraries (Auto-resolve Dependencies) รวม - ทดสอบ 64-bit openSUSE KDE, Kubuntu, Ubuntu:
libgtk-3-0-32bit libgthread-2_0-0-32bit libXt6-32bit
Kompozer (KompoZer)
Old Trusted Workhorse ไม่รองรับ HTML5/CSS3 โหลด Code สมัยใหม่ลุคแปลก แต่ Workflow Streamlined มาก: Shortcuts, Relative Links, Quickies อื่นๆ ที่โปรแกรมอื่นขาด Latest Release 2007 มี Beta 2010
HTML Tidy
ผมเขียนเรื่องนี้ 2009 เกือบทศวรรษ แสดง HTML Tidy Wonders หลายรูป: Firefox Extension (Good Ole Days) Notepad++ Plugin มี GUI และ Tool แยก Prettify CSS Choices เยอะ
2018 ต่างออกไป Original Tidy ตาย แต่ Resurrected 近期 Focus HTML5 Compliant ตอนนี้เป็น Standalone Program, Loadable Library (DLL) ติดตั้ง Notepad++ Plugin ชื่อ Tidy2
ปัญหาการตั้งค่า
ไม่ทั้งหมด Smooth ผมอยากดู New Tidy Linux มี Old Tidy ติดตั้ง Force Uninstall มันและ Libraries ก่อน New จะติดตั้ง ได้จาก Repo ไม่ต้องปวดหัว
Windows: Standalone และ DLL ทำงานได้ Notepad++: ใช้ Plugin ได้แค่ 32-bit Version Old HTML Tidy แตกสลาย Run แล้ว Notepad++ Disable ได้ New: Update Notepad++ ล่าสุด Plugin Manager ติดตั้ง Tidy2 (based on tidy-html5)
Standalone ใช้ On-demand ผ่าน Kompozer ได้ ดูแปลก แต่ Kompozer มี Extensions ของตัวเอง HandCoder เรียก Tidy Executable On-demand ตั้ง Path ไป Tidy 版本 ใดก็ได้ รวม Latest Builds (Nov 2017 ในทดสอบ) รันได้กับหน้า HTML เก่าและใหม่ 2007 Kompozer และ HandCoder เก่า เรียก Tidy 2005 ถึง 2017 ได้ Nice
ใช้ New Tidy
โดยรวม ทำงานดี ประทับใจ Tidy2 Flags/Options กว้างขึ้น Online Reference กีดเวลา ใช้ชั่วโมงเล่นเข้าใจ
แต่มีปัญหาเยอะกับ New Tidy/Tidy2 การ Manipulate Code ผมคิดว่าคนพัฒนา - Nerds เก่งจริง - ไม่คิดถึง Choices ที่ชัดเจนใน Output Tidied Markup
Focus Tidy2: 1) ใช้ Spaces Indent Code - ไม่ใช่ Tabs Wasteful สำหรับเอกสารใหญ่ Characters เยอะ ไฟล์ใหญ่ 1K Tabs = 4K Spaces 2) Mangling Code รวม Scripts และ Script Attributes ปัญหาใหญ่หากใช้ JS Snippets จาก Publisher เช่น Google (Adsense/Analytics) ต้องใช้ As-is แทนที่ Special Characters เช่น Quotation Marks, Ampersand อาจทำลาย Scripts/URLs
Consult Reference Pages - Offline ผ่าน Notepad++ หรือ Online (List ดูเก่า 2008) มี 3 Configurations Tweak ได้แต่ละตัว
Config คล้าย:
indent: auto
indent-spaces: 2
wrap: 120
markup: yes
output-xml: yes
input-xml: no
quote-marks: no
quote-nbsp: no
quote-ampersand: no
...
ผมเรียนรู้ผ่าน Trial/Error หลายชั่วโมง: หากอยาก Code Pristine มากที่สุด (Looks และ Functionality) ตั้ง Variables:
quote-marks: no
quote-nbsp: no
quote-ampersand: no
preserve-entities: yes
literal-attributes: yes
5 บรรทัดนี้รับรอง URLs และ Script Vars คงเดิม แต Tidy2 (และ Tidy) ยัง Edit/Change Forms และ Ins Blocks แม้ไม่ขอ ทำให้ใช้กับ Third-party Code Snippets เกือบไม่ได้
จุดสำคัญ: ทำไม Tidy ไม่อนุญาต Skip 某些 Code Parts ทำไม Markup ให้สวยโดยไม่ Manipulate ไม่ได้ Tidy ควร Tidy - ไม่ Validate Code - หรืออย่างน้อย Optional 对 於 Pretty Looks 我在 Recursive LDD 實現 類似 遞歸 計算 Tabulations 基於 Separator (Tab) x Entries 同樣 可以 在這裡 做到 不 需要 將 HTML 轉 XML
Markup=no Tidy ทำลาย Document Clean Output=html ไม่ทำอะไร - ไม่ Indent/Delete Blank Lines
Inconsistencies อื่นๆ
แย่กว่า ไม่มี Standard Output ควรเป็นอย่างไร ใช้ Tidy 12-13 ปี เห็น 3-4 Ways Manipulate Code 2005 Format Paragraphs:
<p>
Text here
</p>
New Tidy:
<p>Text here</p>
Old Tidy Next-line Drop + Indent ทุก Element New Tidy ทำบาง Element (Divs) ไม่ทำ Paragraphs/Lists Code Encapsulation: 2005 Tidy ไม่แตะ Scripts (แต่มัง Forms/Ins) 2009 Tidy Wrap Code ใน <![CDATA[]]> Latest Tidy คล้าย 2005 แต่เพิ่ม Indent Spaces แบบ Random Push Scripts ลงใน Code Blocks ไม่เกี่ยวกับ Hierarchy ปัญหาใหญ่หากมีไฟล์เยอะ ไม่อยาก Validate Output Manual ของโปรแกรมที่ควรทำให้
ปัญหา Code Output และ HTML Editors อื่นๆ
Tidy ไม่ได้คนเดียวที่ทำ Undesired Changes Bluegriffon ทำของมัน: เจอ Old Syntax <p> Newline Text Newline </p> จะ Inline Code:
<p> Text here </p>
เพิ่ม 2 Spaces หน้า/หลัง Block แสดงไม่ออกบนหน้าจอ ผมสงสัย Backend และ Convention แปลก เพิ่ม Spaces ระหว่าง Elements อื่นๆ เช่น Images และ Closing Divs Maddening
Bluegriffon มี Markup Function ลองแล้ว เปลี่ยน Code บางส่วน ทุกครั้งแสดง Lines ต่างกัน Edited Pages มangled หายาก Divs ทำลาย สุดท้าย Bluegriffon Mangling Forms/Ins Blocks
SeaMonkey (Composer) Issues คล้าย เปลี่ยน Paragraph Lines ใช้ Styling ตัวเอง Extra Tabs + Padding Spaces แม้ Checkbox ถูกต้อง ยัง Edit Source Mangling Ins Blocks
สรุป
เขียน Standalone Code อาจไม่ใช่ "Modern Way" แต่ถ้าอยากทำ HTML/CSS 簡單 Valid Code คุณ在 Serious Trouble เพราะเลือกระหว่าง Text Editors และ Visual Editors ที่กิน Code ไม่ Shine ที่ Profess ที่จะ做 加上 Code Tidying 這是 Wild Wild West 小心 可能 真的 打破 Scripts 和 Forms 最糟 是 沒有 Convention Code 應該 如何 被 破壞 最後 CMS 世界 變化 像 WordPress Gutenberg Overhaul 我 真正 擔心 乾淨 Code 未來 是否 存在
Irony: 2007 Tool Kompozer ทำ Overall Job 好 最 好 儘管 Limitations 固有 無 Modern Standards 支援 但 Least Intrusive 和 Most Productive Bluegriffon/Seamonkey 好 但 Blend 古老 Problems 和 Modern Looks 沒幫助 Kompozer 解決 Early 2000s UI Bugs 應該 是 Baseline 未來 Iterations 最後 Left with Sub-optimal Choices
任何 方式 妥協 Ease of Use, Visual Convenience, Code Chaos, Plain Efficiency 2018 似乎 沒有 同情 Offline Workers 或 Tidy Compliant Code 亮面: Notepad++ 或 Brackets 瘋狂 至少 有 這個 本質上 Full Circle 並沒有 真正 獲得 什麼 遠端 CMS World 像 Cloud Journey 有 API 和 Fancy UI 但 沒有 Access Behind Scenes 麻煩 複雜 What You See Is What Once Was Welcome to Abstraction Dedoimedo out.
Cheers.
