AG Coding
1.28K subscribers
487 photos
51 videos
8 files
240 links
Some Challenges And Applications On Frontend Development
maded By @abdoelazizgamal
Don't Forget Follow And Subscribe My
Youtube channel
https://www.youtube.com/c/AbdoELAzizGamal?sub_confirmation=1
Download Telegram
في البوست دا هتكلم عن الـ ٣ أنواع الرئيسية للـ Design Patterns بشكل عام وهتكلم بشكل تفصيلي عن الـCreational Design Patterns بأمثلة
ودا بوست في سلسلة الـDesign Patterns في الـ JS
https://www.linkedin.com/posts/activity-7252743921426939904-dXQk?utm_source=share&utm_medium=member_android
2
الـ series دي هتكون عن بناء framework بسيط للـ frontend، شبه React، عشان نشرح إزاي React بيشتغل من جواه..الهدف هو إننا نفهم الـ core concepts


https://www.linkedin.com/posts/activity-7254103401976778754-p-mF?utm_source=share&utm_medium=member_android
1
بارت 2 من الـ series اللي هتكون عن بناء حاجة شبيهة بالـReact، عشان نشرح إزاي React بيشتغل من جواه..الهدف هو إننا نفهم الـ core concepts

في الـpart دا هنفهم إزاي نستخدم الـvirtual Dom عشان نعمل reRender علي أساسه وإزاي نحدد الجزء اللي حصل فيه تغيير ، وكمان إزاي تـmanage أكتر من state هخليك تعمل useState خاصة بيك وبعدها هتفهم ليه فيه Rules of Hooks


https://www.linkedin.com/posts/activity-7254966116781817856-OKgN?utm_source=share&utm_medium=member_android
تاني مقالة ع Eqraatech - اقرأ-تِك ، الحمد لله ❤️

Journey from DOM & CSSOM Building Render Tree
لو سألت نفسك إزاي المتصفح بيقدر يعرض صفحة ويب كاملة قدامك بعد ما تضغط على لينك؟ الموضوع دا بيعدي بكذا خطوة مهمة، وكل خطوة ليها شغل مختلف وبتأثر بشكل مباشر على سرعة تحميل الصفحة
لينك المقالة ، قراءة ممتعة ودسمة 😲
https://eqraatech.com/browser-journey-dom-cssom-building-render-tree/


لينك البوست
https://www.linkedin.com/posts/activity-7255537706196238336-UT1c?utm_source=share&utm_medium=member_android
1
إذا مات ابنُ آدمَ انقطع عملُه إلا من ثلاثٍ : صدقةٍ جاريةٍ ، وعلمٍ ينتفعُ به ، وولدٍ صالحٍ يدعو له

كنت دايمًا بكتب المقالات علي canva علي شكل pdf وأنشرها علي linkedin ورغم إن الحوار مُتعب إلا إن له عيوبه ، إنه مش indexing وعشان تدور ع titleمعين أو topic بتعاني ، لذلك قررت إني أعمل Refrence لكل الـweb developers بحيث أفيد بأكبر شكل ممكن ، وأسيب علم يُنتفع بيه بعد موتي ، الحمد لله بتوفيق وفضل وكرم ربنا عليا ، قدرت أبني ال blog الخاص بيا ، وليها مميزات كتير بفضل الله ، منها إنك تقدر تسيرش عن مقالة بكلمة بس من المقالة ، وإفتحها من علي لابتوب وإستمتع بيها علي قد م تقدر ، طبعًا بقالي فترة موقف مقالات ، بس عشان بحط المقالات القديمة علي الموقع وبإذن الله يوميًا هينزل إتنين ع الأقل من مقالاتي اللي كتبتها بتوفيق ربنا .. علي الموقع ، وبعد م القديم كله يبقي موجود ع الموقع هنزل الجديد بإذن الله ، طبعا الموضوع دا محتاج جهد كبير ، لو حد محتاج يتطوع ويساعد ويسيب صدقة جارية له .. هكون شاكر ليه جدًا ، ربنا ينفع بينا جميعًا ودعواتكم ، وأوعدكم إن الموقع دا هيبقي من أحسن ال Refrences في مجالنا ونقلة كبيرة للمحتوي العربي ، دا لينك الموقع ، الموقع صدقة جارية ع روح والدي ❤️

https://agcoding-blog.vercel.app
5👍1
AG Coding pinned «إذا مات ابنُ آدمَ انقطع عملُه إلا من ثلاثٍ : صدقةٍ جاريةٍ ، وعلمٍ ينتفعُ به ، وولدٍ صالحٍ يدعو له كنت دايمًا بكتب المقالات علي canva علي شكل pdf وأنشرها علي linkedin ورغم إن الحوار مُتعب إلا إن له عيوبه ، إنه مش indexing وعشان تدور ع titleمعين أو topic بتعاني…»
إزاي تعمل detection لل adblocker ،
قراءة مُمتعة 🙌
https://agcoding-blog.vercel.app/posts/detect-adblocker-in-js/
🥰1
إيه هو اللmutationObserver وليه تستخدمه بأمثلة عملية ..
قراءة مُمتعة 🙌
https://agcoding-blog.vercel.app/posts/mutation-observer-in-js/
1
المقالة دي مش مُجرد بتقولك يعني إيه proxy وخلاص ، المقالة دي بتوريك إزاي vue بتطبق الproxy عشان تعملك reactive system ، قراءة مُمتعة
https://agcoding-blog.vercel.app/posts/proxies-in-js/
👍1
مقالتين جُداد إتضافوا ،
https://agcoding-blog.vercel.app/posts/darkside-react-usestate/


عاوز أقولك حاجة ، المقالة بتاعة ال workers دي فيها معلومات مش هتلاقي حد يقولهالك في مكان واحد متجمعة بالشكل وأكاد أجزم إن يمكن مسمعتش عنها قبل كدا ، ولو قرأتها كاملة هتعرف ليه ، وأنا مش مستفيد حاجة لا مفعل إعلانات ولا غيره ..
متنساش تدعيلي

https://agcoding-blog.vercel.app/posts/web-workers-in-js/
1👏1
مُتأسفين ع التأخير ، بفضل الله 4 مقالات جُداد إتضافوا ، مش محتاج أقولك فيهم كلام مش هتلاقي حد يقولهولك والكلام دا بفضل ربنا مش شطارة مني
أول مقالة نبذة عن ال virtual dom واللي بيحصل فعليا إزاي بيتعمله create وال diffing
https://agcoding-blog.vercel.app/posts/virtual-dom-in-react/
تاني مقالة عن ال error boundaries واللي ف الغالب كل اللي تعرفه عنها إنها بتستخدم ال class component ،
https://agcoding-blog.vercel.app/posts/error-boundaries-in-react/

تالت مقالة بخصوص ال behavior الخاص بال scroll في react router
https://agcoding-blog.vercel.app/posts/scroll-problem-in-react-router/
الرابعة عن ال key property ف الريأكت وليه مهمة ؟
وإزاي ت generate unique id تستخدمه ك key
https://agcoding-blog.vercel.app/posts/key-prop-in-react/
2👍1
شايف الـtopics اللي ع اليمين دي؟

دي مقالة مش بس بتشرح الـuseTransition بأمثلة عملية ، دي بتديك Performance و Debug Patterns وبتديك advanced use cases ،

المقالة كنز وهتفرق معاك ثق فيا شوية

https://agcoding-blog.vercel.app/posts/use-transition-hook/

ودي مقالة خاصة بالـSafe Assignment Operator

مع العلم الفيتشر ده لسه proposal ومش موجود في JavaScript دلوقتي

https://agcoding-blog.vercel.app/posts/safe-assignment-operator/
4
This media is not supported in your browser
VIEW IN TELEGRAM
بفضل الله دي أكبر مقالة ممكن تقابلها ، بتتكلم في الــjs optimization بكل الـtopics دي بالتفصيل والمعلومات دي وأمثلة advanced بالكود كامل ، المقالة دي محتاجة تركيزك بالكامل وهتحتاج وقت كبير عشان تخلصها ، حبيت إنها تكون reference كامل مُجمع لكل حاجة لأي حد حب يرجع ليها ، ربنا ينفع بينا جميعا ويرزقنا الإخلاص :"
كوباية القهوة أو الشاي وخش ي بطل وصدقني والله ثق فيا ، المقالة قيِّمة ودسمة فوق م تتخيل
https://agcoding-blog.vercel.app/posts/javascript-optimization/
6
This media is not supported in your browser
VIEW IN TELEGRAM
في المقالة دي مش بس بقولك إيه هو الـpromise ومجرد شرح له وخلاص ؟
لا أنا جايبلك من الأول خالص ليه أصلا ظهر وإيه مشكلته ولو فكرنا نعمله implementation from scratch هيبقي إزاي ؟
لحد م أوصل للفرق بين الـPromise.all والـPromise.race والـPromise.allSettled وامثلة واقعية أو إمتي وليه بستخدم كل واحد فيهم وبرضه لو عاوز تفهم فكرتهم وتبنيهم from scratch
الـمقالة تقيلة ودسمة ، قهوتك أو كوباية الشاي ومتنساش تدعي لوالدي :"((

https://agcoding-blog.vercel.app/posts/javascript-promises
3
This media is not supported in your browser
VIEW IN TELEGRAM
بعد الغيبة دي كان لازم أرجع بــtopic كله بيسأل عليه ، وطبعا زي م وعدتك دي هتكون أكبر reference ليك كـweb developer ، عشان كده المقالة دي مش بس بتفهمك إيه هو الـclosure ،هتلاقيني وضحتلك تماما إبه هو وعلاقته بالـ Lexical Scoping وإزاي إزاي الـ Closure بيشتغل في الميموري وفي الـ JavaScript Engine وإيه المراحل اللي بتتم وكل دا ع مثال واقعي
auth system :"))
بعد دا كله وريتك أمثلة بالكود إزاي تستخدم الـ Closure في تطبيقات زي
Data Encapsulation
Information Hiding
State Management
Smart Caching
Advanced Event System
https://agcoding-blog.vercel.app/posts/closure-js/
6
This media is not supported in your browser
VIEW IN TELEGRAM
الـcss والفرونت نقاشة ؟ إنت صح خليني أقولك كل سطر css إنت بتكتبه دلوقتي بقي مهم جدا إزاي و أوريك حاجات أنا متأكد إنك مكنتش تعرفها وإن محدش قالهالك قبل كده

https://agcoding-blog.vercel.app/posts/css-features/
2