আমার অ্যাপল কালেকশন প্রদর্শনের জন্য একটি ডেডিকেটেড ওয়েবসাইট তৈরি

কয়েকদিন আগে আমি একটি অ্যাপল কালেকশন শুরু করেছিলাম। আমি টিনেজ থেকে অ্যাপল হার্ডওয়্যার (এবং তার এস্থেটিক্স) ফলো করছিলাম, কিন্তু সেটার সময় আমার पास ম্যাক কেনার টাকা ছিল না।

১৯ বছর বয়সে আমার প্রথম ম্যাক পেয়েছিলাম। এটি ছিল একটি iBook 700 MHz, ব্রাজিলের একটি ইবে-লাইক ওয়েবসাইট থেকে আ뀟 করা। টাকা আসেছিল একটি ফ্ল্যাশ প্রজেক্ট থেকে।

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

কয়েকটি ল্যাপটপ এবং iDevice কিনার পর, আমি সিদ্ধান্ত নিলাম যে আমার iThings-র তথ্য কালেক্ট করা শুরু করা উচিত। শুরুতে, আমি একটি Gist তৈরি করেছিলাম যাতে মডেল, সিরিয়াল নম্বর, কীভাবে ডিভাইসটি পেয়েছিলাম, ন্যূনতম/সর্বোচ্চ OS, ইত্যাদি থাকত।

তালিকা বড় হতে থাকল এবং কন্টেন্টটি গুলগুলি হয়ে ওঠে। আমি মনে করলাম এই কন্টেন্টটি একটি ওয়েবসাইটে দেখানো পায়েরফেক্ট হবে, এবং আমাকে কোনো ডেভেলপার नियোগ করতে হবে না :D

প্রথমে, আমি সিদ্ধান্ত নিলাম আমার ডেটা একটি SQL ডাটাবেসে সংগঠিত করব, তথ্যগুলো ভিন্ন কলাম এবং টেবিলে বিতরণ করে। তারপর, আমি একটি graphQL API তৈরি করব যেটি আমার UI পপুলেট করার জন্য প্রয়োজনীয় ডেটা দেবে – সম্ভবত React-এ লেখা, Babel দিয়ে কম্পাইলড এবং Webpack দিয়ে প্যাকড।

উপরের প্যারাগ্রাফটি জোরে পড়লে, আপনি দেখতে পাবেন যে এখানে অনেক টেকনোলজি আছে, এবং আমি ব্যাকএন্ড ল্যাঙ্গুয়েজ এবং UI ডিটেইলস যেন SASS বা styled-components উপেক্ষা করেছি। আমার চূড়ান্ত লক্ষ্য ছিল একটি আইটেমের তালিকা সুন্দর ডিজাইন করে দেখানো – তবুও সব কিছু কিছুটা ভয়ংকর লাগল।

সেটি হলে, আমি চিন্তা করলাম কীভাবে আমি এই কন্টেন্টটি ডেলিভার করতে পারি:

• API বা যেকোনো ব্যাকএন্ড কাজ ছাড়া
• যেকোনো JS ফ্রেমওয়ার্ক/লাইব্রেরি ছাড়া
• যেকোনো JS টুলিং (Webpack, Babel, ইত্যাদি) ছাড়া
• যেকোনো CSS কাজ ছাড়া

এই সীমাবদ্ধতাগুলোর উপরে, আমার কয়েকটি স্ট্রेच গোল ছিল:

• ভালো অ্যাক্সেসিবিলিটি সহ একটি ওয়েবসাইট তৈরি করা
• পুরানো ব্রাউজারেও কাজ করে এমন একটি ওয়েবসাইট তৈরি করা, যেহেতু আমার কাছে Mac OS 9.2 চলে এমন কম্পিউটার এবং iOS 3 চলে এমন iDevices আছে

চ্যালেঞ্জ গ্রহণ করা হল। একটা index.html, কয়েকটি ভ্যানিলা JS ফাইল, এবং কোনো কাস্টম CSS নেই। আমি আপনাদের সাথে সাইট বিল্ড করার অভিজ্ঞতা শেয়ার করতে চাই।

TL,DR:

• ফাইনাল ওয়েবসাইট
• সোর্স কোড

আসুন সীমাবদ্ধতাগুলোকে পয়েন্ট বাই পয়েন্টে আলোচনা করি:

API বা যেকোনো ব্যাকএন্ড কাজ নেই

কয়েকদিন আগে আমি একটি SaaS প্রোডাক্ট দেখেছিলাম যাকে Stein বলে। আপনি একটি Google Sheets ডকুমেন্টে আপনার ডেটা তৈরি করেন এবং তারা আপনাকে আপনার ডেটার সাথে একটি এন্ডপয়েন্ট দেয়। তাদের লাইব্রেরি Handlebars-এর মতো কাজ করে, এবং এটি আমার ইউজ কেসের জন্য পায়েরফেক্ট লাগল:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2"> <div> <h1>{{title}}</h1> <h6>By {{author}}</h6> {{content}} Read on <a href="{{link}}">Medium</a> </div> </div> 

JS ফ্রেমওয়ার্ক/লাইব্রেরি এবং টুলিং নেই

আমি এই প্রজেক্টে ফ্রেমওয়ার্ক বা লাইব্রেরি যোগ না করার সিদ্ধান্ত নিলাম কারণ ইউজ কেসটিকে এর প্রয়োজন ছিল না। এই পেজের সব JS ইন্টারঅ্যাকশন খুব সহজ (মেনু শো/হাইড, মডাল স্ক্রিন খোলা, পার্মালিংক হ্যান্ডেল করা)।

যেহেতু আমি কোনো ফ্রেমওয়ার্ক/লাইব্রেরি ব্যবহার করছি না, আমি Webpack এবং Babel যোগ করা এড়িয়ে যেতে পারলাম। প্রিসেট এবং লোডার খুঁজে বের করার প্রয়োজন নেই।

P.S. আপনি আর্গুমেন্ট দিতে পারেন যে আমি create-react-app বা Next.js বেছে নিতে পারতাম এবং এই সব সমস্যা সমাধান হতো, কিন্তু না।

CSS কাজ নেই

আমি CSS লিখতে ভালোবাসি, বিশেষ করে SASS ব্যবহার করলে, কিন্তু এখানে আমি কোনো CSS লিখতে চাইলাম না। এর কিছু ভালো কারণ ছিল:

• আমার মনে কোনো ডিজাইন ছিল না, এবং এই ফ্যাক্টের باড়েও যে আমি কিছু ভালো লুকিং কিছু করতে পারতাম, আমি তাতে সময় এবং শক্তি দিতে চাইলাম না
• আমি Tailwind CSS ব্যবহার করতে চেয়েছিলাম

আপনি যদি Tailwind CSS সম্পর্কে কখনো না শুনে থাকেন, দয়া করে শুধু ভাববেন না, "It's just an alternative to Bootstrap." তাদের ওয়েবসাইট থেকে একটি ভালো, সংক্ষিপ্ত ব্যাখ্যা:

Most CSS frameworks do too much.
…
Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

এটি প্রায় সত্য। একটি কুইক সার্চ আপনাকে Tailwind CSS-এ "রিবিল্ট" অনেক ওয়েব অ্যাপ দেবে:

• Whatsapp
• Telegram
• Facebook
• Reddit
• Youtube
• Slack
• Coinbase
• Github
• Trello
• Twitter
• Netlify

ভালো অ্যাক্সেসিবিলিটি সহ ওয়েবসাইট তৈরি করা

গত মাসে আমি Deque University-এ অ্যাক্সেসিবিলিটি কোর্স শুরু করেছিলাম। তাদের কন্টেন্ট চমৎকার এবং এটি আমাকে মনে করিয়ে দিয়েছিল যে HTML ডিফল্টভাবে অ্যাক্সেসিবল। সেমান্টিক HTML স্ট্রাকচার এবং কীবোর্ড নেভিগেশন এবং কালার কন্ট্রাস্টের মতো বেসিক জিনিসগুলো টেস্ট করলে আপনি অনেক ব্যারিয়ার দূর করতে পারেন যা অক্ষম মানুষকে আপনার কন্টেন্ট থেকে দূরে রাখে।

আমি অ্যাক্সেসিবিলিটি এক্সপার্ট নই, কিন্তু এখানে আমার ওয়েবসাইটের জন্য আমি যে কয়েকটি অ্যাক্সেসিবিলিটি-সম্পর্কিত জিনিসে কাজ করেছি:

• স্টাইলশীট ডিজেবল করুন: স্টাইলশীট ডিজেবল করলে আপনি নিশ্চিত করতে পারেন যে আপনার কন্টেন্ট একটি লজিক্যাল/স্ট্রাকচারাল পথ অনুসরণ করছে।
• VoiceOver: VoiceOver macOS এবং iOS-এ অন্তর্ভুক্ত। এটি ব্যবহার করা খুব সহজ, এবং এর সাথে পরীক্ষা-নিরীক্ষা করলে আপনি ভালোভাবে বুঝতে পারেন লোকেরা কীভাবে এই ফিচারটি ব্যবহার করে।
• Modals: Modals সমস্যা সৃষ্টি করতে পারে। আমি Ire Aderinokun-এর পদ্ধতি অনুসরণ করলাম।
• axe: এক্সটেনশনটি WCAG 2 এবং Section 508 অ্যাক্সেসিবিলিটি রুলের জন্য একটি অ্যাক্সেসিবিলিটি চেকার।

এটি পায়েরফেক্ট নয় -- আমার সাইটের জন্য কয়েকটি জিনিস আছে যা আমি করিনি, যেমন মেইন কন্টেন্টে স্কিপ লিংক যোগ করা। আপনি যদি কৌতূহলী হন, তবে এখানে সকল পরিবর্তনের সাথে Pull Request আছে।

পুরানো ব্রাউজারেও কাজ করে এমন ওয়েবসাইট তৈরি করা

আমি এই উদ্দেশ্য অর্জন করতে পারিনি যেহেতু আমার স্ক্রিপ্ট এবং স্টাইলসের উপর কোনো কন্ট্রোল ছিল না। যাহোক, এটি অসম্ভব বলে মনে হয় না। আমি যা কিছু লক্ষ্য করেছি:

• Expedite (Stein ক্লায়েন্ট) fetch ব্যবহার করে, যা Safari 10-এ যোগ হয়েছিল। তাদের সার্ভারের রিকোয়েস্ট সম্ভবত XMLHttpRequest-এ রিপ্লেস করা যেতে পারে।
• Tailwind অনেক এলিমেন্টে Flexbox ব্যবহার করে। Safari iOS 7-এ Flexbox সাপোর্ট শুরু করেছিল। হয়তো আমি তাদের এক্সিস্টিং এলিমেন্টের জন্য কয়েকটি প্রোপার্টি লিখতে পারতাম একটি ডিসেন্ট লুক পাওয়ার জন্য।
• পুরানো ব্রাউজারদের জন্য SSL সার্টিফিকেট একটি ইস্যু হতে পারে।

উপসংহার

এই ওয়েবসাইট বানানো ছিল সুপার ফান। এই ধরনের পেট প্রজেক্ট থাকা আমাকে আমার জবে ব্যবহার না করা টেকসঙ্গে কাজ করার একটি ভালো কারণ দিয়েছিল। ভবিষ্যতে, Stein এবং/অথবা TailwindCSS একটি ফিচার প্রোটোটাইপ বা হ্যাকাথন প্রজেক্ট বানাতে কাজে লাগতে পারে।

তথ্য যে আমি আমার প্রজেক্টে "সীমাবদ্ধতা" যোগ করেছিলাম, এতে আমাকে বক্সের বাইরে চিন্তা করতে বাধ্য করেছিল। যাহোক আমার সব উদ্দেশ্য অর্জন করতে পারিনি, তবুও এটি আমাকে আরও বেশি বুঝতে সাহায্য করল কীভাবে সব টুকরো একসাথে জড়িত।

আমি সম্পূর্ণভাবে এത്തেরই এই টাইপের কিছু করার সুপারিশ করি যাতে আপনি ভিন্ন টেকসঙ্গে খেলার সুযোগ পান। এটিকে অ্যাপল কালেকশন হতে হবে না – আপনি আপনার প্রিয় বইগুলোর তালিকা বা আপনার করা সেরা হাইকগুলোর একটি সাইট বানাতে পারেন। এই কেসে, যাত্রাটিই লক্ষ্যের চেয়ে বেশি গুরুত্বপূর্ণ।

কৌতূহলবশত, আমি Clockify ব্যবহার করে আমার টাইম ট্র্যাক করেছিলাম এবং কোডিং, ডেটা তৈরি, টেস্টিং এবং এই পোস্ট লেখার মধ্যে আমি এই প্রজেক্টে ১৩ ঘন্টা কাজ করেছি।

আমার ব্লগেও পোস্ট করা হয়েছে। টুইটারে ফলো করুন