هناك شيء رومانسي ومثير حول فتح TextEdit أو Notepad وكتابة “<HTML>” لبدء مشروع جديد. إنه كم منا بدأ هوسنا بالبرمجة للويب. في عام 2021 ، تقوم أدوات تطوير الويب بأكثر من مجرد تسجيل نصوصنا – فهي تساعدنا في إنشاء مشاريع وتسريع العملية برمتها. علاوة على ذلك ، هناك العديد من العناصر التي يجب مراعاتها بخلاف HTML و CSS .
مرحلة التخطيط ، على سبيل المثال ، أمر حيوي. تحتاج إلى التفكير في التخطيط الشبكي وخيارات التصميم وسير العمل التعاوني. ثم هناك اختيار إطار عمل JavaScript المثالي ، سواء كنت تستخدم بيئة تطوير متكاملة (IDE) ، وغير ذلك الكثير.
في هذا المنشور ، سنلقي نظرة على 60 من أدوات تطوير الويب التي سترغب في استخدامها في عام 2021. ولكن قبل أن ندخل في ذلك ، دعنا نتحدث عن ما نعتقد أنه أداة تطوير الويب.
على السطح ، يبدو تصنيف أداة تطوير الويب أمرًا بسيطًا. ومع ذلك ، حتى الغوص في النهاية الضحلة يقدم بعض الاعتبارات التي تطمس الخطوط.
على سبيل المثال ، ضع في اعتبارك ما إذا كانت خدمة دفق الفيديو تعتبر أداة تطوير. في الفقاعة ، ربما لا. ومع ذلك ، إذا كنت تستخدمها لتسجيل شاشتك لتطبيق تصميم معين ، فإنها تتحول فجأة إلى أداة تعاونية فريدة.
في رأينا ، أداة تطوير الويب هي شيء يساعدك على تحقيق أهداف مشروعك بطريقة مركزة. في حين أن هذا لا يشمل لغات البرمجة الفردية، هناك هم مجموعات فرعية، supersets، والأطر مثل نسخة مطبوعة على الآلة الكاتبة التي تنتشر على خط المرمى. إذا كنت ترغب في كسب دولارات كبيرة ، فإن متابعة هذه الجوانب أمر حيوي.
للحصول على مثال آخر ، ضع في اعتبارك Git . يمكنك القول أن نظام التحكم في الإصدار (VCS) يغطي الكثير من الأمور. هناك لغة معينة تُستخدم لتشغيل الأوامر ، وتوفر الوظيفة الأساسية قدرًا كبيرًا من حيث تطوير الويب. ومع ذلك ، يمكنك أيضًا استخدامه كأداة تعليمية ، وتحديدًا عن طريق تتبع سجلات وتعقب المشكلات.
بشكل عام ، يمكن أن تكون أداة تطوير الويب عمليا أي شيء يجعل مشروعك يعمل بكفاءة وإنتاجية. ستلاحظ هذا التنوع في قائمة الأدوات.
هناك شيء مثير للغاية حول فتح TextEdit أو Notepad وكتابة “<HTML>” لبدء مشروع جديد 🤓 ستساعدك أدوات تطوير الويب هذه التي يبلغ عددها 60 على تنظيم تجربتك وتحسينها ✅
انقر للتغريد
سنقدم لك تحذيرًا قبل الكلمتين التاليتين : ” وقت الذروة “.
نعم ، تصرخ هذه العبارة المخيفة لأدوات تطوير الويب الموفرة للوقت لإنقاذ اليوم. تشير الإحصائيات إلى أن المزيد من المشاريع تستخدم الأزمة كمعيار ، ولا تزال العديد من الصناعات التنموية تستخدمها اليوم.
بغض النظر عما إذا كانت شركتك تستخدم أو تحتاج إلى وقت إضافي ووقت إضافي ، فلا يزال بإمكان أدوات تطوير الويب المساعدة. تقوم هذه الأدوات برفع الأحمال الثقيلة وأتمتة الأعمال العادية التي تهدر يومك. على هذا النحو ، فإنها توفر دفعة عضوية لإنتاجيتك.
ومع ذلك ، يمكنهم أيضًا تقديم مكافأة إذا كنت تعمل في إطار مشروع رشيق مثل Scrum . على سبيل المثال ، ضع في اعتبارك كيف يمكن لأداة مثل JSFiddle مساعدتك في مشاركة المقتطفات مع فرق أخرى أثناء ذيل سباق واحد ، جاهزًا للخط التالي.
علاوة على ذلك ، في حين أن المواقف اليومية لا تسير في أي مكان ، يمكن لخادم Discord أو قناة Slack أن تقدم طريقة أفضل للتركيز ومواءمة مجموعة قادمة من المهام ، بعيدًا عن ضغط أهداف العدو الحالية.
بشكل عام ، تتعلق أدوات تطوير الويب بالتخطيط بقدر ما تتعلق بالتنفيذ.
من المحتمل أن نعظ الشخص الذي تم تحويله ، لكن أداة تطوير الويب الممتازة تستحق وزنها في جهاز MacBook يعمل بنظام M1 من الذهب الوردي . على هذا النحو ، فإن الحصول على المزيج المناسب من الأدوات لمشروعك المحدد أمر بالغ الأهمية لبناء أساس متين للعمل.
إذا كان شيئًا لم تفكر فيه من قبل ، فإن مرحلة التخطيط الأولية ستثبت أنها لا تقدر بثمن. أخذ بعض الوقت للاستقرار على الأدوات التي ستستخدمها يؤخر مرحلة الترميز للمشروع. ومع ذلك ، ستعود هذه المرة لاحقًا حيث سيكون هناك عدد أقل من المتاعب المحتملة المتعلقة بالبرمجيات. سترى أيضًا مستوى إخراج أكثر اتساقًا (نظرًا لأن الجميع سيكونون في نفس الصفحة).
يتلخص اختيار الكومة المناسبة للمشروع في ما يلي:
التعقيد: ضع في اعتبارك مدى تعقيد منتجك ، لأن هذا سيحدد مدى تعقيد المكدس.
قابلية التوسع: إذا كان مشروعك خاصًا بشركة محلية ، فسيحتاج ذلك إلى حلول مختلفة لمؤسسة عالمية. على هذا النحو ، ستحتاج إلى مكدس أكثر قابلية للتوسع لتحقيق أهدافك.
الأمان: يكاد يكون من نافلة القول أن كل ما تختاره لا ينبغي أن يعرض أمان المستخدم والموقع للخطر .
التكلفة: بالطبع ، لا أحد يحب الإنفاق الزائد ، وإذا كانت هناك ميزانيات ضيقة ، فسيكون لهذا عامل أكثر من دفتر شيكات فارغ.
هناك مجالان يمكنك تقسيم التقنيات إليهما:
من جانب الخادم: هنا ، سترغب في إلقاء نظرة على تقنيات الواجهة الخلفية التي تستخدمها. على سبيل المثال ، سترغب في إلقاء نظرة على اختيارك للاستضافة وخادم الويب ، وقيمة المفتاح وتخزين SQL ، وأي تطبيقات وأطر عمل للأتمتة ستستخدمها ، وبالطبع لغة البرمجة.
من جانب العميل: يمكن القول إن خيارات أداة الواجهة الأمامية ستكون أكثر وضوحًا ، خاصة عندما يتعلق الأمر باللغات التي تستخدمها. بينما سيتم عرض ميزات HTML و CSS و JavaScript ، فإن اختيارك لإطار عمل JavaScript (وإطار عمل التشغيل الآلي) سيحتاج إلى بعض الاعتبار.
عندما يتعلق الأمر ببعض حزم التطوير في العالم الحقيقي ، ستلاحظ أن العديد من المواقع الكبيرة تستخدم مزيجًا من JavaScript و React.js ، جنبًا إلى جنب مع Nginx . كما سترى أعطها ، رديس ، و روبي على القضبان في أكوام التنمية.
بدون مزيد من اللغط ، دعنا نلقي نظرة على قائمة أدوات تطوير الويب التي نوصي باستخدامها في عام 2021. لقد قمنا بتنظيمها في فئات ، ولكن بخلاف ذلك ، فإن الأدوات ليست في ترتيب محدد. إذا كنت في عجلة من أمرك ، فلا تتردد في التخطي إلى قسم معين مدرج أدناه.
بيئات التنمية المحلية
محرري النصوص والتعليمات البرمجية
أدوات تصميم الويب والنماذج الأولية
عملاء جيت
أدوات مطور المستعرض
أطر الواجهة الأمامية
أطر تطبيقات الويب
تيبسكريبت
GraphQL
مديرو الحزم
API وأدوات الاختبار
أدوات التعاون
العدائين المهام
أدوات الحاويات
أدوات تحسين الصورة
أدوات اختبار الموقع
مكدس الفائض ومحركات البحث
مراجع تطوير الويب
تعد بيئة التنمية المحلية جزءًا أساسيًا من أي مجموعة تنمية. ومع ذلك ، فهو أمر حيوي بشكل خاص لتطوير الويب. فيما يلي بعض من أبرز أدوات التنمية المحلية.
شاشة البداية DevKinsta.
شاشة البداية DevKinsta.
قد نكون متحيزين ، ولكن يمكن أن تصبح DevKinsta الأداة الأولى لتطوير الويب لعام 2021 وما بعده.
الصفر التي – نحن و منحازة، ونحن فخورون بما قمنا أطلق سراحه!
بالنسبة للمبتدئين ، تعد DevKinsta طريقة لمساعدتك على تدوير تثبيتات وورد بريس المحلية في لمح البصر . إنها مجموعة كاملة تتيح لك تصميم موقع وورد بريس وتطويره ونشره لأجهزة macOS و Windows (مع إصدار Linux قيد الإعداد).
يمكنك تخصيص التثبيت الخاص بك لمشروعك الحالي. على سبيل المثال ، يمكن أن يستخدم “الخادم” Nginx أو Apache ، من اختيارك لإصدار PHP ، وتشغيل MariaDB أو MySQL ، وغير ذلك الكثير:
خيارات إعداد DevKinsta.
خيارات إعداد DevKinsta.
هناك المزيد تحت الغطاء أيضًا. يمكنك أيضًا تصحيح أخطاء البريد الإلكتروني واختبارها من خلال خادم SMTP المدمج ، ولإدارة قاعدة البيانات ، يمكنك استخدام أداة Adminer القوية :
مدير قاعدة البيانات المدعوم من المسؤول في DevKinsta.
مدير قاعدة البيانات المدعوم من المسؤول في DevKinsta.
بشكل عام ، نعتقد أن DevKinsta مثالي لتطوير وورد بريس الحديث. يمكن أن تدخل مباشرة في سير عملك.
لقد أنشأنا هذه الأداة مع وضع المطورين والمصممين وأصحاب الأعمال الحرة والوكالات في الاعتبار. ومع ذلك ، من الناحية العملية ، سيجد أي شخص لديه احتياجات تطوير يومية قيمة في DevKinsta – خاصة (على سبيل المثال لا الحصر) مستخدمي Kinsta.
علاوة على ذلك ، فإن DevKinsta مجاني تمامًا!
شعار MAMP.
شعار MAMP.
كنت تعتقد أن الأدوات الكلاسيكية لإنشاء صفحات الويب ونشرها ميتة ومدفونة ، نظرًا لوصول أدوات وضع الحماية الأسرع. ومع ذلك ، فإن مكدسات خدمات الويب التقليدية ، مثل LAMP و MAMP و XAMPP ، لا تزال قوية.
عادةً ما يجمعون بين نظام التشغيل (OS) – Linux أو macOS أو Windows – جنبًا إلى جنب مع خادم الويب Apache وقاعدة بيانات MySQL ولغات البرمجة Python و PHP و Perl في حزمة واحدة. على هذا النحو ، سيستمر استخدام مكدس خدمة الويب مثل هذا في عام 2021.
MAMP هو إصدار الأداة الخاص بـ macOS. يرى هذا الأسلوب أنك تقوم بتثبيت مكدس وتعمل على التصميم والنشر. في حين أن العملية يمكن أن تستغرق وقتًا طويلاً أكثر من الإعدادات الحديثة ، لا يزال هناك مستوى مماثل من المرونة تحت الغطاء – أو على الأقل ، هناك إمكانية.
أثناء وجودك في أداة مثل DevKinsta ، ستختار من واجهة المستخدم الرسومية (GUI) ، مع مكدس خدمة الويب ، يجب عليك تثبيت الإضافات التي تحتاجها يدويًا. على سبيل المثال ، لا توجد طريقة مضمنة لإنشاء موقع وورد بريس بدون “إنشاء موقع ويب خاص بك “. إنه وضع مشابه لاختبار البريد الإلكتروني .
كما هو الحال مع أدوات بيئة التنمية المحلية الأخرى ، فإن برنامج MAMP مجاني تمامًا. ومع ذلك ، هناك أيضًا إصدار متميز من MAMP لكل من Windows و Mac يعمل على زيادة الوظائف ويوفر أداة تطوير ويب شاملة وقوية.
لوحة معلومات MAMP Pro.
لوحة معلومات MAMP Pro.
بسبب المرونة والسعر ، لا تزال حزم خدمات الويب الكلاسيكية موجودة على العديد من أجهزة كمبيوتر المطورين. سوف هواة سطر الأوامر تنجذب بشكل طبيعي إلى هذا الحل، وخاصة إذا كنت من محبي استخدام نظام إدارة الحزم مثل البيرة ، Flatpak ، أو ناينتى .
بالطبع ، سيستخدم مطورو Apache هذه المجموعات أيضًا ، وكذلك مطورو MySQL و Python أو PHP. بالامتداد ، سيشعر مطورو وورد بريس أيضًا بأنهم في موطنهم هنا.
تطبيق XAMPP.
تطبيق XAMPP.
XAMPP هي مجموعة خدمات ويب أخرى تحظى بالكثير من الحب من مطوري PHP ، بما في ذلك أولئك الذين ينشئون منتجات وورد بريس. يمثل الحرف “X” في الاسم طبيعة النظام الأساسي المشترك للأداة. يوفر أدوات تثبيت لأجهزة Windows و macOS و Linux:
صفحة تنزيلات XAMPP.
صفحة تنزيلات XAMPP.
بينما كان هناك فرق بين مجموعات خدمات الويب المختلفة ، إلا أن التحديثات والتحسينات المستمرة جعلت المجال متساويًا. ومع ذلك ، فإن XAMPP لديه بعض الحيل الفريدة في جعبته.
على سبيل المثال ، لم يعد MySQL هو نظام إدارة قواعد البيانات الارتباطية الافتراضي (RDMS). بدلاً من ذلك ، يستخدم XAMPP MariaDB. من المحتمل أن يكون تمثيلاً أكثر دقة لخادم الإنتاج ، بالنظر إلى التحول إلى حلول أخرى بعد استحواذ Oracle .
بالإضافة إلى ذلك ، يوجد مثبت تطبيق ويب داخل حزمة XAMPP. يشبه Bitnami حلول مثل Softaculous ، لكن Bitnami خاص بـ XAMPP:
الصفحة الرئيسية Bitnami.
الصفحة الرئيسية Bitnami.
في حين أن هناك العديد من التطبيقات المتاحة ، فمن المحتمل أن تكون مهتمًا أكثر بمثبت وورد بريس. لا يزال ، هناك العديد من الوظائف الإضافية للاختيار من بينها ، مما يجعل XAMPP حلاً مرنًا للتنمية المحلية.
يحب معظم المطورين الجدل حول محرر الكود الذي يجب أن تستخدمه. حسنا، نحن القطعي، ولكن هناك على الكثير من الآراء حول هذا الموضوع، مع القاعدة الجماهيرية طيد لكل محرر.
ومع ذلك ، إذا كانت الاستطلاعات صحيحة ، فمن المحتمل أنك تستخدم Sublime Text أو Visual Studio Code (VSCode) أو IntelliJ IDEA . إنه أمر منطقي ، حيث أن هذه الأدوات الثلاث تتدرج من تحرير النص البسيط إلى بيئة التطوير المتكاملة (IDE). ومع ذلك ، هناك آخرون يستحق الذكر أيضًا. دعونا نلقي نظرة على عدد قليل منهم.
منذ إطلاقه في عام 2015 ، انتشر استخدام Visual Studio Code في جميع أنحاء أجهزة سطح المكتب التطويرية من جميع الخطوط.
محرر كود Visual Studio.
محرر كود Visual Studio.
إنه محرر كود مفتوح المصدر تم تطويره بواسطة Microsoft ويقدم ما يكفي في المربع ليتم اعتباره IDE. إنه بلا شك يوفر وظائف كافية للاستحواذ على أكثر من نصف السوق – يستخدم 55 ٪ من مطوري الويب Visual Studio Code يوميًا.
في الإعداد الافتراضي ، يعد Visual Studio Code محرر نصوص أولاً وقبل كل شيء. ومع ذلك ، عند اقترانها بمكتبة الامتداد الخاصة بها ، فإنها تصبح معيارية ومرنة بما يكفي لتلبية أي من احتياجات التطوير الخاصة بك:
مكتبة ملحقات Visual Studio Code.
مكتبة ملحقات Visual Studio Code.
هذا يعني أنه يمكنك تثبيت linters والمثبتات للغة التي اخترتها (نعم ، يوجد ESLint و PHP CS Fixer) ، جنبًا إلى جنب مع امتدادات Docker و Vagrant ، وأكثر من ذلك بكثير.
عند الحديث عن اللغات ، يدعم Visual Studio Code JavaScript و Node.js و TypeScript خارج الصندوق. ومع ذلك ، فإن نظام الامتداد الإيكولوجي غني جدًا لدرجة أنك ستتمكن من العثور على شيء يدعم اللغة التي تستخدمها.
علاوة على ذلك ، ستجد أيضًا تكاملاً من الدرجة الأولى مع منتجات Microsoft الأخرى ، وأبرزها GitHub :
تكامل Visual Studio Code GitHub.
يحتوي Visual Studio Code على تكامل VCS مخصص مع GitHub.
Visual Studio مجاني تمامًا ، نظرًا لمجموعة الميزات ، فهو مثالي للكثيرين. نحن نعتبر VSCode بمثابة حل وسط ممتاز بين IDEA و Sublime Text. بالحديث عن ذلك ، دعونا نلقي نظرة على الأخير بعد ذلك.
تطبيق Sublime Text.
تطبيق Sublime Text.
Sublime Text هو الدعامة الأساسية في عالم محرري النصوص. إنها أكثر تقليصًا من معظم الحلول الأخرى ، على الرغم من أن مظهرها يكذب القوة الموجودة تحت الغطاء.
على سبيل المثال ، سترى الكثير مما يقدمه Sublime Text في المنافسين الآخرين. لوحة القيادة شيء ستراه في العديد من الحلول لأنه سهل الاستخدام.
لوحة الأوامر Sublime Text.
لوحة الأوامر Sublime Text.
بالإضافة إلى ذلك ، هناك اختصارات تحرير قوية للوحة المفاتيح ، مثل إجراء تحديدات متعددة لتحرير عدة أعمدة في وقت واحد. أيضًا ، توفر ميزة Goto Anything تركيبات شبيهة بـ Vim من اختصارات لوحة المفاتيح لاجتياز ملفاتك:
ميزة Sublime Text’s Goto Anything.
يمكن أن يجمع Sublime Text بين ضغطات المفاتيح لمساعدتك على التنقل.
Sublime Text هي أداة متميزة ذات فترة تجريبية ليبرالية للغاية. يمكن اعتباره مجانيًا ، ولكن لرد الجميل للمطور ، يجب عليك شراء ترخيص للاستخدام الممتد.
في رأينا ، بالنسبة للعديد من المبرمجين الصغار أو الهواة ، يقدم Sublime Text تجربة مستخدم رائعة (UX) ، ويوفر الأساسيات. لا يزال يحظى بتأييد العديد من المطورين لمرئياته المبهجة ، وتصميمه الخالي من العناء ، وقابلية التوسعة.
في وقت من الأوقات ، تمتعت Atom باستخدام مكثف بين المطورين. ومع ذلك ، منذ وصول Visual Studio Code ، لوحظ اعتماد أقل. إنه لأمر مخز لأنه محرر كود رائع مناسب للعديد من التطبيقات المختلفة.
تطبيق Atom.
تطبيق Atom.
إنه تطبيق تم تطويره بواسطة GitHub ، والذي قد يفسر سبب دفعه إلى أسفل ترتيب التحديد في Microsoft. ومع ذلك ، يتم تحديثه بانتظام ويمكن اعتباره إصدارًا بديلاً من Visual Studio Code.
يعد تحرير النص عمليًا ، ومثل شقيقه الأكبر ، فإنه يحتوي على تكامل GitHub المدمج. هناك أيضًا العديد من الإضافات المسماة “الحزم”:
مثبت حزمة Atom.
مثبت حزمة Atom.
هناك الكثير من الأشياء المتاحة للمساعدة في تخصيص Atom لسير عملك ومشاريعك. يتضمن Atom العديد من السمات للاختيار من بينها ، وبعضها ، مثل One Dark ، شائع جدًا لدرجة أنهم وجدوا طريقهم إلى المحررين الآخرين أيضًا:
موضوع Atom’s One Dark.
موضوع Atom’s One Dark.
Atom هو محرر كود وظيفي يستحق المحاولة. ومع ذلك ، نظرًا لأن Atom مبني على Electron (لا يقصد التورية) ، فقد اشتكى بعض المستخدمين من الملفات الكبيرة والمشاريع التي تعمل ببطء. على هذا النحو ، نقترح أنه جيد للمشروعات الصغيرة والنصوص السريعة (خاصة مع الحزمة الطرفية المضمنة) ، ولكنها قد لا تكون الأفضل للعمل المعقد.
الصفحة الرئيسية لبرنامج Notepad ++.
الصفحة الرئيسية لبرنامج Notepad ++.
على الفور ، من الجدير بالذكر أن Notepad ++ قد لا يحل محل أي من محرري الكود “Big boy” الذي تستخدمه بالفعل ، مثل IntelliJ IDEA أو Visual Studio Code. ومع ذلك ، سوف يمنحك مزيدًا من القوة تحت الغطاء للنصوص البسيطة وتطبيقات تحرير النصوص العامة.
اعتمادًا على مشاريعك ، قد يغريك التبديل. على الرغم من بساطته ، يتم استخدام Notepad ++ في مجموعة متنوعة من المشاريع.
إنه محرر كود خاص بنظام Windows فقط ، وهو يشرح عنصر “plus-plus” في اسمه. بالطبع ، برنامج Notepad هو محرر نصوص لا معنى له يتم العثور عليه افتراضيًا في عمليات تثبيت Windows. يشبه Notepad ++ شقيقه ، ولكنه يتضمن أيضًا ميزات خاصة بالتطوير مثل:
نوافذ مبوبة ومقسمة
دعم ما يقرب من 80 لغة برمجة
وظائف الإكمال التلقائي
قائمة الوظائف ، والتي توفر طريقة رائعة لعرض جميع الوظائف المستخدمة في ملف في لمح البصر
علاوة على ذلك ، يتميز برنامج Notepad ++ بالمرونة عندما يتعلق الأمر بإدارة المشاريع. يدعم ثلاث طرق مختلفة: الجلسات ، ومساحات العمل ، والمشاريع. بمجرد البدء في البحث في Notepad ++ ، سترى أنه يمكنك استخدامه لمشاريع أكثر شمولاً من البرامج النصية ذات الصفحة الواحدة.
نعتقد أن Notepad ++ سوف يناسب المطورين الذين يريدون وظائف رائعة ، وهي أيضًا قابلة للتخصيص. عند الاستخدام ، فإنه يحصل على مصدر مفتوح Vim vibe ، والذي يناسب أنواعًا معينة من المشاريع أكثر من غيرها.
عندما يتعلق الأمر بتطوير IDEs ، فإن مجموعة حلول JetBrains ستكون (أو قريبة جدًا) من أعلى قائمتك. نموذج العمل ذكي ، فبينما يتوفر الكثير من المحررين من JetBrains ، فإنهم جميعًا في الواقع “مجموعات فرعية” من محررها البارز IntelliJ IDEA .
IntelliJ IDEA هو Java IDE رائد.
IntelliJ IDEA هو Java IDE رائد.
IDEA تعتبر نفسها Java IDE. وهو يدعم عمليا جميع وظائف أدوات IDE الأخرى في نطاقه. وعلى هذا النحو ، فهو يدعم العديد من لغات البرمجة أيضًا.
على سبيل المثال ، تقوم PyCharm بتمزيق معظم وظائف Python من IDEA وتعبئتها كأداة خاصة بها. ستجد أيضًا أن phpStorm و WebStorm يقومان بنفس الشيء.
تطبيق PyCharm.
PyCharm هو IDE خاص بـ Python وهو شائع في مساحة اللغة.
يعد استخدام IDEA أمرًا سهلاً – لقد قامت JetBrains بعمل رائع في الحصول على الترميز بدلاً من الخوض في التكوينات والإعدادات. قد يكون الأمر مفاجئًا ، لكن الخط الفاصل بين استخدام محرر سطر أوامر مثل Vim واستخدام IDEA غالبًا ما يكون رفيعًا.
يوجد تركيز مشابه على سير العمل والكفاءة في كلتا الأداتين ، على الرغم من أن IDEA تتيح لك أيضًا استيراد روابط لوحة مفاتيح Vim إذا كنت مرتاحًا في العمل بهذه الطريقة أيضًا.
تمديد ربط مفاتيح IDEAs Vim.
تتيح لك امتدادات IDEA استخدام روابط لوحة مفاتيح Vim لتجعلك تشعر وكأنك معالج.
سنفترض مسبقًا أنك من المحتمل أن تستخدم IntelliJ IDEA إذا كنت تعمل كجزء من مشروع كبير أو شركة لديها صفقة برمجيات قائمة. يمكن أن يكون لمشاركة المشاريع أو العمل في بيئة متسقة. يستخدم الكثير من مطوري وورد بريس منتجات JetBrains نظرًا لمدى قوتهم في إدارة المشاريع.
السعر هو أيضًا عامل ، وقد تم بناء IntelliJ على نموذج الاشتراك الذي غالبًا ما يصل إلى ثلاثة أو أربعة أرقام في السنة.
شاشة تسعير IntelliJ IDEAs.
شاشة تسعير IntelliJ IDEAs.
وحتى مع ذلك، هناك و بعض طبعات “المجتمع” من المنتجات JetBrains. ومع ذلك ، فهي إصدارات مختصرة من البرنامج الأصلي ؛ في الأساس ، إنها حلول مفتوحة المصدر مع إزالة عناصر الملكية.
علاوة على ذلك ، تقدم JetBrains أسعارًا تنافسية للمشاريع مفتوحة المصدر والشركات الناشئة والمرافق التعليمية و Docker Captains والعديد من المجموعات المتخصصة الأخرى.
بالطبع ، لا يعد تطبيق الويب شيئًا بدون تجربة مستخدم جيدة (UX). على هذا النحو ، غالبًا ما تحتاج النماذج الأولية لتخطيطاتك ومرئياتك إلى أداة مخصصة. ستكون أدوات التصميم حيوية على جانب الخادم والعميل في التطوير. فيما يلي بعض الخيارات الشائعة.
Figma هي أداة تطوير ويب مذكورة كثيرًا والتي تتيح لك التعاون في التصميم.
محرر فيجما.
محرر فيجما.
يمكنك استخدام محرر السحب والإفلات لإنشاء واجهات وعناصر أخرى تواجه المستخدم. بالنسبة للمطورين ، يمكنك أيضًا الحصول على مقتطفات التعليمات البرمجية لغرسها في مشاريعك. تجعل Figma العملية – من الفكرة إلى التنفيذ – سلسة وتحافظ على المراجعات على طول سلسلة المشروع بأكملها.
يمكنك أيضًا الاستفادة من مجموعة متجانسة من الأدوات للمساعدة في خيارات الخط والألوان. تتناقض هذه العملية مع استخدام أدوات منفصلة مثل Type Scale :
موقع ويب Type Scale.
موقع ويب Type Scale.
… ومجموعة فرعية من أدوات تطوير الويب مثل Adobe Color و Coolors وأدوات انتقاء الألوان المتنوعة وغير ذلك الكثير.
منتقي الألوان Coolors.
منتقي الألوان Coolors.
بينما تتمتع Figma بقيمة لمشاريع المطورين الفرديين ، إلا أنها تتمتع بفائدة أكبر للفريق حيث يتسع حجمه. ستحب الفرق الجوانب التعاونية لـ Figma ، مثل مستودع الأصول المركزي والمكونات القابلة لإعادة الاستخدام. سيقدر قادة الفريق أيضًا خيارات التقارير الشاملة لمعرفة كيفية استخدام أعضاء الفريق لأنظمة التصميم المختلفة.
بالنسبة للتسعير ، تبلغ تكلفة Figma 12 دولارًا لكل “محرر” على المستوى القياسي ، والذي يرتفع إلى 45 دولارًا لكل “محرر” للفرق القائمة على المؤسسات (بالنسبة إلى “المحرر” ، اقرأ “المقعد” – إنه نفس المفهوم). على هذا النحو ، يمكن أن يرتفع السعر بناءً على عدد المحررين الذين ترغب في ضمهم.
Sketch هو تطبيق يعمل بنظام macOS فقط ويتم التحقق منه كثيرًا أيضًا بين المطورين:
شعار Sketch.
شعار Sketch.
إنه شائع لأن Sketch يتضمن الكثير من الوظائف تحت الغطاء ، كما أنه سهل الاستخدام ، وهو أمر منطقي نظرًا لأنه تطبيق macOS أصلي. إنه يشبه إلى حد ما Xcode IDE من Apple ، وهو ليس بالأمر السيئ ، ومن الرائع التنقل فيه.
بالطبع ، يمكنك تنفيذ الوظائف الأساسية مثل تحرير المتجهات وتغيير حجم القيد. ومع ذلك ، هناك الكثير في التطبيق الذي سيساعدك على إنشاء تصميمات وتصديرها إلى الآخرين بطريقة سريعة.
على سبيل المثال ، خذ وظيفة التخطيط الذكي في Sketch ، والتي تستخدم تغيير الحجم التكيفي لمطابقة أبعادك والتخطيط الحالي. هناك أيضًا العديد من الأدوات التعاونية لمنح الجميع طريقة للتعمق في التصميم والمساعدة في إتقانه.
نظرة عامة على Sketch for Teams.
نظرة عامة على Sketch for Teams.
يختلف Sketch عن أداة مثل Figma في أنه يمكن للمطور المستقل أو المطور الوحيد القفز على متن الطائرة مجانًا ، ثم شراء اشتراك بمجرد الحاجة. في هذا الصدد ، يكون تسعير Sketch إما دفعة واحدة 99 دولارًا أو 9 دولارات شهريًا لكل مستخدم.
تبيع InVision Studio نفسها بشكل فريد على أنها تطبيق “تصميم شاشة”. إنه أمر منطقي ، ومن الواضح أن نفهمه أيضًا. يوفر InVision Studio جميع الميزات والوظائف القياسية التي تتوقعها ، مثل محرر بديهي قائم على الطبقة ودعم المتجه.
تطبيق InVision Studio.
تطبيق InVision Studio.
رغم ذلك ، هناك الكثير في المربع المتعلق بالنماذج الأولية وإنشاء الرسوم المتحركة. على سبيل المثال ، يمكنك الإشارة والنقر والسحب لربط اللوحات الفنية والشاشات معًا. تتيح لك هذه الميزة إنشاء رسوم متحركة كجزء من عملية التصميم بدلاً من تسليمها لاحقًا.
الرسوم المتحركة داخل تطبيق InVision Studio.
الرسوم المتحركة داخل تطبيق InVision Studio.
عند الحديث عن عمليات التسليم ، يمكن للفريق بأكمله العمل داخل InVision Studio بسبب مكتبات المكونات المشتركة وخيارات المزامنة العالمية ووضع الفحص القوي والمزيد.
ل هيكل التسعير التنافسي أيضا. يمنحك الإصدار المجاني من InVision Studio جميع وظائف الإصدار المدفوع تقريبًا ، مع وجود قيود فقط على عدد المستندات التي يمكنك حفظها. تعتبر الطبقة الاحترافية ذات قيمة عالية لقوة التطبيق (حوالي 95 دولارًا لكل مستخدم في السنة).
إذا كنت من مستخدمي Adobe Illustrator ، فستواجه Affinity Designer في الماضي. يبدو أن أسلوب Serif في تصميم الرسوم يمنح حل Adobe فرصة للحصول على أمواله:
تطبيق Affinity Designer.
تطبيق Affinity Designer.
منذ إطلاقه ، اكتسب قاعدة مستخدمين مزدهرة بسبب علاقته الجيدة مع المجتمع ، ومبادئ التصميم الممتازة ، ونموذج التسعير الجذاب. ستجد إصدارات لأنظمة Mac و Windows و iPad ، ويمكن لكل إصدار أن يعمل مع المتجهات أو البيانات النقطية أو كليهما في وقت واحد:
محرر مصمم التقارب.
محرر مصمم التقارب.
جميع الأدوات التي استخدمتها من Illustrator موجودة ، جنبًا إلى جنب مع مجموعة كاملة من ملفات تعريف الألوان وخيارات التصدير:
خيارات التصدير في Affinity Designer.
خيارات التصدير في Affinity Designer.
باختصار ، الميزات والوظائف موجودة لإنشاء رسومات احترافية لمشاريعك. علاوة على ذلك ، فإن الأسعار تنافسية للغاية. يكلف حوالي 50 دولارًا بالسعر الكامل ، وهي دفعة لمرة واحدة. لا يحتوي على خيار سحابي مناسب مثل Illustrator. ومع ذلك ، مقابل رسوم لمرة واحدة ، تحصل على نطاق Adobe مقدمًا بطريقة ذاتية أفضل.
عند مناقشة IntelliJ IDEA سابقًا ، لم نذكر إحدى ميزاته البسيطة والسهلة – ملفات سكراتش . يتيح لك كتابة مقتطف رمز واختباره بسرعة دون الحاجة إلى التأثير على مشروع عملك الحالي.
بالنسبة لمستخدمي برامج تحرير التعليمات البرمجية الأخرى ، يعد حل مثل CodePen أو JSFiddle بديلاً ممتازًا. كلاهما يعمل بشكل مشابه: هناك ثلاثة برامج تحرير نصوص لـ HTML و CSS و JavaScript ، وشاشة إخراج لرؤية النتيجة:
وحدة تحكم CodePen.
وحدة تحكم CodePen.
يمكنك تسمية “Pen” أو “Fiddle” بناءً على نظامك الأساسي وحفظه ومشاركته مع الآخرين. إنها فكرة بسيطة – فكرة يمكن أن تساعدك على أخذ أفكارك نصف المخبوزة في جانب من جوانب المشروع وإدراكها في غضون ثوانٍ.
بالنسبة للمطورين الذين يرغبون في تسليط الضوء على عنصر معين داخل ملف وإظهار أين يمكن إجراء التغييرات ، فإن “IDE عبر الإنترنت” لا يقدر بثمن. بالإضافة إلى ذلك ، يمكن التعاون أيضًا من خلال الدردشة أو “الميكروفون المباشر”:
شاشة JSFiddle Collaboration.
شاشة JSFiddle Collaboration.
بشكل عام ، يمكن اعتبار IDE عبر الإنترنت أداة تطوير ويب “نائمة” من حيث عدم ذكرها كثيرًا ولكن يتم استخدامها من قبل العديد من المطورين لإنشاء كود أفضل.
يعد امتلاك طريقة مركزية لتخزين التعليمات البرمجية وتوثيق التغييرات والعمل عليها مع فريق بدون تكرار مهمة لنظام التحكم في الإصدار (VCS) . في ما يلي عدد قليل من العملاء الذين يتعاملون مع VCS واحد: git.
دعونا نناقش VCS نفسه أولاً.
يعد Git ضروريًا للمطور الحديث ، وعلى هذا النحو ، فهو أحد أهم أدوات تطوير الويب المتاحة. باختصار ، إنها طريقة لتوثيق التغييرات التي تجريها على كود مشروعك وتخزينها في “مستودعات”:
قائمة بإلتزامات وورد بريس GitHub.
قائمة بإلتزامات وورد بريس GitHub.
اخترع بوابة كتبها لينكس الخالق لينوس تورفالدس. ويستخدم سلسلة من الأوامر لإضافة تغييرات الملف إلى “منطقة التدريج” ، حيث ستقوم بعد ذلك “بإلزامها” بمستودع. من هناك ، ستدفعهم إلى مستودع بعيد مستضاف عبر الإنترنت.
على الرغم من أنها ليست VCS الوحيد المتاح – لا يزال فريق تطوير وورد بريس يستخدم Trac للعديد من المشاريع – إلا أنه الأبرز. يساعد VCS مثل Git أو Trac الفرق على العمل معًا من خلال استضافة التعليمات البرمجية في موقع مركزي.
الأوامر الأساسية هي وظائف من كلمة واحدة مسبوقة بـ git ، وغالبًا ما تستخدم من سطر الأوامر. على سبيل المثال:
git add file.phpيضيف هذا التعبير file.php إلى منطقة التدريج. بمعنى آخر ، يسجل التغييرات كشيء تريد تخزينه دون وضع اللمسات الأخيرة عليه. يمكنك القيام بذلك بملف واحد أو بمشروع كامل إذا كنت ترغب في ذلك.
لتنفيذ الملف ، تقوم بتشغيل git commit. من هنا ، يمكنك إضافة تعليق لإخبار الآخرين بالتزاماتك. بعد ذلك ، يتم تخزين التغييرات ودفعها إلى “الفرع” الأساسي. بالطبع ، هذا يعتمد على ما إذا كنت تعمل على “الريبو” عن بعد.
إذا كنت جديدًا على Git و VCS بشكل عام ، فإن GitLab لديه دليل مبتدئ رائع لاستخدام Git في سطر الأوامر. سنتحدث أيضًا قليلاً عن GitLab نفسها لاحقًا.
صفحة GitHub الخاصة بـ Kinsta.
صفحة GitHub الخاصة بـ Kinsta.
ل الغالبية العظمى من المطورين ، جيثب هو في المكان الذي يتم تخزين مشروع مستودعات Git:
ثلاثة من مستودعات وورد بريس GitHub العديدة.
مستودعات وورد بريس GitHub.
إنه حل مملوك لشركة Microsoft ويغطي أكثر بكثير من استضافة Git. هناك مجموعة من أدوات الاختبار الآلي أيضًا ومحاولة لتقديم ميزات تعاون إضافية .
ميزات تعاون GitHub.
ميزات تعاون GitHub.
بالنسبة للمشاريع مفتوحة المصدر ، فإن الأنظمة الأساسية مثل GitHub هي الخيار الواقعي تقريبًا. بالنظر إلى ذلك ، فإن GitHub كأداة لتطوير الويب لا تقدر بثمن للعديد من مستخدمي المصدر المفتوح والمتعلمين والمطورين بشكل عام. هذا صحيح بشكل خاص عند البحث في أداة تعقب المشكلات في GitHub لحل مشكلة الحزم المثبتة.
جيثب قضية تعقب.
جيثب قضية تعقب.
GitHub ليس فقط لتخزين مستودعات البرامج. إنه أيضًا لمشروعات الترميز الأخرى ، مثل تطوير الويب وحتى الكتب.
بشكل عام ، يعد GitHub أداة رائعة تساعد في بناء مجتمع صحي من العديد من الفروع المتباينة. ومع ذلك ، فهي ليست المنصة الوحيدة الموجودة.
شعار GitLab.
شعار GitLab.
ذكرناها سابقًا ، لكن GitLab منافس لـ GitHub ، بهدف مماثل. إنه في الأساس مضيف لـ Git repos ولكنه يقدم أيضًا بعض الإضافات الأخرى أيضًا.
بينما تطلق GitHub على نفسها اسم “منصة التطوير” ، تركز GitLab على “DevOps”. على مستواه المجاني ، يقدم GitLab كل مرحلة من مراحل دورة حياة DevOps ، واختبار أمان التطبيق الثابت ، وحوالي 400 دقيقة شهريًا للتطوير المستمر (CD) والتكامل المستمر (CI).
يقع GitLab في إحساسه بالمجتمع ، وهو الفرق الكبير عندما يتعلق الأمر بـ GitHub. يتعلق الأمر أكثر بالنشر والدورة الكاملة للمشروع. إنها ليست سلبية ، لكنها تعني أن GitLab هي أكثر من منصة “معزولة” ، ويمكن القول إنها ليست مناسبة لمشاريع مفتوحة المصدر مثل GitHub.
بالنسبة لمعظم الفرق ، ستكون فئة GitLab المجانية كثيرة. ل حوالي 230 $ سنويا، لكل مستخدم، يمكنك الوصول إلى تحليلات للالتعليمات البرمجية والإنتاجية، وحوالي 10،000 CD / CI دقيقة، وأكثر من ذلك.
Sourcetree ليس مضيف مستودع Git ، ولكنه واجهة مستخدم رسومية (GUI) لإدارتها . إنه أحد الحلول العديدة ، مثل GitKraken و Sublime Merge و GitHub Desktop وغيرها الكثير .
الصفحة الرئيسية لشجرة المصادر.
الصفحة الرئيسية لشجرة المصادر.
إنه أحد منتجات Atlassian (ونحن نحب Atlassian!) الذي يتصل بمنتجات أخرى مثل Bitbucket لتقديم تمثيل مرئي لمستودع Git الخاص بك.
يتم تسويق Sourcetree على أنه عميل Git سهل – وهو كذلك – ولكنه مناسب أيضًا للمستخدمين ذوي الخبرة أيضًا. لديها الكثير تحت الغطاء لدعم فريق يعمل مع Git (و Mercurial أيضًا).
على سبيل المثال ، يقوم Sourcetree بأشياء بسيطة ، مثل إبراز التغييرات من الالتزام الأخير ، ولكنه يعالج أيضًا المزيد إذا كنت في حاجة إليها. يمكن لقادة الفريق مراجعة مجموعات التغييرات ، والعمل بين الفروع حسب حاجتهم ، وتصور الكود باستخدام الرسوم البيانية وعلامات تبويب المعلومات:
عرض الرسم البياني لـ Sourcetree.
عرض الرسم البياني لـ Sourcetree.
يعتمد ما إذا كان عميل Git مناسبًا لك على ظروفك. إذا كنت لا تزال تتعلم ، فإننا نوصي بالاحتفاظ بالطرف أثناء فهمك للتدفق والعملية. للمحترفين أو الفرق التي لديها استخدام مكثف لـ Git ، سيختصر عميل مثل Sourcetree دقائق من العمل الذي تقوم به كل يوم.
بدون متصفح ويب ، لا يوجد تطوير ويب. ومع ذلك ، على الرغم من أهمية المستعرض الذي اخترته للتنقل عبر الويب ، يمكنك أيضًا استخدامه لمعرفة كيفية تشغيله.
تتضمن معظم المتصفحات الحديثة أدوات تطوير محددة لمساعدتك في تحليل التعليمات البرمجية الخلفية ، والتي يمكنك بعد ذلك استعادتها إلى مشروعك. فيما يلي بعض من أشهرها.
تحظى “DevTools” من Chrome بالاحترام عبر المجتمعات لمجموعة الميزات والتشخيصات الممتازة.
نظرًا لظهور المتصفحات القائمة على Chromium ، يمتلك الكثير منها نفس مجموعة DevTools مع اختصارات مماثلة. يمكنك التحقق من Microsoft Edge و Brave و Chromium نفسها والعديد من النسخ الأخرى والعمل مع مشاريعك داخل المتصفح.
تم العثور على DevTools في متصفح Brave.
DevTools متصفح Brave.
و عناصر والتبويب تكون تطارد العادية، وهذا هو المكان الذي سوف عرض رمز مصدر الصفحة. وفي رأينا ، توفر علامة التبويب ” الأداء” رؤى حول تحميل الصفحة لا يمكن لـ DevTools الأخرى مطابقتها:
علامة تبويب أداء Brave.
علامة تبويب أداء Brave.
توفر علامة التبويب الأمان بعض المعلومات الجيدة أيضًا ، والتي ستكون ضرورية لمراقبة (أو البحث) موقع الويب الخاص بالعميل:
علامة التبويب Brave’s Security.
علامة التبويب Brave’s Security.
والأفضل من ذلك ، ستتمكن من إنشاء تقارير Google Lighthouse مباشرة من المتصفح المستند إلى Chromium:
تقرير Google Lighthouse من Brave’s DevTools.
تقرير Google Lighthouse من Brave’s DevTools.
تعتبر DevTools هنا الأفضل بشكل شخصي ، لذلك ستجد أن المستخدمين المستندة إلى Chrome و Chromium سوف يعتمدون عليها. على الرغم من أن المتصفحات الأخرى بها DevTools أيضًا ، إلا أنها تستحق الدراسة أيضًا.
الصفحة الرئيسية لمتصفح Firefox.
الصفحة الرئيسية لمتصفح Firefox.
مع قاعدة مستخدمين نشطة شهريًا تبلغ حوالي 220 مليون مستخدم ، لا يزال Firefox متصفحًا شائعًا ، على الرغم من هيمنة Google. في الماضي ، أشاد المطورون بـ Firebug ، وكان غالبًا رائدًا في تصحيح الأخطاء داخل المتصفح.
اليوم ، لدينا أدوات مطوري Firefox:
أدوات مطور Firefox.
أدوات مطور Firefox.
هناك مجموعة أساسية من الميزات لعرض كود مصدر الموقع ( المفتش ) ، ومصحح الأخطاء ، والذاكرة ، والتخزين ، والمزيد.
بالنسبة للمبتدئين ، تعد وحدة التحكم بوابة إلى الترميز بشكل عام لأنك قادر على تشغيل JavaScript مباشرة في المتصفح ، وهي طريقة سهلة لاختبار المقتطفات والعثور على قدميك عند البدء:
مثال على وحدة تحكم المتصفح.
مثال على وحدة تحكم المتصفح.
على الرغم من ذلك ، نعتقد أن Firefox (والمتصفحات الأخرى) أقل حزمًا في أدوات المطور الخاصة به من المتصفحات القائمة على Chromium. ومع ذلك ، من أجل تصحيح الأخطاء عبر المستعرضات واستكشاف الأخطاء وإصلاحها ، ستضغط غالبًا على Firefox للخدمة. على هذا النحو ، من الجيد أنها مثالية لجميع المهام تقريبًا.
بالحديث عن الواجهة الأمامية ، ستحتاج إلى شيء مناسب لإنشاء مواقع ويب مذهلة. اختيارك للإطار هنا أمر بالغ الأهمية. يجب عليك دائمًا اختيار أفضل أداة للوظيفة.
مع وضع ذلك في الاعتبار ، دعونا نلقي نظرة على بعض الخيارات الشائعة.
تعد استجابة الهاتف المحمول ميزة قياسية في تصميم الويب الحديث. إنها خطوة مرحب بها ، بالنظر إلى كيفية تجاوز تصفح الجوال الآن لأجهزة سطح المكتب. بالنظر إلى هذا ، ستحتاج إلى طريقة لتدوير مواقع الجوال أولاً بسرعة.
يعد Bootstrap أداة رائعة لتطوير الويب تشهد الكثير من الاستخدام:
شعار Bootstrap.
شعار Bootstrap.
إنها مجموعة أدوات تجمع بين مكونات JavaScript الإضافية ومتغيرات Sass وبعض المكونات المبنية مسبقًا ونظام شبكة سريع الاستجابة وغير ذلك الكثير. حتى أن هناك سوقًا للموضوعات الرسمية التي تعمل مع Bootstrap ، كما أن الكثير من مواقع وورد بريس تستخدم أيضًا سمات مبنية على قمة إطار التصميم.
بالطبع ، يعتمد ما إذا كنت تستخدم Bootstrap أم لا على ما يحتاجه مشروعك. ومع ذلك ، فمن المنطقي أن نفترض أن مشاريع تطوير الويب ذات الميزانيات المحدودة والتحولات السريعة ستتحول إلى حل “Bootstrapped” وتكييفه مع وورد بريس. نظرًا لأن إطار العمل و وورد بريس مجانيان ، يصبح وقتك عامل التكلفة الوحيد.
على الورق ، لا معنى لـ Tailwind CSS . إنه إطار عمل للواجهة الأمامية للغة تعد جزءًا من جوهر ثالوث تطوير الويب. على هذا النحو ، من المنطقي الاعتقاد بأن المستخدم المستهدف سيكون لديه بالفعل المعرفة المناسبة دون الحاجة إلى إطار عمل.
في الواقع ، تعتبر Tailwind CSS منطقية تمامًا . إنها طريقة لتصميم الواجهة الأمامية لموقعك دون مغادرة HTML.
مثال على Tailwind CSS.
مثال على Tailwind CSS.
يمكنك استخدام فئات الأدوات المساعدة داخل علامات مختلفة لإضافتها في CSS من StyleSheet الأساسية. بالطبع ، لا يزال CSS هو مصدر التصميم الأساسي. إنها فقط خارج وجهة نظرك أثناء إنشاء تخطيط باستخدام HTML. وبالتالي ، فإنه يتيح لك تطوير الهيكل والأسلوب في نفس الوقت.
يذكرنا النهج بنظام 960 Grid وسيعمل بشكل جيد مع هذا الإطار. ومع ذلك ، هناك خطر من تعبئة العناصر مع العديد من الفئات التي قد تنتهي بفوضى من كود السباغيتي. ستحتاج إلى الصبر والانضباط للعمل مع Tailwind CSS ، ولكن إذا كان يناسب مشروعك ، فهو إطار عمل سريع وقوي.
لقد حققنا كل التقدم الذي أحرزناه في تصميم هياكل وتخطيطات المواقع ، وإنشاء أعمدة مرنة وسريعة الاستجابة وديناميكية ، لتكون بمثابة حاجز أمام الكثيرين. أثناء التعامل مع هذا ليس الشيء الوحيد الذي يمكن لـ Bulma القيام به ، فإن هذا النوع من التطبيقات هو اللحوم والبطاطس في الإطار:
موقع بولما.
موقع بولما.
مثل Tailwind CSS ، يخفي Bulma CSS ويمنحك فئات أدوات مساعدة لـ HTML الخاص بك. تم تصميمه باستخدام Flexbox ، والهاتف المحمول أولاً ، والوحدات النمطية. إنه لأمر رائع إذا كنت تحتاج فقط إلى عدد قليل من المكونات. يمكنك أيضًا مزج الأطر ومطابقتها إذا كنت ترغب في ذلك.
علاوة على ذلك ، لا تحتاج إلى أي JavaScript لتشغيل Bulma وتشغيله ، لأنه CSS فقط. يمكنك إضافة عناصر واجهة مثل الأزرار مع الحد الأدنى من التعليمات البرمجية. إنه إطار عمل مباشر ومفتوح المصدر يمكنه التكيف مع احتياجات مشروعك. في كتابنا ، هذه سمة قيّمة ستفعل جيدًا للاستفادة منها.
يتمتع فريق ZURB بأسلوبه الفريد في إطار عمل CSS في التأسيس . إنها أداة للجوّال أولاً ، وهي أداة دلالية لها نوعان من النكهات للمواقع والبريد الإلكتروني:
الصفحة الرئيسية للمؤسسة.
الصفحة الرئيسية للمؤسسة.
تم بناء الأساس مع إمكانية الوصول كأولوية. كل مقتطف في Foundation يأتي مع سمات ARIA المخصصة. ومع ذلك ، قبل أن تصل إلى هذه المرحلة ، يعد التأسيس مثيرًا للإعجاب للنماذج الأولية السريعة نظرًا لكيفية إضافته إلى HTML الخاص بك. يمكنك إنشاء أي عنصر هيكلي تقريبًا على صفحتك – حتى أنواع مختلفة من القوائم والتنقل:
إنشاء قائمة التنقل في Foundation.
إنشاء قائمة التنقل في Foundation.
يوفر ZURB أيضًا ثروة من الوثائق والبرامج التعليمية الممتازة لتعلم خصوصيات وعموميات الإطار. الأساس سهل الاستخدام ، لكننا نشك في أنه يمكنك التعمق في مواقع البناء والخروج بتخطيطات ووظائف معقدة.
ستجد أيضًا مجموعة من القوالب على موقع المؤسسة أيضًا. إنها إطارات سلكية مكشوفة لمساعدتك على الانطلاق – إضافة مرحب بها:
مكتبة قوالب المؤسسة.
مكتبة قوالب المؤسسة.
بشكل عام ، يقوم إطار المؤسسة بما يقوله على القصدير. سيكون أمرًا أساسيًا لتطوير موقعك ، بدلاً من السماح لك بمزيد من الوظائف. على هذا النحو ، قد لا تستخدمه في كل مشروع. رغم ذلك ، حيث يتم توظيفها ، فإنها ستعمل على جميع أنواع المواقع.
سنناقش React بمزيد من التفاصيل لاحقًا ، ولكن في الوقت الحالي ، يجب أن تعلم أن Material-UI مبنية على مكتبة مكونات إطار عمل JavaScript. بالنسبة لغير المدركين ، فإن التصميم متعدد الأبعاد هو “فلسفة” Google حول كيفية تصميم الواجهة الأمامية لموقع الويب. وهذا يعني الكثير من خطوط Roboto وكتل الألوان:
تتطلع واجهة المستخدم المادية إلى تلبية معايير تصميم Google.
تتطلع واجهة المستخدم المادية إلى تلبية معايير تصميم Google.
ستستورد المكتبة إلى React ، ثم تستخدم علامات HTML مخصصة لإنشاء موقعك:
إنشاء زر في Material-UI.
إنشاء زر في Material-UI.
لتخصيص العنصر بشكل أكبر ، يمكنك إضافة فئات إلى علامات HTML الخاصة بك. يتم تغليف كتلة التعليمات البرمجية بأكملها في دالة ، وستقوم بعرض التفاصيل (والصفحة بالملحق) في React.
هناك الكثير من السمات المجانية والمتميزة المتاحة أيضًا ، والتي تغطي العديد من حالات الاستخدام والأسعار:
مكتبة موضوع واجهة المستخدم المادية.
مكتبة موضوع واجهة المستخدم المادية.
نظرًا لأن Material-UI لها حالة استخدام واحدة محددة – إنشاء مواقع حول التصميم متعدد الأبعاد – فسيكون إطار عمل الانتقال إذا كان هذا هو هدفك. على وجه الخصوص ، ستكون مكتبة السمات مصدرًا قيمًا للبدء ، بغض النظر عن ميزانيتك.
الصفحة الرئيسية HTML5 Boilerplate.
الصفحة الرئيسية HTML5 Boilerplate.
إذا كنت مطور وورد بريس ، فربما تكون قد صادفت شُرَط سفلية . إنها سمة بداية وورد بريس مكشوفة توفر لك ساعات لا تحصى من تجميع العناصر الوظيفية والأساسية لموقعك. يقوم HTML5 Boilerplate بنفس الشيء على مستوى التصميم العام.
على هذا النحو ، فهو يتضمن سبعة ملفات تمتد عبر HTML و CSS و JavaScript. تحتوي جميعها فقط على أكثر الملفات والرموز اللازمة لعرض الصفحة. بعد هذه النقطة ، فإن كيفية ظهور صفحتك أمر متروك لك.
يحتوي HTML5 Boilerplate على العديد من المعجبين لأنه أداة موفرة للوقت أكثر من إطار عمل كامل. وبالتالي ، لا توجد عناصر مرئية خارجة عن المألوف لإبهار “التجارة العابرة” ، ولكن إذا ضغطت على HTML5 Boilerplate في الخدمة ، فقد تجد أنه يعمل على تسريع عملية التطوير بالطريقة التي تعمل بها Underscores لمطوري وورد بريس.
على الرغم من أننا لا نسمي Materialize منافسًا لـ Material-UI ، إلا أنه إطار عمل آخر يتطلع إلى استخدام مبادئ التصميم متعدد الأبعاد لإنشاء تخطيط:
الصفحة الرئيسية لتجسيد.
الصفحة الرئيسية لتجسيد.
بدلاً من استخدام React ، فإن Materialize هي إطار عمل CSS. هذا يجعل تطبيق Materialize أسهل في الواجهة الأمامية. مثل الكثير من الأطر المستندة إلى CSS ، يمكنك استخدام الفئات داخل HTML لسحب العناصر في الواجهة الأمامية.
ومع ذلك ، هناك مجموعة من مكونات JavaScript أيضًا لعناصر مثل الوسائط والقوائم المنسدلة:
قائمة منسدلة تم إنشاؤها باستخدام Materialize.
قائمة منسدلة تم إنشاؤها باستخدام Materialize.
مثل العديد من أطر العمل هذه ، هناك سمات مميزة تساعدك في إنشاء تخطيطات بأسلوب معين. ومع ذلك ، فهي جميعها سمات HTML ثابتة ، والتي قد تثبت وجود مشكلة إذا كنت ترغب في تنفيذ JavaScript. في هذه الحالات ، قد ترغب في التفكير في Material-UI بدلاً من ذلك.
ببساطة ، يتيح لك إطار عمل أو مكتبة جافا سكريبت العمل مع ما يسمى برمز “الفانيليا” بشكل مختلف. في هذه الحالة ، يتم إنشاء تطبيقات ومواقع ويب محددة. هناك الكثير من “النكهات” أيضًا – دعنا نغطي بعضها.
مثال على شفرة React sandbox.
مثال على شفرة React sandbox.
React.js هي مكتبة JavaScript شهيرة مصممة على Facebook والتي تدعم العديد من عناصر وورد بريس الأكثر حداثة. تستخدم كل من الواجهة الخلفية لـ وورد بريس.com ومحرر المربعات React ، ونعتبرها الطريقة الأولى للواجهة لاستخدام JavaScript.
تم بناء الواجهة الخلفية لـ Calypso لـ وورد بريس.com على React.
تم بناء الواجهة الخلفية لـ Calypso لـ وورد بريس.com على React.
على هذا النحو ، يجب على مطوري وورد بريس – لإعادة صياغة Matt Mullenweg – تعلم React.js بعمق. رغم ذلك ، فهو ليس مجرد إطار عمل لمطوري وورد بريس.
في أي مكان تحتاج فيه إلى واجهة مستخدم حديثة وديناميكية (UI) ، ستكون React هي الاعتبار الأول. يستخدم امتدادًا لغويًا لجافا سكريبت يسمى JSX لإنشاء عناصر ، والتي يتم عرضها بعد ذلك إلى وحدة كائن المستند (DOM):
تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟
انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!
إشترك الآن
const name = "Ken Starr';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render
Element,
document.getElementById('root')
);يمكن أن يكون متغير JavaScript داخل JSX أي تعبير صالح ، مما يتيح لك إنشاء وسيطات معقدة. هذا يجعل React خيارًا قويًا عندما يتعلق الأمر بإطارات العمل. نظرًا لشعبيتها ، نعتقد أن React يجب أن تكون على قائمة “يجب أن تتعلم” ، بغض النظر عن المكان الذي تقضي فيه وقت التطوير.
Vue.js هو إطار عمل JavaScript آخر لبناء واجهات المستخدم. إنه قائم على “طبقة العرض” وهو رائع للتكامل مع المكتبات والأطر الأخرى.
صندوق الحماية Vue.js.
صندوق الحماية Vue.js.
على جانب HTML ، لا يمكن الوصول إلى Vue. أنت تعطي علامتك معرفًا وتستدعي مفتاحًا من مجموعة قاموس على جانب JavaScript. أصبحت البيانات الآن تفاعلية ، ويتم ربط البيانات و DOM.
بهذه الطريقة ، Vue.js يشبه إلى حد كبير بعض أطر عمل CSS التي نظرنا إليها سابقًا في المقالة. إطار العمل هذا مقنع ، ونحن نشجعك على الاطلاع على الوثائق لمعرفة ما هو ممكن.
بينما يدعم Vue.js إعلانات JSX ، إلا أنه مناسب بشكل أفضل لاستخدام القوالب القائمة على تقنيات الويب “الكلاسيكية”. على هذا النحو ، سيكون مثاليًا للمطورين الذين لا يرغبون في العمل في JavaScript فقط.
نحن ندخل إلى منطقة Meta-framework هنا ، حيث يتصل Express.js بـ Node.js ويوفر قاعدة لأطر عمل أخرى.
الصفحة الرئيسية لـ Express.js.
الصفحة الرئيسية لـ Express.js.
إنه إطار عمل مبسط (ومن هنا جاءت تسميته) ، وتتمثل الميزة الرئيسية في مساعدتك في تنظيم مكونات جانب الخادم في تنسيق مألوف لـ Model-View-Controller (MVC). على هذا النحو ، تبدو الكود أكثر تعقيدًا من الأطر الأخرى – حتى Vanilla JavaScript:
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);نعتقد أن Express.js سوف يناسب التطبيقات التي تسحب وتدفع من قواعد البيانات كثيرًا. وهذا يجعلها مناسبة للعديد من تطبيقات الويب الحديثة ومطوري الواجهة الخلفية الذين يرغبون في العمل على مهام الواجهة الأمامية بأقل قدر من التوتر.
إحدى القواعد الأساسية القوية عند التطوير للويب هي التأكد من أن مواقعك تعمل على أكبر عدد ممكن من المتصفحات. ومع ذلك ، في بعض الحالات ، قد ترغب في إنشاء تطبيقات أو مواقع ويب دون دعم المتصفحات القديمة. في هذه الحالات ، يجب أن يكون Svelte.js بالقرب من أعلى قائمتك.
الصفحة الرئيسية لـ Svelte.js.
الصفحة الرئيسية لـ Svelte.js.
يحصل الإطار على اسمه بسبب حجم ملفه – مجرد 5 كيلوبايت بمجرد تصغيره. يحتوي على تنسيق يشبه jQuery والذي سيكون سهلاً للمستخدمين المألوفين:
$('.hello').text("Hello svelte");هناك أقل من 40 وظيفة داخل Svelte API ، لذا فإن البدء سيكون أمرًا سهلاً. علاوة على ذلك ، يمكنك إضافة وظائف جديدة بسهولة باستخدام $.fn.
ستجد “polyfills” لدعم Internet Explorer 9 ، ولكن هذا هو الامتياز الوحيد تقريبًا. للحصول على دعم متطور للغاية للمتصفح باستخدام إطار عمل فائق الدقة ، يمكن أن يكون Svelte.js هو الخيار المناسب لك.
حتى الآن ، ألقينا نظرة على أطر عمل JavaScript أو CSS. نظرًا لانتشار PHP ، فمن المنطقي تغطية إطار عمل لهذه اللغة أيضًا. Laravel هو الخيار المثالي هنا ، حيث إنه شائع بين العديد من المطورين بسبب تركيبته ونظامه البيئي:
صفحة Laravel الرئيسية.
صفحة Laravel الرئيسية.
من المناسب أكثر أن نقول إن Laravel هو نظام بيئي ، لأنه يتضمن الكثير من الأدوات لمساعدتك في بناء المشاريع. حتى إذا لم تستخدم الكثير من إطار العمل نفسه ، يمكنك استخدام Laravel’s Homestead ، بيئة تطوير محلية مبنية على Vagrant .
Laravel نفسه هو إطار عمل PHP قائم على Docker ويستخدم CLI (يسمى Sail) للتفاعل معه. مثل Vagrant ، ستستخدم الإبحار لبناء الحاويات وتشغيلها.
على الرغم من ذلك ، فإن Laravel لديه الكثير من السلاسل في قوسه. على سبيل المثال ، يمكنك استخدامه كإطار عمل مكدس كامل وواجهة برمجة تطبيقات API لتطبيقات Next.js وكل شيء بينهما تقريبًا.
إذا كنت مطور PHP ، فسيكون Laravel أداة مركزية (إن لم تكن مألوفة) لسير عملك.
Gatsby هو إطار أمامي مفتوح المصدر حظي بالكثير من الاهتمام مؤخرًا. ذلك لأن Gatsby سريع وقابل للتطوير وفعال وآمن.
الصفحة الرئيسية لجاتسبي.
الصفحة الرئيسية لجاتسبي.
هناك عملية تثبيت فائقة السرعة تتضمن Node Package Manager (npm). سيكون لدينا المزيد عن هذا لاحقًا. على الرغم من أنه إطار عمل JavaScript ، إلا أن Gatsby ينشئ ملفات HTML ثابتة في وقت التشغيل ، لذلك لا توجد طريقة لمهاجمة أي موقع. علاوة على ذلك ، يقوم Gatsby بأتمتة الأداء للحفاظ على تشغيل موقعك في التكوين الأمثل.
بين الأداء الآلي ، والقياس الديناميكي ، وبناء HTML الثابت ، يبدو غاتسبي وكأنه كائن حي. هناك “مكياج” ترميز معقد يتضمن JSX و Markdown و CSS وغير ذلك الكثير بناءً على احتياجاتك. يمكن تخصيص كل خطوة من خطوات سير العمل وجزء من مجموعتك وفقًا لمتطلباتك.
سيحب مطورو وورد بريس أيضًا كيفية تكامل Gatsby مع النظام الأساسي . ومع ذلك ، لن يكون مناسبًا في جميع الحالات. على سبيل المثال ، إذا كنت بحاجة إلى إدارة نظام إدارة محتوى قائم على السحابة بالكامل ، فهذا ليس مناسبًا لك. ومع ذلك ، يمكن لـ Gatsby التكيف مع مشروعك في معظم الحالات ، وهو يعمل بشكل رائع مع وورد بريس.
على الرغم من الحديث عن لغة Python باعتبارها لغة برمجة “مبتدئة” أو “تعليمية” ، فهي بمثابة العمود الفقري للعديد من المواقع رفيعة المستوى. بعض أكبر مواقع الويب – Instagram و Uber و Reddit و Pinterest والمزيد – تستخدم Django. في كثير من الأحيان ، لن تجد أي ذكر لـ Python نفسها ، ولكن فقط Django .
Django هو إطار عمل يستخدم Python لإنشاء تطبيقات ويب من جانب الخادم. من السهل جدًا استخدامها مثل Python نفسها ، بتنسيق uber-readable.
تنسيق Django الافتراضي.
تنسيق Django الافتراضي.
Python هي لغة برمجة نصية رائعة للمشاريع القائمة على المنطق ، لذا فإن الاستفادة من ذلك لتطبيق ويب يعد أمرًا مناسبًا. علاوة على ذلك ، فإن سرعة معالجة Python سريعة ، وبنية الملفات الأساسية خفيفة. نظرًا لأنه سريع ، يعد Django إطارًا ممتازًا من جانب الخادم مقارنةً بـ PHP ولديه نفس القدر من النخر مثل اللغة الأكثر شيوعًا.
ومع ذلك ، فإن الاستيعاب أقل ، وقد يكون ذلك بسبب سمعة بايثون كلغة متعلم. على الرغم من ذلك ، فإن Django يعمل جيدًا مع لغات أخرى ، مثل JavaScript ، ليكون أساسًا لتطبيق ويب حديث.
بالطبع ، إذا كنت تخطط لاستخدام CMS مثل وورد بريس ، أو كنت تقوم بإنشاء حلول لمشاريع قائمة على React ، فلديك خيارات أقل. ومع ذلك ، نعتقد أن عام 2021 سيشهد ارتفاعًا في عدد المواقع التي تعمل على Django.
كانت لغة البرمجة Ruby “محبوبة” للغات المبتدئين وبدائل البرمجة النصية لـ PHP قبل بضع سنوات. غالبًا ما تتم مقارنتها ببايثون.
ومثل Django ، كانت Ruby on Rails أيضًا مفضلة لدى العديد من المطورين.
صفحة العنصر النائب عند بدء مشروع Ruby on Rails.
صفحة العنصر النائب لمشروع Ruby on Rails الجديد.
ستجد Ruby مستخدمًا في الكثير من تطبيقات الويب من جانب الخادم وتحت الغطاء. بالإضافة إلى ذلك ، يتم استخدام Ruby on Rails كإطار عمل من جانب الخادم على عدد لا يحصى من مواقع الويب. يستخدم نهج MVC ويقدم هياكل لخدمة الويب والصفحات وقاعدة البيانات. على هذا النحو ، لديك موقع مجردة في انتظارك ، خارج الصندوق.
سوف تناسب Ruby on Rails مشروعك إذا احتاج إلى جدولة العديد من الوظائف والعمل مع حلول الجهات الخارجية. على سبيل المثال ، هناك تكامل أصلي مع تخزين الملفات مثل Google Cloud وملف لإرسال رسائل البريد الإلكتروني.
بشكل عام ، يعد اختيارًا جيدًا إذا كنت تريد مجموعة قوية من الإعدادات الافتراضية (مثل بنية المجلد) التي يمكن تخصيصها إذا لزم الأمر. من ناحية أخرى ، ليس خيارًا رائعًا إذا كنت تحب استخدام واجهات برمجة التطبيقات أثناء التطوير.
يمكن أن تصبح بنية التعليمات البرمجية لـ Ruby on Rails معقدة وصعبة الفهم مع المشاريع الكبيرة. يمكن أن يتأثر وقت التشغيل أيضًا ، لذلك قد لا يكون أفضل إطار عمل للمشاريع ذات السرعة الحرجة.
ومع ذلك ، فإن Ruby on Rails هو أحد أطر عمل خادم الويب الرائدة ، ولا يتباطأ استخدامه للمشاريع المناسبة.
مثال على كود TypeScript.
مثال على كود TypeScript.
باختصار، نسخة مطبوعة على الآلة الكاتبة يوفر اختياري ثابت “typechecking” إلى جافا سكريبت. إنها “مجموعة شاملة” من اللغة ، كما أنها تدعم الكثير من مكتبات JavaScript الأخرى. بشكل عام ، تعد TypeScript عبارة عن JavaScript مع بعض الميزات الإضافية ، ويمكنك تجميع اللغتين جنبًا إلى جنب.
تحول العديد من المطورين إلى TypeScript لتقليل عدد أخطاء وقت التشغيل التي يحصلون عليها. تعد أخطاء الكتابة من أكثر الأخطاء شيوعًا ، وقد يؤدي تقليلها إلى منحك الكثير من الوقت الإضافي.
للحصول على مثال بسيط جدًا عن TypeScript ، ضع في اعتبارك سلسلة نصية:
اسمحوا helloWorld = “Hello World” ؛
// ^ = دع helloWorld: string
هنا ، يستخدم TypeScript let بدلاً من var المعتاد لمتغير helloWorld. من هناك ، تعرف TypeScript أن helloWorld عبارة عن سلسلة وتتحقق منها على هذا الأساس.
في النهاية ، لا تعد TypeScript أداة أساسية لتطوير الويب ، على الرغم من أنها أصبحت أكثر شيوعًا نظرًا لميزة التحديد الأساسية الخاصة بها. إذا انتهى بك الأمر إلى توفير بعض الوقت الذي تشتد الحاجة إليه ، فقد يصبح هذا أمرًا حيويًا لسير عملك.
فيما يلي أداة فريدة قد تجد تفضيلًا بين المطورين الذين يعملون مع البيانات داخل واجهة برمجة التطبيقات. GraphQL هي لغة استعلام مستخدمة في واجهة برمجة تطبيقات تعمل أيضًا كوقت تشغيل لخدمة نتائج الاستعلام الذي تقوم به.
موقع ويب GraphQL.
موقع ويب GraphQL.
باستخدام واجهة برمجة تطبيقات REST القياسية ، غالبًا ما يتعين عليك التحميل من عناوين URL متعددة. باستخدام GraphQL ، يمكنك جلب البيانات من طلب واحد. علاوة على ذلك ، يتم ترتيب واجهات برمجة تطبيقات GraphQL حسب النوع بدلاً من نقاط النهاية. يساعد هذا التصنيف في كفاءة استعلامك ويوفر أخطاء أكثر وضوحًا عند حدوث خطأ ما.
يمكن أيضًا استخدام الأنواع لتخطي الكتابة فوق كود التحليل اليدوي ، بالنظر إلى كيفية قيام GraphQL بتنفيذها. يمكنك أيضًا إضافة حقول وأنواع جديدة إلى واجهة برمجة التطبيقات الخاصة بك دون التأثير على العمل الذي قمت به حتى الآن.
الأداة مرنة وقابلة للتطوير في العديد من المجالات. نظرًا لأن GraphQL تنشئ واجهة برمجة تطبيقات موحدة لمشروعك ، يمكنك سحب محرك يطابق لغة المشروع التي اخترتها. هذا يجعله رائعًا لمجموعة واسعة من التطبيقات ، بدلاً من حل مناسب لمشكلة واسعة الانتشار.
ستجد GraphQL مستخدمة في مواقع مثل GitHub و Spotify و Facebook والمزيد. يجب أن يمنحك فكرة عن كيفية استخدام GraphQL في المواقع ذات الاستعلامات الكثيفة من جميع الخطوط. على هذا النحو ، قد تحتاج إلى سحب هذا الحل أكثر من مرة خلال الاثني عشر شهرًا القادمة وما بعدها.
تحتوي لغات البرمجة والأطر وغير ذلك على العديد من الأجزاء المتحركة. يجب تنزيل هذه التبعيات وتثبيتها بالطريقة الصحيحة للعمل. أدخل مديري الحزم. تساعدك هذه على تنزيل وتثبيت تبعيات محددة من سطر الأوامر. دعنا نفكر في بعض الأدوات التي ستصادفك.
نعم ، تنزيل المثبتات له مكانه. ومع ذلك ، فإن استخدام مدير الحزم من سطر الأوامر أمر بسيط للغاية في معظم الحالات. كما يوفر طريقة سريعة للاستيلاء على الملفات وتثبيتها من الويب.
ل إدارة الحزم عقدة (الآلية) هو أداة تطوير الشبكة جافا سكريبت محددة مملوكة من قبل مايكروسوفت التي تمكنك من تثبيت حزم لغة محددة بناء على الطلب:
الصفحة الرئيسية npm.
الصفحة الرئيسية npm.
على سبيل المثال ، يُظهر البحث عن حزم React أكثر من 155000 نتيجة:
بحث يتم إجراؤه داخل npm.
بحث يتم إجراؤه في npm.
كما هو الحال مع IDE عبر الإنترنت ، فإن npm هي أداة تطوير ويب لا تحصل على الكثير من “وقت البث” ، ويرجع ذلك أساسًا إلى وجودها في كل مكان. على هذا النحو ، سيستخدم كل مطور ويب تقريبًا هذه الأداة.
ومع ذلك ، فهو أمر لا يصدق ، والآن بعد أن أصبح تحت جناح GitHub ، سيستخدم المزيد من المطورين npm في عام 2021 أكثر من أي وقت مضى.
تمامًا مثل npm و pip لـ Python ، يساعدك Yarn في تثبيت الحزم المتعلقة بمشروعك وأدواته. الفرق هنا هو أن Yarn هي أيضًا أداة لإدارة المشاريع.
الصفحة الرئيسية للغزل.
الصفحة الرئيسية للغزل.
التثبيت بسيط ، وتهيئة Yarn لمشروع جديد تتطلب أيضًا أقل جهد . لقد أصبح حلاً قويًا مفتوح المصدر لتثبيت الحزم وإدارة مشروعك جنبًا إلى جنب.
عليك استخدام مساحات لخلق “monorepos”، وإصدارات متعددة من المشروع الخاص على حد سواء ناري في نفس الريبو ويمكن أن تكون عبر المشار إليه. يمكنك تثبيت المكونات الإضافية لأي شيء لا يستطيع Yarn فعله (والذي تريد إضافة أدوات جلب ومحللات جديدة له). أن تكون أكثر دقة، أنت يمكن تثبيت الإضافات، ولكن هناك ليست كثيرة جدا ، على الأقل في القوائم الرسمية. بدلاً من ذلك ، ستقوم بتشفير الرمز الخاص بك إذا كنت بحاجة ماسة إلى الوظيفة. ومع ذلك ، فإن الخيار موجود لتخصيص الغزل حسب احتياجات مشروعك.
تقدم Yarn حالة فريدة لتصبح مدير الحزم الأساسي لديك. بالنسبة لمشروع في العالم الحقيقي ، قد تعتمد على npm أكثر ، لكن Yarn سوف تتسلل إلى سير عملك بطرق لا تفيد إلا أنت.
إن التأكد من عمل الأشياء عملية غالبًا ما يتم تخطيها ، ولكنها تأتي أيضًا مع الأسف عندما تسوء الأمور. على هذا النحو ، يجب أن تكون مرحلة الاختبار لمشروعك صلبة وقوية وشاملة.
بالنظر إلى هذا ، إليك بعض أدوات API والاختبار التي ستكون في متناول يديك لمشاريعك.
مدعوم من Netlify ، HoppScotch هي أداة تطوير API مفتوحة المصدر. يطلق عليه المطورون اسم “نظام بيئي” ، والذي يتناقض مع الوظائف الموجودة تحت الغطاء.
الصفحة الرئيسية HoppScotch.
الصفحة الرئيسية HoppScotch.
إنه حل لا معنى له وقوي ، وليس لضعاف القلوب. يكون منحنى التعلم شديد الانحدار إذا لم تستخدم أداة كهذه مطلقًا. لا يوجد اتجاه تقريبًا لاستخدام HoppScotch على أي من صفحات التطبيق ، على الرغم من أن هذه ليست مشكلة في العادة ، حيث أن الأداة مخصصة للمطورين ذوي الخبرة على أي حال.
هناك العديد من الاتصالات في الوقت الفعلي (WebSocket و SSE والمزيد) وتطبيق GraphQL. نحب أيضًا منشئ التوثيق:
هل تحتاج إلى حل استضافة يمنحك ميزة تنافسية؟ لقد جعلك Kinsta مغطى بسرعة لا تصدق وأحدث مستويات الأمان والتوسع التلقائي. تحقق من خططنا
شاشة مُنشئ وثائق HoppScotch.
شاشة مُنشئ وثائق HoppScotch.
إنه يعمل مع “مجموعات” HoppScotch الخاصة بك لإنشاء وثائق سريعة ، وهو أمر مرحب به لتوفير الوقت.
بشكل عام ، تعد HoppScotch أداة وظيفية سيتم فتحها كثيرًا في متصفحك. إنه أحد تلك الحلول التي ستستخدمها دائمًا دون أن تدرك ذلك – لا يمكننا أن نمدحها أكثر من ذلك!
شعار Postman.
شعار Postman.
تحذير – نحن على وشك أن نذكر كلمة “C” المخيفة: التعاون . Postman هي أداة تطوير ويب تساعدك على إنشاء واجهة برمجة تطبيقات (API) كفريق من خلال منصة Postman:
لوحة معلومات ساعي البريد.
لوحة معلومات ساعي البريد.
هناك الكثير من حالات الاستخدام لدمج Postman في سير عملك. على سبيل المثال ، يمكنك استخدامه بطريقة قياسية لتطوير التطبيقات ، والتي ستترجم مباشرة إلى مشاريع قائمة على الويب. يمكنك محاكاة نقاط النهاية باستخدام خوادم وهمية ، والتي ستجذب مطوري وورد بريس بشكل خاص.
يمكنك أيضًا إنشاء الإعداد على متن الطائرة لمساعدة مستخدمي واجهات برمجة التطبيقات الخاصة بك على تعلم الأمور. سترى تلك المشاريع التي يوجد فيها الكثير من دوران المستخدمين أو حركة مرور كبيرة الفائدة هنا.
بالنسبة للتسعير ، يقدم Postman مستوى مجانيًا ، لكنك ستحصل على أقصى قيمة من أحد المستويات المتميزة . ستدفع ما يقرب من 12 إلى 30 دولارًا ، اعتمادًا على دورة الفوترة وعدد المستخدمين.
الكود الذي يتم تشغيله مثالي ، لكن التطبيقات التي تعمل هي الهدف النهائي. تعمل Testing Library كما يوحي اسمها: فهي توفر مجموعة من الأدوات المساعدة لمساعدتك في اختبار مشاريعك وتشجيعك على استخدام ممارسات الترميز الجيدة.
الصفحة الرئيسية لمكتبة الاختبار.
الصفحة الرئيسية لمكتبة الاختبار.
الفكرة هي أن تقوم بإنشاء اختبارات تمثل استخدامك للتطبيق. إذا تم تشغيلهم بدون عوائق ، فمن المحتمل أن يكون تطبيقك كذلك. إنها أداة محايدة فيما يتعلق بإطار العمل ، وهي ليست عداء اختبار. الغرض الأساسي من Testing Library هو مساعدتك في كتابة اختبارات قابلة للصيانة منفصلة عن تفاصيل التنفيذ.
كل شيء داخل أداة مكتبة الاختبارات يتمحور حول مبادئها التوجيهية . على هذا النحو ، فأنت لا تنشئ الاختبارات فحسب – بل تتعلم كيفية جعلها أفضل وأكثر قيمة.
لهذا السبب ، يمكن أن تصبح Testing Library جزءًا كبيرًا من سير عملك. كنا نجادل بأن جميع سلاسل المشاريع تقريبًا يمكن أن تستفيد من Testing Library ، ومن المؤكد تقريبًا أن مستخدمي React سيرغبون في تثبيت هذه الأداة كمعيار.
على الرغم من كون المطورين غير اجتماعيين ، فإن الحقيقة هي أن التكنولوجيا والتعاون يسيران جنبًا إلى جنب.
على هذا النحو ، دعنا نجمع بعض أدوات التعاون الممتازة التي ستدخل مشروعك التالي.
Atlassian هي شركة محبوبة عندما يتعلق الأمر بالبرمجيات. نحن معجبون بعدد قليل من عروض الشركة: Confluence و Trello و Sourcetree و Bitbucket وتركيزنا هنا ، Jira .
الصفحة الرئيسية لـ Jira.
الصفحة الرئيسية لـ Jira.
إنها أداة تطوير للفرق التي تستخدم أطر عمل Agile – Scrum على وجه الخصوص ، لأنها تحظى بشعبية كبيرة. لهذا السبب ، تحصل على ثروة من الميزات في الحزمة. على سبيل المثال ، يمكنك استخدام لوحات كانبان للمساعدة في تنظيم المهام والسباقات. يمكنك أيضًا تنفيذ أسلوب التقدير الخاص بك ، المخصص لمنهجيتك ومشروعك.
يركز Jira على سير عمل قابل للتكرار: التخطيط والتتبع والإصدار والتقرير. إنه أمر أساسي للعديد من أطر عمل Agile ، على الرغم من أنه يمكنك أيضًا إنشاء إطار خاص بك اعتمادًا على التخطيط المسبق للمشروع. إذا كان عليك التمحور بين سباقات السرعة ، فيمكنك تطوير مشروعك وتوسيع نطاقه أو خفضه.
الخبر السار حول Jira هو أن هناك مستوى مجانيًا للبدء ، وأسعارًا معقولة للطبقات الأخرى. ومع ذلك ، ستجد أن فريقًا من عشرة أشخاص سيكون الحد الأدنى من المتطلبات لاستخدام Jira بشكل فعال. يمكن أن يكون مبالغة بالنسبة لأي مجموعة أصغر.
عندما يتعلق الأمر بالأدوات التعاونية ، فمن النادر أن تجد Taskade. إنه يضر التطبيق ، لأنه أداة رائعة للحفاظ على تركيز الفريق وعلى الموضوع.
لوحة القيادة Taskade.
لوحة القيادة Taskade.
إذا كنت مستخدمًا لأدوات تعاون أخرى مثل Asana أو Basecamp (المزيد حولهما لاحقًا) ، فستكون في المنزل هنا. المعلومات التي تحتاجها بشدة ، مثل المهام والتذكيرات ، تتمركز تحت الغطاء. وبالتالي ، يمكنك تقديمها بعدة طرق حسب مشروعك.
أنواع العروض في Taskade.
أنواع العروض في Taskade.
إن نوعي العرض “Mindmap” و “Org Chart” ممتازان ، ويعطيك كل منهما منظورًا مختلفًا للمعلومات التي أضفتها.
خريطة ذهنية في Taskade.
خريطة ذهنية في Taskade.
التطبيق خادع في بساطته. بخلاف الطريقة المرنة لتقديم المهام وإدارتها ، لا يوجد شيء آخر معروض.
يتطلب العمل مع فريقك عددًا قليلاً من الضغطات على الأزرار. على سبيل المثال ، تحتوي كل شاشة على نافذة دردشة قابلة للتوسيع:
نافذة دردشة Taskade.
نافذة دردشة Taskade.
بالنسبة للبعض ، خاصة عند مقارنتها بالحلول الأخرى ، يمكن اعتبار Taskade على أنها عظام مجردة وحتى غير مجهزة. ومع ذلك ، هذا ليس هو الحال. يُعد Taskade طريقة رائعة للتعاون مع فريق ، وبسبب بساطته ، فإنه سينتقل مباشرة إلى أي مشروع تعمل فيه.
الصفحة الرئيسية لأسانا.
الصفحة الرئيسية لأسانا.
أسانا هي واحدة من أكثر الأسماء شهرة في مجال أدوات التعاون. إنه وحش عندما يتعلق الأمر بالاستيلاء على مشروع وتحويله إلى شكل بمساعدة فريق. تعتبر Asana رائعة أيضًا في التكيف مع مهام سير العمل المختلفة. على سبيل المثال ، يمكنك التبديل بين القوائم والتقاويم ، ولكن يمكنك أيضًا الوصول إلى المخططات الزمنية.
أنواع سير عمل Asana.
أنواع سير عمل Asana.
هناك بعض الميزات والوظائف الرائعة القائمة على الفريق أيضًا. يعد إعداد التقارير شاملاً ، وفي الخطط الأعلى ، يمكنك الوصول إلى لوحة معلومات تعرض التحليلات المختلفة المتعلقة بأداء فريقك. حتى أن هناك طريقة لمراقبة أعباء العمل لكل عضو في الفريق. وبالتالي ، يساعدك Asana في الحفاظ على الحد الأدنى من الأزمة ويمنع أعضاء الفريق من الإرهاق.
علاوة على ذلك ، فإن الطبقة المجانية ليست عرضًا توضيحيًا معطلًا للتطبيق كامل الميزات. يمكنك توسيع نطاق Asana أثناء توسيع نطاق فريق ، وهناك وظائف جيدة هنا لمساعدتك. على سبيل المثال ، يمكنك تعيين العمل لأعضاء الفريق وإدارة كل سير عمل. يمكنك أيضًا إرسال رسائل عامة على أساس مساحة العمل إلى الفريق بأكمله.
إرسال رسالة في Asana.
إرسال رسالة في Asana.
إنها طريقة قديمة في إدارة المشاريع التعاونية ، ولكن Asana تقوم بذلك في كل مرة تقريبًا. ستجد أن جزءًا كبيرًا من عملائك وزملائك في الفريق لديهم حساب Asana أيضًا ، مما يعني أن التجميع داخل التطبيق سيحدث في كثير من الأحيان أكثر مما قد تفترض.
Basecamp هو لاعب كبير آخر في إدارة المشاريع القائمة على الفريق. إنه أحد الحراس القدامى ، حيث كان موجودًا تقريبًا طوال فترة وورد بريس نفسها. كان البرنامج الأساسي موجودًا لفترة أطول بكثير ، لذا فهو يتمتع بنسب وسجل حافل يستحق الذكر.
صفحة Basecamp الرئيسية.
صفحة Basecamp الرئيسية.
على الورق ، لا يوجد شيء مثير في Basecamp مقارنة بالمنافسة. بصراحة ، استوعبت العديد من التطبيقات التعاونية ما تقدمه Basecamp. ليست القصة كاملة.
نعم ، يمكنك إنشاء مهام وقوائم مهام ، وتعيينها لأعضاء الفريق ، والعمل مع كل شيء على أساس المشروع بأكمله. ومع ذلك ، فإن ميزات Basecamp القاتلة هي البنية التحتية والتصميم.
هناك طريقة بسيطة لاستخدام Basecamp: قم بإنشاء مشروع ، وقم بتطوير قائمة المهام أو الجدول الزمني الخاص بك ، وقم بتعيين المهام إلى زملائك في الفريق. يحتوي كل مشروع على مجموعة من الجوانب المستقلة التي تساعدك على تجاوز المشروع:
العناصر التي يتكون منها مشروع Basecamp.
العناصر التي يتكون منها مشروع Basecamp.
كما قلنا ، لا يوجد شيء جديد هنا ، ولكن هذا هو الهدف. Basecamp هو نظام إدارة مشروع يمكن الاعتماد عليه بدون العديد من الأجراس والصفارات. على هذا النحو ، ستستمر في العودة إليها لأنها موثوقة وقابلة للتمديد بناءً على احتياجاتك.
يمثل العمل على المهام الصغيرة ضمن مشروع تطوير الويب مشكلة. إنها ضرورية لتجعلك أكثر كفاءة وإنتاجية. عليك أن تهدر الوقت والطاقة لتجاوز هذه المهام الصغيرة على الجانب الآخر.
للمساعدة ، ستحتاج إلى عداء مهام. وهنا عدد قليل من المفضلة لدينا.
الصفحة الرئيسية لـ Grunt.
الصفحة الرئيسية لـ Grunt.
Grunt هو عداء مهام خاص بـ JavaScript يسعى إلى أتمتة بعض المهام العادية والمتكررة التي ستواجهها يوميًا. النظر في المهام التي قد يأخذون في اعتبارهم العاديين: linting، تصغير الحجم ، وتجميع، وغيرها الكثير.
يتعامل Grunt مع هذه الأمور نيابةً عنك من خلال ملف تكوين يستند إلى JSON (يُسمى “Gruntfile”). هذا مثال:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};إذا وجدت غالبًا أن مشاريعك تضيع الوقت من خلال المهام الروتينية ، فمن المحتمل أن يصبح Grunt جزءًا من صندوق أدوات تطوير الويب الخاص بك كما هو الحال بالفعل في وورد بريس و Bootstrap والعديد من الآخرين.
شعار Gulp.
شعار Gulp.
عندما تقارن بين العدائين ، غالبًا ما يكون هناك تبادل لإطلاق النار بين Gulp و Grunt. Gulp عبارة عن مجموعة أدوات قائمة على JavaScript لأتمتة سير عملك وزيادة كفاءتك.
ستستخدم ملفات مخصصة و “تدفقات” للعمل على أصولك ورمزك قبل كتابته على القرص. كل مهمة تقوم بإنشائها هي وظيفة “غير متزامنة” ، ويمكنك تعيينها على أنها إما خاصة أو عامة. الاختلاف هو أحد الأذونات: لا يمكن للمستخدم النهائي تشغيل المهام الخاصة وهي مصممة للعمل مع وظائف أخرى.
بالحديث عن ذلك ، يمكنك استخدام الدالتين المتسلسلة () والتوازي () لإنشاء المهام. هذا يعني أنه يمكنك القيام بمهام صغيرة ، وجعلها ترسًا واحدًا في نظام أكثر شمولاً ، ثم تداخلها.
علاوة على ذلك ، يمكنك أيضًا توسيع وظائف Gulp من خلال المكونات الإضافية التي أنشأها المجتمع :
عرض لمكونات Gulp الإضافية.
عرض لمكونات Gulp الإضافية.
قد يكون هذا تعميمًا ، لكن كلا من Gulp و Grunt جيدان في أشياء مختلفة. يعتبر Gulp قويًا عندما يتعلق الأمر بالعمل مع الأصول التي قد تكون جزءًا من مجموعة أكثر شمولاً من التعليمات. لهذا السبب ، سترغب في اختيار عداء المهام المناسب على أساس كل مشروع.
سنخرج هنا ونقول إنه إذا كنت لا تستخدم شكلًا من أشكال الحاوية أو أداة آلة افتراضية ، فسوف يعاني تقدمك كمطور ويب.
بالطبع ، هذا ليس صحيحًا بالضرورة للجميع ، ولكن هناك العديد من الفوائد لاستخدام بيئة تطوير قائمة على الحاويات. فيما يلي بعض الحلول المختارة.
بالنسبة للكثيرين، عامل الميناء هو و بيئة التنمية القائمة على الحاويات في الاختيار. النظام الأساسي مفتوح المصدر لا يتعلق فقط بالحاويات ، ولكن هذا سبب مذكور كثيرًا لاستخدامه.
شعار Docker.
شعار Docker.
في الواجهة الأمامية ، إنها عملية بسيطة: انقر فوق الزر واحصل على بيئة تطوير آلية. بالطبع ، أي شيء يبدو بسيطًا في الأعلى يكون عميقًا في الأسفل. يجمع Docker بين واجهة المستخدم (UI) و CLI و API مع توفير الأمان لوضع النشر السريع بين يديك.
بالنسبة للعديد من المطورين ، سيكون Docker مركزيًا لإنشاء تطبيقات جديدة. مطورو الويب – مطورو وورد بريس على وجه الخصوص – لديهم مجموعة مختارة من الأدوات للوظيفة. تعد Local by Flywheel و DevKinsta منصات رائدة.
يتم تشغيل تطبيق DevKinsta بواسطة Docker.
يقوم Docker بتشغيل تطبيق DevKinsta.
ملاحظة: لقد أطلقنا مؤخرًا DevKinsta – أداة تطوير محلية لمساعدتك في إنشاء مواقع وورد بريس جديدة. يمكنك أيضًا نشر المواقع على حساب Kinsta الخاص بك بنقرة واحدة.
يتكامل Docker أيضًا مع العديد من الأدوات – وسيكون العديد منها في سير عملك بالفعل. يمكن لتطبيقات مثل GitHub و VS Code والمزيد الاتصال بـ Docker وتقديم تكامل سلس.
بشكل عام ، يمكن أن يتناول Docker سلسلة كاملة من المقالات حول ما يحتويه. على الرغم من هذا ، قد لا يكون أي من ذلك ضروريًا. من المحتمل أنك تستخدم Docker يوميًا ، وأنت تعرف بالفعل كم هو رائع!
بعبارات بسيطة ، LXD هو مدير حاويات لتوزيعات Linux. إنه قائم على الصور ويأتي مع العديد من الصور المعدة مسبقًا لنظام التشغيل Linux. يمنحك استخدام LXD راحة البال التي ستقوم بتطويرها على نفس نظام التشغيل الافتراضي للمستخدم النهائي.
موقع LXD.
شعار LXD.
تم تأسيسه من قبل مطوري Ubuntu Canonical ، وبالطبع يحتفظ بهيكل مفتوح المصدر. يمكنك إنشاء بيئات آمنة باستخدام حاويات غير مميزة ، والتحكم في استخدام الموارد باستخدام العديد من الموارد ، وحتى إدارة الشبكات.
تعد LXD أيضًا قابلة للتطوير ، مما يعني أنه يمكنك تشغيل الآلاف من عقد الحوسبة أو الحفاظ على بساطة الأشياء. بالنسبة للتطبيقات المستندة إلى السحابة ، يتكامل LXD مع OpenNebula – يحتوي الأخير على برامج تشغيل رسمية لإدارة مثيلات LXD.
بشكل افتراضي ، تستخدم العديد من أدوات الحاوية Ubuntu كبيئة افتراضية قياسية. ومع ذلك ، تم تحسين LXD لتشغيل التوزيعات. إذا لم يكن هذا شيئًا جربته من قبل ، فإنه يستحق الوقت للتشغيل في مساحة عمل تجريبية. يمكنك أن تجد أنه يناسب تدفقات عمل محددة أو مشاريع العميل أفضل من المنافسة.
الأصول (أو الوسائط ، أو أيًا كان الاسم المفضل لديك) متوفرة بكثرة عبر الويب. هناك ثقافات كاملة على الإنترنت مخصصة وتستند إلى الصور. على هذا النحو ، فإن جعل مشاريع تطوير الويب تعمل بشكل جيد على الرغم من عدد الصور المستخدمة أمر بالغ الأهمية.
فيما يلي بعض أدوات تحسين الصور الأكثر شيوعًا والممتازة المتاحة.
موقع ويب ShortPixel.
موقع ويب ShortPixel.
تتوفر العديد من تطبيقات تحسين الصور ، ولكن لدى ShortPixel خوارزمية قوية بشكل شخصي. إنه قادر على تحطيم أحجام ملفات الصور دون التأثير على الجودة. إذا كنا من الصعب إرضاءنا ، فإننا نقترح أنه نظرًا لأن الإعداد الافتراضي هو أعلى ضغط متاح ، فلا يوجد مكان آخر نذهب إليه إذا لم تكن صورتك مضغوطة بدرجة كافية. مع ذلك ، هذا ليس انتقادًا مهمًا.
يحتوي ShortPixel على الكثير من الوظائف تحت الغطاء. هناك ثلاثة مستويات للضغط ، ومحسن PDF رائع ، وحتى ضاغط GIF. هذا الأخير شيء لا تجده في العديد من الأدوات الأخرى ، لذا فهو إضافة مرحب بها إلى خط الإنتاج.
يمكن الوصول إلى الواجهة بالكامل أيضًا: تقوم بسحب الصور وإسقاطها على القائم بالتحميل وتنتظر ShortPixel لتعمل بسحرها. بمجرد معالجة صورك ، يمكنك تنزيلها كمجموعة أو تحديد صور فردية للتنزيل:
تنزيل الصور من ShortPixel.
تنزيل الصور من ShortPixel.
و أدوات ShortPixel API هي قوية جدا. ستجد واجهات برمجة تطبيقات منفصلة لتقليل الصور عبر الإنترنت وغير المتصلة ، ومكتبات عملاء PHP و .NET شاملة ، ومحرك تكيفي قائم على JavaScript ، والمزيد.
نقترح أن ShortPixel هي أداة للمطورين ، لأنها رائعة لربط موقعك على الويب أو تطبيقك. قد نقول أيضًا أنه سيتجاوز إدمان TinyPNG في لحظة ، خاصة إذا كنت تريد استخدامه كجزء من سير عمل أكبر.
حان الوقت لأداة تحسين الصور المفضلة للجميع – TinyPNG . يمكنك أيضًا تجميع TinyJPG في هذا الإدخال ، على الرغم من أن كلتا الأداتين تعملان بنفس تنسيقات الصور.
موقع TinyPNG.
موقع TinyPNG.
ستجد أن TinyPNG لم يتغير كثيرًا على مر السنين. لا تزال أداة سحب وإفلات بسيطة لتحسين صورك. لا توجد أي أجراس أو صفارات ، ولا توجد مجموعة كبيرة من تنسيقات الملفات. ومع ذلك، ما TinyPNG يفعل العرض سهولة الاستخدام العليا وحفنة من التكامل مع أدوات أخرى.
على سبيل المثال ، هناك مكون إضافي لبرنامج Photoshop و- لمزيد من التطبيقات الدقيقة- واجهة برمجة تطبيقات وظيفية للمطورين . حتى مستخدمي Python يمكنهم المشاركة في هذا الفعل ، حيث تدعم واجهة برمجة التطبيقات هذه اللغة أيضًا. كان هناك العديد من المكونات الإضافية التي تم إنشاؤها باستخدام واجهة برمجة التطبيقات للعديد من أدوات الطرف الثالث أيضًا.
لا نقترح أن TinyPNG تحتكر سوق تحسين الصور ، لكنها غالبًا الخيار الأول للعديد من المستخدمين. يستغرق التقاط صورة وإسقاطها في القائم بالتحميل ثوانٍ ، وعندما تحصل على تمثيل مثالي بنسبة 99.9٪ لصورتك ، فمن السهل الوثوق بها.
تحدثنا سابقًا عن اختبار API ورمز الموقع الأساسي ، على الرغم من أن هذا يفتقد إلى أداء موقع الويب الخاص بك. إليك بعض الأدوات التي نحبها والتي يمكن أن تساعدك أيضًا في تحليل أداء مواقعك.
التطبيق المستجيب.
التطبيق المستجيب.
إذا كنت مندهشًا من قبل عدد استعلامات الوسائط التي تحتاجها لأدائها وإتقانها في تطبيقك ، فتحقق من الاستجابة . إنها أداة مفتوحة المصدر للواجهة الأمامية لمساعدتك في تطوير المواقع وفقًا لمنافذ العرض المختلفة للأجهزة التي اخترتها.
عرض الأجهزة المختلفة في الاستجابة.
عرض الأجهزة المختلفة في الاستجابة.
إن الشيء العظيم في هذا هو كيف يمكنك مقارنة التخطيطات جنبًا إلى جنب. يمنحك فرصة قوية لزيادة الاتساق بين الأجهزة. كل جهاز دقيق ، وهناك الكثير للاختيار من بينها ، وهو أمر ممتاز إذا كان موقعك يستهدف أجهزة معينة.
يمكنك أيضا إضافة ملحقات المستعرض مخصصة ل موزيلا فايرفوكس ، مايكروسوفت إيدج ، و جوجل كروم لإرسال الصفحات إلى متصفح مستجيب. من هنا ، يمكنك فتح أدوات التطوير المدمجة والبدء في العمل.
المفتش المستجيب.
المفتش المستجيب.
هناك الكثير من الميزات الأخرى ، مثل وظيفة لقطة الشاشة ودعم التحميل الفوري والمزيد لمساعدتك على التطوير. من الصعب الجدال مع الشعار القائل بأن Respively هو “متصفح مطور الويب”. قد ينتهي بك الأمر إلى أن يكون مكونًا أساسيًا في سير عملك.
بالنسبة للكثيرين ، تعد PageSpeed Insights من Google أداة قيمة لاكتشاف كيفية أداء موقع الويب وأين يمكنك تحسين سرعة التحميل.
رؤى PageSpeed من Google.
رؤى PageSpeed من Google.
ومع ذلك ، فإن بعض البرامج الموجودة تحت الغطاء أكثر إثارة للاهتمام للنظر فيها بعمق. يمكن أن يكون أيضًا أكثر ملاءمة لاحتياجاتك. يمكن تشغيل Google Lighthouse على أي صفحة ويب ، ويوفر عمليات تدقيق وتقارير لأداء الصفحة ، وتحسين محركات البحث ، وتطبيقات الويب التقدمية (PWA) ، وما إلى ذلك.
الطرق الأساسية لتشغيل Google Lighthouse هي من سطر الأوامر ، باستخدام DevTools من Chrome ، أو كوحدة نمطية للعقدة. إذا كنت تستخدم واجهة PageSpeed Insights ، فإن Lighthouse تولد بعض النتائج وتقدم مزيدًا من الأفكار لموفري الخدمة.
من الجدير بالذكر أنه على السطح ، تظهر Google Lighthouse و PageSpeed Insights متشابهة. لكن PageSpeed Insights تستخدم بيانات معملية مدمجة مع بيانات مستخدم في العالم الحقيقي. يتجاهل تحليل Lighthouse’suse بيانات المستخدم ويقيس المزيد من عناصر موقع الويب الخاص بك.
في رأينا ، من المفيد تشغيل كل من PageSpeed Insights و Lighthouse ، خاصةً إذا كان هدف عميلك هو الوصول إلى أعلى صفحات نتائج محرك البحث (SERPs). على أي حال ، إنها أداة قوية في متناول اليد ، ويمكن حتى أن تحل محل PageSpeed Insights كأداة الأداء التي تختارها.
يعد الاختبار الشامل أمرًا لا يمثل تجربة ممتعة للعديد من المطورين. اختارت Cypress هذا التل لتموت عليه – إنه حل لا يدعو للقلق يغير اتجاه الاختبار الشامل وينتج شيئًا ممتازًا.
الصفحة الرئيسية Cypress.
الصفحة الرئيسية Cypress.
في حين أن معظم أدوات الاختبار الشاملة تعتمد على السيلينيوم ، فإن Cypress تسير في اتجاه مختلف. هذا يعني أن المشكلات التي يجدها المستخدمون مع المختبرين المعتمدين على السيلينيوم غير موجودة هنا. في الواقع ، يريد المطورون جعل إعداد الاختبارات وكتابتها وتشغيلها أمرًا في غاية السهولة.
للقيام بذلك ، قاموا ببناء البنية من الصفر وركزوا على الاختبار الشامل لاستبعاد النماذج الأخرى. للمساعدة في الأداء ، يعمل Cypress في نفس حلقة التشغيل كبرنامجك ، بدلاً من تنفيذ الأوامر عن بُعد عبر الشبكة.
نظرًا لأن كود الاختبار يعمل في المتصفح ، فلا توجد روابط للسائق أو اللغة يجب وضعها في الاعتبار. ومع ذلك ، يمكنك التحويل إلى JavaScript قبل إجراء الاختبارات.
إذا كنت مهندسًا في ضمان الجودة (QA) أو مطورًا يريد أن يكون للاختبار الشامل الخاص بك وصولاً أصليًا إلى عملك ، فيجب على Cypress جذب انتباهك. أفضل جزء هو أن هناك فئة مجانية كاملة الميزات أيضًا!
للحظة واحدة ، اسمح لنا بتوسيع حدود ما يعتبر أداة تطوير الويب. Stack Overflow معروف لأي شخص لديه حتى معرفة عابرة بتطوير الويب:
موقع Stack Overflow.
موقع Stack Overflow.
إنه موقع أسئلة وأجوبة يركز على البرمجة ، وهو جزء من شبكة Stack Exchange التي تغطي جميع أنواع الموضوعات الأخرى:
أحد المواقع المتخصصة العديدة في شبكة Stack Exchange.
أحد المواقع المتخصصة العديدة في شبكة Stack Exchange.
يُعرف بأنه مورد go-to لآلاف المطورين ، وعلى الرغم من بعض الجدل حول مجتمعه ، لا تزال حركة المرور كبيرة. نجرؤ على القول إن Stack ، إلى جانب محرك البحث الذي تختاره ، يمثل أداة تطوير ويب مرنة لتعلم مهاراتك وتحسينها.
على سبيل المثال ، من المحتمل أن تتوجه إلى Stack Overflow عند مواجهة عقبة تطوير تتعلق بالكود. وبالمثل ، عندما ينبثق خطأ أنك غير متأكد من كيفية حله ، فإن لصقه في محرك بحث هو أسرع طريقة للعثور على الإجابة التي تحتاجها.
بالنظر إلى أن 90 ٪ من المستخدمين الذين شملهم الاستطلاع يذهبون إلى Stack Overflow لحل المشكلات ، فمن المحتمل أن يستخدم الجميع الأداة. ومع ذلك ، بالنسبة للمبتدئين – أو حتى إذا لم تتمكن من التعبير عن مشكلتك – يمكن القول إن محركات البحث ستكون أكثر ودية قليلاً.
إذا كنت مطورًا مشتركًا في روح “RTFM” ، فلن تحتاج إلى أي إقناع بشأن الإدخالات القليلة التالية. في المقابل ، إذا كنت ترغب في الخوض في مشكلة واكتشافها ، فاعلم أنه كان هناك عدد لا يحصى من المطورين قبل أن تجد إجابة.
بالنظر إلى ذلك ، انظر إلى أدوات تطوير الويب القليلة التالية ، وكلها تستند إلى مواد مرجعية على شبكة الإنترنت.
بالعودة إلى الأيام الأولى للشبكة ، كان هناك موقع يسمى Webmonkey تديره Lycos ويهدف إلى تعليم تطوير الويب والبرمجة للمستخدمين الجدد. تعيش روح هذا الموقع في مستندات الويب MDN من Mozilla . تم إغلاق Webmoney في عام 2004 ، ووصل MDN Web Docs في عام 2005 ، لذلك هناك توافق طبيعي بين الاثنين.
الصفحة الرئيسية لـ MDN Web Docs.
الصفحة الرئيسية لـ MDN Web Docs.
إنها مجموعة من الموارد للمساعدة في تعليمك البرمجة للويب في بعض الحالات ، والمنتجات الخاصة بـ Mozilla في حالات أخرى. ينقسم المحتوى إلى فئتين رئيسيتين: التقنيات والأدلة المرجعية. لقد عرضت العديد من البرامج التعليمية بناءً على قدرتك وخبرتك الحالية ، ودليل مرجعي مخصص ، وبعض الموارد الإضافية للأول.
ترتبط جميع الأدلة بمنافذ وصناعات محددة في صناعة التطوير. على سبيل المثال ، يعمل مرجع تطوير الويب كصفحة “حجر الزاوية” لأدلة HTML و CSS و JavaScript إضافية.
MDN Web Docs JavaScript page.
MDN Web Docs JavaScript page.
هناك أيضًا نظرة واسعة على مختلف الصناعات ، مثل تطوير الألعاب وما يلزم للبدء في هذا المجال:
دليل MDN لتطوير اللعبة.
دليل MDN Web Doc حول تطوير اللعبة.
تعد MDN Web Docs قراءة أساسية لمطور ويب مبتدئ ، كما أنها تقدم أكثر من قيمة كافية للخبير. إذا كان هناك أي موقع يستحق إشارة مرجعية في المتصفح ، فهذه هي!
في الماضي ، كنت تقوم بحفظ جميع الكتيبات الخاصة بالمنتجات التي تشتريها في درج أو خزانة مليئة بالغبار. نظرًا لأن الحياة أصبحت أكثر رقمية ، فقد أفسحت هذه الكتيبات الورقية الطريق لتنزيلات PDF من موقع الويب الخاص بكل جهة تصنيع.
من خلال هذا ، لدينا الآن مواقع الويب التي تجمع الإصدارات الرقمية من الأدلة في مكتبات منظمة. يتيح لك العثور على ما تحتاجه من مستودع واحد. على هذا النحو ، من المنطقي أن يكون المرء موجودًا لموضوعات تطوير الويب أيضًا.
باختصار ، DevDocs عبارة عن مكتبة وثائق لواجهات برمجة التطبيقات ، وهو شيء نعتقد أنه سيكون ذا قيمة لجميع المطورين تقريبًا:
الصفحة الرئيسية لـ DevDocs.
الصفحة الرئيسية لـ DevDocs.
قبل أن تبحث في المكتبة ، ستحتاج إلى تمكين وثائق API المطلوبة. يمكنك القيام بذلك من شاشة التفضيلات :
شاشة تفضيلات DevDocs.
شاشة تفضيلات DevDocs.
بمجرد الانتهاء ، ستتمكن من الوصول إلى الوثائق ذات الصلة من قائمة شجرة مخصصة:
شاشة وورد بريس API.
شاشة وورد بريس API.
إنه حل بسيط لمشكلة غير فعالة من حيث أن لديك مراجع متعددة لواجهة برمجة التطبيقات في مكان واحد. DevDocs هو موقع آخر يستحق إشارة مرجعية ، ومن المؤسف أنه لا يوجد تطبيق سطح مكتب متاح للرجوع إليه بشكل أسرع.
كريس كويير هو اسم يعرفه الكثير من مطوري الويب. نراهن أنك على دراية بموقع الويب الذي أسسه – CSS-Tricks . كما يوحي الاسم ، إنه موقع ويب مخصص لتشفير الواجهة الأمامية ، وتحديداً CSS ، وكيفية التحسين.
الصفحة الرئيسية لـ CSS-Tricks.
الصفحة الرئيسية لـ CSS-Tricks.
كما تلاحظ صفحة About ، في السنوات القليلة الأولى ، كان CSS هو الموضوع السائد. منذ ذلك الحين ، على الرغم من ذلك ، أصبحت HTML و JavaScript و وورد بريس والمزيد على نفس القدر من الأهمية ومناقشتها بشكل متكرر. والنتيجة هي موقع يركز على تطوير الواجهة الأمامية ، مع مجموعة كبيرة من المقالات ومقاطع الفيديو والأدلة لإلهامك.
قائمة المدونات لـ CSS-Tricks.
قائمة المدونات لـ CSS-Tricks.
أحد العناصر البسيطة والقيمة هو CSS Almanac ، الذي يحدد المحددات والخصائص داخل CSS. إنه مصدر مرجعي رائع إذا كنت بحاجة إلى التعرف بسرعة على جوانب معينة من اللغة.
تقويم CSS-Tricks.
تقويم CSS-Tricks.
على الرغم من وجود جوانب تشبه المرجع في CSS-Tricks ، إلا أنها ليست موردًا مرجعيًا في حد ذاته . ومع ذلك ، يجب أن تكون مطاردة منتظمة بالنسبة لك ، سواء كان ذلك من خلال موجز RSS أو حل آخر. المحتوى ذو جودة عالية ويمكن أن يتحدىك بطرق لم تفكر بها من قبل. على الأقل ، اشترك في النشرة الإخبارية وانتظر حتى تصل CSS-Tricks إلى بريدك الوارد.
تخيل أنك تستطيع أن تأخذ الأجزاء الممتازة من وسائل التواصل الاجتماعي ، وتطوير الويب ، و Stack Overflow ، ثم إنشاء موقع واحد يدمجها. و الجماعة DEV قد يكون نتيجة.
الصفحة الرئيسية لمجتمع DEV.
الصفحة الرئيسية لمجتمع DEV.
إنها منصة تدوين ، ولكنها أيضًا طريقة للعثور على إجابات لأسئلة التطوير. يمكنك تحديد العلامات والأشخاص الذين يجب متابعتهم ، ويصبح ملف الأخبار الخاص بك مخططًا زمنيًا آليًا ومنظمًا للمشاركات والأفكار:
الجدول الزمني لمجتمع DEV لعلامة JavaScript.
الجدول الزمني لمجتمع DEV لعلامة JavaScript.
إنها نقطة عادلة للإشارة إلى أن هذه معلومات يمكنك العثور عليها في كل مكان – إذا كنت ترغب في العثور عليها. النقطة الإضافية في مجتمع DEV هي أنه موجود هنا ، وهو عبارة عن تجميع موجه لموضوعات التطوير. فكر في الأمر كمسار لاتفاقية مطور ، بدلاً من الاستماع إلى محادثة ذات صلة في محطة الحافلات.
إنه موقع آخر يعمل بشكل جيد في موجز RSS الخاص بك ، أو كخلاصة في صندوق الوارد الخاص بك. على هذا النحو ، فهو أيضًا مورد “نائم” حيث ستتوجه إلى هنا كثيرًا دون أن تدرك ذلك.
يمكنك أن تجادل بأن جيفز بدأ اتجاه طرح أسئلة على الإنترنت للعثور على المعلومات. تم استبداله سريعًا بخوارزميات بحث مختلفة ، على الرغم من أن البحث القائم على الأسئلة لا يزال طريقة موثوقة للعثور على ما تحتاجه.
هل يمكنني استخدام … هل إجابة مطور الواجهة الأمامية على السؤال ” هل هناك طلب من Jeeves لـ CSS؟ “
هل يمكنني استخدام … الصفحة الرئيسية.
هل يمكنني استخدام … الصفحة الرئيسية.
الفرضية بسيطة: تكتب محدد CSS أو الخاصية في حقل البحث ، وترجع قاعدة البيانات ما إذا كان يمكنك استخدامها لإنشاء مواقع الويب. أنت لست مقيدًا بـ CSS أيضًا. يتم دعم JavaScript و HTML أيضًا:
البحث عن عنصر HTML في Can I use…
البحث عن عنصر HTML في Can I use…
إنها قاعدة بيانات لغة الواجهة الأمامية ، لذا لن تبحث عن عرض نتائج لـ PHP أو Python أو لغات أخرى من جانب الخادم. ومع ذلك ، هل يمكنني استخدام … هي أداة هائلة وقيمة ستساعدك عندما يتعلق الأمر بإمكانية الوصول والتصميم لأجهزة متعددة.
إنه اقتراح بسيط لسحب عنصر معين ومعرفة ما إذا كان متصفحك المستهدف يدعمه في لمحة:
جدول دعم المتصفح في Can I use…
جدول دعم المتصفح في Can I use…
إذا نظرت عن كثب ، يمكنك أيضًا العثور على إحصائيات مثل تاريخ إصدار العنصر ونسبة الاستخدام:
معلومات عن عنصر معين في هل يمكنني استخدام …
معلومات عن عنصر معين في هل يمكنني استخدام …
على العموم ، هل يمكنني استخدام … قد لا يكون الاستخدام المنتظم. ومع ذلك ، في مراحل معينة من المشروع ، سيكون مفتوحًا طوال الوقت تقريبًا. بمجرد معرفة ما ستدعمه المستعرضات المستهدفة ، هل يمكنني استخدام … التبديل مرة أخرى إلى الإشارات المرجعية الخاصة بك وانتظار الوقت المطلوب بعد ذلك. إنها خدمة مفيدة يمكن أن تكون “ناقل مياه” عندما يتعلق الأمر برمز الواجهة الأمامية.
من التخطيط الشبكي إلى التصميم إلى بناء سير العمل التعاوني ، هناك الكثير الذي يدخل في مشروع تطوير ناجح 👨💻 ستساعدك هذه الأدوات في الحفاظ على تبسيط الأمور 😌
انقر للتغريد
الوقت والمال قصيران ، وهناك بعض المنطق لاختيار نفس أدوات تطوير الويب القديمة التي استخدمتها دائمًا. ومع ذلك ، فإن اتخاذ قرار مدروس بشأن احتياجات المشروع سيؤتي ثماره في الوقت والتكاليف والإنتاجية.
في هذا المنشور ، قمنا بتغطية 60 أداة رائعة لتطوير الويب يمكنك استخدامها في عام 2021 لمنحك ولفريقك دفعة قوية. يمكن أن تكون قد فعلت ذلك بالفعل. إذا كانت الاستطلاعات المختلفة صحيحة ، فإن المطورين يتجهون أكثر من أي وقت مضى إلى GitHub و TypeScript ومكدسات خدمات الويب المختلفة وواحد من العديد من أطر عمل JavaScript للحصول على المشاريع عبر الخط.
