Chrome 86-এ নতুন

Pete LePage

Chrome 86 এখন স্থিতিশীল হতে শুরু করছে।

আপনার যা জানা দরকার তা এখানে:

• ফাইল সিস্টেম অ্যাক্সেস API এখন স্থিতিশীল অবস্থায় উপলব্ধ।
• ওয়েব HID এবং মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API-এর জন্য নতুন অরিজিন ট্রায়াল রয়েছে৷
• CSS-এ কিছু নতুন জিনিস আছে, এবং আরও অনেক কিছু ।

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

ফাইল সিস্টেম অ্যাক্সেস

আজ, আপনি <input type="file"> উপাদানটি ডিস্ক থেকে একটি ফাইল রিড ব্যবহার করতে পারেন। পরিবর্তনগুলি সংরক্ষণ করতে, একটি অ্যাঙ্কর ট্যাগে download যোগ করুন, এটি ফাইল পিকার দেখাবে, তারপর ফাইলটি সংরক্ষণ করবে৷ আপনি যে ফাইলটি খুলেছেন তাতে লেখার কোন উপায় নেই। যে কর্মপ্রবাহ বিরক্তিকর.

ফাইল সিস্টেম অ্যাক্সেস API (পূর্বে নেটিভ ফাইল সিস্টেম এপিআই) এর সাথে, যা এটির মূল ট্রায়াল থেকে স্নাতক হয়েছে এবং এখন স্থিতিশীল অবস্থায় উপলব্ধ, আপনি showOpenFilePicker() কল করতে পারেন, যা একটি ফাইল পিকার দেখায়, তারপর একটি ফাইল হ্যান্ডেল ফেরত দেয় যা আপনি করতে পারেন ফাইলটি পড়তে ব্যবহার করুন।

async function getFileHandle() {
  const opts = {
    types: [
      {
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt', '.text'],
          'text/html': ['.html', '.htm']
        }
      }
    ]
  };
  return await window.showOpenFilePicker(opts);
}

ডিস্কে একটি ফাইল সংরক্ষণ করতে, আপনি হয় সেই ফাইল হ্যান্ডেলটি ব্যবহার করতে পারেন যা আপনি আগে পেয়েছিলেন বা একটি নতুন ফাইল হ্যান্ডেল পেতে showSaveFilePicker() কল করতে পারেন।

async function saveFile(fileHandle) {
  if (!fileHandle) {
    fileHandle = await window.showSaveFilePicker();
  }
  const writable = await fileHandle.createWritable();
  await writable.write(contents);
  await writable.close();
}

লেখার আগে, ক্রোম চেক করবে ব্যবহারকারী লেখার অনুমতি দিয়েছে কিনা, যদি লেখার অনুমতি না দেওয়া হয়, Chrome প্রথমে ব্যবহারকারীকে অনুরোধ করবে।

showDirectoryPicker() কল করলে একটি ডিরেক্টরি খুলবে, যা আপনাকে ফাইলগুলির একটি তালিকা পেতে বা সেই ডিরেক্টরিতে নতুন ফাইল তৈরি করতে দেয়। আইডিই বা মিডিয়া প্লেয়ারের মতো জিনিসগুলির জন্য উপযুক্ত যা প্রচুর ফাইলের সাথে ইন্টারঅ্যাক্ট করে। অবশ্যই, আপনি কিছু লিখতে পারার আগে, ব্যবহারকারীকে লেখার অনুমতি দিতে হবে।

API-তে আরও অনেক কিছু আছে, তাই web.dev-এ ফাইল সিস্টেম অ্যাক্সেস নিবন্ধটি দেখুন।

অরিজিন ট্রায়াল: WebHID

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

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

butOpenHID.addEventListener('click', async (e) => {
  const deviceFilter = { vendorId: 0x0fd9 };
  const opts = { filters: [deviceFilter] };
  const devices = await navigator.hid.requestDevice(opts);
  myDevice = devices[0];
  await myDevice.open();
  myDevice.addEventListener('inputreport', handleInpRpt);
});

ওয়েব ভিত্তিক ভিডিও চ্যাট অ্যাপগুলি বিশেষ স্পিকারগুলিতে টেলিফোনি বোতামগুলি ব্যবহার করতে পারে, কল শুরু করতে বা শেষ করতে, অডিও নিঃশব্দ করতে এবং আরও অনেক কিছু করতে পারে।

অবশ্যই, এই ধরনের শক্তিশালী API, শুধুমাত্র তখনই ডিভাইসের সাথে ইন্টারঅ্যাক্ট করতে পারে যখন ব্যবহারকারী স্পষ্টভাবে এটির অনুমতি দিতে চান।

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

অরিজিন ট্রায়াল: মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API

আজ, আপনি window.screen() কল করে ব্রাউজার উইন্ডো চালু থাকা স্ক্রিনের বৈশিষ্ট্যগুলি পেতে পারেন। কিন্তু যদি আপনার একটি মাল্টি-মনিটর সেটআপ থাকে? দুঃখিত, ব্রাউজারটি শুধুমাত্র এটি বর্তমানে যে স্ক্রীনটি চালু আছে সে সম্পর্কে আপনাকে বলবে৷

const screen = window.screen;
console.log(screen);
// {
//   availHeight: 1612,
//   availLeft: 0,
//   availTop: 23,
//   availWidth: 3008,
//   colorDepth: 24,
//   orientation: {...},
//   pixelDepth: 24,
//   width: 3008
// }

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

আপনি API ব্যবহার করার আগে, আপনাকে অনুমতির অনুরোধ করতে হবে। যদি আপনি না করেন, আপনি যখন প্রথমবার এটি ব্যবহার করার চেষ্টা করবেন তখন ব্রাউজার ব্যবহারকারীকে অনুরোধ করবে৷

async function getPermission() {
  const opt = { name: 'window-placement' };
  try {
    const perm = await navigator.permissions.query(opt);
    return perm.state === 'granted';
  } catch {
    return false;
  }
}

একবার ব্যবহারকারীর অনুমতি দেওয়া হলে, window.getScreens() কল করা একটি প্রতিশ্রুতি প্রদান করে যা Screen অবজেক্টের একটি অ্যারের সাথে সমাধান করে।

const screens = await window.getScreens();
console.log(screens);
// [
//   {id: 0, internal: false, primary: true, left: 0, ...},
//   {id: 1, internal: true, primary: false, left: 3008, ...},
// ]

আমি requestFullScreen() কল করার সময় বা নতুন উইন্ডো স্থাপন করার সময় সেই তথ্যটি ব্যবহার করতে পারি। web.dev-এ মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট এপিআই নিবন্ধের সাথে টম তার বেশ কয়েকটি ডিসপ্লে পরিচালনা করার সমস্ত বিবরণ রয়েছে৷

এবং আরো

নতুন CSS নির্বাচক, :focus-visible , আপনাকে ডিফল্ট ফোকাস সূচক প্রদর্শন করার সিদ্ধান্ত নেওয়ার সময় ব্রাউজারটি ব্যবহার করে একই হিউরিস্টিকটিতে অপ্ট-ইন করতে দেয়।

/* Focusing the button with a keyboard will
   show a dashed black line. */
button:focus-visible {
  outline: 4px dashed black;
}

/* Focusing the button with a mouse, touch,
   or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}

আপনি সিএসএস ::marker সিউডো-এলিমেন্টের সাহায্যে তালিকার জন্য রঙ, আকার বা সংখ্যা বা বুলেটের ধরন কাস্টমাইজ করতে পারেন।

li::marker {
  content: '😍';
}
li:last-child::marker {
  content: '🤯';
}

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

আরও পড়া

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

• Chrome DevTools এ নতুন কি আছে (86)
• Chrome 86 অবচয় এবং অপসারণ
• Chrome 86-এর জন্য ChromeStatus.com আপডেট
• Chrome 86-এ JavaScript-এ নতুন কী আছে
• Chromium সোর্স রিপোজিটরি পরিবর্তনের তালিকা

সদস্যতা

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

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