Mustafa Suleiman

6 مارس 2023

1- بخصوص سؤالك حول ظهور المستخدم الأول ثم اختفاءه بعد ثانية، فإن ذلك يرجع إلى أن الدالة fetchRandomUsers تعيد تعيين قيمة الـ state data لتحتوي على مستخدم واحد فقط عند كل استدعاء. وبما أن fetchRandomUsers تستدعى في الـ useEffect بعد جزء صفحة المستخدم يتم تحميله، فإن الحالة الأولى التي تتم عرضها تحتوي على مستخدم واحد، ولكن يتم تحديث الحالة كل ثانية مما يتسبب في تغيير الحالة إلى حالة خالية من المستخدمين. لحل هذه المشكلة، يمكن تعيين القيمة الجديدة للـ state باستخدام الدالة setData بدلاً من إعادة تعيينها كما يلي:

setData(prevState => [...prevState, newUser])

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

2- لإظهار مستخدمين إثنين أو ثلاثة منذ تحديث الصفحة، يمكن تعديل الـ fetchRandomUsers لتسترد أكثر من مستخدم واحد. مثلاً، يمكن استدعاء الدالة fetch مع عدد الأشخاص الذين نريد عرضهم، ثم تحويل النتيجة إلى مصفوفة من المستخدمين وإضافتها إلى state. على سبيل المثال:

async function fetchRandomUsers(numUsers) {
  const response = await fetch(`https://randomuser.me/api/?results=${numUsers}`);
  const data = await response.json();
  const newUsers = data.results.map(user => ({
    user: `${user.name.first} ${user.name.last}`,
    money: Math.floor(Math.random() * 1000000)
  }));
  setData(prevState => [...prevState, ...newUsers]);
}

ثم يمكن استدعاء fetchRandomUsers(2) على سبيل المثال لاسترداد مستخدمين اثنين وإضافتهم إلى state.

3- بخصوص جودة الكود، يمكن تحسين الكود:

من المستحسن استخدام try / catch في دالة fetchRandomUsers للتحقق من وجود أي أخطاء في طلب API ومعالجتها بشكل صحيح.
التحقق من أن response.ok يساوي true قبل الاستمرار في دالة fetchRandomUsers للتأكد من عدم حدوث أي أخطاء في الطلب.
يمكن تحسين الكود المسؤول عن تحويل البيانات التي تم إرجاعها من API (data.results) إلى قائمة مستخدمين جديدة.
يمكن إعادة كتابة دالة useEffect لتفعيل الطلب عندما يتم تحديث numUsers بدلاً من تشغيلها مرة واحدة عندما يتم تحميل التطبيق.
استخدام setState بشكل صحيح. تحتوي setData الحالية على مصفوفة فارغة ، لذلك يجب استدعاء setData مع newUsers بدلاً من [...prevState ، ...newUsers] لتحديث المصفوفة.
وضع الدالة fetchRandomUsers خارج دالة App() ، حتى يمكن استخدامها في أي مكان في الكود.
يمكن تحسين اسماء المتغيرات والدوال بشكل يعكس المعنى الذي يقوم به الكود. على سبيل المثال ، يمكن تسمية setData() بـ setUsers() ، وتسمية العنصر الحالي في useState() باسم users بدلاً من data.
يمكن تحسين الكود عن طريق استخدام مكتبة axios لعملية الـ fetch، حيث توفر هذه المكتبة التحكم بالأخطاء بشكل أفضل.
يمكنك استخدام async/await بدلاً من .then() لتبسيط الكود.
قد يكون من الأفضل تمرير عدد الأشخاص الذين تريد جلبهم من خلال الـ fetchRandomUsers() بدلاً من تحديدها داخل الدالة.
يمكنك إنشاء دالة منفصلة لمعالجة بيانات المستخدمين بدلاً من وضع الكود داخل دالة fetchRandomUsers().

إليك الكود بعد تحسينه:

import axios from 'axios';
import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  async function fetchRandomUsers(numUsers) {
    try {
      const response = await axios.get(`https://randomuser.me/api/?results=${numUsers}`);
      const newUsers = response.data.results.map(user => ({
        user: `${user.name.first} ${user.name.last}`,
        money: Math.floor(Math.random() * 1000000)
      }));
      setData(prevState => [...prevState, ...newUsers]);
    } catch (error) {
      console.error(error);
    }
  }

  useEffect(() => {
    fetchRandomUsers(10);
  }, []);

  return (
    <div>
      {data.map((user, index) => (
        <div key={index}>
          <p>{user.user}</p>
          <p>{user.money}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

6 مارس 2023

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

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

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

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

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

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

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

6 مارس 2023

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

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

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

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

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

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

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

6 مارس 2023

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

يجب عليك استخدام الألوان بطريقة أفضل. يمكنك استخدام الخاصية border-color لتحديد لون الحدود بدلاً من استخدام الخاصية border-top و border-right و border-bottom و border-left.

يمكنك تحسين تنسيق الكود عن طريق إزالة المسافات الزائدة وإضافة تعليقات للمساعدة في قراءة الكود عود نفسك على ذلك.

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

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

وإليك بعض الدروس التي ستساعدك في تحسين مهارات CSS لديك.

6 مارس 2023

لاستدعاء مكتبة PyPDF2 في Python ، يجب تثبيتها أولا باستخدام أحد مديري الحزم الخاصة بـ Python مثل pip. يمكنك استخدام الأمر التالي في سطر الأوامر لتثبيت pypdf2:

pip install PyPDF2

بعد تثبيت pypdf2 بنجاح ، يمكنك استدعائها في برنامج Python باستخدام الأمر التالي:

import PyPDF2

ويتم استدعاء هذا الأمر في بداية برنامج Python الخاص بك للاستفادة من وظائف pypdf2.

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

يمكنك استخدام هذا الأمر في مفسر Python للتحقق من أن المكتبة قد تم تثبيتها بنجاح:

import PyPDF2
print(PyPDF2.__version__)

إذا كانت المكتبة قد تم تثبيتها بنجاح، سيتم طباعة رقم الإصدار (version number) على الشاشة. إذا لم تظهر أي قيمة، فربما يحتاج المفسر (interpreter) إلى إعادة تشغيله.

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

وأيضًا التأكد من توافق إصدار بايثون لديك مع إصدار المكتبة.

6 مارس 2023

هل تحتاج تعلمها؟ لا لست بحاجة إلى ذلك.

يكفيك فقط فهم الفكرة والتطبيق على مثال بسيط، وقم بتركيز كامل جهدك على تعلم الـ Flexbox و CSS Grid Layout.

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

Clear: تُستخدم خاصية Clear لمنع العناصر التي تليها من العرض بجوار العنصر المطفأ الصفري، وهي مفيدة في ترتيب العناصر بشكل رأسي.

تتيح CSS أدوات جديدة وأساليب متقدمة لتحقيق التنسيق وتوزيع العناصر بطريقة أسهل وأكثر مرونة، وهي عناصر Flex و Grid.

Flexbox: تعد خاصية Flexbox واحدة من أهم وأسهل أدوات CSS لتحقيق تنسيق مرون وحديث للصفحة. يمكن استخدامها لتوزيع العناصر داخل العناصر الأم (parent) بشكل أفقي أو رأسي، كما يمكن استخدامها لتحقيق ترتيب العناصر.

Grid: تسمح خاصية Grid بتحديد الصفوف والأعمدة الخاصة بالعناصر بطريقة سهلة ومرونة، وتستخدم لتوضيح توزيع العناصر والتحكم في التنسيق بشكل دقيق.

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

يمكننا توضيح الفرق في استخدام Flexbox و Grid بالأمثلة البرمجية التالية:

Float

** ترتيب العناصر على اليمين واليسار **

<div style="float:left;">العنصر الأول</div>
<div style="float:right;">العنصر الثاني</div>
<div style="float:left;">العنصر الثالث</div>
<div style="float:right;">العنصر الرابع</div>

Flexbox:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

/* CSS Code */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

Grid:

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

/* CSS Code */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

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

<div style="float:left;">العنصر الأول</div>
<div style="float:right;">العنصر الثاني</div>
<div style="float:left;">العنصر الثالث</div>
<div style="float:right;">العنصر الرابع</div>
<div style="clear:both;"></div>
<div>العنصر الخامس</div>

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

وبشكل عام، Flexbox يستخدم لتنظيم العناصر على المحور الواحد (الأفقي أو العمودي)، في حين يستخدم CSS Grid لتنظيم العناصر على شبكة ثنائية الأبعاد.

6 مارس 2023

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

بينما يمكن استخدام for loop لأي نوع من الأشياء التي يمكن تكرارها، إلا أن foreach يستخدم عادةً لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار مثل سلاسل النصوص (strings) ومجموعات العناصر (sets) وغيرها.
في حالة تغيير المحتوى الموجود في المصفوفة أثناء استخدام foreach، فلن يتم تحديثها بشكل صحيح، بينما يمكن استخدام for loop لتغيير قيم المصفوفة بشكل صحيح.
يمكن استخدام for loop لعمل تكرارات غير متساوية، بمعنى أن يمكن استخدام تعليمة break و continue للخروج من التكرارات أو تخطي جزء منها، بينما لا يمكن استخدام هذه التعليمات في foreach.
يمكن استخدام for loop لتكرار أرقام محددة من المرات وليس فقط عناصر في مصفوفة، بينما يتم استخدام foreach فقط لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار.
في بعض الحالات، يمكن استخدام for-of loop بدلاً من foreach لتكرار عناصر المصفوفة أو الكائنات القابلة للتكرار. ولكن يتم استخدام for-of loop بشكل أساسي في ECMAScript 6 وما بعده، بينما foreach يدعمها أيضًا ECMAScript 5 والإصدارات السابقة.

6 مارس 2023

بتاريخ 2 ساعة قال Hafsa Aly:

الخطأ يحدث بسبب استخدام نوع البيانات الخاطئ للمعامل الثاني في دالة "getTranslations" في الصف "Product" من النموذجات (Models) في Laravel.

يتوقع أن يكون المعامل الثاني من نوع "Zarray"، ولكن تم تمرير نص (string) بدلاً من ذلك، الأمر الذي يؤدي إلى حدوث هذا الخطأ.

يجب تحديد قيمة المعامل الثاني باستخدام النوع الصحيح "Zarray"، وذلك بتمرير مصفوفة اللغات المسموح بها في النظام كمصفوفة من الأعراف الأساسية:

$allowedLocales = ['en', 'fr', 'ar']; // مثال لمصفوفة اللغات المسموح بها $translations = $product->getTranslations($attribute, $allowedLocales);

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

6 مارس 2023

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

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

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

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

أيضًا، يمكن استخدام لغة الجافاسكريبت JavaScript في تطوير تطبيقات الهواتف الذكية وأجهزة الكمبيوتر اللوحية وتطبيقات سطح المكتب. ويمكن استخدامها في تطوير تطبيقات الهواتف الذكية باستخدام إطارات عمل كما React Native وIonic Framework.

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

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

6 مارس 2023

بالإضافة إلى المكتبات التي تم ذكرها سابقًا (Pillow، OpenCV، Matplotlib، و skimage)، هناك مكتبات أخرى يمكن استخدامها لحفظ الصور في لغة Python، مثل مكتبة imageio ومكتبة scikit-image.

يمكن استخدام مكتبة imageio لحفظ الصورة بطريقة مماثلة لـ Pillow و Matplotlib. يمكن استخدام الشفرة التالية لحفظ الصورة في تنسيق PNG:

import imageio

# load the image
image = imageio.imread('example.jpg')

# perform some image processing
# ...

# save the modified image
imageio.imwrite('modified.png', image)

يتم استخدام imageio.imread() لتحميل الصورة، ثم يتم تنفيذ بعض عمليات معالجة الصورة، وأخيرًا يتم حفظ الصورة المعالجة باستخدام imageio.imwrite().

بالنسبة لمكتبة scikit-image، يمكن استخدام الأمر io.imsave() لحفظ الصورة. يمكن استخدام الشفرة التالية لحفظ الصورة في تنسيق JPEG:

from skimage import io

# load the image
image = io.imread('example.jpg')

# perform some image processing
# ...

# save the modified image
io.imsave('modified.jpg', image)

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

بالنسبة لأفضل طريقة من الطريق السابقة

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

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

كما أنه يمكن استخدام مكتبة OpenCV لتعديل الصور، ولها العديد من الوظائف المتقدمة في معالجة الصور مثل تحويل الألوان واستخراج الميزات.

وأخيرًا، يمكن استخدام مكتبة Matplotlib و skimage لحفظ الصور بطريقة بسيطة وسهلة، مع دعمها لمختلف تنسيقات الصور.

يجب اختيار المكتبة المناسبة بناءً على الاحتياجات الخاصة بمشروعك وقدرتك على استخدام الوظائف الخاصة بكل مكتبة.

6 مارس 2023

بشكل عام، يعمل UI Designer على تصميم واجهات المستخدم وتحديد كيفية تفاعل المستخدم مع التطبيق أو الموقع الإلكتروني، بينما يعمل Front-End Developer على تحويل تصميم واجهة المستخدم إلى ملفات HTML وCSS وJavaScript.

وبالتالي، تختلف المسؤوليات والمهام بين UI Designer و Front-End Developer.

يتم تعيين مصمم واجهة المستخدم لإنشاء تصميم واجهة المستخدم الجذاب والمبتكر بشكل عام، مع التركيز على الجوانب البصرية والتفاعلية للتطبيق أو الموقع الإلكتروني. ومن الممكن أن يعمل UI Designer مع فريق Front-End Developer لمساعدتهم على تحويل التصميم إلى واجهة مستخدم قابلة للتفاعل.

أما Front-End Developer، فهو المسؤول عن تحويل تصميم واجهة المستخدم إلى كود قابل للتفاعل والاستخدام. ويستخدم Front-End Developer HTML وCSS وJavaScript وإطارات ومكتبات العمل الخاصة بهم لتحقيق هذا الهدف، حيث يقوم بتحويل التصميم المرسوم ببرامج التصميم إلى ملفات HTML وCSS وJavaScript، ويعمل على تحويل هذه الملفات إلى صفحات ويب تفاعلية قابلة للتصفح.

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

وبشكل عام، فإن الشركات التي تعمل في مجال تصميم وتطوير المواقع والتطبيقات الإلكترونية تمتلك كلاً من UI Designer و Front-End Developer كأعضاء في فريق التطوير. ومن الممكن أن يتعاون الفريق في إنشاء واجهات المستخدم المتميزة والمبتكرة والتي تلبي احتياجات المستخدمين بأفضل طريقة ممكنة.

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

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

والأفضل لك هو البحث عن Handoff design to developers في اليوتيوب وسترى بعينيك سير العمل الفعلي الذي يتم بشكل واقعي بدلاً من قراءة نصوص لن تفيدك بشكل كبير.

6 مارس 2023

الأفضل هو الإعتماد المكتبات الجاهزة والتي تم إختبارها، وبها العديد من الخيارات، إذا كنت تبحث عن معرض lightbox فبإمكانك الإعتماد على المكتبات التالية:

أو يمكنك الإعتماد على مكتبة أكثر تقدمًا ويتم استخدامها بكثرة، وهي Swiper:

https://swiperjs.com/swiper-api

5 مارس 2023

أرجو منك قراءة التعليقات والحلول على السؤال التالي:

5 مارس 2023

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

وعلى الرغم من أنه يبدو أن الخادم يرجع بيانات في شكل كائن (object)، إلا أنه يحتوي على مفتاح "data" الذي يتضمن مصفوفة من البيانات التي يمكن استخدامها. لذلك، يمكن استخدام الدالة map() بعد الوصول إلى مصفوفة البيانات في كائن الاستجابة.

لتطبيق الدالة map() على مصفوفة البيانات، يمكن تعديل الكود كما يلي:

const [data, setData] = useState([]);
// Fetch users
const fetchRandomUsers = () => {
  fetch('https://randomuser.me/api')
    .then(response => response.json())
    .then(data => setData(data.results)); // اتصال بين مصفوفة النتائج في البيانات و state
}

useEffect(() => {
  fetchRandomUsers();
}, []);

// تطبيق الدالة map() على مصفوفة البيانات
return (
  <div>
    {data.map(user => (
      <div key={user.login.uuid}>
        <img src={user.picture.medium} alt={user.name.first} />
        <p>{user.name.first} {user.name.last}</p>
      </div>
    ))}
  </div>
);

في هذا المثال، تم تعديل setData() لاستخدام مفتاح النتائج (results) الموجود في البيانات التي تم استردادها من الخادم. وبعد ذلك، يتم تطبيق الدالة map() على مصفوفة البيانات لإنشاء قائمة المستخدمين. يجب تذكير بوضع الخاصية الفريدة (key) لكل عنصر في المصفوفة، والتي تساعد في تحديث العناصر بشكل صحيح في React.

5 مارس 2023

while(n--) هي بنية تكرارية تستخدم في البرمجة لتكرار الأوامر عدة مرات وتحديد عدد المرات التي يجب تكرارها.

في هذا المثال، يقوم المستخدم بإدخال عدد n من الأرقام ويتم قراءتها وتخزينها في المتغيرات x و y و z باستخدام دالة cin.

ثم تتم إضافة x و y و z إلى مجموعاتها الجزئية xsum و ysum و zsum على التوالي باستخدام المعاملات +=.

ويتم تنفيذ هذه العملية n مرات باستخدام while(n--)، حيث يتم تقليل n بمقدار 1 في كل مرة يتم فيها تنفيذ الحلقة، وعندما تصل n إلى صفر، تنتهي الحلقة.

5 مارس 2023

بتاريخ منذ ساعة مضت قال Zaki Boukhari2:

لي تبين المشكل سوف أكتب الخطوات التي قمت بها

1- قمت بتحميل وتفعيل القالب Astra

2- قمت بتحميل و تفعيل هذه الإضافات

Contact forme,elementor ,

,elementor header &footer builder,

spectra,starter templates,wprorms Lite

3- ذهبت إلى starter templates ثم إخترت elementor ثم إخترت تصميم جاهز (outdoor adventure)

4- وبعد التنصيب يظهر الموقع كامل ولاكن ذلك عند دخولي كأدمن، و عند دخولي كزائر تظهر تنسيقات css ناقصة وغير مرتبة

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

وأيضًا ربما أنت تستخدم Cloudflare كـ CDN لذلك يجب حذف الكاش منه من خلال عمل purge.

وأيضًا يجب تصفح الموقع الخاص من خلال نافذة Incognito mode أو وضع التخفي لتجنب رؤية النسخة التي تم عمل كاش لها في المتصفح، أو يمكنك تعطيل الكاش في المتصفح من خلال disable cache في نافذة network التي ستظهر لك عند الضغط على F12.

5 مارس 2023

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

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

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

والخطوة السابقة غاية في الأهمية حتى لا تضيع وقتك ولا تحصل على وظيفة في النهاية.

وأرجو منك قراءة ردي على السؤال التالي، منعًا للتكرار.

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

https://io.hsoub.com/webdev/143736-من-الصفر-الى-الاحتراف

ومهما كانت المدة والسرعة، فلا تقم أبدًا بالتهاون في الأساسيات وخاصًة لغة البرمجة الأولى لك.

5 مارس 2023

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

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

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

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

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

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

يجب عليك البحث والإلتزام بمسار تعليمي واضح ولا تقم بتغييره.

في الحقيقية ستحتاج إلى 6 أشهر بمعدل 8 إلى 10 ساعات يوميًا للدراسة إذا كنت تريد أنت تصبح مبرمج قوي، أو إلى سنة إذا لم يكن لديك الوقت الكافي بمعدل 4 ساعات يوميًا.

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

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

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

5 مارس 2023

فيما يتعلق بأن يتم إنشاء متجر إلكتروني من قبل شخص واحد.

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

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

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

1- يجب على المطور الإلمام بلغات برمجة الويب مثل HTML وCSS وJavaScript وPHP وMySQL، فهذه اللغات الأساسية في بناء المتاجر الإلكترونية.

2- إدارة الخادم: يجب على المطور الإلمام بإدارة الخادم والسيرفر والحماية من الهجمات الإلكترونية وتحسين أداء الموقع والتحكم في قواعد البيانات.

3- تصميم الواجهة الأمامية: يجب على المطور الإلمام بتصميم الواجهة الأمامية للموقع باستخدام تقنيات التصميم مثل Bootstrap و CSS وJavaScript و jQuery أو tailwind CSS.

4- برمجة الوظائف والميزات المتقدمة: يجب على المطور الإلمام ببرمجة وظائف مثل نظام الدفع الإلكتروني وإدارة المخزون والتقارير والتحليلات.

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

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

بالإضافة إلى ذلك، يمكن استخدام منصات البرمجة وإطارات العمل التي تساعد على بناء متاجر إلكترونية، مثل Laravel و Django و Ruby on Rails وغيرها.

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

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

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

دليل شامل حول كيفية استخدام متجر ووكومرس من حسوب

دليلك الشامل لإنشاء متجر إلكتروني عبر ووكومرس WooCommerce

5 مارس 2023

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

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

لحل هذه المشكلة ، يمكنك اتباع الخطوات التالية:

1- قم بالدخول إلى لوحة التحكم الخاصة بموقع WordPress الخاص بك.

2- انتقل إلى Settings > Permalinks (الإعدادات> الروابط الثابتة) في القائمة الرئيسية لوحة التحكم.

3- اختر خيارًا آخر غير الإعدادات الافتراضية في الروابط الثابتة ، مثل "Post name" أو "Custom structure".

4- انقر فوق زر "Save Changes" (حفظ التغييرات) لتحديث إعدادات الروابط الثابتة.

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

إليك دليل تطوير وورد بريس في أكاديمية حسوب

ومقالة أيضًا عن بناء القوالب.

5 مارس 2023

بتاريخ 13 دقائق مضت قال Youssef Nasr2:

انا احاول إنشاء تطبيق React جديد

هناك طريقتين:

1- عن طريق الأمر

npx create-react-app

npx create-react-app هو سكريبت يتم تنفيذه، يسمح للمستخدمين بإنشاء تطبيقات جديدة. يمكن استخدامها لإنشاء تطبيقات React.

يتم استخدام الأمر على سبيل المثال npx create-react-app my-app لإنشاء تطبيق React جديد يسمى my-app.

2-باستخدام Vite

هي إطار عمل تطوير ويب جديد وسريع النمو. وهو يسمح للمطورين بإنشاء تطبيقات ويب سريعة وخفيفة الوزن باستخدام React و Vue و Svelte وغيرها من الإطارات. يستخدم Vite ملفات ESM (موديلات JavaScript) بدلاً من CommonJS ، مما يجعله أسرع بشكل كبير من معظم أدوات التطوير الأخرى.

يمكن استخدام Vite باستخدام الأمر

 npm create vite@latest

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

وهناك كود مختصر لإنشاء مشروع react مباشرًة.

# إذا كنت تستخدم npm الإصدار السادس
npm create vite@latest my-vue-app --template react

# إذا كنت تستخدم npm الإصدار السابع أو أعلى
npm create vite@latest my-vue-app -- --template react

https://wiki.hsoub.com/React/create_a_new_react_app

5 مارس 2023

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

الخطأ المعروض يشير إلى أن npm لا يمكن العثور على ملف package.json في المسار C:\Users\youssef. يمثل هذا الملف الخاص بـ npm ويحتوي على معلومات حول المشروع والمكتبات اللازمة لتشغيل التطبيق.

لحل هذه المشكلة، يمكن اتباع الخطوات التالية:

1- التأكد من وجود ملف package.json في المسار المذكور في الخطأ.

2- في حالة عدم وجود الملف، يجب إنشاؤه يدويًا باستخدام الأمر التالي:

npm init

سيتمكن المستخدم من تعبئة المعلومات الأساسية حول المشروع وإنشاء الملف package.json.

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

3- في حالة وجود الملف وعدم عمل الأمر السابق، يجب التأكد من تنزيل جميع المكتبات المطلوبة للمشروع باستخدام الأمر التالي:

npm install

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

4- إذا لم يكن الأمر المذكور أعلاه يعمل، فيجب حذف مجلد node_modules الذي يحتوي على جميع المكتبات وإعادة تنزيله مرة أخرى باستخدام الأمر التالي:

npm install

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

5- في حالة عدم حل المشكلة بعد اتباع الخطوات المذكورة، يمكن إعادة تثبيت npm بالكامل باستخدام الأمر التالي:

npm install -g npm

سيقوم هذا الأمر بتثبيت npm بالكامل في النظام وحل أي مشاكل محتملة.

5 مارس 2023

بالنسبة شرح GitHub
يوجد شرح مختصر في دورة علوم الحاسوب في قسم إدارة المشاريع البرمجية، في الدروس التالية

03. التعرف على نظام إدارة الإصدارات Git وموقع GitHub

المدّة: 6.16

04. مثال تطبيقي على Git و GitHub

المدّة: 8.03

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

ويمكنك الإعتماد على المصادر التالية

https://academy.hsoub.com/programming/workflow/git/

5 مارس 2023

بالنسبة للمواقع الإلكترونية

فإن JavaScript هي واحدة من اللغات الأكثر استخدامًا لتطوير الواجهات الأمامية (front-end)، وتستخدم أيضًا في تطوير تطبيقات الويب الديناميكية (dynamic web applications). وهناك العديد من الإطارات (frameworks) التي تستند إلى JavaScript مثل React و Vue.js و Angular وغيرها.

لذلك، إذا كنت ترغب في إنشاء موقع إلكتروني، فإن تعلم JavaScript هي خيارك الأول.

بالنسبة لتطبيقات الهاتف المحمول

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

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

ولكن يجب أن تعلم أنه يوجد إطار React Native لبناء تطبيقات الهاتف لجميع المنصات والذي يعتمد على مكتبة react والتي بدورها تعتمد على لغة جافاسكريبت.

وإليك نبذة مختصرة عنه:

هو إطار عمل شائع لتطوير تطبيقات الجوال باستخدام JavaScript ويتم تطويره من قبل Facebook. تسمح React Native للمطورين بإنشاء تطبيقات الهاتف المحمول المتعددة المنصات باستخدام نفس الرمز المصدري. يمكن لمطوري React Native بناء تطبيقات لنظامي التشغيل iOS و Android باستخدام JavaScript ومكتبات React الشائعة. تساعد React Native المطورين على توفير الوقت والموارد اللازمة لبناء تطبيقات متميزة وفعالة من حيث التكلفة.

أخيرًا، بالنسبة لبرنامج Windows

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

وبإمكانك استخدام الإطار البرمجي .NET لتطوير تطبيقات Windows. كما يمكن استخدام لغات البرمجة الأخرى مثل Java و Python و C++، حسب المتطلبات الخاصة بمشروعك.

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

وهو إطار عمل شائع يستخدم لتطوير تطبيقات سطح المكتب باستخدام HTML و CSS و JavaScript. تتيح Electron للمطورين إنشاء تطبيقات سطح المكتب قابلة للتشغيل على نظام التشغيل Windows و MacOS و Linux. وهي تعتمد على تقنية Node.js وتوفر العديد من الأدوات والمكتبات التي يمكن استخدامها لبناء تطبيقات سطح المكتب بشكل سريع وسهل.

ولكن يعيبه استهلاكه العالي لموارد الجهاز وبالأخص الرامات.

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

5 مارس 2023

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

وسأعطيك مخلص سريع للخريطة:

دراسة أساسيات البرمجة: قم بتعلم اللغات البرمجية المهمة للأمن السيبراني مثل Python وC ++ و Java و Ruby.
دراسة أساسيات الشبكات: تعلم أساسيات الشبكات مثل TCP / IP و DNS و DHCP و HTTP و HTTPS و SSL / TLS.
دراسة الأمن السيبراني: دراسة المفاهيم الأساسية للأمن السيبراني، ومنها أنواع الهجمات والأدوات المستخدمة فيها وكيفية تحليل الثغرات وإصلاحها.
التركيز على مجالات الأمن السيبراني: تحديد مجالات الأمن السيبراني التي تهمك وتخصص فيها، مثل الهجمات الاجتماعية والاختراق والحماية من الفيروسات والبرمجيات الخبيثة وتطوير البرمجيات الآمنة.
الحصول على شهادات معتمدة: يمكن أن تساعد الحصول على شهادات معتمدة في تحقيق الهدف المنشود، فهي تعطيك المعرفة والخبرة اللازمة للعمل في مجال الأمن السيبراني.
الاشتراك في دورات تدريبية: تساعد الدورات التدريبية في تحديث معرفتك وتطوير مهاراتك في مجال الأمن السيبراني.
المشاركة في المسابقات والمجتمعات الخاصة بالأمن السيبراني: يمكن للمشاركة في المسابقات والمجتمعات الخاصة بالأمن السيبراني أن تمنحك الفرصة لتحسين مهاراتك وتبادل الخبرات مع الآخرين في المجال.

ومن الممكن أن أتحدث وأسرد لك 1000 سطر، لكن ذلك حديث على غير علم وخبرة وتجربة، لهذا:

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

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

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

بالنسبة لأفضل طريقة من الطريق السابقة