#نصيحة_فرونت

لما تشتغل عـ مشروع، جرّب تفصل بين شغلتين:

الـ UI (يعني كيف الواجهة بتبين)
و
الـ Logic (يعني كيف التطبيق بيفكر وبيتصرف)

ليش؟
لأنو إذا خلطتن سوا، الكود بيصير بتعدل زر، بينكسر شي تاني!

✅ خليك منظّم: – خلي الكومبوننتات تعرض بس المعلومات
– والوظايف (functions) تكون مسؤولة عن المنطق

مثال بسيط؟
عوض ما تحط الشيفرة يلي بتتحقق من الإيميل جوات الزر، اعمل وظيفة اسمها validateEmail() وخلي الزر بس يناديها.

هيك: – الكود بيصير أنضف
– تقدر تعيد استخدام الوظايف
– والتعديل بيصير سهل وسريع

سمعت نصيحة من سينيور – الكود الواضح أهم من الكود المختصر!

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

مثال من الفرونت:
بدي أظهر رسالة "تم الحفظ" إذا كان في status ناجح:

js

status === "success" && <p>تم الحفظ!</p>
شكلو حلو ومختصر، بس مو واضح لكل الناس—خصوصًا للمبتدئين أو زملائك يلي عم يراجعوا الكود بعد شهرين.

جرب هاد الشكل:

js

{status === "success" && (
<p>تم الحفظ!</p>
)}
أوضح، أسهل للقراءة، وبيراعي النظافة البصرية للكود.
كل ما كنت واضح، كل ما كبرت بثقة فريقك فيك!

سؤال ممكن ينسألك بمقابلة فرونت إند:

"شلون بتتعامل مع الـ responsiveness وقت بيكون المشروع كبير؟"

🚩 هون مو القصة بس تقول "بحط media queries".
المقابل بدو يشوف كيف بتفكّر كمطوّر عم يشتغل على مشروع حقيقي.

✅ مثال على جواب منيح: – ببلّش من الموبايل (mobile-first)
– بستخدم تايلويند أو SCSS mixins لسهّل الشغل
– بعمل نظام للمسافات والخطوط حسب حجم الشاشة
– وإذا في design system جاهز، بستخدم الكومبوننتات اللي فيه لأنها أصلاً متجاوبة

🛠 ونصيحة: لا تقول "بس ضفت media query" وخلص... احكي كيف رتّبت الشغل ليكون الموقع فعلاً بيشتغل على كل الأجهزة.

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

سؤال مقابلة مميز إذا كان عندك صفحة فيها كتير عناصر (متل 1000 منتج)، كيف ممكن تحافظ على أداء الموقع ويضل سريع وما يعلّق؟

✅ ليش هاد السؤال مهم؟
لأنو المقابِل بدو يعرف إذا بتفهم إنو الكود مو بس يشتغل، لازم يشتغل "بذكاء" وما يبطّئ الموقع.

🧠 كيف ممكن تجاوب؟

ما بعرُض كل العناصر مرّة وحدة
يعني ما بحط الـ1000 عنصر كلّن عالصفحة، لأنو هالشي رح يبطّئها كتير.

بستخدم Pagination أو Infinite Scroll
بقسّم العناصر، مثلاً بعرض أول 20 منتج، وبخلي المستخدم يضغط "التالي" أو بعمل تحميل تلقائي لما يوصل لنهاية الصفحة.

Virtualization
بستخدم مكتبات متل react-window أو react-virtualized، هاي ما بتعرض إلا العناصر اللي ظاهرين عالشاشة، والباقي بيتخبوا ليخفّ الضغط عالصفحة.

بحمّل الصور أو البيانات بشكل كسول (Lazy Loading)
يعني الصور ما بتنزل إلا إذا قربت تظهر عالشاشة، وهيك الموقع بيفتح أسرع.

🎯 نصيحة :
وقت تحكي عن الأداء بالمقابلة، حاول دايمًا تربط بين المشكلة (عناصر كتيرة = بطء) والحلول العملية اللي جربتها أو قرأت عنها، ولو عندك مشروع طبّقت فيو هيك شي، احكي عنو، بتكسب نقاط زيادة!

أدوات بتسندك كـ Junior Frontend Developer"
وهي أول أداة:

🔧 Box Shadows CSS Generator
هي أداة بتخليك تولّد تأثير ظل (shadow) للعناصر بسهولة من غير ما تكتب الكود بنفسك.

🌐 الموقع: https://cssmash.com/box-shadow-generator
🧠 ليش مفيدة؟ بتساعدك تشوف التأثير بصريًا وتنسّق الستايل بشكل سريع واحترافي، خصوصًا لو لساتك جديد عالـ CSS.

🧠 الخطوة 5 من جونيور لـ ميد ليفل: افهم الـ API، مو بس تعمل Fetch وتروح!
المبرمج الجونيور غالباً بياخد رابط الـ API وبيعمل عليه fetch وبس.
بس الميد؟ بيفهم القصة كاملة، وبيعرف يتعامل مع الـ API كأنو عم يحكي مع الباك.

✅ كيف يعني؟

بيعرف شو الفرق بين GET, POST, PUT, DELETE، وكل وحدة لمين بتنستخدم.

بيعرف يقرأ توثيق (Documentation) أي API خارجي ويشتغل عليه بسهولة.

بيعرف شو يعمل إذا رجعله Error متل 404 أو 500 أو 401.

ما بيكب الكود وين ما كان! بيفصل ريكويستات الـ API بملف لحال (مثلاً: api.js).

ممكن يستخدم أدوات متل Axios ليخلي الكود أنضف وأسهل.

✅ مثال صغير:
الجونيور ممكن يكتب هيك:

js

fetch('/api/products')
بس الميد؟ بيكتب:

js

import { getProducts } from './api/products';

const products = await getProducts();
وهيك صار كل شي مرتب وواضح، ولو تغيّر رابط الـ API بعدين، ما بدك تفتل كل الكود!

أدوات بتسندك كـ Junior Frontend Developer" 🔧 أداة اليوم: Responsively App
بتخليك تشوف موقعك بأكتر من حجم شاشة بنفس اللحظة! 📱💻

✅ ليش مفيدة؟
– بدل ما تضل تفتح أدوات المطور وتغيّر بالحجم كل شوي، هي بتعرضلك الموقع على موبايل، تابلت، وديسكتوب سوا.
– بتسرّع شغلك خاصة وقت تشتغل على تصميم متجاوب (Responsive).
– مجانية ومفتوحة المصدر!

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

git init aleppo_developer_community ✨
git commit -m "First step"
git push 🚀

#ADC #Aleppo_developer_community
#WeAreCooking

Follow Us :
Instagram
Facebook
LinkedIn
Telegram

مبروك لسوريا 💚🔥
رفع العقوبات عن بلدنا الحبيب😍

تطبيق " لقطة " اسم على مسمى🔥💙


https://www.instagram.com/reel/DJrsXn-K20S/?igsh=ZHdybDRnd3IweDE=

🧠 سمعت نصيحة من سينيور

"لا تضل تفكر إنك لازم تعرف كلشي قبل ما تبلّش. أحيانًا أفضل طريقة تتعلم فيها، إنك توقع وتصلّح."

🔸 لما تشتغل على مشروع وبتغلط، هاد ما بيعني إنك ضعيف… بالعكس، هاد دليل إنك عم تتعلّم صح.

🔸 أهم شي تضل عم تجرّب، وتطلب feedback، وتسأل بلا خجل.

تذكّر: السينيور اليوم… كان مبارح جونيور مثلك تمامًا.

🚨 تنبيه عاجل لكل السوريين! حملة اختراق واسعة تستهدف واتساب! 📱🔐

يا جماعة الخير، الهيئة الوطنية لخدمات تقانة المعلومات نبهت على حملة اختراق جديدة بتستهدف حسابات واتساب السوريين!

شو عم يصير؟
- جهات مجهولة بتسجل خروجك من حسابك وتشتغل عحسابك من أجهزتهم!
- طريقة نصب جديدة: بخدعوك تشارك معهم رمز التحقق (OTP) اللي بيوصلك عالرسايل!

---

🛡️ إرشادات أمان ضرورية:
1️⃣ ممنوع تشارك رمز OTP مع حدا، حتى لو قالك "مدير واتساب" أو "دعم فني"! 🚫
2️⃣ شغّل "التحقق بخطوتين" هلء فوراً:
⚙️ الإعدادات ← الحساب ← التحقق بخطوتين ← تفعيل
3️⃣ ضع رمز PIN مكون من 6 أرقام.
4️⃣ أضف إيميل لاسترجاع الحساب إذا ضاع.
5️⃣ تجاهل أي رسالة تحقق مو طالبها!

---

⚠️ إذا اخترق حسابك:
- حذف التطبيق وتنزيله مرة ثانية.
- أدخل رقمك، واستخدم رمز OTP + رمز التحقق بخطوتين (إذا كان مفعل).
- إذا ما كنت شغلت التحقق بخطوتين، ممكن ما تقدر تسترجع حسابك! 😱

---
شارك البوست. .. قد تكون سبب بإنقاذ حساب أحد أحبابك! 💙

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

بتتذكّر أول مرة فتحت ملف 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
ما عم تعرف تنسّق ألوان الموقع؟ هاد الموقع فيه آلاف الباليتات الجاهزة، اختار يلي بناسبك وبلّش!

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