حنا في TypeScript عندنا طريقتين لتحديد الshape of data ممكن نستخدم types أو interfaces
وسؤال دايمًا بيتسأل في TypeScript هو "نستخدم (types) ولا (interfaces)؟" وإيه الفرق بينهم ؟

https://www.linkedin.com/posts/activity-7238938621184008193-QZa-/

ريأكت 19 ، والمرة دي التحديثات هتاخد الأداء والكفاءة لمستوى تاني خالص. سواء كنت بروفيشونال في React أو لسه بتبدأ

أول حاجة هنتكلم عنها هي React Compiler . حاليا بيعمل تحسين للكود بتاعك أثناء ال build time وده معناه إن التطبيقات هتشتغل أسرع وبكفاءة أعلى. مش هتحتاج تقلق تاني من الbloated bundles اللي بتبطأ الأداء.
وبيتعامل مع الـ Memoization وتحسين تحديثات الـ State والـ UI. مش محتاج تستخدم useMemo() أو useCallback() أو حتى memo تاني. الكومبايلر بيعمل كل ده مكانك، وده بيخلي الكود بتاعك أنضف وأسرع.

الميزة التانية للكومبايلر الجديد إنه بيفهم إمتى يحدّث الـ UI، وده بيخلي عملية التطوير أسهل بكتير. التطبيقات بتاعتك ممكن تشتغل أسرع بمرتين بسبب التحسينات دي. إنستجرام بدأت تستخدم الكومبايلر ده في التطبيق بتاعها، وده دليل على إنه شغال بكفاءة في الواقع.

ثاني حاجة هي Server Components. دي بتسمحلك إنك تحمّل جزء من عملية الـ Rendering على السيرفر بدل ما تكون على الكلاينت، وده بيقلل الحمل على الكلاينت وبيخلي الـ Loading أسرع والتجربة أحسن.
ال Server Components في React 19 قلبت الموازين. الكومبوننتس دي بتشتغل على السيرفر وبتبعت الـ HTML للكلاينت، وده معناه إن الصفحات هتتحمل أسرع، و الـ SEO هيبقى أحسن، وكمان الـ JavaScript اللي بيتبعت للمستخدمين هيبقى أقل.
هسيبلك كود كمثال في صورة تحت

الكومبوننتس دي مثالية للمهام اللي بتحتاج موارد كتير أو اللي لازم تتعمل قبل ما الصفحة تظهر. لما المهام دي تتعمل على السيرفر، التطبيق بتاعك بيبقى أكتر كفاءة.

وكمان Server Components بتندمج بكل سلاسة مع Next.js. بتستخدم الـ 'use server' directive عشان تحدد إن الكومبوننت ده يشتغل على السيرفر. ده بيخلي الكود اللي على الكلاينت خفيف وسريع.
كمان عندنا Actions، ودي بتسهل إدارة ال (state management) عن طريق توحيد تحديثات الstate والـ Side Effects بتاعتك. وداعًا للكود المعقد، ومرحبًا بالكود الclean والmaintainable
الـ Actions بتسهّل التعامل مع الفورمات. بدل ما تستخدم onSubmit، دلوقتي ممكن تعتمد على خصائص الـ HTML Forms عشان تنفذ العمليات على السيرفر، وده بيساعد في تنفيذ العمليات سواء كانت (sync) أو غير (async) على الكلاينت أو السيرفر.

الـ Actions كمان بتضيف state اسمها pending. لما تبعت فورم، الstate دي بتشتغل من بداية الrequest لحد ما يتم تحديث الstate النهائية



إدارة Metadata الخاصة بالDocument وتحسين ال seo بقت أسهل كمان. دلوقتي تقدر تدير Metadata زي العناوين وال meta tags مباشرة جوه الـ Components بتاعتك. ده بيبسط مهام الـ SEO وبيخلي الكود بتاعك مترابط أكتر ودي كنت بتعملها ف الnext بال metadata key word

الِ (Enhanced Asset Loading) بقت أقوى بكتير، وبتساعد في تحميل الصور والخطوط والموارد التانية بشكل أسرع من خلال استخدام مميزات زي Suspense و الـ Resource Loading APIs الجديدة زي (preload و preinit)، تقدر تضمن إن الأصول تتحمل في الخلفية، وده بيقلل وقت الانتظار ويحسن تجربة المستخدم.

وأخيرًا، الـ Hooks الجديدة. دول بيدوا قوة أكتر للـ Functional Components بتاعتك، وبيخلوك تدير الstate والـ Side Effects بسهولة. الـ Hooks دي بتديك مرونة وتحكم أكتر، وبتخلي كود الـ React أنظف وأكفأ وإستنوا مقالة مطرشمة عنها :"(

كل ميزة من دول هنتكلم عنها بالتفصيل في البوستات الجاية. استعد بقى للدخول في عالم React 19 الممتع!

لو كنت جاي من خلفية Next.js، هتلاقي الميزات دي هتخليك تشوف الفرق بشكل واضح

عشان لو جه قدامك سيناريو محتاج تبني فيه from builder
Form Builder for @shadcn/ui
https://formbuilder.kurdmake.com/

دي community بحاول أعملها من فترة في ال web development بحيث لو حد عنده مشكلة أو ننقل خبرات لبعض أو نحاول نساعد بعض بأكبر شكل ممكن🤔
https://chat.whatsapp.com/KVCkTEaxdgS9LyFOGzXKCC

17 Best Free React Admin Template
https://dev.to/syakirurahman/17-best-free-react-admin-template-2024-to-speed-up-your-web-app-development-3ec

لسه إيه عذرك إنك تتعلم tailwind ؟
رغم إن معظم ال ui kits بتستخدمها زي
-Meraki ui
-flowbite
-Daisy ui
-preline ui
-mamba ui
-sailboat ui
-material tailwind
-headless ui
-shadcn ui

إبدأ ي صديقي وأوعدك إن المحتوي هيعجبك ولو عندك أسئلة تحت أمرك في أي وقت
https://youtube.com/playlist?list=PLnD96kXp-_pMR9cBUmvsz_kIIt9bv2UIP

Tailwind Generator
Collection of useful tools and generators for Tailwind to create, design and customize all kind of web components using a graphical editor.

https://tailwind-generator.com/

محتاج inspiration وبال source code كمان ؟ حاجات خيال 😀
https://tympanus.net/codrops/demos/

3D effects especially 3D tilt effect
https://dev.to/logrocket/creating-3d-effects-in-css-1h6

CURSOR FREE & OPENSOURCE Alternative
https://zed.dev/ai

صباح الخير ، جمعتكم مباركة ، مقدرش أحرمك من الضحك دا الصراحة ، هو المفروض مشيرش حاجة زي دي بس يعني غايتنا إمتاعكم ونشر الضحك ،أقصد الإفادة
ودا الai العاق اللي عمل فيا كده free ف مش كل حاجة فري حلوة أحيانا بتجرحنا 😂 ، لو عاوز حاجة تطلع جودة محترمة بس مدفوعة عندك D-lD
https://studio.infinity.ai/