عبدالباسط ابراهيم

أولاً بالنسبة لتعلم ال wordpress وطريقة العمل تعتبر سهلة كما وضح التعليق السابق ولكن في حالة أنك تريد 

• بناء قوالب لل wordpress 
• التعديل على القوالب 

ستحتاج بالطبع لتعلم ال html و ال css وسيكون من الجيد تعلم ال javascript بالإضافة لبعض المهارات الأخرى ويمكنك أن تجد  هذه القوالب على مواقع كثيرة سواء مدفوعة أو مجانية وهي متوفرة بكثرة أهم هذه المةاقع themeforest 

هناك جانب خاص بال backend هو أيضاً في حالة أردت التعديل أو بناء الإضافات Plugins وتحتاج لذلك تعلم ال PHP وهذه اللغات المذكورة تحديداً لأن ال wordpress تم بنائه من خلال هذه اللغات 

وصحيح أن هناك العديد من فرص العمل بال wordpress ولكن أيضاً هناك العديد من مطورين ال wordpress والأسعار قليلة نسبياً لذلك لا تحصر تعلمك لل wordpress فقط فهو تقنية كغيرها وينبغي عليك تعلم الأساس دائماً

ربما السبب في أنها لم تعمل مع ال a الموجودة في ال dropdown أنه لا وجود للكلاس scroll لأنك استخدمت الدالة لهذا الكلاس تحديداً من خلال التالي

$("a.scroll").on('click', function(event) {

لذلك جرب إضافة هذا الكلاس كالتالي

<a href="#proudct" class="scroll"> معرض صور </a>

<a href="#services" class="scroll">الخدمات </a>

<a href="#gallery" class="scroll">المنتجات  </a>

<a href="#contacts" class="scroll">عنا  </a>

يمكنك عمل ذلك من خلال الخاصية text-decoration  حيث أن هذه الخاصية هي المسئولة عن هذا الخط الذي يكون تحت الكلمة  ويمكنك إلغاء هذه الخاصية  كالتالي

a:hover {
  text-decoration: none;
}

يمكنك التحكم في ظهورها بتغيير ال hover للحدث الذي تريده مثلlink أو visited أو active

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:active {
  text-decoration: underline;
}

نقوم بإنشاء الكلاس Person

class Person:
  def __init__(self, fname, lname):
    self.firstname = fname
    self.lastname = lname

  def printname(self):
    print(self.firstname, self.lastname)

وننشأ الكلاس Student  من خلال الوراثة من الكلاس Person كالتالي

class Student(Person): #كمعامل Person لاحظ الكلاس 
  pass #في حالة أن لم نكتب أي خصائص جديدة للكلاس pass كلمة 

أسهل طريقة لعمل ذلك سيكون بواسطة ال javascript  عن طريق التعديل على ال css كالتالي 

e.style.display = 'none'; //عبارة عن العنصر المطلوب إخفائه e  ال

أو 

e.innerHtml = ''; //عبارة عن العنصر المطلوب إخفائه e  ال

وكمثال على ذلك يمكننا عمل زر لإخفاء عنصر وإظهاره كالتالي

<a href="#" onclick="toggle_visibility('foo');">Click here</a>
<span id="foo">This is foo</span>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

هذه أبسط طريقة وتوجد العديد من الطرق الأخرى سواء بال jquery أو بال css فقط ولكن ستختلف على الطريقة التي تريد العنصر أن يختفي بها

بالإضافة للطريقة بالتعليق السابق يمكنك أيضاً استخدام الإضافة cross-blob  فقط قم أولاً باستدعاء الإضافة  

const Blob = require("cross-blob");

ثم قم باستخدامها كالتالي

var audioBlob = new Blob([dataview], { type: 'audio/wav' });

يمكنك أيضاً عمل ذلك من خلال الإضافة winston حيث يمكنك تطبيق المطلوب بسهولة

أولاً تحتاج لتثبيت الإضافة  

npm install winston --save

ثم قم بإضافة الإعدادات لها كمثال 

/**
 * Configurations of logger.
 */
const winston = require('winston');
const winstonRotator = require('winston-daily-rotate-file');

const consoleConfig = [
  new winston.transports.Console({
    'colorize': true
  })
];

const createLogger = new winston.Logger({
  'transports': consoleConfig
});

const successLogger = createLogger;
successLogger.add(winstonRotator, {
  'name': 'access-file',
  'level': 'info',
  'filename': './logs/access.log',
  'json': false,
  'datePattern': 'yyyy-MM-dd-',
  'prepend': true
});

const errorLogger = createLogger;
errorLogger.add(winstonRotator, {
  'name': 'error-file',
  'level': 'error',
  'filename': './logs/error.log',
  'json': false,
  'datePattern': 'yyyy-MM-dd-',
  'prepend': true
});

module.exports = {
  'successlog': successLogger,
  'errorlog': errorLogger
};

ثم بعد ذلك يمكنك استخدام ال successLogger, و ال errorLogger ولكن بعد استدعائهما كالتالي

const errorLog = require('../util/logger').errorlog // لا تنسى الاستدعاء
const successlog = require('../util/logger').successlog // لا تنسى الاستدعاء 
//يمكنك الإستخدام كالتالي
successlog.info(`Success Message : ${variable}`);

errorlog.error(`Error Message : ${error}`);

يعتبر مجال ال web و ال mobile app  من المجالات السهلة نسبياً كبداية (في البداية فقط ولكن عند بناء مشاريع كبيرة يصبح الأمر أكثر تعقيداً) أي يمكنك في بداية تعلمك بناء مواقع كاملة لذلك ستجد أن مجال الويب محفز في تعلمه حيث يمكنك بناء مشروع في بدايات تعلمك والسبب الثاني  أن الكثير  من  فرص العمل والمنتشرة حالياً في العمل الحر تطلب هذه المجالات لذلك يتجه الكثير من المطورين لهذه المجالات

ولكن ذلك لا يعني أنه لا يوجد مجالات أخرى لها العديد من الفرص حالياً  مثل 

• برمجة الألعاب من أكثر المجالات ربحاً ولكن تحتاج لخبرة كبيرة
• Internet of Things أنترنت الأشياء 
• data science علم البيانات
• machine learning تعليم الألة

وهناك أيضاً العديد من المجالات الأخرى المطلوبة 

توجد العديد من البرامج التي تستخدم مفهوم ال multithreading حيث أن من خلال فهم هذا المصطلح ستجد أن معظم التطبيقات التي تتفاعل مع المستخدم ربما تعمل بهذا المفهوم فمثلاً

• من الأمثلة الأكثر استخداماً لل multithreading  هي الألعاب حيث تستخدم هذا المفهوم بشكل كبير  
• ال IDE و ال text editor  نفس فكرة برامج ال office 
• السيرفرات أيضاً تستخدم هذا المفهوم لمعالجة العديد من الطلبات في نفس الوقت

يمكنك إضافة النص الجديد للملف بدون حذف المحتوى القديم عن طريق استخدام appendFile أو يمكنك إضافة ال flag a ليقوم بعمل append وليس overWrite كالتالي

fs.writeFile('log.txt', 'Request recieved from 3221', {'flag':'a'}, function (err) {
  if (err) throw err;
  console.log('saved');
});

لاحظ ال {'flag':'a'} 

هناك إضافة لل Gatsby تقوم بعمل تعطيل لل route تسمى gatsby-plugin-static-site يمكنك تثبيتها كالتالي

npm install @wardpeet/gatsby-plugin-static-site --save

ثم قم بإضافتها لملف ال gatsby-config.js كالتالي

plugins: [{
  `@wardpeet/gatsby-plugin-static-site`,
}]

لقد رأيت المستودع الخاص بك dar-kutubak أعتقد أن الخطأ أنك قمت برفع ملفات ال src للمستودع الذي تريده أن يكون في ال github pages وذلك خطأ حيث أننا نستخدم المجلد dist فقط عند استخدام هذا المستودع لل github pages لذلك

• قم بإنشاء مستودع جديد ولكن قم برفع مجلد ال dist فقط في المستودع
• وقم بتسمية المستودع كالتالي "alishouaa.github.io" حيث أن أي إسم غير ذلك لن يعمل 

يمكنك إضافة ال noThrow لل redirect ليكون كالتالي

 return (
   <Redirect noThrow to={`/posts`} />
 )

حيث أن ال redirect تعمل مع ال componentDidCatch حتى تمنع إعادة عمل rerendering

لذلك تقوم react بتوليد هذا الخطأ 

أعتقد أن من بعد الإصدار 16 لا يظهر هذا الخطأ من الأساس

بتاريخ 3 دقائق مضت قال Abdulaziz Salem:

بتاريخ 1 ساعة قال عبدالباسط ابراهيم:

شكرا جزيلا لك اخي عبدالباسط ابراهيم لكن لدي سوال لو كنت في مكاني اي دوره سوف تدخل بالاول

 

إذا لم يكن هناك خبرة بتطوير واجهات المستخدم بالطبع يفضل تعلم هذه الدورة أولاً  حيث أن هناك بعض الأمور التي تتطلب بعض الخبرة في ال html و ال css وعموماً الأفضل لك البدأ بتطوير واجهات المستخدم

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

فمثلاً بالنسبة لتعلم لغة برمجة لأول مرة مثل javascript كما في الدورة ستواجهك بعض المفاهيم والمصطلحات التي يظهر لك أنها معقدة ولكن هي في نهاية الأمر سهلة جداً ومع الوقت ستجد أن المصطلحات الجديدة يمكنك معرفة وظيفتها من خلال ترجمة المصطلح ولكن المطلوب فقط فهم الدرس وإن لم تفهمه بنسبة 100% ستجد أنه مع التطبيق أنك بدأت تستوعب ما كنت تستصعبه قديماً 

مجال تصميم صفحات الويب مختلف عن تطبيقات الجوال لذلك ستحتاج لدورتين فمثلاً يمكنك أخذ

• دورة تطوير واجهات المستخدم لتعلم تصميم صفحات الويب عن طريق ال html css و مكتبات ال javascript  والعديد من التقنيات الأخرى  التي تزيد من مستواك ك front-end developer اي مطور واجهات المستخدم
• أما بالنسبة لتطوير تطبيقات الجوال فيمكنك أخذ دورة تطوير التطبيقات باستخدام الجافاسكربت حيث في هذه الدورة ستتعمق في تعلم الجافاسكربت وتعلم أطر العمل المشهورة حالياً لجافاسكربت و تعلم تطوير تطبيقات الجوال باستخدام react native وتعلم ال back-end ايضاً 

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

أولاً يعتبر ال flutter و react native أطر عمل لتطوير تطبيقات الموبايل لجميع أنظمة التشغيل أي cross platform وكلاً منهما تمكنك من بناء تطبيقات كبيرة حيث ال react native تدعمها facebook و flutter تدعمها google 

ال react native يستخدم ال javascript إعتماداً على الإطار react بينما ال flutter تحتاج لتعلم لغة البرمجة Dart 

أما بالنسبة للأفضل فذلك يرجع لك فأي لغة برمجة تتقنها ويعتبر أيضاً كلا الإطارين على نفس المستوى من الإنتشار بين المطورين 

ولكن هناك بعض المميزات ل flutter

• يوفر flutter العديد من ال components أكثر من react native
• يوفر لك بيئة عمل أكثر إحترافية من react native

ولكن إذا كنت بالأساس تتقن javascript فالأفضل لك تعلم react native لأنه لن يأخذ منك الكثير من الوقت

توجد العديد من المشاكل التي يمكن لها تسبب هذا الخطأ منها 

• عدم تثبيت ال loaders  ال file-loader
• استخدام ال file-loader مع إصدار 2 من ال html-loader 

ولكن أتوقع أنك تستخدم الإصدار الثاني من ال html-loader لأن هذا الإصدار يتعارض مع عمل ال file-loader لذلك تأكد من ملف ال package.json  أنك تستخدم الإصدار الأول وإن كنت تستخدم الإصدار الثاني قم بتنفيذ هذا الأمر 

npm i html-loader@1-D

ثم بعد ذلك جرب تشغيل webpack

بتاريخ 10 دقائق مضت قال علاء الدين الزهوري:

قمت بذلك ولم تظهر التنسيقات !!!

 

شكراً لك.

تأكد من حذف الخاصية publicPath  ليصبح الكود كالتالي

output: {
  path: path.resolve(__dirname, 'dist'),
    filename: 'js/main.js'
},

وقم بعد ذلك بتنفيذ الأمر npm run build

وبعد الإنتهاء قم بفتح صفحة index.html في المتصفح الموجودة في مجلد dist وليس src وغالباً سيكون السبب أنك لم تستخدم live-srever لذلك لم تحدث الصفحة تلقائياً

ربما يجب علينا تنفيذ الأمر emulator بداخل المسار Android/Sdk/tools/~ ونحاول أولاً معرفة ال  avd_name عن طريق تنفيذ التالي

cd ~/Android/Sdk/tools/bin && ./avdmanager list avd

//إن لم يعمل الأمر بالأعلى يمكنك تجربة الأمر التالي

cd ~/Android/Sdk/tools && ./emulator -list-avds

وسيظهر لك أسم ال  avd_name بعد ذلك قم بتنفيذ التالي

cd ~/Android/Sdk/tools && ./emulator -avd NAME_OF_YOUR_DEVICE

//NAME_OF_YOUR_DEVICE مكان ال  avd_name قم بكتابة ال 

نعم يمكنك بناء تطبيق بشيفرة برمجية واحدة وتعمل على أنظمة التشغيل المختلفة ( IOS - Android ) حيث يعتبر ال React Native من النوع cross platform وتستطيع بناء تطبيقات كبيرة بدون مشاكل ولن تواجه أي عقبات في تطوير المواع الكبيرة حيث يعتبر ال React Native من المنصات القوية في بناء تطبيقات الموبايل ويمكنك أن ترى تطبيق ال facebook حيث تم بناءه من خلال ال React Native وتم تطوير ال React Native بواسطة facebook أي أن ليست بشركة ناشئة في المجال

وبالنسبة ربط التطبيق مع قواعد البيانات من خلال ال api التي يوفرها ال backend

تحتاج لتعلمها أن تكون هناك خبرة في ال javascript وال html بشكل أساسي ولكن تحتاج أيضاً لل css لتنسيق التطبيق و توجد العديد من الدورات لل React Native يمكنك البحث عن الدورة التي تعجبك

 تأكد من وضع الملف في المسار ال root أي يعتبر بجوار المجلد src

وقم أيضاً بطباعة المتغير بشكل مباشر للتأكد من الوصول للمتغيرات كالتالي

console.log(process.env.GATSBY_APP_NAME)

حيث أن webpack تقوم بتضمين هذه المتغيرات فقط في المشروع ولذلك لا يمكنك الوصول لprocess.env من المتصفح

يمكنك استخدام الإضافة 'react-helmet'  لإضافة بعض الخصائص لل body ومنها يمكنك إضافة وتغيير ال className وستكون الكود كالتالي

import Helmet from 'react-helmet'

<Helmet>
    <body className="class-name" />
</Helmet>

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

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

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

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

توجد العديد من الطرق لعمل ذلك فمثلاً يمكنك استخدام ال fonts من خلال ملفات ال css كالتالي

@import url('https://fonts.googleapis.com/css?family=Roboto');

html {
  font-family: 'Roboto', sans-serif;
}

أو يمكنك استخدام الإضافة gatsby-plugin-google-fonts حيث تقوم بإضافة الخطوط المستخدمة  يمكنك تثبيت الإضافة كالتالي

yarn add gatsby-plugin-google-fonts
// أو
npm install gatsby-plugin-google-fonts --save

ثم إضافة الخطوط في ملف ال gatsby-config.js كالتالي

module.exports = {
  siteMetadata: {
    title: `I like Google fonts`
  },
  plugins: [
    {
      resolve: `gatsby-plugin-google-fonts`,
      options: {
        fonts: [
          `limelight`,
          `source sans pro\:300,400,400i,700` //style وال  weight يمكنك أيضاً تحديد ال 
        ],
        display: 'swap'
      }
    }
  ]
}

قم بالإطلاع على المزيد من المعلومات من خلال موقع Gatsby