วิธีใช้ CodePen: จะเป็นอย่างไรหากมีแพลตฟอร์มที่คุณสามารถแก้ไขโค้ด ทดสอบไลบรารี เฟรมเวิร์ก หรือคอมโพเนนต์ และเห็นการเปลี่ยนแปลงเกิดขึ้นต่อหน้าต่อตาคุณ แล้วถ้าคุณสามารถแชร์การทดลองของคุณกับนักพัฒนาคนอื่นๆ หรือคัดลอกผลงานของพวกเขาเพื่อพัฒนาทักษะการเขียนโค้ดของคุณ ค้นหาแรงบันดาลใจ และแก้ไขจุดบกพร่องในงานของคุณได้อย่างรวดเร็วล่ะ
CodePen เป็นแพลตฟอร์มการพัฒนาที่ทุกคนสามารถแก้ไขส่วนหน้า-ภาษาปลายทางเช่น HTML, CSS และ JavaScript จากเบราว์เซอร์โดยไม่ต้องดาวน์โหลดซอฟต์แวร์ใดๆ ส่วนที่ดีที่สุดคือคุณสามารถดูผลลัพธ์ได้แบบเรียลไทม์ ซึ่งทำให้แก้ไขข้อบกพร่องได้ง่ายขึ้น นักพัฒนาและนักออกแบบยังสามารถสร้างข้อมูลโค้ดที่เรียกว่า”ปากกา”และแบ่งปันกับคนอื่นๆ ทั่วโลก
วิธีใช้ CodePen
เปิด CodePen.io พิมพ์อะไรก็ได้ ในช่องค้นหา: คุณสามารถพิมพ์อะไรก็ได้ที่คุณต้องการเพิ่มลงในหน้าเว็บของคุณ อาจเป็นแถบเลื่อนที่ตอบสนอง การ์ดทีม ส่วนเกี่ยวกับ ภาพเคลื่อนไหว ฯลฯ ในบทความนี้ ฉันจะเพิ่มแถบเลื่อนที่สวยงาม ไปต่อและค้นหาตัวเลื่อนที่สวยงามในช่องค้นหา การแยกโค้ด: อย่างที่คุณเห็น โปรแกรมแก้ไข Codepen แสดงให้เราเห็นโค้ดที่น่าทึ่งที่สร้างแถบเลื่อนนี้ แต่คุณคิดว่าการคัดลอกโค้ดจากโปรแกรมแก้ไขนี้และวางลงในโปรแกรมของคุณจะได้ผลหรือไม่ ไม่คือคำตอบ”ปากกา”ส่วนใหญ่ที่คุณเห็นใช้ไลบรารีภายนอก CodePen ซึ่งตัวแก้ไขไม่แสดง zip มีสองโฟลเดอร์ dist และ src พร้อมกับไฟล์ข้อความ readme และลิขสิทธิ์ คุณสามารถสำรวจ/อ่านเพื่อความสนใจของคุณ ตอนนี้เลือกโฟลเดอร์ “dist” จากนั้นคุณจะเห็น index.html, style.css, และ script.js ไฟล์. เปิดทั้งหมดนี้ในโปรแกรมแก้ไขข้อความ (Sublime, Atom, วงเล็บ ฯลฯ ) เปิดไฟล์ index.html
CodePen ใช้อะไร
แบ่งปันหรือรวบรวมแนวคิด
เนื่องจาก CodePen ได้สร้างชุมชนที่ยอดเยี่ยม ผู้ใช้หลายพันคนจึงสร้างและแบ่งปันแนวคิดสำหรับส่วนหน้า-end ส่วนประกอบ ภาพเคลื่อนไหว และแม้แต่โครงร่างหน้าเว็บที่เกือบเสร็จแล้ว นี่เป็นสถานที่ที่สมบูรณ์แบบในการแบ่งปันแนวคิดของคุณเอง ซึ่งอาจเป็นประโยชน์กับมืออาชีพด้านฟรอนต์เอนด์คนอื่นๆ สิ่งที่คุณต้องทำคือตรวจสอบให้แน่ใจว่าโค้ดของคุณไม่มีปัญหาด้านลิขสิทธิ์
แนะนำรูปแบบโครงการของคุณ
หากคุณไม่ต้องการใช้โค้ดของผู้อื่น คุณสามารถใช้ตัวแก้ไขโค้ดออนไลน์ของ CodePen เพื่อให้ส่วนต่างๆ ของโปรเจ็กต์ของคุณมีสไตล์เป็นของตัวเอง ด้วยวิธีนี้ คุณจะมั่นใจได้ว่าโค้ดที่ใช้จัดรูปแบบคอมโพเนนต์อื่นๆ จะไม่เปลี่ยนแปลงคอมโพเนนต์ของคุณ มันเหมือนกับผืนผ้าใบเปล่า
ค้นหาข้อมูลเกี่ยวกับเฟรมเวิร์กหรือไลบรารีใหม่
โปรแกรมแก้ไขบนเบราว์เซอร์บน CodePen เป็นวิธีที่ยอดเยี่ยมในการทดสอบและเรียกใช้ไลบรารีหรือเฟรมเวิร์กใหม่. คุณไม่จำเป็นต้องตั้งค่าสภาพแวดล้อมใหม่ทุกครั้งที่คุณต้องการดูว่าการเปลี่ยนแปลงของคุณได้ผลหรือไม่ มุมมองตัวแก้ไขจะแสดงพื้นที่การแก้ไขสามส่วนและการแสดงตัวอย่างพร้อมกัน ทุกครั้งที่มีการเปลี่ยนแปลง ผลลัพธ์สุดท้ายจะได้รับการอัปเดต