এসভিজিওএমজি

Svgomg স্ক্রিনশট

সারসংক্ষেপ

SVGOMG : SVGO এর জন্য একটি সুন্দর, উপাদান, প্রতিক্রিয়াশীল ফ্রন্টএন্ড।

আমরা কি পছন্দ করি?

আমাদের নিজস্ব Jake Archibald দ্বারা নির্মিত, SVGOMG ওয়েব প্রযুক্তির সাথে লেখা একটি সম্পূর্ণ প্রতিক্রিয়াশীল এবং সক্ষম টুলের প্রায় নিখুঁত উদাহরণ। এটিতে একটি সুন্দর মেটেরিয়াল ডিজাইন লুক রয়েছে, সার্ভিসওয়ার্কার নিশ্চিত করে যে অ্যাপটি দ্রুত লোড হয় এবং অফলাইনে পাওয়া যায় এবং মোবাইলে পরিবর্তনগুলি মসৃণ হয়।

সম্ভাব্য উন্নতি

একমাত্র আসল নিটপিক যা আমাদের অফার করতে হবে তা হল মূল UI অনুপস্থিত থাকার কারণে প্রাথমিক UX বিভ্রান্তিকর। যে ছাড়া, কাজ ভাল সম্পন্ন!

জেক আর্চিবল্ডের সাথে প্রশ্নোত্তর

কেন ওয়েব?

অলসতা। সম্পূর্ণ অলসতা। আমি উইন্ডোজ নেটিভ অ্যাপ তৈরিতে বিশেষজ্ঞ নই, আমি ওএসএক্স নেটিভ অ্যাপে বিশেষজ্ঞ নই, আমি iOS, অ্যান্ড্রয়েড, উইন্ডোজ ফোন বা লিনাক্সের জন্য নেটিভ অ্যাপ তৈরিতেও বিশেষজ্ঞ নই। তবে আমি ওয়েব করতে পারি, এবং সেই একটি দক্ষতা সেট আমাকে এমন কিছু তৈরি করতে দেয় যা সেই সমস্ত প্ল্যাটফর্মে কাজ করে।

উন্নয়নের সময় কি সত্যিই ভাল কাজ করেছে?

আমি এর পারফরম্যান্সে সত্যিই খুশি। আমি নিশ্চিত করি যে জেএস উপলব্ধ হওয়ার আগে পৃষ্ঠা রেন্ডার হয়। আসলে, এটি প্রথমে কিছু ইনলাইনড CSS এবং SVG এর সাথে মাত্র 5k HTML এর সাথে রেন্ডার করতে পারে। প্রধান স্ক্রিপ্ট এবং CSS সবই পটভূমিতে লোড করা হয়। এর মানে হল সাইটটি 1.5 সেকেন্ডে লোড হতে দেখা যাচ্ছে এমনকি 3G-তে একটি খালি ক্যাশে সহ, এবং এর বেশিরভাগই DNS এবং SSL।

খোলার পর্দা সত্যিই সহজ, তাই 5k তে এটি করা একটি চ্যালেঞ্জ ছিল না। এটা সত্যিই আমাকে বিরক্ত করে যে অনেক সাইট তাদের প্রথম রেন্ডারের জন্য JS-এ অপেক্ষা করে, কিছু এমনকি তাদের JS-কে রেন্ডার করার আগে আরও অনুরোধ করতে হয়। এটি 3G রেন্ডারের সময়কে 10 এর দিকে ঠেলে দেয় - একজন মোবাইল ব্যবহারকারী হিসাবে আমি জানি আমি এটি সহ্য করব না।

প্রধান JS হল 15k, কিন্তু SVG-কে পার্স ও ছোট করে এমন অংশগুলিকে অন্তর্ভুক্ত করে না, যা ব্যাকগ্রাউন্ডে একটি অতিরিক্ত ফেজ হিসাবে লোড করা হয়। এটি দুর্দান্ত কারণ ইন্টারঅ্যাক্টিভিটি সত্যিই দ্রুত অবতরণ করে এবং ব্যবহারকারী অতিরিক্ত লোডিং লক্ষ্য করেন না। যদি ব্যবহারকারী সেই স্ক্রিপ্ট উপলব্ধ হওয়ার আগে একটি SVG নির্বাচন করতে পরিচালনা করে, তাহলে সেই স্ক্রিপ্টটির লোডিং প্রক্রিয়াকরণ সময়ের অংশ বলে মনে হয়।

পুরো জিনিসটি অফলাইনে কাজ করার জন্য আমি ServiceWorker ব্যবহার করেছি। অফলাইনে কাজ করা একটি দুর্দান্ত বৈশিষ্ট্য, তবে আমি বেশিরভাগই পারফরম্যান্সের জন্য এটি করছি। SVGOMG-তে পরবর্তী ভিজিটগুলি প্রায় সঙ্গে সঙ্গেই রেন্ডার হয়, ব্যবহারকারীর যে সংযোগই হোক না কেন। মোবাইল সংযোগের বৈচিত্র্যের প্রেক্ষিতে, এটি সত্যিই মূল্যবান!

আপনার অ্যাপটি উন্নত করার জন্য যদি আপনার কাছে কোনো API থাকতে পারে তবে এটি কী হবে?

আমি Babel ব্যবহার করেছি যাতে আমি ভবিষ্যতের জাভাস্ক্রিপ্ট স্টাফ ব্যবহার করতে পারি। প্ল্যাটফর্মে নেটিভভাবে কাজ করার জন্য এটির মধ্যে কিছু থাকা দুর্দান্ত হবে। বিশেষভাবে, async/await, arrow functions, argument defaults এবং destructuring.

আউটপুট জিজিপ করার জন্য আমাকে একটি লাইব্রেরি ব্যবহার করতে হয়েছিল তার জিজিপড আকার খুঁজে বের করতে। এটির জন্য একটি লাইব্রেরি ব্যবহার করা কিছুটা বিরক্তিকর কারণ সেই কোডটি ইতিমধ্যেই HTTP স্টাফের জন্য ব্রাউজারে রয়েছে, এটিতে কোনও API নেই৷ আদর্শভাবে এটি কিছু ধরণের রূপান্তর স্ট্রিম হওয়া উচিত যাতে আমি পুরো জিনিসটি মেমরিতে না রেখে আউটপুটের আকার গণনা করতে পারি।