คุณเคยอยากได้เว็บแอปหรือส่วนขยายที่ให้คุณสร้างและแชร์ต้นแบบ UI ได้ทันทีหรือไม่?
เราทุกคนทำ! เราทุกคนต่างมีแนวคิดว่าเราต้องการให้เว็บไซต์หรือแอปของเรามีรูปลักษณ์และความรู้สึกอย่างไร
ดังนั้น คุณมีการออกแบบที่ยอดเยี่ยมจริงๆ และจำไม่ได้จริงๆ ว่าคุณทำได้อย่างไร
ตอนนี้คุณต้องหาวิธีแบ่งปัน อาจใช้เวลาหลายวันหรือหลายสัปดาห์ หากคุณกำลังพยายามแบ่งปันการออกแบบที่ค่อนข้างซับซ้อน
ไม่มีเหตุผลที่จะต้องรอเพื่อสร้างต้นแบบเว็บแอปของคุณ สร้างมันตอนนี้ด้วย Dabblet
ลากและวางองค์ประกอบ จัดรูปแบบ และบันทึก ส่งให้นักออกแบบตรวจทานหรือคัดลอกลงในงานนำเสนอ ความเป็นไปได้ไม่มีที่สิ้นสุด
Dabblet คืออะไร?
การใช้ ตะลุยคุณสามารถทดลองกับตัวอย่างโค้ด CSS และ HTML ได้แบบเรียลไทม์
คุณไม่จำเป็นต้องมีคำนำหน้าใดๆ ในโค้ด CSS ของคุณเมื่อใช้สิ่งนี้ ส่วนสำคัญของ GitHub ช่วยให้คุณจัดเก็บเนื้อหา โพสต์บนเว็บไซต์อื่น และแชร์กับผู้อื่นได้
นี่เป็นวิธีที่ยอดเยี่ยมในการแชร์ข้อมูลโค้ดกับนักพัฒนารายอื่นและรับคำติชม
มันทำงานอย่างไร?
ทันทีที่พิมพ์โค้ด การแสดงผลภาพจะปรากฏที่ด้านบนของโค้ดทันที JavaScript ถือเป็นข้อยกเว้นเพียงอย่างเดียว เมื่อพิจารณาว่าการเรียกใช้ทุกครั้งที่กดแป้นพิมพ์จะเกิดความรำคาญ และอาจทำให้เบราว์เซอร์ใช้งานไม่ได้ในบางสถานการณ์
การใช้ตัวเลือก "เรียกใช้ JS" ในแท็บ JavaScript หรือแป้นพิมพ์ลัด (Ctrl + Enter หรือ Cmd + Enter) จะเรียกใช้ JavaScript เมื่อ Dabblet ทำงาน เมนูตัวเลือกช่วยให้คุณเปลี่ยนรูปแบบนี้ได้
ในฐานะนักพัฒนา คุณสามารถสลับไปมาระหว่างการเขียนโค้ดทั้งสามภาษาพร้อมกันหรือดูผลิตภัณฑ์สำเร็จรูปได้
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของ Dabblet ที่คุณควรรู้เกี่ยวกับ:
การแก้ไข CSS ด่วน: คุณสามารถเพิ่ม แก้ไข และลบคุณสมบัติ CSS ได้อย่างรวดเร็ว การเปลี่ยนแปลงจะปรากฏบนหน้าตามเวลาจริง
การเน้นไวยากรณ์: โค้ด CSS และ HTML มีการเน้นไวยากรณ์ ทำให้อ่านและเข้าใจได้ง่าย รหัสจะได้รับการตรวจสอบเมื่อคุณพิมพ์ คุณยังสามารถเลือกที่จะซ่อนกล่องรหัสได้หากต้องการ
เติมข้อความอัตโนมัติ: Dabblet เสนอการเติมข้อความอัตโนมัติสำหรับคุณสมบัติและค่า CSS ซึ่งจะมีประโยชน์มากเมื่อคุณสร้างหรือแก้ไขสไตล์ชีต
สไตล์ชีต CSS ที่สร้างไว้ล่วงหน้า: คุณสามารถเข้าถึงสไตล์ชีต CSS ที่สร้างไว้ล่วงหน้าได้จากเว็บไซต์ยอดนิยม สามารถใช้เพื่อเพิ่มสไตล์ให้กับเว็บไซต์ของคุณเองได้อย่างรวดเร็วและง่ายดาย
การสนับสนุนส่วนสำคัญ: Dabblet รองรับ GitHub Gists ทำให้คุณสามารถจัดเก็บและแบ่งปันข้อมูลโค้ดของคุณกับผู้อื่นได้อย่างง่ายดาย
ตัวอย่างสด: คุณสามารถดูผลลัพธ์ของการเปลี่ยนแปลงโค้ดของคุณในแบบเรียลไทม์โดยไม่ต้องโหลดหน้าซ้ำ ตัวอย่างเช่น หากคุณเปลี่ยนสีของข้อความ คุณจะเห็นการเปลี่ยนแปลงมีผลกับข้อความขณะที่คุณพิมพ์
แป้นพิมพ์ลัด: Dabblet มีแป้นพิมพ์ลัดสำหรับงานทั่วไป เช่น การเพิ่มกฎรูปแบบใหม่หรือการแสดงความคิดเห็น
โหมดมุมมองหลายภาพ: Dabblet มีโหมดการดูหลายแบบ ซึ่งช่วยให้คุณเห็นโค้ดและผลลัพธ์แบบเคียงข้างกันหรือด้านบนและด้านล่างของกันและกัน
ข้อดี
- CSS ด่วน
- แม้ว่าคุณจะลงชื่อเข้าใช้แล้ว คุณยังสามารถบันทึกแบบไม่ระบุตัวตนได้
- การแสดงตัวอย่างค่า CSS แบบอินไลน์สำหรับพารามิเตอร์ต่างๆ เช่น มุม สี ระยะเวลา ฯลฯ
- ทุกอย่างเป็นแบบ XHR-ed ดังนั้นหน้าจะไม่มีการรีเฟรช แม้ในขณะที่คุณบันทึก
- แป้นพิมพ์ลัดมากมาย
- โค้ดทั้งหมดถูกจัดรูปแบบอัตโนมัติ (ยกเว้น markdown)
- เอกสารที่เป็นของแข็งตั้งแต่เริ่มต้น
จุดด้อย
- อินเทอร์เฟซค่อนข้างล้นหลามในตอนแรก แต่คุณคุ้นเคยกับมัน
- ไม่มีคุณสมบัติการจัดการระดับโครงการ (ยัง)
การรวม Dabblet
ทุกแพลตฟอร์มจำเป็นต้องรวมเข้ากับบริการอื่นๆ และ Dabblet ก็ไม่มีข้อยกเว้น ต่อไปนี้เป็นการผสานรวมบางส่วนที่ Dabblet นำเสนอ:
Google Analytics
คุณสามารถเพิ่มโค้ดติดตาม Google Analytics ของคุณในหน้า Dabblet ได้อย่างง่ายดาย ซึ่งจะช่วยให้คุณสามารถติดตามการดูหน้าเว็บและสถิติอื่นๆ สำหรับ Dabblet ของคุณ
อูบุนตู
Dabblet สามารถใช้เพื่อสร้างธีมของ Ubuntu คุณสามารถสร้าง Dabblet ใหม่ เพิ่มโค้ด CSS และ HTML และดูตัวอย่างธีมในเว็บเบราว์เซอร์
DigitalOcean
บริษัทโฮสติ้งระบบคลาวด์ที่ไม่ซ้ำแบบใครให้บริการการประมวลผลแบบคลาวด์แก่ธุรกิจ ทำให้พวกเขาขยายการดำเนินงานได้อย่างมีประสิทธิภาพมากขึ้น
Dabblet ทำอะไรกับมัน?
ตอนนี้คุณสามารถสร้าง จัดการ และปรับใช้ Dabblets ของคุณบน พื้นที่ DigitalOcean
วิธีนี้ทำให้คุณสามารถเก็บข้อมูลโค้ดทั้งหมดไว้ในที่เดียว และทำให้ง่ายต่อการแชร์กับผู้อื่น
ทางเลือกสำหรับ Dabblets
มีทางเลือกอื่นอยู่เสมอ และในแนวทางเดียวกัน ต่อไปนี้คือข้อควรพิจารณาบางประการสำหรับ Dabblet:
Pastebin.com
โปรแกรมเมอร์มักใช้เว็บไซต์เพื่อบันทึกซอร์สโค้ดหรือส่วนข้อมูลการกำหนดค่า อย่างไรก็ตาม ใครก็ตามสามารถใส่ข้อความใดๆ ลงในช่องว่างที่ให้ไว้ได้
เจเอส บิน
JS Bin เป็นเครื่องมือทดสอบฟรีสำหรับ JavaScript ผลลัพธ์อาจถูกแชร์ผ่าน URL แบบสั้นเมื่อป้อน Javascript ในบานหน้าต่างหนึ่งและ HTML ในอีกบานหนึ่ง ใช้เมนูที่ให้คุณเลือกจากไลบรารี JS ที่ใช้บ่อยที่สุด
CssDeck
เครื่องมือนี้ยอดเยี่ยมสำหรับการสร้างและแลกเปลี่ยนกรณีทดสอบกับผู้อื่นที่สามารถช่วยคุณในความพยายามในการเขียนโค้ดของคุณ ด้วยตัวเลือกที่หลากหลาย คุณสามารถทำงานร่วมกันในโครงการต่างๆ กับโปรแกรมเมอร์คนอื่นๆ ได้ทันที
พลั้งเกอร์
Plunker คือแพลตฟอร์มดิจิทัลที่นักพัฒนาเว็บสามารถระดมความคิด ทำงานร่วมกัน และแบ่งปันความคิดได้
ตัวอย่างเช่น คุณสามารถเริ่มต้นด้วย "สวัสดี ชาวโลก!" โปรแกรมในภาษาใดก็ได้ และเพิ่มข้อมูลโค้ด มาร์กดาวน์ และภาพหน้าจอเพื่อสร้างประสบการณ์การเรียนรู้ที่หลากหลาย
คำสุดท้าย
โดยสรุป Dabblet เป็นเครื่องมือที่มีประโยชน์สำหรับนักพัฒนาเว็บ โดยเฉพาะผู้ที่มองหาวิธีที่รวดเร็วและง่ายดาย ทดสอบรหัสของพวกเขา
ด้วยคุณสมบัติและการผสานรวมที่หลากหลาย จึงเป็นเรื่องยากที่จะไม่พบการใช้งานสำหรับแพลตฟอร์มนี้
ให้มันลองวันนี้!
เขียนความเห็น