Chrome 77-এ নতুন

পিট লেপেজ

Chrome 77 এখন চালু হচ্ছে!

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

সবচেয়ে বড় বিষয়বস্তু পেইন্ট

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

ক্রোম 77-এ পাওয়া সবচেয়ে বড় বিষয়বস্তু পেইন্ট এপিআই , ভিউপোর্টে দৃশ্যমান বৃহত্তম সামগ্রী উপাদানের রেন্ডার সময় রিপোর্ট করে এবং পৃষ্ঠার মূল বিষয়বস্তু লোড হলে পরিমাপ করা সম্ভব করে।

সবচেয়ে বড় বিষয়বস্তুপূর্ণ পেইন্ট পরিমাপ করতে, আপনাকে একটি পারফরম্যান্স পর্যবেক্ষক ব্যবহার করতে হবে এবং largest-contentful-paint ইভেন্টগুলি সন্ধান করতে হবে।

let lcp;
const po = new PerformanceObserver((eList) => {
  const e = eList.getEntries();
  const last = e[e.length - 1];
  lcp = last.renderTime || last.loadTime;
});

const poOpts = {
  type: 'largest-contentful-paint',
  buffered: true
}
po.observe(poOpts);

যেহেতু একটি পৃষ্ঠা প্রায়শই পর্যায়ক্রমে লোড হয়, তাই এটি সম্ভব যে একটি পৃষ্ঠার সবচেয়ে বড় উপাদানটি পরিবর্তিত হবে, তাই আপনার বিশ্লেষণ পরিষেবাতে শুধুমাত্র শেষ largest-contentful-paint ইভেন্টটি রিপোর্ট করা উচিত।

addEventListener('visibilitychange', function fn() {
  const visState = document.visibilityState;
  if (lcp && visState === 'hidden') {
    sendToAnalytics({'lcp': lcp});
    removeEventListener('visibilitychange', fn, true);
  }
}, true);

web.dev-এ সবচেয়ে বড় কন্টেন্টফুল পেইন্ট সম্পর্কে ফিলের একটি দুর্দান্ত পোস্ট রয়েছে৷

নতুন ফর্ম ক্ষমতা

অনেক ডেভেলপার কাস্টম ফর্ম কন্ট্রোল তৈরি করে, হয় বিদ্যমান উপাদানগুলির চেহারা এবং অনুভূতি কাস্টমাইজ করার জন্য বা ব্রাউজারে অন্তর্নির্মিত নয় এমন নতুন নিয়ন্ত্রণ তৈরি করতে। সাধারণত এটি জাভাস্ক্রিপ্ট এবং লুকানো <input> উপাদান ব্যবহার করে, কিন্তু এটি একটি নিখুঁত সমাধান নয়।

Chrome 77-এ যোগ করা দুটি নতুন ওয়েব বৈশিষ্ট্য কাস্টম ফর্ম কন্ট্রোল তৈরি করা সহজ করে এবং বিদ্যমান অনেক সীমাবদ্ধতা দূর করে।

formdata ইভেন্ট

formdata ইভেন্ট হল একটি নিম্ন-স্তরের API যা যেকোন জাভাস্ক্রিপ্ট কোডকে একটি ফর্ম জমাদানে অংশগ্রহণ করতে দেয়। এটি ব্যবহার করতে, আপনি যে ফর্মের সাথে ইন্টারঅ্যাক্ট করতে চান তাতে একটি formdata ইভেন্ট লিসেনার যোগ করুন।

const form = document.querySelector('form');
form.addEventListener('formdata', ({formData}) => {
  formData.append('my-input', myInputValue);
});

যখন ব্যবহারকারী সাবমিট বোতামে ক্লিক করেন, ফর্মটি formdata ইভেন্টটি ফায়ার করে, যার মধ্যে একটি FormData অবজেক্ট রয়েছে যা জমা দেওয়া সমস্ত ডেটা ধারণ করে৷ তারপর, আপনার formdata ইভেন্ট হ্যান্ডলারে, আপনি formdata জমা দেওয়ার আগে আপডেট বা সংশোধন করতে পারেন৷

ফর্ম-সম্পর্কিত কাস্টম উপাদান

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

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

সমস্ত বিবরণের জন্য web.dev-এ আরও সক্ষম ফর্ম নিয়ন্ত্রণগুলি দেখুন!

নেটিভ অলস লোডিং

আমি নিশ্চিত নই কিভাবে আমি আমার শেষ ভিডিওতে নেটিভ অলস লোডিং মিস করেছি! এটি বেশ আশ্চর্যজনক, তাই আমি এখন এটি অন্তর্ভুক্ত করছি। অলস লোডিং হল এমন একটি কৌশল যা আপনাকে অ-গুরুত্বপূর্ণ সংস্থানগুলির লোডিং স্থগিত করতে দেয়, যেমন অফ-স্ক্রীন <img> 's, বা <iframe> 's - যতক্ষণ না সেগুলি প্রয়োজন হয়, আপনার পৃষ্ঠার কার্যক্ষমতা বৃদ্ধি করে৷

Chrome 76 থেকে শুরু করে, ব্রাউজারটি আপনার জন্য অলস লোডিং পরিচালনা করে, কাস্টম অলস লোডিং কোড লেখার প্রয়োজন ছাড়াই, বা একটি পৃথক জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে৷

ব্রাউজারকে জানাতে আপনি একটি ইমেজ চান, বা iframe lazy লোড করতে চান, loading="lazy" অ্যাট্রিবিউট ব্যবহার করুন। "ভাঁজের উপরে" ছবি এবং আইফ্রেমগুলি সাধারণত লোড হয়। এবং যেগুলি নীচে রয়েছে, শুধুমাত্র তখনই আনা হয় যখন ব্যবহারকারী তাদের কাছাকাছি স্ক্রোল করে।

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">

বিস্তারিত জানার জন্য web.dev-এ ওয়েবের জন্য ব্রাউজার স্তরের অলস-লোডিং দেখুন।

ক্রোম ডেভ সামিট 2019

11 এবং 12 নভেম্বর Chrome ডেভ সামিট আসছে৷

ওয়েব প্ল্যাটফর্মে আসা সাম্প্রতিক টুলস এবং আপডেটগুলি সম্পর্কে জানার এবং Chrome ইঞ্জিনিয়ারিং টিমের কাছ থেকে সরাসরি শোনার এটি একটি দুর্দান্ত সুযোগ৷

এটি আমাদের YouTube চ্যানেলে লাইভ স্ট্রিম করা হবে, অথবা আপনি যদি ব্যক্তিগতভাবে উপস্থিত হতে চান, আপনি Chrome Dev Summit 2019 ওয়েবসাইটে আপনার আমন্ত্রণের অনুরোধ করতে পারেন৷

এবং আরো!

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

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

এবং intl.NumberFormat API- এ নতুন পরিমাপ ইউনিট রয়েছে।

আরও পড়া

এটি শুধুমাত্র কিছু মূল হাইলাইট কভার করে। Chrome 77-এ অতিরিক্ত পরিবর্তনের জন্য নীচের লিঙ্কগুলি দেখুন৷

সাবস্ক্রাইব

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

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