🐵 👩🏿‍🚀 🧑🏿 5 أدوات إنتاجية مجانية لمطوري الويب 👩‍🌾 🤹🏽 🤴

يقول كاتب المقال ، الذي ننشر ترجمته اليوم ، أن إحدى الطرق لتنظيم عمل المطور بشكل عقلاني هي استخدام الأدوات التي تسمح لك بتحقيق المزيد بجهد أقل. هنا يريد أن يتحدث عن 5 أدوات رائعة تسمح لأي مطور بزيادة إنتاجيته. إليك مقطع فيديو يقدم نظرة عامة على هذه الأدوات.

ملاحظات أولية

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

1. Excalidraw

Excalidraw

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

2. انتقال أيقونة Nucleo

Nucleo Icon Transition

الآن دعنا ننتقل إلى أشياء أكثر عملية ونتحدث عن أداة صغيرة تسمح لك بإنشاء انتقالات بين رمزي SVG. هذا مشروع Nucleo Icon Transition . هنا يمكنك تكوين تأثير الانتقال (المقياس أو التدوير) ، حدد نوع الحدث الذي يؤدي إلى الانتقال (النقر أو التمرير). تقوم هذه الأداة بإنشاء ملف SVG واحد يحتوي على أوصاف لكل من الرموز وكود JavaScript المسؤول عن النقل. جوهر هذه الأداة هو أنها تجهز الرموز بالفئات التي يعمل بها البرنامج النصي.

لإضافة رمز متحرك إلى مشروعك ، ما عليك سوى تحميل ملف SVG الناتج وإضافة محتوياته إلى رمز HTML الخاص بك. إليك ما قد تبدو عليه محتويات هذا الملف.

محتويات ملف SVG الذي تم إنشاؤه تلقائيًا

إليك ما حصلت عليه.

رمز متحرك تم إنشاؤه تلقائيًا

إذا كنت تخطط لاستخدام تأثير الانتقال للعديد من الرموز ، فيمكنك تحسين الشفرة باستخدام برنامج نصي ، حيث يتم استخدام نفس البرنامج النصي في كل مكان.

3. اكتب مقياس

Type Scale

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

4. أبحاث التجوال

بحث التجوال

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

5. الأشكال السعيدة

Happy Hues

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

ملخص

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

نذكرك بأننا نواصل مسابقة التنبؤ التي يمكنك من خلالها الفوز بجهاز iPhone جديد تمامًا. لا يزال هناك وقت لاقتحامها ، وإجراء توقعات أكثر دقة حول القيم الموضعية.

5 أدوات إنتاجية مجانية لمطوري الويب