Freecodecamp: फ्रीकोडकोड की सीएसएस स्टाइल गाइड बनाना

@raisedadead आपको क्या लगता है?

धन्यवाद, क्या आप किसी भी तरह से इन पर एक तरह से जान सकते हैं? किसी भी लिंटर का उपयोग करना?

@raisedadead @tomasvn मेरे अनुसार एक सीएसएस शैली गाइड बनाने और उस पर चिपके रहने की प्रक्रिया लंबे समय तक उपयोगी परिणाम नहीं देगी। प्रतिक्रिया, यार्न, बैबेल और कई अन्य ओपन सोर्स प्रोजेक्ट्स Prettier उपयोग करते हैं और इसी तरह के अन्य एक्सटेंशन उनके सीएसएस फॉर्मेटिंग के लिए उपयोग करते हैं।

एक स्टाइल गाइड बनाने के बजाय। हमें अपने योगदानकर्ताओं को उनके आईडीई / कोड संपादक में Prettier स्थापित करने के लिए कहना चाहिए और हम जाने के लिए अच्छा होगा।
@raisedadead विचार इस पर?

धन्यवाद, क्या आप किसी भी तरह से इन पर एक तरह से जान सकते हैं? किसी भी लिंटर का उपयोग करना?

Prettier अच्छा काम करता है;)। जब आप किसी सीएसएस शैली नियम का उल्लंघन करते हैं तो यह आपको चेतावनी देता है।

एक स्टाइल गाइड बनाने के बजाय। हमें अपने योगदानकर्ताओं को प्रीटियर को उनके आईडीई / कोड संपादक में बताने के लिए कहना चाहिए और हम जाने के लिए अच्छा होगा।

समस्याओं से छुपकर कभी किसी की मदद नहीं की ... helped!

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

IMHO, हम सीखने के आसपास का समुदाय होने के नाते लिंटर द्वारा इंगित कोड शैली में मुद्दों को ठीक करने में संकोच नहीं करना चाहिए, बल्कि।

कृपया यह भी ध्यान दें कि Prettier एक _Opionated_ Code Formatter है

मेरे अनुसार एक सीएसएस शैली गाइड बनाने और लंबे समय तक चिपकाने की प्रक्रिया उपयोगी परिणाम नहीं देगी।

मुझे लगता है, यह एक गलत तर्क है (यदि आपके पास आंकड़े हैं तो मुझे गलत साबित करने के लिए स्वतंत्र महसूस करें)।

यदि आप Airbnb JS स्टाइल गाइड, JS Standard इत्यादि की जांच करते हैं, तो उनके पास हेल्पर राइट स्टैंडर्ड कोड होता है और हजारों कंपनियों द्वारा उपयोग किया जाता है, और हर रोज देवता।

@raisedadead हम समस्याओं से दूर नहीं छिप रहे हैं ...! हम लिंटर का उपयोग कर सकते हैं, लेकिन एक ही कार्य को प्रीटीयर के साथ एक एकल कुंजी बंधन के साथ किया जा सकता है, इसलिए हम इसके लिए एक लंबा रन लेने की कोशिश क्यों कर रहे हैं?

मुझे लगता है, यह एक गलत तर्क है (यदि आपके पास आंकड़े हैं तो मुझे गलत साबित करने के लिए स्वतंत्र महसूस करें)।
यदि आप Airbnb JS स्टाइल गाइड, JS Standard आदि की जांच करते हैं, तो उनके पास हेल्पर राइट स्टैंडर्ड कोड होता है और हर दिन हजारों कंपनियों द्वारा उपयोग किया जाता है।

मैं इस पर आपसे दृढ़ता से सहमत हूँ! उनके JS स्टाइल गाइड वास्तव में बहुत मददगार हैं।

हम समस्याओं से दूर नहीं छिपा रहे हैं ...! हम लिंटर का उपयोग कर सकते हैं, लेकिन एक ही कार्य को प्रीटीयर के साथ एक एकल कुंजी बंधन के साथ किया जा सकता है, इसलिए हम इसके लिए एक लंबा रन लेने की कोशिश क्यों कर रहे हैं?

क्योंकि, हम मानक कोड लिखना चाहते हैं? योगदानकर्ता अपनी पसंद के किसी भी उपकरण का उपयोग करने के लिए स्वतंत्र हैं, लेकिन यह तय नहीं करता है कि हमें मार्गदर्शक की आवश्यकता नहीं है।

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

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

क्योंकि, हम मानक कोड लिखना चाहते हैं? योगदानकर्ता अपनी पसंद के किसी भी उपकरण का उपयोग करने के लिए स्वतंत्र हैं, लेकिन यह तय नहीं करता है कि हमें मार्गदर्शक की आवश्यकता नहीं है।

मैं इस पर भी आपके साथ हूं। ठीक है, चलो एक स्टाइल गाइड के साथ चलते हैं और हम स्टाइलर का उपयोग हमारे लिंटर के रूप में कर सकते हैं।

@raisedadead स्टाइललिंट ठीक लगता है would जैसा कि यह उनके दस्तावेज़ में योगदानकर्ताओं के बारे में योगदानकर्ता को चेतावनी देगा

@tomasvn हमने अभी अपना नया पाठ्यक्रम और शिक्षण मंच लॉन्च किया है। क्या आप अभी भी इसके साथ मदद करने में रुचि रखते हैं?

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

@QuincyLarson ज़रूर, मैं अपना कुछ समय ले सकता हूं और आपको CSS को रीक्रिएट करने में मदद कर सकता हूं, क्योंकि freecodecamp काफी बड़ा कोडबेस है, बस मुझे इशारा करना चाहिए कि मुझे कहां से शुरू करना चाहिए

@tomasvn यह अद्भुत होगा!

freeCodeCamp में बहुत सीएसएस नहीं है। freeCodeCamp का CSS मुख्य रूप से "main.less" में स्थित है। और हम बूटस्ट्रैप 3.0 का उपयोग कर रहे हैं।

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

@QuincyLarson मिल गया, और main.less क्लाइंट / कम / main.less में स्थित है, क्या यह सही फ़ाइल है?

@tomasvn आपके धैर्य के लिए धन्यवाद - मैंने इसे देखा। हाँ - क्लाइंट / कम / main.less सही फ़ाइल होना चाहिए।

@tomasvn क्या इसके साथ मदद चाहिए? मुझे योगदान देने में खुशी होगी

@tomasvn क्या आपको अभी तक इस पर काम शुरू करने का मौका मिला है? यदि नहीं, तो @borisyordanov हाँ - हम इसके साथ आपके योगदान का स्वागत करेंगे।

देरी के लिए @borisyordanov क्षमा करें, निश्चित रूप से आगे बढ़ें मुझे विंडोज़ पर देव

@tomasvn मैंने आपको एक ईमेल भेजा है, एक चैट में मिलते हैं और यह योजना बनाते हैं। यदि आपको प्रोजेक्ट चलाने में परेशानी होती है तो मैं आपको गाइड के माध्यम से जाने की सलाह दूंगा यदि आपने पहले से नहीं किया है या

अगर अभी भी जरूरत है तो मैं इसके साथ मदद कर सकता हूं

@ Jgriebel1990 मैं

@ jgriebel1990 लेने के लिए स्वतंत्र महसूस हो रहा है, मैं अपनी कॉपी को विंडोज़ मशीन पर काम कर पाने में सक्षम नहीं था, एक बार जब आप काम कर लेते हैं तो मैं एक कोड समीक्षा कर सकता हूं

@tomasvn यह @ Jgriebel1990 की तरह लगता है और @borisyordanov ने इससे निपटने का मौका नहीं दिया है - क्या आप अभी भी इसके साथ मदद करने में रुचि रखते हैं?

@QuincyLarson मैं इसे विंडोज़ पर काम करने की कोशिश करूंगा, मेरे पास अभी भी इसे चलाने के मुद्दे हैं, अगर मैं अपना वातावरण सेट नहीं कर पाऊंगा, तो बस थ्रेड बंद कर दूंगा।

@tomasvn कोई चिंता नहीं - किसी भी भाग्य यह स्थानीय रूप से चलाने के लिए हो रही है?

संबंधित: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

@QuincyLarson कोई किस्मत नहीं, इसे स्थानीय स्तर पर चलाया जा रहा है

@tomasvn स्थानीय स्तर पर स्थापित करने के दौरान आपके पास कौन से मुद्दे थे।

@tomasvn कृपया इसे पढ़ें - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead https://github.com/freeCodeCamp/design-style-guide के अपडेट के साथ, क्या इस मुद्दे की आवश्यकता है?

इसके रोडमैप पर और अधिक। आखिरकार यह हमारे यूआई घटकों के लिए केंद्रीय संसाधन होगा।

सीएसएस सीमा शैली
सीमा-शैली की संपत्ति निर्दिष्ट करती है कि किस प्रकार की सीमा प्रदर्शित की जाए।

निम्नलिखित मानों की अनुमति है:

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

उदाहरण-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

अरे! इस पर क्या प्रगति है? मैं मदद के लिए उपलब्ध हूँ!

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

@madabdolsaheb करेंगे!

@ahmadabdolsaheb रेपो में जोड़ने का क्या मतलब है रुको?

क्या आप चाहते हैं कि मैं लिंटर को एक निर्भरता के रूप में स्थापित करूं, जैसा कि पहले से ही है?

या फिर जीथब पर ही परीक्षण स्थापित करने का एक तरीका है, इसलिए यह तब तक विलय की अनुमति नहीं देगा जब तक कि शैली गाइड का पालन न किया जाए?

ठीक है, ऐसा लगता है कि स्टाइललिंट ही एक अच्छा विकल्प है। मैं वह स्थापित कर रहा हूं।

प्रयोग के लिए, मैं ओपी द्वारा सुझाए गए नियमों को निर्धारित करूंगा। मैं तब सभी नियमों को हटा दूंगा और एक पीआर खोलूंगा। हम फिर चर्चा कर सकते हैं और नियम निर्धारित कर सकते हैं

https://stylelint.io/user-guide/rules/about

इस प्रकार के नियमों को देखने के लिए आप इस लिंक को देख सकते हैं

वर्तमान में पहले से ही एक लिंट है: सीएसएस कमांड जो प्रेटियर का उपयोग करता है। हम इसे स्टाइललिंट का उपयोग करने के लिए बदल सकते हैं।

किसी भी तरह, मैंने इसे स्थापित किया है, और यह सफलतापूर्वक नियमों के आधार पर त्रुटियों का पता लगाता है। क्या मैं एक पीआर खोलूंगा?

प्रीटियर को हटाने की आवश्यकता नहीं है, प्रीटियर में स्टाइललिंट नियमों के लिए कॉन्फिगरेशन है जिसका उपयोग आप प्रीटीयर कॉन्फिगर फाइल को बढ़ाने के लिए कर सकते हैं

बहुत बढ़िया। कल इस पर काम करेंगे।

मुझे स्टाइललिंट नियमों (या ऐसा कैसे करना है) के लिए प्रीटियर कॉन्फिगर नहीं मिला, लेकिन वर्तमान में मैंने एक और पैकेज स्टाइललिंट-कॉन्फिग-प्रीटीयर स्थापित किया है जो संघर्षों की जांच करेगा और संघर्ष करने वाले किसी भी नियम को बंद कर देगा।

मैं जो सोच रहा हूं वह लिंट में है: css कमांड हम स्टाइललिंट कमांड के साथ-साथ प्रेटियर भी चला सकते हैं

(राय) मुझे लगता है कि हम सभी कस्टम स्टाइललिंट नियम लिख सकते हैं जो एफसीसी के लिए समझ में आता है, और यहां तक ​​कि पूरी तरह से पूर्ववर्ती को हटा दें। यह केवल एक राय है, इसे आप लोगों को तय करना बाकी है।

धन्यवाद @ManasMahanand आपकी प्रगति पर। मैं @ojeytonwilliams को दूसरी राय के लिए टैग कर रहा हूं।

मुझे लगता है कि प्रीटीयर फॉर्मेटिंग के साथ एक अच्छा काम करता है, इसलिए मैं इसे रखना चाहूंगा। अगर हम https://github.com/prettier/stylelint-prettier का उपयोग करते हैं तो प्रीटियर का उपयोग स्टाइललिंट के प्लगइन के रूप में किया जाता है और हमें दोनों दुनिया के सर्वश्रेष्ठ मिलते हैं।

यह वह दृष्टिकोण है जो हम पहले से ही जावास्क्रिप्ट लाइनिंग के लिए उपयोग करते हैं।