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

يمكننا تقسيم ال rule التالية '&$checked' لجزئين 

• & هذه العلامة تعني ال rule الأب أي في حالتنا هنا فهو ال root
• checked$ فهي تقوم بتوليد rule جديد من نفس ال rule الموجود

في المثال الموجود سيكون ال rule الناتجة هي "root.checked:" 

لا يمكنك أن تقول أن مجال ما أكثر ربحاً من مجال لماذا؟

لأنه يجب الأخذ في الإعتبار

• عدد الفرص المتاحة 
• عدد ال frontend developer حول العالم
• متوسط دخل ال  frontend developer

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

ربما نقارن تطوير واجهات المستخدم مع مجال آخر مثل ال backend ستجد الفرص المتاحة ل تطوير واجهات المستخدم أكثر من الفرص لل backend ولكن عدد مطوري واجهات المستخدم أكثر والعائد المادي أقل من ال backend 

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

سقوم بتوضيح الخطوات المطلوبة ثم يمكنكي بعدها التطبيق باللغة التي تريديها ويعتبر هذا البرنامج سهل وما تحتاجين إليه هو

• القيام  بإنشاء حلقة تكرار على ال list 
• وفي داخل الحلقة تقومي بحذف ال key الموجود في ال list كالتالي 

  del dic[k]
  

  حيث يعتبر ال k هو عنصر من ال list على حسب كل حلقة تكرار

لمن تريد إرسال الرسالة ؟

إذا كنت تريد التواصل مع مركز المساعدة يمكنك من خلال هذا الرابط التواصل معهم 

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

يعتبر ذلك طبيعي لماذا لأن ال جملة  ag1&ag3 لم تأخذ عرض محدد لذلك تأخذ العرض الذي يساوي 1 column ويناسب عرض الجملة بالضبط لذلك لا يؤثر التوسيط ولكن إذا قمت بوضعها داخل span وقمت بإعطائه عرض أكبر من 1 column سترى النتيجة 

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

<span class="ag1"> ag1 <br> 1 of 11</span>

ثم قم بإضافة التنسيقات التالية

.ag1{
    background: white;
    grid-column:1/3;
    grid-row:1/2;

}

يعتبر هذا المشروع هو نظام تشغيل لل desktop ولكن من خلال الويب وتحتاج لاستخدامه

•  تنزيل ال go language من خلال هذا الرابط
• تحتاج بعد ذلك تنزيل المستودع الخاص بالمشروع على جهازك 

  git clone https://github.com/tobychui/arozos

   

• ثم بعد ذلك قم بفتح ال cmd من داخل المجلد arozos/src أو يمكنك تغيير المسار من خلال 

  cd .\arozos\src\

   

• وأخيراً  قم بعمل build للمشروع من خلال 

  go build

   

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

• يتم أخذ رقمين من المستخدم وحفظ كل رقم في متغير
• يمكنك معرفة أي الرقمين أكبر عن طريق الدوال الجاهزة 
• كتابة حلقة التكرار وسيكون بداية الحلقة هو الرقم الأصغر في حالة الإتجاه التصاعدي أو الرقم الأكبر في حالة الإتجاه التنازلي  
• يمكن التحويل بين الإتجاه التنازلي أو التصاعدي عن طريق ال  if 

• أولاً بهذه المهارات التي تعلمتها يمكنك بناء أي موقع مهما كان ولكن طبعاً ستحتاج للتطبيق كثيراً لمعرفة الطرق المختلفة لتنفيذ مهمة معينة وإكتساب الخبرات وتعلم أفضل الممارسات عند العمل ك frontend
• ثانياً بعد تخطي الخطوة السابقة سيكون عليك تعلم الأدوات والتقنيات التي ستسهل عليك العمل وجعل بيئة التطوير أكثر إنتاجية مثل bootstrap لتسهيل العمل ب css وأيضاً أحد إطارات العمل للجافاسكربت لأنها أصبحت الأن من المتطلبات اللازمة لل frontend ولتطوير بيئة العمل ستحتاج لتعلم شيئاً مثل webpack للقيام ببعض المهام المتكررة بالطبع ستتعلم مع webpack بعض التقنيات مثل npm
• وللعمل مع فريق كامل بشكل متناسق ستحتاج لتعلم git

بالطبع أمامك الكثير لتعلمه ولذلك لا تنظر للوقت الذي تحتاجه للتعلم لأنك لن تتوقف عن التعلم إذا أردت أن تكون من المحترفين

توجد العديد من الطرق مثل

• عن طريق الوسم style في أعلى صفحة ال html 

  <style>
  	<!--يتم وضع التنسيقات هنا-->
  </style>

   

• ال inline-style عن طريق الخاصية style للعنصر

  <h1 style="color: red;"></h1>

   

• ال style sheet وهو عن طريق ربط صفحة ال html بصفحة منفصلة تحتوي على تنسيقات الcss

  <link rel="stylesheet" href="style.css">

   

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

أولاً ال gatsby و ال next يستخدمان ال react لذلك ما هما إلا تطوير لل react ولكن ما هو التطوير الذي سأستفيد منه باستخدام أياً منهما

• NEXT يقوم بتسهيل العمل بال react مثل إختصار كتابة ال routes وإستبدالها ب routes ذاتياً إعتماداً على مجلدات وملفات المشروع والوظيفة الأكثر أهمية هي ال server side rendering مما تساعد بشكل كبير على تحسين ال SEO للموقع 
• gatsby يعتبر static site generator وهو مفهوم جديد للمواقع الديناميكية بحيث يتم فيه الإستغناء عن استخدام قواعد البيانات وبالتالي اتخدام ال backend فمثلاً يمكنك بناء مدونة وإضافة محتوى جديد بدون أي cms 

ويمكنك أيضاً استخدام ال NEXT ك static site generator

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

حاول أن تجرب تحديث الإعدادات لل npm عن طريق التالي

• مسح الإعدادات

npm config delete prefix 

ثم بعد ذلك قم بتنفيذ الأمر التالي

npm config set prefix /usr/local

ثم أخيراً قم بإعادة تثبيتها

npm i -g gatsby-cli

وجرب هل تم تثبيتها أم لا

هناك خطأ بسيط وهو حول ال export و ال import حيث نحتاج عند عمل import بالطريقة التي قمت بها أن يكون ال export default كالتالي

import React from 'react';

export class Navbar extends React.Component {//default لاحظ كلمة
    render(){
      return (
        <ul className="navbar navbar-full">
        ...
        </ul>
      );
    }
}

أما إذا أردت عمل import ولكن بدون استخدام ال default export أو تحتاج لاستخدام named export يجب عليك وضع ال {} حول الكائن الذي تريد إستدعائه كالتالي

import React from 'react';
import ReactDOM from 'react-dom';

import {Navbar} from './components/navbar.jsx';//{ } لاحظ ال 

export class App extends React.Component{
  render(){
    return(
        <Navbar />
        ...
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

أولاً هذا الخطأ error overlay الخاص ب react يظهر فقط في وضع ال Development mode ولن يظهر في ال production mode ويمكنك تعطيل ذلك عن طريق package تسمى react-error-overlay وتستخدم الدالة stopReportingRuntimeErrors كالتالي

أولاً تقوم بإضافة ال package 

yarn add react-error-overlay

ثم قم بعد ذلك بإستخدامها في ال root قبل استخدام ال render كالتالي

import { stopReportingRuntimeErrors } from "react-error-overlay";

if (process.env.NODE_ENV === "development") {
  stopReportingRuntimeErrors(); 
}

.بعد عمل الخطوات السابقة لن تظهر error overlay مرةأخرى

يمكنك عمل ذلك من خلال ال create react app عن طريق كتابة  HTTPS=true&&react-scripts قبل الأمر start في ملف ال pachage.json كالتالي

"scripts": {
  "start": "set HTTPS=true&&react-scripts start",
    ...
}

وسيعمل المشروع بشكل صحيح

نعم هذه هي طريقة الاستخدام الصحيحة ولكن  يجب جعل حرف ال S في كلمة "capital   "String وهناك أنواع أخرى طريقة استخدامها كالتالي

int myNum = 5;               // رقم صحيح
float myFloatNum = 5.99f;    // رقم يحتوي على كسور
char myLetter = 'D';         // حرف
boolean myBool = true;       //logical النوع المنطقي
String myText = "Hello";     // محتوى نصي

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

وكيفية العمل بها تختلف من لغة إلى لغة من حيث ال syntax ولكن الطريقة واحدة وهي كالتالي

function  functionName(){
	//الكود
}

//لإستدعاء الدالة نستخدم التالي
functionName()

وطبعاً ال syntax يختلف من لغة للأخرى 

سأكتب الفكرة وراء عمل مثل هذا البرنامج وهي كالتالي

• كتابة for loop تقوم بتكرار for loop بداخلها وعدد تكرارات  هذه ال loop هو عدد صفوف الشكل الهرمي
• كتابة for loop ثانية بداخل ال loop الأولى بحيث تكون وظيفة هذه ال loop طباعة الشكل الذي تريده ويزيد تكرار هذه ال loop بزيادة رقم التكرار الخاص بال loop الأولى

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

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

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

كما شرح المدرب أحمد عند طباعة ال username لم يتم تحديث قيمة ال state عمل المطلوب بالأعلى عن طريق وسائل أخرى مثل

• بدلاً من استخدام قيمة ال state يمكنك استخدام 

  console.log(e.target.value);

   

• أو يمكنك استخدام ال hook useEffect كالتالي

useEffect(() => console.log(username), [username]);

ليس هناك مشكلة في الكود و يعمل ال webpack عندي بدون مشاكل لذلك قم بإعادة تشغيل برنامج vs code ولكن قم بفتحه as administraor من خلال الضغط بالزر الأيمن لل mouse وستظهر لك قائمة إختر منها run as administraor ثم قم بالتجربة مرة أخرى

نعم هناك طريقة ستقوم فيها بكتابة handler واحد لجميع عناصر ال input وهي كالتالي

handleChange (e) {
    this.setState({ [e.target.name]: e.target.value });
}

تقوم هذه الطريقة بتغيير ال state لل input الذي قام بإستدعاء الدالة لذلك إذا تم تغيير قيمة ال password مثلاً 

ستم تنفيذ الدالة السابقة كالتالي

handleChange (evt) {
    this.setState({ password: "باسورد" });
}

ولكن بالنسبة لل state ستحتاج لإضافة جميع عناصر ال input

يمكنك استخدام try and catch للتحكم في البرنامج سواء في حالة حدوث خطأ أو في حالة النجاح كالتالي

try{
	// يتم تنفيذ الكود هنا في حالة النجاح
}
catch{
	// يتم تنفيذ الكود هنا في حالة الفشل

}

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

try{
  $user = new User;
  $user->fields = $value;
  $user->save();
}
catch(\Exception $e){
	echo $e->getMessage();   
}

توفر لك الجافا أو بالتحديد ال JDK مجموعة كبيرة من الكلاسات والدوال الجاهزة لتوفر عليك كتابة الكثير من الكود أو مثلاً بدلاً من كتابة دالة تقوم بإرجاع العدد الأكبر في مصفوفة من البداية توفر لك الجافا دالة جاهزة تسمى max وهي دالة للكلاس  Math وتقوم بإرجاع الرقم الأكبر كالتالي ببساطة

Math.max(12.123, 12.456)

بالطبع هناك العديد من الدوال المختلفة لأداء مهما مختلفة ويجب بالطبع تعلم الدوال التي ستنفعك في العمل

لا يتغير محتوى الصفحة لأنك تظل في المكون people أو (" / ") لماذا ؟

لأن المسار "profile/" يحتوي على ال "/"  وبالتالي router بإستدعاء ال "/" ولذلك تحتاج لإستخدام الخاصية exact كالتالي

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route } from "react-router";
import { BrowserRouter, Router } from 'react-router-dom'; //react لا تنسى إستدعاء 

import People from "./components/People";
import Profile from "./components/Profile";

ReactDOM.render((
  <BrowserRouter>
        <Route exact path="/" component={People} />
        <Route path="/profile" component={Profile} />
  </BrowserRouter>
), document.getElementById('root'))

لا يمكننا استخدام ال redirect في ال function كما فعلت لأنها كائن أو component وجب أن تستعمل ك component ولذلك نحتاج في هذا الموقف أن نستخدم ال hook ال useHistory  أو ال history.push بما أنك تستخدم الإصدار الأخير كالتالي

import { useHistory } from "react-router-dom"; //في الأعلى hook  يجبإستدعاء هذا ال 


async handleForm(event) {
    event.preventDefault();

    const username = this.state.user.username;
    const email = this.state.user.email;
    const password = this.state.user.password;
    const confirmPassword = this.state.user.confirmPassword;
    const formData = { username, email, password, confirmPassword };

    axios.post('/register', formData, { headers: {'Accept': 'application/json'} })
      .then((response) => {
        this.setState({
          errors: {}
        });

        // <Redirect to="/" /> بدلاً من ذلك
      
        //let history = useHistory(); history.push('/')functional component إذا كنت تستخدم 
  		
        this.props.history.push('/');
        
      }).catch((error) => {
        const errors = error.response.data.errors ? error.response.data.errors : {};
        errors.summary = error.response.data.message;

        this.setState({
          errors
        });
      });
  }