🌳 ✌🏿 🤘🏼 दुनिया को संभालने की तैयारी कर रहा है 🕦 🍊 🤦🏽

सवाल यह है कि मेरा प्रोजेक्ट किस बारे में है? लेकिन मुझे पता नहीं है योजनाएं बदल रही हैं। बहुत सारे विचार हैं। लेकिन हमेशा एक सामान्य बुनियादी कार्यक्षमता होती है। अब तक, मैं इस बारे में बात कर रहा हूँ। पहले से ही 5 महीने। वसंत के बाद, अकेलेपन के एक फिट में, मैं कुछ घटनाओं को साझा करना चाहता हूं।

वसंत की वृद्धि

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

Prettier को इस तरह से कॉन्फ़िगर किया गया है कि परियोजना के पास VSCode और कमिट्स (.prettierrc रूट पर है) के लिए एक ही कॉन्फिगर है। कुछ बिंदु पर, लिंट-स्टेज्ड ने संतोष करना बंद कर दिया, मुझे याद नहीं है कि क्यों। प्रिटी-क्विक इसे रिप्लेस करने के लिए आया (कनेक्ट करने के तरीके के लिए, पैकेज देखें)। और यह बहुत कष्टप्रद था कि प्रीटियर ने सर्विस जोंस फाइलों में सुधार किया। Package.json और tsconfig.json के लिए .prettierignore के अतिरिक्त अपवाद - कमिट में थोड़ा कम कचरा।

एनवीएम उपयोगिता के बारे में कुछ शब्द। रूट में .nvmrc नोड के निर्दिष्ट संस्करण के साथ है + npm बंडल, मेरे मामले में "स्थिर"। पर्यावरण को स्विच करने के लिए $ nvm use करने के लिए पर्याप्त है। बहुत सहज है।

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

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

एंट-डिज़ाइन के अंदर, कम का उपयोग किया जाता है - सीएसएस प्रीप्रोसेसर। लगभग 700 चर उपलब्ध हैं। अनुकूलित करें - मुझे नहीं चाहिए। हालाँकि, मेरी पसंद css-in-js है। फिर आपको जावास्क्रिप्ट में आवश्यक चर निकालने की जरूरत है - कम-लोडर के अंदर एक विकल्प है संशोधित करें। NodeJS और ES में समान theme.js को पुन: उपयोग करने के लिए, मैंने esm का उपयोग किया: const requireForES = require('esm')(module /*, options*/) । लेकिन कई चर दूसरों से प्राप्त होते हैं, उदाहरण के लिए @primary-color: @blue-6 । प्रॉक्सी ने विषय के क्षेत्रों के लिए मदद की: primaryColor: (theme) => theme.blue6 ; यदि विषय में फ़ील्ड एक फ़ंक्शन है, तो फ़ंक्शन को कॉल करें, और अगले फ़ील्ड पर पुनरावृत्ति करें, जब तक कि हम अंतिम मान के साथ फ़ील्ड पर न पहुंच जाएं। और कम-मिक्सिन हैं - यह जेएस-कोड कम में पैक किया गया है; उदाहरण के लिए, मैंने कलरप्लेट फ़ंक्शन की प्रतिलिपि बनाई: primaryColor5: (theme) => colorPalette(theme.primaryColor, 5) वापस जावास्क्रिप्ट में। स्रोत विषय .js

ओह, मैंने कुत्ते को स्टाइल-घटकों पर खाया। लेकिन आपको कहानियों पर समय बर्बाद नहीं करना चाहिए, क्योंकि पुनर्वसन की रिहाई निकट है (मैं वास्तव में विश्वास करना चाहता हूं)। प्रतिक्रिया रूस 2019 में एक बहुत ही प्रेरणादायक प्रस्तुति । अवकाश की प्रत्याशा में, यह विकास की सुविधा का एक अलग स्तर होगा। इस बीच, केवल एक सामान्य बिंदु के बारे में, मैंने VSCode सेटिंग्स "editor.foldingStrategy": "indentation" में शामिल किया "editor.foldingStrategy": "indentation" सामान्य रूप से टेम्पलेट स्ट्रिंग के अंदर सीएसएस कोड को संक्षिप्त करने के लिए। ऐनायड कि संपादक को कम से कम याद नहीं है। एक प्लगइन की तलाश करना आवश्यक होगा।

मेरी योजनाओं में परियोजनाएं अलग हैं, लेकिन हमेशा, कि परियोजनाएं सक्रिय प्रतिभागियों के लिए हैं। फिर आपको प्राधिकरण कार्यक्षमता की आवश्यकता है। अधिमानतः पासवर्ड के बिना। उत्तर: फेसबुक अकाउंट किट। लॉगिन के लिए एक छोटा डिजिटल कोड पत्र, या एसएमएस (मुफ्त), या व्हाट्सएप पर एक संदेश द्वारा आता है। उन्होंने एपीआई के शीर्ष पर अपना रैपर लिखा था, जब वे एक प्रतिक्रिया घटक के रूप में परियोजना के अंदर रहते थे। यह बहुत अच्छा काम करता है। अब मैं इसे एक npm पैकेज में डालना चाहता हूं, उस समय मुझे नहीं पता था कि lerna + यार्न वर्कस्पेस का उपयोग कैसे करना है।

पाठ सामग्री के बारे में कई परियोजनाएं। पाठ संपादक की आवश्यकता है। बस मार्कडाउन - पर्याप्त नहीं है। हां, मार्कडाउन प्रारूप के अंदर, आप HTML आवेषण जोड़ सकते हैं, लेकिन यह बड़े पैमाने पर उपभोक्ता के लिए संपादक नहीं है, लेकिन हैकर्स के लिए है। आउटपुट एक ब्लॉक एडिटर है। और ब्लॉक के लिए आपको मेटा डेटा स्टोर करना होगा। उदाहरण के लिए, एक चित्र गैलरी विजेट - माउस क्लिक के एक जोड़े और आप कर रहे हैं। और मैं माउस के साथ, ब्लॉकों को भी पुनर्व्यवस्थित करना चाहता हूं। मुझे घोस्ट के अंदर कोनिग-एडिटर पसंद है और अभी भी घरेलू EditorJS है । यह स्पष्ट है कि मध्यम.कॉम पूर्वज है। लेकिन मैं 100% की कार्यक्षमता से खुश नहीं हूं। और यह रिएक्ट के बारे में नहीं है। फेसबुक से ले सकते हैं DraftJS? दुर्भाग्य से, फेंक दिया। उसके द्वारा प्रेरित स्लेटजेएस तुलनात्मक रूप से पल जीतता है। लेकिन SlateJS एक प्लगइन कंस्ट्रक्टर है। इसके आधार पर तैयार विधानसभाएं होनी चाहिए। स्पॉइलर के तहत कुछ के पेशेवरों और विपक्षों की एक लंबी सूची है।

छिपा हुआ पाठ

canner-स्लेट-संपादक
[+] जब एक माउस कोड के साथ ब्लॉक के अंदर हेडर या टेक्स्ट का चयन करता है तो होवरिंग मेनू नहीं दिखाता है
[-] जब तस्वीर के लिए drag'n'drop ऑपरेशन पूरा हो जाता है, तो एक संयुक्त राष्ट्र द्वारा खींचा गया कर्सर देखा जाता है
[+] प्लस मेन्यू के साथ साइन इन करें जब कोड ब्लॉक के बाहर कर्सर एक खाली लाइन पर हो (जैसा कि घोस्ट में है, लेकिन पाठ के अंत में माउस को लाने पर प्लस चिह्न भी है)
[+] संदर्भ मेनू के साथ एक प्लस चिन्ह लाइन के अंत में दिखाई देता है (लेकिन यदि रेखा को "H2" के रूप में सजाया गया है, तो प्लस चिह्न अब दिखाई नहीं देता है - यह एक बग नहीं है, लेकिन एक विशेषता है)
[+] संदर्भ मेनू के साथ प्लस पर हस्ताक्षर एनीमेशन (भूत में ऐसी कोई बात नहीं है); और मेनू खुलने पर प्लस चिन्ह एक क्रॉस में बदल जाता है
[-] संदर्भ मेनू में पाठ को स्वरूपित करने के लिए बटन हैं (भूत में केवल विजेट हैं)
[+] एडिटर के अंदर औज़ारों के लिए एनाट घटकों का अनुप्रयोग
[+] चित्रों को लोड करने के लिए समृद्ध कार्यक्षमता: drag'n'drop, url, open file
[-] चित्र एक समय में केवल एक ही डाउनलोड किया जा सकता है (गैलरी विजेट नहीं)
[+] चित्रों और अन्य ब्लॉकों के संरेखण हैं
[+] संपादन छवि का आकार (लेकिन यह आसान होगा, जैसा कि घोस्ट रेगुलर-व्हाइट-फुल मोड में है)
[+] मार्कडाउन प्रारूपण आवेदन
[-] कार्ड के लिए अनुपलब्ध ड्रैग'निअरड्रॉप (घोस्ट शब्दावली में)
[+] तालिका विजेट, अच्छे पुराने एमएस वर्ड के रूप में
[-] url द्वारा, आप केवल वीडियो सम्मिलित कर सकते हैं (घोस्ट में, यह "अन्य ..." विजेट है, जो कई अन्य चीजों का समर्थन करता है - "एम्बेडेड सामग्री")
[-] लिंक विजेट इसे संपादित करने की अनुमति नहीं देता है (भूत में यह संभव है)
[-] होवरिंग मेनू और url-popup लिंक एक ही समय में पॉप हो जाते हैं (घोस्ट में, टेक्स्ट चयन url-popup लिंक छुपाता है)
[-] संपादित क्षेत्र के किनारे पर मंडराते हुए ढोंगी (भूत में यह किनारे से जुड़ा हुआ है)

प्रतिक्रिया-पृष्ठ (ory-editor)
[+] drag'n'drop के माध्यम से ब्लॉकों की संरचना को बदलने के लिए मोड
[+] चित्रों और अन्य ब्लॉकों के लिए मोड का आकार बदल रहा है, अगर उनमें से कई एक ही पंक्ति में हैं (लेकिन केवल ड्रैगनेनलाइन के माध्यम से)
[+] विजेट जोड़ने के लिए मोड (लेकिन केवल drag'n'drop के माध्यम से)
[+] "पूर्वावलोकन परिणाम" मोड विगेट्स के व्यवहार को बदलता है (उदाहरण के लिए: चित्र क्लिक करने योग्य हो जाता है)
[+] ब्लॉकों की संरचना को बदलने की विधा में, एक चित्र के साथ एक ब्लॉक को ड्रैग'एनलड्रॉप के माध्यम से पाठ के साथ एक ब्लॉक में डाला जा सकता है - ताकि पाठ तस्वीर को फ्रेम करे; प्लस में "मूर्ख से सुरक्षा" है: इसलिए आप केवल एक चित्र सम्मिलित कर सकते हैं
[-] माउस के बिना कार्यक्षमता बहुत सीमित है
[-] कोई छवि का आकार नहीं खींचता (जैसा कि घोस्ट रेगुलर-व्हाइट-फुल मोड्स में)
[-] इसमें बिल्कुल भी मार्केड फॉर्मेटिंग नहीं है (घोस्ट में दो मोड हैं: टेक्स्ट में, एक अलग विजेट में)
[-] यह स्पष्ट नहीं है कि चित्र खंड को कैसे हटाया जाए (आपको इसे ड्रैगनेन के माध्यम से टोकरी में खींचना होगा) - आपको पाठ से टोकरी आइकन को स्थानांतरित करने की आवश्यकता है
[-] प्रॉपर्टी एडिटिंग मोड में पिक्चर विजेट के लिए कोई फोकस फ्रेम नहीं है (हालांकि एचटीएमएल 5 वीडियो विजेट है, शायद ब्राउजर इंडिकेशन फोकस इंडिकेशन सेट करता है)
[+] वर्तमान तत्व के संपादन के लिए टूलबार (पाठ के लिए टूलबार, या चित्रों के लिए एक संवाद आदि) तहखाने में पॉप अप होता है और वहां डॉक किया जाता है।
[-] विगेट्स जोड़ने की विधा किसी भी विजेट को डालने के बाद विजेट के चयन की प्रारंभिक स्थिति में लौटती है, लेकिन मैं जोड़े गए विजेट को संपादित करने के लिए आगे बढ़ना चाहूंगा; यह शायद वही था जो इरादा था: पहले, ब्लॉक फेंकें, और उसके बाद ही उन्हें बदले में संपादित करें
[-] लिंक के यूआरएल को बटन पर क्लिक करके मूर्खतापूर्ण तरीके से हटा दिया जाता है, लेकिन मैं लिंक के यूआरएल के लिंक के साथ पॉपअप करना चाहूंगा और लिंक संपादन संवाद (भूत का कोई संपादन नहीं है, केवल एक नए लिंक के लिए खाली इनपुट फ़ील्ड); यह स्पष्ट है कि एक लिंक को जोड़ने के संभावित संघर्ष के कारण व्यापार-नापसंद किया जाना चाहिए; पवित्रता में, एक संवाद लिंक को संपादित करने (और इसे प्रदर्शित करने) और इस लिंक का पालन करने के लिए कार्य करता है
[-] मूल छवि को जोड़ने के लिए छवि संपादन टूल में कोई ड्रैगनेनड्रॉप नहीं है
[-] कोड के लिए कोई विजेट
[-] drag'n'drop चित्रों को लोड करने के लिए लागू नहीं किया गया है
[-] छवियों को डाउनलोड करने के लिए सिस्टम फ़ाइल चयन संवाद मान्य फ़ाइलों को फ़िल्टर नहीं करता है (केवल छवियों को प्रदर्शित किया जाना चाहिए)
[-] घोस्ट में, ड्रैगनेनड्रॉप मोड में, अन्य तत्वों को एनिमेटेड बार पॉइंटर बार के लिए स्थानांतरित किया जाता है जहां ड्रॉप निष्पादित किया जाएगा
[-] Drag'n'drop के माध्यम से ब्लॉकों की संरचना को बदलने के मोड में, एक परजीवी स्ट्रिप-पॉइंटर को डुप्लिकेट में प्रदर्शित किया जाता है (जाहिरा तौर पर अतिरिक्त div तत्वों के कारण)

netlify-सेमी-विजेट-markdown
[+] आप देख सकते हैं कि शादीशुदा स्लेट और टिप्पणी कैसे प्राप्त की जा सकती है (commentSlate.js, slateRemark.js)
[+] प्लग-इन निर्मित स्लेट-संपादन-सूची और स्लेट-संपादन-तालिका
[+] दो संपादक कार्यान्वयन: RawEditor और VisualEditor

मानसिक स्वास्थ्य
[+] चित्रों के लिए फसल चयन (लगाव देखें) - स्लेट-जेएस पर लागू नहीं होता है
[+] पेस्ट मार्कडाउन (?)

ठीक है, मुझे स्लेटजेएस पर अपने बहुत, बहुत अच्छे निर्माण के साथ टिंकर करना होगा। फिर habr.com इसे अपने आप ही पेंच करेगा। इस बारे में सोचें कि आपको VueJS (मजाक) की आवश्यकता क्यों है। इसलिए, पहले आपको संपादक को नियंत्रित करने के लिए नियंत्रणों की एक संरचना की आवश्यकता है: नए ब्लॉकों को जोड़ने के लिए, चयनित ब्लॉक को नियंत्रित करने के लिए, ब्लॉक सेटिंग्स को बदलने के लिए, चयनित पाठ को प्रारूपित करने के लिए। मैंने कई बार नकल की, ऐसा लगता है कि मैं बस गया हूं, जबकि मुझे यह पसंद है। एंट-डिज़ाइन पर आधारित नियंत्रण। प्रकाशित npm पैकेज स्लेट-नियंत्रण। सख्ती से न्याय न करें - यह एक प्यारा बच्चा है।

फोन पर स्टाइलिश तस्वीरें

भविष्य की परियोजना के स्रोत ।

दुनिया को संभालने की तैयारी कर रहा है

More articles: