16 ادوات تساعدك في تطوير الويب

16 اداة ويب متطورة يمكنك تجربتها بسهولة.


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

16 ادوات تساعدك في تطوير الويب



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

01. القوائم احصل على بيانات واقعية للعناصر النائبة


احصل على بيانات واقعية للعناصر النائبة
إذا كنت تصمم الصفحات وتعبت من وضع لوريم إيبسوم في كل مكان ، فقد تكون القوائم هي ما تحتاجه تمامًا. تعد القوائم حاليًا في مرحلة تجريبية ، عبارة عن مجموعة من البيانات الواقعية من جميع الأنواع المختلفة ، والتي يمكنك استخدامها لملء النماذج بالأحجام الطبيعية الخاصة بك. هل تريد قائمة بالعناوين البريطانية لاستخدامها على صفحة ، أو بأرقام بطاقات ائتمان مزيفة؟ كلا هذين الأمرين متاحان. تغطي القوائم مجموعة كبيرة من أنواع البيانات المختلفة ، ولكل منها يمكنك تنزيل البيانات بتنسيق JSON ، بالإضافة إلى مساعدة المستخدمين على فهم السياق داخل الصفحة عند تقييم النماذج الأولية. يقوم الفريق الذي يقف وراء القوائم بدعوة المساهمات على GitHub إذا كان لديك أنواع بيانات جديدة تعتقد أنه يجب إضافتها.



قم بإنشاء HTML و CSS عاملين تلقائيًا من تصميمات Sketch الخاصة بك

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

Launchpad هو مكون إضافي Sketch يمكّنك من إنشاء HTML و CSS عاملين تلقائيًا من تصميماتك ، ونشرها كموقع مباشر. إنها طريقة سريعة بشكل لا يصدق لإعداد وتشغيل مواقع الويب الثابتة. بينما لا يتم دعم وظائف JavaScript الديناميكية ، إلا أن لديك القدرة على تضمين نماذج لالتقاط المعلومات من المستخدمين.



يمكنك البدء مجانًا إذا كنت سعيدًا باستخدام مجال Launchpad ، ولكن هناك عرضًا تجاريًا إذا كنت تريد إخفاء المجالات المخصصة وعلامة Launchpad التجارية.

03. ترووكس نهج جديد للتخطيط الشبكي


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



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


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



04. FontMap

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

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

05. اكتب مكونات React باستخدام كود السبب


اكتب مكونات React باستخدام كود السبب
قد لا تكون معتادًا على السبب. إنها لغة جديدة نسبيًا تم تطويرها بواسطة Facebook ، والتي تقدم تجربة تطوير تشبه JavaScript باستخدام OCaml. يمكن تجميع كود السبب إلى JavaScript باستخدام محرك يسمى BuckleScript ، وهو في الأساس مترجم OCaml-to-JavaScript. 

ما يعنيه هذا عمليًا هو أنه يمكنك كتابة كود وظيفي مكتوب بشكل ثابت بلغة مع بناء جملة يجمع بين عناصر كل من OCaml و JavaScript ، ثم تجميعه في Vanilla JavaScript. ربما تكون أقرب مقارنة هي TypeScript ، والتي تقدم بحد ذاتها تجريدًا على JavaScript مع كتابة ثابتة ، وإن كان ذلك باستخدام بنية مختلفة بشكل كبير. يوسع ReasonReact هذا ، مما يسمح لك بكتابة مكونات React باستخدام كود السبب ، ويتم صنعه بواسطة منشئ React. إذا كنت تحب React ، فهذه واحدة يجب إلقاء نظرة عليه.



6. Adobe XD إجابة Adobe على Sketch لتصميم UX


حيث سيطرت ذات مرة على مشهد UX باستخدام Photoshop و Illustrator ، يمكن القول إن Adobe قد فقدت مكانتها أمام Sketch في السنوات الأخيرة. مؤخرًا فقط من الإصدار التجريبي ، Adobe XD هو محاولة الشركة لاستعادة مصممي UX الذين ربما قفزوا.

يوفر XD واجهة مألوفة لمستخدمي منتجات Adobe Creative Cloud الأخرى ، ويقدم نماذج أولية تفاعلية دون الحاجة إلى مكونات إضافية. يقال إن ميزات التعاون - وهي مفتاح للعديد من مصممي UX هذه الأيام - ستأتي في المستقبل.

يبدو أن Adobe XD يتشكل كمنتج جيد جدًا ، ومن المحتمل أيضًا أن يحظى بشعبية خاصة لدى مستخدمي Windows الذين لا يتوفر Sketch لهم. ومع ذلك ، فإنه يأتي بالطبع بسعر ، وقد يتطلب الأمر بعض الإضافات الإضافية لإقناع العديد من المصممين بالتبديل.



7. واجهات برمجة التطبيقات العامة


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

إنه بالطبع عمل قيد التقدم ، لكن صفحة واجهات برمجة التطبيقات العامة هي محاولة لتوحيد وتوثيق قائمة بجميع واجهات برمجة التطبيقات المتاحة للجمهور. إذا كنت تريد أن تحصل واجهة برمجة التطبيقات (API) على تنبؤ بالطقس ، على سبيل المثال ، لديها قائمة بتلك المتاحة ، وقد تختار استخدام MetaWeather ، والتي يمكنك رؤيتها على الفور لا تتطلب مصادقة. للبقاء على قيد الحياة ، تحتاج إلى مساهمة مجتمعية مستمرة لمواكبة توفر واجهة برمجة التطبيقات.



8. صندوق العمل يجعل Workbox من السهل جدًا إنشاء عمال الخدمة

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

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


9. أجمل إعادة صياغة التعليمات البرمجية الخاصة بك


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

الأجمل هي إحدى هذه الأدوات. إنه شديد الرأي ، لذلك يبتعد عن الجهد المبذول للتفكير في دليل الأسلوب الخاص بك وتعريفه لصالح معاييره الخاصة. يمكن دمجها إما مع خط أنابيب البناء أو أكثر برامج تحرير النصوص شيوعًا عبر المكونات الإضافية ، وتتفهم العديد من اللغات التي تريد العمل بها بما في ذلك JavaScript و JSX و TypeScript و Vue و CSS و Less و SCSS.


10. قارن كيف سيبدو موقعك على الشاشات ذات الأحجام المختلفة



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

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

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



11. Draggableاحصل على تفاعلات مبهرة


قام فريق Draggable ، الذي تم إنشاؤه بواسطة الفريق في Shopify ، بعمل ما يوحي به اسمه: إنها مكتبة توفر دعم السحب والإفلات ، وتلخص وظائف معقدة إلى حد ما. وهو يدعم المعالجة السريعة لعناصر DOM لتغيير موضع العناصر ، مما يعني أنه يمكنك تبديل العناصر وفرزها ، وسيعمل بشكل جيد مع الماوس واللمس وفرض أحداث اللمس. كما أنه يدعم جميع المتصفحات الرئيسية. قد تكون حالات الاستخدام العملي الجيد لهذا أشياء مثل التقويمات التفاعلية أو لوحات Kanban. 

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


12. بوتندر بناء روبوتات محادثة عبر الأنظمة الأساسية



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

يُعد Bottender إطار عمل JavaScript لإنشاء روبوتات عبر الأنظمة الأساسية تعمل على Node.js ، ويأتي مع دعم لمنصات المراسلة الشائعة مثل Facebook Messenger و Telegram و Slack. لأغراض الاختبار ، فإنه يجعل من السهل أيضًا تشغيل الروبوت الخاص بك في وحدة التحكم. لا يزال الوقت مبكرًا جدًا بالنسبة لـ Bottender ، ولكن هذا واحد يجب مراقبته لأن هذا النوع من المشاريع يفتح العديد من الفرص لبناء واجهات كان من الممكن أن تكون بعيدة المنال لولا ذلك.



13. سكرولاما

الغوص في التمرير سرد القصص التفاعلية

ربما تكون قد رأيت بعض الأمثلة الرائعة للتمرير في سرد ​​القصص التفاعلية (إذا لم تكن معتادًا على ذلك ، فقم بإلقاء نظرة على The Boat ). إنها طريقة جذابة لسرد قصة عبر الإنترنت ، باستخدام وظائف المتصفح الأصلية. 

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


14. يمكنك إضافة تعليق توضيحي لصفحات الويب مع الملاحظات في هذا المستعرض

من الناحية الإحصائية ، من المحتمل أنك تستخدم Chrome أو Firefox أو Safari أو Edge. تهيمن هذه المتصفحات الأربعة على الويب. ومع ذلك ، فإن البعض الآخر متاح ، واعتمادًا على تفضيلاتك ، فقد يكون الوقت قد حان للتوسع. واحد الذي اكتسب بعض الاهتمام مؤخرًا هو Vivaldi ، والذي تم تصميمه ليكون سريعًا ومضيقًا وقويًا. 

الميزة المثيرة للاهتمام بشكل خاص هي القدرة على إضافة ملاحظات إلى الصفحات. يستخدم Vivaldi محرك عرض Blink ، مثله مثل Chrome و Opera ، والذي يمنح المستخدمين القدرة على تثبيت ملحقات Chrome ، والتي سيعمل الكثير منها. ومع ذلك ، بالنسبة للكثيرين ، فإن الميزة الرائدة هي القدرة على إدارة علامات التبويب في "المكدسات" ، مما يجعل من الأسهل بكثير العمل مع الأعداد الكبيرة من علامات التبويب المفتوحة التي يعمل معها الكثير منا بشكل متكرر.



15. ماب تالكس عرض خرائط ثنائية وثلاثية الأبعاد معًا


عرض خرائط ثنائية وثلاثية الأبعاد معًا
هناك مجموعة كاملة من حالات الاستخدام للخرائط داخل المتصفح ، وبالطبع يظل Google هو الاسم المألوف لرسم الخرائط. ولكن ماذا لو كان بإمكانك اختيار واحد أفضل من خرائط Google؟ يتيح لك Maptalks عرض خرائط ثنائية وثلاثية الأبعاد معًا ، مع الاحتفاظ ببساطة مكتبة رسم الخرائط ثنائية الأبعاد.

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



16. Next.js أو Nuxt.js يمكّنك Nuxt من إنشاء تطبيقات Vue بسرعة


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

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



تعليقات
ليست هناك تعليقات
إرسال تعليق



    وضع القراءة :
    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -