Chrome 64-এ নতুন

পিট লেপেজ

  • ResizeObservers এর জন্য সমর্থন, যখন একটি উপাদানের বিষয়বস্তুর আয়তক্ষেত্র তার আকার পরিবর্তন করে তখন আপনাকে অবহিত করবে।
  • মডিউলগুলি এখন import.meta সহ হোস্ট নির্দিষ্ট মেটাডেটা অ্যাক্সেস করতে পারে।
  • পপ আপ ব্লকার শক্তিশালী হয়.
  • window.alert() আর ফোকাস পরিবর্তন করে না।

এবং আরো অনেক আছে!

আমি পিট লেপেজ । চলুন ডুব দিয়ে দেখি Chrome 64-এ ডেভেলপারদের জন্য নতুন কী আছে!

পরিবর্তনের সম্পূর্ণ তালিকা চান? Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা দেখুন।

ResizeObserver

যখন একটি উপাদানের আকার পরিবর্তন হয় তখন ট্র্যাক করা কিছুটা ব্যথা হতে পারে। খুব সম্ভবত, আপনি ডকুমেন্টের resize ইভেন্টে একজন শ্রোতাকে সংযুক্ত করবেন, তারপর getBoundingClientRect বা getComputedStyle কল করুন। কিন্তু, এই উভয়ই লেআউট থ্র্যাশিং হতে পারে।

এবং যদি ব্রাউজার উইন্ডো আকার পরিবর্তন না করে, কিন্তু নথিতে একটি নতুন উপাদান যোগ করা হয়? অথবা আপনি display: none ? উভয়ই পৃষ্ঠার মধ্যে অন্যান্য উপাদানের আকার পরিবর্তন করতে পারে।

ResizeObserver যখনই একটি উপাদানের আকার পরিবর্তন হয় তখন আপনাকে অবহিত করে এবং উপাদানটির নতুন উচ্চতা এবং প্রস্থ প্রদান করে, লেআউট থ্র্যাশিংয়ের ঝুঁকি হ্রাস করে।

অন্যান্য পর্যবেক্ষকদের মত, এটি ব্যবহার করা বেশ সহজ, একটি ResizeObserver অবজেক্ট তৈরি করুন এবং কনস্ট্রাক্টরের কাছে একটি কলব্যাক পাস করুন। কলব্যাকে ResizeOberverEntries এর একটি অ্যারে দেওয়া হবে - প্রতি পর্যবেক্ষণ করা উপাদানের জন্য একটি এন্ট্রি-যা এলিমেন্টের জন্য নতুন মাত্রা ধারণ করে।

const ro = new ResizeObserver( entries => {
  for (const entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px × ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// Observe one or multiple elements
ro.observe(someElement);

ResizeObserver চেক আউট করুন: এটি আরো বিস্তারিত এবং বাস্তব বিশ্বের উদাহরণের জন্য উপাদানগুলির জন্য document.onresize মত ।

আমি ট্যাব-আন্ডার ঘৃণা করি। আপনি তাদের জানেন, যখন একটি পৃষ্ঠা কিছু গন্তব্যে একটি পপ-আপ খোলে এবং পৃষ্ঠাটি নেভিগেট করে। সাধারণত তাদের মধ্যে একটি হল একটি বিজ্ঞাপন বা এমন কিছু যা আপনি চান না।

Chrome 64 থেকে শুরু করে, এই ধরনের নেভিগেশন ব্লক করা হবে, এবং Chrome ব্যবহারকারীকে কিছু নেটিভ UI দেখাবে - তারা চাইলে রিডাইরেক্ট অনুসরণ করতে দেয়।

import.meta

জাভাস্ক্রিপ্ট মডিউল লেখার সময়, আপনি প্রায়ই বর্তমান মডিউল সম্পর্কে হোস্ট-নির্দিষ্ট মেটাডেটা অ্যাক্সেস করতে চান। Chrome 64 এখন মডিউলের মধ্যে import.meta প্রপার্টি সমর্থন করে এবং import.meta.url হিসাবে মডিউলের URL প্রকাশ করে।

এটি সত্যিই সহায়ক যখন আপনি বর্তমান HTML নথির বিপরীতে মডিউল ফাইলের সাথে সম্পর্কিত সংস্থানগুলি সমাধান করতে চান।

এবং আরো!

এইগুলি বিকাশকারীদের জন্য Chrome 64-এর কয়েকটি পরিবর্তন, অবশ্যই, আরও অনেক কিছু আছে।

  • Chrome এখন রেগুলার এক্সপ্রেশনে নামযুক্ত ক্যাপচার এবং ইউনিকোড প্রপার্টি এস্কেপ সমর্থন করে।
  • <audio> এবং <video> উপাদানগুলির জন্য ডিফল্ট preload মান এখন metadata । এটি ক্রোমকে অন্যান্য ব্রাউজারগুলির সাথে সঙ্গতিপূর্ণ করে এবং শুধুমাত্র মেটাডেটা লোড করার মাধ্যমে ব্যান্ডউইথ এবং সম্পদের ব্যবহার কমাতে সাহায্য করে, মিডিয়া নয়।
  • আপনি এখন একটি Request ক্যাশে মোড দেখতে Request.prototype.cache ব্যবহার করতে পারেন এবং একটি অনুরোধটি পুনরায় লোড করার অনুরোধ কিনা তা নির্ধারণ করতে পারেন৷
  • ফোকাস ম্যানেজমেন্ট এপিআই ব্যবহার করে, আপনি এখন preventScroll অ্যাট্রিবিউট দিয়ে স্ক্রোল না করে একটি উপাদানকে ফোকাস করতে পারেন।

window.alert()

ওহ, এবং আরও একটি! যদিও এটি সত্যিই একটি "বিকাশকারী বৈশিষ্ট্য" নয়, এটি আমাকে খুশি করে। window.alert() আর ফোরগ্রাউন্ডে ব্যাকগ্রাউন্ড ট্যাব আনে না! পরিবর্তে, ব্যবহারকারী যখন সেই ট্যাবে ফিরে যাবেন তখন সতর্কতা দেখানো হবে।

আর কোন এলোমেলো ট্যাব স্যুইচিং নয় কারণ কিছু একটা window.alert আমার উপর ছুড়ে দিয়েছে। আমি আপনার পুরানো গুগল ক্যালেন্ডার দেখছি.

আমাদের YouTube চ্যানেলে সাবস্ক্রাইব করতে ভুলবেন না, এবং যখনই আমরা একটি নতুন ভিডিও লঞ্চ করব আপনি একটি ইমেল বিজ্ঞপ্তি পাবেন৷

আমি পিট লেপেজ, এবং Chrome 65 রিলিজ হওয়ার সাথে সাথে, আমি আপনাকে বলতে এখানে থাকব -- Chrome-এ নতুন কি!