عاوز تجرب أي package من غير م تعملها setting up في ال local environment
https://npm.runkit.com/

دا مقال بيعلمك إزاي تستخدم ال Generators عشان تعمل Visualization للAlgorithms وهي شغالة وتفهمها
وسايبلك مثال بالكود
https://www.covicale.com/blog/using-javascript-generators-to-visualize-algorithms

اللينك دا مجمع كل ال Frontend Resources اللي ممكن تحتاجها
https://dev.to/miguelrodriguezp99/frontend-resources-v2-57mj

Material UI v6 is out now !
بما إنها أكتر React component library أنا بستخدمها حرفيا ف عاوزك تبص بصة هنا ع التعديلات اللي ضافتها :"D
https://mui.com/blog/material-ui-v6-is-out/

قلتها للناس من زمان ع الجروب وهقولها هنا تاني نزلوا ال extension دي في الvs code، وسجلوا دخول عادي وسيبوا الmodel زي م هو ال default ، ال sonnet 3.5
دا رأي بشمهندس حماد شخصيًا في الموديل دا ..
https://www.facebook.com/story.php?story_fbid=26476583361987530&id=100001876777351&mibextid=WaXdOe&rdid=N7mrCTAlzUwUHyXx

وفي أي ملف محتاج تعدل فيه أو كود معين ، إعمله select وإضغط
Alt+L
أو
Alt+k
هيخرجلك شات حدد ال context بتاع الكود بتاعك وإطلب اللي بتتمناه ، هيضرب ال productivity بتاعتك في 100 حرفيا ، بس لو بادئ جديد أو بتتعلم حاجة جديدة نصيحة تكتب كل حرف بإيدك حرفيًا.

دي الشانل اللي بينزل عليها أي حاجة ريليتيد
https://whatsapp.com/channel/0029VaBfs40KAwEfBoG88Q2J

ودا جروب لو حد عنده إستفسار أو نقاش أو محتاج مساعدة ..

https://chat.whatsapp.com/KVCkTEaxdgS9LyFOGzXKCC

https://x.com/ChallengesCss/status/1795027054695436404

هقولك حاجة ممكن متصدقهاش ؟
الشخص دا عمل اللعبة دي ب css بس ، اه والله زي م بقولك كدا ..
دا الكود
https://codepen.io/t_afif/pen/OJYbVWP
طبعا متجربهاش إلا ع chrome

في اللينك ده هتلاقي كل الـ Algorithms والـ Data Structures معمولها implementation بالـ JavaScript بطريقة سهلة وبسيطة للي لسه بادئ في المجال. الكود مكتوب بطريقة بتتبع الـ best practices
https://the-algorithms.com/language/javascript

أوقات كتير وإنت بت 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