เครื่องมือสนามเด็กเล่นรหัสเว็บที่คุณควรลอง

หากคุณชอบเขียนโค้ดเว็บ คุณอาจเคยใช้สนามเด็กเล่นโค้ดอย่างน้อยหนึ่งรายการในช่วงเวลาของคุณ สิ่งเหล่านี้ไม่ใช่เครื่องมือแก้ไขโค้ดปกติของคุณ แต่เป็นที่ที่คุณสามารถทดสอบโค้ดได้โดยไม่ต้องกังวลเกี่ยวกับการตั้งค่าเซิร์ฟเวอร์แบ็กเอนด์ Codepen และ JSFiddle เป็น 2 รายการที่ได้รับความนิยมมากที่สุด แต่อาจไม่น่าแปลกใจ (เนื่องจากกลุ่มเป้าหมายสำหรับ Web Code Playground คือผู้ที่มีทักษะในการสร้าง Code Playground ด้วยตนเอง) มี จำนวนมาก ทางเลือกอื่น

หากคุณเพียงต้องการสร้างแอป HTML/CSS/JavaScript อย่างรวดเร็วแล้วลองใช้งาน Playground ที่คุณเลือกนั้นค่อนข้างจะเป็นเรื่องของความชอบส่วนตัว หากคุณต้องการคุณสมบัติเพิ่มเติม เช่น การเขียนโค้ดการทำงานร่วมกันแบบเรียลไทม์ การเข้าถึงเฟรมเวิร์ก JS อย่างรวดเร็ว เช่น React หรือ Vue การสนับสนุนแบ็กเอนด์ หรือแม้แต่ชุมชนครีเอทีฟโฆษณา คุณอาจต้องการซื้อสินค้าสักหน่อย

CodePen

อาจเป็นสนามเด็กเล่นโค้ดส่วนหน้าที่ได้รับความนิยมมากที่สุดนั่นคือ CodePen และด้วยเหตุผลที่ดี:ใช้งานง่ายและใช้งานง่าย มีชุมชนขนาดใหญ่และมีชีวิตชีวา และได้กลายเป็นมาตรฐานที่ยอมรับสำหรับการฝังโค้ดเว็บที่ใช้งานได้ลงในหน้าเว็บ การอัปเดตอัตโนมัติอย่างรวดเร็วและหน้าต่างการดูที่ยืดหยุ่นทำให้เป็นที่นิยมสำหรับโครงการอนิเมชั่น CSS มันมีตัวประมวลผลล่วงหน้า CSS/JS และสามารถเชื่อมต่อกับสคริปต์ภายนอกได้อย่างง่ายดาย (React, Vue และสิ่งอื่น ๆ ที่มีให้ผ่าน CDNjs) และแม้แต่ปากกาอื่น ๆ

โดยรวมแล้ว CodePen สมควรได้รับตำแหน่งสูงสุด โดยเฉพาะอย่างยิ่งสำหรับโครงการส่วนหน้าและพอร์ตการลงทุน มันไม่ได้สร้างมาสำหรับแบ็คเอนด์ และคุณสมบัติบางอย่างของมัน เช่น การเขียนโค้ดร่วมกัน หลายโปรเจ็กต์ (ซึ่งต่างจากปากกาแต่ละด้าม) และการดูแบบเต็มหน้าแบบสด (การดูแบบสดเพียงบางส่วนในเพจนั้นฟรี) ต้องใช้โปรที่จ่ายเงิน สมัครสมาชิก

JSFiddle

สำหรับไวโอลินตัวที่สอง (แม้ว่าจะเป็นไวโอลินที่เก่าที่สุดตามลำดับ) ในโลกของ front-end code คือ JSFiddle ตามที่ชื่ออาจบอกเป็นนัย มันคือเชิง JavaScript ดังนั้นจึงมีฟีเจอร์ JS ที่พร้อมใช้งานได้ทันทีและน้อยกว่าในลักษณะของ HTML/CSS (ตามตัวอักษร มันมีการรองรับเริ่มต้นสำหรับ Sass แต่ไม่ใช่สำหรับ Less) นั่นไม่ใช่ปัญหาใหญ่ เนื่องจากมีการทำงานเพียงเล็กน้อย คุณสามารถเพิ่มคุณสมบัติ HTML/CSS/JS ใดก็ได้ที่คุณต้องการ และเนื่องจากมันรองรับการบอกใบ้โค้ดและ auto- การรีโหลด อาจดีกว่า CodePen เล็กน้อยในแง่ของความสามารถในการเขียนโค้ดโดยรวม

จุดสำคัญในความโปรดปรานของ JSFiddle คือมีโหมดการทำงานร่วมกัน (รวมถึงการแชทด้วยเสียงและข้อความ!) ฟรี ช่วยให้คุณสามารถทำงานกับโค้ดได้ในเวลาเดียวกันกับคนอื่นๆ ไม่มีแง่มุมของชุมชนมากนักและไม่แสดงโครงการที่น่าสนใจ ดังนั้นจึงแพ้ CodePen ในด้านนั้น

โดยรวมแล้ว หากคุณมีโปรเจ็กต์ที่มี JS มากกว่าหรือจำเป็นต้องเขียนโค้ดร่วมกัน JSFiddle เป็นตัวเลือกที่ยอดเยี่ยม หากมีบางอย่างที่ทำให้คุณรำคาญ ก็มีทางเลือกอื่นๆ ที่ให้ความรู้สึกคล้ายกันมากมายในรายการ "สนามเด็กเล่นอื่นๆ" ด้านล่าง

ความผิดพลาด

เอาล่ะ คุณไม่ได้ต้องการแค่เล่นๆ กับส่วนหน้า แต่คุณต้องการบางสิ่งที่คุณสามารถสร้างเว็บแอปแบบฟูลสแตกได้ สนามเด็กเล่นโค้ดจำนวนมากช่วยให้คุณเขียนโค้ด HTML/CSS/JS และสร้างหน้าเว็บแบบสแตติกได้ แต่ Glitch ให้พื้นที่เก็บข้อมูลเล็กน้อย คำขอ 4000 รายการต่อชั่วโมง และทำให้เรียกใช้โค้ดฝั่งเซิร์ฟเวอร์ Node.js ได้อย่างง่ายดาย ด้วยราคาต่อรองที่แน่นอนที่ $0.00 คุณจะได้รับวิธีการสร้างและปรับใช้โครงการขนาดเล็กได้ทันที ไม่ว่าคุณจะมีประสบการณ์มากน้อยเพียงใด

นอกจากนี้ยังมาพร้อมกับคุณสมบัติที่ยอดเยี่ยมอื่นๆ อีกจำนวนมาก:การเขียนโค้ดร่วมกัน การควบคุมเวอร์ชัน (เรียกว่า "ย้อนกลับ") แหล่งข้อมูลการเรียนรู้มากมาย การรวม GitHub ที่ดี การฝังอย่างง่าย ชุมชนที่เป็นมิตร โครงการมากมายที่คุณสามารถรีมิกซ์และเล่นได้ และแม้กระทั่งการรวม Visual Studio ส่วนต่อประสานการเข้ารหัสส่วนหน้าอาจไม่โฉบเฉี่ยวเหมือนสนามเด็กเล่นอื่น ๆ แต่ฟังก์ชั่นโดยรวมนั้นดีพอ ๆ กัน หากคุณกำลังมองหาวิธีที่รวดเร็วและง่ายดายในการเริ่มต้นใช้งานเว็บแอป (หรือคุณกำลังพยายามเรียนรู้วิธีการ!) Glitch เป็นจุดแรกที่ยอดเยี่ยม

CodeSandbox

CodeSandbox อยู่ในหมวดหมู่เดียวกับ Glitch แต่ซับซ้อนกว่าและมีคุณสมบัติครบถ้วนเล็กน้อย โดยที่ Glitch วางเลเยอร์อินเทอร์เฟซที่ค่อนข้างเรียบง่ายเหนือฟังก์ชันการทำงานที่ค่อนข้างทรงพลัง CodeSandbox จะนำเสนอพลังทั้งหมดนั้นออกมาในที่โล่งโดยใช้ Monaco Editor ตัวเดียวกันกับที่ขับเคลื่อน VS Code ผู้ที่คุ้นเคยกับ IDE นั้นจะรู้สึกเหมือนอยู่บ้านด้วย CodeSandbox

เป็นโอเพ่นซอร์สที่ยืดหยุ่นและปรับแต่งได้อย่างมาก ให้คุณปรับใช้เว็บแอปเต็มรูปแบบ (แม้ว่าจะมีขั้นตอนมากกว่า Glitch ไม่กี่ขั้นตอน) โฮสต์ไฟล์ของคุณ มีบรรยากาศของชุมชน และทำงานเบื้องหลังส่วนใหญ่ให้คุณ ทำให้คุณมีอิสระมากขึ้น เขียนโค้ดและปรับใช้แอปของคุณ นอกจากนี้ยังมีการรวม GitHub และ VS Code, Emmet (ตัวขยายคำย่อ) และคุณสมบัติอื่น ๆ มากมายที่ผู้ใช้ระดับสูงและผู้เขียนโค้ดที่มีประสบการณ์น้อยจะชื่นชอบ มันอาจจะเกินความสามารถถ้าคุณแค่ยุ่ง แต่ถ้าโปรเจ็กต์ของคุณไม่พอดีกับ CodePen อีกต่อไป และคุณไม่สนใจเรื่องเส้นโค้งการเรียนรู้เลย ลองดู CodeSandbox

Repl.it

Playground/IDE นี้ไม่ได้สิ้นสุดเพราะเป็นสิ่งที่ฉันโปรดปรานน้อยที่สุด (ไม่ใช่อย่างแน่นอน):เป็นเพราะ Repl.it อยู่ในหมวดหมู่ทั้งหมดของตัวเอง รองรับ ตัน ของภาษา ตั้งแต่ Python ถึง LOLCODE (ภาษาการเขียนโปรแกรมที่ต้องการของ Lolcats) มีการรองรับโค้ดส่วนหน้าและส่วนหลัง ให้คุณปรับใช้ไซต์และแอป มาพร้อมกับการผสานรวม GitHub ที่แน่นหนามาก โฮสต์ชุมชนนักพัฒนาขนาดใหญ่และกระตือรือร้นมาก และมีอินเทอร์เฟซที่ใช้งานง่ายซึ่งไม่เชื่อว่ามีประสิทธิภาพเพียงใด

Repl.it มีฟีเจอร์ทั้งหมดที่คุณคาดหวังจาก Playground อื่นๆ ในรายการนี้ ตั้งแต่การเข้ารหัสแบบทำงานร่วมกันไปจนถึงการฝัง และแม้ว่าจะยังเป็นเครื่องมือหลักสำหรับการสร้างต้นแบบและการแชร์โค้ด แต่ก็มีผลลัพธ์เพียงพอสำหรับกลุ่มเล็ก-ใหญ่ โครงการขนาดกลาง (ตราบใดที่คุณมีการเชื่อมต่ออินเทอร์เน็ตที่เสถียร) มันอาจจะมากไปหน่อยถ้าคุณเพิ่งทำการออกแบบส่วนหน้าหรือถ้าคุณเพิ่งเริ่มเขียนโค้ด แต่ถ้าคุณตั้งโปรแกรมเลยเป็นประจำ ก็คุ้มค่าที่จะสำรวจ

สนามเด็กเล่นที่ยอดเยี่ยมอื่นๆ ที่น่าลอง

สนามเด็กเล่นด้านบนเป็นสถานที่ส่วนตัวของฉัน แต่มีอีกมากมาย พวกเขาทั้งหมดสามารถทำพื้นฐานได้มากและแต่ละคนก็มีจุดเปลี่ยนของตัวเองเพื่อดึงดูดความต้องการที่แตกต่างกัน JSFiddle เป็นแรงบันดาลใจให้กับพวกเขาหลายคนอย่างชัดเจน ดังนั้นหากคุณกำลังมองหาทางเลือกอื่นสำหรับแอปนั้น คุณสามารถค้นหาได้ที่นี่

• Liveweave:คล้ายกับ JSFiddle แต่เน้นการออกแบบมากกว่า มีความโดดเด่นเป็นพิเศษสำหรับ CSS ในตัว เครื่องมือสร้างสี และโปรแกรมแก้ไขเวกเตอร์
• JSItor:ทางเลือกใหม่ของ JSFiddle ที่ให้ความรู้สึกคล้ายกันอย่างมาก โดยเฉพาะแอป Android/iOS
• StackBlitz:IDE บนเบราว์เซอร์ที่ยอดเยี่ยมซึ่งสร้างด้วย Monaco Editor ที่ขับเคลื่อน VS Code รู้สึกเหมือน CodeSandbox เล็กน้อย แต่ง่ายกว่าเล็กน้อยเนื่องจากขาดการสนับสนุนแบ็กเอนด์
• เฟลมส์:เปล่าๆ สนามเด็กเล่นแบบมินิมอล สมบูรณ์แบบหากคุณต้องการบางสิ่งที่ไม่มีเรื่องไร้สาระ 0 และ/หรือปราศจากสิ่งรบกวน
• JSBin:JSFiddle เวอร์ชันมินิมอล
• CSSDeck:สนามเด็กเล่นส่วนหน้าที่เรียบง่ายมาก หากคุณต้องการวิธีที่ไม่ยุ่งยากในการทดสอบแนวคิดสองสามอย่างใน HTML/CSS และ JS พื้นฐาน ก็เป็นตัวเลือกที่ดี
• ICECoder:เป็นสนามเด็กเล่นออนไลน์ที่มีคุณสมบัติเทียบเท่ากับฟีเจอร์อื่นๆ มากมาย แต่จุดสนใจหลักก็คือ เช่นกัน โปรแกรมที่ดาวน์โหลดได้ซึ่งทำงานในเบราว์เซอร์ของคุณ โดยพื้นฐานแล้วทำให้เป็น IDE แบบออฟไลน์บนเบราว์เซอร์
• Planker:เครื่องมือฟรอนต์เอนด์ที่ให้คุณเล่นกับไฟล์ได้มากกว่า Playground อื่นๆ เล็กน้อย และมีการรวมเดสก์ท็อป/GitHub ที่ดี
• Scrimba:เอาล่ะ เกมนี้ไม่ใช่ Code Playground อย่างเด็ดขาด แต่เป็นไซต์ที่มีการผสมผสานระหว่างเครื่องมือแก้ไขวิดีโอ/โค้ดที่เป็นนวัตกรรมใหม่ ซึ่งจะช่วยให้คุณมีสภาพแวดล้อมการเรียนรู้และสนามเด็กเล่นในเวลาเดียวกัน คุ้มค่าแก่การเรียนรู้!
• Web Maker:front-end Playground ที่ดีพร้อมฟังก์ชันออฟไลน์และแม้แต่การรวม CodePen!
• Dabblet:สนามเด็กเล่น HTML/CSS/JS ขั้นพื้นฐานแต่การออกแบบที่ดี
• PlayCode:สนามเด็กเล่น HTML/CSS/JS พื้นฐานที่ดี ข้อเสียที่ใหญ่ที่สุด:ข้อความน่ารำคาญที่ปรากฏขึ้นทุกๆ 60 วินาทีเพื่อแจ้งให้คุณอัปเกรดเป็นแผนมืออาชีพ

มีมากเกินไป! ฉันจะเลือกอันไหน

ใช่ มีสนามเด็กเล่นเป็นล้านรหัสเว็บ แต่อย่าสับสนในการตัดสินใจระหว่างพวกเขาและปล่อยให้เสียเวลาไปกับการทำสิ่งต่างๆ จริงๆ! หากคุณมีแนวคิดที่พอใช้ได้ครึ่งทางเกี่ยวกับสิ่งที่คุณกำลังมองหาในสภาพแวดล้อมการเขียนโค้ดออนไลน์ เพียงจำกัดให้เหลือแอปสองหรือสามแอปที่มีคุณสมบัติเหล่านั้น ลองใช้แต่ละแอปเล็กน้อยและดูว่าแอปใดที่คุณพบว่าเป็นตัวเอง โน้มเอียงไปทาง ส่วนใหญ่มีการรวม GitHub และ/หรือคุณสมบัติการส่งออก/นำเข้าอยู่แล้ว ดังนั้นจึงไม่ใช่ว่าคุณกำลังล็อคตัวเองให้อยู่ในการตัดสินใจที่ไม่ดีตลอดไป

ส่วนตัวฉันใช้ CodePen สำหรับหน้าสแตติกธรรมดาและการทดลองออกแบบ และ Glitch สำหรับโปรเจ็กต์ที่ใหญ่กว่า แม้ว่าฉันจะชื่นชมการออกแบบ VS Code ของ CodeSandbox และคอนโซลของ Repl.it หากฉันพลาดสนามเด็กเล่นที่คุณชื่นชอบหรือละเลยที่จะพูดถึงคุณสมบัติที่ยอดเยี่ยม แสดงความคิดเห็นด้านล่างเพื่อให้คนอื่นค้นพบมัน!