codeframe
1.0.0
تعتبر CodeFrame أسرع وأسهل طريقة لبناء ونشر صفحات ويب ثابتة سريعة ، وهي مصممة لتكون أفضل مكان لتعلم كيفية إنشاء الأشياء على الويب ، على الويب. يمكنك العثور عليه يعمل على الهواء مباشرة على codeframe.co.
إنه سهل الاستخدام. تم تصميم CodeFrame أولاً وقبل كل شيء للتجارب السريعة وللأشخاص الذين يتعلمون الكود لأول مرة ، لذلك يتجنب التعقيد وميزات إضافية للبساطة وسهولة الاستخدام.
إنه سريع. يجب أن تتحرك بيئة التطوير الخاصة بك بسرعة أفكارك ، وبدون أي أدوات بناء ، لا يوجد سبب لا يمكن أن يكون CodeFrame فوريًا. لقد قمت ببناء CodeFrame لخفض الوقت من الفكرة إلى النموذج الأولي القابل للمشاركة قدر الإمكان جسديًا. فقط افتح المحرر ، واكتب الرمز ، وشاركه بنقرة واحدة.
؟ إنه مفتوح المصدر ويمكن تفتيشه بالكامل. كل ما يدير CodeFrame ، من مكدس الواجهة الخلفية إلى رمز JavaScript خلف محرر CodeFrame ، مفتوح المصدر ويمكن فحصه في المتصفح. أعتقد أن وجود رمز مصدر قابل للقراءة في المنتج الذي تم تسليمه يحدث فرقًا للأشخاص الذين يتعلمون رمزًا ، ويعطي CodeFrame الأولوية لهذا التعقيد الإضافي ومكاسب الكفاءة الصغيرة مع حزم مصغرة ومصدر خاص.
إذا كنت لا تحتاج على وجه التحديد إلى شيء مصمم للسرعة أو للطلاب الجدد في الترميز ، فهناك أدوات أخرى قد تعمل بشكل أفضل بالنسبة لك ، مع المزيد من الميزات. CodePen هو IDE الكلاسيكي في متصفح ويب مع ميزات أكثر قوة وخيارات التخصيص ؛ يعد CODESANDBOX رائعًا لتجربة المشاريع ذات خطوات الإنشاء / التجميع ، و repl.it لديها مجموعة مذهلة من أدوات التطوير لبيئة HTML الخاصة بها ، بما في ذلك القدرة على إنشاء ملفات / مجلدات إضافية ومتعددة اللاعبين ، مما يسمح بالتعاون السلس في الوقت الفعلي.
كل ما تحتاجه لتشغيل نسختك الخاصة من CodeFrame موجود في مستودع المصدر المفتوح هذا. إليك كيفية تشغيل الإصدار الخاص بك على CodeFrame على جهاز الكمبيوتر الخاص بك أو الخادم.
ستحتاج إلى هذه الأدوات:
git ، لنسخ المستودع من github إلى جهاز الكمبيوتر الخاص بك. احصل على git هنا.npm (أو yarn البديلة) لتثبيت التبعيات مثل Express. NPM عادة ما يأتي مع Node.js.ls ، cd ، إلخ.بمجرد تثبيت هذه الأدوات وجاهزة ، فإن الخطوة الأولى هي استنساخ مستودع GIT لجهاز الكمبيوتر الخاص بك. انتقل إلى دليل حيث ترغب في إعداد CodeFrame ، وتشغيله
$ git clone https://github.com/thesephist/codeframe.git (إذا قمت بإعداد SSH لـ Git ، ومعرفة كيفية استخدامه ، فيمكنك استخدام git:// url بدلاً من ذلك. إذا لم تقم بذلك ، فلا تقلق بشأن ذلك.)
الآن ، cd في دليل codeframe الجديد الذي تم إنشاؤه للتو ، ويجب أن ترى جميع الملفات في مستودع CodeFrame.
$ cd codeframe/
$ ls
src/ static/ docs/ README.md LICENSE ... هنا ، دعنا نحاول بدء تشغيل CodeFrame باستخدام Node.js باستخدام الأمر npm start .
$ npm start
...
Error: Cannot find module ' express '
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
... هذا يعني أن Node.js لم تتمكن من العثور على express ، وهي مكتبة JavaScript لإنشاء خوادم الويب التي يعتمد عليها CodeFrame. دعنا نثبت تبعيات مثل Express عن طريق تشغيل npm install ، ثم حاول مرة أخرى.
$ npm install
...
$ npm start
Codeframe running on localhost:4556 قد تلاحظ أن NPM ينشئ دليلًا جديدًا يسمى node_modules/ ، حيث سيتم تثبيت تبعيات CodeFrame.
إذا رأيت رسالة Codeframe running on localhost:4556 ، فهذا يعني أن لديك CodeFrame Up وتشغيله على جهاز الكمبيوتر الخاص بك. انتقل إلى متصفحك وافتح العنوان http://localhost:4556 . يجب أن يخبر هذا متصفحك للعثور على الصفحة التي تعمل على المنفذ 4556 (المنفذ الافتراضي الخاص بـ CodeFrame) على جهاز الكمبيوتر الخاص بك ، وتحميل الصفحة الرئيسية لـ CodeFrame.
بعد تغيير أي ملف خدمة الخلفية (ضمن src/ ) ، يمكنك إعادة تشغيل الخادم باستخدام npm start (Ctrl + C لإنهاء خادم قيد التشغيل) لمعرفة التغييرات. إذا كنت تقوم بتحرير رمز الواجهة الأمامية ، فلا داعي لإعادة التشغيل - فقط إعادة تحميل الصفحة في المتصفح!
إذا كنت فضوليًا بشأن الأعمال الداخلية لـ CodeFrame ، فأنا أقوم ببناء نسخة مشروحة بالكامل من قاعدة كودس متوفرة هنا على صفحات github باستخدام أداة تسمى Litterate. على الرغم من أن هذا مكان جيد للنظر في كيفية تنفيذ كل شيء ، إلا أن هذا القسم يوفر نظرة عامة رفيعة المستوى على كيفية تصميم النظام.
جميع CodeFrames هي (في الوقت الحالي) زوج من الملفات وملف HTML وملف JavaScript ، والذي يمكننا التعامل معه كقطاعات نصية. يقوم CodeFrame بتخزين جميع الملفات ، سواء HTML و JavaScript ، في نفس المكان ، بنفس الطريقة ، بطريقة لا يمكن تعديلها بمجرد حفظها. هذه هي قاعدة بيانات CodeFrame غير القابلة للتجزئة.
عندما يقوم المستخدم بإنشاء ملف جديد أو إصدار جديد من ملف ، يرسل المحرر الملف إلى الواجهة الخلفية. يحصل الواجهة الخلفية على الملف وتجزئة (باستخدام SHA256 حاليًا) وتستخدم التجزئة لإنشاء اسم ملف قصير وفريد عمليًا للملف. يتم حفظ الملف إلى موقع في الواجهة الخلفية ( db/ افتراضيًا) مع اسم ملف الشحوم. هذا يتأكد من أنه إذا حاولنا حفظ نفس الملف عدة مرات ، فسنقوم بحفظ ملف واحد فقط في الواجهة الخلفية. لأن هذا يحدث كثيرًا في الممارسة العملية باستخدام CodeFrame ، فهذا فعال.
يتم تحديد كل ملف بواسطة تجزئةه بهذه الطريقة ، لذا باستخدام تجزئة (واحدة لكل من ملفات HTML و JavaScript لـ CodeFrame) ، يمكننا تحديد أي رمز فريد. هذه هي الطريقة التي يعمل بها CodeFrame ؛ يحتوي عنوان URL لكل رمز على تجزئة ، واحدة لكل من HTML و JavaScript. عندما تطلب codeframe ، تجد الواجهة الخلفية ملفات تم حفظها قبل استخدام هذه التجزئة كأسماء الملفات ، وتُرجع الملفات إلى المحرر أو إلى المتصفح لمشاهدتك.
هذه قاعدة البيانات المستندة إلى التجزئة للملفات لها بعض المزايا. حقيقة أن كل ملف يتم حفظه مرة واحدة ولا يكتب أبداً لا يعني أن أي رمز ، في أي وقت من الأوقات ، يتميز تمامًا بعنوان URL الخاص به. إن changelog الخاص بك هو سجل المتصفح الخاص بك بشكل فعال ، وأي إطار رمز تشاركه سيبقى هذا الإصدار بالضبط إلى الأبد. هذا يعني أيضًا أن خدمة الواجهة الخلفية تظل بسيطة للغاية-إنها تصميم وظيفي بالكامل مع عدم وجود آثار جانبية خارج قاعدة البيانات ، وهو متجر قيمة مفتاح ثابت.
ينقص التنفيذ حاليًا ، والذي يعتمد فقط على نظام الملفات ، في بعض المناطق. بشكل رئيسي ، يستخدم FS كطبقة تخزين لقاعدة البيانات. نظرًا لأن أنظمة الملفات غير مصممة لاستخدامها بهذه الطريقة ، فقد نضرب عنق الزجاجة في قابلية التوسع حيث يتعين علينا التبديل إلى متجر مختلف القيمة مثل Amazon's S3. نقوم أيضًا أيضًا بتخزين تغييرات تدريجية على كل ملف في ملف منفصل تمامًا في قاعدة البيانات. هذه هي الطريقة التي يتعامل بها GIT ، ولكن مع استخدام CodeFrame ، قد يكون هذا غير فعال بشكل كبير. هذه المشكلات في الوقت الحالي ، ولكن قد تصبح أكثر أهمية للمضي قدمًا ، وعندها سنخاطبها.
تم تصميم واجهة مستخدم الواجهة الأمامية الخاصة بـ CodeFrame كمكون واحد لـ Torus ، وهو محرر CodeFrame. يمكن لهذا المحرر تشغيل مستقل ، كما هو الحال في عرض المحرر على الشاشة على شاشة كاملة لأي رمز ، أو يمكن تضمينه باعتباره <iframe> في مواقع ويب مسموح بها ، مثلها على الصفحة الرئيسية. كل شيء آخر تراه على الواجهة الأمامية ، بما في ذلك بقية الصفحة الرئيسية ، هو بسيط ، HTML المكتوبة بخط اليد ، CSS ، و JavaScript.
لقد اخترت Torus لبناء الواجهة الأمامية لأنني (1) كتبت المكتبة ، لذلك أعرفها من الداخل إلى الخارج وهي مصممة لتناسب أذواقي ، (2) إنها سريعة وخفيفة الوزن ، تمامًا مثل CodeFrame مصمم ليكون ، (3) يجعل النماذج الأولية سريعة جدًا ؛ تم بناء V1.0 من CodeFrame خلال 20 ساعة على مدار يومين ، لذلك كان النماذج الأولية بسرعة أولوية في حين أن أشياء مثل دعم المتصفحات القديمة لم تكن هدفًا أساسيًا. لقد كانت أيضًا فرصة جيدة للسماح لـ Torus بتمديد أرجلها واختبارها في إعداد الإنتاج.
يتم تنفيذ المحرر بأكمله في ملف JavaScript واحد ، في static/js/main.js ، والذي يمكنك قراءته هنا.
بالنسبة لمحرر النصوص داخل CodeFrame ، على متصفحات سطح المكتب ، أستخدم Monaco ، محرر نصوص مصمم للمستعرض من محرر Code Visual Studio Microsoft. إنه سريع وأنيق ويعمل جيدًا على متصفحات سطح المكتب. ومع ذلك ، فإن دعم موناكو للهواتف المحمولة غير موجود ، لذلك على متصفحات الهاتف المحمول ، نشحن محررًا مختلفًا ، CodeMirror. يتم استخدام Codemirror على نطاق واسع في DevTools Chrome و Grish ، من بين أدوات أخرى ، خفيفة الوزن وسريع للتحميل ، وأكثر قابلية للاستخدام على متصفحات الهاتف المحمول من Monaco. إن تجارب استخدام كلا المحررين في وقت قريب من التكافؤ للتجربة الأساسية ، بينما يجلب كل محرر بعض التحسينات الأصغر للميزات على الآخر. يمكنك أن تقرأ عن كيفية تحقيق هذه الهندسة المعمارية القابلة للتوصيل في قسم "المحرر القابل للبلاغ الخلفي" أدناه.
يعد جزء المعاينة في المحرر <iframe> بسيطًا يفتح عرضًا لصفحة HTML + JS التي تم إنشاؤها لـ CodeFrame ، حتى تتمكن من رؤيتها أثناء تحديثها. تعمل اليوم بشكل مستقل تمامًا عن المحرر ، ولكن في المستقبل قد نضيف بعض التواصل بين الاثنين لجعل ميزات مربي الهوائية ممكنة ، مثل التحديثات الحية.
يحتوي محرر CodeFrame على تبعية أساسية واحدة فقط: Torus ، وهو إطار واجهة المستخدم خفيفة الوزن. لسرعة التطوير ، يشحن CodeFrame حاليًا التبعية كعلامة <script> بسيطة في المحرر HTML والتي تشير إلى أحدث إصدار من حزمة NPM على UNPKG. في المستقبل ، قد نحمل Torus مع نسخة مجمعة من البرنامج النصي المحرر الخاص بنا. لكن حتى الآن ، أثبتت UNPKG موثوقة بدرجة كافية.
جزء محرر رمز CodeFrame ليس موجودًا في قاعدة الشرف هذه. على الرغم من وجود تطبيق مرجعي لمحرر عاري للغاية يتم تنفيذه هنا على أنه <textarea> ، في الإنتاج ، كما هو موضح أعلاه ، يستخدم CodeFrame إما Monaco أو Codemirror كمحرر رمز للاختيار ، اعتمادًا على العميل (متصفحات الأجهزة المحمولة مقابل سطح المكتب). يمكننا التحول بسهولة وموثوقية بين هؤلاء المحررين الثلاثة والمحتملين المحتملين في المستقبل لأن الواجهة الأمامية CodeFrame مع المحرر من خلال مجموعة صغيرة من واجهات برمجة التطبيقات التي يمكن تنفيذها حول أي محرر رمز معقول. نسمي هذه المجموعة من واجهات برمجة التطبيقات The EditorCore Interface.
يشحن CodeFrame مع أغلفة EditorCore لكل من Monaco و Codemirror ، ويختار تحميل واحد أو آخر في وقت التشغيل اعتمادًا على العميل (إذا لم نستخدم محررًا ، فلا يتم تحميل جزء من رمز المحرر في المتصفح). إذا أردنا التبديل إلى محرر مختلف إلى الواجهة الخلفية أو تبديل محرر مع محرر آخر في المستقبل ، فإن بنية الغلاف هذه مع سطح API صغير تجعل هذا الأمر سهلاً للغاية - بضع ساعات على الأكثر لفت الواجهة حول محرر جديد. طالما أن غلاف المحرر ينفذ الواجهة بشكل صحيح ، سيعمل المحرر مع بقية CodeFrame.
CodeFrame مفتوح المصدر لسببين.
إلى النقطة الثانية ، هناك الكثير من زوايا الكود الإلكترونية التي تكون خشنة ويمكنها استخدام بعض البولندية. إذا كنت مطور JavaScript ذي الخبرة وترغب في رؤية CodeFrame يتحسن ، فإن DM's و PR مفتوحة.
ولكن الأهم من ذلك ، لقد جعلت CodeFrame مفتوح المصدر بقصد أن يكون القادمون الجدد ببرمجة الويب قادرين على التعلم من مصدر CodeFrame. إذا صادفت القليل من التعليمات البرمجية في المستودع الذي يربكك ، فلا تتردد في تقديم مشكلة أو إضافة طلب سحب للحصول على تفسيرات أو توضيحات أو رمز أفضل.
جزء رئيسي من CodeFrame هو مكتبة قوالب بداية ودية. إنها مجموعة صغيرة في الوقت الحالي ، لكنني أريد أن أتنزف هذا إلى مستودع من إطارات الكود عينة عالية الجودة تتيح للأشخاص القفز والتعرف على تقنيات الويب الجديدة بسهولة.
إذا كان لديك CodeFrames أو العينات التي ترغب في تضمينها في الصفحة الأولى من CodeFrame كقالب آخر بداية ، أضف ملفًا تحت starter_fixtures/ وداخل const STARTER_FIXTURES في src/models.js ، وملف طلب سحب! يتم إعداد قوالب بداية تم إعدادها بهذه الطريقة في قاعدة البيانات في وقت النشر ، مما يضمن إعداد كل إصدار من CodeFrame.
واحدة من الميزات الرئيسية لمحرر CodeFrame هي ميزة "إعادة التحميل أثناء الكتابة". أي في الوضع الافتراضي (مع تمكين الميزة) ، سيقوم المحرر بإعادة تحميل جزء المعاينة بشكل دوري مع الكود من المحرر ، وأحيانًا في منتصف الكتابة. هذا عمومًا يجعل تجربة التحرير المتفوقة - دون تبديل ما نقوم به ، يمكننا أن نرى نتيجة رمزنا على الفور أثناء تحريرنا ، وتوفير حلقة التغذية المرتدة هذه رائعة للتطوير.
ومع ذلك ، في بعض الحالات ، وخاصة عند كتابة جافا سكريبت ، هذا يعني أن معاينة إعادة تحميل في منتصف الكتابة ، عندما نكتب JavaScript غير صالح أو عربات التي تجرها الدواب. أحد هذه السلوكات التي تجرها الدواب التي قد نعيدها عن غير قصد في جزء المعاينة هي حلقة لا حصر لها. في سياقات معينة ، على سبيل المثال عندما نكتب for(){} while(){} الحلقات ، قد نقوم بإنشاء حلقة لا حصر لها في منتصف كتابة برنامجنا الذي يتم إعادة تحميله في نافذة المعاينة الخاصة بنا ، والتي من خلال تصميم علامة تبويب المحرر بأكملها ، وتؤدي إلى فقدان البيانات المحتملة في المحفزات المصنوعة في المحرر.
CodeFrame ليس المحرر الأول الذي يواجه هذا ، ولديه CodePen.io مقاربة مثيرة للاهتمام في صياغة JavaScript في بيئة التحميل المباشر لمنع هذا السلوك. المشكلة صعبة لأن منع الحلقات اللانهائية في الحالة العامة أمر مستحيل - إنه متغير كلاسيكي لمشكلة التوقف. في حالة Codepen ، يقومون بتكوين رمز JavaScript الذي تم إنشاؤه ، بحيث عندما تعمل الحلقة نفسها بشكل مستمر لأكثر من فترة من الوقت أو التكرارات ، فإنها تتوقف عن الحلقة. إنه حل عملي ، وإن كان inelegant. على النقيض من ذلك ، لا يفعل Glitch أي شيء لمنع حلقات لا حصر لها في إعدادات إعادة التحميل المباشرة.
لقد وجدت أنه ، في الممارسة العملية ، من النادر إلى حد ما كتابة رمز JavaScript المعدل عن طريق الخطأ والذي يؤدي أيضًا إلى حلقات غير محدودة. وبالنسبة لتلك الحالات النادرة ، لدى CodeFrame خيار لتعطيل إعادة التحميل في المحرر. ولكن بشكل افتراضي ، يتبع CodeFrame أسبقية Glitch في عدم تعديل أو صك JavaScript لمنع التنفيذ اللانهائي. إذا واجهنا المزيد من حالات الاستخدام حيث تصبح هذه مشكلة ، فقد نعيد النظر في هذه المشكلة.
إن التأثير الجانبي الأنيق لبساطة الكود الذي يمكنك الكتابة عليه على CodeFrame (بدون خطوة ترجمة ، لا تجميع) هو أن الإخراج الذي تحصل عليه في صفحة معاينة HTML هو حرفي الرمز الذي كتبته في المحرر ، بالإضافة إلى بعض رمز HTML المرفق. لذا ، بدلاً من إضافة زر "تصدير" أو عنصر قائمة "تصدير" بشكل صريح ، يمكن للمستخدم ببساطة فتح المعاينة وحفظ مستند HTML نفسه "تصدير" أي إطارات رمز قاموا بإنشائها.
إذا كنت تستمتع باستخدام CodeFrame وترغب في دعم ما أقوم به للمضي قدمًا ، فيرجى التفكير في التبرع بـ CodeFrame من خلال PayPal أو Venmo.
بدلاً من ذلك ، يرجى التفكير في التبرع لبعض من أفضل المنظمات غير الربحية التي تقوم بعمل رائع في مجال تعليم CS ، وخاناكاديمي ، ونادي هاك ، و Stutech.
