মডার্ন ওয়েব নির্দেশিকা এখন স্টেবল! বিশেষজ্ঞদের দ্বারা যাচাই করা ওয়েব ডেভেলপমেন্টের পেশাদার পদ্ধতির মাধ্যমে আপনার কোডিং এজেন্ট আপগ্রেড করুন। ঘোষণাটি পড়ুন।

আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

Chrome 93-এ নতুন

Pete LePage

আপনার যা জানা প্রয়োজন:

আপনি এখন import স্টেটমেন্ট ব্যবহার করে CSS স্টাইল শিট লোড করতে পারবেন, ঠিক যেমন জাভাস্ক্রিপ্ট মডিউল।
ইনস্টল করা পিডব্লুএ(PWA) URL হ্যান্ডলার হিসেবে রেজিস্টার করতে পারে, যার ফলে ব্যবহারকারীরা সরাসরি আপনার পিডব্লুএ(PWA)-তে যেতে পারেন।
আপনার মতামতের ভিত্তিতে মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API আপডেট করা হয়েছে এবং দ্বিতীয় অরিজিন ট্রায়াল শুরু করা হয়েছে।
PWA সামিট ৬-৭ অক্টোবর অনুষ্ঠিত হবে।
এবং আরও অনেক কিছু আছে।

আমি পিট লেপেজ, বাড়ি থেকে কাজ ও শুটিং করছি, আসুন Chrome 93-এ ডেভেলপারদের জন্য নতুন কী আছে তা দেখে নেওয়া যাক।

CSS মডিউল স্ক্রিপ্ট

আপনি এখন import স্টেটমেন্টের মাধ্যমে CSS স্টাইল শিট লোড করতে পারবেন, ঠিক যেমন JavaScript মডিউল। স্টাইল শিটগুলি তখন ডকুমেন্টে প্রয়োগ করা যেতে পারে বা কনস্ট্রাক্টেবল স্টাইলশিটের মতো একইভাবে শ্যাডো রুট।

নতুন CSS মডিউল স্ক্রিপ্ট ফিচারটি কাস্টম এলিমেন্টের জন্য দারুণ। এবং JavaScript থেকে CSS প্রয়োগ করার অন্যান্য উপায়ের মতো, এলিমেন্ট তৈরি করার বা CSS টেক্সটের JavaScript স্ট্রিং নিয়ে ঝামেলা করার প্রয়োজন নেই।

এটি ব্যবহার করতে, assert {type: 'css'}-এর সাথে স্টাইল শিট ইমপোর্ট করুন, তারপর adoptedStyleSheets কল করে document বা shadowRoot-এ এটি প্রয়োগ করুন।

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

তবে সাবধান, আপনি যদি assert বাদ দেন - ফাইলটিকে JavaScript হিসেবে বিবেচনা করা হবে এবং কাজ করবে না!

সম্পূর্ণ বিবরণের জন্য web.dev-এ স্টাইলশিট ইমপোর্ট করতে CSS মডিউল স্ক্রিপ্ট ব্যবহার করা দেখুন।

Multi-Screen Window Placement API

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

মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API-এর সাহায্যে ব্যবহারকারীর মেশিনে কানেক্ট করা ডিসপ্লে গণনা করা এবং নির্দিষ্ট স্ক্রিনে উইন্ডো প্লেস করা সম্ভব হয়। এটি এর দ্বিতীয় অরিজিন ট্রায়াল এবং আপনার মতামতের ভিত্তিতে আমরা অনেক পরিবর্তন করেছি।

ডিভাইসের সাথে একাধিক স্ক্রিন কানেক্ট করা আছে কিনা তা আপনি দ্রুত চেক করতে পারবেন:

const isExtended = window.screen.isExtended;
// returns true/false

তবে, মূল কার্যকারিতা window.getScreens()-এ রয়েছে, যা অ্যাটাচ করা ডিসপ্লে সম্পর্কে সব বিবরণ প্রদান করে।

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

যেমন, আপনি প্রাথমিক স্ক্রিন নির্ধারণ করতে পারেন, তারপর সেই স্ক্রিনে কোনও এলিমেন্ট দেখাতে requestFullscreen() ব্যবহার করতে পারেন।

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

এবং এটি পরিবর্তনের জন্য শোনার একটি উপায় প্রদান করে, উদাহরণস্বরূপ যদি একটি নতুন ডিসপ্লে প্লাগ ইন করা হয়, বা সরানো হয়।

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

আরও জানতে, web.dev-এ টমের লেখা নিবন্ধ মাল্টি-স্ক্রিন উইন্ডো প্লেসমেন্ট API-এর মাধ্যমে একাধিক ডিসপ্লে ম্যানেজ করা পড়ুন।

সংক্ষিপ্ত রিলিজ সাইকেল

মার্চ মাসে, আমরা রিলিজ সাইকেল ছোট করার এবং প্রতি চার সপ্তাহে Chrome-এর নতুন ভার্সন শিপ করার পরিকল্পনা ঘোষণা করেছি।

সেই সময় এসে গেছে এবং আমরা ২১ সেপ্টেম্বর Chrome 94 রিলিজ করব। আপনি Chrome ক্যালেন্ডার থেকে প্রতিটি ভার্সনের জন্য পরিকল্পিত রিলিজের তারিখ খুঁজে পেতে পারেন।

নতুন PWA ফিচার

আপনি প্রোগ্রেসিভ ওয়েব অ্যাপ তৈরি করলে, দুটি নতুন অরিজিন ট্রায়াল চেক করে দেখতে পারেন।

পিডব্লুএ(PWA)-এর জন্য URL হ্যান্ডলার

আপনার কাছে কোনও PWA ইনস্টল করা থাকলে এবং আপনি সেই PWA-এর কোনও লিঙ্কে ক্লিক করলে, আপনি সম্ভবত সেটি ব্রাউজার ট্যাবে নয়, PWA-তে খুলতে চাইবেন।

আপনার ওয়েব অ্যাপ ম্যানিফেস্টে url_handlers উল্লেখ করে এবং আপনার .well-known/ ডিরেক্টরিতে একটি web-app-origin-association ফাইল যোগ করে, আপনি ব্রাউজারকে জানাতে পারেন যে কোনও ব্যবহারকারী আপনার PWA-এর লিঙ্কে ক্লিক করলে, সেটি যেন ইনস্টল করা PWA-এর মধ্যে খোলে।

manifest.json ফাইলে url_handlers-এর উদাহরণ:

{
  ...
  "url_handlers": [
    {"origin": "https://music.example.com"}
  ]
}

web-app-origin-association ফাইলের উদাহরণ:

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

এবং একটু অতিরিক্ত যাচাইকরণের মাধ্যমে, আপনি এমনকি আপনার মালিকানাধীন অন্যান্য উৎস থেকে আপনার PWA হ্যান্ডেল লিঙ্কগুলিও পেতে পারেন।

অরিজিন ট্রায়াল সম্পর্কে সব তথ্য web.dev-এ URL হ্যান্ডলার হিসেবে PWA-তে আছে।

উইন্ডো কন্ট্রোল ওভারলে

উইন্ডো কন্ট্রোল ওভারলে ক্লায়েন্ট এরিয়াকে বাড়িয়ে পুরো উইন্ডো কভার করে, যার মধ্যে টাইটেল বার এবং উইন্ডো কন্ট্রোল বোতাম, যেমন বন্ধ করা, বড় করা এবং ছোট করার বোতাম অন্তর্ভুক্ত।

আপনার ইনস্টল করা PWA যাতে অন্যান্য ইনস্টল করা অ্যাপের মতো দেখায়, তার জন্য আপনি এই ফিচার ব্যবহার করতে পারেন।

অরিজিন ট্রায়াল সম্পর্কে আরও তথ্যের জন্য, আপনার পিডব্লুএ(PWA) অ্যাপ্লিকেশনের টাইটেল বারের উইন্ডো কন্ট্রোল ওভারলে কাস্টমাইজ করুন নিবন্ধটি দেখুন।

PWA Summit

অক্টোবর মাসে PWA সামিট অনুষ্ঠিত হতে চলেছে। এটি একটি ফ্রি, অনলাইন কনফারেন্স যা প্রোগ্রেসিভ ওয়েব অ্যাপের মাধ্যমে সবাইকে সফল হতে সাহায্য করার উপর ফোকাস করে। PWA সামিট হল PWA প্রযুক্তি তৈরির সাথে জড়িত কয়েকটি ভিন্ন কোম্পানির লোকজনের মধ্যে একটি সহযোগিতা: Google, Intel, Microsoft এবং Samsung।

এখানে অনেক দুর্দান্ত আলোচনা এবং কন্টেন্ট রয়েছে। আপনি PWASummit.org থেকে আরও জানতে এবং রেজিস্টার করতে পারবেন।

এবং আরও অনেক কিছু!

অবশ্যই, আরও অনেক কিছু আছে।

Flexbox এবং flexbox আইটেমে অ্যালাইনমেন্ট কীওয়ার্ডের জন্য অতিরিক্ত সহায়তা যোগ করা হয়েছে: start, end, self-start, self-end, left এবং right।
অ্যাসিঙ্ক ক্লিপবোর্ড API-তে এখন SVG ফাইল কাজ করে।
এবং, meta theme-color সেট করার সময় media অ্যাট্রিবিউটকে সম্মান জানানো হবে, তাই আপনি লাইট ও ডার্ক মোডের জন্য আলাদা থিমের রঙ নির্দিষ্ট করতে পারবেন।

<meta name="theme-color"
      media="(prefers-color-scheme: light)"
      content="white">

<meta name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="black">