web.dev এর ইঞ্জিনিয়ারিং ব্লগে এটি প্রথম পোস্ট। আগামী মাসগুলিতে, আমরা আমাদের কাজ থেকে কার্যকর অন্তর্দৃষ্টি শেয়ার করার আশা করি—তাই ইঞ্জিনিয়ারিং ব্লগ ট্যাগ সহ পোস্টগুলি দেখুন! এখানে আমরা আমাদের স্ট্যাটিক সাইট এবং (ঐচ্ছিক!) আমাদের ওয়েব উপাদানগুলির পিছনে জাভাস্ক্রিপ্টের নির্মাণ প্রক্রিয়া কভার করব।
web.dev আধুনিক ওয়েব অভিজ্ঞতা তৈরির বিষয়বস্তু প্রদান করে এবং আপনাকে আপনার সাইটের কর্মক্ষমতা পরিমাপ করতে দেয়। বুদ্ধিমান ব্যবহারকারীরা হয়তো বুঝতে পেরেছেন যে আমাদের পরিমাপ পৃষ্ঠাটি Lighthouse এর জন্য একটি ইন্টারফেস, যা Chrome এর DevTools-এও উপলব্ধ৷ web.dev-এ সাইন ইন করা আপনাকে আপনার সাইটে নিয়মিত Lighthouse অডিট চালাতে দেয় যাতে আপনি দেখতে পারেন কিভাবে সময়ের সাথে এর স্কোর পরিবর্তিত হয়। আমি একটু পরে পরিমাপ পৃষ্ঠাটি পর্যালোচনা করব, কারণ আমরা মনে করি এটি মোটামুটি বিশেষ। 🎊
ভূমিকা
মৌলিকভাবে, web.dev হল একটি স্ট্যাটিক সাইট যা মার্কডাউন ফাইলের সংগ্রহ থেকে তৈরি হয়। আমরা ইলেভেন্টি ব্যবহার করা বেছে নিয়েছি কারণ এটি একটি পালিশ, এক্সটেনসিবল টুল যা মার্কডাউনকে HTML এ পরিণত করা সহজ করে তোলে।
আমরা আধুনিক জাভাস্ক্রিপ্ট বান্ডেলগুলিও ব্যবহার করি যা আমরা শুধুমাত্র type="module" সমর্থিত ব্রাউজারগুলিতে পরিবেশন করি, যার মধ্যে রয়েছে async এবং await । আমরা আনন্দের সাথে এমন বৈশিষ্ট্যগুলিও ব্যবহার করি যা চিরসবুজ ব্রাউজার দ্বারা সমর্থিত কিন্তু পুরানো সংস্করণের সংখ্যালঘুদের দ্বারা নয়৷ যেহেতু আমরা একটি স্ট্যাটিক সাইট, তাই আমাদের বিষয়বস্তু পড়ার জন্য জাভাস্ক্রিপ্টের প্রয়োজন হয় না ।
একবার বিল্ড প্রসেস—যার মধ্যে স্ট্যাটিক এইচটিএমএল তৈরি করা এবং আমাদের জাভাস্ক্রিপ্টকে রোলআপের সাথে বান্ডিল করা জড়িত—সম্পূর্ণ হলে, পরীক্ষার জন্য একটি সাধারণ স্ট্যাটিক সার্ভার দিয়ে web.dev হোস্ট করা যেতে পারে। সাইটটি প্রায় সম্পূর্ণ স্থির, কিন্তু আমাদের কিছু বিশেষ চাহিদা রয়েছে যা এখনও একটি কাস্টম Node.js সার্ভার থেকে উপকৃত হয়। এর মধ্যে রয়েছে অবৈধ ডোমেনের জন্য পুনঃনির্দেশ, সেইসাথে একটি আসন্ন আন্তর্জাতিকীকরণ বৈশিষ্ট্যের জন্য ব্যবহারকারীর পছন্দের ভাষা পার্স করার কোড।
স্ট্যাটিক প্রজন্ম
web.dev-এর প্রতিটি পৃষ্ঠা মার্কডাউনে লেখা আছে। সমস্ত পৃষ্ঠা সামনের বিষয় অন্তর্ভুক্ত করে, যা প্রতিটি পোস্ট সম্পর্কে মেটাডেটা বর্ণনা করে। এই মেটাডেটা প্রতিটি পৃষ্ঠার লেআউটে প্রবেশ করানো হয়, শিরোনাম, ট্যাগ ইত্যাদি তৈরি করে। এখানে একটি উদাহরণ:
---
layout: post
title: What is network reliability and how do you measure it?
authors:
- jeffposnick
date: 2018-11-05
description: |
The modern web is enjoyed by a wide swath of people…
---
The modern web is enjoyed by a wide swath of [people](https://www.youtube.com/watch?v=dQw4w9WgXcQ), using a range of different devices and types of network connections.
Your creations can reach users all across the world...
এই সামনের ব্যাপারটি আমাদের লেখক(গুলি), প্রকাশের তারিখ এবং ট্যাগগুলির মতো স্বেচ্ছাচারী বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করতে দেয়। Eleventy সুবিধাজনকভাবে প্রায় প্রতিটি প্লাগইন, টেমপ্লেট, বা অন্য প্রসঙ্গে যেখানে আমরা বুদ্ধিমান কিছু করতে চাই সেখানে তথ্য হিসাবে সামনের ব্যাপারটিকে প্রকাশ করে। ডেটা অবজেক্টে ইলেভেন্টি ডেটা ক্যাসকেড হিসাবে যা বর্ণনা করে তাও রয়েছে — প্রতিটি পৃথক পৃষ্ঠা থেকে, পৃষ্ঠাটি ব্যবহার করা বিন্যাস থেকে এবং শ্রেণীবদ্ধ ফোল্ডার কাঠামোতে পাওয়া ডেটা থেকে বিভিন্ন ধরণের ডেটা টানা হয়।
প্রতিটি অনন্য লেআউট একটি ভিন্ন ধরনের বিষয়বস্তু বর্ণনা করে এবং অন্যান্য লেআউট থেকে উত্তরাধিকারী হতে পারে। web.dev-এ, আমরা একটি শীর্ষ-স্তরের HTML লেআউট ভাগ করার সময় বিভিন্ন ধরণের সামগ্রী (যেমন পোস্ট এবং কোডল্যাব) সঠিকভাবে ফ্রেম করতে এই বৈশিষ্ট্যটি ব্যবহার করি।
সংগ্রহ
Eleventy বিষয়বস্তুর নির্বিচারে সংগ্রহ তৈরি করার জন্য একটি প্রোগ্রামেটিক উপায় প্রদান করে। এটি আমাদের পেজিনেশন সমর্থন তৈরি করতে এবং পোস্ট লেখকদের জন্য ভার্চুয়াল পৃষ্ঠাগুলি (যে পৃষ্ঠাগুলির ডিস্কে মার্কডাউন ফাইল নেই) তৈরি করতে দেয়৷ উদাহরণস্বরূপ, আমরা একটি টেমপ্লেট ব্যবহার করে আমাদের লেখকের পৃষ্ঠাগুলি তৈরি করি যাতে এর পারমালিঙ্কের জন্য একটি অভিব্যক্তি থাকে (তাই টেমপ্লেটটি প্রতিটি লেখকের জন্য পুনরায় রেন্ডার করা হয়) এবং একটি সমর্থন সংগ্রহ ।
এর ফলে, উদাহরণস্বরূপ, অ্যাডির সমস্ত পোস্ট ধারণকারী একটি সাধারণ পৃষ্ঠা!
সীমাবদ্ধতা
এই মুহুর্তে আমরা ইলেভেন্টির বিল্ড প্রক্রিয়ার সাথে সহজে যোগ দিতে পারি না কারণ এটি অপরিহার্য নয় বরং ঘোষণামূলক : আপনি কীভাবে চান তার চেয়ে আপনি কী চান তা বর্ণনা করুন। একটি বৃহত্তর বিল্ড টুলের অংশ হিসাবে Eleventy চালানো কঠিন, কারণ এটি শুধুমাত্র তার কমান্ড-লাইন ইন্টারফেসের মাধ্যমে আহ্বান করা যেতে পারে।
টেমপ্লেটিং
web.dev মূলত Mozilla দ্বারা তৈরি Nunjucks টেমপ্লেটিং সিস্টেম ব্যবহার করে। Nunjucks এর সাধারণ টেমপ্লেটিং বৈশিষ্ট্য রয়েছে যেমন লুপ এবং কন্ডিশনাল কিন্তু আমাদের শর্টকোডগুলিকে সংজ্ঞায়িত করতে দেয় যা আরও HTML তৈরি করে বা অন্য যুক্তির আহ্বান জানায়।
স্ট্যাটিক কন্টেন্ট সাইট তৈরির বেশিরভাগ দলের মতো, আমরা ছোট শুরু করেছি এবং সময়ের সাথে শর্টকোড যোগ করেছি—এখন পর্যন্ত প্রায় 20টি। এর মধ্যে বেশিরভাগই আরও এইচটিএমএল তৈরি করে (আমাদের কাস্টম ওয়েব উপাদান সহ)। এখানে একটি উদাহরণ:
{% Aside %}
See how Asides work in the web.dev codebase
{% endAside %}
এটি এই মত দেখতে শেষ হবে:
কিন্তু এটি আসলে এইচটিএমএল তৈরি করছে যা এইরকম দেখাচ্ছে:
<div class="aside color-state-info-text">
<p>See how Asides work in the web.dev codebase</p>
</div>
এই পোস্টের সুযোগের বাইরে থাকাকালীন, web.dev মেটাপ্রোগ্রামিং ভাষা হিসাবে শর্টকোড ব্যবহার করে। শর্টকোডগুলি আর্গুমেন্ট গ্রহণ করে, তাদের একটি আর্গুমেন্ট অন্তর্ভুক্ত বিষয়বস্তু। এটির প্রয়োজন নেই যে শর্টকোডগুলি কিছু ফেরত দেয়, তাই সেগুলি রাজ্য তৈরি করতে বা অন্য কোনও আচরণ ট্রিগার করতে ব্যবহার করা যেতে পারে। 🤔💭
স্ক্রিপ্টিং
আগেই উল্লেখ করা হয়েছে, যেহেতু web.dev একটি স্ট্যাটিক সাইট, এটি জাভাস্ক্রিপ্ট ছাড়া এবং পুরানো ব্রাউজার দ্বারা পরিবেশিত এবং ব্যবহার করা যেতে পারে যা type="module" বা আমাদের অন্যান্য আধুনিক কোড সমর্থন করে না। web.dev সবার কাছে অ্যাক্সেসযোগ্য করার জন্য এটি আমাদের পদ্ধতির একটি অবিশ্বাস্যভাবে গুরুত্বপূর্ণ অংশ।
যাইহোক, আধুনিক ব্রাউজারগুলির জন্য আমাদের কোড দুটি প্রধান অংশ নিয়ে গঠিত:
- বুটস্ট্র্যাপ কোড, যার মধ্যে রয়েছে গ্লোবাল স্টেট, অ্যানালিটিক্স এবং এসপিএ রাউটিং এর কোড
- ওয়েব কম্পোনেন্টের জন্য কোড এবং CSS যা সাইটটিকে ধীরে ধীরে উন্নত করে
বুটস্ট্র্যাপ কোডটি মোটামুটি সহজবোধ্য: web.dev একটি একক-পৃষ্ঠা অ্যাপ্লিকেশন (SPA) হিসাবে নতুন পৃষ্ঠাগুলি লোড করতে পারে, তাই আমরা একটি বিশ্বব্যাপী শ্রোতা ইনস্টল করি যা স্থানীয় <a href="..."> উপাদানগুলিতে ক্লিকের জন্য শোনে৷ SPA মডেল আমাদের ব্যবহারকারীর বর্তমান সেশন সম্পর্কে বিশ্বব্যাপী অবস্থা বজায় রাখতে সাহায্য করে, অন্যথায় প্রতিটি নতুন পৃষ্ঠা লোড একজন ব্যবহারকারীর সাইন-ইন অবস্থায় অ্যাক্সেস করার জন্য Firebase-এ কল ট্রিগার করবে।
আপনি কোন ইউআরএলটি হিট করেছেন তার উপর ভিত্তি করে আমরা আমাদের সাইটে কয়েকটি ভিন্ন এন্ট্রিপয়েন্ট নির্দিষ্ট করি এবং ডায়নামিক import() ব্যবহার করে সঠিকটি লোড করি। এটি কোড সহ সাইটটি উন্নত করার আগে আমাদের ব্যবহারকারীদের প্রয়োজনীয় বাইটের সংখ্যা কমিয়ে দেয়।
ওয়েব উপাদান
ওয়েব কম্পোনেন্ট হল কাস্টম উপাদান যা JavaScript-এ প্রদত্ত রানটাইম কার্যকারিতা এনক্যাপসুলেট করে এবং <web-codelab> এর মতো কাস্টম নামের দ্বারা চিহ্নিত করা হয়। ডিজাইনটি web.dev-এর মতো স্থির সাইটগুলিতে নিজেকে ভালভাবে ধার দেয়: আপনার ব্রাউজার একটি উপাদানের জীবনচক্র পরিচালনা করে যেহেতু একটি সাইটের HTML আপডেট করা হয়, যেকোন উপাদানগুলিকে পৃষ্ঠা থেকে সংযুক্ত বা বিচ্ছিন্ন করার সময় সঠিকভাবে জানানো হয়৷ এবং পুরানো ব্রাউজারগুলি ওয়েব উপাদানগুলিকে সম্পূর্ণরূপে উপেক্ষা করে এবং DOM-এ যা কিছু অবশিষ্ট থাকে তা রেন্ডার করে।
প্রতিটি ওয়েব কম্পোনেন্ট হল connectedCallback() , disconnectedCallback() , এবং attributeChangedCallback() সহ পদ্ধতি সহ একটি ক্লাস। web.dev-এর কাস্টম উপাদানগুলি বেশিরভাগই LitElement থেকে উত্তরাধিকার সূত্রে প্রাপ্ত, যা জটিল উপাদানগুলির জন্য একটি সাধারণ ভিত্তি প্রদান করে।
যদিও web.dev অনেক পৃষ্ঠায় ওয়েব কম্পোনেন্ট ব্যবহার করে, কোথাও এটি পরিমাপ পৃষ্ঠার চেয়ে বেশি প্রয়োজনীয় নয়। আপনি এই পৃষ্ঠায় যে কার্যকারিতা দেখছেন তার বেশিরভাগই দুটি উপাদান প্রদান করে:
<web-url-chooser-container></web-url-chooser-container>
<web-lighthouse-scores-container></web-lighthouse-scores-container>
এই উপাদানগুলি আরও উপাদান তৈরি করে যা আরও কার্যকারিতা প্রদান করে। গুরুত্বপূর্ণভাবে, এই উপাদানগুলি আমাদের নিয়মিত মার্কডাউন সোর্স কোডের অংশ মাত্র —এবং আমাদের বিষয়বস্তু দল যেকোন পৃষ্ঠায় বর্ধিত কার্যকারিতা যোগ করতে পারে, শুধুমাত্র পরিমাপ নোড নয়।
আমাদের ওয়েব কম্পোনেন্টগুলি সাধারণত কন্টেইনার কম্পোনেন্ট মডেল ব্যবহার করে, যা প্রতিক্রিয়া দ্বারা জনপ্রিয় করা হয়েছে, যদিও এই মডেলটি এখন কিছুটা পাস । প্রতিটি -container উপাদান আমাদের গ্লোবাল স্টেটের সাথে সংযোগ করে ( ইউনিস্টোর দ্বারা সরবরাহ করা হয়), এবং তারপরে একটি ভিজ্যুয়াল উপাদান রেন্ডার করে, যার ফলে স্টাইলিং বা অন্যান্য অন্তর্নির্মিত কার্যকারিতা রয়েছে এমন প্রকৃত DOM নোডগুলিকে রেন্ডার করে।
আমাদের সবচেয়ে জটিল ওয়েব উপাদানগুলি বিশ্বব্যাপী ক্রিয়াকলাপ এবং রাষ্ট্রকে কল্পনা করার জন্য বিদ্যমান। উদাহরণস্বরূপ, web.dev আপনাকে আপনার প্রিয় সাইটের অডিট করতে দেয় এবং তারপরে পরিমাপ পৃষ্ঠা থেকে দূরে নেভিগেট করতে দেয়। আপনি যদি ফিরে আসেন, আপনি দেখতে পাবেন যে কাজটি এখনও চলছে।
আমাদের সাধারণ উপাদানগুলি সম্পূর্ণরূপে অন্যথায় স্থির বিষয়বস্তুকে উন্নত করে বা আশ্চর্যজনক ভিজ্যুয়ালাইজেশন তৈরি করে (উদাহরণস্বরূপ, প্রতিটি লাইন গ্রাফ তার নিজস্ব <web-sparkline-chart> ), যার বৈশ্বিক অবস্থার সাথে কোন সম্পর্ক নেই।
চলো চ্যাট করি
web.dev ইঞ্জিনিয়ারিং দল ( রব , ইওয়া , মাইকেল , এবং স্যাম ) শীঘ্রই আরও প্রযুক্তিগত গভীর ডাইভের সাথে অনুসরণ করবে৷
আমরা আশা করি যে আমরা কীভাবে জিনিসগুলি করি সে সম্পর্কে শুনে আপনার নিজের প্রকল্পগুলির জন্য আপনাকে কিছু ধারণা দিয়েছে। আপনি এই ব্লগের জন্য প্রশ্ন বা বিষয় অনুরোধ পেয়ে থাকলে টুইটারে আমাদের হিট করুন!