আমাদের ৩-দিনের অনলাইন কমিউনিটি ইভেন্ট চলাকালীন ঘোষণা করা প্রধান খবর এবং আপডেটের সারসংক্ষেপ এবং আসন্ন আঞ্চলিক ইভেন্ট সম্পর্কে একটি রিমাইন্ডার।
আমরা এইমাত্র আমাদের তিন দিনের ইভেন্ট, web.dev LIVE শেষ করেছি, যেখানে ওয়েব কমিউনিটির কিছু সদস্য ওয়েব ডেভেলপমেন্টের বর্তমান পরিস্থিতি সম্পর্কে কথা বলতে অনলাইনে একত্রিত হয়েছিলেন। আমরা প্রতিদিন আলাদা আলাদা আঞ্চলিক টাইমজোনে শুরু করেছি এবং Googler-রা টুল ও নির্দেশিকা দিয়ে ডেভেলপারদের সাহায্য করার জন্য আপডেট, খবর ও পরামর্শ শেয়ার করেছেন যাতে ওয়েবকে স্থিতিশীল, শক্তিশালী ও অ্যাক্সেসযোগ্য রাখা যায়।
আপনি লাইভ স্ট্রিমের কিছু অংশ মিস করে থাকলে, সব সেশন রেকর্ড করা হয় এবং YouTube-এ দেখার জন্য উপলভ্য থাকে। এছাড়াও, সারা বিশ্ব জুড়ে আমাদের আসন্ন আঞ্চলিক ইভেন্ট আছে যা Google Developer Groups-এর দ্বারা আয়োজিত এবং web.dev LIVE-এ আমরা যে বিষয়গুলি কভার করেছি তার উপর গভীর আলোচনা সেশন প্রদান করবে।
তিন দিন ধরে শেয়ার করা কিছু খবর ও আপডেট সম্পর্কে খুঁটিয়ে জেনে নেওয়া যাক।
ওয়েব ভাইটাল
Chrome টিম Web Vitals উদ্যোগের ঘোষণা করেছে যাতে ডেভেলপাররা ওয়েব প্ল্যাটফর্মে ব্যবহারকারীদের দারুণ অভিজ্ঞতা প্রদান করতে পারেন, তার জন্য একীভূত নির্দেশিকা, মেট্রিক ও টুল প্রদান করা যায়। এছাড়াও, Google Search টিম সম্প্রতি ঘোষণা করেছে যে তারা র্যাঙ্কিংয়ের মাপকাঠি হিসেবে পৃষ্ঠা দেখার অভিজ্ঞতা মূল্যায়ন করবে এবং এর ভিত্তি হিসেবে Core Web Vitals মেট্রিক অন্তর্ভুক্ত করবে।
২০২০ Core Web Vitals-এর তিনটি স্তম্ভ হল লোডিং, ইন্টারঅ্যাক্টিভিটি এবং পৃষ্ঠার কন্টেন্টের ভিজ্যুয়াল স্থিতিশীলতা, যা নিম্নলিখিত মেট্রিক্স দ্বারা ক্যাপচার করা হয়:
- Largest Contentful Paint লোড স্পিড পরিমাপ করে এবং পৃষ্ঠা লোড টাইমলাইনে সেই পয়েন্ট চিহ্নিত করে যখন পৃষ্ঠার মূল কন্টেন্ট লোড হয়ে গেছে বলে মনে হয়।
- ফার্স্ট ইনপুট ডিলে রেসপন্সিভনেস পরিমাপ করে এবং ব্যবহারকারী যখন কোনও পৃষ্ঠার সাথে প্রথমবার ইন্টার্যাক্ট করার চেষ্টা করেন তখন তার অভিজ্ঞতাকে পরিমাণগতভাবে প্রকাশ করে।
- Cumulative Layout Shift ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে এবং পৃষ্ঠার কন্টেন্টের অপ্রত্যাশিত মুভমেন্টের পরিমাণ নির্ধারণ করে।
web.dev LIVE-এ, আমরা Core Web Vitals-এর জন্য অপ্টিমাইজ এবং Chrome DevTools ব্যবহার করে আপনার সাইটের vitals ভ্যালু এক্সপ্লোর করার পেশাদার পদ্ধতি শেয়ার করেছি। এছাড়াও, আমরা পারফর্ম্যান্স সম্পর্কিত আরও অনেক আলোচনা শেয়ার করেছি যা আপনি web.dev/live লিঙ্কে গিয়ে প্রথম দিনের শিডিউলে দেখতে পাবেন।
tooling.report
ওয়েবের মতো এত বড় প্ল্যাটফর্মের জন্য ডেভেলপ করা চ্যালেঞ্জিং হতে পারে। বিল্ড টুল প্রায়শই আপনার ওয়েব ডেভেলপমেন্ট প্রোজেক্টের মূল অংশ হিসেবে কাজ করে, আপনার ডেভেলপার ও প্রোডাক্ট লাইফসাইকেল ম্যানেজ করার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।
আমরা সবাই জটিল বিল্ড কনফিগারেশন ফাইল দেখেছি, তাই ওয়েব ডেভেলপার এবং টুলিং লেখকদের ওয়েবের জটিলতা জয় করতে সাহায্য করার জন্য আমরা tooling.report তৈরি করেছি। এটি এমন একটি ওয়েবসাইট যা আপনার পরবর্তী প্রোজেক্টের জন্য সঠিক বিল্ড টুল বেছে নিতে, একটি টুল থেকে অন্য টুলে মাইগ্রেট করা উপযুক্ত কিনা তা সিদ্ধান্ত নিতে অথবা আপনার টুলিং কনফিগারেশন ও কোড বেসে কীভাবে সেরা পদ্ধতি অন্তর্ভুক্ত করবেন তা বুঝতে সাহায্য করে।
কোন বিল্ড টুল আপনাকে ওয়েব ডেভেলপমেন্টের পেশাদার পদ্ধতি অনুসরণ করতে দেয় তা নির্ধারণ করার জন্য আমরা টেস্টের একটি সেট ডিজাইন করেছি। আমরা বিল্ড টুল লেখকদের সাথে কাজ করেছি যাতে আমরা তাদের টুল সঠিকভাবে ব্যবহার করেছি এবং তাদের ন্যায্যভাবে উপস্থাপন করেছি তা নিশ্চিত করতে।
tooling.report-এর প্রাথমিক রিলিজে webpack v4, Rollup v2, Parcel v2 এবং Gulp সহ Browserify কভার করা হয়েছে, যেগুলি বর্তমানে সবচেয়ে জনপ্রিয় বিল্ড টুল বলে মনে হয়। আমরা tooling.report তৈরি করেছি যাতে কমিউনিটির সাহায্যে আরও বিল্ড টুল এবং অতিরিক্ত টেস্ট যোগ করার সুবিধা থাকে।
আমরা যদি কোনও পেশাদার পদ্ধতি মিস করে থাকি যা পরীক্ষা করা উচিত, তাহলে অনুগ্রহ করে GitHub-এ এটি প্রস্তাব করুন সমস্যা। আপনি যদি কোনও টেস্ট লিখতে বা প্রাথমিক সেটে অন্তর্ভুক্ত নয় এমন কোনও নতুন টুল যোগ করতে চান, তাহলে কন্ট্রিবিউট করার জন্য আপনাকে স্বাগত জানাই!
ইতিমধ্যে, আপনি আমাদের টুলিং.রিপোর্ট তৈরির পদ্ধতি সম্পর্কে আরও পড়তে পারেন এবং web.dev LIVE থেকে আমাদের সেশন দেখতে পারেন।
ওয়েবে গোপনীয়তা ও নিরাপত্তা
Chrome একটি ওপেন ওয়েবে বিশ্বাস করে যা ব্যবহারকারীদের গোপনীয়তাকে সম্মান করে এবং মূল ব্যবহারের ক্ষেত্রে বজায় রাখে যা ওয়েবকে সবার জন্য কাজ করে।
২০১৯ সালে, Chrome কুকি স্ট্যান্ডার্ডে একটি আপডেট প্রস্তাব করেছে যাতে ডিফল্ট হিসেবে ফার্স্ট-পার্টি প্রসঙ্গে কুকি সীমাবদ্ধ করা যায় এবং থার্ড-পার্টি প্রসঙ্গে কুকি স্পষ্টভাবে চিহ্নিত করার প্রয়োজন হয়। বিশেষ করে, এটি ক্রস-সাইট অনুরোধ সম্পর্কিত জালিয়াতি (CSRF) মূলক আক্রমণের বিরুদ্ধে সুরক্ষা প্রদান করে। Chrome, Firefox, Edge ও অন্যান্য ব্রাউজার এখন এই প্রস্তাব গ্রহণ করছে।
COVID-19-এর কথা মাথায় রেখে Chrome এইসব পরিবর্তন সাময়িকভাবে ফিরিয়ে নেওয়ার সিদ্ধান্ত নিলেও, দুঃখের বিষয় হল, সঙ্কটের সময় যখন মানুষ সবচেয়ে বেশি অসহায়, তখন এই ধরনের আক্রমণও বৃদ্ধি পায়। তাই, Chrome 84 Stable রিলিজের (জুলাই ২০২০-এর মাঝামাঝি) সাথে, পরিবর্তনগুলি Chrome-এর ৮০ এবং তার পরবর্তী সব ভার্সনে আবার রোল-আউট করা শুরু হবে। আরও জানতে SameSite কুকি নির্দেশিকা এবং web.dev LIVE সেশন দেখুন।
এছাড়াও, প্রাইভেসি স্যান্ডবক্স-এর অধীনে Chrome এমন কিছু স্ট্যান্ডার্ড প্রস্তাব করছে যেগুলি এমন ব্যবহারের ক্ষেত্রে সাহায্য করে যেখানে লোকজন ওয়েব প্ল্যাটফর্ম ব্যবহার করে উপার্জন করতে পারেন, তবে ব্যবহারকারীর গোপনীয়তা আরও ভালোভাবে রক্ষা করে। Chrome এইসব প্রস্তাবের ব্যাপারে সক্রিয়ভাবে মতামত চাইছে এবং W3C-এর ওপেন ফোরামে অংশগ্রহণ করছে যাতে এই প্রস্তাব এবং অন্যান্য পার্টির জমা দেওয়া প্রস্তাব নিয়ে আলোচনা করা যায়। ওপেন ওয়েবের জন্য নিরাপত্তা ও গোপনীয়তা সেশনে এই উদ্যোগ সম্পর্কে আরও জানুন।
সবশেষে, ব্যবহারকারীর নিরাপত্তার কথা ভেবে, Spectre ছিল এমন একটি দুর্বলতা যার অর্থ হল, একটি ব্রাউজার প্রসেসে চলা ক্ষতিকর কোড সেই প্রসেসের সাথে সম্পর্কিত যেকোনও ডেটা পড়তে পারে, এমনকি সেটি অন্য কোনও সোর্স থেকে এলেও। এর জন্য ব্রাউজারের একটি সমাধান হল সাইট আইসোলেশন, অর্থাৎ প্রতিটি সাইটকে আলাদা প্রসেসে রাখা। আরও জানতে নতুন ক্রস-অরিজিন ওপেনার এবং এম্বেডার নীতি (COOP এবং COEP) সম্পর্কে web.dev LIVE সেশন দেখুন।
আরও শক্তিশালী ক্ষমতা সহ ওয়েব তৈরি করা
Chrome চায় আপনি যেন কোনও বাধা ছাড়াই সর্বোচ্চ কোয়ালিটির ওয়েব অ্যাপ তৈরি করতে পারেন যা বিভিন্ন ডিভাইস জুড়ে ব্যবহারকারীদের কাছে আপনার অ্যাপকে পৌঁছে দেবে। PWAs-এর ইনস্টলেবিলিটি ও নির্ভরযোগ্যতার সাথে ক্যাপাবিলিটি প্রোজেক্ট (প্রোজেক্ট ফুগু) একত্রিত করে, Chrome তিনটি বিষয়ের উপর ফোকাস করছে যাতে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ ও ওয়েবের মধ্যে পার্থক্য দূর করা যায় এবং আপনাকে দুর্দান্ত অভিজ্ঞতা তৈরি ও ডেলিভার করতে সাহায্য করা যায়।
প্রথমত, Chrome টিম ওয়েব ডেভেলপার ও ব্যবহারকারীদের ইনস্টল করার অভিজ্ঞতার উপর আরও নিয়ন্ত্রণ, অমনিবক্সে ইনস্টল প্রোমোশন যোগ করা এবং আরও অনেক কিছু করার জন্য কঠোর পরিশ্রম করে চলেছে। ওয়েব সর্বত্র উপলভ্য হলেও, কিছু ব্যবসার জন্য স্টোরে তাদের অ্যাপ থাকা এখনও গুরুত্বপূর্ণ। সাহায্য করার জন্য, Chrome Bubblewrap লঞ্চ করেছে, এটি একটি লাইব্রেরি এবং CLI যা আপনার PWA-কে Play Store-এ নিয়ে যাওয়াকে সহজ করে তোলে। আসলে, PWABuilder.com এখন Bubblewrap ব্যবহার করে। আপনি মাপকাঠি পূরণ করলে, মাউসে মাত্র কয়েকবার ক্লিক করেই APK তৈরি করতে এবং Play Store-এ আপনার PWA আপলোড করতে পারবেন।
দ্বিতীয়ত, Chrome অপারেটিং সিস্টেমের সাথে আরও নিবিড় ইন্টিগ্রেশন প্রদান করছে, যেমন Web Share API-এর মাধ্যমে সিস্টেম-লেভেল শেয়ার পরিষেবা চালু করে ফটো, গান বা যেকোনও কিছু শেয়ার করার ক্ষমতা অথবা অন্য কোনও ইনস্টল করা অ্যাপ থেকে শেয়ার করা হলে কন্টেন্ট পাওয়ার ক্ষমতা। আপনি ব্যবহারকারীদের আপ-টু-ডেট রাখতে পারেন অথবা অ্যাপ ব্যাজিং-এর মাধ্যমে নতুন অ্যাক্টিভিটি সম্পর্কে তাদের সূক্ষ্মভাবে বিজ্ঞপ্তি দিতে পারেন। এছাড়াও, ব্যবহারকারীরা এখন অ্যাপ শর্টকাট ব্যবহার করে দ্রুত কোনও অ্যাকশন শুরু করতে পারবেন, যা Chrome 84 (জুলাই ২০২০-এর মাঝামাঝি) ভার্সনে উপলভ্য হবে।
এবং সবশেষে, Chrome নতুন ক্ষমতার উপর কাজ করছে যা নতুন পরিস্থিতিকে সক্ষম করে যা আগে সম্ভব ছিল না, যেমন এডিটর যা ব্যবহারকারীর লোকাল ফাইল সিস্টেমে ফাইল পড়ে এবং লেখে, বা স্থানীয়ভাবে ইনস্টল করা ফন্টের তালিকা পান যাতে ব্যবহারকারীরা তাদের ডিজাইনে সেগুলি ব্যবহার করতে পারেন।
web.dev LIVE চলাকালীন, আমরা অন্যান্য অনেক ক্ষমতা এবং ফিচার সম্পর্কে কথা বলেছি যা আপনাকে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপের মতো একই ক্ষমতা সহ একই ধরনের অভিজ্ঞতা প্রদান করতে সক্ষম করে। web.dev/live-এ গিয়ে দ্বিতীয় দিনের শিডিউলে সব সেশন দেখুন।
Chrome DevTools ও Lighthouse 6.0-এ নতুন কী আছে
Chrome Devtools: নতুন সমস্যা ট্যাব, কালার ডেফিসিয়েন্সি এমুলেটর এবং Web Vitals সংক্রান্ত সহায়তা
Chrome DevTools-এর অন্যতম শক্তিশালী ফিচার হল, এটি ওয়েব পেজে সমস্যা খুঁজে বের করতে পারে এবং ডেভেলপারের নজরে তা নিয়ে আসে। প্রাইভেসি-ফার্স্ট ওয়েব-এর পরবর্তী পর্যায়ে আমরা প্রবেশ করার সাথে সাথে এটি সবচেয়ে প্রাসঙ্গিক হয়ে উঠেছে। কনসোলে বিজ্ঞপ্তি সংক্রান্ত ক্লান্তি ও বিশৃঙ্খলা কমাতে, Chrome DevTools সমস্যা ট্যাব লঞ্চ করেছে যা শুরু করার জন্য তিন ধরনের গুরুত্বপূর্ণ সমস্যার উপর ফোকাস করে: কুকি সংক্রান্ত সমস্যা, মিক্সড কন্টেন্ট, এবং COEP সংক্রান্ত সমস্যা। শুরু করতে সমস্যা ট্যাব ব্যবহার করে সমস্যা খোঁজা ও সমাধান করা বিষয়ে web.dev LIVE সেশন দেখুন।
এছাড়াও, ওয়েব ডেভেলপারদের ট্র্যাক ও পরিমাপ করার জন্য Core Web Vitals সবচেয়ে গুরুত্বপূর্ণ মেট্রিক্সের সেট হয়ে ওঠার কারণে, DevTools নিশ্চিত করতে চায় যে ডেভেলপাররা যাতে সহজেই ট্র্যাক করতে পারেন যে এই থ্রেশহোল্ডের তুলনায় তারা কেমন পারফর্ম করছেন। তাই এই তিনটি মেট্রিক এখন Chrome DevTools পারফর্ম্যান্স প্যানেলে রয়েছে।
এবং অবশেষে, অ্যাক্সেসিবিলিটির উপর ফোকাস করা ডেভেলপারদের সংখ্যা বৃদ্ধির সাথে সাথে, DevTools একটি কালার ভিশন ডেফিসিয়েন্সি এমুলেটরও চালু করেছে যা ডেভেলপারদের ঝাপসা দৃষ্টি এবং অন্যান্য ধরনের দৃষ্টিশক্তির ঘাটতি অনুকরণ করতে দেয়। আপনি এই এবং অন্যান্য অনেক ফিচার সম্পর্কে DevTools-এ নতুন কী আছে সেশন থেকে আরও জানতে পারবেন।
Lighthouse 6.0: নতুন মেট্রিক, Core Web Vitals ল্যাব পরিমাপ, একটি আপডেট করা পারফর্ম্যান্স স্কোর এবং নতুন অডিট
Lighthouse হল একটি ওপেন-সোর্স অটোমেটেড টুল যা ডেভেলপারদের তাদের সাইটের পারফর্ম্যান্স উন্নত করতে সাহায্য করে। Lighthouse-এর লেটেস্ট ভার্সনে, Lighthouse টিম মেট্রিকের উপর ভিত্তি করে ইনসাইট প্রদান করার উপর ফোকাস করেছে যা আপনাকে গুরুত্বপূর্ণ ডাইমেনশনের বিপরীতে আপনার ব্যবহারকারীর অভিজ্ঞতার কোয়ালিটির একটি ভারসাম্যপূর্ণ ভিউ প্রদান করে।
ধারাবাহিকতা বজায় রাখতে, Lighthouse-এ Core Web Vitals-এর জন্য সহায়তা যোগ করা হয়েছে: LCP, TBT ( FID-এর জন্য একটি প্রক্সি, কারণ Lighthouse হল একটি ল্যাব টুল এবং FID শুধুমাত্র ফিল্ডে পরিমাপ করা যেতে পারে) এবং CLS। এছাড়াও, Lighthouse তিনটি পুরনো মেট্রিক সরিয়ে দিয়েছে: ফার্স্ট মিনিংফুল পেন্ট, ফার্স্ট সিপিইউ আইডল এবং ম্যাক্স পোটেনশিয়াল FID। এইসব মেট্রিক সরিয়ে দেওয়ার কারণ হল মেট্রিকের পরিবর্তনশীলতা এবং নতুন মেট্রিক যা Lighthouse পরিমাপ করার চেষ্টা করছে, ব্যবহারকারীর অভিজ্ঞতার সেই অংশের আরও ভালো প্রতিফলন প্রদান করে। এছাড়াও, ব্যবহারকারীর মতামতের উপর ভিত্তি করে, সামগ্রিক পারফর্ম্যান্স স্কোরে প্রতিটি মেট্রিক কতটা অবদান রাখে তাতে Lighthouse কিছু পরিবর্তন করেছে।
Lighthouse-এ একটি স্কোরিং ক্যালকুলেটর যোগ করা হয়েছে যা ভার্সন ৫ ও ৬-এর স্কোরের মধ্যে তুলনা করে আপনার পারফর্ম্যান্স স্কোর এক্সপ্লোর করতে সাহায্য করে। Lighthouse 6.0-এর মাধ্যমে অডিট রান করলে, আপনার ফলাফল সহ ক্যালকুলেটরের লিঙ্ক সহ রিপোর্ট পাবেন।
আর সবশেষে, Lighthouse-এ জাভাস্ক্রিপ্ট বিশ্লেষণ ও অ্যাক্সেসিবিলিটির উপর ফোকাস করে একগুচ্ছ নতুন অডিট যোগ করা হয়েছে।
স্পিড টুলিংয়ে নতুন কী আছে সেশন দেখে আরও জানুন।
আরও জানুন
ওয়েব প্ল্যাটফর্মের সুযোগ ও চ্যালেঞ্জ নিয়ে আলোচনা করার জন্য কমিউনিটির যেসব ব্যক্তি আমাদের সাথে যোগ দিয়েছেন, তাদের সবাইকে ধন্যবাদ।
এই পোস্টে ইভেন্টের কিছু হাইলাইট সংক্ষেপে তুলে ধরা হয়েছে, তবে আরও অনেক কিছু ছিল। সব সেশন চেক করতে ভুলবেন না এবং আপনার ইনবক্সে সরাসরি আরও কন্টেন্ট পেতে চাইলে web.dev নিউজলেটারে সাবস্ক্রাইব করুন। এবং আপনার টাইমজোনে আসন্ন কমিউনিটি ইভেন্ট খুঁজে পেতে web.dev/live-এ আঞ্চলিক ইভেন্ট বিভাগ দেখুন!