CodePen หรือ Sublime Text? หากเราพูดถึงการเขียนโปรแกรมบนเว็บชื่อของ HTML, CSS และ JavaScript จะมาถึงเราทันที มีหลายวิธีในการเดินทาง แม้ หากเราเปิดแผ่นจดบันทึกเราจะสามารถทำงานเขียน "html" ได้. เป็นความจริงที่จะเห็นผลลัพธ์ของสิ่งที่คุณกำลังเขียนโปรแกรมจากแพดคุณจะต้องมีขั้นตอนที่ยุ่งยากเพื่อสังเกตความคืบหน้า
ไซต์เหล่านี้เป็นสนามเด็กเล่นหลักสำหรับนักพัฒนาแอปพลิเคชันสำหรับผู้ใช้ในแต่ละวัน. หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับข้อดีและข้อเสียของโปรแกรมเหล่านี้เราจะวิเคราะห์อย่างลึกซึ้งในบทความนี้ (อย่างน้อยก็ทุกอย่างที่เรารู้) อย่างที่ฉันพูดเสมอว่าพวกคุณบางคนที่นี่รู้เรื่องนี้มากกว่า ถ้าเป็นเช่นนั้นแสดงความคิดเห็นเกี่ยวกับทุกสิ่งที่หนีเรามาที่นี่ เรายินดีที่จะพูดคุย!
วันนี้เราจะมาวิเคราะห์ CodePen, JSBin, Plunkr, sublime, CSSDeck, Dabblet และ LiveWeave ซึ่งเป็นที่รู้จักกันดีและเป็นเครื่องมือที่ใช้มากที่สุดในสภาพแวดล้อมนี้ มีมากกว่านี้แน่นอน
แต่สำหรับทุกท่านที่ไม่รู้ว่า FrontEnd หรือ BackEnd เกี่ยวกับอะไรเรามาอธิบายกันสักหน่อย ส่วนหน้าหรืออินเทอร์เฟซเป็นส่วนภาพที่ผู้ใช้นำทางจะสามารถมองเห็นได้บนเว็บ. BackEnd จะเป็นส่วนที่ผู้ดูแลไซต์ควบคุม ในการเขียนโปรแกรมหากคุณป้อนรหัสผ่านเครื่องมือที่แสดงผลลัพธ์พร้อมกันจะเรียกสิ่งนี้ว่าส่วนหน้า.
CodePen
สำหรับเครื่องมือที่สมบูรณ์แบบที่สุด ทั้งหมดที่เราพูดถึง ใช้เป็นเครื่องมือเว็บที่ใกล้เคียงที่สุดกับชุมชนในการแสดงผลงานของคุณ ชนิดของ Youtube จากโปรแกรมเมอร์ ในนี้คุณจะสามารถดูผลงานของโปรแกรมเมอร์ที่เชื่อมโยงกับเว็บและติดต่อพวกเขาได้ในกรณีที่คุณมีความสนใจดูโปรไฟล์ของพวกเขาติดตามพวกเขาบนเครือข่ายและแม้แต่สมัครสมาชิกช่องของพวกเขาเพื่อดูโครงการในอนาคตทั้งหมดของพวกเขา
การนำเสนอเนื้อหาการสนับสนุนและแป้นพิมพ์ลัด
การนำเสนอ CodePen น่าสนใจที่สุดเนื่องจากเพียงไม่กี่คลิกคุณก็สามารถดำเนินการตามขั้นตอนนี้ได้ทันที ด้วยบรรทัดที่แยกจาก html, css และ javascript ได้เป็นอย่างดี นอกเหนือจากส่วนที่เป็นภาพซึ่งคุณสามารถสลับขึ้นและลงเพื่อดูความคืบหน้าของคุณได้อย่างชัดเจน จึงช่วยแยกความแตกต่างของแต่ละภาษาได้ดี. สิ่งที่มีประโยชน์สำหรับโปรแกรมเมอร์รุ่นใหม่
การสนับสนุนทางเว็บของคุณทำให้สามารถใช้งานได้มากขึ้นเมื่อคุณต้องการเริ่มใช้สิ่งที่เราไม่รู้จักเป็นอย่างดี นั่นไม่ได้หมายความว่าจะดีกว่าสำหรับคุณ แต่ขึ้นอยู่กับความต้องการที่เรามี แต่ใช่เพื่อทำความรู้จักกับสภาพแวดล้อมให้ดีขึ้นเล็กน้อยก่อนที่จะติดตั้งสิ่งใด ๆ บนคอมพิวเตอร์ที่มีต้นกำเนิด "ไม่รู้จัก"
หากคุณเป็นคนหนึ่งที่เคยชินกับการใช้ casi แป้นพิมพ์ทั้งหมดเมื่อทำงาน CodePen จะยอดเยี่ยมสำหรับคุณ ต้องการเครื่องมืออื่น ๆ ปลั๊กอิน เพื่อให้สามารถใช้แป้นพิมพ์ลัดเพื่อเติมเต็มสภาพแวดล้อม สิ่งนี้ทำให้งานอึดอัดขึ้นเล็กน้อย (แม้ว่าจะได้ผลเพียงครั้งเดียวก็ตาม) CP. มันรวมเป็นระบบมาตรฐานที่จะทำให้คุณกรอกรหัสบรรทัดเดียวกับที่ซ้ำกันเหมือนที่มันอาจจะอยู่ในรายการ คุณเขียนวิธีที่คุณต้องการให้รายการปรากฏและคลิกแท็บ
รุ่น Pro ยังมีตัวเลือกอื่น ๆ อีกมากมายในราคา€ 9,00 สำหรับแพ็คเกจพื้นฐานเป็น€ 29,25 สำหรับแพ็คเกจ“ Super” ความสามารถในการอัปเดตในอุปกรณ์หลายเครื่องพร้อมกันสิ่งที่เราทำในเครื่องเดียว นอกจากนี้ยังมีโหมดร่วมมือ "โหมดครู" ฯลฯ รับประโยชน์หากคุณต้องการที่นี่
เจเอสบิน
JSBin เป็นเครื่องมือที่เรามีคุณสมบัติตรง. เนื่องจากเมื่อคุณไปที่โดเมนเว็บแล้วก็พร้อมที่จะเริ่มร่างโครงการต่อไปของคุณโดยไม่ชักช้า และถึงแม้ว่าการแสดงละครครั้งแรกจะไม่น่าดึงดูด แต่ก็สะดวกสบาย.
JSBin นั้นเรียบง่ายด้วยโครงสร้างพื้นฐานที่สร้างขึ้นใน html เพื่อไม่ให้เสียเวลาคุณจะสลับไปมาระหว่างภาษาต่างๆเพื่อให้งานเสร็จสมบูรณ์ อันดับแรกคือ HTML จากนั้น CSS, Javascript และสุดท้ายคืองานของคุณด้วยภาพ และแม้ว่ามันจะดูยากกว่า แต่คุณก็มีทางลัดประเภทเดียวกันโดยไม่ต้องติดตั้งอะไรเลย โดยตรงจากเบราว์เซอร์
อย่างไรก็ตามฉันรู้สึกอึดอัดมากกว่าที่จะดูโค้ดได้อย่างถูกต้องเมื่อซ่อนไว้เนื่องจากคอลัมน์ที่ตามมา เนื่องจากแล็ปท็อปคุณต้องยอมแพ้หรือลงด้วยไฟล์ แทร็คแพ และมันไม่ลื่นไหลมาก
มีเพียงสองงวดฟรีหรือจ่าย ราคาแพงกว่า CodePen เล็กน้อยแม้ว่าคุณจะจ่ายเป็นรายปี แต่ก็มีผลกำไรมากกว่าหากคุณสามารถจ่ายได้€ 120
CSSDเด็ค
สภาพแวดล้อมการทำงานของ CSSDเด็ค แตกต่างจากที่เห็นด้านบน. แบ่งออกเป็นสองคอลัมน์เท่านั้นรหัสภาพ CSSDeck ใช้งานได้กับ 3 แถวซึ่งแบ่งภาษาประเภทต่างๆ ด้วยการนำเสนอในรูปแบบของโซเชียลเน็ตเวิร์กและสภาพแวดล้อมการทำงานที่สะอาดตาในโทนสีอ่อน ดูเหมือนเป็นเครื่องมือง่ายๆ แม้ว่าบางครั้งนั่นไม่ได้หมายความว่ามันเป็นลบ
ด้วยผู้ใช้ที่ลงทะเบียนมากกว่าหกหมื่นรายและสร้างโครงการมากกว่าสองแสนห้าหมื่นโครงการการค้นหาและค้นหาสิ่งที่คุณต้องการจะไม่ใช่เรื่องยาก ภาษาเช่นเคยหากอาจเป็นเรื่องที่ไม่สะดวกสำหรับผู้ที่ไม่รู้ภาษาอังกฤษ แต่ในนี้ เครือข่ายทางสังคม ภาพมีความสำคัญมากดังนั้นฉันไม่คิดว่ามันเป็นความท้าทายที่ยิ่งใหญ่
พลันคร
พลันคร มันเป็นเครื่องมือที่น่าดึงดูดน้อยที่สุดเท่าที่ฉันเคยเจอมา. งานนำเสนอมีการรวมกันในข้อความและไม่มีรูปภาพ การโหลดเนื้อหาช้าและไม่มีประโยชน์มากนักในตอนแรก นอกจากนี้การเรียงลำดับตามวันที่ทำให้การเขียนโปรแกรมไม่ว่าจะง่ายแค่ไหนก็สามารถอยู่ในตำแหน่งแรกได้ หากต้องการดูสิ่งที่น่าสนใจยิ่งขึ้นคุณควรไปที่แท็บที่ระบุว่า: «ผู้ชมมากที่สุด«. นั่นคือหากคุณไม่เคยแปลด้วย Google มาก่อน
ยังบอกอีกว่าตามเว็บพวกเขาอยู่ในเวอร์ชัน 1.0.0 ดังนั้นสิ่งนี้จะอธิบายเล็กน้อยเกี่ยวกับการออกแบบการนำเสนอและข้อผิดพลาดที่เป็นไปได้ที่คุณพบเมื่อเรียกดูเว็บ
เป็นข้อดีถ้าคุณหมดไอเดียคุณจะไม่ต้องออกหรือเปิดแท็บอื่นใน Plunkr เนื่องจากจากแถบด้านข้างทางขวาโดยตรงคุณสามารถเดินไปกับโครงการอื่น ๆ และดูได้ทันที วิธีนี้จะช่วยให้คุณรวบรวมแนวคิดด่วนและนำไปใช้กับโครงการของคุณได้ง่ายขึ้นในเวลาเดียวกัน
ตะลุย
ตะลุย มันเป็นเครื่องมือง่ายๆที่คุณเข้าไปและสร้าง. แม้ว่าคุณจะสามารถลงทะเบียนและตั้งชื่อผู้ใช้ของคุณผ่าน GitHub ได้ แต่ก็ไม่ใช่สิ่งที่โดดเด่นมากนักบนเว็บ ด้วยพื้นหลังไล่ระดับสีเหลืองถึงแดงในส่วนที่มองเห็นและพื้นหลังสีขาวในส่วนของโค้ด (ตามปกติ) จะมีการนำเสนอโปรเจ็กต์ Dabblet แม้ว่าคุณจะสามารถเปลี่ยนได้จากแท็บ CSS ก็ตาม สำหรับฉันมันจะดีกว่าที่จะเว้นว่างไว้เนื่องจากการไล่ระดับสีทั้งหมดที่ให้มีเพียงเล็กน้อย ชีวิต a
เมื่อคุณกำลังแก้ไขคุณสามารถกำหนดค่าแท็บที่คุณเห็นได้ ได้อย่างง่ายดาย แม้ว่าคุณต้องการเปลี่ยนไปใช้คอลัมน์หรือแถวเพื่อการรับชมที่สะดวกสบายขึ้นอยู่กับบุคคลที่ทำการแก้ไข การเปลี่ยนขนาดตัวอักษรการบันทึกเป็นแบบไม่ระบุตัวตนโดยไม่ต้องลงทะเบียนหรือตรวจสอบความถูกต้องของโค้ด HTML เป็นไปได้มากกว่าที่ Dabblet นำเสนอในครั้งแรก แม้ว่าจะไม่ใช่ตัวเลือกแรกที่ฉันจะเลือก แต่อาจต้องคำนึงถึงเวอร์ชันในอนาคตหากมีการอัปเดต
สิ่งหนึ่งที่ฉันชอบน้อยที่สุด แต่โปรแกรมเมอร์ที่เก่ง ๆ อาจชอบก็คือ คุณไม่มีตัวเลือกในการจัดตารางฉลากและให้มันเขียนเอง. นั่นคือใส่ HTML แล้วคลิกที่แท็บแล้วเขียน "html" และ "/ html" โดยอัตโนมัติ บางอย่างที่อยู่ในแอปพลิเคชันอื่น ๆ หากทำเสร็จแล้ว
ไลฟ์วีฟ
ไลฟ์วีฟ คล้ายกับคนอื่นมากไม่มีอะไรที่คนอื่นไม่สามารถเสนอได้ในแง่ของประโยชน์ใช้สอย สิ่งที่เราเน้นเกี่ยวกับโครงการนี้คือการออกแบบเป็นสีเข้มคล้ายกับ CodePen แต่มีการกระจายแบบสี่เหลี่ยมจัตุรัส ความสามารถในการเปลี่ยนขนาด เพื่อลิ้มรส. นอกจากนี้ยังมีโหมดล้างและ«นอกเส้น« โดยที่รหัสที่คุณแก้ไขจะไม่ปรากฏในภาพจนกว่าคุณจะเปิดใช้งาน ไม่ใช่คุณสมบัติที่คุณคิดว่ามีประโยชน์มากนักในฐานะนักออกแบบสิ่งสำคัญคือต้องดูสิ่งที่คุณแก้ไขแบบเรียลไทม์เสมอ แต่จะมีคนพบว่าคุณใช้งานได้ และถึงแม้ว่าคุณสามารถลงทะเบียนได้เช่นเคย แต่ผู้ใช้ไม่มีบทบาทนำ แม้ว่าคุณจะไม่ได้ลงทะเบียนคุณก็สามารถบันทึกโครงการของคุณได้.
ข้อความประเสริฐ
เครื่องมือนี้ มันแตกต่างอย่างสิ้นเชิงกับสิ่งที่คุณเคยเห็นในการวิเคราะห์. Sublime Text ไม่ได้เป็นทรัพยากรบนเว็บ แต่เป็นแอปพลิเคชัน ในแง่หนึ่งการมีไว้บนเดสก์ท็อปจะมีประโยชน์มากกว่า โดยเฉพาะอย่างยิ่งเนื่องจากอาจเกิดปัญหาอินเทอร์เน็ตขัดข้องหรือค้างเนื่องจากงานเกินและอาจสูญเสียงาน ในทางกลับกันมันไม่ได้เป็นเครื่องมือที่มองเห็นได้เหมือนเครื่องมือก่อนหน้านี้ นอกจากจะไม่มีความเป็นไปได้ของชุมชนในการแบ่งปันโครงการ
ที่นี่ทุกอย่างมาจากศูนย์. คุณต้องสร้างแท็บเพื่อวางบรรทัดของโค้ดและเปลี่ยนชื่อเพื่อให้ทราบว่าเป็นโค้ดใด ถ้าตัวแรกคือ HTML CSS ตัวที่สอง .. หรือในทางกลับกัน นอกจากนี้ยังไม่มีทางลัดสำหรับสิ่งที่จะเป็น คู่มืออย่างสมบูรณ์ยกเว้นคำพูด.
ข้อสรุป
โปรแกรมทั้งหมดมีความคล้ายคลึงกันกับการสัมผัสส่วนบุคคลของแต่ละ บริษัท ที่นำไปสู่การมีข้อดีข้อเสีย แต่ละคนจะเลือกสิ่งที่เหมาะกับพวกเขามากที่สุด คำแนะนำของฉันคือใช้ CodePen หรือ CSSDeck สำหรับสภาพแวดล้อมและเครือข่ายโซเชียลที่จัดการ. แต่ถ้าคุณชอบคนอื่นมากกว่านี้แสดงความคิดเห็นและอธิบายเหตุผลของคุณมันจะมีประโยชน์อย่างแน่นอน