السلام عليكم جميعا : Hello everyone


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


رابط الفيديو
https://youtu.be/SGmnr6PnsiQ

السلام عليكم لو اي محتاج محتاج خدمات من الآتية يتواصل معانا فالمجموعه :

UI&UX Design By Figma,XD

Create Website:
Front By JS
BackEnd By Laravel OR Node.js OR Django
Database MongoDB OR Firebase OR MySQL

Create Apis By Node OR Laravel

Create IOS and Android Applications By Flutter

السلام عليكم
المره اللي فاتت كنا بنكمل كلامنا عن ازاي الjs عموما بتتنفذ في اغلب الbrowsers وعرفنا شوية أساسيات كدا عنها و………...

-استنى بس كدا أنا أصلا بدأت اقرا كلامك عشان الnode.js واللي انت لحد دلوقتي مجيبتش سيرتها أصلا

فعلا بس ممكن تصبر عليا شوية؟

-تمام هصبر بس مش كتير

خلاص طالما مش هتقدر تصبر اكتر من كدا ممكن نتبدأ نربط اللي اتكلمنا عنه المرة اللي فاتت ب الnode.js

-ايه بقى node.js أصلا وايه الاختلاف فيها عن اللي اتكلمنا عنه المرات اللي فاتت؟

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

- بجد؟

اه بجد ﻷن أصلا node.js مبنية في الأساس على الV8 engine وده اللي كنا بنشرحه المرات اللي فاتت بس الموضوع كله انه بيساعد الV8 engine دهlibrary اسمها libuv ودي مبنية أساسا كلها بc فمثلا انا لما اجي اكتب كود js عادي جدا وعاوز انفذه بالnode ف ساعتها الnode هيا اللي بتhandle الموضوع بمساعدة الV8 engine والlibuv يعني زي ما واضح في الصورة الي فوق الnode هيا layer بتاخد الكود بتاعي اللي بكتبه وتتعامل مع الV8 engine والlibuv عشان تنفذهولي وتطلعلي الناتج

- تمام بس ايه libuv دي واستخدمناها ليه اصلا دلوقتي ما الV8 شغالين بيه في google chrome ومفيش حد اشتكى منه ليه ندخل معاه الحاجة دي ولازمتها ايه

هجاوبك ع السؤال ده بس ممكن أسألك سؤال تاني قبله؟

- ماشي

هل استخدام الjs في الnode زي استخدام الjs في الbrowser؟

- مش فاهم سؤالك ممكن توضح؟

يعني هل كل العمليات اللي بعملها في الnode اقدر اخدها اطبقها في الbrowser ويشتغل عادي وبنفس الكفاءة؟

- أكيد طبعا هوا مش كلها js؟

ايوا طبعا هوا كلها js بس على سبيل المثال هل اقدر في الbrowser اتحكم في الfiles اللي ع الجهاز عندي او اقدر ابني server مثلا بكود انفذه في الbrowser يكون قادر انه يعمل الnetwork operations اللي الserver مسؤول عنها؟؟

- لا مفروض ان أي browser مش شغلته انه يعمل الحاجات دي أصلا وحتى لو هتتعمل فيه ممكن تبقى حاجه جانبية ﻷنها مش شغلته الأساسية

صح بالظبط كدا libuv دي نقدر نقول دلوقتي عليها انها بتكملنا شوية حاجات كانت ناقصه في الV8 engine لأنه في الأساس مش مبني عشان يتعامل مع OS والfiles ووجع الدماغ ده كله فهنلاقي الV8 engine لقى نصه التاني اللي هيكمله ويخليه يكون قادر انه يتعامل مع كل المشاكل اللي بتواجهه دي بسهولة جدا وعلى فكرة ملحوظة بس ال V8 في الأساس كان مشروع open source عملته google الغرض منه اننا نقدر ننفذ كود الjs خارج الbrowser ف الV8 في الأساس مهيء للموضوع ده جدا حيث انه engine كويس جدا وopen source ولكن مفيش حاجه في الدنيا كاملة لأسف والجماعه اللي عملوا node.js لقوا ان فيه مكتبة ب الc بتقدم اداء كويس جدا في انها تhandle الfiles وميزات تانيه كتيره غايبة عن الV8 والحاجات هنبدأ نعرفها ان شاء الله من المرة الجايه ونتكلم عن اللي بتقدمهولنا الlibrary دي ودورها السحري في الnode وحكاية الnon-blocking I/O operations دي اللي الlibrary بتقدمهولنا

كلنا عارفين ان الstring في الjavascript عبارة عن primitive type ، عمرك سألت نفسك ازاي بتقدر تستخدم معاها methods ؟؟
طب اي السبب؟
السبب process بتعملهالك الjs ،
Behind the scene
اسمها ال " Boxing "
لما بتعمل call لأي method علي ال string ،
الjs بتعمل wrapped
للprimitive value لل string بتاعك وتحطها جوا object وال object دا
built in prototyping
خاص بالmethods اللي انت بتستعملها مع ال string زي substr و slice وغيرهك من ال methods الخاصة بالstring، ولما ال operation اللي انت بتعملها بالmethods الخاصة بال string object بتخلص ، الstring object دا بيحصله converted back
لل string primitive data type
عشان كدا أي string method
بت return primitive data type
يعني لو استخدمت
String method
مع string primitive data بتتحول ل object له
Prototype methods
خاصة بالتعامل مع الstring
وف الآخر خالص الmethod دي ال return value بتاعها بيكون primitive

السلام عليكم ..

النهارده ان شاء الله مش هنطول عليكم وهيكون بوست بسيط جدا كدا هنتكلم فيه عن حاجات أساسية في دور libuv وبعدها هنوقف السلسلة دي مؤقتا عشان نشرح بعض الtopics اللي هنحتاجها عشان نكمل السلسلة دي زي ال
asynchronous vs synchronous or single-threaded vs multi-threaded عشان هيبقى مبني عليها كلامنا بعد كدا
وكنا كملنا كلامنا المرة اللي فاتت عن الnode.js وكنا وقفنا عند libuv وكنا بنسأل ايه أهميتها ودورها في الnode وليه استخدمناها من الأساس؟؟
زي ما قولنا المرة اللي فاتت ان الV8 engine رغم اداءه القوي بس كان فيه بعض الحاجات مش بيدعمها والحاجات دي بشكل عام هيا ال system resources لأنه في الأساس كان كل تركيزه أنه ينفذ كود الjs زي ما بيتنفذ عندي في الbrowser بس مش ومش مهم عند انه يتعامل ازاي مع الos أو الnetwork أو ال files ف جيبنا بعدها libuv عشان نضيف بعض الfeatures وكل اللي هنقوله النهاردة هوا ايه أهم الfeatures اللي موجودة في libuv و اللي هيا :
The event loop
Asynchronous TCP and UDP sockets
Asynchronous DNS resolution
Asynchronous file and file system operations
Thread pool
Child processes
High-resolution clock
Threading and synchronization primitives
Polling
Streaming
Pipes
      وبس كدا بوست النهاردة الخفيف كدا خلص عشان نوقف سلسلة ال node.js مؤقتا ونرجعلها تاني قريب بإذن الله بعد ما نتكلم شويه عن كذا topic مهمين الأول

single thread & multi thread programming

هنتكلم النهاردة عن موضوع جديد شوية ان شاء الله وهو الmulti threading ايه هيا الmulti threading واستخدمها امتى وليه؟؟

- اه يا ريت أنا عاوز أعرف فعلا

بس اول حاجه لازم نتكلم الاول عن ايه هو ال thread أساسا وازاي الthreads دي بتتنفذ عندي من ال cpu

- ماشي ياعم اشرح ايه هوا الthread الأول اما نشوف اخرتها ايه

طيب معلش بقى اخر حاجه قبل ما نشرح ال thread هنشرح حاجه اسمها process الأول

- !!؟؟

معلش اخر طلب

- ماشي تمام

بسم الله نبدأ بقى بأول مفهوم معانا النهاردة واللي هوا الprocess واللي بيتعرف بـأنه the program in execution وبالمناسبة ده مش معناه ان اي program هوا عبارة عن process واحده ممكن يكون البرنامج فيه اكتر من process شغالين مع بعض عادي جدا وممكن الprocess تخلفلنا processes تانيين بنقول عليهم child processes

بالمناسبة الprogram هنا المقصود بيه الكود المتخزن على الdisk عندي مجرد الكود بس مش أكتر

و لو عندنا مثلا program حابب يشتغل بيتحول الكود المتخزن على الdisk ده للميموري(RAM) عشان نبدأ نسميه باسمه الجديد (process) وبعد كدا الprocess اللي عندي تبدأ تتنفذ واحده واحده فتبدأ تجهز الكود بتاعها ده عشان يروح للcpu بس الكود مش بيعرف يروح لوحده كدا فالprocess تبدأ تجهزله حاجه عشان تودي الكود ده يتنفذ والحاجه دي هيا الthread فالthread دي هيا الunit اللي الcpu بينفذها وهو جزء من الprocess وممكن الprocess يكون ليها اكتر من thread عادي جدا
يبقى دلوقتي عندي ال thread هو عباره عن جزء من الprocess اللي شغاله عندي بيتم تنفيذه من خلال الcpu يعني لو الprocess(program in execution) اللي عندي دي بتتنفذ كلها من خلال thread واحد بيقوم بتنفيذ الكود كله كده الprocess دي single thread ولو الprocess دي بتنفذ الكود على اكتر من جزء تكون multi threading طيب ازاي برضو مش فاهم ازاي ينفذ الكود كله كجزء واحد وينفذ الكود على اجزاء ممكن مثال تمام هندي مثال لو عندنا مثلا array اسمها فتحي وفتحي دي عبارة عن ارقام وعدد الارقام دي كبير وانا محتاج اجيب مجموع الارقام دي من خلال concept ال single threading اللي فهمناه اني هعمل loop على ال array دي وهبدأ احسب مجموع الارقام دي كجزء واحد من خلال single thread واحد بس اما لو بتكلم عن multi thread ف انا ممكن اقسم ال array للي عندي دي مثلا على 4 threads وكل واحد فيهم يحسبلي ربع الarray بس
- تمام ايه بقى اللي استفدته لما ان ال array كلها تتحسب مره واحده وايه اللي حصل لما قسمتها على اكتر من thread؟؟؟
الاجابه هي الcpu بمعنى ان احنا لازم نفهم الاول ازاي الcpu ده بيتعامل مع الthreads دي الأول

- تمام طيب ازاي الthread بتتعامل عندي في الcpu

اول حاجه لازم نعرفها ان فيه كذا طريقة الcpu بيتعامل بيها مع الthreads وبتختلف الطرق دي من operating system ومن cpu للتاني بحيث ان كل os ليه الalgorithm الخاص بيه اللي بيستخدمه علشان يتعامل مع الthreads يعني مثلا الويندوز بيستخدم algorithm اسمه round robin اما اللينكس مثلا بيستخدم Completely Fair Scheduler وكل os يقدر يستخدم حاجه مختلفه

- طب تمام ايه اللي استفدته لما عرفت الموضوع ده؟؟

ب اللي استفدته ان كل الalgorithms اللي اغلب الos الحديثه بتستحدمها بينهم حاجه مشتركه والحاجه دي انها بتدي كل thread عندي وقت معين للتنفيذ لو الthread ده خلص في الوقت اللي هيا محدداه ليه تمام ما خلصش بترميه وتقول انا واقفه في المكان ده وتروح تنفذ الthread اللي بعده انها تديله نفس الوقت اللي قبله اخده تنفذ فيه على قد ما تقدر ولما الوقت ده يخلص تروح على اللي بعده وهكذا..

-طب مش فاهم ممكن مثال؟؟

تمام هنفترض ان عندنا مثلا p1 , p2 دول 2 process و p1 محتاجه 8 ثواني و p2 محتاجه 6 ثواني والos عندي بيدي لكل process ثانيتين بس ايه بقى اللي هيحصل الاول p1 هتدخل ثانيتين وتطلع وكده يكون فاضلها 6 ثواني بعدهاp2 تدخل ثانيتين وتطلع وترجع تاني p1تدخل ثانيتين لحد الاخر زي ما واضح في الصورة اللي فوق يبقى انا كده عندي p1 اللي محتاجه 8 ثواني عشان تتنفذ قعدت منتظرها برا على ما تخلص 14 ثانيه ده في حالة ان مفيش اي حاجه بتتنفذ معاها غير thread واحه وطبعا كل ما زاد عدد الthreads زاد الوقت اللي هتخلص فيه الthread تمام طيب ايه الحل الحل فوق لما كنا بنتكلم على التقسيم والكلام الغريب ده يعني ايه يعني لما قولنا فوق مثلا على مثال الarray لو قولنا الarray دي هيا p1 اللي محتاجه 8 ثواني لو انا قسمتها مثلا على اربع اجزاء بحيث ان كل جزء يتنفذ لوحده ايه اللي هيحصل بدل ما كان عندي p1 ومحتاجه 8 ثواني عشان تتنفذ هيبقى عندي p1, p2, p3, p4 وعندي مثلا الprocess (كلامنا كله على ان الprocessليها thread واحد بس)التانيه دي هسميها p5 يبقى انا كدا عندي p1, p2, p3, p4 وكل واحده محتاجه ثانيتين مثلا

لان الprocess الكبيره كانت محتاجه 8 ثواني فاللي هيحصل دلوقتي ان اول حاجه p1هتدخل تتنفذ الثانيتين وهتخلص وبعدها p2و p3 زي ما في الصوره تحت في الاخر يطلع عندي ان الprocess الكبيره دي بدل ما تتنفذ في 14 ثانيه خلصت في 8 بس يعني وفرت تقريبا نص الوقت اللي كانت هتاخده لما كانت بتتنفذ على thread واحده بس وكل ده بنتكلم على ان الcpu ده single core وده دلوقتي بقى قليل جدا لان اقل cpu دلوقتي ممكن يبقى 4 cores او اكتر

- يعني ايه؟

يعني في كل ثانيه يقدر ينفذ 4 processes من اللي عندنا دول!!
يعني كل الحوار ده هيتنفذ مره واحده لو اعتبرنا ان الcpu نفذهم في نفس الوقت وبدل ما نستنى 8 ثواني ممكن نستنى ثانيتين بسسسس!

- ايه ده ده الmulti threading دي طلعت جميله اوي وأطيب من الاستاذ بهاء سلطان

للاسف مفيش حد اطيب من استاذ بهاء والmulti threading رغم اللي عملته ده ليها مشاكل كتير بتخليني مش احسن حل دايما وده اللي ان شاء الله هنتكلم عنه المره الجايه

رابط الفيديو من هنا
https://youtu.be/l3FHjCDXXJ0


في هذا الفيديو سوف نشرح كيف عمل عرض الشرائح ( slider ) بالصور بطريقة سهلة و بسيطة بدون الحاجة الى استخدام جافاسكربت في هذا المشروع فقط باستخدام HTML و CSS بدون الحاجة الى استخدام javascript

السلام عليكم ...
-------------

المرة اللي فاتت كنا بدأنا موضوع جديد واتكلمنا فيه شوية عن مفهوم ال multi threading وشوفنا مع بعض ازاي الموضوع ده فادنا جدا في ال performance وشوفنا مع بعض مثال بالأرقام المرة اللي فاتت ف لو حضرتك ما قرأتش الموضوع اللي فات ممكن تقراه الأول قبل ما نكمل

وقفنا المرة اللي فاتت عند التطبيق لل multi threading وقد ايه هوا حد جميل وطيب وخلاص هنعتمده في أي برنامج هنكتبه بس بعدها رجعنا في كلامنا وقولنا بس للأسف هو مش طيب للدرجادي وفيه حاجات هنعرفها عنه زيادة النهاردة هتخلينا نفكر تاني هل هنستخدمه في أي كود هنكتبه عشان نبقى شطار وال performance بتاع البرنامج بتاعنا يبقى أحسن من ابن خالته ال single threaded ؟؟!

أول حاجه هنصدمكم بيها أنه مش بالسهولة دي نقدر نكتب برنامج نستخدم فيه مفهوم ال multi threading

- ليه؟

بسبب حاجات كتير أولهم إن انت هتحتاج تعرف كل حاجه شغاله ازاي علي سبيل المثال احنا المرة اللي فاتت بس عشان نقول حاجه بسيطه جدا جدا عن ايه هوا ال multi threading لاقينا نفسنا دخلنا في مفاهيم كتير معتمده عليه وقولنا باختصار كدا ان ال cpu في الغالب بيتعامل مع ال threads دي وينفذها ودخلنا في مواضيع كتير جدا وحتى بعد ما عرفنا المواضيع دي لسه ما اقدرش اقولك اننا نقدر بسهولة دلوقتي نستخدم ال multi threading في اي برنامج هنكتبه ﻷن لسه فيه معلومات أكتر وأكتر وتفاصيل كتير ما اتكلمناش عنها وبتختلف من طبيعة ال operating system للتاني فكتابة برنامج نستخدم فيه ال multi threading عشان نحقق أحسن استفادة منه هنحتاج ننزل لتحت وتحت أوي كمان لحد مانوصل لل cpu كـ hardware نفسه شغال ازاي وهنلاقي الموضوع بيختلف من جهاز للتاني يعني لو كتبت كود على جهازي وفهمت جهازي شغال ازاي ممكن اجي اعمل host مثلا على جهاز تاني الاقي النتيجة مش نفس اللي انا اقصده

- ايه ده ياعم انت سديت نفسنا

ولسه كمان هسدها اكتر اصبر عليا

- ؟؟!

لا بهزر معاك كدا خلاص خلصنا سد النفس

- طيب ايه اصلا المشاكل اللي هتخليني أعمل الموضوع ده كله واضطر اروح اشوف كل cpu وكل os شغال ازاي والحوار ده كله؟؟

أكبر مشكلة هو اني مش ببقى متأكد من اللي هيحصل

يعني ايه؟

هديك مثال لو انا شغال بال multi threaded وعندي مثلا رصيد بنك وكل عملية عندي بعملها ب thread يعني على سبيل المثال لو هعمل عملية خصم مبلغ معين هعمل عمليتين أول واحده بروح اعمل check على الرصيد هل يسمح انه يعمل خصم بالمبلغ ده ولا لا ولو ينفع فيه variable بيحوله من false لtrue ولو ما ينفعش هيفضل false والعملية التانيه هيا عملية التحويل نفسها انه يخصم الرصيد لو كان ال variable ده true وده dummy code مكتوب ب c# عشان نشوف الفكرة بس ومش لازم دلوقتي نفهم ال implementation بس كل اللي هنعمله اني هكرر عملية شغل ال threads دي 5 مرات وهبدأ اشوف النتيجة كل مرة

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

-ليه

عشان كل الكلام اللي قولناه فوق ده وفيه نسبة احتمالات في الموضوع فهلاقي هندي مره مثلا الthread الأول اللي بيعمل check خلص شغل الأول فلما الthread التاني يبدأ شغله يلاقي الvariable بtrue ويخصم عادي وده السيناريو اللي انا عاوزه يحصل بس للأسف ممكن برضة الthread التاني يخلص الأول فييجي يخصم يلاقس الvariable بfalse وما يخصمش وبعدها ال thread الأول يشتغل ويخلي الvariable بtrue بس بعد ايه بقى ما خلاص اللي انا بغير الvariable عشانه خلص وروح بيته ف مش بقدر اقوله لا خلصلي الthread بتاع الcheck الأول عشان لما الthread التاني اللي بيخصم ييجي يشتغل يلاقي الvariable بtrue فيبدأ ينفذ شغله عادي

وده كان مثال بسيط عن مشكلة كبيرة من المشاكل اللي بتواجهنا لما نيجي نستخدم الmulti threading وبكده نكون خلصنا كلامنا النهارده وان شاء الله نكمل كلامنا عن المشاكل المرة الجايه عشان ما نطولش عليكم

قناة مفيدة للاشخاص الذين يرغبون في تطوير مهاراتهم في عمل مشاريع باستخدام html css javascript و مكتبة React.js

القناة جديدة و يتم حاليا تنزيل الدروس بشكل تدريجي حاليا اعمل على مشروع موقع كامل عندما انتهي سوف اقوم بنشرة ايضا في القناة


رابط القناة اذا كنت مهتم

https://youtube.com/channel/UCe7UAkBGye8_IBFIymHFHAQ

You are able to build a network server using an old Intel 80386 system with 4 MB of RAM.