ถ้าคุณสนใจการเขียนโค้ดเว็บ แน่นอนว่าคุณเคยใช้ Code Playground อย่างน้อยหนึ่งตัวในชีวิต เครื่องมือเหล่านี้ไม่ใช่ Code Editor ธรรมดา แต่มันคือสถานที่ที่คุณสามารถทดสอบโค้ดได้โดยไม่ต้องกังวลเรื่องการตั้งค่า Backend Server แม้ CodePen และ JSFiddle จะเป็นสองตัวที่ดังที่สุด แต่โดยไม่คาดคิด (เพราะกลุ่มเป้าหมายคือคนที่มีทักษะสร้าง Playground เองได้) จึงมีทางเลือกอื่นมากมาย
CodePen
CodePen น่าจะเป็น Front-end Code Playground ยอดนิยมที่สุด และมีเหตุผลที่ชัดเจน: ใช้งานง่าย เข้าใจง่าย มีชุมชนใหญ่และมีชีวิตชีวา และกลายเป็นมาตรฐานที่ยอมรับในการฝังโค้ดเว็บที่ทำงานได้จริงลงในหน้าเว็บ ฟีเจอร์ Auto-update ที่รวดเร็วและหน้าต่างแสดงผลที่ยืดหยุ่น ทำให้มันดังสำหรับโปรเจกต์ CSS Animation รองรับ CSS/JS Preprocessors และเชื่อมต่อ External Scripts (React, Vue และทุกอย่างบน CDNjs) ได้ง่าย รวมถึง Pen อื่นๆ อีกด้วย
โดยรวม CodePen สมควรได้อันดับหนึ่ง โดยเฉพาะสำหรับโปรเจกต์ Front-end และ Portfolio แต่ไม่ได้สร้างขึ้นสำหรับ Back-end และบางฟีเจอร์ เช่น Collaborative Coding, Multiple Projects (ไม่ใช่แค่ Pen เดี่ยว) และ Live Full-page Views (Live Partial-page Views ฟรี) ต้องสมัคร Pro แบบจ่ายเงิน
JSFiddle
JSFiddle อยู่อันดับสอง (แม้จะเป็นหนึ่งในตัวเก่าสุด) ในโลก Front-end Playground เน้น JavaScript มากกว่า จึงมีฟีเจอร์ JS มากกว่า HTML/CSS (ตัวอย่างรองรับ Sass แต่ไม่รองรับ Less) แต่ไม่ใช่ปัญหาใหญ่ เพราะเพิ่มฟีเจอร์ HTML/CSS/JS ที่ต้องการได้ และรองรับ Code Hinting และ Auto-reloading ทำให้อาจดีกว่า CodePen ด้านความสามารถในการเขียนโค้ดโดยรวม
จุดแข็งใหญ่ของ JSFiddle คือมี Collaboration Mode (รวม Voice และ Text Chat) ฟรี ให้ทำงานร่วมกับคนอื่นพร้อมกัน แต่ไม่ค่อยมี Community Aspect และไม่ Showcase โปรเจกต์น่าสนใจ จึงแพ้ CodePen ด้านนี้
โดยรวม ถ้าโปรเจกต์มี JS เยอะ หรือต้องเขียนโค้ดร่วมกัน JSFiddle เป็นตัวเลือกดี แต่ถ้ามีอย่างไรบothersome ก็มีทางเลือกคล้ายๆ กันในรายการ "Other Playgrounds" ด้านล่าง
Glitch
ถ้าคุณไม่ได้แค่เล่น Front-end แต่ต้องสร้าง Full-stack Web App หลาย Playground ให้แค่เขียน HTML/CSS/JS สร้าง Static Page แต่ Glitch ให้ Storage Space, 4,000 Requests/ชั่วโมง และรัน Node.js Server-side ได้ง่าย ในราคา $0.00 คุณได้วิธีสร้างและ Deploy โปรเจกต์ขนาดเล็กทันที ไม่ว่าจะมีประสบการณ์เท่าไหร่
ยังมีฟีเจอร์อื่นๆ มากมาย: Collaborative Coding, Version Control (เรียกว่า "Rewind"), Learning Resources เยอะ, GitHub Integration ดี, Embed ง่าย, ชุมชนเป็นมิตร, โปรเจกต์ให้ Remix เยอะ และ VS Code Integration แม้ Front-end Interface อาจไม่ Slick เท่าบางตัว แต่ Overall Functionality เท่าดี ถ้าหาวิธีเร็วง่าย Deploy Web App (หรือเรียนรู้) Glitch เป็นจุดเริ่มต้นยอดเยี่ยม
CodeSandbox
CodeSandbox อยู่กลุ่มเดียวกับ Glitch แต่ซับซ้อนและ Full-featured มากกว่า Glitch ใช้ Interface Minimalistic ปิดบัง Functionality อันทรงพลัง แต่ CodeSandbox วางพลังออกมาโดยตรงด้วย Monaco Editor เดียวกับ VS Code คนที่คุ้น IDE นี้จะรู้สึก like home ทันที
ยืดหยุ่น ปรับแต่งได้มาก Open Source Deploy Full Web App ได้ (แต่ Step เยอะกว่า Glitch) Host ไฟล์ มี Community Vibe ทำ Background Legwork ให้ ให้คุณโฟกัสเขียนโค้ดและ Deploy มี GitHub และ VS Code Integration, Emmet และฟีเจอร์ Power User อื่นๆ เยอะ อาจ Overkill ถ้าแค่เล่นเล่น แต่ถ้าโปรเจกต์ไม่เข้า CodePen แล้ว และยอมรับ Learning Curve สักนิด ลอง CodeSandbox ดู
Repl.it
Repl.it ไม่อยู่ท้ายเพราะชอบน้อยที่สุด (ไม่ได้) แต่เพราะมันอยู่ใน Category ของตัวเองเลย รองรับภาษาเยอะมาก จาก Python ถึง LOLCODE (ภาษาของ Lolcats) มี Front-end และ Back-end Support Deploy Sites และ Apps ได้ GitHub Integration แน่น Community ใหญ่และ Active Interface Intuitive ที่ซ่อนพลังมาก
Repl.it มีฟีเจอร์ที่คาดหวังจาก Playground อื่นๆ ทั้ง Collaborative Coding และ Embedding และแม้จะเป็น Tool สำหรับ Prototyping และ Sharing Code แต่มี Juice พอสำหรับโปรเจกต์ Small-to-Medium (ต้องมี Internet เสถียร) อาจมากเกินไปถ้าแค่ Front-end Designs หรือมือใหม่ แต่ถ้าเขียนโค้ดบ่อย คุ้มค่าที่จะสำรวจ
Playground ยอดเยี่ยมอื่นๆ ที่ควลเช็ค
Playground ข้างต้นคือ Go-to Particular ของผม แต่ยังมีอีกเยอะ ทุกตัวทำ Basics ได้ดี และแต่ละตัวมี Twist ใช้ต่างกัน JSFiddle ชัดเจนว่า Inspire หลายตัว ถ้าหา Alternative ของ JSFiddle อาจเจอที่นี่
- Liveweave: คล้าย JSFiddle แต่เน้น Design มี CSS/Color Generator Tools และ Vector Editor Built-in
- JSItor: Alternative ของ JSFiddle รูสไคล์คล้ายกัน และมี Android/iOS Apps
- StackBlitz: Browser-based IDE ดีเยี่ยม ใช้ Monaco Editor เหมือน VS Code รู้สึกคล้าย CodeSandbox แต่ Simple กว่า เพราะไม่มี Backend Support
- Flems: Barebones Minimalist Playground เหมาะสำหรับ 0 Nonsense และ Distraction-free
- JSBin: Version Minimalist ของ JSFiddle
- CSSDeck: Front-end Playground เรียบง่าย ถ้าอยากทดสอบ HTML/CSS และ Basic JS แบบ No-frills ตัวนี้ดี
- ICECoder: Online Playground ฟีเจอร์เท่าอื่นๆ แต่ Draw คือเป็น Downloadable Program รันใน Browser ทำให้เป็น Offline Browser-based IDE
- Plunker: Front-end Tool ให้เล่นไฟล์มากกว่าบางตัว และมี Desktop/GitHub Integration ดี
- Scrimba: ตัวนี้ไม่ใช่ Playground อย่างเคร่งครัด แตเป็น Site ที่ผสม Video/Code Editor ให้ Learning Environment และ Playground พร้อมกัน เหมาะสำหรับ Learner!
- Web Maker: Front-end Playground ดี มี Offline Functionality และ CodePen Integration!
- Dabblet: HTML/CSS/JS Playground พื้นฐาน แต่ Design สวย
- PlayCode: HTML/CSS/JS Playground เรียบง่าย ข้อเสีย: Popup ขึ้นทุก 60 วินาทีบอก Upgrade Pro
เยอะเกินไป! เลือกไหนดี?
มี Web Code Playground เยอะมาก แต่ đừngให้สับสนจนเสียเวลาที่ควรจะทำของจริง! ถ้ามีไอเดียคร่าวๆ ว่าอยากได้อะไรใน Online Coding Environment ให้แคบเหลือ 2-3 ตัวที่มีฟีเจอร์นั้น ลองเล่นแต่ละตัวดู แล้วดูว่าตัวไหนรู้สึกสบายใจ กหลายตัวมี GitHub Integration และ Export/Import อยู่แล้ว จึงไม่ได้ Lock ตัวเองในการตัดสินใจที่ผิดไปตลอดกาล
ส่วนตัวผมใช้ CodePen สำหรับ Static Pages และ Design Experiments และ Glitch สำหรับโปรเจกต์ใหญ่ แม้จะชื่นชม VS Code Design ของ CodeSandbox และ Console ของ Repl.it ด้วย ถ้าพลาด Playground โปรดของคุณ หรือไม่ได้กล่าวถึงฟีเจอร์เก่งๆ Comment บอกกันด้วยนะ!
