<المبرمج السوري/>

اختصارات رح تسرّع شغلك في HTML! ⚡️💻 إذا كنت عم تستخدم VS Code أو أي محرر أكواد تاني، في شوية اختصارات HTML رح تسهّل عليك كتابة الكود بسرعة 1️⃣ html:5 اكتب html:5 واضغط Enter، رح يطلعلك هيكل صفحة HTML كامل مع العناصر الأساسية. 🚀 2️⃣ div.className اكتب div.container واضغط Enter، رح يتحول الكود لـ: <div class="container"></div> 3️⃣ الوسومات (هاشتاغ) #id اكتب الوسومات (هاشتاغ) #header واضغط Enter، الكود رح يكون: <div id="header"></div> 4️⃣ ul>li*5 إذا بدك تعمل قائمة فيها 5 عناصر؟ اكتب ul>li*5 واضغط Enter، رح يطلع لك: <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 5️⃣ a[href="#"]{Link Text} لإنشاء رابط بسرعة: <a href="#">Link Text</a> جرب هالاختصارات لتسرّع شغلك في الكتابة وتكون أكثر إنتاجية! ⏱️💥 ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

من أكبر التحديات اللي بتواجه أي حدا بيبدا يتعلم الفرونت إند هي البحث عن الـ API المناسب للمشروع. وصدقني هالموضوع ممكن يضيعلك وقت كبير كتير ‌:⁠-⁠|⁩ لهيك .. حابب شارك معكم واحد من أفضل المواقع اللي اكتشفتها .. وهو بمثابة كنز لأي مطور فرونت إند. هالموقع بيجمع كل الـ APIs اللي ممكن تحتاجها لأي فكرة مشروع بتخطر ببالك. إذا كنت عم تفكر تعمل أي مشروع  سواء كان بسيط أو معقد، هالموقع هو وجهتك الأولى. جربوه، ورح تشوفوا الفرق بنفسكم😁 رابط الموقع: ‌   rapidapi.com ======================== أنا  "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

كيف تلاقي شغل كـ Frontend Developer؟ 💻🚀 إذا عم تدور على شغل كـ Frontend وما بتعرف من وين تبدا، لا تاكل هم ... كلنا مرينا بهالمرحلة. الموضوع مو صعب بس بدو شوية تركيز وخطوات عملية. خليني خبرك عن الطريقة اللي بتساعدك توصل لأول وظيفة إلك: 1️⃣ ركز على شغلك واعمل Portfolio 🔥 اعمل مشاريع بسيطة متل Landing Page أو تطبيق React صغير يبين شغلك. خلي GitHub تبعك مرتب، وإذا فيك، اعمل موقع شخصي تعرض فيه مشاريعك. شغلة مهمة: ما تعمل مشاريع معقدة وانت لسه بالبداية.. ركز على إن شغلك يكون مرتب وبيوضح المهارات الأساسية. 2️⃣ منصات التوظيف هي كنزك حرفياً دور على LinkedIn، Wuzzuf، وIndeed. فلتر البحث بـ "Junior Frontend" مشان تلاقي فرص تناسب مستواك. تابع شركات شغالة بالمجال اللي بتحبه، وابعت لهم رسالة محترمة على LinkedIn: "أهلاً، أنا Frontend Developer ومهتم بالشغل معكم. ممكن أعرف إذا في فرص متاحة؟" 3️⃣ اعمل شبكة علاقات (Networking) تواصل مع ناس شغالة بالمجال، حتى لو Online. اسأل أصحابك أو الناس اللي اشتغلت معهم قبل إذا بيعرفوا فرص كويسة. 4️⃣ تطوع أو اشتغل فريلانس ابدأ بمشاريع صغيرة على مواقع متل Upwork وFreelancer. تطوع مع حدا من رفقاتك أو في مشاريع للمجتمع، حتى لو ببلاش.. هي الخبرة رح تفرق في الـ CV . 5️⃣ جهز حالك للإنترفيوهات دروس الأساسيات: HTML، CSS، JavaScript، وركز على React أو Vue إ. تدرب على أسئلة متل: حل مشكلة Array فيها عناصر مكررة؟ خلي عندك إجابات جاهزة لأسئلة الـ Soft Skills: "إكيف بتتعامل مع الضغط؟" "شو أكبر تحدي واجهته وحلته؟" 6️⃣ خليك متفاعل على LinkedIn بروفايلك لازم يكون متل الكتاب المفتوح: صورة محترمة، Projects مرتب، ومهاراتك واضحة. انشر شغلات بسيطة متل: "عملت مشروع بـ React اليوم، وهاي الـ GitHub Link إذا حدا عنده Feedback." 💡 خدها قاعدة: أول خطوة دايمًا صعبة، بس مع كل مشروع جديد أو إنترفيو هتلاقي حالك عم تتحسن. أهم شي لا تيأس وخليك متطور طول الوقت. ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

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

كيف تخلي صفحة الـHTML تحول الزائر تلقائيًا لصفحة تانية؟ سؤال ممكن ينسال ف ال Interview في عندك خاصية بسيطة اسمها meta refresh. شو يعني meta refresh؟ هي عبارة عن كود بتحطه داخل قسم <head> بصفحتك، وبتحدد فيه: مدة الانتظار قبل ما يتحول الزائر. الرابط الجديد اللي بدك الزائر ينتقل عليه. مثال على الكود: <meta http-equiv="refresh" content="5;url=https://example.com"> 👆 بالمثال اللي فوق، الزائر رح يتحول بعد 5 ثواني لصفحة اسمها example.com. أهم الاستخدامات: ✅ تحويل الزوار بعد رسالة شكر أو تأكيد: مثلاً بعد ما يسجلوا بحساب أو يكملوا عملية شراء. ✅ نقل الزوار من صفحة قديمة لصفحة جديدة: إذا غيرت تصميم الموقع أو الصفحات. ✅ تحسين تجربة المستخدم: ممكن تستخدمه لحتى تخلي الانتقال بين الصفحات أسهل وأسرع. شغلة أخيرة: لازم تنتبه! التحويل التلقائي إذا استخدمته بشكل مفرط ممكن يزعج الزوار، فحاول تستخدمه بحذر. وكمان ممكن يأثر على ترتيب موقعك بمحركات البحث إذا ما استخدمته بشكل صحيح. ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

تُعتبر الإضافات (Extensions) أدوات أساسية تعزز من كفاءة العمل وتساعد المطورين على كتابة كود نظيف ومنظم. 🚀 Live Server مشان تشوف التغييرات مباشرة بالمتصفح، وكل ما تحفظ ملف، التغييرات بتظهر مباشر 🎨 Prettier - Code Formatter بساعدك تنظّم الكود تلقائيًا، ليصير شكل الكود مرتب وسهل القراءة. ⚡️ ESLint مشان تتأكد إن الكود خالي من الأخطاء وتتبع معايير الجودة. 🪄 Bracket Pair Colorizer بساعدك تميز بين الأقواس لأنه بلونها بألوان مختلفة، مشان تسهل متابعتها. 💡 Emmet مشان تكتب HTML و CSS بسرعة باستخدام اختصارات. 🔍 Path Intellisense بسهل عليك التنقل بين الملفات ويكمل المسارات تلقائي. 🧑‍💻 Auto Close Tag بسكر الوسوم المفتوحة بـ HTML أو XML بشكل تلقائي. 👁‍🗨 CSS Peek بسهل عليك إنك تلاقي التعريفات الخاصة بالـ CSS من أي ملف تاني. ⌨️ JavaScript (ES6) code snippets بيعطيك اختصارات لكتابة أكواد JavaScript بسرعة. 📜 GitLens بساعدك تتابع تاريخ الكود وتعرف مين عدل بالمشروع. جرب هالإضافات ورح تشوف الفرق بشغلك! ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

تعتبر السيرة الذاتية هي بوابتك نحو الحصول على الوظيفة التي تتمناها .. إليك مجموعة من الأدوات الرائعة التي تساعدك في إنشاء سيرة ذاتية مميزة، سهلة الاستخدام ومتوافقة مع أنظمة تتبع المتقدمين (ATS): Resume: يوفر قوالب سيرة ذاتية مجانية وسهلة الاستخدام، ويضمن توافقها مع أنظمة ATS. Resume.com ResumeGenius: أداة لإنشاء السير الذاتية مع مجموعة متنوعة من القوالب والنصائح لتحسين السيرة الذاتية. ResumeGenius.com Jobscan: يقدم أدوات لتحليل السيرة الذاتية الخاصة بك مقابل وصف الوظيفة، مما يساعدك في تحسينها لتكون متوافقة معATS. Jobscan.com لا تنسَ أن السيرة الذاتية الجيدة هي أول خطوة نحو تحقيق أحلامك المهنية! ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

this في فانكشن الكائنات، يشير إلى الكائن الذي يحتوي على الدالة. في الفانكشن العادية، يعتمد على كيفية استدعاء الدالة. في Arrow Functions، يرث قيمة من السياق الذي تم إنشاؤها في

إذا كنت بتشتغل في الـ Front-End، أكيد بدك أدوات تساعدك تسهل شغلك وتوفر وقتك. Tailwind CSS هي مكتبة قوية بتساعدك، وفيه كمان عدد من المكتبات المبنية عليها بتوفرلك مكونات جاهزة. خليني أحكيلك عن أهم المكتبات: DaisyUI: مكتبة سهلة وبسيطة هالمكتبة بتضيف لك Themes جاهزة وبتعمل لك مكونات مثل الأزرار، التبويبات، والنماذج. المميز فيها إنها مرنة وبتقدر تستخدمها بأي مشروع. جربها من هون: daisyui.com Flowbite: للمشاريع التفاعلية إذا كنت بحاجة لعناصر ديناميكية مثل Modals أو قوائم منسدلة، هالمكتبة هي الأنسب لك. تصميماتها عصرية ومناسبة للـ Dashboards والمشاريع الكبيرة. الموقع الرسمي: flowbite.com HyperUI: للمتاجر الإلكترونية إذا شغلك على E-commerce، هالمكتبة بتوفر لك بطاقات منتجات، قوائم، وأجزاء Hero Sections بشكل عصري. جربها من هون: hyperui.dev Kitwind: بداية سهلة ومجانية مكتبة مناسبة جدًا إذا كنت لسه مبتدئ في Tailwind، فيها مكونات أساسية مثل الأزرار والترويسات. شوفها من هون: kitwind.io Headless UI: حرية التحكم الكامل إذا بتحب تتحكم بكل شيء بطريقتك، هالمكتبة بتعطيك مكونات جاهزة بدون أي Styles، فتقدر تضبطها بنفسك. مناسبة للتطبيقات المعقدة واللي بحاجة لتخصيص كبير. الموقع الرسمي: headlessui.dev Meraki UI: تصميمات خفيفة وبسيطة هالمكتبة بتوفر مكونات أساسية بشكل بسيط وخفيف. مثالية للمشاريع اللي مش بحاجة لتفاصيل معقدة. جربها من هون: merakiui.com Treact: لمواقع الـ Landing Pages إذا شغلك على مواقع بتحتاج Landing Pages، هالمكتبة بتعطيك تصميمات جاهزة. فيها أزرار، Headers، وأقسام ترويجية ممتازة. الموقع الرسمي: treact.dev 🔴كيف تختار المكتبة المناسبة؟🔴 إذا بدك Themes مختلفة: روح لـ DaisyUI. إذا شغلك على مواقع ديناميكية أو Dashboards: استخدم Flowbite أو Headless UI. للتجارة الإلكترونية: HyperUI هي الخيار المناسب. للمشاريع السريعة أو اللي بتبدأ فيها: جرب Kitwind أو Meraki UI. ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

7 أسرار لتطوير الـ Frontend اللي رح ترفع شغلك لمستوى تاني! 🚀🔥 إذا مفكر إن تطوير الـ Frontend بس أكواد HTML وCSS، معناته لسه ما شفت الصورة الكاملة! 🖥✨ الشطارة مو بس بالكود، الشطارة بالشي اللي بيعمل فرق كبير بالكفاءة، وسهولة الصيانة، وتجربة المستخدم كمان! 😎 خليني أخبرك عن 7 أسرار رح تغيّر فكرتك عن تطوير الـ Frontend ورح تحسن شغلك بشكل كبير! 💪 1. استخدم Design Systems بذكاء 🎨 بدل ما تعيد اختراع العجلة كل مرة، اعتمد على نظام تصميم (Design System) واضح وثابت. هيسهل عليك الشغل، ويضمن إن واجهة المستخدم متناسقة وسهلة الصيانة. 2. اهتم بـ Accessibility (A11y) 🦾 مو كل المستخدمين رح يستخدموا الماوس أو رح يقدروا يشوفوا كل شي. اهتم بإضافة Alt Text للصور، وتأكد إن كل عناصر واجهة المستخدم قابلة للتنقل عن طريق الكيبورد. كمان انتبه للألوان اللي بتستخدمها لتحسين القراءة. 3. اختصر الكود باستخدام الـ Utility Classes 🛠 بدل ما تكتب CSS لكل عنصر من جديد، جرب تستخدم مكتبات مثل TailwindCSS. هتقلل الكود، وتخلي الأداء أسرع، وكمان تضمن إن كل العناصر متناسقة. 4. استخدم الـ Server-Side Rendering (SSR) بذكاء 📄 إذا شغلك بـ React أو Next.js، خلي الـ SSR يخدمك: صفحات أسرع، وأداء أحسن على مستوى الـ SEO. بس انتبه، مو لكل شي، اختار الصفحات بعناية. 5. بطل تخاف من الـ Web Workers ⚙️ إذا عندك أكواد تقيلة، مثل العمليات الحسابية المعقدة، شغلها في Web Workers. هتقلل الـ Main Thread Lag وتخلي الموقع أسرع، وهذا بيحسن تجربة المستخدم بشكل كبير. 6. اهتم بالـ State Management بطريقة موزونة 🌐 مو لازم تضيف Redux لكل مشروع! استخدم Context API أو مكتبات أخف مثل Zustand لما المشروع ما يحتاج إدارة حالات معقدة. كمان فكر باستخدام Zustand مع Hooks لتحسين الأداء. 7. اشتغل على تحسين الـ Bundle Size 📦 كل كيلوبايت بيأثر! استخدم أدوات مثل Webpack أو Vite لتقليل حجم ملفاتك. وضيف Tree Shaking لتتخلص من الأكواد اللي ما بتستخدمها، ودائمًا راجع الكود قبل ما تنشره. ======================== أنا "ابراهيم قربيق" أعمل كـ Front End Developer أنشر محتوى بشكل شبه يومي يتضمن معلومات قيمة حول تطوير البرمجيات، أحدث التقنيات، وسوق العمل في هذا المجال =================== إذا كنت مهتماً بتعزيز مهاراتك أو ترغب في متابعة آخر المستجدات، فأنت في المكان الصحيح! انضم إليّ لاستكشاف عالم البرمجة والتكنولوجيا، ولنحقق النجاح معاً! 🚀💻

شرح عن وظيفة ال setTimeout هي دالة في JavaScript تُستخدم لتنفيذ كود بعد فترة زمنية محددة. إنها طريقة مفيدة لإضافة تأخير قبل تنفيذ جزء من الكود. setTimeout(function, delay)

تفسير للجواب ..😁 عندما نستخدم for مع setTimeout، الفرق بين var و let هو في كيفية تخزين القيم: var: إذا استخدمت var، كل الدوال التي تم إنشاؤها بواسطة setTimeout ستستخدم نفس القيمة النهائية للمتغير i بعد انتهاء الحلقة. النتيجة ستكون: 3، 3، 3. let: إذا استخدمت let، سيتم إنشاء نسخة جديدة من i في كل مرة تدور فيها الحلقة. النتيجة ستكون: 0، 1، 2.

سؤال ممكن يجي بمقابلات العمل شو الطريقة يلي لازم نتبعا بكود الhtml مشان نساعد الWebsite أن هو يكون من أولي محركات البحث؟ 1. ترتيب الـ Headers في الصفحة لما تحط الـ headers (H1, H2, H3...) بشكل مرتب، هالشي بساعد محركات البحث تفهم هيكل الصفحة. الـ H1 لازم يكون العنوان الرئيسي،وهكذا. هالشي مو بس بساعد الـ SEO، كمان بيسهل على الزوار قراءة المحتوى وفهمه 2. استخدام Semantic Tags الـ semantic tags مثل

,

,

,

تفسير للجواب ..😁 جوا الدالة، نحن بالبداية عملنا متغير اسمه name باستخدام الكلمة var. هاد معناه إنه المتغير رح يكون موجود بالذاكرة بمرحلة التكوين، وقيمته رح تكون undefined قبل ما الكود يشتغل، لحد ما نوصل بالضبط للسطر اللي منحط فيه قيمة للمتغير. يعني لحد السطر اللي منعلن فيه المتغير، كان لسه ما انعمل، وبالتالي كانت قيمته لسه undefined. أما المتغيرات اللي منعملها بكلمة let وconst، فهي بتعمل نفس الشي، بس الفرق إنه ما منقدر ناخد قيم منها إلا بعد ما نضيفلها قيم من الأساس. هاد الشي بنسميه "منطقة الموت المؤقتة" أو بالإنجليزي "temporal dead zone". لما نحاول ناخد قيمة متغير قبل ما نعمله، جافاسكربت رح ترجع لنا خطأ من نوع ReferenceError. ⭕️اذا حبيتو السؤال شاركوا مع رفقاتكن مشان نكمل بسلسلة فيا⭕️