เมื่อคุณซื้อผ่านลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร นี่คือวิธีการทำงาน.
ป้อนไฟล์เริ่มต้น
โซลูชันของเราคือชุดของไฟล์ HTML, CSS และ JS ที่เราใช้ในการเริ่มต้นโปรเจ็กต์ (ซึ่งก็คือ 'ไฟล์เริ่มต้น') โดยพื้นฐานแล้วมันเป็นฐานโค้ดแบบรวมที่รองรับการส่งมอบบนเว็บทั้งสี่รายการของเรา และด้วยเหตุนี้ จึงถูกจัดระเบียบตามการส่งมอบโครงการของเรา:
- สินทรัพย์ระดับโลก (ใช้โดยการส่งมอบทั้งหมด)
- สินทรัพย์ที่ใช้ร่วมกัน (ใช้โดยการส่งมอบมากกว่าหนึ่งรายการ)
- สินทรัพย์เฉพาะที่สามารถส่งมอบได้ (ใช้โดยการส่งมอบเพียงรายการเดียวเท่านั้น)
ตัวอย่างเช่น Sass สำหรับภาพตัดปะองค์ประกอบของเราจะนำเข้าเนื้อหาระดับโลก แบ่งปัน และเฉพาะการส่งมอบที่จำเป็นทั้งหมด:
//บางส่วนทั่วโลก//
@import "global-partials/utils";
@import "ส่วนกลางบางส่วน/ตัวแปร";
@import "ส่วนกลางบางส่วน/มิกซ์อิน";
@import "ส่วนกลางบางส่วน/ตาราง";
@import "ส่วนกลางบางส่วน/ตัวยึดตำแหน่ง";
@import "ส่วนกลางบางส่วน/ทำให้เป็นมาตรฐาน";
// แบ่งปันบางส่วน //
@import "แชร์บางส่วน/สี";
@import "shared-partials/fonts";
@import "shared-partials/shell";
@import "shared-partials/type";
//องค์ประกอบภาพตัดปะบางส่วน//
@import "ภาพตัดปะบางส่วน/ตัวแปร";
@import "ภาพตัดปะบางส่วน/กำหนดเอง";
องค์กรนี้ดำเนินต่อไปใน HTML ของเรา ซึ่งเรามีเนื้อหาระดับโลก แบ่งปัน และเฉพาะการส่งมอบอีกครั้ง สิ่งเหล่านี้ถูกจัดระเบียบเพิ่มเติมเป็นการรวมและโมดูล
การรวมของเราเป็นตัวแทนของ HTML 'เชลล์' เช่น DOCTYPE ของเรา, และโครงสร้างหน้า การเรียกใช้แต่ละครั้งที่เชลล์เหล่านี้รวมเข้ากับ PHP พื้นฐานประกอบด้วย:
โมดูลของเรานั้นเป็นเพียงตัวอย่างโค้ดของรูปแบบ HTML (รวมถึงค่าคลาส) สำหรับเนื้อหาทั่วไป เช่น รูปภาพที่มีคำบรรยาย:
เมื่อการส่งมอบใดๆ ของเราต้องแสดงรูปภาพพร้อมคำบรรยาย เราก็เพียงรวมตัวอย่างข้อมูลด้วย PHP พื้นฐานดังนี้:
ไฟล์เริ่มต้นทำให้เรามีระบบบูรณาการสำหรับการส่งมอบของเรา จากมุมมองของลูกค้า ภาพตัดปะองค์ประกอบและโครงร่างของเราแจ้งเทมเพลตส่วนหน้าของเรา ซึ่งแจ้งแนวทางสไตล์
แต่จากมุมมองภายใน สิ่งเหล่านี้สร้างขึ้นจากกันและกันอย่างแท้จริง โดยอาศัยโค้ดที่ใช้ร่วมกันเพื่อสร้างการส่งมอบที่สม่ำเสมอโดยมีการทำซ้ำน้อยลง
ทำตามที่ฉันพูด ไม่ใช่อย่างที่ฉันทำ
ตัวอย่างเหล่านี้แสดงให้เห็นถึงสิ่งที่เราที่ Bright Umbrella ทำ ซึ่งอาจไม่เหมาะกับคุณ การนำไฟล์เริ่มต้นมาใช้ไม่ได้เกี่ยวกับการทำตามแนวทางเฉพาะของเรา แต่เป็นเกี่ยวกับการเปิดรับกรอบความคิดใหม่
ขั้นแรก หยุดคิดว่าการส่งมอบเป็นสิ่งที่เป็นอิสระ แทนที่จะเป็นเช่นนั้น ให้มองพวกมันเป็นระบบ โดยที่ระบบหนึ่งต่อยอดหรือสนับสนุนอีกระบบหนึ่ง สิ่งนี้ช่วยเพิ่มประสิทธิภาพ – ตัวอย่างเช่น หากฉันต้องการเปลี่ยนเทคนิคที่ใช้ในสินทรัพย์ระดับโลก การเปลี่ยนแปลงนั้นทันทีที่เติมผลลัพธ์ทั้งหมดของเรา
ประการที่สอง เพื่อสร้างระบบนี้ คุณต้องเป็นแบบโมดูลาร์ สำหรับเรา สิ่งนี้เริ่มต้นที่ระดับการส่งมอบ: เรามองหารูปแบบซ้ำๆ ในการส่งมอบของเรา และสรุปส่วนต่างๆ ที่เหมือนกัน ต่อไปเรามุ่งเน้นไปที่เนื้อหา มองหารูปแบบ HTML จากนั้นไปที่ CSS การทำให้สไตล์ของเราเป็นโมดูลเพื่อทำให้ซ้ำกันน้อยลง และสร้างรูปแบบการตั้งชื่อที่สอดคล้องกับรูปแบบ HTML ของเราเป็นอย่างดี
ประการที่สาม และที่สำคัญที่สุดคือ ระบบของคุณไม่จำเป็นต้องรับรู้อย่างสมบูรณ์ก่อนจึงจะสามารถใช้งานได้ ที่จริงแล้ว การประยุกต์ใช้งานจริงเป็นวิธีเดียวที่คุณจะรู้ได้ว่ามีประสิทธิภาพหรือไม่ ซึ่งหมายความว่าคุณต้องพัฒนาเมื่อคุณค้นพบสิ่งที่เหมาะกับคุณ ขณะที่ข้อมูลจำเพาะและการรองรับเบราว์เซอร์เปลี่ยนแปลงไป เมื่อการทดสอบเผยให้เห็นถึงปัญหา และแม้กระทั่งเมื่อคุณค้นพบเทคนิคใหม่ๆ
แต่ก่อนอื่นการวางแผน
เมื่อฉันเริ่มกระบวนการนี้ ฉันไม่รู้ด้วยซ้ำว่ากำลังเริ่มทำอะไรอยู่ ฉันเพียงแค่สร้างสินทรัพย์เพื่อพยายามให้มีประสิทธิภาพมากขึ้น หลังจากพัฒนาระบบไฟล์เริ่มต้นของเรามากว่า 18 เดือน ตอนนี้ฉันหวังว่าฉันจะใช้แนวทางที่เป็นระบบมากกว่านี้และตอบคำถามสำคัญสองสามข้อก่อน:
- เราต้องการทำงานในปัจจุบันและอนาคตอย่างไร?
- แบบแผนการตั้งชื่อของเราคืออะไร: ไม่ใช่แค่ชื่อคลาส แต่สำหรับชื่อไฟล์และไดเร็กทอรี?
- เราต้องการจัดระเบียบไฟล์และไดเร็กทอรีอย่างไร?
- รูปแบบของเรามีอะไรบ้าง? สำหรับ HTML และ CSS แม้แต่ JS?
- อะไรที่สามารถแบ่งปันได้ และอะไรคือสิ่งที่เป็นเอกลักษณ์เฉพาะของสิ่งที่ส่งมอบแต่ละรายการ?
ฉันยังหวังว่าฉันจะกำหนดกฎสำหรับวิธีที่เราพัฒนาไฟล์เริ่มต้นของเรา ตอนนี้เราทราบแล้วว่าเมื่อโปรเจ็กต์ไคลเอนต์เริ่มต้นขึ้น โปรเจ็กต์นั้นจะสะท้อนถึงวิธีการสร้างไฟล์เริ่มต้นของเราเมื่อถูกสร้างขึ้น เราเรียนรู้ที่จะไม่ย้อนกลับไปอัปเดตโปรเจ็กต์ที่เสร็จสมบูรณ์เมื่อเราอัปเดตไฟล์เริ่มต้น มันไม่คุ้มค่าเลย เพราะลูกค้าของเราไม่ได้จ่ายเงินซื้อมัน
นอกจากนี้เรายังนำกฎที่เราทดสอบด้วยเทคนิคใหม่ๆ เมื่อโปรเจ็กต์เรียกร้องโดยเฉพาะ ด้วยวิธีนี้ เราได้รับเงินสำหรับงานพัฒนาใหม่ หากมีแนวคิดใหม่เกิดขึ้นกับเราในระหว่างโปรเจ็กต์ แต่มันไม่เกี่ยวข้องกับโปรเจ็กต์นั้น เราจะระงับมันไว้จนกว่าจะถึงภายหลัง
และสำหรับงานพัฒนาใหม่ที่เกี่ยวข้องกับโปรเจ็กต์ เราจะรอจนกว่าโปรเจ็กต์จะเสร็จสมบูรณ์ ทดสอบ และเปิดตัวก่อนที่เราจะรวมงานใหม่ลงในไฟล์เริ่มต้นของเรา
สุดท้ายนี้ เราปฏิบัติต่อ Starter Files เหมือนเป็นโปรเจ็กต์ไคลเอนต์ ทุกอย่างได้รับการควบคุมเวอร์ชันด้วย Git และแจกจ่ายบนพื้นที่เก็บข้อมูลส่วนกลาง Beanstalk ทุกอย่างได้รับการบันทึกไว้ใน Google Doc ที่ใช้ร่วมกัน และเอกสารนี้จะได้รับการอัปเดตทุกครั้งที่มีการอัปเดตไฟล์เริ่มต้น
เก็บเกี่ยวผลตอบแทน
การสร้างกรอบงานที่กำหนดเองคือการลงทุน ต้องใช้เวลาและความมุ่งมั่นที่จะรักษาและเติบโต แต่เป็นการลงทุนที่คุ้มค่า ไม่ว่าคุณจะทำงานคนเดียวหรือเป็นทีมก็ตาม การมีเฟรมเวิร์กที่คุณกำหนดเองจะทำให้คุณได้รับประโยชน์จากเฟรมเวิร์กโดยไม่มีข้อบกพร่องที่ผมกล่าวถึงในตอนต้นของบทความนี้
ค้นพบสิ่งที่เหมาะกับคุณ กำหนดและใช้สิ่งที่คุณต้องการ จำเป็น และสะดวกสบายด้วย (ซึ่งอาจรวมถึงเฟรมเวิร์กที่สร้างไว้ล่วงหน้าด้วย!) แล้วคุณจะพบประสิทธิภาพและส่งมอบผลิตภัณฑ์ที่ดีขึ้นอย่างเป็นธรรมชาติ
คำ: เอมิลี่ ลูอิส
Emily เป็นเจ้าของและเป็นหัวหน้านักพัฒนาของ ร่มสดใส. บทความนี้เดิมปรากฏใน นิตยสารเน็ต.
แบบนี้? อ่านสิ่งเหล่านี้!
- 11 ชุด UI ฟรีที่ยอดเยี่ยมสำหรับนักออกแบบเว็บไซต์
- ค้นพบ แพลตฟอร์มบล็อกที่ดีที่สุด
- ฉลาดหลักแหลม กวดวิชาเวิร์ดเพรส การเลือก