من تجارب الفرونت إند

بتتذكّر أول مرة فتحت ملف HTML وكتبت <h1>؟
أنا بتذكّر حالي كنت مفكرة رح أعمل موقع كامل بـ 3 سطور 😂

بس مع الوقت تعلمت هالنصيحة يلي غيرت نظرتي:

💡 "كودك هو صورتك، خليه نظيف وواضح حتى لو كنت لحالك!"

✨ وبهالطريق تعلمت:

كل شي إلو مكانه: HTML = هيكل، CSS = أناقة

ما تحشر الـ style جوات الوسوم! خليه بملف خارجي

استخدم DevTools كأنك عم تلعب لعبة اكتشاف — بتفحص، بتجرب، وبتتعلم

وهي معلومة سريعة مشان نختمها :
👉 display: flex هو صديقك الجديد، بيوفر وقت وبيخلي تنسيق العناصر متعة! بس لازم تفهمه مو تحفظه.

جمعة مباركة💛

الملتقى الأول لمطوري ومبرمجي حلب 🔥🤯

https://www.instagram.com/reel/DKDDKnHqV99/?igsh=MXI1M2VxdXkwNHRwZg==

سمعت نصيحة من سينيور فرونت : لا تبلّش بـ React قبل ما تفهم الأساس صح!

عم تشتغل فرونت؟ حابب توصل للاحتراف؟ بلّش من الجذور:

🔹 HTML مو بس وسوم <div> و<p>، لازم تفهم البنية المنطقية للصفحة. مثلاً، شو الفرق بين <section> و<article>؟ وليش نستخدم <main> بدل ما نحشر كلشي بـ <div>؟

🔹 CSS مو بس ألوان ومحاذاة! جرب تبني صفحة كاملة بـ Flexbox، ودرّب حالك تستخدم Grid. بتعرف تستخدم media queries لتخلي تصميمك متجاوب؟ أو تستعمل position: absolute بذكاء؟

🔹 لما تمسك هدول منيح، React ما عاد تكون مخيفة!
فهمك للـ DOM رح يساعدك تفهم الـ useEffect،
وفهمك للـ structure رح يخليك تبني components مرتبة.

💡 معلومة سريعة:
الـ React هي أداة قوية، بس ما بتعوض عن أساس ضعيف. متل يلي بيحاول يبني طابق خامس بلا ما يحط أساسات!

🚀 نصيحة أخيرة:
جرب تعمل project بسيط، صفحة فيها form، صور، روابط، وخلّيها تكون responsive، بدون أي مكتبة.
بعدها روح على React، ووقتها رح تفهم علي!

========================
أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال
===================
إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

🎯 3 أدوات بتسهل حياة أي فرونت إند جونيور:

1️⃣ Responsively App
برنامج مجاني فيك تشوف فيه موقعك كيف بيطلع على أكتر من شاشة بنفس اللحظة! كتير مفيد وقت تشتغل تصميم Responsive.
✨ إذا بدك شي سريع، فيك تستخدم أداة المتصفح: Ctrl+Shift+M

2️⃣ CSS Scan
إضافة للكروم، بتخليك تمرّ الماوس على أي عنصر وتشوف كل الـ CSS تبعو وتنسخو فورا بدون ما تفوت على الكود.

3️⃣ Color Hunt
ما عم تعرف تنسّق ألوان الموقع؟ هاد الموقع فيه آلاف الباليتات الجاهزة، اختار يلي بناسبك وبلّش!

🧠 نصيحة:
لا تضغط حالك تحفظ كل شي، أهم شي تعرف كيف تلاقي المعلومة وتستخدم الأدوات الصح بالوقت الصح!

هاد موقع بيخلّيك تتعلم CSS بطريقة ترفيهية، جربه"

🕹 Flexbox Froggy

🧱 Grid Garden

لو انت مصمم او مبرمج مواقع او مسوق ف البوست ده هيوفر عليك كتير 👀

اهم المواقع اللي بتحتاج تسخدمها وانت شغال 🔥

مواقع الالوان:
1. https://colorhunt.co
2. https://klart.io
3. https://color.adobe.com
4. https://webkul.github.io
5. https://lnkd.in/dZ3it7H3

مواقع الصور:
1. https://unsplash.com
2. https://pexels.com
3. https://pixabay.com
4. https://stocksnap.io
5. https://burst.shopify.com

مواقع الصور بدون خلفية:
1. https://kisspng.com
2. http://pngimg.com
3. https://footyrenders.com
4. https://pngtree.com

مواقع الفيديوهات
1. https://mixkit.co
2. https://coverr.co
3. https://motionplaces.com
4. https://videezy.com

مواقع استلهام
1. https://inspirationde.com
2. https://lnkd.in/dtxP6wzR
3. https://pinterest.com
4. https://dribbble.com

مواقع استلهام لـ الشعارات
1. https://logomoose.com
2. https://logopond.com
3. https://logolounge.com
4. http://logofaves.com
5. http://logotalkz.com
6. http://logospire.com

مواقع استلهام لـ تجربة المُستخدم والتطبيقات
1. https://inspired-ui.com
2. https://calltoidea.com
3. https://lnkd.in/dpPWH-WB
4. https://uplabs.com

مواقع لتحميل الشعارات فيكتور
1. https://seeklogo.com
2. http://logovector.net
3. http://logotypes101.com
4. http://logos-vector.com

مواقع لتحميل الخطوط العربية
1. https://arbfonts.com
2. https://fontface.me
3. https://fonts.google.com
4. https://brushez.com/

مواقع لتحميل الخطوط الأنجليزية
1. https://dafont.com
2. https://1001fonts.com
3. https://fontsquirrel.com
4. https://lnkd.in/dGp6MXYJ

مواقع للقوالب
1. http://themeforest.net
2. http://bootstrapmade.com
3. http://startbootstrap.com

🔸 #مقتبس

عم تجهّز حالك لمقابلة عمل ومو عرفان من وين تبلّش؟
هالموقع فيه مجموعة مرتّبة من أكتر الأسئلة الشائعة يلي بتنطرح بمقابلات العمل، لتتدرّب وتكون جاهز بأفضل شكل! 👩‍💻👨‍💻
📌 https://interview-questions-puce.vercel.app/

لا تنسوا تبعتوه لرفقاتكم يلي عم يدوروا عشغل بنفس المجال 😄✨

بعد ما حضرت عدد مش قليل من مقابلات الـ Frontend ... حابب أشارككم أهم 5 أدوات أو محاور لازم تكون جاهز بيها في أي إنترفيو ...

LinkedIn Post : https://www.linkedin.com/feed/update/urn:li:activity:7342228793886961664/

Facebook Post : https://www.facebook.com/share/p/1Fk3ccYLCB/

Twitter (x) : https://x.com/MohmedHasheem/status/1936464660036833699

بالتوفيق و دُمتم سالمين مُعافين مٌتفوقين💕

كنت بعمل Interviews لـ 3 متقدمين على نفس الوظيفة.

نفس المؤهل.

نفس عدد سنين الخبرة تقريبا.

نفس المجال.

ونفس مستوى الشركات اللي اشتغلوا فيها قبل كده.

بس مع أول ربع ساعة ... بدأت الفروق الحقيقية تظهر.

المتقدم الأول:

أول ما دخل، سألني:

ممكن حضرتك تشرحلي الشركة دي بتعمل إيه أو بتشتغل في إيه ؟"

أتصدمت من سؤالة ...

الوظيفة معلن عنها بقالها أسبوع، والاسم واضح والويب سايت موجود، وكاتب

كل التفاصيل.

يعني داخل مقابلة مش عامل أي مجهود بسيط تعرف إحنا مين؟

كمان إجاباته كانت عامة جدًا. بيتكلم بصيغة "أنا اشتغلت كثير من غير ما يشرح عمل إيه فعلا

النتيجة ؟

طلع حافظ مش فاهم.

المتقدم التاني:

بدأ كويس جدًا، وكان شكله مرتب وكلامه لبق. لكن بعد أول سؤالين، دخل في موضوع المرتب.

هو المرتب كام ؟

وهتر دوا عليا إمتي ؟

هو الشغل من البيت ؟

الساعة كام بنخلص الشغل ؟"

كل تركيزه على حقوقه وده حقه طبعا ... بس مافيش أي اهتمام حقيقي بالدور نفسه. ما حاولش يعرف تفاصيل أكثر عن الشغل. ولا سأل سؤال واحد يوضح إنه مهتم يضيف للشركة.

النتيجة ؟

شكله متردد، وداخل يجرب حظه مش أكثر.

المتقدم التالت

الفرق بدأ من أول ما دخل

داخل مبتسم ومرتب

بدأ يعرف بنفسه بطريقة واضحة

شرحلي دوره السابق بلغة أرقام (أنا ساعدت الفريق يوصل لـ 120% من

التارجت - قللت زمن تنفيذ المشروع من (5) شهورل (4)

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

وقبل ما نخلص سألني

إيه أهم التحديات اللي الفريق ده بيواجهها دلوقتي ؟ وإزاي الشخص اللي هينضم ليكم ممكن يساعد في حلها؟"

السؤال ده لوحده خلاني أحترمه جدا واحترم طريقة تفكيرة

النتيجة ؟

هو اللي اتعرض عليه المرحلة اللي بعد كده من المقابلات.

الخلاصة ؟

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

اللي بيستحق الشغل مش الأذكي...

اللي ببيستحق هو اللي بيعرف يقدم نفسه بذكاء.

لو أنت بتدور على شغل، حضر نفسك كويس:

اعرف الشركة

ذاكر الوظيفة

حضر إجاباتك

واسأل أسئلة ذكية

منقول

🚀 نصيحة عن مقابلات العمل

السيناريو

وصلتك دعوة لمقابلة تقييم أمام شركة تقنية كبيرة، والوقت ضيق لتحضيرك.


---

النصيحة

1. ابحث عن الشركة مسبقًا
– شو مشاريعهم الحالية؟ تقنياتهم الأساسية؟
– شو ثقافة العمل عندهم (Remote vs. Office)؟


2. حضر أمثلة واقعية (طريقة STAR)
– Situation: “بالمشروع الأخير…”
– Task: “كنت مسؤول/ة عن…”
– Action: “عملت هيك وهيك…”
– Result: “والنتيجة كانت +30% أداء”


3. تمرن على الأسئلة التقنية
– حلّ مشكلة قصيرة على ورقة أو Whiteboard.
– راجع أسئلة الخوارزميات الأساسية (Array, Object).


4. جهز أسئلة بآخر اللقاء
– عن الفريق يلي رح تشتغل معه؟
– عن ثقافة التدريب والتطوير عندهم؟


5. تابع بعد المقابلة
– ابعت ايميل شكر وذكر نقطة حلوة نوقشت مع المحاور.


=======================
أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال
===================
إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

🚀 شو الجديد بـ React 19؟

React 19 صار في تحديثات كتير حلوة بتسهل علينا الشغل:

1. useTransition async
صار فينا نعمل تحديثات كبيرة بدون ما الصفحة توقف أو تتلخبط.


2. Suspense أذكى
التحميل صار أريح، بيوقف عرض الأشياء لحالها لما تجهز.


3. Server Components
بعض الشغلات صارت تشتغل عالسيرفر مو بس علمتصفح، فبسرع التحميل.


4. React Native جديد
TurboModules وFabric عملو شغل نظيف عالأداء عالتطبيقات.

========================
أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال
===================
إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

تم الاعلان عن ميزة " وضع الدراسة " او Study Mode في ChatGPT

لما تشغل وضع الدراسة و تسأل ChatGPT ما راح يعطيك الجواب مباشرة
وانما يرد بشكل تفاعلي يساعدك تفكر و تفهم لين توصل للحل 👌🏼
والجميل ان مستوى الشرح يختلف حسب المستوى التعليمي و المرحلة الدراسية

📌 شو هو الـ API؟

بتعرف لما بتطلب قهوة بالكافيه، ما بتروحوللمطبخ، في نادل بياخد طلبك ويرجعلك القهوة؟
هاد النادل هو الـ API بالعالم الرقمي.


---

كيف بيشتغل الـ API؟

تطبيقك (الزبون)

السيرفر (المطبخ)

والـ API هو الوسيط يلي بيربطهم



---

مثال بسيط بجافاسكريبت:

fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log(data));

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


---

ليش مهم؟

بيسهل تواصل التطبيقات مع السيرفر

بفصل الشغل بين الواجهة والبيانات

بيخلي الشغل مرتب وأمن أكتر



---

هل فعلا عم نستخدم قدرات الذكاء الاصطناعي بالبرمجة صح؟
هل استخدمنا الميزات الجديدة اللي نزلت بآخر كم شهر؟

خدلك نظرة خلال نص ساعة بهالكورس السريع ل gitHub Copilot
من المصدر الأصل مباشرة

https://learn.microsoft.com/ar-sa/training/modules/introduction-prompt-engineering-with-github-copilot/