Web Development Code

لقيت كنز وحبيت اشاركه معاكم، سلسلة المقالات دي بتشرح مواضيع مهمة في الجافا سكربت عن طريق الأنيميشن زي: Event loop, Hoisting, Scope Chain, Javascript Engine, Prototypal Inheritance, Generators, Iterators, Promises, and Async/Await. أنصحك بردو تتابع صاحبة السلسلة دي لانها بتعمل Visualization لمواضيع تانية غير الجافا سكربت زي اوامر Git وغيرها, وده لينك السلسلة: https://dev.to/lydiahallie/series/3341

ازاى google maps بيحسبلك اقصر طريق للمكان اللى انتا عايز تروحه ؟!! ويعنى ايه Breadth First Search وايه علاقته ب google maps ؟!! ✅ خلينا كالعادة نضرب مثال نفهم منه ازاى بتحسب اقصر طريق للمكان اللى انتا عايز تروحه ✨ -- نفترض مثلا انك واقف فى ( ميدان التحرير ) وعايز تروح ( ميدان رمسيس ) -- فانتا اول حاجه هتعملها انك هتشوف هل فيه طرق بتوصل ل ( ميدان رمسيس ) من ( ميدان التحرير ) ولا لأ -- فهتبص قدامك وهتلاقى قدامك ( طريقين مثلا ) واصلين بين ( ميدان التحرير ) و ( ميدان رمسيس ) -- فخلاص كدا تمام انتا عندك طريقين ممكن يوصلوك للوجهة بتاعتك اللى هيا ( ميدان رمسيس ) -- و انتا دلوقتى عايز تشوف اقصر طريق من الطريقين دول علشان تمشى فيه وتوصل بسرعة لميدان رمسيس -- وانتا عارف ان كل طريق من الطريقين دول متقسم لمجموعة اجزاء وكل جزء من الاجزاء دى متساوى وبيساوى مثلا 100 متر -- فانتا علشان تعرف اقصر طريق فيهم فهتعمل التالى : - هتشوف عدد الاجزاء اللى بيتكون منها كل طريق - ونفترض مثلا ان اول طريق بيتكون من 4 اجزاء يعنى كدا هيكون طوله 400 متر - والطريق الثانى مثلا بيتكون من 6 اجزاء مثلا فكدا هيكون طوله 600 متر مثلا -- فانتا كدا هتستنتج ان الطريق الاول هو اقصر طريق هيوديك للوجهة بتاعتك اللى هيا ( ميدان رمسيس ) ✅ خلينا بقا نروح لل breadth first search ونعرف هو بيشتغل ازاى ✨ -- ال breadth first search هو search بيشتغل على ال Graph -- وهو بيكون مسؤؤل انه يحدد اقصر ( مسار ) بين Two Vertices -- بس هو بيحدد اقصر مسار بين ال Two Vertices عن طريق انه بيحدد اقصر مسار فيه اقل عدد من ال Vertices اللى هيحتاج يمر عليها فى طريقه بين ال Two Vertices اللى احنا شغالين عليهم -- وال Two Vertices اللى احنا بنشتغل عليهم مش لازم يكونوا مثلا اماكن وانما بيكون نوعهم على حسب احنا هنستخدم ال Graph بتاعتنا فى تخزين ايه -- وهو بيشتغل زى المثال بتاعنا اللى اتكلمنا عليه فوق وبيعمل التالى : - هو بيشوف هل فيه طرق متاحة ( Edges ) بين ال Two Vertices اللى احنا هنشتغل عليهم ولا لأ - لو موجود طرق متاحة ( Edges ) بين ال Two Vertices اللى احنا هنشتغل عليهم فهو بيروح يحدد عددهم - وبعد كدا بيروح يشوف ايه اقصر طريق فيهم عن طريق انه يحدد ايه اقصر فيهم من حيث عدد ال Vertices اللى هيحتاج يمر عليها فى طريقه بين ال Two Vertices اللى احنا شغالين عليهم ✅ و فعليا google maps مش بيشتغل بال breadth first search علشان الطرق مش بتكون نفس الطول فبيشتغل ب Algorithm تانى اسمه dijkstras algorithm وهو شبه ال breadth first search بس طريقته مختلفة شوية ✅طب ازاى ننشئ ال Algorithm ده فعليا ؟!! - هسيبلك لينك فيديو كويس اوى بيفهمك ازاى بننشئ ال Algorithm https://youtu.be/pNWCCHFw7og ✅ ولو حبيت تقرا شوية فى ال Algorithm وتفهمه بشكل اعمق فهسيبلكم لينك مقالة على موقع كويس بيشرح الموضوع بتعمق شوية https://www.geeksforgeeks.org/breadth-first-search-or-bfs-for-a-graph/

رشحوا حاجه انزلها ؟ 😁

What happens when React components render:

Push & Pop method in JavaScript

خلصت مذاكرة HTML, CSS, JS وعايز أطبق عليهم وأعمل مشاريع 🙂 = دي بعض المواقع اللي عليها Templates جاهزة، فيه منها مجاني وفيه مدفوع. هتفتح الـlive demo بتاع الموقع اللي عايز تعمله وتطبقه بنفسك ولو وقفت في حاجة هتلاقي الـsource code متاح تقدر تبص عليه وتفهم هو حلها ازاي... معلش طولت عليك...😊 تفضل يا صديقي الروابط أهي: HTML5Up: https://html5up.net Templatemo: https://templatemo.com freehtml5: https://freehtml5.co Styleshout: https://lnkd.in/dnQn8vtM Start Bootstrap: https://lnkd.in/dK8bVA6q Zerotheme: https://www.zerotheme.com html5xcss3: https://lnkd.in/d6mVkKD5 Colorlib: https://lnkd.in/dKnbFUyt Free-CSS: https://lnkd.in/dTeSpapj Hubspot: https://lnkd.in/dFkDkkxx Mobirise: https://lnkd.in/db9RYz-Q Bootstrap Made: https://bootstrapmade.com Theme For App: https://themesfor.app Bootstrap Taste: https://lnkd.in/dwWsbA9U One Page Love: https://onepagelove.com Tool Plate: https://www.tooplate.com Cruip https://lnkd.in/dgGjsH8P UIDeck https://uideck.com ----------------

em & rem CSS

Node.js visualized: Event Loop Phases مراحل تكرار Event loop في Nodejs https://dev.to/nodedoctors/animated-nodejs-event-loop-phases-1mcp

Use cases for CSS comparison functions. https://ishadeed.com/article/use-cases-css-comparison-functions/

مجتمع خاص بالبرمجة : https://t.me/programmingps

ما هي TypeScript ؟ الـ TypeScript عبارة عن supersite فائقة javascript هل TypeScript هو نفسه Javascript ؟ نعم ولا. تم إنشاء TypeScript بواسطة Microsoft وتم إنشاؤه كـ built on في Javascript باختصار ، إنه مماثل لـ Javascript ولكن مع features إضافية و كل ما تعرفه وتعلمته من Javascript سيكون مفيدًا في الدخول الي TypeScript. أي واحد يجب أن أتعلمه أولاً؟ أنت تتعلم Javascript أولاً بشكل نهائي ثم TypeScript إذا كنت لا تعرف Javascript معرفة جيدة ، فستجد صعوبة في تعلم وفهم TypeScript. لماذا نتعلم TypeScript ! عندما يبدأ الأشخاص في استخدام JavaScript في التطبيقات المعقدة ، فإنهم يدركون بسرعة أن JavaScript أصبحت صعبة في العمل من حيث OOP وذلك يرجع لطريقة عمل اللغة و يصعب العثور على بعض bugs لذلك تم تطوير TypeScript بواسطة Microsoft لسد هذه الفجوة. الذي يضيفه TypeScript بالضبط إلى JavaScript هو : Powerful type system Type error checking at development time Better Object-Oriented Programming New features like Interfaces, Generics, etc. Meta-programming like Decorators Compile to javascript that can run on an older browser Code Auto-completion in the editor لا يعمل TypeScript في المتصفح أو مع node.js مثل Javascript للتنفيذ ، يحتاج TypeScript إلى compile إلى Javascript. يتضمن استخدام TypeScript استخدام compiler على سبيل المثال ، إذا كان لديك اسم ملف app.ts ، فسيقوم compiler الـ TypeScript بإنشاء app.js. سيتم استخدام هذا واحد لتشغيل التطبيق الخاص بك. لهذا السبب نقول أن TypeScript تساعد فيdevelopment time. كيفية install واستخدام برنامج TypeScript $ npm install -g typecript لتنفيذ Compiler $ tsc app.js أو watch mode $ tsc app.js -w سيعد الـ TypeScript تلقائيًا و Compiler لـ app.ts اليapp.js عند كل Save .