yazn_108

أن النبي صلى الله عليه وسلم قال: "صيام يوم عاشوراء، أحتسب على اللَّه أن يكفر السنة التي قبله" غدا 25/6/2026 م - 10/1/1448 هـ يوم عاشوراء

بالصدفة اكتشفت MongoDB Atlas Search من مقطع المهندس Yahya ElAraby عن قواعد البيانات فكرته انك بدل ما تدير عملية الـsearch في موقعك بشكل شبه يدوي -في حال كنت تعتمد على MongoDB- اعطاك الحل على شكل محرك (Search Engine) كامل يدير عملية البحث من وإلى وبسرعة اعلى من مجرد ارسال استعلامات داخل قاعدة البيانات (اللي هي طريقتي سابقا في منصة المقالات مُركَّز) بالإضافة إلى البحث باستخدام جزء من كلمة او الكلمات المتشابهة وشوية امور ممتعة الفيديو https://youtu.be/GBeWKa1Lc6I/ ولو حبيت تشوف نتيجة استخدام Atlas Search بشكل عملي في المنصة https://murakkaz.vercel.app/

قال النبي عليه الصلاة والسلام، صيامُ يومِ عَرفةَ إنّي أحْتسبُ على اللهِ أن يُكفّرَ السنَةَ التي بعدهُ، والسنةَ التي قبلهُ.

اصبح كملف Notion بمناسبة ان اليوم جمعة قمت بتفريغ كُتَيِّب الصحيح والحسن من اذكار اليوم من كُتَيِّب الشيخ ابن باز رحمه الله "تحفة الأخيار ببيان جملة نافعة مما ورد في الكتاب والسنة من الأدعية والأذكار" إلى ملف نوشن المميز بالكُتَيِّب انه اورد فيه فقط صحيح وحسن الاسناد ولكن كحديث كامل فقمت بتفريغ الاذكار بشكل مجرد بحيث يسهل نسخها كلها او جزء منها وقراءته بشكل مباشر https://binbaz-tuhfat-al-akhyar.notion.site/3499d42af8ea80a6ae54e38750e2ada2

خاصة بعد مشكلة تعطل بعض سيرفرات mongodb في الشرق الاوسط البعض مننا واجه اشكالية فقدان البيانات فاستعنت حاليا بـGitHub Actions لأنشاء سجل لمقالاتي في منصة مُركَّز بشكل تلقائي عند النشر او التعديل او الحذف هنا بامكانك اخذ فكرة عن كيف استفدت من GitHub Actions لانشاء سجل تلقائي للمقالات الريبو: https://github.com/yazn-108/murakkaz-articles-backup المنصة: murakkaz.vercel.app

الـGitHub Actions من الأدوات الأساسية داخل GitHub وتُستخدم لأتمتة مهام التطوير مثل الـbuild والـdeploy وما شابه باستخدام شوية اوامر مكتوبة داخل ملفات YAML فهنا كورس مجمع على شكل فيديو واحد يشرح الية التعامل مع GitHub Actions بطريقة اجدها واضحة https://youtu.be/7gJFHjXscr8?si=RmQRtlb7-LRzcKWI

طبعا هي ممكن تكون مع Nosql او مع SQL ولكن هو يشرح عن الـinjection في Nosql

لاحظت قلة التفات لموضوع Nosql injection رغم انه مؤذي جدا لو احد استغله مع قاعدة بياناتك هنا شرح بالعربي + معاه ملف notion https://youtu.be/Zach0wsFrlE?si=RWYfWaKDqiZb1Ye1 ملف الـnotion https://perpetual-glue-afd.notion.site/Nosql-injection-3089f26cb516805699f2fef63c768133 هو يشرح عنها نفسها وليس عن طرق الحماية من استغلالها ولكن تعلمك عنها يساعدك تصير تفكر كيف تحط شروط للمدخلات وتنظيفها قبل ارسالها لقاعدة البيانات

تطبيق عربي اعجبت فيه جدا يجمع مابين فكرة slack و teams و zoom وبنفس الوقت منتج سعودي حتى السيرفرات داخل السعودية يعني تخضع لموضوع القوانين السعودية في حماية البيانات ويدعم الاستخدام من مختلف الدول https://beem.sa/ ليس اعلان وانما اعجاب في مدى توافق التطبيق مع تفضيلاتنا كعرب

كل عام وانتم بخير، عيد مبارك نتذكر قول الله "ذَٰلِكَ وَمَن يُعَظِّمْ شَعَائِرَ اللَّهِ فَإِنَّهَا مِن تَقْوَى الْقُلُوبِ" فالفرح واظهار السعادة من تعظيم شعيرة الله فافرح ولا داعي لتذكر غير الافراح فيه مهما كان حالك او وضعك

وايضا عبر لينكيدإن https://www.linkedin.com/in/yazn-ahmed

قد يكون قل تركيزي عن النشر في القناة هنا لأن اغلب المعلومات اصبحت انشرها عبر منصة مُركَّز ونشرتها البريدية https://murakkaz.vercel.app/

كورس جميل جدا في React Design Patterns https://youtu.be/B09-J84p0ck?si=aCoCH1hxN2VQzrE1 وهنا قمت بتلخيص الفيديو بمقالة بسيطة ولكن لا تغني عن مشاهدة الفيديو https://murakkaz.vercel.app/article/react-design-patterns وهنا قمت بتطبيق هذه الباترنس على موقعي (منصة مُركَّز) https://github.com/yazn-108/articles-nextjs

حماية الـarray في JavaScript https://murakkaz.vercel.app/article/safe-array-methods/

للاشتراك في نشرة مُركَّز البريدية https://murakkaz.vercel.app/subscription

كيف بدت القصة؟ 😀 القصة بدت لما حبيت انظم شغلي بس اي شغل؟ اكيد ليس عمل في احد الشركات اللي بحثت عنها وقدمت وما حصلت اي رد وانما شغلي اللي هو مقالاتي المبعثرة هنا وهنا فقلت ليش ما اسوي منصة؟!! وهنا لمعت الفكرة في راسي 🔦 فكرة "عُصارة" ولكن للاسف اكتشفت ان الاسم مستخدم في عدة مواقع 😐 وهنا لمعت فكرة مُركَّز 🎉 ولكن... اكيد ما رح اقلك ان الاسم مستهلك لأن انا اول من يستخدمه ولكن وجدت اني املك منصة رائع تحتوي على مقالات برمجية باسلوب بسيط وبدون كثرة كلام. حياك الله في مُركَّز ونشرته البريدية https://murakkaz.vercel.app/

شرح جميل (حتى لو ما تعرف انجليزي) عن الـIntersectionObserver في JavaScript https://youtu.be/Jo8ABAJtMM0?si=B-qv0-KuVbFkGA7o

بعد اخر تحديث في tailwind 4.1.0v تم القيام بعدة تغييرات ومن ضمن هذه التغييرات هي ازالة تأثير الـhover من الشاشات الصغيرة او المعتمدة على اللمس ولحل هذا الامر يتم اضافة هذا الجزء في ملف الـinput.css @custom-variant hover (&:hover); وسبب الازالة يعود لوجهة نظر القائمين على الـframework ان هذا التأثير يسبب تجربة سيئة للمستخدمين بسبب ان الـhover في الهواتف يبقى موجود حتى تضغط في مكان آخر رغم ان وجهة النظر هذه قد لا تكون صحيحة 100% لأن تأثير الـhover ليس متوقف على تغيير لون او ما شابه وانما يستخدم في تأثيرات متنوعة مثل عرض بعض القوائم بشكل بسيط دون الحاجة لاستخدام javascript. وايضا تم اضافة @theme المسؤولة عن ادارة المتغيرات بعد ما تم الاستغناء عن ملف tailwind.config.js ولكن المختلف فيها انها تقوم بتخزين قيمة المتغيرات عند عملية الـbuild مما يمنعك من تغيير قيمة المتغيرات فيما بعد من خلال ملف الـcss (مثلا لو حاولت تعمل dark mode أو تغييرات ديناميكية، ما رح تنعكس)، ولحل هذا الامر يتم الاستعانة بقيمة inline التي تقوم بربط قيم @theme مع متغيرات CSS Variables بشكل مباشر، وبالتالي تقدر تغير القيم ديناميكيًا حتى بعد الـbuild. :root { --primary-color: white; } .dark { --primary-color: black; } @theme inline { --color-primary: var(--primary-color); } مثلا معرض اعمالي في اخر تحديث له قائم على هذا الامر من ناحية الـhover والـdark-mode https://yazn-108.github.io/

أثناء تصفحي لمنصة لينكدإن، صادفت ملف رائع عن الـJavaScript مهم للمبتدئين وجميل لمراجعة معلومات المتقدمين الملف مكتوب بشكل مريح ومبسط؛ ما يميّز هذا الملف عن غيره هو بساطة الطرح ووضوح الأسلوب بالإضافة لعرض المفاهيم بطريقة سلسة ومفهومة، مما يجعله مناسبًا لمن يبدأ من الصفر، وفي نفس الوقت مفيد لمن يريد تنظيم معلوماته أو يريد مراجعة بعض الجزئيات بشكل سريع. https://www.linkedin.com/posts/ayaat-atyaa-9697b6230_javascript-ugcPost-7349807861671059457-Avau?utm_source=social_share_send&utm_medium=android_app&rcm=ACoAAEWNOHAB6ZPWfXvKysVPOGSFD6kvbGI-An0&utm_campaign=copy_link

قد اكون تكلمت سابقا عن مكتبة TanStack Query او المعروفة سابقا باسم react-query ولكن هذا ما يمنع تكرار الحديث حول هذه المكتبة الرائعة في التعامل مع البيانات والـAPIs والتي اصبح يتم مقارنتها مع Axios من قبل البعض رغم ان هذا مفهوم خاطئ عن المكتبة بسبب اختلاف هدف الاستخدام الا ان هذه المقارنة خرجت من البعض بناء على قوة المكتبة المبهرة في التعامل مع البيانات خاصة بعد اخر تحديث اللي اصبحت فيه غير محصورة على React. مكتبة TanStack Query هي مكتبة تقوم على موضوع ادارة البيانات الصادرة والراجعة من الـAPIs بطرق مختلفة عن المعتاد، حيث تمكنك المكتبة من امكانية مراقبة حالة الـRequests وادارة حالتها {Data, Errors, isLoading, ....} بسهولة بالاضافة لموضوع التخزين المؤقت للبيانات او المعروف بالـCaching بمعنى انك لن تحتاج لاستدعاء نفس البيانات من السيرفر في كل مرة تحتاجها حتى وان قمت بطلب هذه البيانات من مكان مختلف في الموقع بحيث تمكنك من استدعاء هذه البيانات ومن اي مكان في الموقع بدون الحاجة لارسال طلب جديد للسيرفر، مع عدة ميزات اخرى رائعة مثل عرض البيانات السابقة لحين حضور البيانات الجديدة وامكانية ادارة الـCaching والتحكم فيه وتحديثه بشكل يدوي واعادة استدعاء البيانات بناء على حدث معين في مكان مختلف من الموقع وهذه الميزات الدقيقة تظهر اهميتها في المشاريع الفعلية التي تكون معدة لأن تكون مشاريع ذات طابع احترافي. في الخلاصة مكتبة TanStack Query تجعل التعامل مع البيانات الراجعة من الـAPIs أكثر تنظيمًا وسلاسة، وتُغنيك في كثير من الحالات عن كتابة منطق إدارة الحالة (State Management) بشكل يدوي وهذا ما يعطيك دقة في التنفيذ وبنفس الوقت كود نظيف لأن رح توفر وقت وجهد لعمليات متكررة في نفس المشروع وفي كل مشروع تقريبا. // useQuery const { data, error, isLoading, isPending, .... } = useQuery({ queryKey: ['developers'], queryFn: () => axios.get('/yazn_108').then(res => res.data), }); // useMutation const mutation = useMutation({ mutationFn: (newSkill) => axios.post('/yazn_108', newSkill), onSuccess: () => { queryClient.invalidateQueries(['developers']); } }); mutation.mutate({ skillName: '...' });