CodePen: สร้างทดสอบแบ่งปันและค้นพบ HTML, CSS และ JavaScript

Codepen: สร้างทดสอบและค้นพบรหัสส่วนหน้า

ความท้าทายอย่างหนึ่งของระบบจัดการเนื้อหาคือการทดสอบและผลิตเครื่องมือที่มีสคริปต์ แม้ว่าจะไม่ใช่ข้อกำหนดสำหรับผู้เผยแพร่โฆษณาส่วนใหญ่ในฐานะสิ่งพิมพ์เทคโนโลยี แต่ฉันก็ชอบแบ่งปันสคริปต์การทำงานเป็นครั้งคราวเพื่อช่วยเหลือคนอื่น ๆ ฉันได้แบ่งปันวิธีการใช้งานแล้ว JavaScript เพื่อตรวจสอบความปลอดภัยของรหัสผ่าน, ทำอย่างไร ตรวจสอบไวยากรณ์ที่อยู่อีเมลด้วยนิพจน์ทั่วไป (regex) และล่าสุดได้เพิ่มสิ่งนี้ เครื่องคำนวณเพื่อทำนายผลกระทบด้านการขายของบทวิจารณ์ออนไลน์. ฉันหวังว่าจะเพิ่มเครื่องมือมากมายในไซต์ แต่ WordPress ไม่ได้เอื้อต่อการเผยแพร่แบบนี้…มันเป็นระบบเนื้อหาไม่ใช่ระบบการพัฒนา

ดังนั้นเพื่อให้สคริปต์เล็ก ๆ ของฉันทำงานได้ฉันชอบใช้ CodePen. CodePen เป็นเครื่องมือที่มีการจัดระเบียบอย่างเป็นระเบียบพร้อมด้วยแผง HTML แผง CSS แผง JavaScript คอนโซลและการเผยแพร่โค้ดผลลัพธ์ แต่ละแผงจะมีข้อมูลเมื่อคุณวางเมาส์เหนือองค์ประกอบเพื่อให้คุณเข้าใจว่าอะไรเป็นไปได้ตลอดจนการเข้ารหัสสีของ HTML, CSS และ JS ของคุณเพื่อช่วยให้คุณแก้ไขและเขียนได้ง่ายขึ้น

CodePen เป็นสภาพแวดล้อมการพัฒนาสังคม. หัวใจสำคัญคือช่วยให้คุณสามารถเขียนโค้ดในเบราว์เซอร์และดูผลลัพธ์ของโค้ดในขณะที่คุณสร้าง โปรแกรมแก้ไขโค้ดออนไลน์ที่มีประโยชน์และเป็นอิสระสำหรับนักพัฒนาที่มีทักษะใด ๆ และโดยเฉพาะอย่างยิ่งการเพิ่มขีดความสามารถสำหรับผู้ที่เรียนรู้การเขียนโค้ด CodePen เน้นภาษาส่วนหน้าเป็นหลักเช่น HTML, CSS, JavaScript และไวยากรณ์ก่อนการประมวลผลที่เปลี่ยนเป็นสิ่งเหล่านั้น

เกี่ยวกับ CodePen

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

CodePen - เครื่องคำนวณสำหรับทำนายผลกระทบด้านการขายของบทวิจารณ์ออนไลน์

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

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

คุณสามารถบันทึกเป็น GitHub Gist ส่งออกในไฟล์ zip และแม้กระทั่ง ฝัง ปากกาในบทความเช่นนี้:

ดูปากกา
ผลกระทบด้านการขายที่คาดการณ์ไว้ของบทวิจารณ์ออนไลน์
by Douglas Karr (@douglaskarr)
on CodePen.


ข้อ จำกัด ประการหนึ่งของโปรแกรมแก้ไขปากกาคือปริมาณโค้ดที่มากขึ้น คุณอาจไม่เคยพบปัญหานี้เนื่องจากตัวแก้ไขควรใช้ได้ดีกับโค้ดหลายร้อยหรือหลายพันบรรทัด แต่เมื่อพวกเขาเริ่มกดรหัส 5,000 - 10,000 บรรทัดขึ้นไปคุณจะเห็นว่าตัวแก้ไขเริ่มทำงานล้มเหลว อย่างไรก็ตามคุณสามารถเพิ่มการอ้างอิงภายนอกให้กับสไตล์ชีตหรือ JavaScript ที่โฮสต์ที่อื่นได้!

ฉันขอแนะนำให้คุณสมัคร คุณจะสมัครรับอีเมลรายสัปดาห์ของพวกเขาและยังสามารถเพิ่มฟีดลงในฟีด RSS ของคุณเพื่อที่คุณจะได้เห็นปากกาที่เผยแพร่ใหม่ และหากคุณเริ่มค้นหาหรือเรียกดูปากกาสาธารณะที่นั่นคุณจะพบโครงการที่น่าทึ่ง ... ผู้ใช้มีความสามารถมาก!

ติดตาม Douglas Karr บน Codepen

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

คุณคิดอย่างไร?

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.