COOL IT IDEAS AND STUFF

See the original english version Click here!

 

Code Playground คือ Online Service ที่คุณสามารถ Write, Compile (หรือ Run) และ Share Code กับคนอื่น นอกจากนี้คุณยังสามารถทดลองใช้ Code ของผู้อื่นได้เช่นกัน ส่วนที่ดีที่สุดคือ Code Playground ส่วนใหญ่ใช้ได้ฟรี และคุณสามารถ Embed ผลลัพธ์ Code ลงใน Website ของคุณได้ และนี่ก็เป็น 8 Code Playground ที่เหมาะกับการเรียนรู้การพัฒนา Web

1. JSFiddle

JSFiddle เป็น Code Playground ที่คุณสามารถ Test ได้ทั้ง HTML, CSS และ JavaScript Snippets มันมาจาก Proof-of-Concept App ในปี 2009 จนตอนนี้มันได้กลายเป็นหนึ่งใน Code Playground ที่มีขนาดใหญ่ที่สุดและคุณสามารถสร้าง Account ได้แบบฟรี ๆ

สิ่งที่น่าประทับใจอีกอย่างเกี่ยวกับ JSFiddle ก็คือเรื่อง Collaboration Sessions คุณสามารถสร้าง Audio-Chat Session ในขณะเขียน Code ใน Fiddle

หากคุณเป็น Blogger ที่ต้องการ Embed ผลลัพธ์ของ Code Snippets รวมทั้ง Source Code ของพวกเขาด้วย แน่นอนว่า JSFiddle ถือเป็นตัวเลือกที่ยอดเยี่ยม

แต่ Code Playground นี้ยังไม่รองรับภาษา Programming ยอดนิยมอื่น ๆ เช่น Python, Go หรือ PHP ดังนั้น แน่นอนว่าคุณไม่สามารถที่จะสร้าง Full-Stack App ในนั้นได้

Features: 

• เป็น Platform นี้ใช้งานได้ฟรี
• มี Interface ที่เรียบง่าย
• รองรับ HTML, CSS และ JS
• ทำงานร่วมกับผู้อื่นโดยใช้ audio chat ได้บน Website โดยตรง
• Documentation ที่ดีเยี่ยม

เช่นเดียวกับส่วนใหญ่ของ Platforms เหล่านี้ มันมี “Extra” Plan ที่ช่วยในการ Maintain และการ Run หากคุณต้องพึ่งพาพวกมัน คุณควรพิจารณาในเรื่องการ Back up เผื่อไว้ด้วย

2. Codepen

Codepen ไม่ได้เป็นเพียง Code Playground แต่เป็น Community ของ Developers ที่ต้องการพัฒนาทักษะและ Share ผลงานที่ดีที่สุดที่พวกเขาสามารถทำได้

ด้วย Users มากกว่า 6 ล้านคน มันจึงเป็นหนึ่งใน Online Code Editors ที่ถูกใช้มากที่สุดสำหรับการพัฒนา Frontend  หากคุณกำลังเริ่มเรียนรู้ Frontend การค้นหา Idea และแรงจูงใจในการเรียนรู้สิ่งต่าง ๆ ต่อไปนั้น ถือเป็นสิ่งที่ควรทำ

Codepen ยังมี Editor ที่ใช้งานง่ายพร้อม 3 Panels ที่สามารถปรับแต่งได้ในการเขียน Code ใน HTML, CSS และ JavaScript อีกทั้ง Codepen ยังมี Built-in Support สำหรับ JavaScript และ CSS Preprocessors อย่าง Typescript และ SASS นอกจากนี้ หากคุณใช้ NPM Package คุณสามารถ Install ได้จาก Settings Panel

Features: 

• มีตัวเลือกสำหรับผู้ที่อยากใช้ Pro Plan
• Code Editor ที่ใช้งานง่าย
• Community ที่ดี
• Codepens ส่วนใหญ่เป็น Open-Source
• สถานที่ที่เหมาะสำหรับการฝึกฝนการพัฒนา Frontend  

3. CodeSandbox

การสร้างต้นแบบของ Website อาจเป็นงานที่ยาก หากคุณไม่มีการ Setup ที่เหมาะสม การใช้ CodeSandbox จึงเป็นการตัดสินใจที่ไม่ต้องคิดมาก เมื่อสิ่งที่คุณต้องการคือ การสร้าง Website อย่างรวดเร็ว

ตามชื่อของมัน CodeSandbox ได้จัดเตรียม Sandboxed Environment สำหรับการพัฒนา Frontend

ตั้งแต่การ Integration กับ GitHub และ Debugging Tools ไปจนถึงประสบการณ์ที่เหมือนกับ VS Code ที่ปรับแต่งได้ Code Playground นี้จะมอบทุกสิ่งที่จำเป็นให้กับคุณในการเริ่มเขียน Code

หากจุดประสงค์หลักของคุณคือ การทำงานร่วมกันกับคนอื่น สิ่งที่คุณต้องทำก็คือ การ Share Link ของ Snadbox จากนั้นคุณก็พร้อมที่จะทำการ Pair Programming แบบ Real-Time แล้ว

Features:

• GitHub Integration
• มีพื้นฐานมาจาก Monaco Editor ที่ช่วยขับเคลื่อน VScode Editor
• Platform แรกที่จัดเตรียมเรื่อง การทำงานร่วมกัน ไว้ให้
• Deploy ไปยัง Vercel หรือ Netlify
• Debugging Tools
• Testing Frameworks ที่พร้อมใช้งาน
• รองรับ NPM

4. Sololearn

Sololearn เป็น Coding Learning Platform ยอดนิยม ที่มี Code Playground สำหรับการพัฒนา Web

อันที่จริงแล้ว มันไม่ใช่ IDE ที่มี Features อย่างครบถ้วนเหมือนกับ Online Editors อื่น ๆ ที่เราเคยเห็นกันในบทความ แต่มันมี Environment ที่คุณสามารถ Write และ Run Code ได้ ซึ่งมันก็น่าจะมากเพียงพอหากคุณเพิ่งเริ่มเขียน Program

อีกสิ่งหนึ่งที่น่าสนใจเกี่ยวกับ Sololearn ก็คือ  Community ที่ยอดเยี่ยมและรองรับสำหรับภาษา Programming หลากหลายภาษา ซึ่งค่อนข้างดีหากคุณต้องการทดลองใช้งานกับเทคโนโลยีอื่น ๆ

Features:

• ใช้งานฟรีสำหรับ Sololearn Account ของคุณ
• Online Code Editor ที่เรียบง่าย
• Community ขนาดใหญ่สำหรับ Share Code ของคุณ
• รองรับหลายภาษา
• Ecosystem ที่ยอดเยี่ยมพร้อมทั้ง Sololearn Courses

5. Codeply

สิ่งที่ดีที่สุดเกี่ยวกับ Codeply คือ การรองรับ Frameworks และ Libraries ที่หลากหลายที่พร้อมใช้งานทันที และเป็น Code Editor รองรับการ Design ที่ Responsive

หากคุณเพิ่งเริ่มต้นกับ Frameworks ใหม่ อย่างเช่น React, Vue หรือ Angular เชื่อว่า Codeply จะเป็นสถานที่ที่ดีในการเริ่มต้น เนื่องจากมีชุดของ Templates ที่ค่อนข้างครบถ้วนและ Community ที่ยอดเยี่ยมที่มี Developers กว่า 40,000 คน

Features:

• Platform ที่ใช้งานได้ฟรี
• Documentation ที่เรียบง่าย แต่ตรงไปตรงมา
• มี Pro Plan ที่จ่ายค่าธรรมเนียมเพียงครั้งเดียว
• มีกว่า 50 Libraries
• ทดสอบ Web Mock up ใน Screen Resolutions ต่าง ๆ ได้

6. Replit

Replit อาจเป็น Online IDE ที่เหมาะสมที่สุดสำหรับ Developer ทุกคน มันมีทุกสิ่งที่คุณต้องการสร้างอย่างแท้จริง ตั้งแต่ Home Page อย่างง่าย ไปจนถึง Web App ที่ซับซ้อนโดยใช้ JS Library ที่ทันสมัย

ด้วย Replit คุณสามารถเขียน Code ได้กว่า 50 ภาษา, เขียน App กับเพื่อนของคุณได้ในเวลาเดียวกัน, ทดสอบ Programs ของคุณ, Integrate กับ GitHub และสามารถเข้าถึงหนึ่งใน Developer Community ที่ใหญ่ที่สุด

Features:

• ใช้งานฟรีสำหรับ Starter Pack หรือ 5$ /เดือน สำหรับ Hacker Plan
• Multiplayer Mode (Live Pair Programming)
• Community ขนาดใหญ่
• รองรับหลายภาษา
• Editor Customization
• Run Button: Run Project ด้วย Customizable Actions
• Secret Storage
• Hosted Code

7. StackBlitz

หากคุณไม่สามารถทำงานได้โดยปราศจาก VS Code เชื่อว่า StackBlitz น่าจะเป็นตัวเลือกที่เหมาะสมสำหรับคุณ เช่นเดียวกับ CodeSandbox มันมีพื้นฐานมาจาก Monaco Editor ซึ่งขับเคลื่อน Code Editor ยอดนิยมตัวนี้

เพียงแค่ Sign In ด้วย GitHub Account ของคุณ คุณก็สามารถเข้าถึง Environment ที่คุณคุ้นเคย

นอกเหนือจากประสบการณ์การใช้ Code Editor แล้ว มันยังเป็น Playground ที่ค่อนข้างมีประสิทธิภาพ คุณสามารถใช้ Templates ที่พร้อมใช้งาน สำหรับ Frontend Frameworks และ Libraries อย่างเช่น React, Vue, Angular, Svelte และ Ionic

แต่ลักษณะเฉพาะหลัก ๆ ของ Tool ตัวนี้ก็คือ ความสามารถในการทำงานกับ Backend Frameworks เช่น Node.js, Next.js และ GraphQL

Features:

• มี Free Plan สำหรับนักเรียน/นักศึกษา
• มีประสบการณ์ใช้งานเช่นเดียวกับ VS Code ภายใน Browser ของคุณ ซึ่งรวมถึง Intellisense, Project Search และอื่น ๆ
• เพิ่มประสบการณ์การเขียน Code ที่ไหลลื่นอย่างมาก
• Offline Code Editor (มันอาจมีประโยชน์ หากคุณยกเลิกการเชื่อมต่อ Internet)
• Hosted App URL: ง่ายต่อการ Live Sharing

8. Glitch

Glitch เป็น Programming Environment แบบทำงานร่วมกัน ที่ทำให้การสร้าง Web App ทำได้ง่ายขึ้น

มันเป็นหนึ่งใน Interfaces ที่น่าสนุกที่สุดในการเขียน Code โดยคุณสามารถลองดูได้จากที่นี่:

แน่นอนว่า มันมี Dark Mode ด้วย

นอกเหนือจาก Interface ที่สวยงามแล้ว Glitch ยังถูกใช้งานโดยผู้คนนับล้าน เนื่องจากความสามารถในการใช้งาน, Live Pair Programming และ Community ที่เป็นมิตรกับผู้ใช้อย่างมาก

คุณสามารถสร้าง Full-Stack Apps ได้ทุกประเภท ไม่เพียงแต่ HTML, CSS และ JS เท่านั้น แต่ยังมี Node.js (Backend), React หรือ Eleventy

Features:

• Free Plan พร้อม Option ในการ Upgrade
• พัฒนา Full-Stack Apps ใน Browser ของคุณ
• Live Pair Programming
• Interface ที่สนุกสนาน
• Starter Apps

ที่มา: https://geekflare.com/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

 

บทความล่าสุด

• 10 GitHub Repositories สำหรับ Developer ที่เรียนรู้ด้วยตนเอง
• 7 Database Management Tools ที่ DBA หรือ SysAdmin ควรรู้จักไว้
• 4 Web Scraping Projects ที่ช่วยทำให้ชีวิตของคุณง่ายขึ้น