أدوات ومقاربات لتسريع سير عمل مطور الويب

نشرت: 2020-12-17

يجمع تطوير الويب كمية هائلة من الحزم والأدوات ولغات البرمجة والمزيد. ستعمل بعض الأدوات / سير العمل هنا في بعض الحالات ، والبعض الآخر في حالات أخرى. للتعامل مع هذا الأمر بشكل أفضل ، ضع في اعتبارك أن هذا المنشور مكتوب من وجهة نظر مطور WordPress Front-End ، على الرغم من أن الأدوات واسعة جدًا ويمكن استخدامها في كثير من الحالات.

1 - تمكس

كان أحد أكبر التغييرات التي أجريتها في سير العمل الخاص بي عندما قمت بإعداد tmux على جهازي (macOS ولكنه يعمل مع Linux أيضًا بالطبع). على الرغم من أنني قد لا أستخدمه في إمكاناته الحقيقية ، إلا أنه يقوم بعمل رائع ويتيح لي التبديل بين المشاريع على الفور ، مما يوفر الكثير من الوقت.

يحتوي tmux على صفحة "بدء" مطولة مكتوبة على مستودع GitHub للمشروع للتحقق منها. إنه يعمل أيضًا مع لوحة مفاتيح مباشرة من الصندوق مع دعم الماوس الذي يمكن تمكينه. يستخدم tmux ملفات التكوين التي يمكن مشاركتها عبر الأنظمة للإعداد الفوري.

فكيف غيرت سير العمل الخاص بي؟

  • يمنحك tmux طريقة سهلة لتقسيم الشاشات والتنقل داخل المشروع بضغطة مفتاحين فقط. لذلك يمكنك تشغيل "gulp" في عرض واحد ، وأوامر للتشغيل على آخر ، و SSH للخادم في المركز الثالث ، وبعض الإحصائيات في المركز الرابع.
  • يمنحك نوافذ لكل مشروع تشبه "علامات التبويب". هنا يمكنك التبديل إلى مشاريع مختلفة باستخدام ضغطتين على المفاتيح. لدي أكثر من 20 مشروعًا مفتوحًا في علامات تبويب طوال الوقت ، وعندما يتعين علي العمل في مشروع جديد ، أقوم بتبديله هناك ، ويتم تشغيل gulp بالفعل. أنا في الدلائل الصحيحة ويمكنني بدء العمل في أقل من ثانيتين.
  • يحافظ على الإعداد بالكامل قيد التشغيل طوال الوقت. لا يتعين عليك القيام بذلك في كل مرة تبدأ فيها العمل ، فهو موجود دائمًا. إذا تم إيقاف تشغيل جهازك وقمت بتشغيله مرة أخرى ، فيمكنك فقط "إحياء" (باستخدام مكون إضافي بسيط) إلى الإعداد القياسي الخاص بك وفي حوالي 5 ثوانٍ يتم تشغيله مرة أخرى. من المضحك أن الأمر يتطلب استخدام 100٪ على I7-9900K للقيام بذلك بالرغم من ذلك.
  • كل لوحة في النافذة هي مثيلها الخاص. لذلك يمكنك بسهولة تشغيل إصدارات Node مختلفة لكل لوحة.
لقطة شاشة tmux

مصدر

2 - ألفريد (أو بديل)

Alfred هو "تطبيق إنتاجي" لنظام التشغيل Mac مع مكافئات لنظامي التشغيل Windows و Linux أيضًا. بعض الأشياء التي يقوم بها ألفريد هي:

  • يمنحك وصولاً سريعًا إلى البرامج المفتوحة بمجرد كتابة بضعة أحرف
  • انتقل إلى الدلائل بسرعة
  • تصفح حتى تجد ما تريده مباشرة في النافذة المنبثقة
  • فتح الملفات ببرامج مختلفة
  • ابحث في الويب أو البرامج التي تم دمجها وغيرها الكثير.

مع powerpack الخاص به ، هناك العديد من عمليات تكامل "Workflow" الأخرى التي يمكنها أتمتة العمل أيضًا.

الصفحة الرئيسية ألفريد

إنه يعمل أيضًا كوسيلة للوصول السريع إلى الآلة الحاسبة ، ويدير المقتطفات عبر نظام التشغيل (لا حاجة حتى للوصول إليها ، إنه يوسعها تلقائيًا) ، ويحفظ محفوظات الحافظة (المنقذ) ، ويتكامل مع الجهاز وما إلى ذلك. يمكنك العثور على كل ما يتعلق بذلك على موقع التطبيق.

كيف أستخدمه:

  • أولاً بالطبع ، لفتح التطبيقات. أنا لا أنقر بالمؤشر على الأيقونات ، أنا أكتب الحروف فقط وها نحن ذا.
  • استخدمه كآلة حاسبة عند كتابة CSS (يحدث غالبًا مع قيم EM).
  • محفوظات الحافظة - أقوم أحيانًا بتكديس 5-6 أشياء في الحافظة ثم ألصقها في محرر الكود عند الحاجة. أو عد بضعة أيام إلى الوراء للعثور على بعض رسائل البريد الإلكتروني ، وبعض المقتطفات ، وما إلى ذلك أو حتى وظيفة صغيرة تقوم بشيء ما في مشروع ما وتساعد في مشروع آخر. يستغرق تصفح الكود من 2-3 ثوانٍ بدلاً من 10+ دقائق.
  • انتقل إلى أدلة العمل عند القيام بأعمال التصميم أو انتقل مباشرة إلى ملفات XD دون تصفح أداة البحث. يستغرق مرة أخرى 2-3 ثوان مقابل دقيقة أو نحو ذلك في الباحث.
  • المقتطفات - لقد أعددت مقتطفًا لطيفًا من "التعليقات" لـ Asana مع لقطات شاشة للنتائج ، ومكان لإضافة رابط الالتزام ، ورسالة إلى المطورين التاليين ، والحالة إذا كانت قيد التشغيل أم لا وما إلى ذلك. هذه رسالة متسقة عبر جميع التعليقات التي يتابعها الفريق بسهولة. يستغرق الأمر أقل من ثانيتين لكتابة المقتطف وفتحه.

3 - أدوات / ملحقات طرفية

Oh My Zsh - اجعل المحطة مفيدة - ZSH كنز. هناك أكثر من 270 مكونًا إضافيًا للاختيار من بينها. يستخدم ملف تكوين بسيط ، والذي استغرق دقائق فقط للانتقال من الإعداد القديم إلى الإعداد الجديد. tmux يفعل الشيء نفسه ، لذلك كان إعداد dev بالكامل دقائق. مع هذا الكم الهائل من المكونات الإضافية للاختيار من بينها ، ستجد بالتأكيد شيئًا مفيدًا لسير عملك.

أحد المكونات الإضافية الأكثر استخدامًا في ZSH والتي أستخدمها هو "Z" ، الذي يتعلم المسارات التي تستخدمها للوصول إلى الأشياء. سيأخذك بعد ذلك إلى أي مكان تريده باستخدام عدد قليل من الأحرف الرئيسية.

مثال: $z te إلى /folder/path/inner/more/content/testing - اختصار إلى المكان الذي ذهبت إليه سابقًا. يجعل القفز بين الدلائل خالي من الألم.

يا بلدي zsh

exa - إخراج LS أجمل. يمكنك العثور على المزيد على موقعهم على الإنترنت. باختصار ، إنه يوفر إخراجًا سريعًا ولطيفًا للملفات والأدلة أيضًا. مرة أخرى - جميلة.

الصفحة الرئيسية exa

ripgrep - بحث سريع للغاية. عندما تحتاج إلى البحث عن آلاف الملفات التي تحتوي على آلاف الأسطر من التعليمات البرمجية ، فلا يجب أن تنتظر كثيرًا. Ripgrep هنا لإنقاذك. وبالطبع ، يأتي مزودًا بالعديد من الميزات المفيدة الأخرى والأعلام المفيدة للعمل معها. كما أنه يتبع ملفات .gitignore لإبقاء النتائج ذات مغزى.

مصدر

git-open - أداة صغيرة من تصميم Paul Irish على Github تقوم بما تقوله - تفتح مستودع git. ما هي الصفقة الكبيرة التي قد تقولها؟ هل تتذكر عنوان URL الدقيق لهذا المشروع الذي كنت تعمل عليه لأول مرة منذ 6 أشهر؟ كم من الوقت يستغرق الانتقال إليه؟ هذا الأمر سيفتحه لك مباشرة. وأكثر من ذلك - سينقلك أيضًا إلى الفرع الصحيح.

CLI الخاص بك! في حالتي ، يدور عملنا حول WordPress. والتي لحسن الحظ أنها CLI يمكنك من خلالها العمل مع تثبيت WP. يتطلب إعداد موقع جديد بسيط أوامر أساسية مثل mkdir (إنشاء مجلد) و git clone (Clone a repo) وتنزيل wp core و wp db create و wp db import (كل ذلك من WP-CLI). كتابة كل شيء وتكوين سريع وبعد دقيقة واحدة لديك إعداد جديد قيد التشغيل.

تأكد من التحقق جيدًا مما إذا كانت هناك CLIs أخرى مماثلة من شأنها أن تعمل من أجلك مع الأدوات التي تستخدمها!

مصدر

4 - الإضافات رمز VS

اختياري لمحرر الكود / IDE هو VS Code. لقد كان الأمر رائعًا من قبل ، ولكن باستخدام آلة أفضل ، يمكنني الآن استخدام رمز VS بشكل صحيح بدون 3 إطارات في الثانية كنت أحصل عليها من قبل عند التمرير لأسفل في مستند أكبر.

كود VS

بالنسبة إلى القائمة أدناه ، لن أستخدم ملحقات فائقة الشهرة مثل ESLint أو GitLense أو حزم السمات / الأيقونات لأنها مغطاة جيدًا في أي مقال تقريبًا ستجده.

  • علامة الإغلاق التلقائي - حتى لا تضطر إلى كتابة علامات الإغلاق في كل مرة. عديم الفائدة عند عمل HTML نظيف باستخدام Emmet ، ولكنه يساعد عندما يتعين عليك إجراء تعديل سريع
  • علامة إعادة تسمية تلقائية - أيضًا مفيدة جدًا عند إجراء التحرير. سيغير علامات الإغلاق / الفتح مباشرة عندما تقوم بتحرير واحدة منها فقط.
  • المدقق الإملائي للرمز - الآن ليس عليك أن تشعر بالحرج في العلاقات العامة عندما تكتب شيئًا به خطأ إملائي. أو استخدمه فقط لإبقاء الأشياء جميلة وجميلة لمشاريع مفتوحة المصدر.
  • إجراء مكرر - مفيد للغاية في إنشاء ملفات جديدة من الملفات الموجودة. إنه أمر للتشغيل باستخدام Cmd + P. يعمل بشكل رائع مع إنشاء ملفات sass / js جديدة في عمل الواجهة الأمامية.
  • ثاب - أداة رائعة! فقط اضغط على الاختصار الذي تحدده وسيخرج مربعات صغيرة من حرفين بجوار كل كلمة. اكتبها وسيقفز المؤشر إليها. طريقة سريعة للتنقل في ملف دون استخدام الماوس.

ونصيحة احترافية / تذكير - يمكنك معاينة الصور في رمز VS. عندما تقوم بتطوير واجهة مستخدم وتتبع صورة من المصمم الخاص بك ، يمكنك فقط سحبها إلى منفذ العرض وإلقاء نظرة عليها على الجانب.

بالمختصر:

إنها مليئة بالأدوات والأدوات الرائعة الموجودة هناك. عندما تكتشف بعض الأعمال المتكررة التي تقوم بها أو تتساءل "لا ينبغي أن تكون هناك طريقة أسهل للقيام بذلك" ، ما عليك سوى البحث! على الأرجح هناك بالفعل طريقة أسرع. إذا قمت بذلك عدة مرات على مدار العام ، فسوف ينتهي بك الأمر بسير عمل محكم لطيف يسمح لك بإنتاج العمل بوتيرة سريعة جدًا.

إذا أمكن ، ابحث أيضًا عن بعض "الإجراءات الآمنة" - قم بإعداد بعض الفحص ، وأتمتة إعداد البناء الخاص بك ، وإنشاء "قوالب بداية" للعمل معها ، وربما حتى كتابة القليل من CLI لنفسك.