কিভাবে আমি আমার অ্যাপল সংগ্রহের জন্য একটি ওয়েবসাইট তৈরি করেছি

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

আমি 19 বছর বয়সে আমার প্রথম ম্যাক পেয়েছিলাম। এটি ছিল একটি iBook 700 Mhz, ব্রাজিলের একটি ইবে-এর মতো ওয়েবসাইটে অর্জিত। অর্থ এসেছে একটি ফ্ল্যাশ প্রকল্প থেকে।

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

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

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

প্রথমে, আমি সিদ্ধান্ত নিয়েছিলাম যে আমি আমার ডেটাকে একটি SQL ডাটাবেসে সংগঠিত করব, তথ্যগুলিকে বিভিন্ন কলাম এবং টেবিলে বিতরণ করা হবে৷ এর পরে, আমি একটি গ্রাফকিউএল এপিআই তৈরি করব যাতে আমার UI তৈরি করার জন্য প্রয়োজনীয় ডেটা সরবরাহ করা যায় - সম্ভবত প্রতিক্রিয়াতে লেখা, ব্যাবেল দিয়ে সংকলিত এবং ওয়েবপ্যাক দিয়ে প্যাক করা।

পূর্ববর্তী অনুচ্ছেদটি জোরে পড়লে, আপনি দেখতে পাচ্ছেন যে অনেক প্রযুক্তি রয়েছে এবং আমি এমনকি SASS বা স্টাইলড-কম্পোনেন্টের মতো ব্যাকএন্ড ভাষা এবং UI বিবরণগুলিকে উপেক্ষা করেছি। যখন আমার চূড়ান্ত লক্ষ্য একটি সুন্দর ডিজাইনে আইটেমগুলির একটি তালিকা দেখানো হয়েছিল তখন সবকিছুই কিছুটা অপ্রতিরোধ্য বলে মনে হয়েছিল৷

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

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

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

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

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

TL,DR:

• চূড়ান্ত ওয়েবসাইট
• উৎস কোড

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

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

কিছুক্ষণ আগে আমি স্টেইন নামে একটি SaaS পণ্য দেখেছি। আপনি একটি Google পত্রক নথিতে আপনার ডেটা তৈরি করেন এবং তারা আপনাকে আপনার ডেটা সহ একটি শেষ পয়েন্ট দেয়। তাদের লাইব্রেরি হ্যান্ডেলবারের মতো কাজ করে, এবং এটি আমার ব্যবহারের ক্ষেত্রে নিখুঁত দেখায়:

<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 যোগ করা এড়াতে পারি। প্রিসেট এবং লোডারগুলিতে খনন করার দরকার নেই৷

পুনশ্চ. আপনি যুক্তি দিতে পারেন যে আমি create-react-app বা Next.js বেছে নিতে পারতাম এবং এই সমস্ত সমস্যার সমাধান করতে পারতাম, কিন্তু না।

কোন CSS কাজ নেই

আমি CSS লিখতে পছন্দ করি, বিশেষ করে যখন আমি SASS ব্যবহার করতে পারি, কিন্তু আমি এখানে কোনো CSS লিখব না বলে সিদ্ধান্ত নিয়েছি। এটি করা এড়াতে আমার কয়েকটি ভাল কারণ ছিল:

• আমার মাথায় কোন ডিজাইন ছিল না, এবং আমি শালীন কিছু করতে পারতাম তা সত্ত্বেও, আমি এতে সময় এবং শক্তি লাগাতে চাইনি
• আমি Tailwind CSS ব্যবহার করতে চেয়েছিলাম

আপনি যদি কখনো Tailwind CSS সম্পর্কে না শুনে থাকেন, তাহলে অনুগ্রহ করে শুধু ভাববেন না, "এটি বুটস্ট্র্যাপের একটি বিকল্প।" এখানে তাদের ওয়েবসাইট থেকে একটি ভাল, সংক্ষিপ্ত ব্যাখ্যা রয়েছে:

বেশিরভাগ সিএসএস ফ্রেমওয়ার্ক খুব বেশি করে।
…
মতামতযুক্ত পূর্ব-পরিকল্পিত উপাদানগুলির পরিবর্তে, টেইলউইন্ড নিম্ন-স্তরের ইউটিলিটি ক্লাস সরবরাহ করে যা আপনাকে আপনার এইচটিএমএল না রেখে সম্পূর্ণ কাস্টম ডিজাইন তৈরি করতে দেয়।

এটা মোটামুটি সত্য। একটি দ্রুত অনুসন্ধান আপনাকে Tailwind CSS:

• হোয়াটসঅ্যাপ
• টেলিগ্রাম
• ফেসবুক
• Reddit
• ইউটিউব
• স্ল্যাক
• কয়েনবেস
• গিথুব
• ট্রেলো
• টুইটার
• নেটলিফাই

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

গত মাসে আমি ডেক ইউনিভার্সিটিতে অ্যাক্সেসিবিলিটি কোর্স নেওয়া শুরু করেছি। তাদের বিষয়বস্তু দুর্দান্ত এবং এটি আমাকে মনে করিয়ে দেয় যে এইচটিএমএল ডিফল্টরূপে অ্যাক্সেসযোগ্য৷ . একটি শব্দার্থিক HTML কাঠামো ব্যবহার করে এবং কীবোর্ড নেভিগেশন এবং রঙের বৈপরীত্যের মতো মৌলিক জিনিসগুলি পরীক্ষা করে আপনি বেশ কয়েকটি বাধা দূর করেন যা প্রতিবন্ধী ব্যক্তিদের আপনার সামগ্রী থেকে দূরে সরিয়ে দেয়।

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

• স্টাইলশীটগুলি নিষ্ক্রিয় করুন:স্টাইলশীটগুলি নিষ্ক্রিয় করে আপনি নিশ্চিত করতে পারেন যে আপনার বিষয়বস্তু একটি যৌক্তিক/কাঠামোগত উপায় অনুসরণ করে৷
• ভয়েসওভার:ভয়েসওভার macOS এবং iOS-এ অন্তর্ভুক্ত। এটি ব্যবহার করা খুবই সহজ, এবং এটি নিয়ে পরীক্ষা-নিরীক্ষা করে লোকেরা কীভাবে এই বৈশিষ্ট্যটি ব্যবহার করে তা আপনি আরও ভালভাবে বুঝতে পারবেন৷
• মডেল:মোডাল সমস্যাযুক্ত হতে পারে। আমি Ire Aderinokun এর পদ্ধতি অনুসরণ করার সিদ্ধান্ত নিয়েছি।
• axe:এক্সটেনশনটি WCAG 2 এবং সেকশন 508 অ্যাক্সেসিবিলিটি নিয়মের জন্য একটি অ্যাক্সেসিবিলিটি চেকার।

এটা নিখুঁত নয় -- এমন কিছু জিনিস আছে যা আমি আমার সাইটের জন্য কাজ করিনি, যেমন মূল বিষয়বস্তুর সাথে একটি স্কিপ লিঙ্ক যোগ করা। আপনি যদি কৌতূহলী হন, এখানে সমস্ত পরিবর্তন সহ পুল অনুরোধ রয়েছে৷

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

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

• Expedite (Stein ক্লায়েন্ট) ফেচ ব্যবহার করে, যা শুধুমাত্র Safari 10 এ যোগ করা হয়েছিল। তাদের সার্ভারের অনুরোধ সম্ভবত একটি XMLHttpRequest দিয়ে প্রতিস্থাপিত হতে পারে।
• টেইলউইন্ড অনেক উপাদানে ফ্লেক্সবক্স ব্যবহার করে। Safari শুধুমাত্র iOS 7-এ ফ্লেক্সবক্স সমর্থন করা শুরু করেছে৷ সম্ভবত আমি একটি শালীন চেহারা অর্জন করতে তাদের বিদ্যমান উপাদানগুলির জন্য কয়েকটি বৈশিষ্ট্য লিখতে পারি৷
• SSL সার্টিফিকেট পুরানো ব্রাউজারগুলির জন্য একটি সমস্যা হতে পারে৷
৷

সিদ্ধান্ত

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

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

আমি সম্পূর্ণরূপে আপনাকে বিভিন্ন প্রযুক্তির সাথে খেলার সুযোগ দিতে এরকম কিছু করার পরামর্শ দিচ্ছি। এটি একটি Apple সংগ্রহ হতে হবে না -- আপনি আপনার পছন্দের বই বা আপনার করা সেরা হাইকগুলি তালিকাভুক্ত করতে একটি সাইট তৈরি করতে পারেন৷ এই ক্ষেত্রে, যাত্রা লক্ষ্যের চেয়ে বেশি গুরুত্বপূর্ণ।

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

এছাড়াও আমার ব্লগে পোস্ট করা হয়েছে৷ টুইটারে আমাকে অনুসরণ করুন