Chrome 95-এ নতুন

পিট লেপেজ

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

  • ব্রাউজারে বেক করা URLPattern দিয়ে রাউটিং সহজ হয়ে যায়।
  • আই ড্রপার API রং নির্বাচন করার জন্য একটি অন্তর্নির্মিত টুল প্রদান করে।
  • একটি নতুন অরিজিন ট্রায়াল রয়েছে যা আপনাকে এখন হ্রাস করা UA স্ট্রিং গ্রহণ করার বিকল্প বেছে নিতে দেয়।
  • PWA সামিট ভিডিও সব অনলাইন.
  • এবং আরো অনেক আছে.

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

URLPattern সহ রাউটিং

প্রায় সব ওয়েব অ্যাপই কোনো না কোনোভাবে রাউটিং এর উপর নির্ভর করে যে এটি কোনো সার্ভারে চলমান কোড যা ডিস্কে ফাইলের জন্য একটি পথ ম্যাপ করে বা একটি একক-পৃষ্ঠার অ্যাপে যা ইউআরএল পরিবর্তিত হলে DOM আপডেট করে। URLPattern হল একটি নতুন ওয়েব প্ল্যাটফর্ম API যা রাউটিং প্যাটার্ন সিনট্যাক্সকে মানসম্মত করে।

এটি বিদ্যমান ফ্রেমওয়ার্কের ভিত্তি তৈরি করে, সাধারণ রাউটিং কাজগুলিকে সহজতর করে তোলে। উদাহরণ স্বরূপ, সম্পূর্ণ ইউআরএল, বা একটি ইউআরএল পাথনামের সাথে মেলানো, তারপর টোকেন এবং গ্রুপ মিল সম্পর্কে তথ্য ফেরত দেওয়া।

আপনি যদি ইতিমধ্যেই Express , Ruby on Rails, বা path-to-regexp- এ ব্যবহৃত রাউটিং সিনট্যাক্সের সাথে পরিচিত হন তবে এটি সম্ভবত পরিচিত দেখাবে।

এটি ব্যবহার করতে, একটি নতুন URLPattern() তৈরি করুন এবং আপনি যে প্যাটার্নের সাথে মিলতে চান তার বিবরণ প্রদান করুন। প্যাটার্নগুলিতে ওয়াইল্ডকার্ড, নামযুক্ত টোকেন গ্রুপ, রেগুলার এক্সপ্রেশন গ্রুপ এবং গ্রুপ মডিফায়ার থাকতে পারে।

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

উদাহরণ স্বরূপ, আসুন URLPattern দেখি যা Google ডক্স ব্যবহার করতে পারে। আমরা ফাইলের kind , ফাইল ID এবং কোন mode এটি খুলতে হবে তা উল্লেখ করব। তারপর প্যাটার্নটি ব্যবহার করতে, আমরা test() , অথবা exec() কল করতে পারি।

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern ডিফল্টরূপে Chrome এবং Edge সংস্করণ 95 এবং তার উপরে সক্রিয় করা আছে। এবং নোডের মতো ব্রাউজার বা পরিবেশের জন্য, যা এখনও এটি সমর্থন করে না, আপনি urlpattern-polyfill লাইব্রেরি ব্যবহার করতে পারেন।

জেফের নিবন্ধটি দেখুন URLPattern সম্পূর্ণ বিবরণের জন্য ওয়েব প্ল্যাটফর্মে রাউটিং নিয়ে আসে !

আই ড্রপার API দিয়ে রং বাছাই

আমি ব্যবহার করেছি প্রায় প্রতিটি ডিজাইন অ্যাপে একটি আই ড্রপার টুল রয়েছে, যা কোন কিছুর রঙ কি তা বের করা সহজ করে তোলে। কিছু ব্রাউজারে <input type=color> এর মধ্যে তৈরি আইড্রপার ক্ষমতা রয়েছে, কিন্তু এটি আদর্শ নয়।

আই ড্রপার এপিআই, মাইক্রোসফ্টের কিছু লোক দ্বারা প্রয়োগ করা হয়েছে ওয়েবে সেই কার্যকারিতা নিয়ে আসে। এটি ব্যবহার করতে, একটি নতুন EyeDropper() উদাহরণ তৈরি করুন, তারপর এটিতে open() কল করুন।

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

অন্যান্য অনেক আধুনিক ওয়েব API-এর মতো, এটি অ্যাসিঙ্ক্রোনাসভাবে কাজ করে, যাতে এটি মূল থ্রেডকে ব্লক না করে। ব্যবহারকারী যখন তাদের পছন্দের রঙে ক্লিক করে, তখন তারা যে রঙে ক্লিক করেছে তার সাথে এটি সমাধান হবে।

আপনি একটি দ্রুত ডেমো চেষ্টা করে দেখতে পারেন, এবং ত্রুটিতে কোডটি দেখতে পারেন।

পিডব্লিউএ সামিট

আপনি কি এই মাসের শুরুতে PWA সামিট দেখেছেন?

অনেক লোককে পিডব্লিউএ সম্পর্কে কথা বলতে এবং তাদের অভিজ্ঞতা ভাগ করে নেওয়া দেখতে দুর্দান্ত ছিল। আপনি যদি এটি মিস করেন, ভিডিওগুলি সব শেষ হয়ে গেছে, তাই PWASummit.org বা PWA সামিট ইউটিউব চ্যানেলে এটি দেখতে ভুলবেন না।

ইউজার-এজেন্ট রিডাকশন অরিজিন ট্রায়াল

ইউজার-এজেন্ট রিডাকশন হল প্যাসিভ ফিঙ্গার-প্রিন্টিং সারফেস কমানোর একটি প্রয়াস, ব্যবহারকারী-এজেন্ট স্ট্রিং-এর তথ্যকে শুধুমাত্র ব্রাউজারের ব্র্যান্ড এবং উল্লেখযোগ্য সংস্করণ, এর ডেস্কটপ বা মোবাইলের পার্থক্য, এবং এটি যে প্ল্যাটফর্মে চলছে তাতে কমিয়ে আনার মাধ্যমে।

Chrome 95 থেকে শুরু করে, একটি নতুন অরিজিন ট্রায়াল রয়েছে যা আপনাকে এখন হ্রাস করা UA স্ট্রিং গ্রহণ করতে বেছে নিতে দেয়৷ এটি আপনাকে Chrome-এ হ্রাসকৃত UA ডিফল্ট আচরণে পরিণত হওয়ার আগে সমস্যাগুলি আবিষ্কার এবং সমাধান করতে সক্ষম করবে৷

পরিবর্তনগুলি বেশ কয়েকটি রিলিজে ক্রমবর্ধমানভাবে প্রয়োগ করা হবে, তবে আপনার যা কিছু প্রস্তুত এবং পরীক্ষা করতে হবে তা এখনই প্রস্তুত।

সমস্ত বিবরণ এবং সময়রেখা developer.chrome.com- এ ব্যবহারকারী-এজেন্ট রিডাকশন অরিজিন ট্রায়াল পোস্টে রয়েছে৷

এবং আরো!

অবশ্যই আরো অনেক আছে.

আরও পড়া

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

সাবস্ক্রাইব

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

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