Home-theater-designers
การเริ่มต้นใช้งานการพัฒนาเว็บ JavaScript อาจเป็นกระบวนการที่น่าหงุดหงิด แต่ก็มีเครื่องมือที่ช่วยให้ง่ายขึ้น
CodePen.io เป็นสภาพแวดล้อมการเขียนโค้ดในเบราว์เซอร์ที่ออกแบบมาสำหรับทั้งการเรียนรู้การเขียนโค้ดและเพื่อสร้างต้นแบบแนวคิดอย่างรวดเร็วโดยมีความยุ่งยากน้อยที่สุด
ในบทความนี้ เราจะพิจารณาคุณลักษณะบางอย่างของไซต์และวิธีที่จะช่วยให้คุณเป็นโปรแกรมเมอร์ที่ดียิ่งขึ้น
CodePen คืออะไร?
CodePen จัดเตรียมสิ่งที่เรียกว่า a ปากกา ซึ่งประกอบด้วยสามหน้าต่างที่แตกต่างกันสำหรับ HTML, CSS และ JavaScript รวมถึงบานหน้าต่างแสดงตัวอย่างที่อัปเดตแบบเรียลไทม์ในขณะที่คุณพิมพ์
แม้ว่านักพัฒนาเว็บมักใช้เพื่อแสดงแนวคิดสำหรับเว็บไซต์ แต่ก็เป็นสถานที่ที่ดีในการเรียนรู้พื้นฐานของการพัฒนาเว็บส่วนหน้า นี่คือคุณสมบัติเด่นที่สุดที่คุณต้องรู้เมื่อใช้ CodePen
1. ตัวประมวลผลล่วงหน้า
ตัวประมวลผลล่วงหน้าถูกแปลหรือคอมไพล์ภาษาที่ออกแบบมาเพื่อลดความซับซ้อนของการเข้ารหัส พวกเขาสามารถเพิ่มคุณลักษณะต่างๆ ให้กับภาษาเพื่อความสะดวก และทำให้โค้ดอ่านง่ายขึ้น ในการพัฒนาเว็บ มีการใช้ตัวประมวลผลล่วงหน้าสำหรับ HTML, CSS และ JavaScript เพื่อสร้างโค้ดที่สะอาดอย่างรวดเร็ว
หากคุณกำลังเรียนรู้การพัฒนาเว็บและต้องการลองใช้ตัวประมวลผลล่วงหน้าแบบต่างๆ CodePen ช่วยให้คุณสามารถสลับตัวประมวลผลล่วงหน้าได้ทันที และดูโค้ดที่คอมไพล์เป็นแบบเรียลไทม์ แต่ละบานหน้าต่างสามบานในแอพ CodePen มีเมนูดรอปดาวน์ที่ด้านบนขวา เลือก ดู HTML/CSS/JS . ที่คอมไพล์แล้ว เพื่อดูว่าโค้ดจะถูกตีความอย่างไร
ในปากกานี้ เราได้สร้างเว็บไซต์ง่ายๆ โดยใช้ แฮมล และ ซาส เพื่อจัดรูปแบบข้อความส่วนหัว กำลังเลือก ดูเรียบเรียง แสดง HTML และ CSS มาตรฐาน ในตัวอย่างนี้ ความแตกต่างมีน้อย อย่างไรก็ตาม ในขณะที่เรียนรู้ภาษาใหม่ การดูว่าโค้ดที่ประมวลผลล่วงหน้ามีลักษณะอย่างไรเมื่อคอมไพล์แล้วอาจเป็นประโยชน์
2. ทรัพยากรภายนอก
นอกจากการรองรับเนทีฟสำหรับตัวประมวลผลล่วงหน้าแล้ว CodePen ยังรองรับสคริปต์ภายนอกอีกด้วย ทำให้เป็นสถานที่ที่สมบูรณ์แบบในการรับประสบการณ์จริงกับไลบรารีสำหรับโครงการส่วนตัวของคุณ หรือเพื่อทบทวนไลบรารีเว็บแอปยอดนิยม เช่น React
หากต้องการเพิ่มไลบรารีภายนอก ให้เปิด การตั้งค่า บนปากกาของคุณ แล้วไปที่แท็บ JavaScript มีสองวิธีในการเพิ่มทรัพยากร โดยการเพิ่ม URL ของทรัพยากรด้วยตนเอง หรือโดยการค้นหา
เราใช้คุณสมบัตินี้ในบทความของเราที่ครอบคลุม เว็บแอนิเมชั่นด้วย mo.js พร้อมกับการประมวลผลล่วงหน้าของ Babel
ดูปากกา ตัวอย่าง Mojs MUO โดยเอียน ( @Bardoctorus ) บน CodePen
ใช่ ปากกา CodePen สามารถฝังได้! ไปข้างหน้าและคลิกที่บานหน้าต่างแสดงตัวอย่างด้านบนเพื่อดูผลลัพธ์ของบทช่วยสอน Mo.js!
ปากกาอื่นๆ สามารถนำเข้าได้เหมือนกับห้องสมุดภายนอก ซึ่งหมายความว่าคุณสามารถใช้องค์ประกอบจากปากกาที่เขียนไว้ก่อนหน้านี้เพื่อใช้เหมือนกับโมดูลในปากกาใหม่ของคุณ ผู้ใช้ CodePen Adam's โพลง่ายๆ ปากกาเป็นตัวอย่างที่ดีของเรื่องนี้
3. เทมเพลต
เมื่อคุณกำลังเรียนรู้แนวคิดใหม่หรือทดสอบแนวคิดใหม่ คุณมักจะใช้ส่วนประกอบที่คล้ายคลึงกันและทบทวนขั้นตอนเดิมในการเริ่มต้น CodePen อนุญาตให้สร้างปากกาเทมเพลตซึ่งสามารถตัดการซ้ำซ้อน และให้คุณตรงประเด็น
ในการสร้างเทมเพลต ให้เปิดปากกาใหม่ ทำการเปลี่ยนแปลง แล้วเลือก แม่แบบ แถบเลื่อนในเมนูการตั้งค่า
https://vimeo.com/221428690
ก่อนหน้านี้ ผู้ใช้ฟรีสามารถสร้างเทมเพลตได้สามแบบเท่านั้น แต่ตอนนี้ผู้ใช้ทั้งหมดสามารถมีเทมเพลตในบัญชีของตนได้มากเท่าที่ต้องการ สมบูรณ์แบบสำหรับการเริ่มต้นแนวคิดใหม่โดยมีความล่าช้าน้อยที่สุด!
4. ความร่วมมือด้านแฟชั่น
ความสามารถในการทำงานร่วมกันและสอนด้วย CodePen อาจเป็นคุณสมบัติที่ยิ่งใหญ่ที่สุด มีเครื่องมือการทำงานร่วมกันที่ยอดเยี่ยมมากมายสำหรับโปรแกรมเมอร์อยู่แล้ว แต่แนวทางของ CodePen นั้นเรียบง่ายและใช้งานง่าย
ผู้ใช้ Pro ของ CodePen สามารถสร้างปากกาใหม่และเปิดเพื่อการทำงานร่วมกันภายใต้ เปลี่ยนมุมมอง เมนู. สิ่งนี้จะเปลี่ยนลิงก์ของปากกาเป็นคำเชิญที่แชร์ได้ซึ่งรองรับผู้คนจำนวนมากขึ้นอยู่กับแผน CodePen Pro ของคุณ
วิธีดาวน์โหลดหนังสือจาก Google Books
ในตัวอย่างนี้ ฉันเขียน HTML ในขณะที่เพื่อนอัปเดต CSS แบบเรียลไทม์ โดยมีเคอร์เซอร์ติดป้ายกำกับระบุว่าพวกเขาทำงานอยู่ที่ใด
ทุกคนที่มีลิงก์สามารถเข้าร่วมและใช้ฟังก์ชันแชทในเบราว์เซอร์ได้ ไม่ว่าพวกเขาจะเป็นผู้ใช้ระดับโปรหรือกระทั่งมีบัญชี CodePen หากปิดการบันทึกอัตโนมัติ มีเพียงเจ้าของปากกาเท่านั้นที่สามารถบันทึกการเปลี่ยนแปลงใดๆ ได้ ทำให้เป็นวิธีที่ปลอดภัยในการเปิดรหัสของคุณให้ผู้อื่นทราบโดยไม่มีความเสี่ยง
ลักษณะปลายเปิดของโหมดนี้มีประโยชน์สำหรับผู้เริ่มต้น เนื่องจากคุณสามารถเชิญใครก็ได้ในปากกาของคุณเพื่อแนะนำคุณผ่านแนวคิดที่ยากลำบาก นอกจากนี้ยังเป็นโหมดที่มีประโยชน์ในการรู้เส้นทางของคุณ เนื่องจากมันสมบูรณ์แบบสำหรับการสัมภาษณ์ผู้มีโอกาสเป็นพนักงาน และได้มาแล้ว ถูกนำมาใช้อย่างมืออาชีพในลักษณะนี้ !
5. โหมดศาสตราจารย์
โหมด Professor อนุญาตให้ผู้ใช้ Pro หนึ่งรายโฮสต์ห้องที่มีเพียงพวกเขาเท่านั้นที่สามารถแก้ไขรหัสได้ ระหว่าง 10-100 ผู้ใช้สามารถรับชมและแชทได้ขึ้นอยู่กับแผน Pro ของโฮสต์
โหมด Professor ช่วยให้มีความยืดหยุ่นระหว่างการเรียนรู้ในห้องเรียนและการเรียนทางไกล หรือทั้งสองอย่างรวมกัน การใช้โหมด Professor จะทำให้คนที่อยู่หลังชั้นเรียนได้รับประสบการณ์แบบเดียวกันกับนักเรียนในชั้นหน้า และเพื่อให้ครูแสดงการแก้ไขข้อผิดพลาดซึ่งจะอัปเดตตามเวลาจริง
6. โหมดการนำเสนอ
โหมดการนำเสนอได้รับการออกแบบมาอย่างไม่น่าแปลกใจ โดยคำนึงถึงการนำเสนอโค้ด แอปจะแสดงในมุมมองที่เรียบง่าย ออกแบบมาเพื่อใช้งานกับเครื่องฉายเหนือศีรษะ CodePen ได้ปรับโหมดการนำเสนอให้เหมาะสมสำหรับใช้กับการเชื่อมต่ออินเทอร์เน็ตความเร็วต่ำและฮาร์ดแวร์ที่อ่อนแอกว่า
ผู้อ่านที่ฉลาดอาจรู้แล้วว่า CodePen เวอร์ชันฟรีจะให้ฟังก์ชันนี้อย่างแม่นยำ แม้ว่าโหมด Pro จะมีคุณสมบัติที่มีประโยชน์บางประการ เค้าโครง ขนาดฟอนต์ และธีมสามารถเปลี่ยนแปลงได้อย่างรวดเร็วในทันทีเพื่อให้เหมาะกับการตั้งค่าเกือบทุกแบบ และการแสดงลิงก์ไปยังปากกาจะแสดง URL ที่สั้นลงขนาดจัมโบ้ทำให้การแชร์โปรเจ็กต์ง่ายขึ้น
การเปลี่ยนแปลงเล็กๆ น้อยๆ เหล่านี้ควบคู่ไปกับความสามารถในการปรับขนาดหน้าต่างแสดงตัวอย่างให้พอดีกับสิ่งที่คุณกำลังแสดง ทำให้โหมดการนำเสนอสมบูรณ์แบบสำหรับทั้งครูผู้สอน และนักพัฒนาที่นำเสนอแนวคิดต่อเพื่อนร่วมงาน โหมดการนำเสนอยังเป็นวิธีที่ดูสะอาดตาและเป็นวิธีง่ายๆ ในการนำเสนอโค้ด หากคุณพบว่าตัวเองกำลังสัมภาษณ์ตำแหน่งการเขียนโปรแกรม
7. รูปแบบ
การค้นหาแรงบันดาลใจทำได้ง่ายขึ้นมากด้วยคอลเล็กชั่น .ของ CodePen รูปแบบการออกแบบ .
แต่ละหมวดหมู่คือชุดของโค้ดตัวอย่างที่ผู้ใช้ CodePen จัดเตรียมไว้สำหรับงานเฉพาะ คุณกำลังมองหาวิธีสร้างปุ่มแบบไดนามิกสำหรับไซต์ของคุณหรือไม่? เมนูตามสั่ง? มีหมวดหมู่มากมายที่เหมาะกับเกือบทุกตัวอย่าง
รูปแบบเหล่านี้ยังเป็นวิธีที่ยอดเยี่ยมในการเรียนรู้ว่าปุ่มโต้ตอบทำงานอย่างไร และรูปแบบต่างๆ ที่อินเทอร์เฟซผู้ใช้แบบไดนามิกสามารถทำงานได้
8. เอ็มเม็ต
เอ็มเม็ต ซึ่งก่อนหน้านี้รู้จักกันในชื่อ Zen Coding ได้รับการยอมรับอย่างกว้างขวางว่าเป็นการประหยัดเวลาที่ยิ่งใหญ่ที่สุดสำหรับการพัฒนา HTML และ CSS ปลั๊กอินใช้โค้ดบางส่วนที่คุณพบว่าตัวเองกำลังเขียนอยู่เป็นจำนวนมาก และแปลงเป็นทางลัดง่ายๆ
การเห็นการใช้งานจริงดีกว่าการอธิบาย ดังนั้นให้ตั้งค่าตามปกติสำหรับเอกสาร HTML:
การเพิ่มสิ่งนี้ลงในเอกสาร HTML ทุกรายการลดลงเหลือสองการกระทำ ใช้ Emmet พิมพ์ ! และกด แท็บ กุญแจ. มายากล!
Emmet ใช้งานเป็นมาตรฐานบน CodePen และมีประโยชน์อย่างยิ่งหากคุณกำลังพยายามเรียนรู้แนวคิดใหม่ใน JavaScript และจำเป็นต้องสร้าง HTML และ CSS ที่รองรับอย่างรวดเร็ว
พัฒนาด้วย CodePen เพื่อประสบการณ์ที่ดีกว่า
CodePen เป็นเครื่องมือที่ยอดเยี่ยมสำหรับนักพัฒนาเว็บ และภาคสนามก็มีการเติบโตอย่างต่อเนื่อง JavaScript เป็นภาษาที่ดีในการเรียนรู้เพื่ออนาคตในการพัฒนาเว็บ
ฟรีทีวีออนไลน์ไม่ต้องสมัคร
มีบทช่วยสอนและหลักสูตรที่ยอดเยี่ยมสำหรับผู้ที่ต้องการเริ่มต้นใช้งาน JavaScript และ CodePen เป็นสภาพแวดล้อมที่ยอดเยี่ยมในการทดสอบทักษะใหม่ของคุณ
แบ่งปัน แบ่งปัน ทวีต อีเมล 8 เว็บไซต์ที่ดีที่สุดในการดาวน์โหลดหนังสือเสียงฟรีหนังสือเสียงเป็นแหล่งความบันเทิงชั้นเยี่ยมและเข้าใจง่ายกว่ามาก นี่คือเว็บไซต์ที่ดีที่สุดแปดแห่งที่คุณสามารถดาวน์โหลดได้ฟรี
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- การเขียนโปรแกรม
- HTML
- การพัฒนาเว็บ
- JavaScript
- CSS
Ian Buckley เป็นนักข่าวอิสระ นักดนตรี นักแสดง และโปรดิวเซอร์วิดีโอที่อาศัยอยู่ในกรุงเบอร์ลิน ประเทศเยอรมนี เมื่อเขาไม่ได้เขียนหนังสือหรืออยู่บนเวที เขากำลังซ่อมแซมอุปกรณ์อิเล็กทรอนิกส์หรือโค้ด DIY โดยหวังว่าจะเป็นนักวิทยาศาสตร์ที่คลั่งไคล้
เพิ่มเติมจาก Ian Buckleyสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก