- 55
- 20 586
Abdelrahman Awad
Registrace 14. 09. 2013
You should use Container Queries Now
في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS موجودة من سنين واصبحت متاحة في جميع المتصفحات السنة الي فاتت.
الـ Container Queries هي طريقة جديدة تساعدك تبني Responsive UI باسلوب يناسب طبيعة شغلنا الـ Component Based Architecture.
دلوقتي تقدر تبني Components مدركة لابعادها وتخليها تتكايف مع المساحة المتاحة لها في اي مكان تستعمله فيها وبذكر اكثر من مثال عملي يبان فيها قوة الـ Container Queries.
لينكات مفيدة:
• Media Queries | MDN (developer.mozilla.org/en-US/docs/Web/CSS/@media)
• Container Queries | MDN (developer.mozilla.org/en-US/docs/Web/CSS/@container)
• How to use container queries now | Web.dev (web.dev/blog/how-to-use-container-queries-now?hl=en)
الـ Container Queries هي طريقة جديدة تساعدك تبني Responsive UI باسلوب يناسب طبيعة شغلنا الـ Component Based Architecture.
دلوقتي تقدر تبني Components مدركة لابعادها وتخليها تتكايف مع المساحة المتاحة لها في اي مكان تستعمله فيها وبذكر اكثر من مثال عملي يبان فيها قوة الـ Container Queries.
لينكات مفيدة:
• Media Queries | MDN (developer.mozilla.org/en-US/docs/Web/CSS/@media)
• Container Queries | MDN (developer.mozilla.org/en-US/docs/Web/CSS/@container)
• How to use container queries now | Web.dev (web.dev/blog/how-to-use-container-queries-now?hl=en)
zhlédnutí: 124
Video
Progressive Enhancement vs Graceful Degradation
zhlédnutí 143Před dnem
في الحلقة دي بتكلم عن الفرق بين مصطلحين متداخلين وناس كتيرة بتخلط ما بينهم لانهم بيوصلوك لنفس النتيجة معظم الوقت. لكن فيه فرق جوهري بين الاثنين، ومعرفة الفرق حتفرق معاك في ازاي بتبني الويب وتحسين مستوي جودة الابليكشن الي انت شغال عليه. وحتكتشف ان فيه اوقات لازم تستعمل واحد منهم لأن الثاني غير مناسب لطبيعة وبيئة وجمهور شغلك. لينكات مفيدة: • animation-timeline | MDN (developer.mozilla.org/en-US/d...
Forms are Formidable
zhlédnutí 239Před 14 dny
هل تسائلت ليه دايما بتسمع ان الـ Forms صعبة لكن مفهمتش ليه؟ ليه ليها مكتبات كتيرة وايه المشاكل الي بيحاولوا يحلوها؟ في الحلقة دي بتكلم عن الـ Forms من اكثر من منظور. اولاً من واقع خبرتي كواحد اشتغل عليها، كواحد استعملها وكواحد عمل مكتبات تساعد ملايين الاشخاص انهم يعملوا Forms وازاي الـ Balance ما بين المناظير المختلفة دي بتفرق في جودة المكتبة الي انت بتستعملها. لينكات مفيدة: • FormData Object |...
Thoughts on Web Components
zhlédnutí 215Před 21 dnem
في الحلقة دي بتكلم عن الـ Web Components وعيوبها الي جعلت معظمنا يبعد عنها وميهتمش بيها تاني وهل تستحق انك تتعلمها النهاردا ولا لأ. الحلقة دي برعاية Prisma (www.prisma.io/?via=awad) لينكات مفيدة: • Web Components | MDN (developer.mozilla.org/en-US/docs/Web/API/Web_components) • EgyptJS Jan Meetup Panel discussion on Web Components (czcams.com/video/Oyd8XQmoy-E/video.html) • Element Internals (d...
Repeatable Requests with Idempotency
zhlédnutí 200Před měsícem
في الحلقة دي بتكلم عن مصطلح مهم جداً وهو الـ Idempotency وايه علاقته بالـ Requests الي بنعملها من الفرونت ايند وازاي ممكن يخلي الـ Application افضل واقل عرضة لاخطاء قد تكون كارثية. من خلال بعض الامثلة العملية وحاجات اشتغلت عليها بنفسي نقدر نفهم امتي منحتاجهوش وامتى لازم نستعمله. لينكات مفيدة: • Stripe's API on Idempotent Requests (docs.stripe.com/api/idempotent_requests) • Shopify's API on Idem...
Do we still need VDOM?
zhlédnutí 360Před měsícem
في الحلقة دي بتكلم عن الـ VDOM وازاي تقارن بالـ DOM وليه احنا كنا محتاجينها بشدة وازاي ممكن تختلف من Framework لآخر بالرغم من انها نفس المبدأ وازاي الاختلافات دي بتأثر عليك في طريقة كتابتك للكود. ببص عليها من نواحي مختلفة ممكن مسمعتهاش قبل كدا زي ليه الـ HTML سيئ كوسيلة Serialization وايه الي يخلي الـ VDOM اسهل في عملية الـ Rendering. وبختم بنظرة علي آخر الـ Frameworks وليه التطور القادم للادوا...
Corrections on Auth
zhlédnutí 170Před měsícem
تصحيحات الحلقة السابقة بعد ما اكثر من شخص تواصل معايا بخصوص بعض الاخطاء في الكلام الي قولته عن الـ JWT. الخلاصة اني نسيت انه Base64 Encoded وبالتالي اي حد يقدر يعمله decode بشكل آمن من غير ما يعرف الـ Secret Key. فلو انت بتعمل كدا علي الـ Client Side دا مش خطر. الخطر ان يكون الـ Secret Key موجود بشكل ما علي الـ Client Side زي مثلاً يكون في موضع يمكنه انه يتحقق من صحة الـ Token من غير ما يرجع لل...
Yapping about Auth
zhlédnutí 535Před měsícem
في الحلقة دي بتكلم عن الـ Authentication ومشاكله معانا في الـ Frontend وبنتكلم عن الطرق المختلفة والي المفروض متعملوش علشان تحمي مستخدمينك علي قدر الامكان. بنجاوب علي اكثر سؤال مزعج الي هو "احط الـ Token فين؟" وايه الحالات الي اختيارك قد يكون كارثي. لينكات مفيدة: • What is cross-site scripting? (www.cloudflare.com/learning/security/threats/cross-site-scripting/) • DOMPurify (github.com/cure53/D...
The Developer Road to Open Source World بالعربي
zhlédnutí 3KPřed měsícem
نتناقش عن عالم الاوبن سورس ونتكلم عن خلاصة تجاربنا فيه القديمة والمستمرة، ومن اكثر من منظور سواء كمساهمين، كصناع مكتبات، او كمستخدمين واصحاب مبادرات. بنتكلم بشكل عام يعني ايه اوبن سورس واشكاله المختلفة، وازاي تبدأ في المساهمة وتختار نوعها وايه الصعوبات الي ممكن تواجهك. بنتكلم برضو عن قواعد "الادب" او الـ "اتيكيت" لما تيجي تساهم في مشاريع غيرك وبعض العوامل الي ممكن لم تخطر علي بالك من واقع خبرتن...
Ship Faster with Feature Flags
zhlédnutí 213Před měsícem
في الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags. بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code. بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية. لينكات مفيدة: • Flipper (www.flip...
Mobile Apps with JavaScript
zhlédnutí 352Před měsícem
في الحلقة دي بتكلم عن تجربتي والخبرة الي اكتسبتها في Rasayel اثناء شغلنا علي الـ Mobile app وليه اتجهنا للجافاسكربت في عمله وايه الي كسبناه وخسرناه من هذا القرار. بنتكلم كمان عن الادوات الي حتحتاجها وازاي تاخد القرار المناسب في شغلك لما يجيلك حد يقولك "عايزين mobile app". لينكات مفيدة: • What PWA Can Do Today (whatpwacando.today/) • Cordova (cordova.apache.org/) • Ionic Framework (ionicframewor...
Building Multilingual Apps
zhlédnutí 356Před 2 měsíci
في الحلقة الدسمة دي بنتكلم عن كل حاجة متعلقة بلغة المحتوي وازاي بتفرق معانا في الـ Styling والـ State وازاي حتى بنكتب HTML وايه الادوات المتاحة لينا علشان نعرف نعمل ويب ابليكشن متعدد اللغات. بناخد الموضوع من اول الـ CSS والـ HTML لغاية ازاي نتعامل مع الـ API بشكل سليم. لينكات مفيدة: • Alfy's CSS-tricks article (css-tricks.com/building-multi-directional-layouts/) • HTML "dir" attribute | MDN (de...
Questioning the RSC Model
zhlédnutí 166Před 2 měsíci
في الحلقة دي بتكلم عن الـ RSC او React Server Components كـ Model يهدف لحل مشكلة الـ Network وتحديداً ايه المشاكل الي شايفها فيه وهل هذا الحل يستحق المشاكل الاخرى ولا لا؟ لينكات مفيدة: • React Server Components | React Docs (react.dev/reference/rsc/server-components) • Making Sense of React Server Components (www.joshwcomeau.com/react/server-components/) • React, Solid, HTMX (bobaekang.com/blog...
Debugging JS with logs and breakpoints
zhlédnutí 216Před 2 měsíci
Debugging JS with logs and breakpoints
God bless u
شكرا يا هندسة
حضرتك كنز فعلا جزاك الله خير واستمر في افادتنا يا هندسة و ياريت حضرتك تتطرق لمواضيع تخص ال react.js او ال next.js ♥
تسلم يا هندسه ، بارك الله فيك ❤
❤
تسلم يا هندسه , ربنا يبارك في وقتك ومجهودك وتعليمك لينا <3
حلقة جميلة كالعادة ألف مبروك على ال sponsorship 🎉
❤
مممممممم لما بنقول headless فاحنا بنقولها لما يكون ال server بيقدم apis بس وال frontend بيستخدمها بدون أي علاقة ما بين الاثنين وده مصطلح مشهور في ال ecommerce و ال cms بس عموماً الفكرة واحدة أما stateless فاحنا بنقوله على ال apps اللي ملهاش session فالخادم ببساطة قادر أنه يتعرف عليك بدون ما يكون لك جلسة عمل خاصة فيك وطبعاً ده حلو في أنه بيخليك قادر ت scale وأنتا مرتاح بدون أخذ بعين الاعتبار مين ال Instance اللي ت handle ال request على عكس ال stateful فأنتا فعلياً لازم يكون السيرفر عنده معلومات أكثر عن المستخدم يستخدم ما بين ال request المختلفة وده بيسهل التطوير بشكل أو بآخر فغالباً Stateless أقرب للمعنى وإن كنت فعلياً لما تديها في الكوكي أو لما تديها في ال header واحد لأنه أصلاً كوكي هتروح للسيرفر في Header برضو
ايه الحالة اللي خلتكم محتاجين تعملوا split للأسطر مع وجود Plaintext؟
جمل عربي مع جمل إنجليزي في نفس المحتوي. عايزين كل جملة تبدأ من اتجاهها الصحيح مش من اتجاه اول كام حرف.
concurrency issues between client/server or server/server so for precious resources you should have it Idempotency
انا كمان اضطريت استخدمها في شغلي كثير وفي كمان استخدام عجبني ليها لما يكون عندنا برانش يحتاج وقت طويل عشان نعمله merge وندخل في مشاكل conflict ، بيتم اضافة الشغل بشكل مباشر علي البرانش الرئيسي بس بيكون في flag انه مايكونش متفعل علي البرودكشن الا لما تخلص بالكامل بس اول مرة اسمع بالopen feature standard معلومة جميلة بارك الله فيك
ربنا يبارك في علمك و يزيدك كمان وكمان يا هندسة♥️♥️
ايه ده احنا ممكن ن reach out بحضرتك؟ انا مكنتش اعرف ان ده option 😅
تعليقات وتويتر وخلافه
@@logaretm انا لسه فى البداية رحلة تعلمى ففى حاجات كتير محتاج اتعلمها واغطيها فللاسف مفيش وقت لا لتويتر ولا لغيره بتهيقلى حتى التطبيقات كلها مسحتها من الفون🙂
me: no. (solid did it without the Vdom, or Millionjs) you: well i'm glad you asked 44:22
يا اخي خلاص يكفي عظمة انا تعبت❤
الجمدان واقف على رجليه في الفيديو دى صراحة.
شرح جميل كالعادة ولامم الموضوع بشكل جيد جداً فقط عشان اعمل decode للـ JWT انا مش محتاج الـ Secret_key في الفرونت انا فقط باستعمل Base64 decode واخد منه البيانات اللي احتاجها في رأيي دا ضروري عشان تقدر تاخد بيانات زي الـ userID بدل من تخزين البيانات دي في state او localStorage لان الـ userID هو حاجه حساسه شويه (لكن مش حساسه جداً زي الباسوورد) لو تم التلاعب بيها ممكن تحذف او تعدل ريكورد عند مستخدم تاني لمجرد ان معاك valid token
حد برضو بعتلي التصحيح دا، انا كنت بتكلم من منطلق انه JWE شخصياً انا بتعامل مع التوكين انه لا يحتوي اي معلومات تهم الفرونت ايند غير يمكن ميتا داتا وعمري ما احتاجت دا في مهنتي حتي الآن. لكن كلامك صحيح، الديكود لا يحتاج للسيكرت وححاول انشر التصحيح دا لاحقا في حلقة مقبلة. اشكرك!
الله يعطيك العافية يارب
انا بتابع حلقات حضرتك على untyped دايما وبتعلم منك كتير ❤️🙏🏻 ينفع يا باشمهندس ، تناقش ال headless CMS بالتكنولوچي والمميزات والعيوب من حيث الديف والبيزنس وهل هو المستقبل ولا لا
شكرًا ليكم جميعا ❤❤
بارك الله فيكم جميعا
عاش ي عوض تسلم ايدك
لقاء البورسعيديه ❤
ممكن حضرتك توضح ازاي بتتعامل مع ال duplication و ال complexity اللي بتزيد مع كل feature flag? و مثلا هل بتعمل component مع كل feature flag ولا بتفضل في نفس الcomponent و تفضل تحط if conditions?
شكرا علي المحتوي .. جميل جدا لو كان ممكن بس تقسيم الفديو حسب المواضيع اللي هيتمالحديث عنها بحيث المشاهد يبقي عارف هو هيشوف ايه شكرا
ينقصنا مثل هذه البثوث في المحتوى العربي ، الله يوفقكم ونرجوا المزيد.
مشكور على جهودك ومشاركتك لمعرفتك معنا بارك الله فيك
شكرًا على الإفادة يا هندسة ♥️
جو الراديو دا رائع والله حبيته اوي 😂❤
مشكلة كبيرة كانت عندنا كود من 2018 لم يتم تحديثه و معتمد علي CommonJS, فعشان نعمل تطوير وانتقال جزء استخدمنا babeljs عشان ندعم الاثنين بس كان الم تعالج الأخطاء حتي تصل لي حاجة مريحة.
مشكور علي الموضوع. انا مطور ionic من 2014 حقيي في اول فترة كان تحدي كبير التطوير عليه . ولكن الان الموضوع اصحب ميسر جدا و نادر ما نقوم بنقل تطبيق الي flutter او نشتغل native .
انا كنت مفكر الابلكيشنز اللي من النوع ده مجرد web view مفكرتش ان في frameworks ودعم كبير للموضوع ده
شكرا على مجهودك يا باشمهندس ❤
God bless u
❤❤❤
ربنا يبارك فيك يا بشمهندس، فعلا البودكاست ده فرق كتيرمعايا.
ماشاء الله عليك ياهندسه والله حتي لو فيه بودكاست عارف انه خارج دايرة المزاكره بتاعتي بس بسمعه برضو , ربنا ينفع بك ياغالي ويكرمك ويكتر من أمثالك ❤
Id like to know more about caching and hashing (and el 7abashtakanat 😊) as mentioned in 28:00
جزاك الله خيرا ❤
God bless you
احلى حاجه فى فيديوهاتك يا هندسة انها بتفتح مواضيع كتيره وبتعرف الواحد انه لسه بدرى
محتوى عظيم كالعادة يا هندسه ❤ كنت باسمع احياناً نصايح زي استخدم الـ semantic tags زي main وaside وarticle وكذلك لازم استخدام الـ h1 جوا الصفحة وراعي ترتيب العناوين ولأن دا مهم للـ SEO ... هل كل الكلام دا مظبوط ولا لا؟ وايه موضوع الـ article schema لو عندك فكره عنها بيتم استعمالها كتير في صحفات الـ FAQ ؟
من ناحية ال semantic html فهو ضروري، لكن مش للدرجة الكبيرة. العناوين يمكن اهم حاجة. لكن ترتيب العناوين وتقسيم المحتوي مش بيساهم في الrank بشكل مباشر. هدف ال semantic html الأساسي هو ال accessability و كل ما يكون افضل كل ما يكون احسن للمستخدمين ويعلي الترافيك بتاعك فممكن ينعكس ايجابياً في الاخر.
God bless you
الله ينور يا هندسة
God bless you
God bless you
God bless you
جزاك الله خيرا يا بشمهندس
عاش ياهندسة ❤، مش ناوي تضيف فيديو فالبودكاست؟ او حتى ممكن الحلقة كلها تبقى صوت عادي وممكن نعمل demo مثال مثلا ب فيديو ف دا يوضح الفكرة اكتر وكدة.. لو دا هيجي على سبيل ال consistency ف لا خليها صوت😂