Full-Stack Development tips from mentors

في أول شغلك، مفيش حد هيقعد جنبك ويديك المعلومة على الجاهز، والفرق الحقيقي بين شخص "بيخلص تاسكات" وشخص "بيتعلم وبيسيب أثر" هو طريقة تعامله مع التيم.

عشان تعمل لنفسك بصمة وتثبت وجودك:

1. قاعدة الـ 30 دقيقة والبحث الذاتي: قبل ما تروح تسأل السينيور أو التيم ليد، اقرأ الكود، راجع الـ Docs، وشوف الـ Git history والـ PRs القديمة للفيشر دي اسال ال ai لو موصلتش لحاجه ومفهمتش وقتها تقدر تسأل بعد ما تكون حاولت بنفسك، سؤالك بيكون: "أنا حاولت أحل الموضوع بالطريقة الفلانية بس وقفت في النقطة دي، إيه رأيك؟" مش "هو ده بيتعمل إزاي؟".

2. افهم الـ "ليه" مش بس الـ "إزاي": التاسك اللي في إيدك مش مجرد كود بتكتبه، هي جزء من بيزنس كامل. افهم التغيير ده بيخدم مين، وإيه الـ Impact بتاعه على السيستم وباقي التيم.

3. سيب المكان أحسن من ما دخلته: لقيت جزئية في الكود مبهمة؟ شفت توثيق (Docs) قديم ومحتاج تحديث؟ حليت مشكلة غريبة وطلعت بحل ليها؟ اكتبه وشاركه مع التيم. التوثيق هو أسهل وأسرع طريقة تثبت بيها إنك شغال بعقلية الـ Ownership وبتخدم التيم كله مش بس نفسك.

الأثر مش بيتعمل بالصوت العالي ولا بعدد الساعات، بيتعمل بأن الناس ترتاح وتثق إن التاسك لما بتدخل تحت إيدك هتطلع مدروسة ومفهومة.
عشان كده عملت سيشن ازاي تبقي من مجرد شخص بيخلص التاسكات لي software engineer

ازاي تبني "مُهندس برمجيات" او Software Engineer

في أحد جلسات التدريب , كان في شخص عقليته قوية جداً ولكنه لسه بيبدأ

واحنا بنبي الـ Plan او الـ خطة الخاصة بالمذاكرة , كنت حريص جداً اني امشي معاه بـ "نهج" مُختلف عن ما بمشي مع اي طالب واني استغل العقلية القوية الـ قدامي وابدا معاه كالأتي :-

1. انه يتعلم كويس ازاي يطلع الـ Requirements من التاسك
   1. سواء الـ Functional والـ None-Funcational
   2. يقدر يطلع الـ Requirements الـ Out-Of-Scope
2. انه يتعلم كويس ازاي يطلع Capacity Estimation
   1. يعني يقدر يحسب الـ Read / Write Per Second لمليون مُستخدم للخدمة
   2. انه يقدر يحسب احتياج الـ Storage علي مدار 5 سنين بـافتراض 500 بايت في الثانيه
   3. ازاي يحسب الـ Bandwidth In/Out
3. الجزء التالت كان الـ HLD او النظرة العُليه لتصميم السيستم بتاعي
   1. وبدأنا نتكلم انها ازاي يعمل HLD Diagram components سواء للسيستم
   2. و الـ Request Flow , Sequence Diagram
   3. انه يقدر يشرح كل Component موجود في السيستم والـ Coupling كمان

وقولتله أخر البلان هاخد منك Key Decisions علشان اعرف كل قرار انت خدته

وفعلاً : مكدبش خبر وبدأ انه يشتغل علي بلان , بدون تعليقات زي ( الـ Ai بيعمل ده )

حالياً نفس البلان دي هكررها مع شخص تاني بنفس الـ عقلية الفذة العبقرية

علشان عارف كويس ان توجيه الـ Ai وقراراته محتاج مُهندس مش مُبرمج حافظ الـ كود

ايه رأيكم في البلان دي ؟ وهل تقدر تطبقها مع نفسك ؟

المصادر تحت الـ Tip تقدر تتعلم كل حاجه قولتهالك في البوست ده

هشاركك سر من اسرار الـ Ai لو بتتعامل مع اي Model فـ في Skills مخفيه للمذاكرة والكودينج والـ Engineering

لو جيت تتعامل مع اي مودل من الـ Ai وكتبتله الـ Prompt ده مع الكود بتاعك

[Your Code Here]
--- Generate skills
(ON) ENABLE
/study-mode /review-mode /SDLC-ANALYSIS /CLEAN-CODE /CLEAN-ARCHITECT /BOUNDED-CONTEXT

هيقولك انه مش لاقي المهارات دي بس هيعملها Generate وهيبدا انه يعملك تحليل للكود ويفهم الـ SDLC ويربط الكونتيكست كويس جداً بباقي المشروع لو فاتحه علي claude code مثلاً

وبعد كده هيبدأ انه يفهمك ويشرحلك كل جزء بالمبادئ والـ concepts & principles الـ محتاج تفهمها وتعرفها

وكمان هيبدأ يشرحلك كـ system design والـ المفروض يتعمل والـ ميتعملش

خد بالك ان ده ينفع مع الـ Code مش الـ SQL Queries خالص

لو عندك سُر او حركة او Trick ممكن تشاركها معانا اكتبها تحت في الـ Dicussion

عارف الفرق بين ReactJS و NextJS؟
عارف بجد .. ولا عامل نفسك عارف ..!!

تعالى اقولك على نقطة واحدة بس ..

✅ الـ ReactJS هي مكتبة js بتستخدم في الـ development .. ولما بتخلص dev بتعمل build .. وتطلع ملفات (html + css + js + assets) حقيقة تقدر تعمل ليهم host على اي server براحتك من غير ما تاخد معاك react ع السيرفر اصلا ..
اقولك ع الكبيرة كمان .. تقدر تشغل الـ build بتاع react على github pages مجانا ..
يعني من الآخر هي مجرد ملفات .. واحنا محتاجين سيرفر يبعتها للشخص اللي يطلبها .. وهي هتتـ render في المتصفح عادي جدا ..
يعني مش محتاجين running process على server علشان نشغل react app ..

✅ اما الـ NextJS .. فهي مكتبة بتفضل مكملة معاك حتى بعد الـ development وبتفضل ماسكة المشروع في الـ production وهو live .. لانها بتعمل running process على السيرفر .. يستقبل هو الـ requests ويشوف كل request عايز ايه .. وبناءا عليه يرد ..
وبالتالي .. ممكن يكون الـ request دا api request عادي مش frontend .. ومن حق NextJS انها تقفله بـ auth الأول بحيث مش كل الناس تقدر توصله .. وكمان تقدر جدا انها تقرأ بنفسها الـ database او تكتب عليها مع كل request عادي ..
ودا يا سيدي اللي خلى NextJS تكون full-stack framework على عكس ReactJS ..
يعني NextJS مطلعتش مجرد مكتبة بتخلي ReactJS تبقا احسن مع الـ SEO وبس .. شوفت بقا ..

لو عجبك الكلام .. اضغط على الـ Helpful button اللي تحت هنا ..
ولو عندك اي استفسار .. اكتب comment هنا ..
او تعالى ندخل سيشن mentorship ندردش سوا في الاسئلة بتاعتك ..

كان معايا جلسة إستشارة من دقائق معدودة لـ شخص رائع اشتغل في مجال الـ Software لمدة طويلة جداً ولكن كلها في Software Houses ومشاريع فريلانس .

والمشكلة هنا ان مشاريع الفريلانس والـ Software House نادراً ما بيتم حسابها كـ خبرة عند الشركات الـ كبيرة او الـ مُحترمة

الشركات نوعين

1- الـ بتعتمد علي برودكت او المُنتج زي طلبات و فودكس و Koinz وشركات تانيه كتير ودي بتكون افضل وبتميل للـ Engineering اكتر

2- السوفتوير هاوس ودول مبيفرقش معاهم الا الـ Scalability والـ Capacity وكمية المشاريع الـ بتطلع علشان يوفوا عدد العملاء الكبير ومبيهتموش بالـ Engineering بشكل صريح

3- فريلانس او العمل الحُر وده بيعتمد علي عميل الـ قدامك والبيئة الـ بيوفرهالك للشغل واغلبها مفيش Hierarchy واضحه او حد بيشرف عليك بشكل مُباشر فـ تعرف مشاكلك فين

وهنا انت المطلوب منك تملئ الفراغ - Gap بين معرفتك بالتكنلوجي الـ بتخليك تعمل اي مشروع

وبين احتياجك للمبادئ والمفاهيم الهندسية الـ المفروض تأهلك لسوق العمل في شركات الـ Product Base

بدأنا البلان بتاعتنا ازاي ؟ :-

الاول محتاجين نحدد نقاط الضعف والـ محتاجينها كويس

1. بدأنا ندرس الـ HLD , LLD وناخد تاسك علي كل واحده فيهم
   1. بداية من الـ Api Versioning والـ Component Coupling / Uncoupling وغيرها
   2. والـ Request Flow والـ Software Quality
2. ولإنه عارف Database كويس بس مش مُتعمق في الـ Indexing والـ Lock والـ Optimization Queries
   1. خدنا الـ Relational DB SQL بشكل مُتعمق
   2. وهنعدي علي Non Relational مرور الكرام لإننا مش هنحتاجها للهدف بتاعه
3. وقررنا اننا نفهم الـ Agile ( Scrum ) لإنه علشان يشتغل في شركة
   1. محتاج يعرف كويس الـ Story Points بتتحط ازاي
   2. ومحتاج يتأكد انه فاهم الـ Scrum Manifesto

دخل معايا شخص عبقري تم إستغلاله من الشركات

في جلسة الإستشارة عرفت إنه مر بمراحل كتيرة جداً في الكارير بتاعه تخليه يحس انه Senior لإنه

1. تفوق في مشروع الجامعه
2. تفوق في الـ ITI ومنحة مصر الرقمية
3. تفوق في التعامل مع الناس وطريقة الكلام واكتسب Soft Skills رهيبه

وده الـ خلاه يتعرض للإستغلال المهني , وده بيكون بسبب شخص موجود في الأغلب بكل مكان لم بيشوف طالب شاطر بيبقي عايز يرشحه لشركة مُعينه بهدف انه يكتسب خبرة وانه يشتغل .

ولإن الطالب بيكون نفسه جداً في الفرصة دي بيوافق بمبلغ زهيد جداً

وبيلاقي نفسه في شركة ملهاش هيكل إداري ولا للفريق

مُعتمدين عليه في كل حاجه

مبياخدش فلوس كفايه مُقابل الـ هو بيقدمه

علشان كده هديك نصيحة النهارده ( مش كل تدريب هو فرصة )

اي تدريب او فرصة توظيف لازم تسأل قبلها المسئول عن ( هيكل الترقيات /Staff Movement )

فيما معناه , انا بعد فترة طويلة هكون ايه ؟

هل هفضل زي ما انا متدرب

هل هفضل جنيور و تستغلوني براحتكم ؟

هل مُرتبي هيزيد ؟

ممكن تشوف ان ده في البداية Redflag وتبقي خايف انهم ميقبلوش بيك

ولكن صدقني الـ هيحصلك بعدها بسبب موافقتك علي شركة انت متعرفش هيكلها الداخل عامل ازاي هيكون اسوء من انك تقعد من غير شغل او من غير تدريب , لإنك هتلاقي نفسك في الاخر حاطت في ال ـCV انك 3 سنين خبرة وفي الحقيقه متقدرش تحسب انك سنة واحده حتي بسبب الـ هم عملوه فيك.

لو معاك قرشين زيادة وشغال من البيت، دي شوية "رفاهيات مهمة" لو جربتها هتفرق جداً في صحتك النفسية والجسدية وإنتاجيتك:

1- مسند الماوس والكيبورد: مخدة صغيرة بتتحط تحت إيدك بتحمي عروقك جداً

2- كيبورد ميكانيكال (Blue Switch): صوته عالي شوية، بس ممتع جداً في الكتابة وكأن الزراير بتنطرك للي بعده، ومريح جداً في الشغل الطويل.

3- كرسي طبي: بلاش كراسي الجيمنج، وهات كرسي ثلاثي الدعامات داعم للرقبة، وأهم حاجة مساند إيده تتحرك مع كوعك.

4- إضاءة الشاشة (Monitor Light): بتنور مكتبك من غير ما تنور الأوضة كلها، مريحة للعين وبتدي شكل رهيب للسيتاب.

5- حامل الشاشات (Arms): بيرفع الشاشات لمستوى نظرك عشان تحافظ على رقبتك من الوجع وماتضطرش تروح تتعالج.

6- حامل الموبايل: بيخلي الفون قدام عينك وبيشحن، من غير كركبة أسلاك وعلشان تشوف النوتيفيكيشنز براحتك.

7- شاشة بالطول (Vertical): ممتازة للمبرمجين في قراءة الكود براحة وسرعة، وممكن تجيبها استيراد بسعر رخيص. 8- الـ Pegboard: لوح تخريم بيتعلق على الحيطة عشان تعلق عليه السماعة، الكاميرا وأدواتك، بينظم الدنيا وشكله شيك.

10- قاعدة المجات الذكية: بتحافظ على قهوتك سخنة أو مشروبك ساقع وانت شغال.

11- حامل لابتوب: حامل بيطلع وينزل معاك وبيبرد اللاب في نفس الوقت.

أما لو عايز تدلع نفسك عـ الآخر، هات جهاز مساج لرقبتك ودفاية لرجلك تعمل مساج وتدفيك!

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

ببساطة الفكرة بدأت من موقع أجنبي مشهور موجود فيه معظم الـ Software Engineers الـ في العالم والـ شغالين في ميتا وشغالين في فيسبوك وغيره , ولكن أسعارهم مُبالغ فيها جداً لدرجة إن الميتنج الواحد بيكلفك 500 دولار

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

علشان كده عملنا موديول المينتورشيب , علشان الناس الـ عندها خبرة تقدر تفيد بعض

الفكرة الحلوة هنا انك مش لازم تكون جنيور او طالب علشان تستفاد , كفاية جداً انك تاخد استشارة في اي مجال انت عايزه , باسعار غريبة جداً يعني ممكن تدخل إستشاره كامله لـ ساعتين بـ 300 لـ 700 جنيه , الـ هو ثمن قهوة وكيك

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

انا محتاج منكم تجربوا الموديول وتقولولي رأيكم

ليه بنحس إن تطبيقات زي Stripe و Apple و Linear منتجات بملايين الدولارات، بينما أغلب تطبيقات الSaaS والEnterprise بتبان عادية؟

خلال شغلي السنين اللي فاتت على أنظمة ضخمة، ك Senior software engineer كنت دايماً مهتم جدا بتجربة المستخدم (UX). بنهتم بالألوان والأنيميشن والتصميم، لكن دايماً كان فيه حلقة مفقودة.

المستخدم لما يعمل اي action زي انه يضغط save , or delete أو ينفذ عملية دفع، بيضطر يفضل باصص ومستني التنبيه يظهر. في حين إن المنتجات العالمية بتعتمد على Multi-Sensory Feedback — نغمة رنين خفيفة جداً بتأكد لك النجاح في أجزاء من الثانية.

بس المشكلة: ليه أغلبنا Developers بنتجنب إضافة أصوات؟ عشان صداع ملفات MP3، وحجم التحميل، وبطء استجابة الشبكة (Latency)، ومشاكل SSR في Next.js.


عشان كده قررت أحل الموضوع ده ونشرت مكتبة مفتوحة المصدر بالكامل: Tonely شغال عليها بقالي فتره ولاكن جه الوقت تطلع للنور.. إيه فكرتها؟

Zero Audio Files: مفيش ولا ملف صوتي واحد! كل النغمات بتتولد برمجياً ولحظياً داخل المتصفح (Web Audio API).
سرعة فائقة (Zero Latency): الصوت بينطلق في أقل من 1ms بدون أي Network Requests.
حجم لا يذكر: حجم الحزمة بالكامل أقل من 1.5 KB — أصغر من أيقونة SVG عادية!


جاهزة لModern Web: متوافقة 100% مع Next.js (SSR-safe) و React و Vue وأي إطار عمل، مع نغمات جاهزة ومدروسة لحالات Success وError والتفاعلات اليومية.

لو أنت Frontend أو Full-Stack Developer، أكيد اتكرر معاك السيناريو ده: مستخدم بيرفع صورة من الموبايل تتفاجئ إن حجمها طالع 18MB أو 25MB!

المطورين عادة بيحلوا المشكلة دي بطريقتين: 1️⃣ تحديد حجم upload بـ Validation: وترفض الصورة لو أكبر من 2MB، بس هل المستخدم العادي هيعرف يضغط الصورة بنفسه؟ 2️⃣ الضغط على السيرفر: ترسل الصورة الخام للـ Backend أو تشترك في خدمات زي Cloudinary أو AWS Lambda، وهُنا بتدفع تكلفة وسيرفر أعلى.

طب إيه الحل؟ 💡 بعد ما واجهت المشكلة دي كتير، قررت أطلق مكتبة مفتوحة المصدر جديدة: compressly

ليه تجرّب compressly؟ حجم أقل من 3KB (أخف بـ 95% من المكتبات القديمة زي browser-image-compression). ⚙️ Web Worker مدمج: المعالجة بتتم في الـ Background بدون أي Freeze لـ UI حتّى على الموبايلات الضعيفة. حل اتجاه صور الآيفون (Auto EXIF): معالجة createImageBitmap تضمن إن صورة الـ Portrait متتقلبش بالعرض. 🎯 Adaptive Target Size: بتحدد الحجم المطلوب (مثلاً 0.5MB) وهي بتعدّل الجودة والأبعاد للوصول للهدف. 🚀 دعم Batch: رفع وجدولة عدة صور بالتوازي بدون استهلاك زائد للذاكرة. ⚛️ جاهزة لـ React & Next.js: تدعم SSR ومزودة بـ Custom Hook جاهز.