বিল্ডিং ডিজাইনসেম্বার

Designcember-এর ছুটির-ক্যালেন্ডার-শৈলীর অভিজ্ঞতা তৈরি করতে ব্যবহৃত প্রক্রিয়া এবং সরঞ্জামগুলির মধ্যে একটি উঁকি।

Adam Argyle

Una Kravets

ডিসেম্বরের স্পিরিট এবং অনেক ক্যালেন্ডার যা লোকেরা কাউন্টডাউন এবং উদযাপনের জন্য ব্যবহার করে, আমরা সম্প্রদায় এবং Chrome টিমের ওয়েব সামগ্রী হাইলাইট করতে চেয়েছিলাম। প্রতিদিন, আমরা UI-উন্নয়ন এবং ডিজাইন-সম্পর্কিত সামগ্রীর একটি অংশ হাইলাইট করি, মোট 31টি হাইলাইট, যার মধ্যে 26টি নতুন ডেমো সাইট, সরঞ্জাম, ঘোষণা, পডকাস্ট, ভিডিও, নিবন্ধ এবং কেস স্টাডি ছিল৷

designcember.com- এ সম্পূর্ণ অভিজ্ঞতা দেখুন।

ওভারভিউ

আমাদের লক্ষ্য ছিল যতটা সম্ভব কম বাইটে একটি অ্যাক্সেসযোগ্য, অদ্ভুত, আধুনিক এবং প্রতিক্রিয়াশীল ওয়েব অভিজ্ঞতা প্রদান করা। আমরা কন্টেইনার কোয়েরির মতো নতুন প্রতিক্রিয়াশীল API হাইলাইট করতে চেয়েছিলাম এবং একটি ডিজাইন-কেন্দ্রিক এবং সম্পদ-ভারী ওয়েবসাইটে একটি অন্ধকার মোডের একটি সুন্দর উদাহরণ অন্তর্ভুক্ত করতে চেয়েছিলাম। এটি অর্জনের জন্য, আমরা ফাইলগুলি সংকুচিত করেছি, একাধিক ফর্ম্যাট অফার করেছি, স্ট্যাটিক সাইট জেনারেশনের জন্য অপ্টিমাইজ করা বিল্ড টুল ব্যবহার করেছি, একটি নতুন পলিফিল পাঠিয়েছি এবং আরও অনেক কিছু।

বাতিক দিয়ে শুরু

ডিজাইনসেম্বার ক্যালেন্ডার সাইটটির চারপাশে ধারণাটি ছিল একটি ডেমো সাইটের মতো কাজ করার সময়, আমরা ডিসেম্বর মাস জুড়ে যে সমস্ত কাজের স্পটলাইট করতে চেয়েছিলাম তার জন্য একটি শোকেস হিসাবে কাজ করা। আমরা একটি প্রতিক্রিয়াশীল অ্যাপার্টমেন্ট বিল্ডিং তৈরি করার সিদ্ধান্ত নিয়েছি যা ফ্রেমের মধ্যে নিজেদেরকে পুনরায় সাজানো জানালা সহ লম্বা এবং আরও সরু, বা ছোট এবং চওড়া হতে পারে। প্রতিটি উইন্ডো এক দিন প্রতিনিধিত্ব করে (এবং এইভাবে, বিষয়বস্তুর একটি অংশ)। আমরা আমাদের দৃষ্টিভঙ্গি জীবিত করতে চিত্রকর অ্যালিস লির সাথে কাজ করেছি।

অ্যালিস অনুপ্রেরণাদায়ক ছিল, ভাগ করে নেওয়ার প্রক্রিয়া এবং স্কেচ যা তাদের প্রাথমিক ধারণাগুলিতেও উত্তেজনাপূর্ণ ছিল। যখন সে শিল্পে কাজ করত, আমরা স্থাপত্যকে হ্যাক করেছিলাম। প্রাথমিক আলোচনা ছিল ম্যাক্রো লেআউট, বিল্ডিং এবং এর জানালা নিয়ে। আরও ভিউপোর্ট স্পেস উপলব্ধ হওয়ার সাথে সাথে উইন্ডোগুলি কীভাবে এক, দুই বা তিনটি কলামের সাথে খাপ খাবে? তারা কতদূর সঙ্কুচিত বা প্রসারিত করতে পারে? ভবনের সর্বোচ্চ আকার কত হবে? জানালা কতটা স্থানান্তর করবে?

এখানে grid-auto-flow: dense দেখাচ্ছে। আমরা দ্রুত বুঝতে পেরেছি যে আকৃতি-অনুপাতের গ্রিডগুলি শিল্প প্রদর্শনের জন্য সুন্দরভাবে পারফর্ম করেছে, তারা জানালাগুলিকে বাড়তে দেওয়ার এবং অ-ইউনিফর্ম উপলব্ধ জায়গায় সঙ্কুচিত হতে দেওয়ার এবং কন্টেইনার প্রশ্নের শক্তি প্রদর্শন করার সুযোগ দেয়নি।

একবার সাধারণ গ্রিড তুলনামূলকভাবে স্থিতিশীল হয়ে গেলে এবং বিল্ডিং এবং এর জানালার প্রতিক্রিয়াশীলতার জন্য দিকনির্দেশের অনুভূতি জানালে, আমরা একটি একক উইন্ডোতে ফোকাস করতে পারি। কিছু জানালা প্রসারিত, সঙ্কুচিত, চাপা, বৃদ্ধি, এবং গ্রিডের অন্যদের তুলনায় নিজেদেরকে পুনরায় রচনা করেছে।

প্রতিটি উইন্ডোর একটি নির্দিষ্ট পরিমাণ রিসাইজ টার্বুলেন্স পরিচালনা করতে হবে। নীচে একটি উইন্ডোর একটি প্রোটোটাইপ রয়েছে যা অশান্তির প্রতি তার প্রতিক্রিয়াশীলতা প্রদর্শন করে, যা দেখায় যে আমরা প্রতিটি ইন্টারেক্টিভ উইন্ডো সামঞ্জস্য করতে কতটা আশা করতে পারি।

স্প্রিটশীট সহ উইন্ডো অ্যানিমেশন

অভিজ্ঞতায় অতিরিক্ত মিথস্ক্রিয়া আনতে কিছু উইন্ডোতে অ্যানিমেশন রয়েছে। অ্যানিমেশনগুলি ফটোশপে ফ্রেমে ফ্রেমে হাতে আঁকা। প্রতিটি ফ্রেম রপ্তানি করা হয়, এই স্প্রাইটশিট জেনারেটরের সাথে একটি স্প্রাইটশিটে পরিণত হয়, তারপর স্কুশের সাথে অপ্টিমাইজ করা হয়। 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%; }
}

কিছু অ্যানিমেশন, যেমন ছয় দিনের পিগি ব্যাঙ্ক , ধাপ-ভিত্তিক CSS অ্যানিমেশন ছিল। আমরা steps() ব্যবহার করে একটি অনুরূপ কৌশলের মাধ্যমে এই প্রভাবটি অর্জন করেছি, পার্থক্যটি হল যে কীফ্রেমগুলি ব্যাকগ্রাউন্ড পজিশনের পরিবর্তে CSS ট্রান্সফর্ম পজিশন ছিল।

CSS মাস্কিং

কিছু জানালার অনন্য আকার ছিল। আমরা একটি মাপযোগ্য, অনন্য আকৃতির, এবং অভিযোজিত উইন্ডো তৈরি করতে সাহায্য করার জন্য মাস্ক এবং aspect-ratio ব্যবহার করেছি।

একটি মাস্ক তৈরি করতে, যেমন উইন্ডো আটের জন্য এটির জন্য, কিছু ক্লাসিক ফটোশপ দক্ষতার প্রয়োজন ছিল, পাশাপাশি ওয়েবে মুখোশগুলি কীভাবে কাজ করে সে সম্পর্কে কিছুটা জ্ঞান। অষ্টম দিনের জানালার দিকে তাকাই।

মুখোশ হওয়ার জন্য, ভিতরের চারটি পাতার ক্লোভার টাইপ আকৃতিটিকে তার নিজস্ব আকার হিসাবে আলাদা করে সাদা রঙে পূর্ণ করতে হবে। হোয়াইট সিএসএসকে বলে যে কোন বিষয়বস্তু থাকবে এবং সাদার বাইরের সবকিছু থাকবে না। ফটোশপে, উইন্ডোর ভিতরের অংশটি নির্বাচন করা হয়েছিল, পালকযুক্ত 1px (অ্যালিয়াসিং সমস্যাগুলি সরানোর জন্য), তারপর সাদা পূর্ণ করা হয়েছিল এবং উইন্ডো ফ্রেমের মতো একই উচ্চতা এবং প্রস্থে রপ্তানি করা হয়েছিল। এইভাবে ফ্রেম এবং মুখোশ সরাসরি একে অপরের উপরে স্তরিত হতে পারে, প্রত্যাশিতভাবে ফ্রেমের ভিতরের বিষয়বস্তু দেখায়।

একবার সম্পূর্ণ হলে, উইন্ডোর বিষয়বস্তু পরিবর্তন করা যেতে পারে এবং সর্বদা কাস্টম ফ্রেমের মধ্যে থাকতে দেখা যাবে। নীচের চিত্রটি উইন্ডোটির অন্ধকার মোড সংস্করণ দেখায়, একটি ভিন্ন ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট এবং আলোতে প্রয়োগ করা একটি গ্লো CSS ফিল্টার সহ।

মাস্কিং প্রতিক্রিয়াশীল কন্টেইনার-কোয়েরি ভিত্তিক উইন্ডোগুলিকেও সমর্থন করে। উইন্ডো নাইনটিতে, একটি চরিত্র আছে যেটি একটি মুখোশের পিছনে লুকিয়ে আছে যতক্ষণ না জানালাটি আরও সংকীর্ণ আকারে থাকে। ব্যবহারকারী ফ্রেমের বাইরে ছবিটি সামঞ্জস্য করতে পারে না তা নিশ্চিত করার জন্য, অ্যালিস আমাদের জন্য সম্পূর্ণ চরিত্রটি সম্পূর্ণ করেছে। চরিত্রটি জানালার মধ্যে মুখোশযুক্ত, কিন্তু গাছপালাগুলি নেই, তাই আমরা আরেকটি চ্যালেঞ্জ মোকাবেলা করেছি যা ছিল মুখোশযুক্ত উপাদানগুলিকে মুখোশবিহীন স্তরগুলির সাথে লেয়ারিং করা এবং নিশ্চিত করা যে সেগুলি একসাথে ভালভাবে স্কেল করা হয়েছে৷

নীচের চিত্রটি জানালা এবং চরিত্রের মুখোশ ছাড়া দেখতে কেমন তা দেখায়।

শিল্প squaoshing

দৃষ্টান্তের বিশ্বস্ততা বজায় রাখতে এবং হাই ডেফিনিশন স্ক্রিনগুলি অস্পষ্ট ব্যবহারকারীর অভিজ্ঞতা পাবে না তা নিশ্চিত করতে, অ্যালিস 3x পিক্সেল অনুপাতে কাজ করেছিল। পরিকল্পনাটি ছিল imgix ব্যবহার করা এবং তাদের সার্ভারে অপ্টিমাইজ করা ছবি এবং ফরম্যাট পরিবেশন করা, কিন্তু আমরা দেখেছি যে Squosh টুলের সাথে ম্যানুয়াল টুইকিং আমাদের 50% বা তার বেশি বাঁচাতে পারে।

ইলাস্ট্রেশনে কম্প্রেশনের জন্য অনন্য চ্যালেঞ্জ রয়েছে, বিশেষ করে ব্রাশ স্ট্রোক এবং স্বচ্ছ রুক্ষ প্রান্তের শৈলী এলিস ব্যবহার করা হয়েছে। আমরা প্রতিটি 3x ফটোশপ রপ্তানি করা png ইমেজকে ছোট png, webp এবং avif-এ স্কুশ করতে বেছে নিয়েছি। প্রতিটি ফাইলের নিজস্ব বিশেষ কম্প্রেশন ক্ষমতা রয়েছে এবং কিছু সাধারণ অপ্টিমাইজেশান সেটিংস খুঁজে পেতে 50 টিরও বেশি ছবি সংকুচিত করতে সময় লাগে৷

Squosh CLI অপ্টিমাইজ করার জন্য 200 টিরও বেশি চিত্রের সাথে গুরুত্বপূর্ণ হয়ে উঠেছে - এই সমস্ত ম্যানুয়ালি করতে অনেক দিন লাগত৷ একবার আমাদের সাধারণ অপ্টিমাইজেশান সেটিংস হয়ে গেলে, আমরা সেগুলিকে কমান্ড লাইন নির্দেশাবলী হিসাবে সরবরাহ করেছি এবং ব্যাচ তাদের WebP এবং AVIF সংকুচিত প্রতিরূপগুলিতে PNG চিত্রগুলির সম্পূর্ণ ফোল্ডারগুলিকে প্রক্রিয়াজাত করেছি৷

এখানে AVIF CLI squosh কমান্ড ব্যবহৃত একটি উদাহরণ:

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>

ছবির সোর্স কোড লেখার জন্য এটি পুনরাবৃত্তিমূলক ছিল, তাই আমরা কোডের একটি লাইন দিয়ে ইমেজ এম্বেড করার জন্য একটি অ্যাস্ট্রো উপাদান তৈরি করেছি।

<Pic filename="day1/inner-frame" role="presentation" />

স্ক্রিন রিডার এবং কীবোর্ড ব্যবহারকারীরা

ডিজাইনসেম্বারের বেশিরভাগ অভিজ্ঞতা শিল্প এবং ইন্টারেক্টিভ উইন্ডোর মাধ্যমে। এটি আমাদের কাছে গুরুত্বপূর্ণ ছিল যে একজন কীবোর্ড ব্যবহারকারী সাইটটি ব্যবহার করতে পারে এবং উইন্ডোতে উঁকি দিতে পারে এবং স্ক্রিন রিডার ব্যবহারকারীরা একটি সুন্দর বর্ণনার অভিজ্ঞতা পান।

উদাহরণস্বরূপ, ইমেজ এম্বেড করার সময় আমরা স্ক্রীন রিডারদের জন্য ইমেজটিকে উপস্থাপনামূলক হিসেবে চিহ্নিত করতে role="presentation" ব্যবহার করি। আমরা অনুভব করেছি যে ব্যবহারকারীর অভিজ্ঞতা 5 থেকে 12 ফ্র্যাকচারড alt বর্ণনার একটি খারাপ অভিজ্ঞতা হতে চলেছে। সুতরাং, আমরা চিত্রগুলিকে উপস্থাপনামূলক হিসাবে চিহ্নিত করেছি এবং একটি সামগ্রিক উইন্ডো বর্ণনা প্রদান করেছি। একটি স্ক্রীন রিডারে জানালা দিয়ে চলাফেরা করার পরে একটি সুন্দর বর্ণনামূলক অনুভূতি হয়, যা আমরা আশা করেছিলাম যে সাইটটি শেয়ার করতে চায় এমন বাতিক এবং মজা প্রদান করতে সহায়তা করবে৷

নিম্নলিখিত ভিডিওটি কীবোর্ড অভিজ্ঞতার একটি ডেমো দেখায়। ট্যাব, এন্টার, স্পেসবার এবং এস্কেপ কীগুলি সবই উইন্ডো পপআপ এবং উইন্ডোতে ফোকাস অর্কেস্ট্রেট করতে ব্যবহৃত হয়।

স্ক্রিন রিডার অভিজ্ঞতার বিশেষ ARIA বৈশিষ্ট্য রয়েছে যা বিষয়বস্তুতে স্বচ্ছতা নিয়ে আসে। উদাহরণস্বরূপ, দিনের লিঙ্কগুলি শুধুমাত্র "এক" বা "দুই" বলে, কিন্তু কিছু যোগ করা ARIA সহ, সেগুলিকে "একদিন" এবং "দুই দিন" হিসাবে ঘোষণা করা হয়। তদুপরি, সমস্ত চিত্র একটি একক লেবেলে সংক্ষিপ্ত করা হয়েছে তাই প্রতিটি উইন্ডোতে একটি বিবরণ রয়েছে।

অ্যাস্ট্রো, স্ট্যাটিক ফার্স্ট, কম্পোনেন্ট-চালিত সাইট জেনারেটর

অ্যাস্ট্রো টিমের পক্ষে সাইটে একসাথে কাজ করা সহজ করে দিয়েছে। কম্পোনেন্ট মডেলটি কৌণিক এবং প্রতিক্রিয়া উভয় বিকাশকারীদের কাছে পরিচিত ছিল, যখন স্কোপড ক্লাসনেম শৈলী সিস্টেম প্রতিটি বিকাশকারীকে জানতে সাহায্য করেছিল যে একটি উইন্ডোতে তাদের কাজ অন্য কারো সাথে বিরোধ করবে না।

উপাদান হিসাবে দিন

প্রতিটি দিন ছিল একটি উপাদান যা একটি বিল্ড টাইম ডেটা স্টোর থেকে স্ট্যাটাস নিয়ে আসে। এটি ব্রাউজারে HTML পৌঁছানোর আগে টেমপ্লেট লজিক চালানো যাক। যুক্তিটি নির্ধারণ করবে যে দিনটি তার টুলটিপ দেখাবে কি না, কারণ নিষ্ক্রিয় দিনগুলিতে পপ আপ থাকে না।

বিল্ডগুলি প্রতি ঘন্টায় চালানো হয় এবং বিল্ড টাইম ডেটা স্টোরটি একটি নতুন দিন আনলক করবে যখন বিল্ড সার্ভারটি মধ্যরাত অতিক্রম করবে। এই স্ব-আপডেটিং এবং স্বয়ংসম্পূর্ণ সামান্য সিস্টেমগুলি সাইটটিকে আপ টু ডেট রাখে।

স্কোপড স্টাইল এবং ওপেন প্রপস

অ্যাস্ট্রো স্কোপ স্টাইলগুলি এর কম্পোনেন্ট মডেলের ভিতরে লিখিত , যা অনেক দলের সদস্যদের মধ্যে কাজের চাপ বন্টন করা সহজ করে তোলে এবং ওপেন প্রপস ব্যবহার করে মজাদার করে তোলে। ওপেন প্রপস normalize.css শৈলীগুলি অভিযোজিত (হালকা এবং অন্ধকার) থিমের সাথে কাজে এসেছে, সেইসাথে অনুচ্ছেদ এবং শিরোনামগুলির মতো বিষয়বস্তুকে ঝগড়া করতে সহায়তা করে৷

Astro-এর প্রাথমিক গ্রহণকারী হিসাবে, আমরা PostCSS-এর সাথে কিছু সমস্যায় পড়েছিলাম। উদাহরণস্বরূপ, অনেকগুলি বিল্ড সমস্যার কারণে আমরা সর্বশেষ অ্যাস্ট্রো সংস্করণে আপডেট করতে পারিনি। বিল্ড এবং ডেভেলপার ওয়ার্কফ্লো অপ্টিমাইজ করে এখানে আরও সময় ব্যয় করা যেতে পারে।

নমনীয় পাত্রে

কিছু জানালা বড় হয় এবং সঙ্কুচিত হয়, তাদের শিল্প সংরক্ষণের জন্য আকৃতির অনুপাত বজায় রাখে। কন্টেইনার ক্যোয়ারী সহ কম্পোনেন্ট-ভিত্তিক আর্কিটেকচারের শক্তি প্রদর্শন করতে আমরা কিছু অন্যান্য উইন্ডো ব্যবহার করেছি। কন্টেইনার কোয়েরির অর্থ হল উইন্ডোজ তাদের স্বতন্ত্র প্রতিক্রিয়াশীল স্টাইলিং তথ্যের মালিক হতে পারে এবং তাদের নিজস্ব আকারের উপর ভিত্তি করে পুনরায় সামঞ্জস্য করতে পারে। কিছু উইন্ডো সরু থেকে প্রশস্ত হয়ে যায় এবং তাদের মধ্যে মিডিয়ার আকার, সেইসাথে সেই মিডিয়ার স্থান নির্ধারণের প্রয়োজন হয়।

একটি উইন্ডোর জন্য আরও বেশি জায়গা পাওয়া গেলে, আমরা উইন্ডোটির আকার বা শিশু উপাদানগুলিকে মানিয়ে নিতে পারি। দেখা গেল যে অভিযোজিত উইন্ডোগুলি পূরণ করার জন্য, কন্টেইনার প্রশ্নগুলি শুধুমাত্র প্রদর্শন করা মজাদার হবে না, তাদের প্রয়োজন হবে এবং নির্দিষ্ট লেআউটের অর্কেস্ট্রেটিংকে ব্যাপকভাবে সরল করা হবে৷

.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);
  }
}

আমরা বিস্তারিত দেখানো এবং লুকানোর জন্য কন্টেইনার কোয়েরি ব্যবহার করেছি কারণ শিল্পটি ছোট আকারে ক্রমবর্ধমান ভিড় হয়ে উঠেছে এবং আরও বড় আকারে খালি হয়ে উঠেছে। উইন্ডো নাইন একটি দুর্দান্ত উদাহরণ যেখানে এটি কার্যকর হয়েছে:

ক্রস ব্রাউজার সমর্থন

একটি দুর্দান্ত আধুনিক ক্রস-ব্রাউজার অভিজ্ঞতা তৈরি করতে, বিশেষ করে কন্টেইনার প্রশ্নের মতো পরীক্ষামূলক APIগুলির জন্য, আমাদের একটি দুর্দান্ত পলিফিল দরকার৷ আমরা আমাদের দলকে একটি কল পাঠিয়েছি, এবং সুরমা একটি নতুন কন্টেইনার কোয়েরি পলিফিলের জন্য একটি বিল্ডের নেতৃত্ব দিয়েছে৷ পলিফিল ResizeObserver , MutationObserver এবং CSS :is() ফাংশনের উপর নির্ভর করে। অতএব, সমস্ত আধুনিক ব্রাউজার পলিফিল সমর্থন করে, বিশেষ করে ক্রোম এবং এজ থেকে সংস্করণ 88, সংস্করণ 78 থেকে ফায়ারফক্স, এবং 14 সংস্করণ থেকে সাফারি। পলিফিল ব্যবহার করা নিম্নলিখিত সিনট্যাক্সগুলির যেকোনো একটিকে অনুমতি দেয়:

/* These are all equivalent */
@container (min-width: 200px) {
  /* ... */
}
@container (width >= 200px) {
  /* ... */
}
@container size(width >= 200px) {
  /* ... */
}

ডার্ক মোড

ডিজাইনসেম্বার ওয়েবসাইটের জন্য প্রয়োজনীয় একটি শেষ স্পর্শ ছিল একটি সুন্দর অন্ধকার থিম। আমরা দেখাতে চেয়েছিলাম যে আপনি কীভাবে একটি দুর্দান্ত অন্ধকার মোড অভিজ্ঞতা তৈরিতে সক্রিয় অংশগ্রহণকারী হতে শিল্পকে ব্যবহার করতে পারেন। এর জন্য, আমরা প্রতিটি উইন্ডোর ব্যাকগ্রাউন্ড শৈলীগুলিকে প্রোগ্রাম্যাটিকভাবে সামঞ্জস্য করেছি, এবং উইন্ডো আর্ট তৈরি করার সময় যতটা বোধগম্য হয়েছে ততটা CSS ব্যবহার করেছি। বেশিরভাগ ব্যাকগ্রাউন্ড ছিল CSS গ্রেডিয়েন্ট, যাতে তাদের রঙের মান সামঞ্জস্য করা সহজ হয়। আমরা তারপর এই উপরে শিল্প স্তর.

অন্যান্য ইস্টার ডিম

ব্যক্তিগত স্পর্শ

সাইটটিকে আরও ব্যক্তিত্ব দিতে আমরা পৃষ্ঠাটিতে কয়েকটি ব্যক্তিগত স্পর্শ যুক্ত করেছি। প্রথমটি ছিল চরিত্রের কাস্ট, আমাদের দলের অনুপ্রেরণা থেকে আঁকা। আমরা নিষ্ক্রিয় দিনগুলিতে একটি থ্রোব্যাক-স্টাইল কার্সারও অন্তর্ভুক্ত করেছি এবং ফেভিকন শৈলীর সাথে খেলা করেছি।

কার্যকরী স্পর্শ

অতিরিক্ত কার্যকরী স্পর্শগুলির মধ্যে একটি হল "জাম্প টু টুডে" কার্যকারিতা, বিল্ডিংয়ের উপরে বসে থাকা একটি পাখির সাথে। এই পাখিটিতে এন্টার ক্লিক করা বা এন্টার টিপলে আপনি মাসের বর্তমান দিনে পৃষ্ঠায় নেমে আসবেন, যাতে আপনি দ্রুত সর্বশেষ লঞ্চে যেতে পারেন।

Designcember.com-এর একটি বিশেষ মুদ্রণ স্টাইলশীটও রয়েছে যেখানে আমরা মূলত একটি নির্দিষ্ট চিত্র পরিবেশন করছি যা 8.5" x 11" কাগজে সবচেয়ে ভাল কাজ করে যাতে আপনি নিজেই ক্যালেন্ডারটি মুদ্রণ করতে পারেন এবং সারা বছর উত্সব করতে পারেন৷

সব মিলিয়ে, ডিসেম্বরে সারা মাস UI ডেভেলপমেন্ট উদযাপন করার জন্য একটি মজাদার, অদ্ভুত আধুনিক ওয়েব অভিজ্ঞতা তৈরি করতে প্রচুর পরিশ্রম করা হয়েছে। আমরা আশা করি আপনি এটি উপভোগ করেছেন!