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

طريقة انشاء بروجكت React باستخدام vite تابع الفيديو.

We’ve Got Some New CSS Features!

https://medium.com/@jesusmejiasg/weve-got-some-new-css-features-a3e8595fda66

10 Useful JavaScript Coding Techniques That You Should Use

https://javascript.plainenglish.io/10-useful-javascript-coding-techniques-that-you-should-use-f20bf9b8a7dd

Clean Code in TypeScript
https://link.medium.com/L75XLIEDYub

20+ React Libraries to Jumpstart your Next Project:-


1. General Utilities:-

The npm packages in this category are just packages that are helpful so few specific tasks and you may eventually need them. The packages in this include:

- moment.js — very good for working with dates
- Axios — good for handling async tasks
- React-hot-toast, React-toastify — handling small notifications and toasts
- react-icons,” @mui”/icons-material For icons
- react-paginate — For pagination
- React-share — Share things Socially
- React-slick, react-responsive-carousel — For Carousel
- clsx — For conditional classes
- react-intersection-observer — For intersection
- react-dropzone — For file upload and drag and drop.

2. Animation:-

Bringing animation to your site just makes it more fun and pleasant for your viewers. That being said, the packages under animation include:

- GSAP
- Framer motion
- React-spring
- Anime.js

3. State Management:-

Sometimes the data in your React.js application can be very difficult to manage effectively and the React content API isn’t just good enough. That being said, the packages under state management include:

- Redux
- Redux Toolkit — my personal favourite
- Recoil
- Mobx
- React Context — not recommended for big projects

4. server-side rendering:-

if you are building a highly optimized robust website you will need an SSR framework because they make routing easier, they fetch data on the server and return to the component, they optimize images so it doesn’t bottleneck performance, and much more. That being said, the packages under server-side rendering include:

- Next.js
- Gatsby.js — for only SSG (static site generation)
- Remix

ما هي 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 .

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

Node.js visualized: Event Loop Phases

مراحل Event loop في Nodejs

https://dev.to/nodedoctors/animated-nodejs-event-loop-phases-1mcp

em & rem CSS

خلصت مذاكرة 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
----------------

Push & Pop method in JavaScript

What happens when React components render:

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

ازاى 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/