أدوات ومواقع مهمة لكل مصمم مواقع انترنت أو مطور ويب يجب أن تضيفها إلى مفضلتك

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

مولدات نصوص وبيانات وقواعد بيانات:

أداة بسيطة لتوليد نصوص عشوائية لأهداف اختبار موقع انترنت - http://www.lipsum.com
لإنشاء أيقونة موقع favicon انترنت من صورة يتم رفعها - http://tools.dynamicdrive.com/favicon
من أروع الأدوات لتوليد كل أنواع البيانات من خلال إدخال الحقول وأنواعها وعدد الحقول ويحوي الكثير من الأنواع ويتم توليد قواعد بيانات أو بنى بيانات مثل xml وغيرها - https://mockaroo.com/
من خلاله ترفع صورة لموقع أو تطبيق فيتم إحاطتها بإطار على شكل هاتف محمول أو جهاز لوحي لتضع هذه الصورة في مكان ما تعرض تطبيقك أو موقعك- https://mockuphone.com
لتوليد صورة شعار Logo لك بكل بساطة - https://www.logaster.com
لتوليد UUID بسهولة- https://www.uuidgenerator.net/
اطبع نص ما واحصل على ترميزه. يستخدم في الحصول على ترميز كلمة سر مثلاً- https://passwordsgenerator.net/sha256-hash-generator/

مصادر الصور:

موقع رائع لتحميل صور مجانية بدقة عالية بأبعاد متنوعة أو اختيارية أو وفقاً للون معين - https://www.pexels.com
مشابه للسابق بتشكيلة أقل لكن يمكن الحصول على رابط مباشر لصور بأبعاد أو فئات محددة لاستخدامها في موقعك أو بشكل مؤقت - https://unsplash.com/
موقع رائع ومشهور لتحميل الصور وملفات التصميم مثل ملفات الفوتوشوب- https://www.freepik.com
يمكن توليد صور بأبعاد معينة لكن صور رمادية مكتوب داخلها الأبعاد- https://source.unsplash.com/
مصدر صور- https://placeholder.com
موقع تحميل أيقونات (يوجد مجاني ويوجد مدفوع) - https://www.iconfinder.com
موقع تحميل أيقونات مسطحة رائع http://flaticon.com/

لتحسين الأكواد:

لتصغير وضغط ملفات جافا سكربت وملفات css التنسيق - http://minifier.org
يحوي الكثير من الأدوات مثل أدوات عرض json بشكل منسق أو لتصغيرها وللتحقق من صحة كتابته وتحويله إلى xml أيضاً وكثير من الأدوات الأخرى مثل تحويل json إلى صف class بلغة جافا وأدوات تحسين الكود للعديد من اللغات وأدوات للألوان والحصول على IP والكثير - https://codebeautify.org
للمقارنة بين كودين أو نصين يمكن استخدامه أحياناً في تفحص ومقارنة الأكواد عند الحاجة - https://www.diffchecker.com

أدوات التحويل:

مترجم بابل يستخدم لترجمة ES6+ & JSX جافا سكربت من إصدارات حديثة لإصدارات قديمة ويمكن الاستفادة منه مع react لتحويل كود html إلى كود جافا سكربت بطريقة React بسهولة- https://babeljs.io/repl
لتحويل Sass إلى CSS العادية- https://www.sassmeister.com/
لتحويل Less إلى CSS العادية- http://www.webtoolkitonline.com
محرر Markdown لكتابة كود بها- https://stackedit.io
محرر Jade الذي هو محرك قوالب - http://www.html2jade.org/

ضغط الصور:

قوي وسريع لضغط كل أنواع الصور مع معاينة بطريقة جميلة للفرق - https://compressor.io/compress
لضغط JPG لحجم أقل - http://jpeg-optimizer.com/
مخطط لضغط صور من نوع PNG فقط- https://tinypng.com/

لفحص والتحقق من صحة HTML , CSS:

الأشهر من نوعه ويعرفه كل مطور وهو خاص للتحقق من الكود الخاص بموقعك ثم يظهر الأخطاء والتحذيرات- https://validator.w3.org
للتحقق من أكواد Validate CSS في موقعك- https://jigsaw.w3.org/css-validator
التحقق من توافق المتصفحات مثلاً عند كتابة grid css أو service workers نجد المتصفحات المتوافقة - https://caniuse.com/
للتحقق من جافا سكربت ES6 أو ECMAScript وبقية الإصدارات- https://kangax.github.io/compat-table/es6/

كتابة الكود (محررات IDE) داخل متصفح:

المحرر القوي الشهير والمعروف لكتابة شيفرات الويب ويدعم مكتبات ومنصات مثلاً React, typescript, bootstrap, ...و الكثير - https://codepen.io
قوي جداً وقديم - https://jsfiddle.net
محرر جديد وجيد- http://liveweave.com
محرر رائع لكتابة لغات من طرف السيرفر Server Side مثل python , node.js وغيرهم- https://repl.it

أدوات SNIPPET (مشاركة أكواد لإعادة استخدامها):

جيت هاب الشهير لكتابة الأكواد البرمجية ومشاركتها مع الآخرين ومع فريق العمل- https://gist.github.com
مثل سابقه- https://pastebin.com

التصميم والألوان:

لنشاء أنظمة لونية ومجموعات لونية لتطبيقك- https://color.hailpixel.com
يمكنك وضع رابط موقع ويتم عرض الألوان المستخدمة وقيمها كنتيجة- http://stylifyme.com
لإنشاء تدرجات لونية واستخدامها كـ css في موقعك- https://uigradients.com
لإنشاء أزرار واستخدامها في موقع- http://css3buttongenerator.com
للبحث عن رموز في html مثل رمز حقوق الاستخدام- http://entity-lookup.leftlogic.com/

تجاوب الموقع:

لاختبار تجاوب تصمميم موقعك مع الأجهزة اللوحية والموبايل- http://www.responsinator.com
لمعرفة أبعاد متصفحك- https://www.webpagefx.com/tools/whats-my-browser-size/

مخططات العمل:

لإنشاء مخططات رسومية لعملك- https://app.moqups.com
برنامج بسيط لإنشاء مخططات بسيطة- https://wireframe.cc

اختبار سرعة موقع ما:

لاختبار السرعة والأداء- https://tools.keycdn.com/speed
أداة شهيرة وقوية لاختبار أداء موقعك وساعات العمل والتوقف والأحجام الكبيرة والكثير من الميزات- https://tools.pingdom.com/

غير ذلك:

مصادر API عامة يمكنك استخدامها ومفيدين أثناء عمل تطبيقات ويب- https://github.com/toddmotto/public-apis?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

للاطلاع على توضيح بالفيديو لما تم ذكره يمكنكم مشاهدة هذا الفيديو