बैक-एंड डेवलपर्स को आसान बनाने के लिए मैं HTML, CSS और जावास्क्रिप्ट कैसे लिख सकता हूं?

Question

जब मुझे एक डिज़ाइनर से डिज़ाइन मिलता है, तो मैं इसे PSD (फ़ोटोशॉप) फ़ाइल के रूप में प्राप्त करता हूं। मैं हमेशा उचित परत और फ़ोल्डर नामों की अपेक्षा करता हूं, मूल रूप से एक साफ और प्रबंधित PSD। इस desigbn से मैं HTML, CSS और JavaScript विकसित करता हूं और इसे बैक-एंड डेवलपर्स को वितरित करता हूं। उन्हें समझना आसान बनाने के लिए, मैं

• सिमेंटिक कोड लिखें,
• जावास्क्रिप्ट और सीएसएस को बाहरी फाइलों में रखें,
• HTML, CSS और JS फ़ाइलों में उपयोगी टिप्पणी जोड़ें,
• सीएसएस स्प्राइट का उपयोग करें (हालांकि डेवलपर्स इसे पसंद नहीं करते हैं),
• HTML5 बॉयलर प्लेट का उपयोग करें,
• जावास्क्रिप्ट के लिए jQuery का उपयोग करें,
• जब भी संभव हो नए HTML5 टैग और CSS3 का उपयोग करने का प्रयास करें
• HTML, CSS, JS और चित्रों वाली एक ज़िप फ़ाइल भेजी।

मुझे उम्मीद है कि यदि लेआउट में छोटे बदलाव करने की आवश्यकता होगी, तो डेवलपर्स इसे संभाल सकते हैं।

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

Comments

मैं चाहता हूं कि अधिक बैक एंड देवों ने एक समान प्रश्न पूछा।

— एरिक रेपेन

Answer 1

इनमें से बहुत सारे उत्तर विचारों के व्यापक दायरे को कवर करने वाले हैं, लेकिन यहाँ मेरे व्यक्तिगत हैं:

• त्रुटि संदेशों के लिए फॉर्म डिज़ाइन में कमरा छोड़ दें।
• इनपुट बॉक्स में लेबल मत डालो!
• अपने सीएसएस और जावास्क्रिप्ट को एक अलग फ़ाइल में रखें, जब तक कि आप नहीं जानते कि आप क्या कर रहे हैं और इसके बारे में ठीक से बुरा महसूस करते हैं।
• डिज़ाइन तत्वों को पृष्ठों के बीच समान रखें। जब कोई डिज़ाइन घटक (जैसे "हाल ही में देखा गया" बॉक्स) के प्रत्येक पृष्ठ पर अलग-अलग मार्कअप होता है, तो यह अनियंत्रित होता है।
• जो आपके लिए आसान है, वही करें जो सही है। <button>टैग चूसना। backround-imageचीजों के लिए जो वास्तव में <img>टैग चूसना चाहिए ।
• सुनिश्चित करें कि यदि आप एक पृष्ठ घटक बना रहे हैं, तो वह स्केल कर सकता है। मुझे पता है कि सबसे अच्छे फ्रंट-एंड डेवलपर्स ऐसा करते हैं, लेकिन मेरे पास बहुत सारे उदाहरण हैं जहां किसी ने एक छवि का उपयोग किया जो कि शीर्ष / निचले कैप की स्थिति होनी चाहिए। प्रोग्रामर को फ़ोटोशॉप खोलना पसंद नहीं है।
• अपने टेम्प्लेट को प्रूफ़ करें। प्रोग्रामर (अच्छे वाले) समर्पित, विस्तार उन्मुख लोग हैं। यदि वे आपके डिज़ाइन में समस्याएँ देखना शुरू कर देते हैं (हो सकता है कि पाद नेविगेशन में वर्तनी की त्रुटियां या असंगत वर्तनी हो) तो यह उन्हें प्रश्न पूछने और उनके काम को धीमा करने वाला है।

अंत में, और शायद सबसे महत्वपूर्ण:

• बैक-एंड में विकसित की जा रही भाषा के बुनियादी सम्मेलनों को जानें। एक PHP टेम्पलेट को देखने और foreachएक ifबयान के पीछे मूल वाक्यविन्यास को समझने और एक कथन को प्रारूपित करने echoया किसी <?php ?>टैग को स्थानांतरित करने में सक्षम होने के नाते फ्रंट-एंड डेवलपर के रूप में आपके मूल्य में बहुत वृद्धि होगी - मुझे अच्छा लगता है जब फ्रंट-एंड डेवलपर की आवश्यकता होती है एक साधारण परिवर्तन करने के लिए और उनकी सभी फाइलों का एक नया ज़िप मुझे सौंपने के बजाय इसे टेम्पलेट में कर सकते हैं ।
• एक परिशिष्ट के रूप में, संस्करण नियंत्रण सॉफ़्टवेयर का उपयोग करना सीखें। आपको एक विशेषज्ञ होने की आवश्यकता नहीं है, लेकिन अगर मैं कोशिश करने के बजाय एक अंतर को देख सकता हूं और यह पता लगा सकता हूं कि दो ज़िप फ़ाइलों के बीच क्या बदल गया है तो यह मेरे काम को सौ गुना आसान बनाता है।

वे बस कुछ ही हैं - मुझे यकीन है कि कई और भी हैं, लेकिन यदि आप इन सभी को पूरा करते हैं, तो आप जो भी अपने वेब साइट में अपने टेम्पलेट बदल रहे हैं, सम्मान और प्रशंसा अर्जित करना सुनिश्चित करते हैं।

Comments

जोहान को +1 शानदार टिप्स। लेकिन "इनपुट बॉक्स में लेबल क्यों न डालें!"

— जितेन्द्र व्यास

Answer 2

स्पष्ट बातें जो मैं सोच सकता हूँ कि एक बैक-एंड आदमी का जीवन आसान हो जाएगा व्यवहार में सरलता है। विभिन्न व्यवहार (रोल-ओवर, मेनू, आदि) वाले वेबपृष्ठ के तत्वों को डिज़ाइन करते समय, इस व्यवहार के सभी को सामान्य तरीके से मानकीकृत किया जाना चाहिए ताकि डेवलपर को लगातार यह निर्धारित करने के लिए कुछ चार्ट पर वापस न आना पड़े कि वह किस फ़ंक्शन को निर्धारित करता है। पृष्ठ व्यवहार करने के लिए कॉल करने की आवश्यकता है।

ग्रिड को डेटा या कार्यक्षमता के सेल हेरफेर द्वारा सेल की आवश्यकता नहीं होनी चाहिए। पृष्ठों के ब्लॉक तत्वों को आम तत्वों के रूप में आसानी से निश्चित किया जाना चाहिए ताकि वे आसानी से पीछे के कोड में विभाजित हो सकें। यह डेवलपर को कोड के पुन: उपयोग और / या पृष्ठ के विभिन्न पहलुओं के बीच संचार को सुविधाजनक बनाने में मदद करेगा।

पृष्ठ के क्षेत्रों को विशिष्ट डिज़ाइन सीमाओं को पार नहीं करना चाहिए। एक तत्व की वस्तुओं को दूसरे तत्व की वस्तुओं पर घुसपैठ नहीं करनी चाहिए।

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

Answer 3

ध्यान दें कि कभी-कभी, आपको बैक-एंड डेवलपर के लिए एक समाधान को संशोधित करना और कुछ अनुकूलित करना आसान बनाने के बीच एक विकल्प करना होगा।

आपके द्वारा उद्धृत सीएसएस स्प्राइट एक अच्छा उदाहरण है। मुझे समझ नहीं आ रहा है कि स्केलेबिलिटी और परफॉर्मेंस के मामले में कोई कैसे वेबसाइट बना सकता है और हर पेज से 100 इमेज, 5 सीएसएस और 15 जावास्क्रिप्ट फाइल के लिंक हैं। दूसरी ओर, सीएसएस स्प्राइट्स को बनाए रखना आसान नहीं है, और डिजाइन में मामूली बदलाव के लिए बहुत सारे काम की आवश्यकता हो सकती है।

उदाहरण के लिए यदि आपके पास तीन स्टेट आइकन्स हैं, एक के नीचे दूसरा, और आपको एक चौथा स्टेट जोड़ना होगा, तो क्या आप चौथे आइकॉन को इमेज के निचले हिस्से में जोड़ सकते हैं, तीन अन्य से अलग? या आप इसे तीसरे आइकन के बाद जोड़ते हैं, इसके लिए सब कुछ नीचे की ओर बढ़ते हुए इसके लिए कुछ खाली जगह है?

यह सीएसएस और जावास्क्रिप्ट फ़ाइलों के संयोजन और खनन के साथ आता है। आपको इसे किसी पैमाने की वेबसाइट के लिए करना होगा, लेकिन इसके लिए अतिरिक्त प्रयास करना होगा।

यह सीडीएन के लिए बिल्कुल वही बात है। आपको बड़ी वेबसाइटों के लिए इसका उपयोग करना होगा, लेकिन बदलाव करना अधिक कठिन होगा। उदाहरण के लिए यदि आपने सीएसएस फ़ाइल को बदल दिया है, तो आपको यूआरआई को फ़ाइल में cdn.example.com/g.css?r=2, फिर cdn.example.com/g.css?r=3, आदि को संशोधित करके ब्राउज़रों को नया डाउनलोड करने के लिए मजबूर करना होगा ।

इसके अलावा, "आसान" सापेक्ष है । उदाहरण के लिए, सीएसएस कोड लिखने के लिए दिशानिर्देश: व्यक्तिगत रूप से, मैं प्रति पंक्ति एक शैली पसंद करता हूं, जिसमें कोई व्हाट्सएप नहीं है:

#TopMenu a{text-decoration:none;color:#fff;padding:5px 10px;float:left;}

जबकि ज्यादातर लोग इस वाक्य रचना से नफरत करते हैं, और जिस से मैं नफरत करता हूं उसे पसंद करता हूं और पढ़ना मुश्किल होता है (नहीं, मैं पागल नहीं हूं):

#TopMenu a
{
    text-decoration: none;
    color: #fff;
    padding: 5px 10px;
    float: left;
}

उसी तरह, jQuery का उपयोग करने का मतलब यह नहीं है कि आप बैक-एंड डेवलपर के लिए अपनी फ़ाइलों को संशोधित करना आसान बना देंगे, क्योंकि कुछ डेवलपर्स प्रोटोटाइप या अन्य फ्रेमवर्क के साथ अधिक अनुभवी हैं।

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

Comments

हां, मैंने डेवलपर्स से सुना है कि वे सीएसएस स्प्राइट पसंद नहीं करते हैं, लेकिन यह अनुकूलन के लिए बहुत अच्छा है। मुझे लगता है कि मुझे इसके साथ रहना चाहिए और डेवलपर के पास मूल फ़ोटोशॉप कौशल होना चाहिए।

— जितेन्द्र व्यास

जब मैं jQuery का उपयोग करता हूं तो यह पहले से ही डेवलपर के साथ तय हो जाता है या मैं डेवलपर पर बातचीत छोड़ देता हूं।

— जितेन्द्र व्यास

जब हम कुछ बदलते हैं तो जीथब में सिंगल लाइन सीएसएस अच्छा दृश्य नहीं देता है।

— जितेन्द्र व्यास

@ तजेंद्रदेव अगर आपको लगता है कि समर्थित देवों के पास बुनियादी फोटोकॉपी कौशल होना चाहिए, तो आपके पास बुनियादी बैकेंड कौशल होना चाहिए

— Raynos

ऐसे उपकरण हैं जो स्प्राइट्स का उपयोग / रखरखाव आसान बना सकते हैं। बैक एंड देव पहले स्थान पर बनाए रखने वाले नहीं होने चाहिए। उन सभी को लागू करने की आवश्यकता है जो सही कक्षाएं या (प्रलेखित) कंटेनर संदर्भ हैं।

— एरिक रेपेन

Answer 4

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

मैं एक संस्करण नियंत्रित तरीके से काम करने वाले और वितरण तंत्र के रूप में उपयोग करने वाले डिजाइनरों के लिए ज्यादातर मामलों में तय करता हूं। मैं वास्तव में हर बार एक छोटे बदलाव के साथ एक बड़ी मोटी ज़िप फ़ाइल से निपटना नहीं चाहता।

Answer 5

आपके लिए लचीलापन आमतौर पर उनके लिए लचीलापन है। आपके द्वारा अनुसरण की जा रही सभी सर्वोत्तम प्रैक्टिस ऐप के दोनों किनारों पर जीतती हैं।

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

यदि आपके पास एक ड्रॉपडाउन है, उदाहरण के लिए, यह बहुत कम जेएस काम है एक रिश्तेदार-सेट के अंदर एक निरपेक्ष-पद छोड़ने वाले घटक को लंगर करने के लिए (आवश्यक कोई कोर्ड्स) क्लिक नहीं किया गया है, तो यह JQuery हथौड़ा बाहर खींचने और निर्देशांक प्राप्त करने के लिए है। तत्व पर और बस जगह में यह छड़ी। यह उन मामलों में टूटने की बहुत कम संभावना है जहां पृष्ठ शिफ्ट होता है या कुछ नए ब्राउज़र फीचर थ्रू पोज़िशनिंग की जानकारी बंद कर देते हैं। जेएस के काम से बचने के लिए आप HTML / CSS कौशल पर जितना अधिक भरोसा करेंगे, आपका UI उतना ही अधिक मजबूत होगा।

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

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

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

जहां तक ​​लेआउट की बात है, तो HTML को न्यूनतम, शब्दार्थ रखें और div रैपर से बचें। कम HTML है, लेआउट लेआउट के निदान के लिए आसान लेआउट समस्याएं हैं।

उपयोगिता सीएसएस के लिए स्व-व्याख्यात्मक वर्ग नामों का उपयोग करें। "स्पष्ट" की तुलना में सीएसएस नॉब्स के लिए एक "पंक्ति" वर्ग अधिक स्पष्ट होने की संभावना है।

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

जाहिर है कि यह एक वर्ग योजना के साथ अत्यधिक पाने के लिए बुरी खबर है, लेकिन जितना अधिक बैक एंड देव बस सही वर्गों को चीजों में जोड़कर सेट कर सकते हैं, उतना ही आसान यह उनके लिए मौजूदा पृष्ठ पर परिवर्तन करने के लिए होने वाला है।

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

विकास-संबंधी सभी चीजों के साथ, DRY और न्यूनतावाद को प्राथमिकता दें।

Answer 6

यह अभी भी मुझे केवल टिप्पणी नहीं करने देगा (इतना बेवकूफ) लेकिन एक व्यक्तिगत नोट के रूप में, मैं उल्लेख करूंगा, मैं हर रोज एक PHP कोडर के साथ वापस काम करता हूं (साथ ही साथ अपने काम में सहायता करता हूं) और सबसे आसान उपकरण जो हमने पाया है। कोमोडो के टूलबॉक्स का उपयोग करने के लिए और टूलबॉक्स में प्रत्येक दृश्य / नियंत्रक / मॉडल के "ट्रांसफर" किए गए वेरिएबल को सूचीबद्ध करने के लिए, ताकि किसी भी समय, अगर मैं उस पृष्ठ पर भेजे गए डेटा के एक सेट के चारों ओर एक पेज डिजाइन करने के लिए देख रहा हूं, तो मैं टूलबॉक्स में देख सकते हैं और वास्तव में देख सकते हैं कि क्या डेटा भेजा जा रहा है और किस प्रकार का "" इसे भेजा जा रहा है, साथ ही इसके अंत में इसके विपरीत भी है। बस एक टिप।