Developers School

Important google chrome Extension

⚡️ Fake Filler
.بتساعدك انك تملي وحدات الادخال الفارغه عند الضغط عليها📌

⚡️ Lorem Ipsum Generator

.بتساعدك انك تستمد منها المقالات اللي تساعدك ف التصميم📌

⚡️ JSONViewer
JSON Data بتساعدك تبني📌

⚡️ GoFullPage - Full Page Screen Capture
.بتساعدك تاخد سكرين لكامل الموقع📌

⚡️ Page Ruler
بتساعدك من خلال تقسيم الموقع اللي مكعبات فتساعدك ف تحديد الابعاد
____________________________________________________________________

📌 الكمبيوتر بيتكلم zeros and ones ، طب لية ؟

✅ اللاب توب الكمبيوتر الموبايل اى جهاز الكتروني بيحتوي بداخله علي مجموعة من ال transistors المعروفة باسم switches وحجمها صغير جدا و عددها كبير ، تصل للآلاف و يمكن ملايين من الترانسيستورز بداخل الكمبيوتر او اللاب توب او الموبايل
و بتشتغل On and Off .

لما بتوصل كهرباء بتكون on او نقدر نمثلها ب 1 .
و لما مش بتوصل كهرباء بتكون OFF او نقدر نمثلها ب 0 .

- ال switches دى لما بتشتغل on و off ب pattern مُعين ، ممكن يعد من رقم 0 الي 7 و بالتالي ممكن يعد لاكتر من كدا ....

يعني مثلا الانسان لما بيتعلم الأرقام و هو صغير بيتعلم من 0 الي 9 و دي بنقول عليها Decimal numbers .

اشمعني من 0 الي 9 ؟
لأن باقي الأرقام ما هي الا تكرار بشكل مُعين للعشر أرقام دول بس
(0 , 1 , 2 ,3 ,4 ,5 ,6,7 ,8,9)

زى كدا
10, 11, ..... 20, 21......,29 ,30,31 .....40....50....100 ... 200 ... 1000 ......1001 , 1002,.....10,000 and so on .

نفس الفكرة مع الأرقام في الكمبيوتر بس هو بيعد Binary مش Decimal و عنده two digits فقط الصفر و الواحد
و لكن ب pattern مُعين هيعد من 0 الي 7 زي كدا

000 = 0
001 = 1
010 = 2
011 = 3
100 = 4
101 = 5
110 = 6
111 = 7

-----------------------------------------------------------

The computer speaks Only two digits 0 or 1
( Binary numbers ) .

But human use decimal numbers from 0 to 9 and repeate it and having a much more numbers

The same the computer use from 0 to 7 represented by Binary.

عامل اي ي هندسه💙🤗

المقال طويل بس اوعدك هيخليك رايق طول حياتك

جايلك النهاردة بحاجة مختلفة.. من النادر أن حد يتكلم فيها أو يبحث عليها
لو انتا ف أنا جايلك بشوية اضافات هتسهل عليك شغل الكود بس مش في محرر الأكواد لأ
دي في متصفح جوجل كروم.. تعال نبدأ بس ي زعيم وانا ه افهمك 💙☺

1️⃣ أول اضافة حابك تعرفها هي Responsive Viewer ودي هتنفعك جدا لما تيجي تظبط ال media query يعني بتساعدك في عرض الموقع بتاعك على جميع أحجام الشاشات بدون أي مشاكل
هتفتحلك شاشة التلفون والتابلت والكمبيوتر في نفس صفحة جوجل كروم.. وهتقدر تشتغل برواقه من غير ما تظبط المتصفح بشكل يدوي مزعج ومرهق
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb

2️⃣ الاضافه التانية ودي أروق اضافة بينهم وهتبهرك فعلا وهي اضافه Css Peeper
وكل اللي انت بتعمله هنا ان بتروح للموقع اللي انتا عايزة وتشغل الاضافه في المتصفح بتاعك
والاضافة دي بتديك كل الصور المستخدمه في الموقع وكمان كل الالوان مع الكود والمسافات والأرقام
وكل خصائص ال Css المستخدمه في الموقع دا
وكمان ممكن تدوس على اي نص في الموقع والاضافة دي هتديك حجم واسم ولون الخط المستخدم
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk

3️⃣ الاضافه اللي جايه دي بقا اسمها What Font ودي هتقدر تعرفك على أنواع الخطوط المستخدمه في صفحات المواقع
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

4️⃣ الاضافه دي كمان هتفيدك اسمها ColorZilla وبتساعدك تتطلع كل الألوان اللي عندك في صفحة الموقع بطريقة سهلة
https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

5️⃣ تعالى بقا ل أكتر اضافة هتعجبك وتفيدك جدا وتدعيلي عليها
الاضافه دي اسمها Wappalyzer
ودي بمجرد ما تعملّها اضافة في متصفحك وتجيب أي موقع يقابلك في طريقك هتلاقي الاضافه دي بتديك كافة الفريمووركس اللي اتعمل منها الموقع سواء ريأكت او انجولار او اي فريم وورك تاني
وبتعرفك الموقع دا استخدم Bootstrap ولا استخدم Tailwind وحتى لو اتعمل من خلال الووردبريس
وبتعرفك ب كل المكتبات بتاعت الجافا سكريبت المستخدمة في بناء الموقع دا وكتير من المعلومات عن الموقع
https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

6️⃣ لو انتا بقا مطور فرونت اند وعندك خلفيه عن ال React ف الاضافة دي مهمه جدا اسمها React Developer Tools
و دا الرابط بتاعها
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

7️⃣ الاضافه دي بقا هتريحك من انك تبحث على برامج هتصورلك الشاشة بتاعتك فيديو.. الاضافه اسمها Guidde وهتساعدك في تصوير شاشتك فيديو ويمكن التعديل عليه كمان
https://www.guidde.com/?utm_source=twitter&utm_campaign=alfaiz

8️⃣ الاضافة الأخيرة وهي Gimli Tailwind ودي هتساعد الناس اللي بتستخدم مكتبة Tailwind أكتر من ال Bootstrap هتقدر من خلالها تعمل تعديل للموقع بتاعك بشكل سهل ومريح
https://chrome.google.com/webstore/detail/gimli-tailwind/fojckembkmaoehhmkiomebhkcengcljl

هاتقل عليك بس واقولك ادعمني واعملي فولو 💙🙏

استناني في المقالات اللي جاية عشان انا فعلاً مش حارمك من حاجة 💙💙

Responsive Viewer Show multiple screens once, Responsive design tester

ما هى البرمجة الكائنية (Object Oriented Programming)OOP 🤔؟

👈 لازم تبقي عارفها مهما كان مجالك البرمجي.

👈 هي ليست لغة برمجه ولكها طريقة لكتابة الكود.

👈 OOP ليست مفهوم جديد ولكن مفهوم قديم جدا.

👈 هي بتسمحلك انك تجمع tasks في class واحد ده بيساعدك ف تنظيم البيانات وتنظيم البنية الخاصة بالابليكيشن.
وده مخطط برمجي مبني علي مفهوم object.
مثال
عندي مخطط لمجموعة منازل وهو task ومجموعة المنازل يجمعهم مخطط وهو classes.
كل منزل يختلف عن غيره ف شكله او عدد غرفه وده بيسمي method.

عايز شرح للمصطلحات اللي ذكرناها 🤔

👈 كل ما ننظر له وكل ما هو موجود هو عبارة عن كائن object سواء كان انسان او كمبيوتر او سيارة …
وكل كائن يتكون من خصائص Attributes وافعال Actions.

👈 يعني ايهAttributes🤔؟
هي خصائص الكائن التي تاتي علي صيغة name = value
مثال
لون السيارة احمر وتترجم كالاتي car.color = red
فبالتالي
car هو object
color هو name
red هو value

👈 يعني ايهAction🤔؟
هي افعال الكائن التي يقوم بها.
مثال حركة السيارة

👈 يعني ايه class وايه علاقتها ب object🤔؟
object عباره عن نسخة من class وقد يحتوى class علي اكثر من object وبالتالي فان object او الكائن لا يمكن ان ينشا بدون class ف class يعتبر الشكل العام للكائن وهى ما تصفه.
بعد هذا التوضيح نصل الي ان المبرمج يستخدم class ف لغة البرمجه التي يعمل عليها ليصف شكل الكائنات التي ستصدر منه وبعد ذلك يصبح class مجرد نوع جديد ف تلك اللغه Data Type.

👈 اللغات الحديثه تدعم OOP مثال PHP / Python / Java

انا منبهر جدا بال Documentations الجديدة بتاعة ال React هي نسخة لسه beta بس منظمه جدا والشرح فيها واضح وشامل مع امثله كتيره مغطيين كل الحالات وتوصيات باللي مفروض تعمله واللي مفروض ماتعملهوش مجهود جبار جداً محطوط في المحتوي كأنه كورس شامل.

لو حد لسه ماشفهاش انصحه ياخد فكره ويبص عليها
beta.reactjs.org

Notes In HTML

اية هي ال Algorithms
باختصار يا صديقي هي طريقة حل المشكلة
لو احنا عندنا مشكلة واحدة و في 10 بيحلوها احنا ممكن نلاقي على الاقل 5 حلول مختلفة
كلهم صح و كلهم يؤدوا للنتيجة النهائية بس في حل بيوفر ال Memory كويس
و في حل تاني بيوصل للنتيجة باقل عدد سطور من الكود
و في حل تاني بيستهلك professing اقل
و كل حل من دول ماشي بي Algorithms مختلف عن التاني
لذلك دراستك لي Algorithms هتساعدك تحل مشاكل احسن و بافضل طريقة تناسب الحالة الي هتكون فيها

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

هل ممكن اشتغل في شركة و انا مش متعمق في ال Algorithms ؟
ايوة ممكن طبعا بس يا ترى هتكون شركة شكلها اية الي مش مهتمة المبرمج بيحل المشكلة بتاعته ازاي و يا ترى هيبقى شكل الكود عامل ازاي ويا ترى هتطور فيها و تترقى و تعرف تروح شركة اكبر و لا هتقف في مكانك دي كلها اسالة لازم تكون في بالك كويس🤔

يعني باختصار ال Algorithms خطوة مهمة جدا في طريق تعلمك للبرمجة و في طريق انك تحترف الشغلانة دي و تعرف تكسب منها فلوس كويس
في كورسات كتير اوي دلوقتي لي Algorithms بالعربي و بالانجليزي
يلا اختار الكورس الاسهل لك و اختار المدرب الي ترتاح له و ابتدي 💪

بالتوفيق للجميع

خطوات صغيرة مستمرة سهلة افضل من خطوات كبيرة صعبة 👌👌

Learn for free in 2023:

1. HTML 🔗 https://html.com
2. CSS 🔗 https://css-tricks.com
3. JavaScript 🔗 https://javascript.info
3. Git & GitHub 🔗 https://git-scm.com
6. React 🔗 https://react-tutorial.app
7. APIs 🔗 https://rapidapi.com
8. SQL 🔗 https://sqlbolt.com

SQLBolt - Learn SQL - Introduction to SQL SQLBolt provides a set of interactive lessons and exercises to help you learn SQL