إعتبره update لكورس االـtailwind اللي عملته ، دي مقالة فيها كل الـupdates اللي حصلت ف Tailwind v4 وشارح فيها كل حاجة بالتفصيل

https://agcoding-blog.vercel.app/posts/tailwind-v4/


ودا لينك الكورس لو لسه مشوفتوش


https://www.youtube.com/watch?v=dr2GVki4HAs&list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP

مطلوب 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/

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

مقالة سريعة بس صدقني إنت محتاجها جدًا ..


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-7406430459641118720-NDsR?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

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

كل سنة وانتوا طيبين ورمضان مٌبارك عليكم يارب♥️

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/]

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

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

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

أغلب مشاريع 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

ضفت feature في موقعي:

AI Assistant للمقابلات

تكتب أي سؤال ممكن يتسألك

وهو:

يجاوبك

يشرح الفكرة

ويربطها بمقالات أنا كاتبها

يعني بدل ما تحفظ answer

بتفهم system

الميزة حاليًا شغالة على موديل مجاني

وفيه شوية limitations

بس قريب هتتنقل لموديل مدفوع

وهيبقى أدق وأقوى

جربه:

https://agcoding-blog.vercel.app/

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