นำสิ่งที่ดีที่สุดมาให้คุณ

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

น่าเสียดายที่ผลกระทบของ COVID-19 ยังคงแพร่หลายไปทั่วโลก ดังนั้นทีม Smashing จึงต้องทำการเปลี่ยนแปลงครั้งใหญ่ในแผนของเราในปีนี้ ดังที่ Rachel Andrew บรรณาธิการบริหารของ Smashing Magazine กล่าวไว้อย่างดี:

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

ในบันทึกย่อนั้น เราได้ตัดสินใจใช้วันที่ทั้งหมดในปี 2020 ทางออนไลน์ เราหวังว่าจะได้พบคุณที่นั่น!

เราสามารถทำสิ่งที่ยอดเยี่ยมเหล่านี้ได้เนื่องจากการสนับสนุนของคุณ และเรารู้สึกซาบซึ้งอย่างแท้จริงและจริงใจ

เวิร์กช็อปเชิงโต้ตอบเพื่อช่วยเพิ่มทักษะของคุณ

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

เราได้ทำอย่างดีที่สุดเพื่อให้คุณมีการประชุมเชิงปฏิบัติการที่ผสมผสานทั้งการออกแบบและส่วนหน้า:

เอนหลัง ผ่อนคลาย และปรับแต่ง!

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

มีหัวข้อที่คุณชอบที่จะได้ยินและเรียนรู้เพิ่มเติมหรือไม่? หรือบางทีคุณหรือคนที่คุณรู้จักต้องการพูดคุยเกี่ยวกับเว็บและหัวข้อเกี่ยวกับการออกแบบที่เป็นที่รักของคุณ? เราชอบที่จะได้ยินจากคุณ! โปรดติดต่อเราทาง Twitter และเราจะพยายามติดต่อกลับโดยเร็วที่สุด

การเพิ่มล่าสุดของเราในชั้นวางหนังสือที่ยอดเยี่ยม

เราจัดส่งชุดแรกของ Click! วิธีส่งเสริมการคลิกโดยไม่ใช้กลเม็ด Shady Tricks เมื่อไม่กี่สัปดาห์ก่อน และหากคุณสั่งซื้อหนังสือล่วงหน้าล่วงหน้า คุณจะต้องได้รับบันทึกส่วนตัวจากผู้เขียนเอง Paul Boag การติดตามปฏิกิริยาที่ปรากฏขึ้นบนโซเชียลมีเดียเป็นเรื่องสนุก — Ari Stiles แบ่งปันทวีตในโพสต์ล่าสุดของเธอ

คลิก! มาในช่วงเวลาที่พวกเราหลายคนต้องการ "เขยิบ" ที่สร้างสรรค์ หนังสือเล่มนี้เป็นแรงบันดาลใจให้เราคิดต่างเกี่ยวกับกิจวัตรของเราในการสร้างเว็บไซต์และบริการออนไลน์ สิ่งที่ใช้ได้ผลและไม่ได้ผล คุณสามารถข้ามไปที่สารบัญ หรือหากคุณต้องการดูก่อน คุณสามารถดาวน์โหลดข้อความที่ตัดตอนมา PDF ฟรีทันที (17.3 MB) มีความสุขในการอ่าน!

หัวข้อที่กำลังมาแรงในนิตยสาร Smashing

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

• “CSS News กรกฎาคม 2020,” Rachel Andrew
• “บทนำสู่ Context API ของ React” Yusuff Faruq
• “วิธีการส่งข้อมูลระหว่างส่วนประกอบใน Vue.js” Matt Maribojoc
• “การตั้งค่าความสูงและความกว้างของรูปภาพเป็นสิ่งสำคัญอีกครั้ง” Barry Pollard
• “ความแตกต่างระหว่างไซต์ที่สร้างแบบคงที่และแอปที่แสดงผลทางฝั่งเซิร์ฟเวอร์” Timi Omoyeni

เลือกที่ดีที่สุดจากจดหมายข่าวของเรา

พูดตามตรง: ทุกสัปดาห์ที่สอง เราดิ้นรนกับการรักษาปัญหาจดหมายข่าว Smashing ให้มีความยาวปานกลาง — มีเพียง คน ที่มีความสามารถมากมายที่ทำงานในโครงการที่ยอดเยี่ยม! ขอชื่นชมทุกคนที่เกี่ยวข้อง!

สนใจเป็นสปอนเซอร์? อย่าลังเลที่จะตรวจสอบตัวเลือกการเป็นหุ้นส่วนของเราและติดต่อกับทีมได้ตลอดเวลา - พวกเขาจะติดต่อกลับหาคุณทันที

PS ขอบคุณมากสำหรับ Cosima Mielke สำหรับการเขียนและเตรียมโพสต์เหล่านี้!

แบบอักษรฟรีพร้อมบุคลิกภาพ

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

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

การสร้างแบบอักษร

การแอบดูเบื้องหลังการทำงานของทีมออกแบบอื่นๆ และคิดเป็นเรื่องที่ชาญฉลาดเสมอ Chris Bettig ผู้อำนวยการฝ่ายออกแบบของ YouTube ได้แชร์กรณีศึกษาที่น่าสนใจเกี่ยวกับวิธีการที่เขาและทีมสร้าง YouTube Sans ซึ่งเป็นแบบอักษรที่ออกแบบเฉพาะสำหรับใช้เป็นแบรนด์แอมบาสเดอร์

ก่อนที่แบบอักษรใหม่จะปรากฏ YouTube ได้ใช้ปุ่มเล่นที่เป็นสัญลักษณ์และเวอร์ชันแก้ไขของ Alternate Gothic สำหรับเครื่องหมายคำ อย่างไรก็ตาม ตามที่ Chris Bettig อธิบาย ไม่มีคำแนะนำในการพิมพ์ที่ชัดเจน ออกแบบมาเพื่อทำงานทั่วทั้งผลิตภัณฑ์ของ YouTube และสะท้อนถึงโลกทัศน์ของแพลตฟอร์มตลอดจนชุมชนของครีเอเตอร์ที่ใช้ YouTube Sans ได้เปลี่ยนแปลงสิ่งนั้น สำหรับข้อมูลเชิงลึกเพิ่มเติมว่าฟอนต์มีชีวิตขึ้นมาได้อย่างไรและความท้าทายที่ทีมออกแบบต้องเผชิญระหว่างทาง โปรดตรวจสอบกรณีศึกษา

การจัดการกับการแสดงผลแบบอักษรของเบราว์เซอร์ไม่สอดคล้องกัน

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

เพื่อหาสาเหตุของความไม่สอดคล้องกันในการเรนเดอร์เหล่านี้ สเตฟานีจึงเริ่มแยกแยะความแตกต่างระหว่างสไตล์ชีตของตัวแทนผู้ใช้และคุณสมบัติ CSS ที่คำนวณ และในไม่ช้าก็พบว่าตัวเองตกหลุมกระต่าย โดยเปรียบเทียบพฤติกรรมที่สับสนกับ Chrome, Firefox และ Edge ไม่มีคำตอบง่ายๆ สำหรับคำถามที่ว่าเบราว์เซอร์ใดจัดการสไตล์ได้อย่างถูกต้องจริง ๆ แต่หลังจากทำการทดสอบหลายครั้ง สเตฟานีค้นพบวิธีป้องกันไม่ให้เบราว์เซอร์ตัดสินใจกำหนดน้ำหนักแบบอักษรที่เป็นตัวหนา: คุณต้องกำหนดน้ำหนักแบบอักษรอย่างชัดเจนด้วย ค่าตัวเลข รายละเอียดเล็กๆ น้อยๆ ที่สร้างความแตกต่างอย่างมีนัยสำคัญ

การวัดประสิทธิภาพอย่างต่อเนื่องเป็นเรื่องง่าย

เมื่อเปิดตัวเว็บไซต์ เป็นเรื่องปกติที่จะทำการทดสอบประสิทธิภาพเพื่อให้แน่ใจว่าไซต์นั้นรวดเร็วและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด แต่เราจะรักษาให้เร็วที่สุดได้อย่างไรเมื่อมีการปรับใช้เกิดขึ้นทุกวัน Speedlify คือคำตอบของ Zach Leatherman สำหรับคำถามนี้

Speedlify เป็นไซต์คงที่ซึ่งเผยแพร่เป็นพื้นที่เก็บข้อมูลโอเพนซอร์สที่ใช้ Lighthouse และ Axe เพื่อวัดประสิทธิภาพอย่างต่อเนื่องและเผยแพร่สถิติประสิทธิภาพ - สูงสุดชั่วโมงละครั้งโดยอัตโนมัติวันละครั้ง คุณสามารถเรียกใช้ด้วยตนเอง บนคอมพิวเตอร์ของคุณ และตรวจสอบข้อมูลใน repo ของคุณ หรือหากคุณใช้ Netlify ก็สามารถเรียกใช้ได้ในตัวเองทั้งหมด วิธีที่ยอดเยี่ยมในการรักษาประสิทธิภาพให้อยู่ในสายตาเสมอ

กายวิภาคของการแจ้งเตือนแบบพุช

การแจ้งเตือนแบบพุชเปิดตัวครั้งแรกบน iOS เมื่อปี 2552 และมีการพุชทางเว็บตามมาในอีกห้าปีต่อมา ทุกวันนี้ รองรับแพลตฟอร์มและเบราว์เซอร์มากมาย — ตั้งแต่ iOS และ Android ไปจนถึง Amazon Echo, Windows, Chrome, Safari, Firefox, Edge และอื่นๆ แพลตฟอร์มเหล่านี้แต่ละอันจะแตกต่างกันเล็กน้อย ซึ่งทำให้ยากสำหรับนักออกแบบที่จะสรุปว่าการแจ้งเตือนแบบพุชเป็นอย่างไร

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

การแก้ไขคีย์เฟรมแอนิเมชั่นสด

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

เครื่องมือนี้ให้คุณสร้างแอนิเมชั่นคีย์เฟรม CSS ด้วยตัวแก้ไขไทม์ไลน์แบบภาพ คุณสามารถเพิ่มขั้นตอนในไทม์ไลน์ ใช้ UI แบบธรรมดาเพื่อปรับคุณสมบัติ CSS ที่คุณต้องการให้องค์ประกอบเป้าหมายมีในแต่ละขั้นตอน แล้วตัวอย่างภาพเคลื่อนไหวจะอัปเดตแบบสด เมื่อคุณพอใจกับผลลัพธ์แล้ว คุณสามารถคัดลอก CSS และนำไปใช้ในโครงการของคุณได้ทันที Keyframe.app มีให้ใช้งานเป็นส่วนขยายของ Chrome ด้วย ตัวช่วยประหยัดเวลาที่แท้จริง

การกำหนดเครื่องมือสร้างที่ดีที่สุดสำหรับโครงการของคุณ

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

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

เปลี่ยนภาพแบนๆ ให้เป็นโปสเตอร์พับ

การทดลองเขียนโค้ดบางอย่างทำให้นักพัฒนาซอฟต์แวร์ที่มีประสบการณ์มากที่สุดต้องตกตะลึง และแม้ว่าจะเป็นสิ่งที่คุณจะไม่ใช้ทุกวัน แต่ก็เป็นแรงบันดาลใจเสมอที่เห็นนักพัฒนาซอฟต์แวร์คิดนอกกรอบและสำรวจสิ่งที่เป็นไปได้ด้วยเทคโนโลยีเว็บ เอฟเฟกต์โปสเตอร์แบบพับที่ Lynn Fisher สร้างขึ้นด้วย CSS ล้วนเป็นการทดลองดังกล่าว

ด้วย CSS เล็กน้อย Lynn ทำให้รูปภาพทั่วไปของคุณดูเหมือนโปสเตอร์พับ โดยมีรอยพับกระดาษทับรูปภาพในแนวนอนและแนวตั้ง และเงาพื้นหลังที่ทำให้โปสเตอร์มีเอฟเฟกต์ 3 มิติ โครงการเล็กๆ ที่ยอดเยี่ยมที่แสดงสิ่งที่สามารถทำได้ด้วย CSS อย่างสวยงาม

สร้างสมดุลระหว่างองค์ประกอบที่เลือกดั้งเดิมและกำหนดเอง

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

แนวคิดคือการเลือก "ไฮบริด" ซึ่งหมายความว่าเป็นทั้งตัวเลือกแบบเนทีฟ <select> และการเลือกแบบอื่นที่มีสไตล์ในรูปแบบการออกแบบเดียว ผู้ใช้เทคโนโลยีอำนวยความสะดวกจะได้รับองค์ประกอบ <select> ดั้งเดิม แต่เมื่อใช้เมาส์ วิธีการจะขึ้นอยู่กับเวอร์ชันที่มีสไตล์ซึ่งสร้างขึ้นเพื่อทำหน้าที่เป็นองค์ประกอบที่เลือก ฉลาด!

การวางตำแหน่งไฮบริดด้วยตัวแปร CSS และ max()

แนวคิดบางอย่างกำหนดให้คุณต้องคิดนอกกรอบและสำรวจเส้นทางใหม่ๆ เพื่อให้เกิดขึ้น ลองนึกภาพตัวอย่างนี้: คุณต้องการให้มีการนำทางเพจที่ด้านข้าง ด้านขวาใต้ส่วนหัวเมื่อเลื่อนขึ้นไปด้านบนสุด มันควรจะเลื่อนไปพร้อมกับหน้าเมื่อส่วนหัวไม่อยู่ในมุมมองและอยู่ที่ด้านบนสุดสำหรับการเลื่อนที่เหลือ นั่นคือสิ่งที่ Lea Verou ต้องการบรรลุในโครงการล่าสุด

คุณอาจพูดได้ว่าเป็นกรณีของ position: sticky แต่มีแนวทางที่ละเอียดกว่าในการทำงานให้เสร็จดังที่ Lea แสดง โดยไม่ต้องใช้จาวาสคริปต์ โซลูชันของเธอใช้ตัวแปร CSS และฟังก์ชัน max() ใหม่ที่ช่วยให้คุณใช้ข้อจำกัดต่ำสุด/สูงสุดกับคุณสมบัติ CSS ทางเลือกช่วยในเบราว์เซอร์ที่ยังไม่รองรับ max() ฉลาด!

เรื่องราวจากด้านมืดของเว็บ

แฮ็กเกอร์, การละเมิดข้อมูล, กิจกรรมของรัฐบาลในเงามืด, อาชญากรรมทางอินเทอร์เน็ต, การแฮ็กข้อมูล — สิ่งต่างๆ มากมายเกิดขึ้นในด้านมืดของเว็บ แต่ใครคือคนที่อยู่เบื้องหลังกิจกรรมเหล่านี้? แล้ว “ภารกิจ” ของพวกเขาคืออะไร? Jack Rhysider ได้ทุ่มเทพอดคาสต์ให้กับเรื่องราวที่เกิดขึ้นในส่วนที่ซ่อนอยู่ของเครือข่าย: Darknet Diaries

ไม่ว่าจะเป็นเรื่องราวของนักพนันที่พบข้อผิดพลาดในเครื่องวิดีโอโป๊กเกอร์ที่ทำให้เขาได้รับเงินจำนวนมาก เรื่องราวของผู้ทดสอบการเจาะทะลุเข้าไปในอาคาร หรือรัฐชาติลักลอบเข้าบริษัทในประเทศอื่น Darknet Diaries เต็มไปด้วยข้อมูลเชิงลึกที่น่าสนใจในโลกลึกลับ พอดคาสต์ยึดตามมาตรฐานนักข่าวด้วยการตรวจสอบข้อเท็จจริงและการจัดหาข้อมูลอย่างมีจริยธรรม และแม้ว่าทั้งหมดนี้จะเป็นความบันเทิงที่ยอดเยี่ยม แต่ก็ยังมีจุดมุ่งหมายเพื่ออธิบายวัฒนธรรมเกี่ยวกับความปลอดภัยทางไซเบอร์เพื่อให้ผู้ฟังตอบสนองมากขึ้นและมีข้อมูลข่าวสารเกี่ยวกับชีวิตดิจิทัลของพวกเขา อย่าลืมปรับแต่ง

front-end & UX bits ที่มีประโยชน์ จัดส่งสัปดาห์ละครั้ง

ด้วยเครื่องมือที่จะช่วยให้คุณทำงานให้ลุล่วงได้ดียิ่งขึ้น สมัครและรับ รายการตรวจสอบการออกแบบอินเทอร์เฟซอัจฉริยะของ Vitaly PDF ทางอีเมล

อีเมลของคุณ (ยอดเยี่ยม)

ที่ส่วนหน้าและ UX ได้รับความไว้วางใจจากผู้คนจำนวน 190.000 คน