আমাদের 3-দিনের অনলাইন কমিউনিটি ইভেন্টের সময় ঘোষণা করা প্রধান খবর এবং আপডেটগুলির একটি সারাংশ এবং আসন্ন আঞ্চলিক ইভেন্টগুলি সম্পর্কে একটি অনুস্মারক৷
আমরা সবেমাত্র আমাদের তিন দিনের ইভেন্ট, web.dev LIVE সমাপ্ত করেছি, যেখানে কিছু ওয়েব সম্প্রদায় ওয়েব ডেভেলপমেন্টের অবস্থা সম্পর্কে কথা বলার জন্য অনলাইনে একত্রিত হয়েছিল৷ আমরা প্রতিদিন একটি ভিন্ন আঞ্চলিক টাইমজোনে শুরু করেছি, এবং Googlers ওয়েবকে স্থিতিশীল, শক্তিশালী এবং অ্যাক্সেসযোগ্য রাখতে সরঞ্জাম এবং নির্দেশিকা দিয়ে বিকাশকারীদের সাহায্য করার চেতনায় আপডেট, খবর এবং টিপস ভাগ করেছে৷
আপনি যদি কিছু লাইভ স্ট্রিম মিস করেন, তাহলে সমস্ত সেশন রেকর্ড করা হয় এবং YouTube-এ দেখার জন্য আপনার জন্য উপলব্ধ। আমরা সারা বিশ্ব জুড়ে আসন্ন আঞ্চলিক ইভেন্টগুলিও পেয়েছি যা Google বিকাশকারী গোষ্ঠীগুলি দ্বারা সংগঠিত এবং আমরা web.dev লাইভের সময় যা কভার করেছি তার সাথে সম্পর্কিত বিষয়গুলিতে গভীর-ডাইভ সেশন সরবরাহ করব৷
চলুন তিনদিন ধরে শেয়ার করা কিছু খবর এবং আপডেটের মধ্যে ডুব দেওয়া যাক।
ওয়েব ভাইটাল
ক্রোম টিম ডেভেলপারদের ওয়েবে দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদানে সহায়তা করার জন্য একীভূত নির্দেশিকা, মেট্রিক্স এবং সরঞ্জাম সরবরাহ করার জন্য ওয়েব ভাইটালস উদ্যোগের ঘোষণা করেছে । গুগল সার্চ টিমও সম্প্রতি ঘোষণা করেছে যে তারা পৃষ্ঠার অভিজ্ঞতাকে র্যাঙ্কিংয়ের মানদণ্ড হিসেবে মূল্যায়ন করবে এবং এর ভিত্তি হিসেবে কোর ওয়েব ভাইটাল মেট্রিক্স অন্তর্ভুক্ত করবে।
2020 কোর ওয়েব ভাইটাল-এর তিনটি স্তম্ভ হল পৃষ্ঠার বিষয়বস্তুর লোডিং, ইন্টারঅ্যাক্টিভিটি এবং ভিজ্যুয়াল স্থায়িত্ব, যা নিম্নলিখিত মেট্রিক্স দ্বারা ক্যাপচার করা হয়েছে:
- সবচেয়ে বড় কন্টেন্টফুল পেইন্ট অনুভূত লোডের গতি পরিমাপ করে এবং পৃষ্ঠা লোডের টাইমলাইনে বিন্দু চিহ্নিত করে যখন একটি পৃষ্ঠার প্রধান বিষয়বস্তু সম্ভবত লোড হয়।
- প্রথম ইনপুট বিলম্ব প্রতিক্রিয়াশীলতা পরিমাপ করে এবং একটি পৃষ্ঠার সাথে প্রথম ইন্টারঅ্যাক্ট করার চেষ্টা করার সময় ব্যবহারকারীরা যে অভিজ্ঞতা অনুভব করে তার পরিমাণ নির্ধারণ করে।
- ক্রমবর্ধমান লেআউট শিফট চাক্ষুষ স্থিতিশীলতা পরিমাপ করে এবং পৃষ্ঠা বিষয়বস্তুর অপ্রত্যাশিত গতিবিধির পরিমাণ নির্ধারণ করে।
web.dev লাইভে, আমরা কোর ওয়েব ভাইটালগুলির জন্য কীভাবে অপ্টিমাইজ করতে হয় এবং কীভাবে আপনার সাইটের গুরুত্বপূর্ণ মানগুলি অন্বেষণ করতে Chrome DevTools ব্যবহার করতে হয় তার সেরা অনুশীলনগুলি শেয়ার করেছি৷ এছাড়াও আমরা অনেক অন্যান্য পারফরম্যান্স-সম্পর্কিত আলোচনা শেয়ার করেছি যা আপনি web.dev/live- এ দিনের 1 সময়সূচীতে পেতে পারেন।
tooling.report
ওয়েবের মতো বিস্তৃত প্ল্যাটফর্মের জন্য বিকাশ করা চ্যালেঞ্জিং হতে পারে। বিল্ড টুলগুলি প্রায়শই আপনার ওয়েব ডেভেলপমেন্ট প্রজেক্টের কেন্দ্রবিন্দুতে থাকে, যা আপনার ডেভেলপার এবং প্রোডাক্ট লাইফসাইকেল পরিচালনার ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।
আমরা সকলেই অবাস্তব বিল্ড কনফিগার ফাইল দেখেছি, তাই ওয়েব ডেভেলপার এবং টুলিং লেখকদের ওয়েবের জটিলতা জয় করতে সাহায্য করার জন্য, আমরা tooling.report তৈরি করেছি। এটি এমন একটি ওয়েবসাইট যা আপনাকে আপনার পরবর্তী প্রকল্পের জন্য সঠিক বিল্ড টুল বেছে নিতে, এক টুল থেকে অন্য টুলে স্থানান্তর করা মূল্যবান কিনা তা সিদ্ধান্ত নিতে, বা আপনার টুলিং কনফিগারেশন এবং কোড বেসে কীভাবে সেরা অনুশীলনগুলিকে অন্তর্ভুক্ত করতে হয় তা নির্ধারণ করতে সহায়তা করে৷
কোন বিল্ড টুল আপনাকে ওয়েব ডেভেলপমেন্টের সর্বোত্তম অনুশীলন অনুসরণ করতে দেয় তা নির্ধারণ করতে আমরা পরীক্ষার একটি স্যুট ডিজাইন করেছি। আমরা বিল্ড টুল লেখকদের সাথে কাজ করেছি তা নিশ্চিত করার জন্য যে আমরা তাদের টুলগুলি সঠিকভাবে ব্যবহার করেছি এবং তাদের যথাযথভাবে উপস্থাপন করেছি।
tooling.report-এর প্রাথমিক রিলিজে webpack v4, Rollup v2, Parcel v2, এবং Browserify with Gulp, যা এই মুহূর্তে সবচেয়ে জনপ্রিয় বিল্ড টুল বলে মনে হচ্ছে। আমরা সম্প্রদায়ের সাহায্যে আরও বিল্ড টুল এবং অতিরিক্ত পরীক্ষা যোগ করার নমনীয়তার সাথে tooling.report তৈরি করেছি।
যদি আমরা একটি সেরা অনুশীলন অনুপস্থিত করি যা পরীক্ষা করা উচিত, দয়া করে এটি একটি GitHub সমস্যায় প্রস্তাব করুন ৷ আপনি যদি একটি পরীক্ষা লিখতে বা একটি নতুন টুল যোগ করার জন্য প্রস্তুত হন যা আমরা প্রাথমিক সেটে অন্তর্ভুক্ত করিনি, আমরা আপনাকে অবদান রাখতে স্বাগত জানাই!
ইতিমধ্যে, আপনি tooling.report তৈরির প্রতি আমাদের পদ্ধতি সম্পর্কে আরও পড়তে পারেন এবং web.dev লাইভ থেকে আমাদের সেশন দেখতে পারেন।
ওয়েবে গোপনীয়তা এবং নিরাপত্তা
Chrome একটি উন্মুক্ত ওয়েবে বিশ্বাস করে যা ব্যবহারকারীদের গোপনীয়তার প্রতি শ্রদ্ধাশীল এবং মূল ব্যবহারের ক্ষেত্রে বজায় রাখে যা ওয়েবকে সবার জন্য কাজ করে।
2019 সালে, Chrome ডিফল্টভাবে প্রথম পক্ষের প্রসঙ্গগুলিতে কুকিজ সীমাবদ্ধ করার জন্য কুকি স্ট্যান্ডার্ডে একটি আপডেটের প্রস্তাব করেছিল এবং তৃতীয় পক্ষের প্রসঙ্গগুলিকে স্পষ্টভাবে চিহ্নিত করার জন্য কুকিজ প্রয়োজন। বিশেষত, এটি ক্রস-সাইট অনুরোধ জালিয়াতি আক্রমণের বিরুদ্ধে প্রতিরক্ষার একটি লাইন প্রদান করে। প্রস্তাবটি এখন ক্রোম, ফায়ারফক্স, এজ এবং অন্যান্য ব্রাউজার দ্বারা গৃহীত হচ্ছে।
কোভিড-১৯-এর আলোকে যখন Chrome সাময়িকভাবে এই পরিবর্তনগুলি রোলব্যাক করার সিদ্ধান্ত নিয়েছে, দুঃখজনকভাবে, একটি সঙ্কটের সময় যখন লোকেরা সবচেয়ে বেশি ঝুঁকিপূর্ণ, আপনিও এই ধরনের আক্রমণের সংখ্যা বৃদ্ধি দেখতে পাচ্ছেন। সুতরাং, Chrome 84 স্টেবল রিলিজের সাথে (জুলাই 2020-এর মাঝামাঝি), পরিবর্তনগুলি 80 এবং তার পরের সমস্ত ক্রোম সংস্করণে আবার রোল আউট হতে শুরু করবে। আরও জানতে একইসাইট কুকি নির্দেশিকা পাশাপাশি web.dev লাইভ সেশন দেখুন।
অধিকন্তু, প্রাইভেসি স্যান্ডবক্সের ব্যানারে ক্রোম বেশ কয়েকটি মান প্রস্তাব প্রবর্তন করছে যেগুলির উদ্দেশ্য হল ব্যবহারের ক্ষেত্রে সমর্থন করা যা লোকেদের ওয়েব প্ল্যাটফর্ম ব্যবহার করে তাদের জীবিকা নির্বাহ করতে দেয়, কিন্তু এটি এমনভাবে করে যাতে ব্যবহারকারীর গোপনীয়তাকে আরও ভালোভাবে সম্মান করা যায়৷ ক্রোম সক্রিয়ভাবে এই প্রস্তাবগুলিতে প্রতিক্রিয়া চাচ্ছে, এবং অন্যান্য পক্ষের দ্বারা জমা দেওয়া প্রস্তাবগুলির সাথে আলোচনা করার জন্য W3C-এর খোলা ফোরামের মধ্যে অংশগ্রহণ করছে৷ ওপেন ওয়েব সেশনের নিরাপত্তা এবং গোপনীয়তায় এই উদ্যোগ সম্পর্কে আরও জানুন।
অবশেষে, ব্যবহারকারীর নিরাপত্তার দিকে তাকিয়ে, স্পেকটার একটি দুর্বলতা ছিল যার অর্থ একটি ব্রাউজার প্রক্রিয়ায় চলমান দূষিত কোডটি সেই প্রক্রিয়ার সাথে যুক্ত যেকোন ডেটা পড়তে সক্ষম হতে পারে যদিও এটি একটি ভিন্ন উত্স থেকে হয়। এর জন্য ব্রাউজার প্রশমনের একটি হল সাইট আইসোলেশন, অর্থাৎ প্রতিটি সাইটকে একটি পৃথক প্রক্রিয়ায় রাখা। নতুন ক্রস-অরিজিন ওপেনার এবং এমবেডার পলিসি (COOP এবং COEP) সম্পর্কে আরও জানতে web.dev লাইভ সেশন দেখুন।
শক্তিশালী ক্ষমতা সহ একটি ওয়েব তৈরি করা
Chrome চায় যে আপনি সর্বোচ্চ মানের ওয়েব অ্যাপ তৈরি করতে মুক্ত থাকুন যা আপনাকে সমস্ত ডিভাইস জুড়ে ব্যবহারকারীদের কাছে সবচেয়ে বেশি নাগাল দেয়। PWAs-এর ইনস্টলেবিলিটি এবং নির্ভরযোগ্যতাকে একত্রিত করে, সক্ষমতা প্রকল্প (প্রজেক্ট ফুগু) এর সাথে, প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপ এবং ওয়েবের মধ্যে ব্যবধান বন্ধ করতে Chrome তিনটি জিনিসের উপর ফোকাস করছে, আপনাকে দুর্দান্ত অভিজ্ঞতা তৈরি করতে এবং প্রদান করতে সহায়তা করতে।
প্রথমত, ক্রোম টিমগুলি ওয়েব ডেভেলপার এবং ব্যবহারকারীদের ইনস্টল করার অভিজ্ঞতার উপর আরও নিয়ন্ত্রণ দিতে কঠোর পরিশ্রম করছে, বহুউপযোগী ক্ষেত্রটিতে একটি ইনস্টল প্রচার যোগ করেছে এবং আরও অনেক কিছু । ওয়েবের সর্বব্যাপীতা সত্ত্বেও, কিছু ব্যবসার জন্য স্টোরে তাদের অ্যাপ থাকা এখনও গুরুত্বপূর্ণ। সাহায্য করার জন্য, Chrome Bubblewrap চালু করেছে, একটি লাইব্রেরি এবং CLI যা প্লে স্টোরে আপনার PWA আনাকে তুচ্ছ করে তোলে। প্রকৃতপক্ষে, PWABuilder.com এখন হুডের নিচে বাবল র্যাপ ব্যবহার করে। মাত্র কয়েকটি মাউস ক্লিকে, আপনি একটি APK তৈরি করতে পারেন এবং আপনার PWA আপলোড করতে পারেন প্লে স্টোরে, যতক্ষণ না আপনি মানদণ্ড পূরণ করেন।
দ্বিতীয়ত, ক্রোম অপারেটিং সিস্টেমের সাথে আরও কঠোর ইন্টিগ্রেশন প্রদান করছে, যেমন ওয়েব শেয়ার এপিআই- এর সাথে সিস্টেম-লেভেল শেয়ার পরিষেবা চালু করার মাধ্যমে ছবি, গান বা যাই হোক না কেন শেয়ার করার ক্ষমতা, অথবা অন্য কোনও থেকে শেয়ার করা হলে সামগ্রী পাওয়ার ক্ষমতা। ইনস্টল করা অ্যাপ । আপনি ব্যবহারকারীদের আপ-টু-ডেট রাখতে পারেন, বা অ্যাপ ব্যাজিংয়ের মাধ্যমে নতুন কার্যকলাপের বিষয়ে তাদের সূক্ষ্মভাবে অবহিত করতে পারেন। এছাড়াও, অ্যাপ শর্টকাট ব্যবহার করে দ্রুত একটি অ্যাকশন শুরু করা ব্যবহারকারীদের জন্য এখন সহজ, যা Chrome 84 (জুলাই 2020-এর মাঝামাঝি) এ অবতরণ করবে।
এবং অবশেষে, ক্রোম নতুন ক্ষমতার উপর কাজ করছে যা আগে সম্ভব ছিল না এমন নতুন পরিস্থিতিগুলিকে সক্ষম করে, যেমন সম্পাদক যেগুলি ব্যবহারকারীর স্থানীয় ফাইল সিস্টেমে ফাইলগুলি পড়তে এবং লিখতে পারে , বা স্থানীয়ভাবে ইনস্টল করা ফন্টগুলির তালিকা পেতে পারে যাতে ব্যবহারকারীরা সেগুলি ব্যবহার করতে পারে তাদের ডিজাইনে।
web.dev লাইভ চলাকালীন, আমরা অনেক অন্যান্য ক্ষমতা এবং বৈশিষ্ট্য সম্পর্কে কথা বলেছি যেগুলি আপনাকে প্ল্যাটফর্ম-নির্দিষ্ট অ্যাপগুলির মতো একই ক্ষমতা সহ একই ধরণের অভিজ্ঞতা প্রদান করতে সক্ষম করে। দিনের 2 সময়সূচীতে web.dev/live- এ সমস্ত সেশন দেখুন।
Chrome DevTools এবং Lighthouse 6.0-এ নতুন কী রয়েছে৷
Chrome Devtools: নতুন ইস্যু ট্যাব, রঙের ঘাটতি এমুলেটর এবং ওয়েব ভাইটাল সমর্থন
Chrome DevTools-এর সবচেয়ে শক্তিশালী বৈশিষ্ট্যগুলির মধ্যে একটি হল ওয়েব পৃষ্ঠায় সমস্যাগুলি চিহ্নিত করার এবং ডেভেলপারের নজরে আনার ক্ষমতা। এটি সবচেয়ে প্রাসঙ্গিক কারণ আমরা একটি গোপনীয়তা-প্রথম ওয়েবের পরবর্তী পর্যায়ে চলে যাচ্ছি৷ কনসোলে বিজ্ঞপ্তির ক্লান্তি এবং বিশৃঙ্খলতা কমাতে, Chrome DevTools ইস্যু ট্যাব চালু করেছে যা শুরু করার জন্য তিন ধরনের জটিল সমস্যার উপর ফোকাস করে: কুকি সমস্যা , মিশ্র বিষয়বস্তু এবং COEP সমস্যা । শুরু করতে ইস্যু ট্যাবে সমস্যা খুঁজে বের করা এবং সমাধান করার বিষয়ে web.dev লাইভ সেশন দেখুন।
তাছাড়া, Core Web Vitals ওয়েব ডেভেলপারদের ট্র্যাক এবং পরিমাপ করার জন্য মেট্রিক্সের সবচেয়ে গুরুত্বপূর্ণ সেটগুলির মধ্যে একটি হয়ে উঠেছে, DevTools নিশ্চিত করতে চায় যে ডেভেলপাররা এই থ্রেশহোল্ডগুলির বিরুদ্ধে কীভাবে পারফর্ম করে তা সহজেই ট্র্যাক করতে সক্ষম হয়। তাই এই তিনটি মেট্রিক এখন Chrome DevTools পারফরম্যান্স প্যানেলে রয়েছে।
এবং অবশেষে, অ্যাক্সেসযোগ্যতার উপর দৃষ্টি নিবদ্ধ করে ক্রমবর্ধমান সংখ্যক বিকাশকারীর সাথে, DevTools একটি রঙিন দৃষ্টি ঘাটতি এমুলেটরও চালু করেছে যা বিকাশকারীদের অস্পষ্ট দৃষ্টি এবং অন্যান্য ধরণের দৃষ্টি ঘাটতিগুলি অনুকরণ করতে দেয়। আপনি DevTools সেশনে নতুন কি আছে এই সম্পর্কে এবং অন্যান্য অনেক বৈশিষ্ট্য সম্পর্কে আরও জানতে পারবেন।
লাইটহাউস 6.0: নতুন মেট্রিক্স, কোর ওয়েব ভাইটালস ল্যাব পরিমাপ, একটি আপডেট করা পারফরম্যান্স স্কোর, এবং নতুন অডিট
Lighthouse হল একটি ওপেন-সোর্স স্বয়ংক্রিয় টুল যা ডেভেলপারদের তাদের সাইটের কর্মক্ষমতা উন্নত করতে সাহায্য করে। এর সর্বশেষ সংস্করণে, লাইটহাউস টিম মেট্রিক্সের উপর ভিত্তি করে অন্তর্দৃষ্টি প্রদানের উপর দৃষ্টি নিবদ্ধ করে যা আপনাকে গুরুত্বপূর্ণ মাত্রার বিরুদ্ধে আপনার ব্যবহারকারীর অভিজ্ঞতার মানের একটি ভারসাম্যপূর্ণ দৃষ্টিভঙ্গি দেয়।
ধারাবাহিকতা নিশ্চিত করতে, LCP , TBT ( FID- এর জন্য একটি প্রক্সি যেহেতু Lighthouse হল একটি ল্যাব টুল এবং FID শুধুমাত্র ক্ষেত্রে পরিমাপ করা যেতে পারে) এবং CLS- এর জন্য LCP , TBT সমর্থন যোগ করেছে৷ লাইটহাউস তিনটি পুরানো মেট্রিক্সও সরিয়ে দিয়েছে: ফার্স্ট মিনিংফুল পেইন্ট , ফার্স্ট সিপিইউ ইডল এবং ম্যাক্স পটেনশিয়াল এফআইডি । এই অপসারণগুলি মেট্রিক পরিবর্তনশীলতা এবং ব্যবহারকারীর অভিজ্ঞতার যে অংশটি পরিমাপ করার চেষ্টা করছে তার আরও ভাল প্রতিফলন প্রদান করে নতুন মেট্রিক্সের মত বিবেচনার কারণে হয়েছে৷ উপরন্তু, Lighthouse ব্যবহারকারীর প্রতিক্রিয়ার উপর ভিত্তি করে সামগ্রিক পারফরম্যান্স স্কোরের প্রতিটি মেট্রিক ফ্যাক্টর কতটা তার সাথে কিছু সমন্বয় করেছে।
Lighthouse এছাড়াও সংস্করণ 5 এবং 6 স্কোরের মধ্যে একটি তুলনা প্রদান করে আপনার কর্মক্ষমতা স্কোরিং অন্বেষণ করতে সাহায্য করার জন্য একটি স্কোরিং ক্যালকুলেটর যোগ করেছে৷ আপনি যখন Lighthouse 6.0 এর সাথে একটি অডিট চালান, তখন রিপোর্টটি আপনার ফলাফলের সাথে ক্যালকুলেটরের একটি লিঙ্ক সহ আসে।
এবং অবশেষে, লাইটহাউস জাভাস্ক্রিপ্ট বিশ্লেষণ এবং অ্যাক্সেসযোগ্যতার উপর ফোকাস সহ একগুচ্ছ নতুন অডিট যোগ করেছে।
স্পিড টুলিং সেশনে নতুন কি আছে দেখে আরও জানুন।
আরও জানুন
কমিউনিটির সকলকে ধন্যবাদ যারা ওয়েব প্ল্যাটফর্মের সুযোগ এবং চ্যালেঞ্জ নিয়ে আলোচনা করতে আমাদের সাথে যোগ দিয়েছেন।
এই পোস্টে ইভেন্টের কিছু হাইলাইট সংক্ষিপ্ত করা হয়েছে, তবে আরও অনেক কিছু ছিল। আপনি যদি সরাসরি আপনার ইনবক্সে আরও বিষয়বস্তু চান তাহলে সমস্ত সেশনগুলি পরীক্ষা করে দেখুন এবং web.dev নিউজলেটারে সদস্যতা নিতে ভুলবেন না৷ এবং আপনার টাইমজোনে একটি আসন্ন কমিউনিটি ইভেন্ট খুঁজতে web.dev/live-এর আঞ্চলিক ইভেন্ট বিভাগে যান!