AG Coding

عيد فِطر مٌبارك عليكم جميعًا ♥️

ضفت feature في موقعي: AI Assistant للمقابلات تكتب أي سؤال ممكن يتسألك وهو: يجاوبك يشرح الفكرة ويربطها بمقالات أنا كاتبها يعني بدل ما تحفظ answer بتفهم system الميزة حاليًا شغالة على موديل مجاني وفيه شوية limitations بس قريب هتتنقل لموديل مدفوع وهيبقى أدق وأقوى جربه: https://agcoding-blog.vercel.app/

https://www.linkedin.com/posts/abdoelazizgamal_%D8%A3%D8%AE%D8%B7%D8%B1-%D8%AD%D8%A7%D8%AC%D8%A9-%D9%81%D9%8A-middleware-%D8%A5%D9%86%D9%83-%D8%AA%D9%82%D8%AF%D8%B1-%D8%AA%D8%B3%D8%AA%D8%AE%D8%AF%D9%85%D9%87%D8%A7-share-7440386731897683968-N8Hj?utm_source=social_share_send&utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_campaign=copy_link

أغلب مشاريع Backend مش بتنهار بسبب Performance. بتنهار بسبب Project Structure. في الأول كل حاجة تبقى ماشية: controllers/ services/ utils/ models/ شكل Professional… لكن بعد شوية: Dependencies تتشابك كل Feature تبقى مخاطرة Bug صغير يكسر نص السيستم وساعتها تفهم الحقيقة: Project Structure مش تنظيم ملفات. Project Structure هو: Architecture متخفية. هو اللي بيحدد: مين يعتمد على مين إيه اللي مسموح يتوصل بإيه وإيه لازم يفضل معزول Junior Backend: يرتب folders. Backend Engineer: يصمم Modules و Dependency Flow. لأن: Module مش Folder. Module هو Boundary. المقال: https://agcoding-blog.vercel.app/posts/project-structure-and-modules/ #Nodejs #Backend #Architecture #Engineering #CleanCode

Express مش هو السيرفر. هو مجرد comfort layer فوق: http.createServer() المشكلة مش إنك تستخدم Express. المشكلة إنك تستخدمه قبل ما تفهم هو بيخبي إيه. أول مرة تبني HTTP Server بإيدك بتكتشف الحقيقة: الـ Request مش JSON. هو Stream من bytes. والـ Routing ده مش: app.get('/users') هو فعلياً: if (req.method === 'GET' && req.url === '/users') مفيش Magic في Express. في abstractions بس. وكل abstraction ليه cost: Layers زيادة Objects زيادة Parsing زيادة Overhead مش شايفه Backend مش Framework. Backend يبدأ من: TCP → HTTP → Streams → Server لو مش فاهم السلسلة دي… أنت بتستخدم Tools مش فاهمها. الفرق بين Junior و Backend Engineer: الجونيور: يكتب Express routes. المهندس: فاهم الـ Runtime اللي Express مبني فوقه. المقال: https://agcoding-blog.vercel.app/posts/build-http-server-without-express/ #Nodejs #Backend #Engineering #Runtime #HTTP

https://agcoding-blog.vercel.app/posts/nodejs-internals-simplified/

Node.js مش “Single Threaded” زي ما فاكرين. هو Single Threaded في تنفيذ JavaScript… لكن مش في الانتظار. السيرفرات التقليدية كانت بتعمل Thread لكل Request. 10,000 مستخدم = 10,000 Thread = RAM ضخمة + Context Switching + انهيار تحت الضغط. Node عمل حاجة أذكى: نقل “الانتظار” لنظام التشغيل. الـ Main Thread: • يستقبل الطلب • يفوض الـ I/O • يكمل يخدم غيره • يرجع ينفذ الـ Callback لما الرد يجه يعني المشكلة عمرها ما كانت “عدد Threads”. المشكلة كانت “مين اللي بيستنى”. الـ Event Loop مش مجرد Concept أكاديمي. هو سبب إن سيرفر واحد يقدر يخدم آلاف الاتصالات بدون ما يولع. لكن… حطيت CPU-heavy code على الـ Main Thread؟ خلاص — رجعنا لعصر Apache 2005. الفرق بين Junior و Backend Engineer: الجونيور يتعلم API. المهندس يفهم الـ Runtime. لينك المقال https://agcoding-blog.vercel.app/posts/nodejs-internals-simplified/ #Nodejs #Backend #SystemDesign #Performance #Engineering

What is Backend Really? معظم الـ Frontend Devs شايفين الـ Backend بالشكل ده: fetch("/api/users") يرجع JSON… وخلاص. لكن قبل ما السطر ده يشتغل، بيحصل: DNS TCP Handshake TLS Encryption Reverse Proxy Load Balancing Authentication Caching Database Indexing الـ Backend مش “API”. الـ Backend هو نظام كامل بيشتغل تحت ضغط آلاف المستخدمين وبيحمي الداتا وبيضمن الاستقرار وبيتعامل مع الفشل قبل ما إنت تحس بيه. أهم مبدأ؟ Never trust the client. HTTP is Stateless. الفرق بين Junior و Engineer؟ الجونيور بيكتب كود يشتغل. المهندس بيكتب كود يشتغل في Production. Day 1 من رحلة التحول لـ Backend اقرأ المقال هنا: [https://agcoding-blog.vercel.app/posts/what-is-backend-really/] #Backend #SystemDesign #Nodejs #WebDevelopment

كل سنة وانتوا طيبين ورمضان مٌبارك عليكم يارب♥️ Deep Dive into Zustand with Next.js: Architecture & Hydration لو اشتغلت بـ Next.js + Zustand قبل كده، فأكيد قابلت مشاكل زي: • Hydration mismatch • State بيختلف بين الـ server والـ client • Errors من نوع: “Text content does not match server-rendered HTML” في المقال ده شرحت: • ليه التحديات دي بتحصل فعلًا • إزاي تبني Store architecture صح مع SSR • أنماط عملية لتجنب مشاكل hydration • تنظيم scalable للـ state management في مشاريع production المقال ده مش intro… ده تفكيك حقيقي للمشكلة وحلول production-ready. اقرأ المقال هنا: [https://agcoding-blog.vercel.app/posts/zustand-nextjs-guide-ar/]

رمضان مُبارك عليكم جميعًا ♥️

https://www.linkedin.com/posts/activity-7408176678646063104-cZVw?utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_source=social_share_send&utm_campaign=copy_link

بعد ما خلّصنا وجع دماغ this… جه دور شنطة الذكريات: الـ Closures في المقال اللي فات فهمنا إن: this = مين ندهني؟ النهاردة بقى بنفهم: Closure = أنا فاكر أنا اتكتبت فين، ومش ناسي اللي شوفته. الدالة في JavaScript لما تخلص: مش بتمشي فاضية بتمشي بشنطة والشنطة دي فيها المتغيرات اللي محتاجاها وعشان كده: setTimeout بيطبع أرقام غريبة Event Listeners تفضل فاكرة كل click React state ما يضيعش ولو شنطتك تقيلة… Memory Leak المقالة دي جزء من سلسلة JavaScript Under the Hood: 1️⃣ this – مين ندهني؟ 2️⃣ Closures – شنطة الذكريات اللي مابتتنسيش https://www.linkedin.com/posts/activity-7407755348532588544--FWz?utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_source=social_share_send&utm_campaign=copy_link

مقالتين في أسبوع ، دعواتك بقي https://www.linkedin.com/posts/activity-7406430459641118720-NDsR?utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_source=social_share_send&utm_campaign=copy_link

مقالة سريعة بس صدقني إنت محتاجها جدًا .. https://www.linkedin.com/posts/activity-7405655062385250305-Q425?utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_source=social_share_send&utm_campaign=copy_link

https://www.linkedin.com/posts/activity-7392616469773250560-IN_I?utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_source=social_share_send&utm_campaign=copy_link

https://www.linkedin.com/posts/activity-7357400593511890944-El1m?utm_medium=ios_app&rcm=ACoAAC5FoGcB_ZF-qqZyWU1avd4ojJ8sF-2l7Ss&utm_source=social_share_send&utm_campaign=copy_link

info@wzgate.com ممكن تقدم هنا

مطلوب Frontend Developer – Next.js بدوّر على حد تقيل فاهم Next.js كويس جدًا، خبرة لا تقل عن سنة، يشتغل بكود نضيف ومنظم، وعنده عين بتشوف المشروع كله مش مجرد كومبوننت وخلاص. ✅ المطلوب: 🔹 تقنيًا: فاهم يعني إيه SSR / CSR / SSG وامتى تستخدم كل واحدة. بيعرف يتعامل مع Sessions و Cookies بأمان. فاهم كويس التعامل مع API و backend integrations. 🔹 في الكود: بيكتب كود نظيف، منظم، قابل لإعادة الاستخدام. بيرتب البروجيكت كويس (components – pages – utils). بيهتم بـ structure، naming، separation of concerns. 🔹 في الـ UI: بيعرف يقلد Figma Design بدقة ويطلع الناتج Pixel-perfect. فاهم Flexbox, CSS Grid، وبيظبط Responsive Design. يهتم إن الـ UI يكون متناسق وسلس على كل الشاشات. يفرق معانا لو عندك: خبرة بـ Tailwind CSS أو CSS-in-JS. استخدمت Next.js middleware. فاهم في State Management (Context API, Zustand). مهتم بتحسين الأداء (LCP, lazy loading, إلخ). يهمنا تكون: بتفهم المطلوب وبتشتغل من غير ما نراجع وراك. بتسمي الحاجات صح وبتحافظ على الكود نظيف. بتفكر في المشروع ككل، مش مجرد صفحة أو كومبوننت. 📨 لو مهتم: ابعت: لينك GitHub أو أي مشروع ليك. CV محدث. 🏢 الشغل Full-Time – شركة WzGate https://www.linkedin.com/company/trywzgate/

إعتبره update لكورس االـtailwind اللي عملته ، دي مقالة فيها كل الـupdates اللي حصلت ف Tailwind v4 وشارح فيها كل حاجة بالتفصيل https://agcoding-blog.vercel.app/posts/tailwind-v4/ ودا لينك الكورس لو لسه مشوفتوش https://www.youtube.com/watch?v=dr2GVki4HAs&list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP