هل تحتاج إلى بعض الإلهام في تصميم المواقع؟ أو ربما تحتاج لمساعدة في كيفية بدء مدونة؟ مع استمرار زيادة تعقيد عمليات إنشاء موقع على الإنترنت، فإنه لحسن الحظ، تزيد أيضاً نوعية وعدد الأدوات التي ينتجها مجتمع الويب لمساعدتك.

في الأسطر القليلة القادمة، سوف تجد بعض المصادر التي تُنتج ممتلكات خالية من حقوق التأليف والنشر وفريدة من نوعها بالنسبة لك، والتي تحل مشكلة العثور على الموسيقى والصور والتعامل مع الحقوق المرتبطة بها. * قم بالضغط على صورة الاداة للمزيد من المعلومات.


1. CSSFilters


تقوم بتوليد فلاتر الصور عن طريق سحب شريط التمرير. هذه الأداة تحصل على هدايا من CSSGram عن طريق Una Kravets، والتي تعتبر مكتبة لإعادة إنشاء فلاتر انستجرام باستخدام فلاتر CSS ومزج الأنماط.







2. Social Colors


إن زيارة مواقع التواصل الاجتماعي واحد تلو الآخر، واستخدام منتقي الألوان للحصول على ألوان العلامة التجارية الخاصة بهم هي وسيلة مربكة وأيضاً تُشكل خطر إلهاء كبير. ولتسريع هذه المهمة، وحمايتك من الوقوع في اي خطأ، قامت Material UI بإضافة قسم Social Colors لموقعهم. وهنا يمكنك سحب قيمة اللون ودرجته لكل المواقع الكبيرة بضغطة واحدة.








3. Feature.js


هي أداة متصفح صغيرة للكشف عن المكتبات، يبلغ حجمها 1KB فقط. ولا تقوم بعمل أي إختبارات حتى تطلب منها ذلك، وبالتالي فهي سريعة ومفيدة لبناء مواقع مُحسنة تدريجياً. وقد شمل المؤلف بعض الملاحظات التفصيلية للبدء باستخدام الأداة، ويمكنك أن ترى أي ميزة تعمل في متصفحك فقط بتحميل الموقع.







4. Loud links


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







5. Flexbox Playground


احصل على مجموعة من خصائص Flexbox عن طريق تجربة هذه الخلفيات من قبل Gabi Siquès.






6. The Performance Budget builder


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








7. Unique Gradient Generator


هذه الأداة تستخدم نهجاً غير عادياً لإنشاء صور خلفيات بنمط bokeh-style. حيث يتم تحجيم عينة صغيرة من مصدر الصورة لملء نافذة المتصفح، وتقوم وظيفة تجانس صورة المتصفح بإنشاء التأثيرات المتدرجة. استخدم مفاتيح الأسهم للتحرك في جميع أنحاء مصدر الصورة والعثور على بقع من الألوان مثيرة للاهتمام.








8. Jukedeck


تجنب الإزعاج الناتج من التعامل مع حقوق موسيقى الخلفية عن طريق صُنع موسيقى خاصة بك. سوف تجد في هذه الأداة كل الخيارات والأنواع التي تحتاجها، وكل ملف يتم إنتاجه يكون مختلف كلياً عن الآخرين.






9. Scrawl


Scrawl هي أداة لإنشاء فن هندسي تفاعلي تم تطويرها على يد Sam Gentle. كل سطر في الأداة لديه مجموعة معينة من الخصائص التي تُمكنك من إنشاء رسومات هندسية عن طريق اختيار أماكن وضع الخطوط.






10. es6-cheatsheet


حسّن معرفتك ومهاراتك في ES6 عن طريق هذه الأداة السريعة. سوف تجد من خلالها العديد من النصائح والخدعوأفضل الممارسات ومقتطفات الأكواد لمساعدتك في القيام بعملك بطريقة أسرع وأفضل.







ما رأيكم في هذه الأداوت، وأيها المفضل بالنسبة لكم؟ شاركونا ارائكم في خانة التعليقات.