सीएसएस फ्रेमवर्क की तुलना करने के लिए उपकरण

हाय, मैं अलेक्जेंडर हूँ। मैं सक्रिय रूप से अध्ययन कर रहा हूं और लगभग एक साल से वेब विकास कर रहा हूं। यह सब आपके पसंदीदा खेल के ग्राहक को हटाने और संरक्षक की खोज के साथ शुरू हुआ। वेब विकास में सुधार करते हुए, उन्होंने CSS तुलनित्र परियोजना बनाई। परियोजना का सार आकार और अन्य लोकप्रिय और आधुनिक मापदंडों के संदर्भ में सीएसएस फ्रेमवर्क की तुलना करना है। प्रोजेक्ट बनाते समय वाणिज्यिक उद्देश्यों का पीछा नहीं किया जाता है। यह लेख मुख्य रूप से अन्य वेब डेवलपर्स से प्रतिक्रिया प्राप्त करने के लिए है।

फिलहाल यह मेरा पहला प्रोजेक्ट है, और चूंकि यह शुरुआती और अनुभवी वेब डेवलपर्स दोनों के लिए दिलचस्प और उपयोगी होगा, इसलिए मैंने इसके बारे में एक लेख लिखने का फैसला किया।

यह सब इस तथ्य से शुरू हुआ कि मेरे सहयोगी आकार के लिए एक सीएसएस फ्रेमवर्क की तलाश कर रहे थे, और पहला उत्तर जो Google प्रदान करता है:



तो विचार आया - एक उत्पाद का निर्माण जो आकार के मामले में लोकप्रिय सीएसएस फ्रेमवर्क की तुलना करेगा, साथ ही साथ अन्य मापदंडों को भी। परियोजना पर केवल दो लोग काम कर रहे हैं - मैं, एक फ्रंट-एंड वेब डेवलपर के रूप में, और मेरा सहयोगी जो गोलंग में स्क्रैपिंग में शामिल था। परियोजना के पहले प्रोटोटाइप में एक सरलीकृत दृश्य था:



लोकप्रिय विकल्पों के विपरीत, हमारी परियोजना में एक्सेसिबिलिटी (निर्भरता), निर्भरता-रहित (जावास्क्रिप्ट पर कोई निर्भरता नहीं है, jQuery आदि), साथ ही साथ गटर चैट और स्टैक ओवरफ्लो के लिंक भी हैं।

फिर प्रोजेक्ट पूरी तरह से मेरे पास आ गया। जुलाई 2019 की शुरुआत में, इस पर काम शुरू हुआ। पहली इच्छा उत्पाद को अधिक अभिव्यंजक रूप देना था, और निश्चित रूप से यह आकार द्वारा फ़िल्टरिंग और छंटाई के अलावा था। आवश्यक परिणामों को प्रतिबिंबित करने के लिए, आपको संबंधित इनपुट फ़ील्ड में आवश्यक आकार (बाइट्स में) निर्दिष्ट करने की आवश्यकता है:



एक अलग आकार चार्ट भी उपलब्ध है:



जैसे आकार द्वारा फ़िल्टर करना, स्टैक ओवरफ़्लो पर प्रश्नों की संख्या और गिटहब पर तारों की संख्या को फ़िल्टर करना। आखिरकार, यह ज्ञात है कि प्रत्येक वेब डेवलपर आवश्यक जानकारी की तलाश में बहुत समय बिताता है। इस संबंध में, मैंने मंच से संबंधित लिंक और लिंक जोड़ने का फैसला किया, अगर कोई मौजूद है। ये समाधान विकास को सुविधाजनक बनाने और गति प्रदान करने में मदद करेंगे, क्योंकि सभी आवश्यक लिंक "हाथ में" हैं। और फ़िल्टर करने से उपयोगकर्ताओं के बीच एक अधिक लोकप्रिय रूपरेखा खोजने में मदद मिलेगी।

बेशक, स्मार्टफोन के दिनों में, चौखटे के अनुकूलन क्षमता पर डेटा को जोड़ना मुश्किल नहीं था, और मल्टीसेप्ट में इसके द्वारा फ़िल्टरिंग:



सामान्य तौर पर, फ्रेमवर्क कार्ड पर पोस्ट की गई जानकारी को निम्न सूची द्वारा योजनाबद्ध रूप से दर्शाया जा सकता है:

• फ्रेमवर्क नाम
• कंपनी डेवलपर
• गिटहब सितारे
• उपलब्धता की उपलब्धता
• जावास्क्रिप्ट निर्भरता
• लाइसेंस
• अनुकूलन क्षमता
• आयाम
• ढेर अतिप्रवाह पर प्रश्नों की संख्या
• उपयोगकर्ताओं की संख्या जिटर चैट
• मंच

और फ़िल्टरिंग इकाई स्वयं और कार्ड के रूप में निम्न रूप में है:



क्लाइंट पक्ष पर, HTML5, CSS3 (फ्लेक्सबॉक्स का उपयोग करके लेआउट) और तीसरे पक्ष के पुस्तकालयों और फ्रेमवर्क का उपयोग किए बिना शुद्ध जावास्क्रिप्ट का उपयोग किया जाता है। गिटहब तारे, और सभी आकार के फ्रेम खुले आपी से प्राप्त किए जाते हैं जो गोलंग खुरचनी और क्रोन-नौकरियों का उपयोग करके साप्ताहिक रूप से अद्यतन किया जाता है।



स्क्रैपर ही काफी सरलता से काम करता है। गीथहब पर सितारों की संख्या पर डेटा उपरोक्त जसन (प्रत्येक अपने स्वयं के ढांचे के लिए) से प्राप्त किया गया है, जो कि बूटस्ट्रैप उदाहरण में संदर्भ द्वारा स्थित है। और आकार की गणना निम्नानुसार की जाती है - सीएसएस के देव और ठेस संस्करण लोड किए जाते हैं, और फिर ठेस संस्करण को गज़िप प्रारूप में संग्रहीत किया जाता है।

इसलिए, मैं आगे बताऊंगा कि क्लाइंट पर क्या हो रहा है।

फ़िल्टर चेकबॉक्स द्वारा ऑन-चेक किए गए फ़ंक्शन का उपयोग करके किया जाता है, जिसमें 3 पैरामीटर होते हैं:

$ तत्व - चेकबॉक्स ही
नाम - फ़िल्टर नाम
फ़िल्टर - फ़िल्टर ही।

उदाहरण के रूप में पहुंच-योग्यता फ़िल्टरिंग का उपयोग करते हुए, सभी कोड इस तरह दिखाई देंगे:

const FILTER_ACCESSIBILITY = "accessibility"; function matchAll(framework) { return true; } function matchAccessibility(framework) { return framework.accessibility; } const matchStateMap = { [FILTER_ACCESSIBILITY]: matchAll, }; function match(frameworks) { const result = frameworks .filter(matchStateMap[FILTER_ACCESSIBILITY]); // other filtration return result; } function $(id) { return document.getElementById(id); } function render(list) { const views = new Array(list.length); for (let i = 0; i < list.length; i++) { const item = list[i]; views[i] = `<h2><a href="${item.siteUrl}" target="_blank">${item.name} v${item.version}</a></h2>`; } $("demo").innerHTML = views.join(""); } function onChecked($element, name, filter) { $element.addEventListener("click", function () { if ($element.checked) { matchStateMap[name] = filter; } else { matchStateMap[name] = matchAll; } render(match(frameworks)); }); } const $accessibilityCheckbox = $("js-checkbox-accessibility"); onChecked($accessibilityCheckbox, FILTER_ACCESSIBILITY, matchAccessibility); 

एक समान फ़ंक्शन द्वारा छंटनी की जाती है

 let compare = null; const matchStateMap = { [FILTER_ACCESSIBILITY]: matchAll, // ... }; function match(frameworks) { const result = frameworks .filter(matchStateMap[FILTER_ACCESSIBILITY]); // other filtration // sort O(N *ln(N)), so better first match, than sort if (compare !== null) { result.sort(compare); } return result; } function sortByStars(a, b) { // DESC return b.repository.stars - a.repository.stars; } function onSort($element, sort) { $element.addEventListener("click", function () { compare = sort; render(match(frameworks)); }); } const $moreStars = $("js-sort-by-stars"); onSort($moreStars, sortByStars); 

विश्लेषकों के अनुसार, परियोजना की औसत उपस्थिति प्रति दिन लगभग 10 उपयोगकर्ता है। भविष्य की योजनाओं के लिए, यह उपलब्ध घटकों (नावबार, बटन इत्यादि) की सूची जोड़ रहा है, उनके आकार की तुलना के बाद। इसके अलावा, सभी तुलनात्मक फ्रेमवर्क का उपयोग करके और उनके आकार और लोडिंग गति की तुलना में स्थिर स्टेटिक पेज बनाना। और, यदि परियोजना लोकप्रिय होगी - स्टैक ओवरफ्लो पर प्रश्नों की संख्या और गिटर में उपयोगकर्ताओं की संख्या को अपडेट करके एक खुरचनी का जोड़।