لوحة المتصدرين

لدي تطبيق يعمل على قاعدة بيانات mongo db وأنا أريد شرح لكيفية ضبط وتهئىة قاعدة البيانات هذه.

لماذا استخدم next/image بدل ال <img> العادية الخاصة بhtml ?

المكون next/image مبني فوق الوسم img في HTML ويضيف فوقه مزايا تخص تحسين الأداء تخديم الصور بصيغة Webp التي تدعم القياسات المتعددة ليختار المتصفح منها اصغر القياس المناسب تحسين أحجام الصور تلقائيا (عند الطلب) وبالتالي التوفير في مساحة المستخدمة على الخادم تأخير تحميل الصور في الموقع Lazy Loading مما يجعل تحميل الصفحة أسرع تصيير الصور دون التأثير على العناصر المجاورة أو ما يسمى Cumulative Layout Shift، أي يتم حجز مساحة مسبقة للصورة قبل تحميلها لكي تصير هيكلية الموقع كما تم تصميمها ولا تقفز العناصر عند تحميل الصور

مُكون الصور (Image Component) في next.js له عدد من المميزات مما يجعل له حلٌ لمشاكل الأداء(performance issues) حيث يقوم ذلك المُكون بتقديم عدد من المزايا مثل صيغة الصور: حيث ﻻ يقوم ذلك المُكون بتقديم الصور بصيغ قديمة مثل الjpeg, png وإنما يقوم بضغط الصور وتقديمها بصيغ مثل WebP, AVIF مما يجعل حجم الصور أقل بنسبة تُقدر ب20% إلى 30% تحميل الصور: حيث ﻻ يقوم ذلك المُكون بتحميل الصور فور دخول المُستخدم إلى الصفحة وإنما يقوم بتحميل الصور التي فقط يحتاجها المُستخدم ويقوم بعمل scroll إليها خاصية التحميل المُسبق: حيث يمكنك تحديد صورة ما بخاصية التحميل المسبق وتجعلها تحمل للمستخدم مبكراً قبل تحميل باقي الصفحة بالإضافة لمميزات أخرى يُقدمها هذا المُكون تُسهل من التعامل مع الصُور وتسهل عملية إضافة العديد من الخصائص عبر توفيرها

أحتاج إلى قيمة href افتراضية لـ Next / Link ، كما نفعل في لغة html العادية كما هو موضح أدناه <a href='#' ></a> لقد جربت هذا الارتباط ولكن ينتج خطأ بسبب السمة المطلوبة <Link href='#'></Link>

لدي figure يحوي أكثر من subplots: import matplotlib.pyplot as plt import numpy as np x = np.array([0, 1, 2, 3]) y = np.array([3, 8, 1, 10]) # plot1 plt.subplot(1, 2, 1) plt.plot(x,y) x = np.array([0, 1, 2, 3]) y = np.array([10, 20, 30, 40]) # plot2 plt.subplot(1, 2, 2) plt.plot(x,y) plt.show() كيف يمكنني إضافة عنوان إلى كل من هذه ال subplots؟ جربت fig.suptitle لكنه يضيف عنوان إلى كامل الغراف لكنني أريد إضافة اسم لكل plot..

سويت كل الي مطلوب بس ما يشتغل عندي البرنامج شفت فيديو على اليوتيوب الفيديو قبل سنتين، يمكن عشان الطريقه الي انا سويته قديمه وفي طريقه غير عن الي انا استخدمه

ماهي فهرسة البيانات في قواعد البيانات وبمذا تفيد، وكيف يمكنني عمل فهرس لأحد الحقول في جدول، وكيف أزيد سرعة الاستعلامات

كيف يمكن تحويل الصورة إلى الصيغة الرمادية أو كيف يمكننا التحويل من نظام لوني إلى آخر: BGR ↔ Gray BGR↔HSV

أريد معرفة الفرق في استخدام كل من join و subquery ومتى نستخدم كل منهم

نستخدم JOIN عندما نريد الربط بين جدولين اعتماداً على قيمة أحد الحقول والتي غالبا تكون مفتاح رئيسي في أحد الجدولين ومفتاح ثانوي في الجدول الآخر (مع العلم يمكن الربط بين الجدول ونفسه) نستخدمها عندما يكون لدينا معلومات لكائن ما في الجدول موجودة في جدولين أو أكثر، حيث نضطر لعمل ربط بين جدولين مثلا. جدول الموظفين يحوي معلومات الموظف مع رقم القسم فقط، وجدول الأقسام يحوي على رقم القسم و اسم القسم وموقعه، لذلك هنا علينا الربط بين الجدولين لنعرف اسم القسم وموقعه لكل موظف. ويتم الربط بناءاً على رقم القسم. SELECT * FROM Employees INNER JOIN Departement ON Employees.deptID = Departement.ID; أما Subquery نستخدمها لعمل استعلام جزئي يعيد لنا بعض النتائج، والتي نعتمد عليها في الاستعلام الأساسي حيث يكون من الصعب عمل فلترة من خلال استعلام واحد (أو مثلا نحتاج لعمل فلترة في جدول آخر ثم فلترة أخرى في جدولنا). مثلا نجلب معلومات المنتجات (من جدول المنتجات) التي تم بيعها أكثر من 10 مرات (عدد مرات البيع من جدول الفواتير/الطلبيات) SELECT p.Name FROM Products p WHERE ProductID = ANY (SELECT ProductID FROM Orders WHERE Quantity > 10); أحيانا يمكن عمل نفس الاستعلام عن طريق JOIN أو Subquery ويفضل استخدام JOIN لأنه أسرع في معظم الوقت لأن عملية الربط بين الجداول تكون مفهرسة وتعتمد على المفتاح الرئيسي و الثانوي .. أي عملية تطابق السجلات تكون سريعة مع ملاحظة أن الاستعلام الفرعي يتم تنفيذه أولا ولمرة واحدة (أو أكثر حسب نوع الاستعلام فإن كان هنالك عنصر يتم اختباره من الاستعلام الأب سيتكرر استدعاء الاستعلام الفرعي). والدمج ينتج جدول يحوي جميع الحقول في كلا الجدولين المدموجين حسب حقل الربط.

لدي جدول في قاعدة البيانات فيه حقول تحوي قيم مكررة، كيف أتمكن من حذفهم

يمكنك حذف القيم المكررة في عمود معين في جدول ما بطريقة سهلة من خلال تعديل العمود نفسه وإضافة الخاصية Unique إليه، كالتالي: ALTER IGNORE TABLE table_name ADD UNIQUE INDEX idx_name (column_name); ستقوم التعليمة السابقة بتعديل العمود وتجعله من نوع Unique أي أن القيم فيه يجب ألا تتكرر (وسيظهر خطأ عند محاولة إضافة صف جديد ويحمل قيمة موجودة بالفعل هذا العمود). لاحظ أننا قمنا بإستخدام الكلمة المفتاحية IGNORE والتي تعني تجاهل (حذف) كل الصفوف التي تحتوي على نفس القيمة في هذا العمود. ولإعادة العمود إلى ما كان عليه -أي حذف الخاصية UNIQUE من العمود- يمكنك إن تستخدم تعليمة ALTER مرة أخرى كالتالي: ALTER TABLE table_name DROP INDEX column_name; ربما تواجهة مشكلة بسبب إضافة الخاصية UNIQUE إلى عمود معين في قواعد بيانات MySQL بمحرك InnoDB، ويمكنك أن تتخطى هذه المشكلة من خلال تغير الطريقة المستخدمه في تعديل الجداول نفسها في قاعدة البيانات ثم إرجاعها مرة أخرى، كالتالي: set session old_alter_table=1; ALTER IGNORE TABLE table_name ADD UNIQUE INDEX idx_name (column_name); set session old_alter_table=0;

تفيد الفهرسة في تسريع الوصول للبيانات في الجدول عند البحث (خاصة عند كتابة الشروط) وكما نعلم عندما تكون لدينا بيانات مرتبة، تصبح عملية البحث أسرع حيث أن أغلب خوارزميات البحث تعتمد على بيانات مرتبة. مثلاً خوارزمية البحث الثنائي. الفهرس في قاعدة البيانات هو ملف (أو أكثر) يحوي على قيم عمود ما من الجدول ولكن بطريقة مرتبة، وكل قيمة تحوي ارتباط لموقعها الفعلي في الجدول (مثل مؤشر أو رابط) فعندما نريد تطبيق شرط ما على عمود في الجدول، نبحث ضمن الفهرس (لسرعة البحث) ثم يرشدنا الفهرس لمكان البيانات الفعلية (سطر جدول قاعدة البيانات الفعلي) وهنا نسترجع بيانات كامل السجل. مثلا من الجيد استخدام حقل اللإيميل وعمل فهرسة عليه. SELECT * FROM Employee WHERE email = 'wael@hsoub.com' يمكننا إنشاء فهرس أو أكثر للجدول - حسب الحقول التي نختبرها بالشرط بشكل متكرر - لأن حجم الفهارس يصبح كبير ويمكن ألا يكون له فائدة في تسريع الأداء.. لذلك نختاره بدقة # إنشاء فهرس أو أكثر لجدول ما CREATE INDEX [ name ] ON tbl ( col [, ...]); # إنشاء فهرس لتسريع البحث حسب اسم المقالة CREATE INDEX index_title ON posts (title); القيود على إنشاء الفهارس أن تكون قيمة الهود رقمية أو نصية varchar (لا يقبل text) حتى تكون الفهرسة نافعة وسريعة. للفهرس معامل مهم هو fillfactor (معامل الملئ) وهذا يحدد نسبة حشو ملفات الفهرسة، لأننا نعلم أن البيانات تزيد باستمرار ولضمان ترتيبهم ضمن الفهرس في ملفات، علينا إبقاء مساحة فارغة فيهم لضمان وضع البيانات الجديدة في ترتريب سليم بدون الإضطرار لوضعهم في ملفات أخرى وعمل روابط تنقل بين صفحات الفهارس ومثلا نسبة الحجز للملف نضعهم 75%.. حذف فهرس DROP INDEX [ IF EXISTS ] name [ CASCADE | RESTRICT ] تعديل فهرس ALTER INDEX [ IF EXISTS ] name RENAME TO new_name ALTER INDEX distributors SET (fillfactor = 75); قاعدة مهمّة أخرى عند استخدام الفهارس هي أنه ينبغي الانتباه إلى ربط الجداول (عبر التعليمة join مثلا)؛ إذ يجب أن تُنشَأ فهارس للحقول المستخدمة في الربط، كما يجب أن تشترك هذه الحقول في نوع البيانات. تشبه فهرسة الكتب، الهدف منها تسريع البحث.

سؤالي هو كيفية إنشاء ملف sitemap وإضافته بشكل ديناميكي إلى مشروع nextjs. لقد أنشأت مدونة باستخدام nextjs و mongodb و express js. هذه هي الواجهة الأمامية لهيكل مشروعي (nextjs) --.next -- components -- node_modules -- pages -- public -- config.js -- next.config.js -- package.json -- package-lock.json

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

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

كيفية استخدام العملية bitwise_and في OpenCV؟ وتوضيح فكرة القناع؟

بداية إن لم يكن لديك فكرة عن العمليات على مستوى البت، فأنصحك بالمقالة التالية أكاديمية خسوب. هذا التابع له الشكل التالي bitwise_and: bitwise_and(image1, image2, destination_array, mask) الوسيط الأول يمثل الصورة الأولى والوسيط الثاني يمثل الصورة الثانية أما الوسيط الثالث سيمثل المصفوفة التي سيتم وضع الخرج فيها، والوسيط الرابع يمثل القناع. ولهذا التابع فوائد واستخدامات كثيرة جداً على سبيل المثال سأقوم من خلال الكود التالي بتطبيق لوغو (شعار) على صورة. لكن قبل ذلك سنوضح الوسطاء بشكل أكبر: أولاً: الصورتين image1 و image2 كل منهما يتم تمثيله كمصفوفة ثلاثية الأبعاد من الشكل (height,width,channels) والصورتان يجب أن يكون لهما نفس الأبعاد بالضبط. حيث سيتم تنفيذ عملية bitwise_and بين بكسلات الصورة الأولى والثانية (سيتم دمج الصورتين). ثانياً: القناع mask يمكن أن تضعه ويمكن أن لاتضعه حسب المهمة التي تعمل عليها، وهذا القناع يكون من بعدين فقط أي (height,width) فقط (بدون قنوات) وأيضاً يجب أن يكون حجمه مطابق لحجم الصورتين. وتكون قيمه ضمن المجال 0 ل 255. هذا القناع يستخدم لتحديد الأماكن التي سيتم تطبيق عملية bitwise_and عليها والأماكن (البكسلات) التي لن يتم تطبيق عملية bitwise_and عليها بحيث مثلاً من أجل البكسل (x,y) من الصورتين image1 و image2 يتم النظر إلى القيمة الموجودة في ال mask فإذا كانت 0 لايتم تطبيق عملية bitwise_and وإلا فسيتم تطبيق عملية bitwise_and بين البكسلين. الآن سأقوم بكتابة الكود السابق لتفهم بدقة: import cv2 import numpy as np # قراءة الصورتين img1 = cv2.imread(r'C:\Users\Windows.10\Desktop\Safedrive\me.jpg') # الصورة img2 = cv2.imread(r'C:\Users\Windows.10\Desktop\Safedrive\car.webp') # اللوغو # نريد وضع اللوغو في الزاوية العليا اليسارية من الصورة img2=cv2.resize(img2,(180,140)) # سنقوم بتحديد حجم اللوغو بالشكل الذي يناسبنا # نقوم الآن بتحديد أبعاد اللوغو rows,cols,channels = img2.shape # نقوم باقتصاص الزاويا العليا اليسارية من اللوغو بحيث يكون الحجم مطابق لحجم اللوغو roi = img1[0:rows, 0:cols ] #هي المنطقة التي نريد وضع اللوغو فيها roi إذاً # نقوم الآن باستخلاص نسخة من الصورة تكون رمادية img2gray = cv2.cvtColor(img2,cv2.COLOR_BGR2GRAY) # img2gray ستمثل النسخة الرمادية من الصورة # النسخة الرمادية: # نقوم الآن بتعتيب الصورة بحيث نحصل على صورة أبيض وأسود # البكسلات التي تكون قيمتها أكبر من 60 ستصبح 255 أي بيضاء # البكسلات الأقل ستصبح 0 أي سوداء _, mask = cv2.threshold(img2gray, 60, 255, cv2.THRESH_BINARY) # mask ستمثل نسخة الأبيض والأسود من الصورة # mask وهذا هو شكل صورة ال : # نقوم بعكس القيم # نعلم أن 255 تكافئ 1111 1111 في النظام الثنائي # ونعلم أن 0 تكافئ 0000 0000 في النظام الثنائي كوننا نمثل البكسل ب8 بت # ستؤدي إلى جعل ال 0 تساوي 255 والعكس bitwise_not وبالتالي تنفيذ عملية # أي الأبيض أسود والأسود أبيض mask_inv = cv2.bitwise_not(mask) # mask_inv سيجعل الخلفية بيضاء أي 255 والشعار 0 أي أسود # mask_inv: #على ال bitwise_and كقناع لتطبيق عملية mask_inv سنقوم باستخدام #وبالتالي المناطق التي تحوي 0 لن تدخل في عملية الدمج roi roi = cv2.bitwise_and(roi,roi,mask = mask_inv) # اي هنا سيتم تعتيم المنطقة التي نريد وضع اللوغو فيها # الآن نكون انتهينا من تحديد المكان الذي سيتم وضع اللوغو ضمنه # roi: # الآن نقوم ياستخلاص المنطقة التي يكون فيها اللوغو فقط من صورة اللوغو وباقي المناطق يتم تعتيمها أي 0 logo = cv2.bitwise_and(img2,img2,mask = mask) # logo: # roi الآن نضع اللوغو ضمن ال # ثم نقوم بتعديل الصورة الأصلية # تذكر أن : black+anycolor=anycolor merge = cv2.add(roi,logo) #roi قمنا بإضافة اللوغو الآن إلى ال img1[0:rows, 0:cols ] = merge cv2.imshow('res',img1) cv2.waitKey(0) cv2.destroyAllWindows()

انا استخدم ويندوز 8 واريد ان اقوم بفتح ملف x d ولكن البرنامج لا يعمل .. هل توجد طريقة لفتح ملفات x d بدون adobe x d ؟؟

حاول استخدام أحد الأدوات المتوفر على الانترنت online مثل PSDETCH. Photopea إن قمت بتصدير ملف التصميم من AdobeXD على شكل SVG فيمكنك فتحه في Figma وهو برنامج تصميم مجاني لكنه لايدعم ملفاتXD

يقدم التوثيق الرسمي خطوات للتثبيت على كل أنظمة التشغيل المدعومة مع ملاحظات حسب إصدار كل نسخة لهم و من مونغو. مثلاً في نظام أوبنتو يتم التثبيت من خلال أداة Advanced Packaging Tool (APT) مدير الحزم البرمجية للنظام. الخطوات العريضة: تحميل المفتاح العام من خلال wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add - ثم تثبيت الحزمة gnupg sudo apt-get install gnupg ثم إعادة الأمر رقم 1 الخاص بامفتاح ثم إنشاء ملف القوائم sources.list.d/mongodb-org-5.0.list # يختلف حسب الإدار للنظام تأكد من التوثيق echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list ثم أمر التثبيت sudo apt-get install -y mongodb-org ثم تشغيل الخدمة mongodb sudo systemctl start mongod توثيق التثبيت: mongodb/manual/installation

هناك الكثير من الاختيارات التي يمكنك استخدامها حيال هذا الأمر والاول هو استخدام atlas cluster وهي استضافة توفرها mongodb لقاعدة البيانات يمكنك البحث عن mongodb atlas في غوغل وفتح حساب في atlas ثم انشاء قاعدة بيانات محمية ب username و password وأيضا يمكنك أن تعمل whitelist لل ip الخاص ب vps خاصتك وستحصل في الأخير على رابط لاستخدام قاعدة البيانات الاختيار الثاني وتوفره digitalocean وهو أيضا cluster ل mongodb يكلف 15 دولار شهريا وهو سهل التثبيت تتبع خطوات جد بسيطة ثم تحصل على الرابط لاستخدام قاعدة البيانات تلك الاختيار الثالث هو أن تثبت mongodb في ال vps نفسه وتستخدمه localy في server انه نفس الشئ كاستخدامه في كمبيوتر محلي لكن هذه الطريقة قد تكون صحيح ليست مكلفة لكن لا انصح بها في تطبيق انتاجي

أنا أستخدم nextjs على vercel. إجراء اختبار google lighthouse Pagespeed على صفحتي الرئيسية. تقوم بإرجاع "إزالة ملفات جافا سكريبت غير المستخدمة" وتسرد ملفات جافا سكريبت لصفحاتي الثابتة الأخرى مثل privacy-policy.js about.js.... لماذا يتم تحميل صفحات أخرى وأنا لست في تلك الصفحات؟ كيف يمكنني إيقافها بحيث يتم تحميلها على عنوان url الخاص بهم فقط.

أنا أقرأ Nextjs جزء البيانات من الوثائق وخطر ببالي سؤال واحد. يمكن لـ Nextjs جلب البيانات باستخدام getStaticProps و getStaticPaths و getInitialProps و getServersideProps ، أليس كذلك؟ لكن البعض يحدث في وقت البناء كما أقتبس: getStaticProps (Static Generation): Fetch data at build-time متى يحدث هذا وقت البناء؟ هل هو عند تشغيل npm تشغيل البناء؟ (لبناء بناء الإنتاج) أو عندما يصل المستخدم إلى تطبيق Nextjs الخاص بنا؟ (عند كل طلب)

مرحبا لدي مشروع nextjs أعمل عليه وهو حاليا في استضافة vps في السابق كنت عندما أعمل git pull في vps ثم أبني المشروع يعمل بدون مشاكل الأن قمت بتطوير المشروع و واردت أن أجلب التحديثات الأخيرة في vps ثم البناء لكن يظهر هذا الخطأ بعد أن يأخذ وقت كبير process killed رغم أنني قمت بالبناء محليا دون مشاكل

أولاً عليك قراءة البيانات في بايثون ويفضل تحويلها إلى ملف CSV ثم قراءتها ك Dataframe ليسهل التعامل معها (لامشكلة المهم أن تقوم بقراءتها بالشكل المناسب)، ثم بعد ذلك يمكنك استخدام مكتبة sklearn لتنفيذ الطلبات المتبقية حيث توفر لك مكتبة sklearn ماتحتاجه لتقسيم البيانات (الطلب 2 ) وبناء نموذج LinearR وإليك الروابط التالية التي تشرحهما: وبالنسبة للطلب الأخير (تقييم أداء النموذج) فهنا يوجد كل الطرق مع شرحها، ويمكنك استخدام واحدة منها:

مرحبًا طارق في حالة operating system not found لن تستطيع الدخول للنظام بدون أسطوانة CD أو ذاكرة فلاش USB، وأن يكون على هذه نسخة من نظام التشغيل (ويندوز 10 على سبيل المثال) وتقوم بإعادة تثبيت النظام من جديد أو محاولة إصلاحه من خلال خيار Repair Windows والذي سيظهر لك قبل بدء عملية التثبيت. إن لم تعمل أسطوانة الويندوز أو الـ USB مباشرة بعد تشغيل الجهاز، يجب عليك الدخول إلى قائمة الإقلاع Boot Menu من خلال الضغط على F2 أو Del أو F12 أو غيرها حسب نوع اللابتوب الخاص بك، ثم تختار الUSB أو CD / DVD Room حسب ما تستخدمه لتثبيت النظام. بعد أن تقوم بإعادة تثبيت النظام (أو إصلاحه)، يمكنك أن تستعمل برامج مثل Recuva أو Recover My Files في محاولة لإستعادة أي صور أو ملفات تم حذفها أثناء عملية الـ Format.

مرحبًا عبد الواحد هذه فقط مسألة تعود على البرامج، في الماضي لم يكن هناك برامج مثل Adobe إكس دي أو Figma وبالتالي لم يكن هناك بديل غير الفوتوشوب لكي يعطي المصمم الفدرة على التحكم في كل تفاصيل الموقع أو التطبيق، فأصبح ضروري أن يتقن المصمم التعامل مع الفوتوشوب حينها. بعد ذلك حاول بعض المصممين أن يقللوا من حجم الموقع من خلال جعل أغلب الصور والأيقونات بإمتداد SVG لذلك حاولوا إستخدام Adobe Illustrator لتصميم المواقع والتطبيقات ثم في 2010 ظهر برنامج Sketch ليكون أفضل برنامج مختص في تصميم واجهة المستخدم حينها، لكن العيب الأكبر له هو أنه متاح على أجهزة أبل فقط، وبالرغم من إمكانيات البرنامج التي تساعد المصمم على الحصول على أفضل نتيجة إلا أن عدد مستخدمينه لم يكن بالكثير وهذا بسبب أن كثير من المصممين كانوا يعملون على ويندوز بالفعل. بعد ذلك في 2015 أعلنت شركة Adobe عن برنامجها الخاص بتصميم الواجهات Adobe إكس دي ليصبح من أشهر البرامج والذي يعد الأشهر حتى الآن، أضاف البرنامج مميزات وإضافات عظيمة مثل تحويل التصميم إلى كود مباشرة أو تجربة الـ Animation وغيرها من المميزات. ظهر بعده بسنة موقع Figma والذي يحتوي على مميزات كثير مثل عمل رابط للتصميم ذاتي التحديث أي يمكن لأي شخص لديه الرابط أن يشاهد ما يقوم به المصمم من تعديلات في الوقت الحقيقي، ومن مميزاته أن Figma يعمل على المتصفح وبالتالي يدعم كل أنواع الأجهزة تقريبًا بغض النظر عن نوع نظام التشغيل Windows, Mac, Linux, Android, iOS في النهاية البرنامج المستخدم في تصميم الموقع أو التطبيق متوقف على طلب العميل وخبرة المصمم.