10 เคล็ดลับ Codepen สำหรับผู้เริ่มต้น

Codepen เป็นเว็บไซต์ที่ง่ายและได้รับความนิยมสูงสุด ปากกา คำสั่งผสมรหัสส่วนหน้าทำงานลง ทันที หากคุณไม่ทราบว่า Codepen คืออะไรหรือยังไม่เคยได้ยินมาก่อนมันเป็นเรื่องปกติ สนามเด็กเล่นรหัสที่มาออนไลน์ (เรียกมันว่า OSCP เป็นเสียงเนิร์เยร์) สำหรับทหารเสือสามคนที่เข้ารหัสส่วนหน้า HTML, CSS และ JavaScript.

มี OSCP อื่นที่คล้ายคลึงกันออกไปเช่น JSFiddle, JS Bin, CSSDeck & Dabblet Codepen เป็นหนึ่งในที่รู้จักกันดีในหมู่นักพัฒนาส่วนหน้า โดยไม่ต้องกังวลใจต่อไปขอกระโดดเข้าไปในบางส่วน เคล็ดลับพื้นฐานและมีประโยชน์ สำหรับการใช้ Codepen.

1. ปุ่ม Run

หากคุณไม่ใช่แฟนตัวยงของวิธีการส่งออกของรหัสของคุณใน Codepen ทำให้สดชื่น ในขณะที่ คุณกำลังพิมพ์คุณสามารถ เลือกไม่ใช้ “แสดงตัวอย่างการอัปเดตอัตโนมัติ” ตัวเลือก, และรับปุ่ม Run แทน เมื่อคุณคลิกคุณจะสามารถดูและอัปเดตเอาต์พุตของรหัสของคุณได้ เมื่อใดก็ตามที่คุณต้องการ.

นี่เป็นตัวเลือกที่ยอดเยี่ยมเช่นกันถ้าคุณกำลังทำงานกับโค้ดที่เอาท์พุท ต้องผ่านการเปลี่ยนแปลงเค้าโครงมากมาย, และ repaints ทุกครั้งที่มีการอัปเดตส่งผลให้เกิดความเชื่องช้า.

2. จำนวนที่เพิ่มขึ้น / ลดลง

เพิ่มหรือลดตัวเลขในรหัสของคุณใน Codepen โดยไม่ต้องพิมพ์ตัวเลขใหม่. สิ่งที่คุณต้องทำคือการใช้คีย์ผสมของ Ctrl / Cmd และ ลูกศรขึ้นและลง.

3. เคอร์เซอร์หลายตัว

คุณสามารถวางเคอร์เซอร์ไว้ที่ หลายจุดในซอร์สโค้ด, จากนั้นพิมพ์หรือแก้ไขในทุกจุดเหล่านั้น ในเวลาเดียวกัน. ใช้งานได้เฉพาะเมื่อคุณป้อนข้อมูลเดียวกันและลดความจำเป็นในการคัดลอกวาง เพียงกดปุ่ม Ctrl / Cmd ค้างไว้ในขณะที่คลิกที่หลายจุด.

4. ข้อความคอนโซลหลากสี

ปลอบใจ วัตถุ JavaScript มี อีกสองสามวิธี นอกเหนือจาก เข้าสู่ระบบ () เพื่อให้คุณ พิมพ์สิ่งต่าง ๆ ในเว็บคอนโซล.

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

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

5. ส่งออก

เมื่อบันทึกแล้ว ปากกา (เอนทิตี Codepen เดียว) สามารถส่งออกได้ เป็นไฟล์ ZIP ด้วยทั้งหมดใน HTML, CSS และรหัส JS ในไฟล์ นอกจากนี้ยังมีตัวเลือกในการบันทึกปากกา เป็นส่วนสำคัญ Github (ที่เก็บ Git) คุณสามารถหาปุ่มส่งออกที่มุมล่างขวาของปากกาแต่ละอัน.

6. ค้นหาและแทนที่

ค้นหาและแทนที่ - การดำเนินการที่จำเป็นสำหรับคนที่มีแนวโน้มที่จะเปลี่ยนชื่อตัวแปรของพวกเขาเป็นครั้งคราว Ctrl / Cmd + Shift + F เป็นคีย์ผสม เปิด “ค้นหาและแทนที่” โต้ตอบ.

7. Emmet Tab Trigger

คุณรู้เกี่ยวกับแท็บทริกเกอร์สำหรับการเข้ารหัส Emmet หรือไม่? Emmet เป็นเครื่องมือเพิ่มประสิทธิภาพสำหรับนักพัฒนาส่วนหน้าที่ช่วยให้คุณ พิมพ์รหัสโครงกระดูกที่ได้รับการขยายในภายหลัง. หากต้องการทำสิ่งนี้ใน Codepen เพียงแค่พิมพ์ตัวย่อที่เหมาะสมลงในเครื่องมือแก้ไขอย่างรวดเร็วกดปุ่ม Tab และรหัสทั้งหมดจะปรากฏขึ้นพร้อมกัน. ใช้งานได้กับ HTML เท่านั้น ใน Codepen.

8. รับไฟล์รหัสส่วนบุคคล

หากคุณใช้ตัวเลือกส่งออกตามที่กล่าวไว้ก่อนหน้านี้คุณจะได้รับทั้งสามไฟล์ (HTML, CSS และ JS) จากปากกาของคุณ แต่ถ้าคุณสนใจ ไฟล์เหล่านั้นเพียงหนึ่งหรือสองไฟล์, และต้องการดาวน์โหลดแยกทีละตัวมีตัวเลือกให้เช่นกันใน Codepen.

เมื่อลงชื่อเข้าใช้ Codepen แล้วให้ไปที่ปากกาของคุณแล้วคลิกปุ่มเปลี่ยนมุมที่มุมบนขวา ที่ด้านล่างของรายการแบบเลื่อนลงคุณจะเห็น ลิงค์ดาวน์โหลดโดยตรงสำหรับแต่ละไฟล์.

9. ตรวจสอบตัวแปร JavaScript

ในขณะที่คอนโซล JavaScript ของ Codepen เชื่อมต่อกับ JavaScript ที่บันทึกไว้ในปากกาของคุณคุณยังสามารถใช้เพื่อทดสอบ JavaScript ของคุณได้อย่างรวดเร็ว คุณสมบัตินี้มีประโยชน์เป็นพิเศษ ตรวจสอบตัวแปร JS, เช่นนี้คุณ ไม่ต้องแทรกคอนโซลพิเศษหรือข้อความแจ้งเตือน เป็นรหัสต้นฉบับเพียงเพื่อการทดสอบ.

10. เปิดปากกาเป็นเทมเพลต

หากคุณมักจะเริ่มใช้ปากกาส่วนใหญ่ด้วย รหัสชุดเดียวกัน, คุณสามารถใช้เทมเพลตเพื่อ บันทึกรหัสซ้ำเหล่านั้น. ในการเปลี่ยนปากกาให้เป็นเทมเพลต, เลือกตัวเลือกเทมเพลต ภายใต้เมนูการตั้งค่า เมื่อคุณสร้างปากกาใหม่ในภายหลังคุณสามารถ เริ่มด้วยเทมเพลตที่คุณบันทึกไว้ โดยคลิกที่ลูกศรลงทางด้านขวาของปุ่ม New Pen มันจะเปิดรายการแบบหล่นลงพร้อมกับแม่แบบที่บันทึกไว้ทั้งหมดของคุณเพื่อเลือก.