ศึกษากระบวนการและเครื่องมือที่ใช้ในการสร้างประสบการณ์ในรูปแบบปฏิทินวันหยุดของ Designcember
เพื่อเฉลิมฉลองเดือนธันวาคมและปฏิทินต่างๆ ที่ทุกคนใช้เพื่อนับถอยหลังและเฉลิมฉลอง เราจึงต้องการเน้นย้ำเนื้อหาเว็บจากชุมชนและทีมงาน Chrome ในทุกๆ วัน เราไฮไลต์เนื้อหาเกี่ยวกับการพัฒนา UI และเนื้อหาเกี่ยวกับการออกแบบ 1 รายการ โดยมีไฮไลต์ทั้งหมด 31 รายการ โดยมีเว็บไซต์สาธิต เครื่องมือ การประกาศ พอดแคสต์ วิดีโอ บทความ และกรณีศึกษาใหม่ 26 รายการ
ดูประสบการณ์การใช้งานแบบเต็มได้ที่ designcember.com
ภาพรวม
เป้าหมายของเราคือการมอบประสบการณ์การใช้งานเว็บที่เข้าถึงได้ง่าย แปลกใหม่ ทันสมัย และตอบสนองตามอุปกรณ์โดยใช้จำนวนไบต์น้อยที่สุดเท่าที่จะเป็นไปได้ เราต้องการไฮไลต์ API ใหม่ๆ ที่ปรับเปลี่ยนตามอุปกรณ์ เช่น คำค้นหาคอนเทนเนอร์ และรวมตัวอย่างที่สวยงามของโหมดมืดในเว็บไซต์ที่เน้นการออกแบบและเน้นเนื้อหาเป็นหลัก เพื่อให้บรรลุเป้าหมายนี้ เราจึงบีบอัดไฟล์ นำเสนอหลายรูปแบบ ใช้เครื่องมือการสร้างที่เพิ่มประสิทธิภาพเพื่อการสร้างเว็บไซต์แบบคงที่ จัดส่ง Polyfill ใหม่ และอีกมากมาย
เริ่มต้นด้วยความแปลกใหม่
แนวคิดของเว็บไซต์ปฏิทิน Designcember คือการนำเสนอผลงานทั้งหมดที่เราอยากนำเสนอตลอดทั้งเดือนธันวาคม พร้อมกับทำหน้าที่เหมือนเว็บไซต์เดโม เราจึงตัดสินใจสร้างอาคารอพาร์ตเมนต์ที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งจะมีความสูงและแคบลง หรือสั้นลงและกว้างขึ้น พร้อมหน้าต่างที่จัดเรียงตัวเองอยู่ภายในกรอบ แต่ละหน้าต่างจะแสดงข้อมูลใน 1 วัน (จึงเป็นเนื้อหา 1 ส่วน) เราทำงานร่วมกับนักวาดภาพประกอบ Alice Lee เพื่อทำให้วิสัยทัศน์ของเราเป็นจริง
Alice สร้างแรงบันดาลใจให้มีการแชร์กระบวนการและร่างภาพที่น่าตื่นเต้นแม้กระทั่งในแนวคิดช่วงแรกเริ่ม ในขณะที่เธอทำงานด้านศิลปะ เราก็ได้แฮ็กงานสถาปัตยกรรมไปด้วย การพูดคุยในช่วงแรกเป็นเรื่องของแผนผังภาพรวม อาคาร และหน้าต่าง หน้าต่างจะปรับให้เข้ากับคอลัมน์ 1, 2 หรือ 3 คอลัมน์เมื่อมีพื้นที่วิวพอร์ตมากขึ้น จะหดหรือยืดได้แค่ไหน อาคารนี้มีขนาดไม่เกินเท่าใด หน้าต่างจะเลื่อนไปแค่ไหน
นี่คือตัวอย่างของต้นแบบที่ปรับเปลี่ยนตามอุปกรณ์ซึ่งใช้ grid-auto-flow: dense ซึ่งแสดงวิธีวางหน้าต่างอัตโนมัติโดยอัลกอริทึมตารางกริด เราได้ค้นพบอย่างรวดเร็วว่าแม้ว่าตารางกริดสัดส่วนภาพจะแสดงงานศิลปะได้อย่างสวยงาม แต่ก็ไม่เปิดโอกาสให้หน้าต่างขยายขนาดและลดขนาดลงเป็นพื้นที่ว่างที่มีอยู่อย่างไม่สม่ำเสมอ และแสดงถึงพลังของคำค้นหาคอนเทนเนอร์
เมื่อตารางกริดทั่วไปค่อนข้างคงที่และสื่อสารถึงทิศทางการตอบสนองของอาคารและหน้าต่างของอาคารแล้ว เราสามารถโฟกัสที่หน้าต่างเดียว หน้าต่างบางบานยืด หด บีบ ขยายออก และประกอบใหม่มากกว่าหน้าต่างอื่นๆ
แต่ละหน้าต่างจะต้องรับมือกับความปั่นป่วนในการปรับขนาดได้พอสมควร ด้านล่างเป็นต้นแบบของหน้าต่างที่แสดงให้เห็นถึงการตอบสนองต่อความปั่นป่วน ซึ่งแสดงให้เห็นว่าเราจะคาดหวังให้หน้าต่างแบบอินเทอร์แอกทีฟแต่ละหน้าต่างมีการปรับเปลี่ยนได้มากน้อยเพียงใด
ภาพเคลื่อนไหวหน้าต่างด้วยภาพต่อเรียง
บางหน้าต่างมีภาพเคลื่อนไหวเพื่อช่วยเพิ่มการโต้ตอบในประสบการณ์ โดยภาพเคลื่อนไหวจะเป็นแบบวาดด้วยมือแบบทีละเฟรมใน Photoshop ระบบจะส่งออกแต่ละเฟรมแล้วเปลี่ยนเป็นสไปรท์ชีตด้วยโปรแกรมสร้างภาพต่อเรียงนี้ จากนั้นเพิ่มประสิทธิภาพด้วย Squoosh จากนั้นภาพเคลื่อนไหว CSS จะใช้ background-position-x และ animation-timing-function ดังที่แสดงในตัวอย่างต่อไปนี้
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
ภาพเคลื่อนไหวบางอย่าง เช่น หมูออมสินของวันที่ 6 เป็นภาพเคลื่อนไหว CSS ที่อิงตามขั้นตอน
เราได้ผลลัพธ์นี้ด้วยเทคนิคที่คล้ายกันโดยใช้ steps() โดยมีความแตกต่างอยู่ที่คีย์เฟรมเป็นตำแหน่งการเปลี่ยนรูปแบบ CSS แทนที่จะเป็นตำแหน่งพื้นหลัง
การมาสก์ CSS
หน้าต่างบางบานมีรูปร่างที่ไม่ซ้ำ เราใช้มาสก์และ aspect-ratio เพื่อช่วยสร้างหน้าต่างที่ปรับขยายได้ มีรูปทรงไม่ซ้ำกัน และปรับได้
ในการสร้างมาสก์อย่างเช่น การมาสก์สำหรับหน้าต่าง 8 นั้น จำเป็นต้องมีทักษะการใช้ Photoshop แบบเดิม และความรู้เล็กๆ น้อยๆ เกี่ยวกับการทำงานของมาสก์บนเว็บ มาดูกรอบเวลาของวันที่ 8 กัน
หากต้องการเป็นมาสก์ ต้องแยกรูปร่างประเภทใบโคลเวอร์ 4 แฉกด้านในออกเป็นรูปร่างของตนเองและเติมเป็นสีขาว สีขาวจะบอก CSS ว่าเนื้อหาใดจะยังอยู่ และทุกอย่างที่อยู่ภายนอกสีขาวจะไม่แสดงผล ใน Photoshop เลือกด้านในของหน้าต่าง โดยแต่งขนาด 1 พิกเซล (เพื่อลบปัญหาชื่อแทน) จากนั้นเติมสีขาวและส่งออกโดยมีความสูงและความกว้างเท่ากับกรอบหน้าต่าง วิธีนี้จะช่วยให้เฟรมและมาสก์วางซ้อนทับกันได้โดยตรงเพื่อแสดงเนื้อหาภายในเฟรมตามที่คาดไว้
เมื่อเสร็จแล้ว เนื้อหาของหน้าต่างจะสามารถแก้ไขได้และจะอยู่ในเฟรมที่กำหนดเองเสมอ รูปภาพต่อไปนี้แสดงหน้าต่างเวอร์ชันโหมดมืด โดยมีพื้นหลังแบบไล่ระดับสีที่ต่างออกไปและฟิลเตอร์ CSS แบบเรืองแสงที่ใช้กับแสง
นอกจากนี้ การมาสก์ยังรองรับหน้าต่างที่ใช้คอนเทนเนอร์คำค้นหาที่ปรับเปลี่ยนตามอุปกรณ์ด้วย ในหน้าต่างที่ 9 มีตัวการ์ตูนซ่อนอยู่หลังมาสก์จนกว่าหน้าต่างจะมีขนาดที่แคบลง อลิซจึงสร้างตัวละครแบบเต็มให้เราเพื่อให้ผู้ใช้ปรับภาพออกจากเฟรมไม่ได้ ตัวละครไม่ได้ปกปิดอยู่แค่หน้าต่าง แต่ต้นไม้กลับไม่วาง ความท้าทายอีกอย่างที่เราต้องรับมือก็คือการวางองค์ประกอบที่ปกปิดเป็นเลเยอร์ที่ปกปิดไว้ และตรวจสอบว่าองค์ประกอบทั้งหมดเข้ากันได้ดี
รูปภาพต่อไปนี้แสดงลักษณะของไฟล์ที่ไม่มีมาสก์ในหน้าต่างและตัวละคร
ดึงความสนใจจากงานศิลปะ
เพื่อรักษาความคมชัดของภาพและดูแลให้หน้าจอความละเอียดสูงจะไม่มอบประสบการณ์ที่เบลอแก่ผู้ใช้ อลิซจึงทำงานที่อัตราส่วนพิกเซล 3 เท่า แผนคือการใช้ imgix และแสดงรูปภาพและรูปแบบที่มีประสิทธิภาพในเซิร์ฟเวอร์ของตน แต่เราพบว่าการปรับแต่งด้วยตนเองด้วยเครื่องมือ Squoosh สามารถช่วยเราประหยัดได้อย่างน้อย 50%
ภาพประกอบมีอุปสรรคที่ไม่เหมือนใครในการบีบอัด โดยเฉพาะเส้นแปรงและขอบหยาบแบบโปร่งใสที่อลิซใช้ เราเลือกที่จะ Squoosh แต่ละภาพ 3x Photoshop ที่ส่งออกรูปภาพ png เป็นไฟล์ png, webp และ Avif ที่มีขนาดเล็กลง ไฟล์แต่ละประเภทมีความสามารถในการบีบอัดที่แตกต่างกันไป และต้องใช้การบีบอัดรูปภาพมากกว่า 50 ภาพในการค้นหาการตั้งค่าการเพิ่มประสิทธิภาพโดยทั่วไป
Squoosh CLI มีความสำคัญอย่างมากกับรูปภาพกว่า 200 รูปที่ต้องเพิ่มประสิทธิภาพ ซึ่งการดำเนินการทั้งหมดด้วยตนเองอาจใช้เวลาหลายวัน เมื่อเรามีการตั้งค่าการเพิ่มประสิทธิภาพทั่วไปแล้ว เราได้จัดเตรียมข้อมูลเหล่านั้นเป็นคำแนะนำบรรทัดคำสั่งและประมวลผลโฟลเดอร์รูปภาพ PNG ทั้งโฟลเดอร์เป็นกลุ่มที่บีบอัด WebP และ AVIF
ต่อไปนี้คือตัวอย่างคำสั่ง AVIF CLI ที่ใช้:
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
เมื่อตรวจสอบอาร์ตเวิร์กที่มีการเพิ่มประสิทธิภาพในที่เก็บแล้ว เราจะเริ่มโหลดอาร์ตเวิร์กจาก HTML ดังนี้
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
การเขียนซอร์สโค้ดภาพนั้นทำซ้ำๆ เราจึงสร้าง คอมโพเนนต์ Astro เพื่อฝังรูปภาพด้วยโค้ดเพียงบรรทัดเดียว
<Pic filename="day1/inner-frame" role="presentation" />
ผู้ใช้โปรแกรมอ่านหน้าจอและแป้นพิมพ์
ประสบการณ์ส่วนใหญ่ของ Designcember คือการใช้งานผ่านงานศิลปะและหน้าต่างแบบอินเทอร์แอกทีฟ สิ่งสำคัญสำหรับเราคือการที่ผู้ใช้แป้นพิมพ์สามารถใช้เว็บไซต์และมองเข้าไปในหน้าต่างได้ และผู้ใช้โปรแกรมอ่านหน้าจอจะได้รับประสบการณ์ที่ดีจากคำบรรยาย
ตัวอย่างเช่น เมื่อฝังรูปภาพ เราใช้ role="presentation" เพื่อทำเครื่องหมายรูปภาพเป็นงานนำเสนอสำหรับโปรแกรมอ่านหน้าจอ เราคิดว่าประสบการณ์ของผู้ใช้ที่มีคำอธิบาย alt ที่ไม่สมบูรณ์ตั้งแต่ 5-12 รายการจะได้รับประสบการณ์การใช้งานที่ไม่ดี เราจึงทำเครื่องหมายรูปภาพเหล่านั้นว่าเป็นการนำเสนอ และการบรรยายภาพรวม การเลื่อนผ่านหน้าต่างของโปรแกรมอ่านหน้าจอจะมีความรู้สึกในการเล่าเรื่องที่ดี ซึ่งเราหวังว่าจะช่วยนำเสนอความสนุกและแปลกใหม่ที่เว็บไซต์ต้องการแชร์ได้
วิดีโอต่อไปนี้สาธิตการใช้งานแป้นพิมพ์ แป้น Tab, Enter, Spacebar และ Escape จะใช้ทั้งหมดเพื่อปรับโฟกัสไปยังและจากป๊อปอัปหน้าต่างและหน้าต่างต่างๆ
การใช้งานโปรแกรมอ่านหน้าจอมีแอตทริบิวต์ ARIA พิเศษที่ช่วยให้เนื้อหาชัดเจน ตัวอย่างเช่น ลิงก์ของวันนั้นเขียนว่า "หนึ่ง" หรือ "สอง" แต่ถ้ามี ARIA เพิ่มเข้ามา จะมีการประกาศเป็น "วันที่ 1" และ "วันที่สอง" นอกจากนี้ รูปภาพทั้งหมดจะถูกสรุปไว้ในป้ายกำกับเดียว เพื่อให้แต่ละหน้าต่างมีคำอธิบาย
เครื่องมือสร้างเว็บไซต์ Astro ที่ขับเคลื่อนด้วยคอมโพเนนต์เป็นหลัก
Astro ช่วยให้ทีมทำงานร่วมกันในเว็บไซต์ได้อย่างง่ายดาย นักพัฒนาซอฟต์แวร์ Angular และ React เป็นที่คุ้นเคยกับโมเดลของทั้ง Angular และ React ในขณะที่ระบบรูปแบบ classname ที่กำหนดขอบเขตเป็นเช่นนี้ก็ช่วยให้นักพัฒนาซอฟต์แวร์แต่ละรายทราบว่างานของตนในหน้าต่างจะไม่ขัดแย้งกับผู้อื่น
จํานวนวันที่เป็นคอมโพเนนต์
แต่ละวันเป็นองค์ประกอบที่ดึงข้อมูลสถานะจากที่เก็บข้อมูลเวลาที่สร้าง ซึ่งจะทำให้เราเรียกใช้ตรรกะเทมเพลตก่อนที่ HTML จะเข้าถึงเบราว์เซอร์ ตรรกะจะระบุว่าควรจะแสดงเคล็ดลับเครื่องมือในวันนั้นๆ หรือไม่ เนื่องจากวันที่ไม่มีการใช้งานจะไม่มีป๊อปอัป
บิลด์จะทำงานทุกชั่วโมงและพื้นที่เก็บข้อมูลเวลาบิลด์จะปลดล็อกวันใหม่เมื่อเซิร์ฟเวอร์บิลด์เลยเที่ยงคืน ระบบเล็กๆ ที่สามารถอัปเดตได้เองและเข้าใจได้ในตัวเองเหล่านี้จะช่วยอัปเดตเว็บไซต์ให้ทันสมัยอยู่เสมอ
สไตล์ที่กำหนดขอบเขตและโอกาสแบบเปิด
Astro จะกำหนดสไตล์ของขอบเขตที่เขียนไว้ในโมเดลคอมโพเนนต์ ซึ่งทำให้การกระจายภาระงานให้กับสมาชิกในทีมจำนวนมากง่ายขึ้น และยังทำให้การใช้ Open Props เป็นเรื่องสนุกอีกด้วย รูปแบบ Open Props standardize.css เข้ามามีบทบาทสำคัญในธีมที่ปรับเปลี่ยนได้ (สว่างและมืด) รวมถึงช่วยในการเปลี่ยนเนื้อหา เช่น ย่อหน้าและส่วนหัว
เนื่องจากเป็นผู้ที่หันมาใช้ Astro รุ่นแรกๆ เราประสบปัญหากับ PostCSS อยู่บ้าง ตัวอย่างเช่น เราอัปเดตเป็น Astro เวอร์ชันล่าสุดไม่ได้เนื่องจากมีปัญหาด้านการสร้างมากเกินไป สามารถใช้เวลามากขึ้นในส่วนนี้ ซึ่งเป็นการเพิ่มประสิทธิภาพให้กับเวิร์กโฟลว์ของบิลด์และนักพัฒนาซอฟต์แวร์
คอนเทนเนอร์ที่ยืดหยุ่น
หน้าต่างบางบานจะขยายและหดลง โดยคงสัดส่วนภาพไว้เพื่อรักษางานศิลปะ เราใช้หน้าต่างอื่นๆ เพื่อแสดงศักยภาพของสถาปัตยกรรมที่อิงตามคอมโพเนนต์ด้วยการค้นหาคอนเทนเนอร์ คำค้นหาคอนเทนเนอร์หมายความว่าหน้าต่างอาจเป็นเจ้าของข้อมูลการจัดรูปแบบที่ปรับเปลี่ยนตามอุปกรณ์แต่ละรายการและจะปรับใหม่ตามขนาดของตัวเอง บางหน้าต่างเปลี่ยนจากแคบไปกว้างและจำเป็นต้องปรับขนาดของสื่อภายใน ตลอดจนตำแหน่งของสื่อ
เมื่อมีพื้นที่มากขึ้นสำหรับหน้าต่าง เราสามารถปรับขนาดหรือองค์ประกอบย่อยของหน้าต่างให้พอดีได้ เราพบว่าการค้นหาคอนเทนเนอร์จะตอบโจทย์กรอบเวลาแบบปรับอัตโนมัติได้ไม่เพียงแค่ทำให้สนุกกับการแสดงเท่านั้น แต่ยังต้องทำให้เลย์เอาต์บางเลย์เอาต์มีความเรียบง่ายน้อยลงอีกด้วย
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
แนวทางนี้แตกต่างจากการคงรักษาสัดส่วนภาพ ให้การควบคุมที่มากขึ้นและโอกาสที่เพิ่มขึ้น เด็กๆ หลายคนอาจเปลี่ยนมาปรับเข้ากับเลย์เอาต์ใหม่ในขนาดหนึ่งๆ
นอกจากนี้ การค้นหาคอนเทนเนอร์ยังช่วยให้เรารองรับการควบคุมแบบบล็อก (แนวตั้ง) ได้ ดังนั้นเมื่อหน้าต่างยาวขึ้น เราสามารถปรับสไตล์ให้พอดีได้ กรณีนี้จะปรากฏในข้อความค้นหาตามความสูง ซึ่งเราใช้แบบสแตนด์อโลน และนอกเหนือจากข้อความค้นหาตามความกว้าง:
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
นอกจากนี้ เรายังใช้การค้นหาคอนเทนเนอร์เพื่อแสดงและซ่อนรายละเอียด เนื่องจากงานศิลปะมีผู้คนเพิ่มมากขึ้นในขนาดเล็กลงและว่างเปล่าในขนาดที่กว้างมากขึ้น หน้าต่างที่ 9 เป็นตัวอย่างที่ดีในเรื่องนี้
การสนับสนุนในเบราว์เซอร์ต่างๆ
หากต้องการสร้างประสบการณ์การใช้งานข้ามเบราว์เซอร์ที่ทันสมัย โดยเฉพาะ API ที่อยู่ระหว่างการทดลอง เช่น ข้อความค้นหาคอนเทนเนอร์ เราต้องใช้ Polyfill ดีๆ เราได้โทรหาทีมของเรา และ Surma เป็นหัวหอกในการสร้างPolyfill การค้นหาคอนเทนเนอร์ตัวใหม่ ส่วน Polyfill จะใช้ ResizeObserver, MutationObserver และฟังก์ชัน :is() ของ CSS ดังนั้น เบราว์เซอร์ที่ทันสมัยทั้งหมดจึงรองรับ Polyfill โดยเฉพาะ Chrome และ Edgefrom เวอร์ชัน 88, Firefox จากเวอร์ชัน 78 และ Safari จากเวอร์ชัน 14 การใช้ Polyfill จะทำให้สามารถใช้ไวยากรณ์ต่อไปนี้ได้
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
โหมดเข้ม
สิ่งสุดท้ายที่ขาดไม่ได้สำหรับเว็บไซต์ Designcember คือธีมสีเข้มที่สวยงาม เราจึงอยากแสดงวิธีที่คุณสามารถใช้งานศิลปะเพื่อมีส่วนร่วมในการสร้างประสบการณ์การใช้งานโหมดมืดที่ยอดเยี่ยม สำหรับเรื่องนี้ เราปรับเปลี่ยนรูปแบบพื้นหลังของแต่ละหน้าต่างด้วยตนเอง และใช้ CSS ในระดับที่สมเหตุสมผลที่สุดในการสร้างอาร์ตเวิร์กบนหน้าต่าง พื้นหลังส่วนใหญ่เป็นการไล่ระดับสี CSS ดังนั้นจึงสามารถปรับค่าสีได้ง่ายขึ้น จากนั้นเราจึงวางเลเยอร์ศิลปะทับบนภาพเหล่านี้
ไข่อีสเตอร์อื่นๆ
ความเป็นตัวของตัวเอง
เราได้เพิ่มลักษณะพิเศษเล็กน้อยในหน้าเว็บเพื่อให้เว็บไซต์มีลักษณะเฉพาะมากขึ้น เรื่องแรกคือทีมนักแสดง นำมาจากแรงบันดาลใจจากทีมของเรา นอกจากนี้เรายังมีเคอร์เซอร์สไตล์ย้อนความหลังในวันที่ไม่ได้ใช้งานและเล่นกับรูปแบบไอคอน Fav
ฟังก์ชันการใช้งาน
ฟังก์ชันพิเศษอีกอย่างหนึ่งคือฟังก์ชัน "ข้ามไปยังวันนี้" ที่มีนกบินอยู่บนยอดอาคาร การคลิกหรือกด Enter ที่นกตัวนี้จะข้ามคุณลงมาในหน้านั้นจนถึงวันปัจจุบันของเดือน คุณจึงสามารถไปยังการเปิดตัวล่าสุดได้อย่างรวดเร็ว
Designcember.com ยังมีสไตล์ชีตการพิมพ์แบบพิเศษที่เราจัดเตรียมรูปภาพเฉพาะที่จะทำงานได้ดีที่สุดบนกระดาษขนาด 8.5 นิ้ว x 11 นิ้ว เพื่อให้คุณพิมพ์ปฏิทินออกมาได้ด้วยตัวเองและรื่นเริงไปตลอดทั้งปี
โดยรวมแล้ว งานหนักได้กลายเป็นการสร้างประสบการณ์บนเว็บที่ทันสมัยที่สนุกและแหวกแนว เพื่อเฉลิมฉลองการพัฒนา UI ตลอดทั้งเดือนในเดือนธันวาคม หวังว่าคุณจะชอบนะ
