پیکسماس مبارک

خلاصه

Merry Pixmas : سرگرمی کریسمس با تبدیل‌های سه بعدی CSS.

چه چیزی را دوست داریم؟

یک نسخه نمایشی زیبا با مضمون کریسمس که به خوبی در دسکتاپ و موبایل کار می کند. حتی با پشتیبانی از رنگ تم کاملاً جدید و مانیفست وب برای تجربه صفحه اصلی که تمام صفحه را راه اندازی می کند ارائه می شود.

نکته حرفه ای: گوشی خود را تکان دهید تا برف ببارد!

بهبودهای احتمالی

حتی اگر می‌دانم که این یک نسخه آزمایشی است، چند سرصفحه کش مشخص شده در دارایی‌ها و جاوا اسکریپت غیر رندرکننده می‌تواند زمان بارگذاری درک شده را تا حدی بهبود بخشد.

پرسش و پاسخ با جیم ساویج

چرا وب؟

در توکیو ، ما مدت‌هاست که طرفدار وب واکنش‌گرا و تلفن همراه بوده‌ایم، نه بومی به خاطر آن. Pixmas نتیجه آزمایش‌های HTML5 و CSS3 در زمان توقف بین پروژه‌ها بود. ما همیشه در حال امتحان چیزهای جدید هستیم تا دانش خود را به روز نگه داریم. بنابراین به طور طبیعی، برای تیم توسعه دهندگان فرانت اند ما، هر تحقیقی بر خلاف یک پلت فرم بومی متمرکز بر وب بود.

همانطور که مرورگرها به رشد خود ادامه می دهند، ما شاهد عملکردهای بومی مانند بیشتری هستیم. توابعی که تنها از طریق توسعه بومی مانند موقعیت جغرافیایی، دسترسی به دوربین، ذخیره سازی پایگاه داده محلی و غیره در دسترس بوده اند که همگی به یک تجربه کلی شبیه بومی برای کاربر کمک می کنند، اما با مزایای توسعه چند پلتفرمی و تکرار سریع. البته توسعه بومی هنوز مزایای خود را دارد و هنگام پرداختن به یک پروژه جدید، هم برای گزینه های وب و هم گزینه های بومی توجه زیادی می شود. احتمالاً بدیهی به نظر می رسد، اما برای مشتریان ما مهم است که ما بهترین پلتفرم را برای این کار توصیه کنیم، نه اینکه هر پروژه را به هر کدام که ترجیح می دهیم کدنویسی کنیم.

چه چیزی در طول توسعه واقعاً خوب کار کرد؟

من فکر می‌کنم در Pixmas تمرکز اصلی بر روی تبدیل‌های سه بعدی بود و تا چه حد می‌توانستیم CSS را پیش ببریم، بنابراین سبک تصویری پیکسلی در مرورگر بسیار خوب کار می‌کرد، و همانطور که هر توسعه‌دهنده فرانت‌اند به شما می‌گوید رفتار طبیعی مرورگر به شکل مربعی سازگار است! بنابراین پایه گذاری سبک کلی و ریاضیات سه بعدی حول مسائل مربعی واقعاً خوب کار می کند. ساختن یک مکعب با تبدیل های سه بعدی و HTML بسیار ساده تر از هر شکل ابتدایی دیگری است. با این حال، تعامل و انیمیشن ها ما را کمی آزمون و خطا انجام داد تا هموار شود.

آنچه بیش از همه ما را شگفت زده کرد نرمی و عملکرد مرورگر سه بعدی در سیستم عامل های تلفن همراه، به ویژه در دستگاه های کمتر شناخته شده اندرویدی بود.

اگر می‌توانید یک API برای بهبود برنامه خود داشته باشید، آن چیست؟

اگر بخواهیم Pixmas را دوباره بنویسیم، احتمالاً از یک API مبتنی بر WebGL استفاده می‌کنیم. در حالی که دستکاری عناصر HTML DOM به صورت سه بعدی از طریق CSS بسیار سرگرم کننده بود، اما قدرت واقعی برای سه بعدی مبتنی بر وب باید یک فناوری اختصاصی با شتاب سخت افزاری مانند WebGL باشد. CSS 3D برای جلوه‌ها و جابجایی‌های اصلی صفحه وب مناسب است، اما قطعاً هنگام کدنویسی Pixmas با محدودیت در عملکرد مرورگر مواجه هستیم.

Google پروژه‌های WebGL فوق‌العاده‌ای در Chrome Experiments دارد.