Smashing Podcast ตอนที่ 32: รีวิวแห่งปี 2020

ในตอนนี้ เราจะย้อนเวลากลับไปในปี 2020 ปีนี้เราได้พูดคุยกับใครบ้าง และเราได้เรียนรู้อะไรบ้าง? ลองกลับไปฟังคลิปเพื่อหาคำตอบกัน

แสดงหมายเหตุ

คุณสามารถค้นหาตอนที่ผ่านมาทั้งหมดของเรา รวมถึงบทสัมภาษณ์ฉบับเต็มได้ที่ podcast.smashingmagazine.com

แล้วเจอกัน 2021 นะทุกคน!

การถอดเสียง

Drew McLellan: ในเดือนมกราคม ฉันได้พูดคุยกับ Amy Hupe เกี่ยวกับงานของเธอในระบบการออกแบบของรัฐบาลสหราชอาณาจักร และโดยเฉพาะอย่างยิ่ง วิธีที่ทีมเพิ่มการนำระบบไปใช้โดยองค์กรในวงกว้างด้วยการสนับสนุนการบริจาค นี่เอมี่

Amy Hupe: เราเริ่มเร็วจริงๆ ดังนั้น ก่อนที่เราจะมีระบบการออกแบบสาธารณะ เราเริ่มมีส่วนร่วมกับคนที่เราคิดว่าน่าจะเป็นผู้มีส่วนร่วมที่สนใจ ฉันควรพูดถึงที่นี่ว่าเรามีนักออกแบบบริการที่ยอดเยี่ยมในทีม เธอเข้าร่วมกับเราใน... ฉันจะไม่ได้รับวันที่ที่ถูกต้อง แต่อย่างใดในขณะนี้ แต่ฉันคิดว่าเธอร่วมงานกับเราตลอดปี 2018 และชื่อของเธอคือ Ignacia เธอทำงานได้อย่างยอดเยี่ยมในการไปรอบ ๆ และมีส่วนร่วมกับผู้คน สิ่งหนึ่งที่เธอทำคือไปค้นหารูปแบบต่างๆ ของรัฐบาล และรูปแบบต่างๆ ของรูปแบบเหล่านั้น เลยออกไปและพูดว่า “โอเค มี 10 วิธีในการขอที่อยู่ในรัฐบาล ลองดูพวกเขาทั้งหมดด้วยกันและตัดสินใจว่าวิธีใดที่เราคิดว่าเป็นแนวทางที่เหมาะสมที่สุด เราจะรวมสิ่งเหล่านี้เป็นหนึ่งเดียวได้อย่างไร”

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

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

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

Drew: เราได้ร่วมงานกับ Stephanie Stimac ของ Microsoft และ Aaron Gustafson เพื่อพูดคุยเกี่ยวกับ Edge ที่ใช้ Chromium เป็นเครื่องมือในการเรนเดอร์ ฉันถามแอรอนเกี่ยวกับแนวการแข่งขันระหว่างเบราว์เซอร์และตำแหน่งที่เบราว์เซอร์หลายตัวรวมกันบนเอ็นจิ้นการเรนเดอร์เดียวกันจะขจัดการแข่งขันที่ดีออกไป ดังนั้นจึงไม่ดีสำหรับเว็บเปิด

Aaron Gustafson: นี่เป็นสิ่งที่ฉันเป็นผู้ใช้มาตรฐานเว็บมาเป็นเวลานานอย่างแน่นอน ฉันเข้าใจเหตุผลทางธุรกิจทั้งหมดแล้ว จากมุมมองของ Microsoft มันสมเหตุสมผลมาก จากมุมมองของผู้พัฒนาส่วนหน้า เป็นเรื่องดีที่ไม่ต้องจัดการกับเอ็นจิ้นต่างๆ มากมาย ฉันหมายถึง โดยรวมแล้ว พวกเราที่ทำงานบนเว็บมาเป็นเวลานาน ได้เห็นการบรรจบกันอย่างมากในแง่ของการแสดงผล เราไม่ได้มีปัญหามากเท่ากับที่เคยมี พูดในเน็ตสเคปเป็นเวลาเจ็ดวันที่ที่เรามีปัญหา... ฉันรู้ว่าบริษัทที่สร้างสไตล์ชีตเฉพาะสำหรับแต่ละเบราว์เซอร์ที่แตกต่างกัน ซึ่งไม่สามารถป้องกันได้

Aaron Gustafson: แต่ฉันคิดว่าสิ่งที่แตกต่างไปจากนี้ก็คือในสงครามเบราว์เซอร์ดั้งเดิม คุณมีเอ็นจิ้นที่เป็นกรรมสิทธิ์ทั้งหมดเหล่านี้ และทุกคนก็อยู่ในเกมที่มีทักษะเฉพาะตัวในแง่ของการพยายามส่งฟีเจอร์แพลตฟอร์มใหม่และ คุณลักษณะ JavaScript ใหม่หรือในกรณีของ JavaScript วิศวกรรมย้อนกลับของ Microsoft เพื่อสร้าง JScript และพยายามหาวิธีที่จะรวมเข้าด้วยกันทั้งหมด

Aaron Gustafson: แต่ตอนนี้ เรามีความสามารถในการทำงานร่วมกันในโครงการโอเพ่นซอร์สจริง ๆ และยังคงมีบทสนทนาและยังคง… ฉันไม่รู้ การต่อสู้ไม่ใช่คำพูดที่ถูกต้อง แต่มีการอภิปรายอย่างจริงจังเกี่ยวกับผลกระทบของแนวทางที่แตกต่างกันและไม่เห็นด้วยกับแต่ละอื่น ๆ และทำงานจริง ๆ เพื่อสร้างสเป็คที่ดีและมีแนวทางที่แข่งขันกับโค้ดพื้นฐานภายในบริบทของ Chromium กล่าว โครงการหรือ WebKit หรือสิ่งที่มีลักษณะดังกล่าวหรือ Missoula ในพื้นที่ Firefox

Aaron Gustafson: ใช่แล้ว ด้านหนึ่ง เราสูญเสียกลไกการเรนเดอร์อีกตัวหนึ่ง และฉันก็รู้สึกเจ็บปวดเช่นเดียวกันเมื่อโอเปร่าตัดสินใจไปที่ Chromium แต่ฉันรู้สึกค่อนข้างดีใจที่ได้อยู่ใน Microsoft และเห็นว่าเรามุ่งมั่นที่จะเข้าร่วมโครงการ Chromium อย่างแท้จริงด้วยวิธีที่มีความหมาย ไม่ใช่แค่เพียงนั่งเฉยๆ และยอมรับทุกอย่างที่มาจาก Chromium เท่านั้น แต่จริงๆ แล้วเป็นการตรวจสอบว่าเกิดอะไรขึ้น แพลตฟอร์มและการมีส่วนร่วมในนั้น…ใช่

แอรอน กุสตาฟสัน: ฉันรู้สึกเป็นกำลังใจเล็กน้อยกับเรื่องนั้นและรู้สึกว่าเราไม่ได้อยู่ที่นั่นเพื่อเอาจากโปรเจ็กต์นั้น และยอมรับทุกอย่างที่สืบทอดมาจากผู้คนต่างๆ ที่มีส่วนร่วมในโปรเจ็กต์นั้น แต่เพื่อ ได้ร่วมงานกันที่นั่นจริงๆ ด้วย

Drew: ในเดือนกุมภาพันธ์ ฉันได้พูดคุยกับ Stephanie Walter เกี่ยวกับการทำงานกับเฟรมเวิร์ก UI เช่น Bootstrap และเพื่อนๆ และสร้างสมดุลกับความต้องการที่กำหนดเองของอินเทอร์เฟซที่ใช้งานได้ ฉันถามสเตฟานีว่าเป็นไปได้ไหมที่จะสร้าง UI ที่ใช้งานได้สูงในขณะที่ใช้กรอบงานนอกระบบหรือว่ามันมักจะเป็นการประนีประนอมที่น่าอึดอัดใจอยู่เสมอ

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

Drew: การออกแบบอย่างมีจริยธรรมเป็นเรื่องของการสนทนาของฉันกับ Trina Felber และ Martin Michael Fredrickson ฉันถามว่าการใช้แนวทางที่มีจริยธรรมในการออกแบบและหลีกเลี่ยงรูปแบบที่มืดมนเป็นการคิดในระยะยาวเกี่ยวกับสุขภาพและการเติบโตของธุรกิจมากกว่าแค่เป้าหมายการขายในระยะสั้นหรือไม่ นี่มาร์ติน

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

Drew: ในเดือนมีนาคม ฉันได้พูดคุยกับ Eduardo Boucas เกี่ยวกับเครื่องมือโอเพนซอร์สที่เรียกว่า Sourcebit ซึ่งรวบรวมเนื้อหาจากแหล่งที่มาที่แตกต่างกันและทำให้พร้อมใช้งานสำหรับเครื่องมือสร้างไซต์แบบคงที่ของคุณ ฉันถาม Eduardo ว่าสิ่งนี้สามารถปรับปรุงประสบการณ์ผู้ใช้ในการอนุญาต SSG ได้หรือไม่โดยเปิดใช้งานการผสานรวมกับเครื่องมือต่างๆ เช่น CMS ที่ไม่มีส่วนหัว

เอดูอาร์โด โบกัส: แน่นอน ใช่. วิธีที่ทำได้… ฉันเห็นวิธีการใช้เครื่องมือสองแบบที่แตกต่างกันซึ่งสามารถช่วยนักพัฒนาได้ หนึ่งคือการทำให้ Sourcebit เป็นส่วนหนึ่งของรูทีนการปรับใช้ของคุณ ดังนั้นหากคุณใช้แพลตฟอร์มโฮสติ้ง เช่น Netlify และคุณกำหนดค่าคำสั่งการปรับใช้ให้เป็น ไม่ทราบ Hugo build มันคือคำสั่ง build สำหรับ Hugo หรืออะไรก็ตาม คำสั่งประเภทนั้น สร้างไฟล์สแตติกสำหรับ Hugo คุณจะมีคำสั่งอื่นเป็นส่วนหนึ่งของกิจวัตรนั้นด้วย นั่นจะเป็นสิ่งที่ต้องการดึง Sourcebit ดังนั้น ณ เวลาสร้าง Sourcebit จะดึงข้อมูลอื่นๆ ทั้งหมด สร้างไฟล์ทั้งหมดที่ Hugo ต้องการ จากนั้นการใช้งานทั้งหมดจะใช้ไฟล์เหล่านั้นแล้วปรับใช้เนื้อหาทั้งหมดที่มาจาก CMS

Eduardo Boucas: นั่นเป็นกรณีหนึ่งที่เป็นไปได้สำหรับ Sourcebit อีกวิธีหนึ่งคือการใช้ Sourcebit เป็นการพัฒนาท้องถิ่นในเวิร์กโฟลว์การพัฒนาท้องถิ่น เพื่อให้คุณสามารถเรียกใช้ Sourcebit ด้วยสิ่งที่เราเรียกว่าโหมดนาฬิกา ดังนั้น Sourcebit คอยมองหาการเปลี่ยนแปลงในแหล่งข้อมูลระยะไกล ดังนั้นในกรณีนี้คือ CMS ที่ไม่มีส่วนหัว ดังนั้นเมื่อใดก็ตามที่คุณเผยแพร่บทความหรือเปลี่ยนรายการใน CMS Sourcebit จะรับทราบและจะสร้างไฟล์ทั้งหมดขึ้นใหม่ให้กับคุณในเครื่อง

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

Drew: การเพิ่มประสิทธิภาพ Conversion เป็นหัวข้อของวัน เมื่อฉันพูดกับ Paul Boag ผู้มีประสบการณ์และที่ปรึกษาพอดคาสต์ เราได้พูดถึงเทคนิคบางอย่างที่ไซต์ใช้ในการเปลี่ยนผู้เข้าชมให้เป็นลูกค้า แต่ฉันต้องการถามพอลว่าคุณวัดผลกระทบของการเปลี่ยนแปลงที่คุณทำได้อย่างไร พอลอธิบาย

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

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

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

Drew: ในเดือนเมษายน ฉันได้พูดคุยกับ Laura Kalbag จาก Better Blocker เกี่ยวกับความเป็นส่วนตัวทางออนไลน์ เราได้พูดถึงเส้นแบ่งที่บางลงเรื่อยๆ ระหว่างสิ่งที่ถือเป็นสาธารณะกับสิ่งที่เป็นส่วนตัว และสิ่งที่เรามองว่าเป็นส่วนตัวอาจไม่ถูกมองว่าเป็นแบบนั้นโดยบริษัทที่เรามอบความไว้วางใจในข้อมูลของเรา นี่ลอร่า

Laura Kalbag: ฉันมีตัวอย่างคลาสสิกที่เกิดขึ้นกับฉันเมื่อไม่กี่ปีที่ผ่านมา ฉันจึงเล่นเฟซบุ๊ก และแม่ของฉันเพิ่งเสียชีวิต และฉันได้รับโฆษณาสำหรับผู้จัดงานศพ ฉันคิดว่ามันแปลกมากเพราะไม่มีใครในครอบครัวของฉันพูดอะไรบนแพลตฟอร์มโซเชียลมีเดียในขณะนั้น ครอบครัวของฉันไม่มีใครพูดอะไรบน Facebook เพราะเราตกลงกันว่าไม่มีใครอยากรู้จักเพื่อนหรือสมาชิกในครอบครัวแบบนั้นผ่าน Facebook เราจึงไม่พูดเรื่องนี้

ลอร่า คัลบัก: ฉันเลยถามพี่น้องของฉันว่า “โอ้ พูดอะไรใน Facebook ที่อาจทำให้สิ่งนี้แปลกไปบ้าง” เพราะฉันมักจะได้รับโฆษณาสำหรับเครื่องสำอางและชุดทดสอบการตั้งครรภ์และเรื่องสนุก ๆ ที่พวกเขาชอบพูด เป็นผู้หญิงวัยหนึ่ง น้องสาวของฉันกลับมาหาฉันแทน เธอพูดว่า "ใช่แล้ว เพื่อนของฉันอาศัยอยู่ในออสเตรเลีย” ฉันก็เลยส่งข้อความหาเธอทาง Facebook Messenger และบอกเธอว่าแม่ของเราเสียชีวิตแล้ว แน่นอน Facebook รู้ดีว่าเราเป็นพี่น้องกัน มีการเชื่อมต่อความสัมพันธ์ที่คุณสามารถเลือกเพิ่มได้ ฉันหมายความว่า มันอาจจะเดาได้ว่าเราเป็นพี่น้องกัน ตามสถานที่ที่เราเคยอยู่ด้วยกัน การที่เราใช้นามสกุลร่วมกันและตัดสินใจว่า "โอ้ นั่นเป็นโฆษณาที่เหมาะสมที่จะวางเธอ"

ดรูว์: เป็นเรื่องที่น่าวิตก จริงไหมที่คิดว่าเทคโนโลยีกำลังตัดสินใจเหล่านี้สำหรับเรา ซึ่งจริง ๆ แล้วส่งผลกระทบต่อผู้คนที่อาจในตัวอย่างนี้เป็นช่วงเวลาที่อ่อนไหวหรือเปราะบาง

ลอร่า คัลแบ็ก: ใช่ เราว่ามันน่ากลัว หลายครั้งที่ผู้คนพูดว่า “โอ้ มันเกือบจะเหมือนกับว่าไมโครโฟนในโทรศัพท์หรือแล็ปท็อปของฉันฟังฉันอยู่ เพราะฉันเพิ่งจะสนทนาเกี่ยวกับผลิตภัณฑ์นี้ และทันใดนั้นมันก็ปรากฏในฟีดของฉันทุกที่” ฉันคิดว่าสิ่งที่น่ากลัวจริงๆ ก็คือ คนส่วนใหญ่เข้าถึงไมโครโฟนของคุณไม่ได้ แต่ข้อเท็จจริงคือพฤติกรรมอื่นๆ ของคุณ การค้นหาของคุณ การรู้ว่าคุณกำลังพูดกับใครเพราะอยู่ใกล้กัน และตำแหน่งของคุณบนอุปกรณ์ของคุณ มันสามารถเชื่อมโยงทุกสิ่งที่เราอาจไม่เชื่อมโยงกันเพื่อพูดว่า “โอ้ บางทีพวกเขาอาจจะสนใจผลิตภัณฑ์นี้เพราะพวกเขาอาจจะคิดและพูดถึงมันอยู่แล้ว”

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

Rachel An Drew: เร็วมาก ทันทีที่เรานึกขึ้นได้ว่าเราจะต้องเลื่อนซานฟรานซิสโกออกไป แน่นอน เรามีเวิร์กช็อป ทั้งตัวฉันและ Vitaly ก็จัดเวิร์กช็อปที่ smash and comp และพวกเขาขายหมดในซานฟรานซิสโก ทั้งคู่ การประชุมเชิงปฏิบัติการของเรา แน่นอน เรามีคนอื่นๆ มากมายที่มาจัดเวิร์กช็อปให้เรา คนที่เราทำงานด้วยมาเป็นเวลานาน และพวกเขาพบว่าเวิร์กชอปทั้งหมดของพวกเขา และสำหรับพวกเราที่ทำเวิร์กชอป พวกเขาได้ ส่วนสำคัญของรายได้ของเรา

Rachel An Drew: การพูดในที่สาธารณะ คุณไม่ได้รับเงินมากมายจากการพูดในที่สาธารณะ คนส่วนใหญ่ไม่ได้รับค่าจ้างมากนัก ไม่ใช่เมื่อพิจารณาถึงระยะเวลาที่ใช้ในการเขียนคำปราศรัยและอื่นๆ การประชุมเชิงปฏิบัติการมักจะเป็นวิธีที่ดีสำหรับผู้ที่สอนสิ่งนี้ได้ดีเพื่อหารายได้ จึงเป็นตัวแทนของรายได้ประชาชน ดังนั้นไม่เพียงแต่ต้องการตัวฉันเองและ Vitaly ก็สูญเสียการประชุมเชิงปฏิบัติการไปเมื่อต้นปีนี้ เรายังตระหนักด้วยว่าวิทยากร Smashing ของเราจำนวนมากพึ่งพาเวิร์กช็อปเหล่านั้นด้วย

Rachel An Drew: เราคิดว่า "ทำไมไม่ลองออนไลน์ดูล่ะ" ภายในไม่กี่วันหลังจากเหตุการณ์นั้นเกิดขึ้น เร็วมากจริงๆ เราตัดสินใจว่าฉันกับ Vitaly จะเป็นคนแรกที่ไม่สนใจอำนาจ แต่เมื่อเป็นของเรา และเราสามารถหาวิธีที่จะทำมันได้ เรายังมีการประชุมเชิงปฏิบัติการที่แตกต่างกันมาก Vitaly มีการทำงานร่วมกันมากกว่ามาก เขามีกิจกรรมกลุ่มและสิ่งต่างๆ ฉันสอนสไตล์ห้องเรียน ระหว่างเรา เราคิดว่า "อืม เรากำลังจะปิดฐานทั้งหมด" เราก็เลยคิดว่า มาดูกันว่าจะได้ผลหรือไม่” ดังนั้นเราจึงโฆษณาพวกเขา เราคิดออกแล้วว่าแต่ละครั้งใช้เวลานานแค่ไหน จากนั้นเราก็นั่งลงและพูดว่า “จริงๆ แล้วเวิร์กชอปออนไลน์หน้าตาเป็นอย่างไร? นี่คืออะไร?"

Drew: ฉันคิดว่าจากมุมมองทางเทคนิคในฐานะนักพัฒนาเว็บที่คิดทันทีว่าเราจะนำเสนอสิ่งนั้นได้อย่างไร ฉันหมายความว่าต้องมีแพลตฟอร์มที่แตกต่างกันมากมายที่คุณดู สิ่งที่คุณดูต่างกันคืออะไรและในที่สุด Smashing มาพร้อมกับอะไร

Rachel An Drew: ดังนั้นเราจึงได้ดูสิ่งต่าง ๆ ทั้งหมดแล้วและเรายังคงอยู่ในกระบวนการทำเช่นนั้น เรากำลังใช้การซูมอยู่ในขณะนี้ เหตุผลที่เราใช้ Zoom คือการเข้าถึงได้ง่าย เป็นแพลตฟอร์มที่เข้าถึงได้มากที่สุด เห็นได้ชัดว่าเราไม่ต้องการคัดคนออกเพราะแพลตฟอร์มที่เราเลือก ฉันคิดว่าแพลตฟอร์มอื่นเริ่มดีขึ้นและผู้คนก็... ฉันคิดว่ามีหลายแพลตฟอร์มที่มีคนเข้ามาหาพวกเขาและพูดว่า "ใช่ คุณดูดีมาก แต่เราต้องการให้คุณสามารถเข้าถึงได้” ดังนั้นการซูมจึงเป็นวิธีที่ง่ายที่สุดสำหรับผู้ที่ใช้งานในขณะนี้” นั่นเป็นเหตุผลที่ว่าทำไมเราถึงได้ใช้มัน ฉันไม่รู้ว่าเราจะทำตลอดไป แต่นั่นคือสิ่งที่เรากำลังใช้อยู่ในขณะนี้ และมันใช้ได้ดีทีเดียวสำหรับวิธีการทำสิ่งนี้

ดรูว์: เมื่อการซูมเริ่มอ่อนล้าและโลกเริ่มปรับตัวให้เข้ากับสิ่งที่เรียกว่าปกติใหม่อย่างรวดเร็ว ฉันได้คุยกับฟิล สมิธว่าเทคโนโลยีสามารถช่วยเราตอบสนองต่อสถานการณ์อย่างเช่น โควิด-19 ได้อย่างไร สร้างแอป React Native, CardMedic ในเวลาเพียง 10 วัน ฉันถาม Phil ว่าเขาจะเลือกเทคโนโลยีที่ดีที่สุดสำหรับงานอย่างไรให้สมดุลกับเทคโนโลยีที่เขาคุ้นเคยและสามารถทำงานได้อย่างรวดเร็ว

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

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

Drew: เมื่อสถานที่ทำงานปิดตัวลงและพวกเราหลายคนปรับตัวให้เข้ากับการทำงานที่บ้าน ฉันได้พูดคุยกับ Ben Frain เกี่ยวกับการปรับพื้นที่ทำงานที่บ้านของคุณให้เป็นสถานที่ที่สะดวกสบายและมีประสิทธิผล จะไม่ส่งผลให้เกิดปัญหาสุขภาพร่างกายในระยะยาว ด้วยงบประมาณที่จำกัดสำหรับการจัดเตรียมที่บ้าน ฉันจึงถามเบ็นว่าเก้าอี้ที่ดีคือจุดเริ่มต้นที่ดีที่สุดหรือไม่

Ben Frain: นั่นคือคำแนะนำของฉัน ใช่. ฉันหมายถึง ฉันไม่สามารถอ้างได้ว่าเป็นผู้มีอำนาจในสิ่งเหล่านี้ แต่ดูเหมือนว่ามันอาจเป็นสิ่งที่สำคัญที่สุดเพียงอย่างเดียวที่คุณสามารถทำได้เพื่อทำให้ตัวเองสบายใจตลอดทั้งวัน คุณสามารถเริ่มต้นด้วยสิ่งที่ค่อนข้างแพง ฉันทำผิดพลาดแบบเดียวกัน และสุดท้ายก็ได้เก้าอี้สำนักงานขนาด 45 ปอนด์จาก Amazon และฉันไม่ได้ตระหนักว่ามันไม่ได้เอียงไปข้างหน้า ไม่ว่าคำที่ถูกต้องสำหรับสิ่งนั้นคืออะไร บนแกน สิ่งที่ฉันพบคือมันกำลังเจาะเข้าไปที่ใต้ต้นขาของฉัน ประมาณหลังเข่าของฉัน และฉันก็คิดว่า "ทำไมขาของฉันถึงตายหลังจากนั่งอยู่ในสิ่งนั้น 45 นาที"

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

Drew: และระยะทางไกลคือสิ่งที่เราได้รับ สิ่งอื่นที่อยู่ใกล้เคียงในระยะยาวคือ Drupal ในเดือนมิถุนายน ฉันได้พูดคุยกับ Angie Byron เกี่ยวกับการเปลี่ยนแปลงใน Drupal 9 20 ปีนับตั้งแต่เปิดตัวครั้งแรก Drupal มาไกลมาก ฉันถาม Angie ว่ากระบวนการอัปเกรดไซต์ Drupal ที่มีอยู่เป็นอย่างไรเมื่อย้ายไปที่ Drupal 9 และมีแนวโน้มว่าจะเป็นภาระใหญ่สำหรับผู้ที่มีไซต์ที่ทำงานยาวนานหรือไม่

Angie Byron: ฉันคิดว่าโดยพื้นฐานแล้วมีสามสถานการณ์ อย่างใดอย่างหนึ่งคือถ้าคุณใช้ Drupal 8 และทุกครั้งที่มี Drupal 8 รุ่นใหม่ออกมา คุณได้อัปเกรดเป็นเวอร์ชันใหม่ทันที และคุณเริ่มใช้ประโยชน์จากสิ่งใหม่ๆ เส้นทางของคุณจะไม่มีอะไรเลย คุณทำงานมาหมดแล้วและคุณก็สบายดี หากคุณย้ายไปที่ Drupal 8 สักระยะหนึ่งแล้ว และคุณยังไม่ได้ติดตามการเปลี่ยนแปลงของ BC ก็มีงานอีกเล็กน้อยสำหรับคุณ

แองจี้ ไบรอน: แน่นอนว่านี่เป็นการอัปเกรดที่ง่ายที่สุดในรอบกว่าทศวรรษของซอฟต์แวร์ของเรา และเรามีเครื่องมือต่างๆ มากมายที่จะช่วยคุณในเรื่องนี้ มีแดชบอร์ดที่แสดงโมดูลที่เกี่ยวข้องทั้งหมดและสถานการณ์ของ Drupal 9 คืออะไร มีเครื่องมืออัตโนมัติสำหรับตรวจสอบโค้ดของคุณ และตั้งค่าสถานะฟังก์ชันที่เลิกใช้แล้วที่คุณมี และยังมีเครื่องมือสำหรับการขึ้นและค้นหาโดยอัตโนมัติ "โอ้ นี่เป็นเวอร์ชันล่าสุดของโมดูล และ Drupal 9 พร้อมหรือยัง คุณควรไปดาวน์โหลด” สิ่งนั้น

Angie Byron: ดังนั้นจาก Drupal 8 ถึง 9 ฉันจะบอกว่าส่วนนั้นครอบคลุมได้ดีทีเดียว หากคุณมาจาก Drupal เวอร์ชันก่อนหน้า ให้พูดว่า Drupal 7 หรือต่ำกว่าเป็น Drupal 9 ซึ่งอาจดูซับซ้อนกว่าเล็กน้อย ท่ามกลางการเปลี่ยนแปลงที่เราทำใน Drupal 8 ตัวอย่างเช่น เราย้ายไปยัง PHP เชิงวัตถุทั้งหมด และเราเริ่มใช้รูปแบบการออกแบบที่พบในโครงการซอฟต์แวร์อื่น ๆ ซึ่งเป็นสิ่งที่ฉลาดจริงๆ ในการทำสถาปัตยกรรม แต่ทำได้ หมายความว่าถ้าคุณมีโค้ดที่กำหนดเองจำนวนมากในชีวิตเก่า ใน Drupal 9 คุณจะต้องหาทางเลือกอื่นสำหรับสิ่งนั้น

Angie Byron: Acquia เป็นผลิตภัณฑ์และการพัฒนาที่เรียกว่า Acquia Migration Accelerator ซึ่งมีเป้าหมายเพื่อแก้ปัญหานั้น โดยที่เรากำลังสร้างแอปพลิเคชันที่กำหนด React ที่ดี ซึ่งอ่านในข้อมูล Drupal 7 เก่าของคุณ สร้างข้อมูล Drupal 8 ที่เทียบเท่าสำหรับคุณ พร้อมกับโมดูลทั้งหมดที่คุณต้องการแมปนั้นกับโมดูล Drupal 7 เก่าของคุณ ซึ่งเป็นไปได้ที่จะลองและเร่งกระบวนการนั้นสักหน่อย เพราะเราต้องการให้แน่ใจว่าทุกคนที่ใช้เวอร์ชันเก่ากว่ายังคงสามารถข้ามไปยัง ระเบียบโลกใหม่ ที่ทุกคนอยู่ในเวอร์ชันเดียวกัน และเราทุกคนกำลังทำงานร่วมกัน

Angie Byron: นอกจากนี้ เรายังได้ขยาย Drupal 7… ชุมชนโอเพ่นซอร์สของ Drupal จุดจบชีวิตของพวกเขาใน Drupal 7 ในเดือนพฤศจิกายนปีหน้า อย่างไรก็ตาม ในปัจจุบันนี้ เราต้องหารือกันว่า COVID มีผลกระทบหรือไม่ แต่มีบริษัทหลายแห่งที่แตกต่างกัน และ Acquia เป็นหนึ่งในนั้นที่ให้การสนับสนุน Drupal 7 อย่างยาวนานเกินกว่านั้น จนถึงปี 2024 เป็นอย่างน้อย แบบนั้นทำให้คนที่อัปเกรดง่าย ๆ มีเวลาหนึ่งปีครึ่งในการดำเนินการ ผู้คนมีการอัพเกรดที่ง่ายกว่า มีเวลาสามปีครึ่งที่จะทำมันให้เสร็จหรือนานกว่านั้นหากต้องการ และเรากำลังพยายามอย่างเต็มที่เพื่อให้ทุกคนก้าวข้ามไปได้ และสร้างเครื่องมืออย่าง Acquia Migrate Accelerator เพื่อช่วยเร่งกระบวนการ

Drew: Learning React เป็นหัวข้อของการสนทนากับ Mina Markham มินะและฉันต่างก็อยู่ในตำแหน่งที่จะเรียนรู้ React เป็นครั้งแรก เมื่อไตร่ตรองว่าเฟรมเวิร์กที่มีภาระเช่น React วางไว้บนเบราว์เซอร์มากเพียงใด ฉันถาม Mina ว่าการควบคุมในมือของลูกค้ามากขนาดนั้นเป็นความผิดพลาดหรือไม่

Mina Markham: ฉันอยากจะตอบตกลงโดยมีข้อแม้ว่า อีกครั้ง ประสบการณ์ของฉันมีอยู่มากในเว็บไซต์แบบสแตติกส่วนใหญ่ ฉันไม่ได้พัฒนาผลิตภัณฑ์มากนัก บางทีในขอบเขตนั้น มันสมเหตุสมผลกว่า แต่จากมุมมองของฉัน ฉันรู้สึกว่าหลายครั้งที่เราใช้ขวานขวานเมื่อเราต้องการมีดทาเนย ฉันไม่รู้ว่าทำไมเราต้องใส่ทั้งหมดนี้ในเบราว์เซอร์ ทำงานหนักและกดดันลูกค้ามากเมื่อเราสามารถทำสิ่งต่างๆ ได้มาก... ฉันรู้สึกว่าเราสามารถทำสิ่งนี้ได้ง่ายกว่ามาก สิ่งหนึ่งที่ทำให้ฉันลังเลเล็กน้อยที่จะใช้ React หรือฉันพูดอย่างลังเล แต่สิ่งที่ฉันหมายถึงเมื่อมันทำให้ฉันโกรธทางอวัยวะภายใน และฉันคัดค้านอย่างแข็งขันคือตอนที่ฉันจะไปที่เว็บไซต์ และแท้จริงแล้วไม่มีอะไรจะแสดงผลเพราะ มีข้อผิดพลาดหนึ่งรายการหรือบางอย่างที่คล้ายคลึงกันจริง ๆ ทั้งหน้าเสียเพราะฟังก์ชันหนึ่งหยุดทำงาน

Mina Markham: มันทำให้ฉันรำคาญมากที่หลายครั้งมันเป็นวิธีการทั้งหมดหรือไม่มีเลย ครั้งหนึ่งที่ฉันพูดที่ AEA ในอดีตและที่อื่นๆ ในอดีตคือการพูดคุยเกี่ยวกับวิธีเพิ่มการปรับปรุงที่ก้าวหน้า ไม่ใช่แค่การพัฒนาของคุณ แต่ยังรวมถึงทิศทางศิลปะและการออกแบบไซต์ที่ใหญ่ขึ้นด้วย ฉันจะยกตัวอย่างเฉพาะของเว็บไซต์ที่ไม่ได้ทำการเพิ่มประสิทธิภาพแบบก้าวหน้าหรือการเสื่อมคุณภาพใดๆ อาจเป็นเพราะคุณมี JavaScript ที่ทำงานอยู่ในเบราว์เซอร์ หรือคุณไม่ได้อะไรเลย มันจะเป็นเว็บไซต์ธรรมดาๆ ที่แสดงข้อมูลเกี่ยวกับประวัติของการออกแบบเว็บ ซึ่งเป็นหนึ่งในเว็บไซต์ที่พูดถึงจริงๆ ประวัติของการออกแบบเว็บตั้งแต่ปี 1990 จนถึงปัจจุบัน มันเป็นเว็บไซต์ที่สวยงามพร้อมไทม์ไลน์ แอนิเมชั่นของสิ่งต่างๆ มากมาย แต่ก็สามารถแสดงผลแบบคงที่ได้ด้วยรายการเพียงอย่างเดียว มีขั้นตอนต่างๆ ระหว่างการไม่แสดงอะไรเลยและแสดงให้เห็นว่าประสบการณ์ที่ได้รับการปรับปรุงอย่างสวยงามซึ่งฉันคิดว่าหายไปเนื่องจากวิธีที่เราเข้าใกล้การพัฒนาเว็บสมัยใหม่ในขณะนี้

Drew: ฉันได้คุยกับ Andy Bell เกี่ยวกับ CUBE CSS ซึ่งเป็นวิธีการจัดแต่งทรงผมในลักษณะของ BEM, SMACSS และ OOCSS แนวทาง CSS จำนวนมากพยายามที่จะทำงานกับคุณสมบัติตามธรรมชาติของ CSS เช่น แบบเรียงซ้อน CUBE ยอมรับพฤติกรรมนั้นเป็นอย่างมาก นี่แอนดี้

Andy Bell: การเปรียบเทียบที่ดีสำหรับมันคือ SCSS เช่น Sass เป็นส่วนขยายของภาษา CSS ตามธรรมชาติใช่ไหม คุณยังคงถูกต้องใน CSS ดังนั้น CUBE CSS จึงเป็นแบบนั้น ดังนั้นจึงเป็นส่วนขยายของ CSS ดังนั้นเราควรเขียน CSS เหมือนเดิม อย่างที่ CSS ควร… ก็ควรจะเขียน บอกตามตรงว่าควรจะเขียนอย่างไร ชื่อให้มันไป Cascading สไตล์ชีต ดังนั้นมันจึงกลับมาเป็นเหมือนเดิมอีกครั้ง เพราะสิ่งที่ฉันพบคือฉันได้ลดระดับลงมาจนถึงระดับการปรับให้เหมาะสมระดับจุลภาค ฉันเคยลงไปบนเส้นทางที่ฉันเห็นคนจำนวนมากลงไปเมื่อเร็ว ๆ นี้โดยที่... ฉันได้กล่าวถึงสิ่งนี้ในบทความเช่นกัน ที่ฉันเห็น... มีหลักฐานบางอย่างเกี่ยวกับมันเมื่อเร็ว ๆ นี้ ฉันพบว่ามีคนสร้างส่วนประกอบสเปเซอร์และอะไรทำนองนั้น และฉันเข้าใจปัญหานั้นดี ฉันเคยอยู่ในสถานการณ์นั้น

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

Andy Bell: ตอนนี้เรามีของอย่าง Grid และ Flexbox ที่ทำให้สำเร็จมากขึ้น และคุณสามารถใส่ทุกอย่างที่คุณต้องการลงในโครงร่างโครงกระดูกได้ มันไม่สำคัญ จากนั้นคอมโพเนนต์ควรทำงานตามที่คุณต้องการ โดยมีหรือไม่มีการสืบค้นคอนเทนเนอร์

Drew: Gatsby เป็นหัวข้อสนทนาของฉันกับ Marcy Sutton แม้ว่าโปรแกรมสร้างเว็บไซต์แบบสแตติกส่วนใหญ่จะเป็นแบบไม่เชื่อเรื่องพระเจ้าของส่วนหน้า Gatsby ใช้ React ดังนั้นคุณจึงลงเอยด้วยโค้ด Gatsby ที่ทำงานเป็นส่วนหนึ่งของประสบการณ์การใช้งานเว็บขั้นสุดท้ายของคุณ ฉันถามมาร์ซี่ว่าโค้ดนั้นคืออะไรและมีฟังก์ชันอะไรบ้าง

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

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

ดรูว์: เมื่อฉันคิดว่าเครื่องมือสร้างไซต์แบบคงที่ทำงานอย่างไร ฉันกำลังคิดถึงเนื้อหาในไฟล์มาร์กดาวน์ และตัวสร้างทำงานข้ามเนื้อหานั้นและรวมเข้ากับเทมเพลต และสร้างไฟล์ HTML หลายสิบ แสน ไฟล์ซึ่งเป็น หน้าเว็บไซต์ของคุณ เมื่อฉันนึกถึงไซต์หรือแอป React ฉันกำลังคิดถึงประสบการณ์หน้าเดียวมากขึ้น ซึ่งอินเทอร์เฟซถูกสร้างขึ้นโดย React ทันที คุณกำลังพูดว่า Gatsby ทำทั้งสองอย่าง? มันคือการสร้างทุกหน้าและยังเสริมด้วย JavaScript?

Marcy Sutton: ใช่แล้ว Gatsby จะใช้ Node.js ณ เวลาบิลด์ มันจะตรวจสอบส่วนประกอบ React ของคุณและคอมไพล์ให้เป็นไฟล์ HTML ซึ่งจริงๆ แล้ว ครั้งแรกที่ฉันดู Gatsby ฉันจะไม่ปิด JavaScript และแบบว่า “เอาล่ะ มีหน้าอื่นที่นี่หรือไม่ นี่คืออะไร?" ฉันมีความสุขมากที่ Gatsby ทำงานเป็นค่าเริ่มต้น มันจะสร้างไฟล์ที่สร้างขึ้นจากส่วนประกอบ React ของคุณ ซึ่งยอดเยี่ยมมาก

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

มาร์ซี ซัตตัน: ดังนั้นจึงเป็นทางเลือกที่พวกเขาสร้างเว็บไซต์ด้วยวิธีนั้น และเราประเมินอยู่เสมอว่ายังคงเป็นวิธีที่ดีที่สุดหรือไม่ เราต้องทำอะไรเพื่อให้ผู้ใช้ของเราได้รับสิ่งที่พวกเขาขอ? ดังนั้นเราจึงทำการสำรวจภายใน อย่างต่อเนื่องเพื่อให้แน่ใจว่า Gatsby ทำงานได้ดีที่สุดในการสร้างเว็บไซต์ ดังนั้นการรักษาขนาดบันเดิลให้เล็กลง และทำให้แน่ใจว่าสำหรับการแลกเปลี่ยนสิ่งที่เรากล่าวว่าเป็นโค้ดที่มีประสิทธิภาพพร้อม pre -fetching เรามีข้อมูลสำรองหรือไม่? นั่นคือสิ่งที่ฉันเป็นผู้สนับสนุนนักพัฒนาซอฟต์แวร์ที่ฉันสนใจมาก คือต้องแน่ใจว่าสิ่งที่เราบรรจุและรวมกลุ่มไว้บนเว็บไซต์นั้นเป็นสิ่งที่จำเป็นจริงๆ และจะทำให้เว็บไซต์ Gatsby ดีที่สุดเท่าที่จะทำได้

Drew: ในการพูดคุยกับ Chris Ferdinandi เมื่อเดือนกรกฎาคม ฉันถามว่าแนวทางปฏิบัติที่ดีที่สุดสมัยใหม่นั้นไม่ดีต่อเว็บหรือไม่ คริสสนับสนุนการเคลื่อนไหวที่เรียกว่า Lean Web และฉันถามเขาว่าเกิดอะไรขึ้น Here's Chris.

Chris Ferdinandi: When I look at the way we build for the web today, it feels a little bit like a bloated over-engineered mess. ฉันมาเชื่อว่าสิ่งที่เราคิดว่าเป็นแนวทางปฏิบัติที่ดีที่สุดในปัจจุบันอาจทำให้เว็บแย่ลงได้ The Lean Web is an approach to web development that is focused on simplicity, on performance, and the developer experience over… I'm sorry, not the developer experience, the user experience rather, over the developer experience and the ease of building things from a team perspective, which is what I think where we put a lot of focus today.

Chris Ferdinandi: As we'll probably get into in our conversation, I've actually come to find that a lot of these things we think of as improving the developer experience do so for a subset of developers but not necessarily everybody who's working on the thing you're building. So there's a whole bunch of kind of issues with that too that we can kind of dig into. แต่จริงๆ แล้ว Lean Web นั้นเกี่ยวกับการเน้นความเรียบง่ายและประสิทธิภาพสำหรับผู้ใช้ และจัดลำดับความสำคัญหรือให้ความสำคัญกับผู้ที่ใช้สิ่งที่เราสร้างมากกว่าเรา ผู้ที่สร้างมันขึ้นมา

Drew: In August, Chris Coyier joined us to talk about all things serverless. I asked him what sort of the tasks they were putting serverless to over at CodePen?

Chris Coyier: Well, there's a whole bunch of things. One of them is, I think, hopefully fairly obvious is, I need… The point of CodePen is that you write each HTML, CSS, and JavaScript in the browser, and it renders it in front of you, right? แต่คุณสามารถเลือกภาษาของตัวประมวลผลล่วงหน้าได้เช่นกัน สมมติว่าคุณชอบ Sass คุณเปิด Sass ใน CSS และคุณเขียน Sass มีบางอย่างต้องประมวลผล Sass ทุกวันนี้ Sass เขียนด้วยภาษา Dart หรืออะไรสักอย่าง Theoretically, you could do that in the client. แต่ไลบรารี่เหล่านี้ที่ทำการประมวลผลล่วงหน้านั้นค่อนข้างใหญ่ ฉันไม่คิดว่าฉันต้องการส่งไลบรารี Sass ทั้งหมดให้คุณ เพียงเพื่อเรียกใช้สิ่งนั้น I don't want to. That's not the right architecture for this necessarily. Maybe it is down the road. I mean, we could talk about offline crap, yada, yada, web workers.

Chris Coyier: There's a million architectural things we could do. แต่ตอนนี้มันทำงานอย่างไร มีแลมบ์ดา มันประมวลผล Sass มีงานเล็ก ๆ เล็ก ๆ เล็ก ๆ น้อย ๆ You send it this blob of Sass, and it sends you stuff back, which is the processed CSS, maybe a site map, whatever. It has one tiny little job, and we probably pay for that lambda like four cents or something. Because lambdas are just incredibly cheap, and you can hammer it too. คุณไม่ต้องกังวลเรื่องขนาด You just hit that thing as much as you want, and your bill will be astonishingly cheap.

Chris Coyier: There is moments where serverless starts to cross that line of being too expensive. I don't know what that is. I'm not that master of stuff like that. But generally, any serverless stuff we do, we basically all nearly count as free, because it's that cheap. แต่มีหนึ่งสำหรับ Sass มีหนึ่งสำหรับน้อย มีหนึ่งสำหรับ Babbel มีหนึ่งสำหรับ TypeScript มีอันหนึ่งสำหรับ... ทั้งหมดนี้เป็นแลมบ์ดาส่วนบุคคลที่เราดำเนินการ Here's some code, give it to the lambda. It comes back, and we do whatever we're going to do with it. แต่เราใช้มันเพื่ออะไรมากกว่านั้น แม้กระทั่งเมื่อเร็วๆ นี้

Chris Coyier: Here's an example. ปากกาทุกอันบน CodePen มีภาพหน้าจอ แบบนั้นก็เจ๋งใช่มั้ยล่ะ? So the people make a thing, and then we need a PNG or a JPEG, or something of it, so that we can… that way when you tweet it, you get the little preview of it. หากคุณแชร์ใน Slack คุณจะได้ดูตัวอย่างเล็กน้อย We use it on the website itself to render… Instead of an iframe, if we could detect that the Pen isn't animated, because an iframe's image is much lighter, so why not use the image? มันไม่เคลื่อนไหวอยู่แล้ว เพียงแค่ประสิทธิภาพที่เพิ่มขึ้นเช่นนั้น

Chris Coyier: So each of those screenshots has a URL to it, obviously. We've architected it so that that URL is actually a serverless function. มันเป็นคนงาน So if that URL gets hit, we can really quickly check if we've already taken that screenshot or not. That's actually enabled by CloudFlare Workers, because CloudFlare Workers are not just a serverless function, but they have a data store too. They have this thing called key-value store. So the ID of that, we can just check really quick, and it'll be, “True or false, do you have it or not?”

Chris Coyier: If it's got it, it serves it, and it serves it over CloudFlare, which is super fast to begin with and then gives you all this ability too because it's an image CDN, you can say, “Well, serve it in the optimal format. ทำหน้าที่เป็นมิติเหล่านี้” ฉันไม่ต้องสร้างภาพในมิติเหล่านั้น You just put the dimensions in the URL, and it comes back as that size, magically.

Drew: I talked to Next.js co-creator, Guillermo Rauch about the features on offer in Next.js and asked about its automated code splitting functionality. As the size of our JavaScript bundles can have quite an impact on performance, I was interested to know if Next had ways to tackle that. Here's Guillermo.

Guillermo Rauch: Yeah. Your observation is 100% right. So one of the biggest things with the web and one of the biggest weights on the web is JavaScript. Just like different materials have different densities and weights, irrespective of the actual physical volume, JavaScript tends to be a very dense, heavy element. Even small amounts of JavaScript compared to, for example, images that can be processed asynchronously and off the main thread, JavaScript tends to be particularly bothersome.

Guillermo Rauch: So Next.js has invested a tremendous amount of effort into automatically optimizing your bundles. So the first one that was my first intuition when I first sort of came up with the idea for Next.js was, okay, you're going to define, for example, 10 routes. In the Next.js world you create a pages directory, and you drop your files in there, index.js, about.js, settings.js, dashboard.js, terms-of-service.js, signup.js, login.js. สิ่งเหล่านี้กลายเป็นจุดเริ่มต้นสู่แอปพลิเคชันของคุณซึ่งคุณสามารถแชร์ผ่านสื่อทุกประเภท

Guillermo Rauch: When you enter those, we want to give you JS that is relevant for that page, first and foremost, and then perhaps a common bundle so that subsequent navigations within the system are very snappy. Next.js ซึ่งดีมาก ดีมาก ดึงข้อมูลหน้าที่เหลือล่วงหน้าที่เชื่อมต่อกับจุดเริ่มต้นนั้นล่วงหน้าโดยอัตโนมัติ ทำให้รู้สึกเหมือนเป็นแอปพลิเคชันหน้าเดียว So a lot of people say like, “Why not just use Create React app if I know that I have maybe a couple routes?” I always tell them, “Well, look. You can define those as pages, and because Next.js will automatically pre-fetch ones that are connected, you end up getting your single-page application, but it's better optimized with regards to that initial paint, that initial entry point.”

Drew: In September, I had the pleasure of talking to Cassie Evans about SVG animation. We talked about the approachability of SVG for developers who are already familiar with HTML. Here's Cassie.

Cassie Evans: I think that that's what I love the most about SVG is I'm really into creative coding and also teaching people, and I found that teaching people who are more of a creative leaning, they sometimes get a little thrown off when you immediately jump in with JavaScript or Python or something like that for creative coding. But without fail, I've managed to get anyone that I taught on board with SVG because there some really approachable entry points because it does look like HTML.

Cassie Evans: So you can give someone with an understanding of HTML and how to build websites SVG, and it looks the same, but it's the graphics instead of documents, and then you can animate that with CSS to start off with, which is also a little bit more comfortable, and then you can kind of progress to animating it with JavaScript. So it's a really good learning curve.

Drew: Of course, it can be dynamic. It's not just a case of creating motion. You can actually make the properties of it dynamic. So one of the interesting things I've seen SVG used for, and it's a grand term, but data visualization, dataviz, and drawing graphs and charts and of course things like dashboards that we seem to have everywhere these days. SVG is sort of perfect for that, isn't it?

Cassie Evans: Yes, definitely. SVG is great for dataviz. All the way from kind of small dataviz up to D3 which is very well known dataviz library that uses SVG under the hood. But you could also just, if you've got a little bit of data that you wanted to show on a web page, you could create a chart in a graphics editing program, and then you could just use JavaScript to change those values and kind of change how your graph looks. So you don't have to go all in with a massive database library. You can kind of just start off small.

Drew: The Jamstack framework, RedwoodJS was the topic of conversation with Anthony Campolo. I asked Anthony what it meant to be a full-stack Jamstack framework in practical terms.

Anthony Campolo: Yeah, it's pushing the boundaries of what a Jamstack application can be. So by calling it full-stack Jamstack, it's about, how do we go beyond just the front end to having the same sort of deployment paradigm of just get pushed, getting your whole code deployed? How do we get that but also with our back end and have it all connected?

Drew: Vue.js version three was released in October, and I caught up with Natalia Tepluhina from the Vue core team. Discussing the new version, I was curious if the major version bump was just a result of a few backward incompatible modifications or if this was a very clear revisiting of Vue to make deeper changes to the framework.

Natalia Tepluhina: No. I think it was an idea to create a new version due to a few very important things. อย่างแรกเลย มีแรงจูงใจที่จะเปลี่ยนปฏิกิริยา Previous one was built upon Object.defineProperty, and it had a few caveats. They're all documented, but still, even if you document something that people shouldn't do, they will do it anyway, and you would need to point them to the documentation. Nobody reads documentation, by the way. For some reason, it just happens. Until you point people out, it doesn't exist in docs, it does. แต่โอเค เราจะสอนคุณต่อไป

Natalia Tepluhina: So reactivity was one of the things. Performance was the next. Vue 2 still had and has not the worst performance, but we had a few ideas about how to make Vue faster, and also, there was one pain point for a particular part of our, let's say audience, people that use Vue. มันคือ TypeScript Vue 2 internally was written in Flow, which is still strongly typed one, but typing with TypeScript were a real nightmare especially if you were working with our state management Vuex.

Natalia Tepluhina: นี่เป็นส่วนสำคัญอีกครั้ง สิ่งสุดท้ายคือเราพลาดฟังก์ชันการทำงานของตรรกะนามธรรม ในแง่ของไม่ใช่ส่วนประกอบ แต่เป็นส่วนตรรกะที่ประกอบได้ เช่น ตัวช่วยฟังก์ชัน และอื่นๆ แต่ควรรวมกิจกรรมของ Vue ไว้ด้วย ตัวอย่างที่ดีที่นี่คือ React Hooks ใช่ไหม สิ่งเหล่านี้ช่วยให้คุณสรุปส่วนต่าง ๆ ของฟังก์ชันการทำงาน และสิ่งนี้หายไปอย่างชัดเจนใน Vue ฉันรู้ว่าตอนนี้ดูเหมือนว่า "คุณขโมยคุณลักษณะจาก React" ไม่ได้ในความเป็นจริง ฉันเชื่อว่าแนวคิดการผสมเกสรข้ามพันธุ์เป็นส่วนที่ดีและดีในระบบนิเวศของเรา และยังช่วยให้นักพัฒนาสลับไปมาระหว่างสิ่งที่ชอบด้วยใช่ไหม ดังนั้นเราจึงทำงานเกี่ยวกับคุณสมบัติหลักเหล่านี้เพื่อสร้าง Vue 3 เป็นเวอร์ชันหลัก

Drew: ต่อจากนี้ไป เราได้เจาะลึกใน TypeScript กับ Stefan Baumgartner เพื่อค้นหาว่าสิ่งนี้จะช่วยให้เราเขียนโค้ดได้ดีขึ้นโดยมีจุดบกพร่องน้อยลงได้อย่างไร เมื่อสังเกตแนวโน้มที่องค์กรต่างๆ จะเปลี่ยนพื้นฐานโค้ดของตนไปยัง JavaScript ทั้งหมด ฉันจึงถาม Stefan ว่า TypeScript เป็นสิ่งที่ทีมขนาดใหญ่กว่าจะได้รับประโยชน์จากมากกว่าตัวบุคคลหรือไม่

Stefan Baumgartner: ตอนนี้ฉันอยู่ในช่วงเปลี่ยนผ่านแบบเดียวกัน ดังนั้นเราจึงมีนักพัฒนา Java และ C++ จำนวนมากที่จะเขียน JavaScript จำนวนมากในอนาคต TypeScript อาจเป็นแนวทางสำหรับพื้นที่ที่น่ากลัวของภาษาโปรแกรมใหม่ JavaScript มีนิสัยใจคอมากมาย มีประวัติมากมาย และมีอคติมากมายหากคุณมาจากภาษาโปรแกรมอื่น ดังนั้น TypeScript จึงสามารถเป็นแนวทางได้เนื่องจากมีแนวคิดบางอย่างที่คุณคุ้นเคยในระบบประเภท

Stefan Baumgartner: แต่ฉันคิดว่า โดยเฉพาะอย่างยิ่งเมื่อคุณมีคนจำนวนมากที่ทำงานในฐานรหัสเดียวกันหรือคนจำนวนมากที่ต้องการทำงานร่วมกัน นี่อาจเป็นชั้นคำแนะนำเพิ่มเติมในโครงการของคุณ โดยที่คุณไม่ต้อง ในที่สุดก็ไม่มีเซอร์ไพรส์แย่ๆ แน่นอนว่าเทคโนโลยีไม่สามารถแก้ปัญหาด้านการสื่อสารได้ นี่ไม่ใช่สิ่งที่ TypeScript มีไว้สำหรับ แต่สามารถลดลงได้ หรือทำให้มีที่ว่างมากขึ้นสำหรับการอภิปรายที่ถูกต้อง หากคุณไม่ต้องพูดถึงสิ่งที่คุณคาดหวังจากฉันในโค้ดของคุณ แต่โค้ดของคุณควรทำอย่างไร หรือสิ่งที่คุณควรทำ ห้องสมุดทำอย่างไร?

Stefan Baumgartner: ฉันพูดเสมอว่าถ้าคุณเคยเขียน Code ให้คนอื่น หรือถ้าคุณเขียน Code กับคนจำนวนมาก หรือถ้าคุณแค่เขียน Code ให้ตัวเอง คุณต้องกลับมาดูในวันรุ่งขึ้น พิจารณา TypeScript เพราะมันอาจช่วยคุณได้ ระยะยาว. นี่ไม่ใช่แค่การลงทุนสำหรับโครงการถัดไปของสัปดาห์หน้า แต่เป็นการลงทุนสำหรับผู้ที่บอกว่า โอเค โดยเฉพาะอย่างยิ่งถ้าคุณมีโครงการระยะยาวเป็นเวลาเดือน สอง หรือปี เสนอสิ่งนั้นอย่างแน่นอน คุณจะไม่มีวันรู้ว่าคุณกำลังคิดอะไรอยู่เมื่อคุณเขียนโค้ดชิ้นเล็กๆ เมื่อหนึ่งปีที่แล้ว แต่ประเภทสามารถบอกใบ้ว่าคุณหมายถึงอะไร

Drew: ในเดือนพฤศจิกายน ฉันได้พูดคุยกับ David Darnes เกี่ยวกับเครื่องสร้างไซต์แบบสแตติก Eleventy เราได้พูดคุยเกี่ยวกับการสร้างแม่แบบและจำนวนเครื่องสร้างเว็บไซต์แบบคงที่ที่มีความคิดเห็นค่อนข้างมากเกี่ยวกับประเภทของแม่แบบที่คุณควรใช้ ฉันสงสัยว่าอีเลฟเว่นตี้มีความเชื่อแบบเดียวกันหรือไม่ นี่เดฟ

David Darnes: ไม่ ฉันต้องบอกว่ามันใกล้เคียงที่สุด เป็นมุมมองส่วนตัวเล็กน้อย แต่ฉันไม่สามารถมองเห็นกรอบการทำงานหรืออะไรก็ตามที่ไม่สามารถแสดงความเห็นได้ เพราะในการที่จะสร้างบางสิ่ง คุณต้องมีความเห็นเกี่ยวกับวิธีที่คุณต้องการทำบางสิ่ง มันเป็นชนิดของ oxymoron ฉันแน่ใจว่าผู้คนสามารถแก้ไขฉันได้ แต่ใช่ คุณสามารถเปลี่ยนไปใช้ภาษาเทมเพลตใดก็ได้ที่คุณรู้สึกสบายใจที่สุด ฉันหมายถึง เรากำลังพูดถึงภาษาที่คุณคุ้นเคย สิบเอ็ดสิบดึงดูดสิ่งนั้นในแง่ของภาษาเทมเพลตที่ใช้ใน HTML ของคุณ หรือแม้แต่ CSS ของคุณ หากคุณต้องการ

David Darnes: สำหรับฉัน ฉันเพิ่งไปที่ nunjucks เพราะ nunjucks เป็นภาษาเทมเพลตเริ่มต้นใน Eleventy นั่นหมายความว่าฉันสามารถใช้นามสกุล .html แบบดอท และปล่อยให้มันเป็นไปตามที่มันเป็น ตอนนี้ ฉันแค่จะทำให้คนอื่นสับสนมากขึ้นแล้วพูดว่า “คุณจะตั้งชื่อมันว่าอย่างไรก็ได้ คุณสามารถสนุกกับมันได้อย่างแท้จริง” แต่คุณสามารถใช้แฮนด์บาร์ได้ ฉันคิดว่าคุณสามารถใช้เทมเพลต JavaScript ปกติและทำซ้ำแบบนั้นได้ แฮนด์บาร์ค่อนข้างเป็นที่นิยมและเป็น Liquid เช่นกัน ฉันไม่สามารถคิดทั้งหมดออกจากหัวของฉัน แต่ถ้าคุณตั้งค่าทั้งหมดในการกำหนดค่า คุณสามารถเลือกได้ตามที่คุณต้องการ

David Darnes: ฉันคิดว่าฉันเป็นแฟนตัวยงของภาษาเทมเพลตโดยทั่วไป ไม่นานมานี้เองที่ฉันพบว่าคุณสามารถใช้กิ่งก้านใน WordPress ได้ และนั่นทำให้ฉันคิดมาก ฉันก็แบบ “โอ้ ขอบคุณพระเจ้า ฉันไม่ต้องจัดการกับ for loop ภายใน PHP” อีกครั้ง ฉันคิดว่าบางสิ่งบางอย่างที่สบายขึ้นและเข้าใจมากขึ้น อ่านง่ายขึ้นเช่นกัน ใช่เลย Eleventy มีตัวเลือกเทมเพลตที่แตกต่างกันมากมาย และควรดึงดูดผู้ที่พอใจกับเทมเพลตที่แตกต่างกันเหล่านั้น

Drew: ฉันได้พูดคุยกับ Leslie Cohn-Wein เกี่ยวกับวิธีที่ Netlify ใช้แพลตฟอร์มของตัวเองเพื่อสร้าง Netlify และวิธีที่ฟังก์ชัน Deploy Preview กลายเป็นแพลตฟอร์มการแสดงละครที่มีประสิทธิภาพสำหรับการเปลี่ยนแปลงส่วนหน้า

Leslie Cohn-Wein: บางทีส่วนที่ฉันชอบที่สุดในกระบวนการทั้งหมดนั้นก็คือความมหัศจรรย์ของ Deploy Previews ซึ่งเราดำเนินการผ่าน Netlify สิ่งที่เกิดขึ้นคือคุณกำลังทำงานใน GitHub คุณผลักดันการประชาสัมพันธ์ของคุณ ดังนั้นคุณจึงเปิด PR ของคุณใน GitHub และนั่นจะสร้างบิลด์ของ Deploy Preview ของแอปโดยอัตโนมัติ ดังนั้นเราจึงใช้ Deploy Previews ของแอปเพื่อทดสอบ เพื่อให้แน่ใจว่าทุกอย่างทำงานตามที่ควรจะเป็น เราทำการทดสอบ นั่นคือสิ่งที่เราใช้ sort of เพื่อยืนยันด้วยตนเองระหว่างการตรวจทานโค้ด ดังนั้นเราจึงมีการตั้งค่าการปรับใช้อย่างต่อเนื่องทั้งหมดนั้นจาก GitHub

Leslie Cohn-Wein: อีกสิ่งหนึ่งที่ยอดเยี่ยมที่เราได้ตั้งค่าไว้ก็คือ เรามีไซต์ Netlify สองแห่งที่ดึงมาจากที่เก็บข้อมูลเดียวกันกับที่แอปของเราอาศัยอยู่ ดังนั้นเราจึงมีทั้งแอพของเรา เรามีตัวอย่าง Storybook ที่มีส่วนประกอบ UI ของเราสำหรับแอป ดังนั้นเราจึงมีทั้งแอพของเรา เรามีส่วนประกอบ Storybook UI และโดยพื้นฐานแล้วเรามีไซต์ Netlify ที่แสดง Storybook UI ของเรา จากนั้นเรายังมีไซต์ที่สามที่เรียกใช้ตัววิเคราะห์ชุดข้อมูลของ webpack ดังนั้นจึงเป็น UI แบบภาพที่ให้คุณเห็นภาพแผนผังต้นไม้ของชุดแอปทั้งหมด และเราสามารถวัดขนาดของมันได้ และนี่เป็นเพียงการเตือนให้เราตรวจสอบอีกครั้งว่าทุกครั้งที่ปรับใช้แอปดำเนินไป เราสามารถตรวจดูให้แน่ใจว่าไม่ได้ทำอะไรแปลก ๆ กับขนาดบันเดิลของเราที่นั่น

Leslie Cohn-Wein: ดังนั้นไซต์ทั้งสามจึงถูกสร้างขึ้นในคำขอดึงแอปเดียว ดังนั้น คุณจะได้รับลิงก์ไปยังหน้าตัวอย่าง Deploy Previews โดยพื้นฐานแล้ว ของทั้ง Storybook ของแอปและโปรไฟล์ของแอปนั้นเพื่อให้เราตรวจสอบได้

Drew: ในเดือนธันวาคม ฉันได้พูดคุยกับ Chris Murphy เกี่ยวกับการออกแบบผลิตภัณฑ์และความหมายของธุรกิจที่จะต้องมุ่งเน้นที่การออกแบบ เราคุยกันว่าผู้ก่อตั้งแต่ละรายมุ่งเน้นด้านการออกแบบหรือไม่ รั่วไหลเข้าสู่ธุรกิจหรือไม่ และหากผลิตภัณฑ์นั้นเป็นส่วนขยายของบุคคลที่สร้างผลิตภัณฑ์โดยธรรมชาติ

คริส เมอร์ฟี: ฉันคิดว่านั่นเป็นคำถามที่ดีจริงๆ ดรูว์ และฉันคิดว่าคำตอบนั้นขึ้นอยู่กับมัน ฉันคิดว่ามันขึ้นอยู่กับบุคคลนั้น และมันขึ้นอยู่กับขนาดของบริษัท ถ้าคุณดูที่ Hiut Denim และฉันใช้ Hiut มากในการสอน นี่เป็นตัวอย่างที่ดีจริงๆ ของบริษัทที่ทำสิ่งหนึ่งได้ดี และนั่นคือกางเกงยีนส์แบบสายรัดของพวกเขา ฉันคิดว่าถ้าคุณดูอดีตของ David… David และ Clare เพราะพวกเขาเป็นหุ้นส่วนกัน ถ้าคุณดูที่บริษัทเดิมของ David Hieatt และ Clare Hieatt ซึ่งก็คือ Howies บริษัทนั้นเติบโตขึ้นอย่างมาก มีคนที่เกี่ยวข้องจำนวนมาก

Chris Murphy: เมื่อขนาดเริ่มคืบคลานเข้ามา การจับตาดูจุดสัมผัสเล็กๆ น้อยๆ ทั้งหมดที่มีความสำคัญในเส้นทางของลูกค้าจะกลายเป็นเรื่องยาก ฉันคิดว่ามันบ่งบอกจริงๆ ว่าเมื่อพวกเขาออกจาก Howies เพราะ Howies ถูกซื้อโดย… มันซับซ้อน ไปอ่านในเน็ตได้เลย แต่มันคือทิมเบอร์แลนด์ และทิมเบอร์แลนด์ถูกซื้อ และมีเรื่องราวทั้งหมดนี้

Chris Murphy: ฉันคิดว่ามันน่าสนใจจริงๆ ที่สิ่งที่พวกเขาสนใจในตอนนี้คือกางเกงยีนส์ แค่นั้นแหละ. พวกเขากำลังบอกเล่าเรื่องราวดีๆ เกี่ยวกับยีนส์ พวกเขายังบรรจุทุกอย่างไว้อย่างดีและกางเกงยีนส์เป็นเหมือนสื่อสำหรับเรื่องราวจริงๆ นี่คือสิ่งที่ฉันคิดว่า Drew กำลังจะกลายเป็นเรื่องสำคัญมากขึ้นเมื่อเราออกจากจุดสิ้นสุดของ COVID ซึ่งฉันหวังว่าเราจะออกมาอีกด้านหนึ่ง ทุกคนที่ทำกางเกงยีนส์เหล่านั้นจะได้รับค่าจ้างที่เหมาะสม ปัญหาอย่างหนึ่งที่ฉันมีในตอนนี้เมื่อมองดูโลกคือไม่ใช่ว่าทุกคนจะได้รับค่าจ้างที่เหมาะสม และฉันพบว่ามันค่อนข้างน่าเป็นห่วงในฐานะใครสักคน… ดูสิ ฉันอายุ 51 ปี ลูกชายของฉันอายุ 25, 24 ปี , 25, อะไรประมาณนั้น มันน่ากลัว. ฉันควรรู้เรื่องนี้ทั้งหมด เขาเป็นช่างภาพงานแต่งงาน เขาเป็นช่างภาพงานแต่งงานมาหนึ่งปีแล้ว ธุรกิจของเขาพังทลายลงอย่างสิ้นเชิงเพราะไม่มีใครแต่งงานในทันทีเพราะมันเป็นเรื่องยาก เขาไม่มีเงินเดือนเพราะเขาไม่มีหนังสือประกอบอาชีพอิสระเพียงพอที่จะได้รับการสนับสนุน

คริส เมอร์ฟี่: เขาตกลงไปในรอยแยก และยังมีคนอื่นๆ อีกมากที่ตกลงไปในรอยร้าว ฉันจะเถียงว่าเป็นปัญหาการออกแบบ ที่เราต้องมองว่าเป็นปัญหาการออกแบบ แต่ถ้าฉันดูประเด็นที่กว้างกว่านั้นของโควิด-19 และรัฐบาล และเรื่องทั้งหมดนี้โดยไม่ได้การเมืองมากเกินไป ฉันอ่านบทความในเดอะการ์เดียนเมื่อวานนี้เกี่ยวกับเพื่อนบ้านของแมตต์ แฮนค็อก และใครก็ตามที่ฟังอยู่ซึ่งไม่ได้มาจากสหราชอาณาจักรคือแมตต์ แฮนค็อก รมว.สาธารณสุข. เพื่อนบ้านของเขาที่กำลังทำธุรกิจ กำลังส่งข้อความหาเขาและขอคำแนะนำว่า “ฉันจะจัดหาผลิตภัณฑ์สำหรับโควิดนี้ได้อย่างไร” มีเรื่องอื้อฉาวมากมายเกี่ยวกับพรรคประชาธิปัตย์ นั่นคือสิ่งที่หนังสือพิมพ์เรียกว่า เพื่อนของเพื่อนรัฐมนตรีของรัฐบาลที่ดูเหมือนจะได้งานทำเพราะพวกเขารู้จักคนที่เหมาะสม

คริส เมอร์ฟี: ฉันเข้าใจความรู้สึกนี้ว่าเรากำลังจะไปถึงจุดสิ้นสุดของสิ่งนี้และเห็นสิ่งนี้… บุคคลเห็นแล้ว และพวกเขาคิดว่า "เอาละ เงินนี้จะไปไหน และผู้คนจะได้รับเงินอย่างถูกต้องหรือไม่ เสื้อยืด 1 ปอนด์จากร้าน X ราคาเท่าไหร่?” ฉันไม่ต้องการที่จะพูดถึงแบรนด์ใด ๆ แต่ทุกอย่างต้องชดใช้ และทุกอย่างที่ทำขึ้น คนต้องจ่ายเพื่อสร้างมันขึ้นมา ฉันคิดว่าผู้คนให้ความสนใจมากขึ้นเรื่อยๆ ผู้คนได้รับค่าตอบแทนอย่างยุติธรรมหรือไม่?

Drew: GraphQL เป็นหัวข้อของตอนสุดท้ายของปีเต็ม และฉันได้พูดคุยกับ Eve Porcello และถามว่า GraphQL เหมาะสมกับส่วนใดของการพัฒนา

อีฟ Porcello: ใช่ ชนิดของ GraphQL นั้นพอดีระหว่างส่วนหน้าและส่วนหลัง ดังนั้นจึงเป็นการอยู่ตรงกลางระหว่างคนทั้งสองและให้ประโยชน์มากมายแก่นักพัฒนาส่วนหน้าและนักพัฒนาส่วนหลัง หากคุณเป็นนักพัฒนาฟรอนต์เอนด์ คุณสามารถกำหนดข้อกำหนดด้านข้อมูลทั้งหมดของฟรอนต์เอนด์ได้ ดังนั้นหากคุณมีรายการส่วนประกอบ React จำนวนมาก ตัวอย่างเช่น คุณสามารถเขียนแบบสอบถาม และนั่นจะกำหนดฟิลด์ทั้งหมดที่คุณต้องการเพื่อเติมข้อมูลสำหรับหน้านั้น

Eve Porcello: ตอนนี้ ในส่วนแบ็คเอนด์ มันเป็นของตัวเองจริงๆ เพราะเราสามารถรวบรวมข้อมูลได้มากมายจากแหล่งต่างๆ มากมาย ดังนั้นเราจึงมีข้อมูลใน REST API และฐานข้อมูล และที่ต่างๆ เหล่านี้ และ GraphQL ได้จัดเตรียมเลเยอร์การประสานเล็กๆ น้อยๆ ที่ดีนี้ให้กับเรา เพื่อให้เข้าใจถึงความโกลาหลของข้อมูลทั้งหมดของเรา ดังนั้นมันจึงมีประโยชน์มากสำหรับทุกคนในกลุ่ม