Mustafa Suleiman

9 مايو 2023

لا يوجد محرر أكواد مجاني أفضل من VScode، وتستطيع تحديثه إلى أخر إصدار من خلال الضغط على Help بالأعلى ثم check for updates.

وبالنسبة لمشكلة الـ Live server لاحظ أنه عندما يتم الضغط على أيقونة Go live بالأسفل يظهر لك البورت وهو 5500 بينما لديك أنت في المتصفح البورت هو 8080 لاحظ شريط العنوان في المتصفح، فهل يتم فتح الصفحة بشكل تلقائي لك أم أنك تكتب ذلك في المتصفح؟

وإذا استمرت المشكلة حاول حذف إضافة Live Server ثم أعد تثبيتها ثم أغلق محرر VScode وأعد تشغيل المشروع من خلال السيرفر.

9 مايو 2023

في ملف App.js عليك باستيراد مكون About داخل أقواس معقوفة بالشكل التالي:

import { About } from './About.jsx';

حيث أنك قمت بتصديره في المكون بالشكل التالي:

import React from 'react'

export  function About() {

 
    return (
        <div>About</div>
      );
 }

وإذا أردت استخدام الاستيراد بدون أقواس عليك بكتابة التصدير بالشكل التالي:

import React from 'react';

export default function About() {
  return <div>About</div>;
}

في JavaScript، توجد اختلافات بين export و export default في طريقة تصدير الوحدات (modules) من ملف إلى آخر. هنا هي الاختلافات الرئيسية بينهما:

1- export تُستخدم لتصدير متغير أو دالة محددة باستخدام اسمها. عند استيراد الوحدة في مكان آخر، يجب استخدام نفس الاسم المحدد عند التصدير.

// في ملف "module.js"
export function myFunction() {
  // ...
}

// في ملف آخر
import { myFunction } from './module.js';

2- export default تستخدم لتصدير قيمة افتراضية واحدة فقط من الوحدة، وتستطيع استيراد القيمة المصدرة باستخدام أي اسم ترغب في استخدامه.


// في ملف "module.js"
export function myFunction() {
  // ...
}

// في ملف آخر
import { myFunction } from './module.js';

3- تستطيع استخدام export مع العديد من الوحدات في نفس الملف، بينما يمكن استخدام export default مرة واحدة فقط في كل ملف.

4- عند استيراد الوحدة، عليك باستيراد الوحدات المصدرة باستخدام export باستخدام الأقواس المنحنية {} مع تحديد الاسم المحدد، بينما يمكن استيراد الوحدة المصدرة باستخدام export default دون الحاجة إلى أي أقواس.

5- بالإمكان تصدير الوحدات باستخدام export واستيرادها باستخدام import في أي ملف JavaScript، بينما export default يستخدم عادة عند تصدير الوحدة الرئيسية في ملف معين.

بتاريخ 3 دقائق مضت قال Moaz Abu Zant:

كيف اضيف الملف

2023-05-09_15-11-47.png.7df0728645e3edfe7a06727f7c3dd93c.png

9 مايو 2023

بتاريخ 7 دقائق مضت قال Mamun Abdu:

دورة تطوير تطبيقات الويب باستخدام لغة PHP

الدورة لا تركز على تعلم أساسيات تطوير الواجهة الأمامية حيث سيتم كتابة أكواد HTML وCSS مباشرًة وأيضًا استخدام Tailiwind وBootstrap، ولذلك عليك بتعلم الأساسيات من خلال دورة تطوير واجهات المستخدم المسار الأول والذي أشار إليه عمر، فلديك وصول للمسار الأول لجميع الدورات بالإضافة إلى دورة PHP.

https://academy.hsoub.com/courses/front-end-web-development/web-development-intro/

وتستطيع تعلم المزيد من خلال المقالات في أكاديمية حسوب فهناك قسم خاص بلغة HTML و CSS.

وأيضًا تستطيع تعلم جافاسكريبت من خلال المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript .

https://academy.hsoub.com/courses/javascript-application-development/javascript-intro/

وإليك مقال مفيد أيضًا:

9 مايو 2023

بالإضافة إلى ما تم ذكره، غالبًا ما يكون شكل ملف .env في مشروع لارافيل كالتالي:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=instagram_hsoub
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=database
SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

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

أو الأسهل هو الطلب من مدير المشروع أن يقوم بإرفاق .env.example في مستودع المشروع فهو أمر لابد منه إذا كان يتم استخدام متغيرات البيئة.

8 مايو 2023

1- قبل أن يتمكن مدير المشروع من دمج تعديلاته في الإصدار الرئيسي (main) في نظام التحكم بالإصدار (Git)، يجب عليه القيام بعملية الحفظ (commit) لتلك التعديلات، وإذا كان المدير لم يقم بعملية الحفظ، فلن يتم جلب التعديلات الجديدة عند استخدام git pull.

2- إذا كنتِ تعملين على فرع محلي (local branch) مختلف عن الفرع الذي يتم دمج التعديلات فيه، فقد لا تظهر التعديلات عند استخدام git pull، فتأكد من أنكِ تعملين على نفس الفرع الذي يقوم المدير بدمج التعديلات فيه.

لتوضيح ذلك، لنفترض أن لديك فرع محلي يُسمى "branch1" والمدير يُقوم بدمج التعديلات في فرع بعيد يُسمى "branch2".

فإذا كنتِ تعملين على الفرع "branch1" وتستخدمين git pull، فإن التعديلات التي يقوم المدير بدمجها في "branch2" لن تظهر في "branch1" الذي تعملين عليه.

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

وتستطيعي التحقق من الفروع المتوفرة في المشروع باستخدام الأمر:

git branch -a

والتأكد من أنكِ تعملين على الفرع الصحيح قبل استخدام git pull.

وفي حال كانت هناك فروع مختلفة، عليك بالتبديل إلى الفرع الصحيح باستخدام الأمر:

git checkout <branch-name>.

3- في حالة قام مدير المشروع بتعديل نفس الجزء من الكود الذي قمتِ أنت بتعديله، فقد يحدث تعارض (conflict) عند محاولة دمج التعديلات، وهنا يجب عليك حل التعارضات يدويًا قبل أن يتم جلب التعديلات.

4- قد تكون المشكلة في الاتصال بخادم نظام التحكم بالإصدار البعيد (remote Git server)، مما يمنع استرداد التعديلات الجديدة، لذلك تأكدي من وجود اتصال صحيح بالخادم البعيد وأن إتصال الإنترنت يعمل بشكل سليم.

8 مايو 2023

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

وأيضًا قبل الإطلاع على النقاشات والخطوات التي بها، أنصحك بمشاهدة الفيديو والمقالات التالية:

8 مايو 2023

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

Screenshot2023-05-09014748.png.ce47dc2d5c6bb0db36f1ed0502550c79.png

والكود الذي أرفقته يجب تعديله ليصبح بالشكل التالي، حيث أنك قمت بكتابة الدالة بشكل خاطيء وأيضًا يجب أن يتم تضمين المكونات داخل أب واحد فقط وتستطيع مثلاً استخدام div أو React Fragment كما في الكود التالي:

import logo from './logo.svg';
import './App.css';
import About from './components/About/About.jsx';
import Home from './components/home.jsx';

function App() {
  return (
    <>
      <About />
      <Home />
    </>
  );
}

export default App;

وأنصحك بقراءة المقالات التالية قبل استكمال العمل في المشروع.

8 مايو 2023

بالإضافة إلى ما تم ذكره من قبل عدنان، هناك مشكلة في ملف App.js حيث أنك قمت بكتابة return كدالة وهو أمر غير صحيح وأيضًا قمت بتصدير المكون داخل دالة المكون نفسه وهو امر غير صحيح، لذلك عليك بتعديل الكود ليصبح بالشكل التالي:

import logo from './logo.svg';
import './App.css';
import About from './components/About/About.jsx';
import Home from './components/home.jsx';

function App() {
  return;
  {
    //ضع كود المكون هنا أو المكونات الأخرى
  }
}

export default App;

والأفضل هو بناء المشروع React من خلال تنفيذ السكريبت التالي:

npx create-react-app اسم مجلد المشروع

واستبدل اسم مجلد المشروع بالاسم الذي تريده للمجلد.

أو تستطيع استخدام vite وهو الأمر الذي أفضله لإنشاء وتجميع مشروع React من خلال الأمر التالي:

 npm create vite@latest

ثم قم بإختيار مشروع React من ضمن الخيارات التي ستظهر لك من خلال السهم أعلى وأسفل، بعد ذلك اكتب اسم مجلد المشروع.

8 مايو 2023

أرجو توضيح المشكلة وأيضًا رفع مجلد المشروع بالكامل.

8 مايو 2023

بالطبع الدورتين تؤهلانك للقيام بذلك، فأنت قد جمعت ما بين مهارات الواجهة الأمامية والواجهة الخلفية من خلال إطار Django.

ولإنشاء موقع مشابه لأكاديمية حسوب، ستحتاج إلى المهارات التالية:

1- تصميم واجهة المستخدم

ستحتاج إلى مهارات تصميم واجهة المستخدم (UI) وتجربة المستخدم (UX) لتصميم واجهة مستخدم مرئية وجذابة للموقع.

2- HTML وCSS

معرفة قوية بلغات توصيف الصفحات (HTML) وتنسيق الأنماط (CSS) لبناء وتنظيم هيكل الموقع وتنسيقه بشكل جميل.

3- JavaScript

إلمام لغة JavaScript لإضافة وظائف تفاعلية للموقع وتحسين تجربة المستخدم، مثل الأشكال التفاعلية والمؤثرات البصرية والتحقق من البيانات.

4- إدارة قاعدة البيانات

أساسيات قواعد البيانات لتخزين المعلومات الخاصة بالموقع، مثل معلومات المستخدمين والدورات والمقالات.

5- إدارة المشروع

مهارات إدارة المشروع لتحديد الهدف والموارد وجدولة العمل والتعامل مع فريق العمل (إذا كنت تعمل مع فريق) وإدارة الوقت والجودة.

6- استضافة الموقع

فهم لكيفية استضافة الموقع ونقله إلى الخوادم وضمان توافره على الإنترنت.

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

1- تصميم الواجهة

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

2- هيكل الموقع

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

3- التكامل مع قاعدة البيانات

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

4- إدارة المحتوى

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

5- تنفيذ نظام الاشتراك

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

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

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

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

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

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

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

8 مايو 2023

بتاريخ On 4‏/5‏/2023 at 23:02 قال Talal Al Risi Alr:

اكتب برنامج يقوم بتخزين 5 قيم وإيجاد مجموع هذه القيم وطباعتها؟

اكتب برنامج يخزن 10 قيم ثم افصل المكدس الى مكدسين الأول يحتوي على القيم الفردية والآخر يقوم بتخزين القيم الزوجية

اكتب برنامج يخزن 10 قيم ثم افصل المكدس الى مكدسين الأول يحتوي على القيم الفردية والآخر يقوم بتخزين القيم الزوجية

لكونه سؤال إختباري فسأرشدك لخطوات الحل وتستطيع تنفيذ الكود وطرحه هنا لحل أي مشكلة تواجهك.

لحل سؤال البرنامج المطلوب بتخزين القيم وإيجاد مجموعها، تستطيع اتباع الخطوات التالية:

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

نبذة بسيطة من الكود وعليك بإكمال الباقي:

#include <iostream>
using namespace std;

int main() {
  int values[5];
  int sum = 0;

لحل السؤال الثاني وتقسيم المكدس إلى مكدستين:

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

نبذة بسيطة من الكود وعليك بإكمال الباقي:

#include <iostream>
using namespace std;

int main() {
  int values[10];
  int oddValues[10];
  int evenValues[10];
  int oddCount = 0;
  int evenCount = 0;

8 مايو 2023

لكونه سؤال إختباري فيمكن إرشادك لخطوات الحل:

1- قم بتضمين المكتبة المناسبة لإجراء عمليات الإدخال والإخراج في C++:

#include <iostream>
using namespace std;

2- تعريف المصفوفة باستخدام نوع البيانات المناسب.

3- تنفيذ حلقة تكرار لإدخال عناصر المصفوفة.

4- تنفيذ حلقة تكرار لفحص العناصر وطباعة "zero" إذا وجدت عنصرًا يساوي الصفر.

5- تنفيذ دالة main() التي ستستدعي الخطوات السابقة.

int main() {
    // الخطوة 1
    // الخطوة 2
    // الخطوة 3
    // الخطوة 4
    return 0;
}

8 مايو 2023

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

والحل الآخر كما أشار إليك عمر وهو شراء بطاقات الهدايا وإعطائها لك ووسائل الدفع المتاحة هم البطاقة الائتمانية أو حساب PayPal.

ولكن لا تقم باستخدام بطاقة مسبوقة الدفع أي Prepaid التي يتم شحنها حيث سيتم رفضها غالبًا عند الشراء، بل البطاقة يجب أن تكون من نوع Debit أو Credit أي مربوطة بحساب بنكي.

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

8 مايو 2023

الكود الخاص بك هو ملف تعريف التطبيق (manifest) لتطبيق Chrome، والكود نفسه ليس له مشكلة وهو صحيح من الناحية النحوية syntax.

حاول التأكد من وجود ملفي "jquery.min.js" و "popup.js" في نفس المجلد مع ملف التعريف وأنهما يحتويان على الكود الصحيح.

وإصلاح الأخطاء التي أشرت إليك بها في السؤال الآخر هنا الخاص بك:

8 مايو 2023

السكريبت يحتوي على بعض الأخطاء، إليك الأخطاء المحددة:

الدالة getinfont غير معرفة في السكريبت، يجب عليك تعريفها قبل استخدامها.
في السطر المعلق بعد الكومنت، هناك خطأ في النحو في السطور المعلقة، تحتاج إلى إضافة علامة اقتباس مغلقة " بعد الخاصية background:url(https://i.ibb.co/gyzFHVS/150.jpg) no-repeat 50%').
في الجزء الأخير من السكريبت، يجب أن تحرص على إغلاق الأقواس الكبيرة } للتابع window.onload، وإغلاق الأقواس الكبيرة } للكائن document.onclick.

وإليك السكريبت بعد تعديل الكود وإجراء بعد التعديلات:

var string_id = 1231414;
var page_title = document.title;
var time_click = 0;
var check_button = 0;
var index_max = getinfont(1, 7);

window.onload = function() {
  setTimeout(function() {
    $('div[class="gow-wrap"] img').remove();
  }, 2000);

  setTimeout(function() {
    $('div[class="gow-tumbleweed"]').remove();
  }, 2000);

  setTimeout(function() {
    $('span[class="gow-btn-mid__val"]').remove();
  }, 2000);

  /*$('div[class="gow-fan"]').attr("style",'bottom:-150px;
    left:1%;
    width:100%;
    height:100%;
    background:url(https://i.ibb.co/gyzFHVS/150.jpg) no-repeat 50%');*/

  document.onclick = function({ target }) {
    page_title = document.title;
    if (page_title.indexOf('Wild West Gold') !== -1) {
      console.log(page_title);
      let parent = target;
      if (
        parent.className ==
        'gow-start-btn gow-btn gow-btn-green gow-btn-mid our-btn dont_touch'
      ) {
        console.log(0);
        get_format_new();
        index_max = getinfont(1, 7);
        get_format(index_max);
      }

      if (parent.className == 'gow-btn gow-btn-brownl gow-get-price gow-btn-mid') {
        console.log(1);
        get_format_new();
      }
    }
  };
};

function getinfont(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return_tt = Math.floor(Math.random() * (max - min)) + min;
  return return_tt;
}

function get_format(index_max) {
  if ($('div[class="gow-game-row"]').eq(0).children('div[class="gow-game-cel"]').length == 2) {
    for (i = 0; i < index_max; i++) {
      var get_infont = getinfont(0, 2);
      $('div[class="gow-game-row"]')
        .eq(9 - i)
        .children('button')
        .eq(get_infont)
        .attr('style', 'background:url(https://v2l.cdnsfree.com/default/img/gold_of_west/gow-win-img.jpg)');
    }
  } else {
    for (i = 0; i < index_max; i++) {
      var get_infont = getinfont(0, 3);
      $('div[class="gow-game-row"]')
        .eq(9 - i)
        .children('button')
        .eq(get_infont)
        .attr('style', 'background:url(https://v2l.cdnsfree.com/default/img/gold_of_west/gow-win-img.jpg)');
    }
  }
}

function get_format_new() {
  $('div[style="background:url(https://v2l.cdnsfree.com/default/img/gold_of_west/gow-win-img.jpg)"]').attr('style', '');
}

8 مايو 2023

بتاريخ 36 دقائق مضت قال Mohamed Boumlik:

لا ليس هدا ما اردت
اسف اني لم اوضح جيدا
-----------------------------

حسنا في العالم الواقعي . عنج النظر في الفقاعة فان ما تراه يكون اكبر

ا نا لا اريد تعديل حجم الفقاعة لاكن اريد شيءا قريبا من

و مع ان اللفقاعة تتحرك يكون الeffect يعمل
هل وضحت جيدا ؟

ما تريده يتطلب بعض الجهد ولا يتم من خلال CSS فقط، بل يجب استخدام جافاسكريبت أيضًا، وتستطيع استخدام مكتبة مثل https://thdoan.github.io/magnify/ أو https://www.npmjs.com/package/react-image-magnifiers لتنفيذ ذلك، بحيث تقوم بمحاكاة مؤشر الفأرة كما لو أنك أشرت إلى الصورة لكل فقاعة، وابحث عن React.js Image Zoom/Magnifier على اليوتيوب وستجد شروحات.

8 مايو 2023

إذا كنت ترغب في إضافة تأثير التكبير للفقاعة، فهناك خاصية transform: scale() في CSS لتكبير الفقاعة، حاول تجربة إضافة هذه الخاصية إلى تعريف الـ .bubble1 و .bubble2 في الكود الخاص بك، وذلك على النحو التالي:

.bubble1 {
  /* تعريفات أخرى للفقاعة */
  transform: scale(1.5); /* تكبير الفقاعة بنسبة 1.5 */
}

.bubble2 {
  /* تعريفات أخرى للفقاعة */
  transform: scale(2); /* تكبير الفقاعة بنسبة 2 */
}

وتستطيع تعديل قيمة scale وفقًا للتكبير المطلوب للفقاعة.

تذكر أنه يجب تحديد العناصر .bubble1 و .bubble2 في عنصر الـ .square أو أي عنصر آخر تستخدمه لعرض الفقاعات.

بعد إضافة الـ transform: scale() للفقاعات، قد تحتاج إلى ضبط حجمها وموقعها بناءً على ما ترغب فيه داخل العنصر الأساسي .square باستخدام القيم المناسبة للـ width و height و position.

8 مايو 2023

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

فيما يلي شرح لبعض الطرق الشائعة في Laravel والغرض منها ومتى يتم استخدامها:

1- POST

الغرض: تستخدم لإرسال طلب لإنشاء مورد جديد.
مثال: إرسال طلب لإنشاء مستخدم جديد في تطبيقك.

Route::post('/users', 'UserController@store');

// UserController.php
public function store(Request $request)
{
    // استلام البيانات المطلوبة لإنشاء المستخدم من الطلب
    $userData = $request->only(['name', 'email', 'password']);

    // قم بإنشاء المستخدم وحفظه في قاعدة البيانات
    $user = User::create($userData);

    // استعادة الاستجابة ببيانات المستخدم المنشأ
    return response()->json($user, 201);
}

2- GET

الغرض: تستخدم لاسترجاع معلومات محددة من المورد.
مثال: استرجاع بيانات المستخدم الذي يحمل معرّف معين.

Route::get('/users/{id}', 'UserController@show');

// UserController.php
public function show($id)
{
    // البحث عن المستخدم المرتبط بالمعرّف المحدد
    $user = User::findOrFail($id);

    // استعادة الاستجابة ببيانات المستخدم
    return response()->json($user);
}

3- PUT/PATCH

الغرض: تستخدم لتحديث مورد محدد.
مثال: تحديث بيانات المستخدم الذي يحمل معرّف معين.

وتستطيع استخدام PUT لتحديث جميع البيانات في المورد، بينما يمكن استخدام PATCH لتحديث جزء من البيانات فقط.

Route::put('/users/{id}', 'UserController@update');

أو

Route::patch('/users/{id}', 'UserController@update');

// UserController.php
public function update(Request $request, $id)
{
    // استلام البيانات المطلوبة لتحديث المستخدم من الطلب
    $userData = $request->only(['name', 'email']);

    // البحث عن المستخدم المرتبط بالمعرّف المحدد
    $user = User::findOrFail($id);

    // تحديث بيانات المستخدم
    $user->update($userData);

    // استعادة الاستجابة ببيانات المستخدم المحدثة
    return response()->json($user);
}

4- DELETE

الغرض: تستخدم لحذف مورد محدد.
مثال: حذف مستخدم معين من قاعدة البيانات.

الطرق الأربعة السابقة (POST، GET، PUT/PATCH، DELETE) تُعد الأكثر شيوعًا في RESTful API وتطبيقات الويب، وتستخدم في بناءً عمليات CRUD (Create، Read، Update، Delete) المتعارف عليها في تطوير البرمجيات.

Route::delete('/users/{id}', 'UserController@destroy');

المسار هو "/users/{id}" للوصول إلى الدالة "destroy" في "UserController"، والتي تتولى حذف المستخدم المرتبط بالمعرف الممرر كمتغير في المسار.

ثم يمكنك تنفيذ هذا المسار عن طريق استخدام طريقة DELETE في نموذج الاستدعاء عبر الشبكة.

مثلاً، باستخدام إطار العمل Axios في JavaScript، يمكننا استخدام الرمز التالي لحذف المستخدم:

axios.delete('/users/1')
    .then(response => {
        console.log('تم حذف المستخدم بنجاح');
    })
    .catch(error => {
        console.error('حدث خطأ أثناء حذف المستخدم');
    });

وهناك العديد من الطرق الأخرى التي يمكن استخدامها في توجيه Laravel، إليك بعض الأمثلة الإضافية:

OPTIONS

الغرض: يُستخدم لاستعلام الخيارات المدعومة لمسار محدد.
مثال: استعلام الخيارات المدعومة لمسار معين للاحتفاظ بمعلومات الخيارات المتاحة.

Route::options('/users', 'UserController@options');

يتم تعيين المسار "/users" للوصول إلى الدالة "options" في "UserController" التي تستعرض الخيارات المدعومة لمسار المستخدم.

HEAD

الغرض: يُستخدم لاستعلام رأس الاستجابة فقط دون استرجاع البيانات الفعلية.
مثال: التحقق من توفر المورد دون استعادة بياناته.

Route::head('/users/{id}', 'UserController@head');

تم وضع المسار "/users/{id}" للوصول إلى الدالة "head" في "UserController" التي تعيد فقط رأس الاستجابة دون استرداد بيانات المستخدم.

8 مايو 2023

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

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

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

8 مايو 2023

قم بتسجيل الدخول إلى حسابك في Blogger على منصة Google.
اختر المدونة التي ترغب في تعديلها.
انقر على "تخطيط" في القائمة الجانبية اليسرى.
اختر الموقع الذي ترغب في إضافة الكود الHTML إليه (على سبيل المثال: صندوق التعليقات أو القائمة الجانبية).
انقر على "إضافة أداة" (أو "Add a Gadget").
ستظهر قائمة بالأدوات المتاحة، حيث يمكنك البحث عن أداة "HTML/JavaScript" والنقر عليها.
ستظهر نافذة جديدة تسمح لك بإدخال الكود الHTML.
الصق الكود الHTML الذي ترغب في إضافته إلى المدونة.
انقر على "حفظ" (أو "Save") لتطبيق التغييرات.

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

وقد يفيدك الإطلاع على النقاش التالي:

وأيضًا بعض النقاشات الأخرى المتعلقة:

8 مايو 2023

لكونه سؤال إختباري يمكن إرشادك لخطوات الحل فقط، وإذا قمت بتنفيذ الكود يمكن مساعدتك في حل المشاكل التي تواجهك.

إليك خطوات الحل:

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

https://academy.hsoub.com/programming/cpp/?d=2

7 مايو 2023

من الجيد القيام بمشاريع لأشخاص آخرين لاكتساب الخبرة، ويمكنك طلب ذلك من خلال حسابك على LinkedIn أو على مجموعات الفيسبوك الخاصة ببايثون، وأيضًا مجتمع البرمجة على منصة i/O .

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

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

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

7 مايو 2023

رسالة الخطأ "sqlite3.OperationalError: no such table: posts" تعني أن الجدول الذي تحاول الوصول إليه "posts" غير موجود في قاعدة البيانات الخاصة بك.

عليك بالتأكد من الخطوات التي قمت بها حتى الآن:

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

والأمر الذي يجب تنفيذه لإنشاء الجدول في قاعدة البيانات هو استخدام الأمر CREATE TABLE في SQL، وطالما أنك تستخدم Flask و SQLite3، تستطيع استخدام الكود التالي لإنشاء الجدول:

import sqlite3

# اتصال بقاعدة البيانات
conn = sqlite3.connect('اسم_قاعدة_البيانات.db')
c = conn.cursor()

# إنشاء الجدول
c.execute('''
    CREATE TABLE IF NOT EXISTS posts (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT NOT NULL,
        content TEXT
    )
''')

# حفظ التغييرات وإغلاق الاتصال بقاعدة البيانات
conn.commit()
conn.close()

استبدل 'اسم_قاعدة_البيانات.db' باسم قاعدة البيانات الفعلي التي ترغب في استخدامها، و الكود ينشئ جدولًا بعناصر id، title، و content، حيث يتم تحديد id كمفتاح أساسي و title كعمود نصي إلزامي.

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

7 مايو 2023

أرجو منك طرح السؤال أسفل الفيديو الخاص به في الدورة في المرة القادمة.

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

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

وقد يفيدك الإطلاع على لعبة flapy bird التالية ومحاولة تقليدها وستتعلم الكثير ويمكنك رؤية الخوارزمية الخاصة بها بالضغط على رؤية ما بالداخل أو see inside.

https://scratch.mit.edu/projects/44251328/

7 مايو 2023

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

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

https://creativecloud.adobe.com/learn/app/animate

اضغط على الدرس الذي تريده وستجد الملفات النهائية جاهزة للتحميل.

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

أجوبة بواسطة Mustafa Suleiman