একটি ইভেন্ট ছাড়াও 2022 ডেনভার গতকাল গুটিয়ে গেছে। এবং যখন আমি এই তিনদিনের মধ্যে এটি করতে অক্ষম ছিলাম, আমি গতকালের অ্যাকশনটি ধরলাম - এবং এটি ছিল অসাধারণ. আমি খুব সামাজিক বা বহির্মুখী নই, তবে এটিই ছিল প্রথম সম্মেলন যা আমি কমপক্ষে কয়েক বছরে গিয়েছিলাম, এবং লোকেদের ব্যক্তিগতভাবে দেখা অবিশ্বাস্যভাবে সতেজ ছিল।
আমি নোট নিলাম, অবশ্যই! আমি ভেবেছিলাম আমি সেগুলি এখানে পোস্ট করব কারণ ভাগ করা যত্নশীল। অন্তত, গত রাতে আমার ডেজার্টের একটি কামড়ের জন্য জিজ্ঞাসা করার সময় আমার ছয় বছর বয়সী আমাকে অন্য দিন বলেছিল।
আমি স্পিকার দ্বারা এটি ভেঙে দেব। ন্যায্য সতর্কতা: আমি হস্তলিখিত নোট এবং একটি চমত্কার ভিজ্যুয়াল বন্ধু সম্পর্কে সব, তাই আমার নোট কম হতে ঝোঁক… অধিকাংশ তুলনায় কাঠামো. এবং এই নোটগুলি এমন জিনিস যা আমার কাছে দাঁড়িয়েছে। তারা এমনকি উপস্থাপকের মূল ধারণা নাও হতে পারে, কিন্তু তারা আমার দৃষ্টি আকর্ষণ করেছে!
ক্রিস কোয়ার: ওয়েবসাইটগুলো এখন ভালো
ক্রিস এর আগে এই বক্তৃতা দিয়েছেন (আমরা এটা লিঙ্ক আপ মাত্র গত সপ্তাহে), কিন্তু এই সময় এটিকে উল্লেখযোগ্যভাবে প্রসারিত করেছে, বিশেষ করে বিস্তারিত সহ ধারক আপেক্ষিক ইউনিট যার সাথে মিলিত হলে clamp(), আরও সঠিক প্রতিক্রিয়ার জন্য তৈরি করুন কারণ মানগুলি ভিউপোর্টের পরিবর্তে কন্টেইনারের সাথে সম্পর্কিত। সুতরাং, আপনি জানেন কিভাবে আমরা প্রায়শই ভিউপোর্ট প্রস্থ ব্যবহার করি (vh) তরল ধরনের জন্য ইউনিট?
font-size: clamp(1rem, 1rem + 2vw, 2rem);ওয়েল, আমরা মত একটি ধারক আপেক্ষিক ইউনিট ব্যবহার করতে পারেন ধারক ক্যোয়ারী ইনলাইন আকার (cqi) পরিবর্তে, কোথায় 1cqi ধারকটির ইনলাইন আকারের 1% এর সমান (এখানে যে খসড়া বৈশিষ্ট আছে):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);ক্রিস এর পারফরম্যান্স সুবিধা সম্পর্কেও বেশ কিছু কথা বলেছেন প্রান্তে হোস্টিং. সম্ভবত কোন আশ্চর্য কারণ তিনি লিখিত এটি সম্পর্কে এখানে কয়েকবার বেশি। এমনকি যে কেউ ইতিমধ্যে সেই নিবন্ধগুলি পড়েছিল, আমি সত্যই প্রান্তে কম্পিউটিংয়ের সম্পূর্ণ ধারণাটি উপলব্ধি করতে পারিনি।
ধারণাটি প্রতারণামূলকভাবে সহজ: বিশ্বব্যাপী CDN পরিবেশন করতে পারে সম্পদ দ্রুত কারণ তারা ভৌগলিকভাবে ব্যবহারকারীর কাছাকাছি তাদের হোস্ট করে। রাস্টার ইমেজ পরিবেশন করার জন্য এটি বেশ আদর্শ অনুশীলন। কিন্তু এটি স্ট্যাটিক ফাইলগুলিতে প্রসারিত হয়েছে, যেমন একই HTML, CSS, এবং JavaScript ফাইল যা একটি সাইটকে শক্তিশালী করে — সেগুলিকে আগে থেকে তৈরি করে এবং দ্রুত গ্লোবাল CDN থেকে ইতিমধ্যেই সংকলিত এবং অপ্টিমাইজ করা ফাইলগুলিকে পরিবেশন করে৷ এটা পুরো Jamstack ধারণা!
কিন্তু যদি আপনি এখনও এটি থেকে একটি সার্ভার প্রতিক্রিয়া প্রয়োজন হয়? এটা খুব এজ-ওয়াই নয়, তাই না? ঠিক আছে, এখন আমাদের কাছে এমন হ্যান্ডলার আছে যারা একটি একক ইউআরএলে চলতে সক্ষম ডেটা আগে থেকে আনতে এবং রেন্ডারের আগে এটিকে ইনজেকশন দিতে পারে — সরাসরি CDN থেকে। অবশ্যই, ব্যাকগ্রাউন্ডে অতিরিক্ত কাজ হচ্ছে। তবুও, সত্য যে আমরা গতিশীলভাবে ডেটা আনতে পারি, এটিকে ইনজেকশন করতে পারি, এটিকে প্রাক-বিল্ড করতে পারি, এটি স্ট্যাটিকভাবে পরিবেশন করতে পারি চাহিদা সাপেক্ষে, এবং এটি ভৌগোলিকভাবে ব্যবহারকারীর কাছাকাছি চালানোর ফলে এটি জ্বলন্তভাবে দ্রুত হয়।
Tolu Adegbite: কিভাবে ARIA এ জিতবেন এবং ওয়েব অ্যাক্সেসিবিলিটি প্রভাবিত করবেন
ভাল ভগবান এই একটি চমৎকার উপস্থাপনা ছিল! Tolu Adegbite আমাকে WAI-ARIA-তে এত কঠোরভাবে স্কুলে পাঠায় যে তার শেয়ার করা সমস্ত রত্ন - ভূমিকা লিখতে আমার খুব কষ্ট হয়েছিল! রাজ্যগুলি ! লেবেলিং ! বর্ণনা ! সবকিছু অসাধারণভাবে আচ্ছাদিত ছিল, এবং আমি জানি যে আমি বারবার ফিরে আসব।
কিন্তু একটি নির্দিষ্ট জিনিস যা আমার দৃষ্টি আকর্ষণ করেছে তা হল ইনলাইন SVG-এর অ্যাক্সেসযোগ্যতা। যদিও SVG অন্যান্য ধরনের ডিজাইন সম্পদের সাথে সম্পর্কিত, তবুও দিনের শেষে এটিকে মার্কআপ করার বিষয়টি এটিকে আলাদা করে দেয় কারণ এটি সর্বদা একটি চিত্র হিসাবে চিহ্নিত করা হয় না.
সহায়ক প্রযুক্তি একটি সঠিক অ্যাক্সেসযোগ্য ভূমিকা এবং লেবেল দিয়ে একটি চিত্র হিসাবে ইনলাইন SVG পড়ার সম্ভাবনা বেশি:
মরিয়ম সুজান: !গুরুত্বের ক্যাসকেডিং স্তর
আরে, আরেকটি সিএসএস-ট্রিক্স অ্যালাম! মরিয়ম সময় এবং প্রচেষ্টা একটি গুচ্ছ ব্যয় করা হয়েছে ক্যাসকেড স্তর স্পেসিফিকেশন. তিনি একটি লিখেছেন তাদের সম্পর্কে বড় ওল' গাইড এখানে CSS-Tricks এ এবং একটি ইভেন্ট এ্যাপার্ট এ সেগুলি সম্পর্কে কথা বলেছি।
আমার সাথে যা আটকে গেছে তা হল এটি কতটা বড় মানসিক পরিবর্তন। ধারণাটি জটিল নয়, প্রতি সে. ঘোষণা করুন @layer CSS নথির শীর্ষে, স্তরগুলিকে নির্দিষ্টতার ক্রমে তালিকাভুক্ত করুন, তারপর সেই স্তরগুলিতে শৈলী লিখুন। কিন্তু আমার মতো একজন পুরানো ডাইনোসরের জন্য যিনি কিছুক্ষণ ধরে CSS লিখছেন, আমাকে এই বাস্তবতায় অভ্যস্ত হতে হবে যে ক্যাসকেড স্তরগুলি একজন সাধারণ শ্রেণি নির্বাচকের পক্ষে এমন কিছুকে পরাজিত করা সম্ভব করে যা সাধারণত উচ্চতর নির্দিষ্টতা রাখে, একটি আইডির মত।
🤯
মরিয়ম রুমটিকে আরও স্মরণ করিয়ে দিয়েছিলেন যে ক্যাসকেড স্তরগুলি আমাদের নির্দিষ্টতা-ব্যবস্থাপনাকারী টুলবেল্টে শুধুমাত্র একটি টুল, যা নির্দিষ্টতাকে প্রভাবিত করে এমন নির্বাচক ছাড়াও (যেমন, :is(), :where(), এবং :has()).
ওহ, এবং এটি একটি আকর্ষণীয় খবর. মরিয়ম সিএসএস-এর নির্দিষ্টতার ইতিহাসের মধ্য দিয়ে হেঁটে যাওয়ার সময়, তিনি এটি স্মরণ করেছিলেন !important প্রাথমিকভাবে ব্যবহারকারী এজেন্ট এবং লেখক শৈলী ওভাররাইড করার জন্য ব্যবহারকারীদের জন্য একটি টুল হিসাবে ডিজাইন করা হয়েছিল। কিন্তু লাইনের নীচে কোথাও, আমরা লেখকের শৈলীগুলিকে শীর্ষে জোর করতে এটি গ্রহণ করেছি। ক্যাসকেড স্তর অপসারণ সাহায্য ছুতা ব্যবহার করা প্রয়োজন !important কারণ তারা আমাদের শক্তি প্রদান করে "স্তরগুলিকে অগ্রাধিকার দিন এবং উত্তরাধিকার রক্ষা করা. "
খুব সুন্দর করে বলেছেন, মরিয়ম!
ডেভ রুপার্ট: আপনার অ্যাক্সেসিবিলিটি ব্যাকলগ আনব্লক করা
আপনার সাইটে রিপোর্ট করা সমস্যা সম্পর্কে শত শত GitHub বিজ্ঞপ্তিতে একদিন জেগে ওঠার কল্পনা করুন। আপনি এমনকি কোথায় শুরু করবেন? সম্ভবত আপনার ল্যাপটপ বন্ধ করুন এবং পরিবর্তে একটি রুট ক্যানেল পেতে? ডেভের সাথে যে হয়েছিল! একটি স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি অডিট ত্রুটির একটি বিশাল স্তূপ ফিরিয়ে দিয়েছে এবং সেগুলিকে ঠিক করার জন্য ডেভকে টিকিট হিসাবে বরাদ্দ করেছে৷
কিন্তু তিনি সেই সমস্যাগুলির একটি এক্সেল স্প্রেডশীট নেওয়ার পরে একটি প্যাটার্ন লক্ষ্য করেছিলেন, সেগুলিকে আরও ভাল দেখার জন্য ধারণায় নিয়ে যাওয়া, অপ্রয়োজনীয় কলামগুলি লুকিয়ে রাখা, সবকিছুকে শ্রেণিবদ্ধ করা এবং ফলাফলগুলি লজিক্যাল গ্রুপে প্রদর্শন করা। রিপোর্ট করা সমস্যাগুলির মধ্যে অনেকগুলি একই সমস্যা একাধিক পৃষ্ঠায় পুনরাবৃত্তি হয়েছিল৷ শুধুমাত্র একটি স্বয়ংক্রিয় পরীক্ষা মুষ্টিমেয় ত্রুটি ফিরিয়ে দেয় তার মানে এই নয় যে তারা সবই অনন্য। এটি টিকিটের একটি সুন্দর অংশ হ্রাস করেছে।
তিনি দেখাতে গিয়েছিলেন কীভাবে - তুলনামূলকভাবে অল্প প্রচেষ্টায় - সমস্যাগুলির ব্যাকলগ প্রায় 50% হ্রাস পেয়েছে।
সেখানে অনেক কিছু সংগ্রহ করার আছে, বিশেষ করে আমরা কীভাবে আমাদের কাজ প্রক্রিয়া এবং সংগঠিত করি সে সম্পর্কে। আমার জন্য সবচেয়ে বড় টেকঅ্যাওয়ে হল যখন ডেভ বলেছিল যে আমাদের প্রক্রিয়া এবং সরঞ্জামগুলির উপর ব্যক্তি এবং মিথস্ক্রিয়াকে জোর দিতে হবে। অ্যাক্সেসিবিলিটি ত্রুটির জন্য একটি স্ক্যান করার মতো সরঞ্জামগুলি সহায়ক, তবে তারা পুরো গল্পটি নাও বলতে পারে৷ তাদের কথায় তাদের নেওয়ার পরিবর্তে, জগাখিচুড়িতে ডুব দেওয়ার আগে প্রশ্ন জিজ্ঞাসা করা এবং আরও প্রসঙ্গ অর্জন করা মূল্যবান।
একটি বোনাস হিসাবে, নোটনে সমস্যাগুলিকে পুনর্গঠন করার ফলে ডেভকে এমনভাবে গোষ্ঠীগত সমস্যাগুলি করার অনুমতি দেওয়া হয়েছে যা স্পষ্টভাবে দেখায় যে তার পণ্য কোন প্রতিবন্ধকতার বিরুদ্ধে সক্রিয়ভাবে বৈষম্য করছে, তাকে সেই মিসগুলির জন্য আরও বেশি সহানুভূতি দেয় এবং কীভাবে সেগুলিকে অগ্রাধিকার দেওয়া যায়৷
হুই জিং চেনের আরও একটি ভার্চুয়াল সেশন দিনটিকে ক্যাপ করেছে, কিন্তু স্বীকার করছি, আমি এর প্রায় অর্ধেক মিস করেছি কারণ আমি হলওয়ে কথোপকথন করছিলাম। কথোপকথনটি মূল্যবান ছিল, যদিও আমি বিরক্ত হয়েছি আমি উপস্থাপনাটি মিস করেছি। এটি প্রকাশিত হলে আমি এটির ভিডিও দেখব!
