أوقات كتير وإنت بت develop بتبقي محتاج تمسك الlocal storage والـ session storage مش هقولك بقي خد extension بتعمل دا ، لا هخليك تcode ال extension بنفسك
هنأخد الموضوع ع كذا Step
أول step
تعالي نعمل ال Project Structure
أول حاجة هتعملها هي إنك تجهز الفولدر اللي هتحط فيه ملفات الإضافة بتاعتك. سمي الفولدر ده مثلًا clear-storage-extension (أو أي اسم تحبه). جوه الفولدر ده هتحتاج الملفات دي
manifest.json
background.js

الIcons اللي هتكون ظاهرة as extension icon (optional)
icon16.png, icon48.png, icon128.png
بعد كدا تعال نsetup ال manifest.json
ملف manifest.json ده مهم جدًا لأنه بيعرف الإضافة بتاعتك وبيحدد الـ capabilities بتاعتها. افتح ملف manifest.json جوه الفولدر اللي انت عملته وضيف فيه الكود اللي ف صورة 1
تعال نفهم اللي كتبناه دا إي ؟
manifest_version
ده بيحدد نسخة الـ manifest؛ لازم تكون 3 علشان الإضافات الجديدة بتاعت Chrome
background
بيحدد ملف background.js كـ service worker اللي بيشتغل في الخلفية
permissions
دي بتدي الإضافة الصلاحيات اللازمة عشان تشتغل على الـ tab الحالي وتشغل سكريبتات
action
بتحدد الأيقونة اللي هتظهر في الـ toolbar بتاع Chrome لما الإضافة تشتغل


بعد كدا ال background.js

الملف background.js هيبقى مسؤول عن التعامل مع ال click event لما تضغط على أيقونة الextension في الـ toolbar. السكريبت ده هيشغل كود بيمسح الـ local storage والـ session storage في الـ tab النشط.
طيب خلينا نشرح الكود
chrome.action.onClicked.addListener(() => {}
ده بيقول للإضافة بتاعتك ، لما المستخدم يضغط على الicon بتاعت الextension اللي في ال (toolbar) بتاع Chrome، شغل الكود اللي جاي ده."



// Query the currently active tab in the current window
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {}
هنا بتطلب من Chrome إنه يجيب الـ tab اللي المستخدم بيفتحه دلوقتي واللي نشط (active) في النافذة الحالية (currentWindow). الـ chrome.tabs.query بترجعلك Array فيها كل الـ tabs النشطة.

chrome.scripting.executeScript({
target: { tabId: tabId },
func: clearStorage,
});

الجزء ده مهم، هنا بتستخدم chrome.scripting.executeScript عشان تشغل كود معين على الـ tab النشط. في الحالة دي، الكود اللي هيتشغل هو clearStorage، واللي هو function هتلاقيها مكتوبة تحت.


// Function to clear local and session storage
function clearStorage() {
localStorage.clear();
sessionStorage.clear();
alert("Local and Session Storage Cleared!");
}

ده الـ function اللي بيتم تنفيذه في الـ tab النشط لما تضغط على أيقونة الإضافة. الـ function دي بتعمل حاجتين:

بتمسح كل البيانات اللي موجودة في الـ localStorage والـ sessionStorage للـ tab النشط.
بتطلع رسالة للمستخدم (alert) بتقول إن الـ Local و Session Storage تم مسحهم.


لو عايز تخلي الإضافة بتاعتك شكلها احترافي أكتر، ممكن تضيف أيقونات. تقدر تصمم أيقونات بسيطة أو تحملها من مواقع أيقونات مجانية. احفظ الأيقونات دي باسم icon16.png, icon48.png, و icon128.png جوه الفولدر بتاع الإضافة.

افتح Chrome وروح لـ chrome://extensions/.
فعل Developer Mode
اضغط على Load unpacked واختار الفولدر بتاع clear-storage-extension.
المفروض الإضافة دلوقتي تكون ظاهرة في الـ toolbar. اضغط على أيقونة الإضافة عشان تمسح الـ local و الـ session storage
اتأكد إن الملفات manifest.json و background.js متسمية صح وموجودة في ال root بتاع الفولدر بتاع الextension.
راجع الـ JSON syntax في manifest.json وتأكد إنه مفيش أي أخطاء زي فواصل ناقصة أو أقواس زيادة.

Astro Portfolio Blog Theme
https://dev.to/syakirurahman/i-build-an-astro-portfolio-blog-theme-so-you-can-setup-your-personal-website-in-10-minutes-1df0

react interview questions
https://github.com/sudheerj/reactjs-interview-questions

رود ماب محتواها محترم للباك إند
https://www.freecodecamp.org/news/skills-you-need-to-become-a-backend-developer-roadmap/

Build complex software with AI !!!!!!!!!!!!!!

https://plandex.ai

https://miracle-ui.vercel.app/#/docs/introduction
Miracle UI is a collection of components created for React with native CSS
في شخص عمله ونشره علي DEV Community ، الميزة الحلوة فيها إنها lightweight عشان إتبنت علي ال CSS من غير أي third library ممكن تشوف دا بنفسك لو دخلت على الـnpm packages ، كمان حسب م شوفت من الdocs إنها ماشية بنفس مبدأ shadcn/ui إنك بتadd ال component اللي إنت محتاجه

35+ Free React templates and themes
https://dev.to/davidepacilio/35-free-react-templates-and-themes-32ci

حنا في 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/