- Видео 58
- Просмотров 22 461
Abdelrahman Awad
Добавлен 14 сен 2013
Transition Events
هل استعملت قبل كدا setTimeout علشان تستني CSS Transition او انيميشن انه يخلص؟ في طريقة احسن بكتير وحتتعلمها معايا في هذه الحلقة.
حعدي علي الـ Events المختلفة الي ممكن تستمع ليها وامتي كلاً منهم ممكن يفيدك مع بعض الامثلة الحقيقية والعملية الي حتفرق معاك.
الحلقة دي برعاية Prisma (www.prisma.io/?via=awad)
لينكات مفيدة:
• transitionend Event | MDN (developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)
• transition-delay | MDN (developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
• animationend Event | MDN (developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
• Popovers and Floating UIs | Untyped (untyped.fm/episodes/34-popovers-and-floating-uis/)
•...
حعدي علي الـ Events المختلفة الي ممكن تستمع ليها وامتي كلاً منهم ممكن يفيدك مع بعض الامثلة الحقيقية والعملية الي حتفرق معاك.
الحلقة دي برعاية Prisma (www.prisma.io/?via=awad)
لينكات مفيدة:
• transitionend Event | MDN (developer.mozilla.org/en-US/docs/Web/API/Element/transitionend_event)
• transition-delay | MDN (developer.mozilla.org/en-US/docs/Web/CSS/transition-delay)
• animationend Event | MDN (developer.mozilla.org/en-US/docs/Web/API/Element/animationend_event)
• Popovers and Floating UIs | Untyped (untyped.fm/episodes/34-popovers-and-floating-uis/)
•...
Просмотров: 154
Видео
You should use Container Queries Now
Просмотров 228День назад
في الحلقة دي بتكلم عن خاصية جديدة في الـ CSS موجودة من سنين واصبحت متاحة في جميع المتصفحات السنة الي فاتت. الـ Container Queries هي طريقة جديدة تساعدك تبني Responsive UI باسلوب يناسب طبيعة شغلنا الـ Component Based Architecture. دلوقتي تقدر تبني Components مدركة لابعادها وتخليها تتكايف مع المساحة المتاحة لها في اي مكان تستعمله فيها وبذكر اكثر من مثال عملي يبان فيها قوة الـ Container Queries. لي...
Progressive Enhancement vs Graceful Degradation
Просмотров 18321 день назад
في الحلقة دي بتكلم عن الفرق بين مصطلحين متداخلين وناس كتيرة بتخلط ما بينهم لانهم بيوصلوك لنفس النتيجة معظم الوقت. لكن فيه فرق جوهري بين الاثنين، ومعرفة الفرق حتفرق معاك في ازاي بتبني الويب وتحسين مستوي جودة الابليكشن الي انت شغال عليه. وحتكتشف ان فيه اوقات لازم تستعمل واحد منهم لأن الثاني غير مناسب لطبيعة وبيئة وجمهور شغلك. لينكات مفيدة: • animation-timeline | MDN (developer.mozilla.org/en-US/d...
Forms are Formidable
Просмотров 25528 дней назад
هل تسائلت ليه دايما بتسمع ان الـ Forms صعبة لكن مفهمتش ليه؟ ليه ليها مكتبات كتيرة وايه المشاكل الي بيحاولوا يحلوها؟ في الحلقة دي بتكلم عن الـ Forms من اكثر من منظور. اولاً من واقع خبرتي كواحد اشتغل عليها، كواحد استعملها وكواحد عمل مكتبات تساعد ملايين الاشخاص انهم يعملوا Forms وازاي الـ Balance ما بين المناظير المختلفة دي بتفرق في جودة المكتبة الي انت بتستعملها. لينكات مفيدة: • FormData Object |...
Thoughts on Web Components
Просмотров 237Месяц назад
في الحلقة دي بتكلم عن الـ 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 (ruclips.net/video/Oyd8XQmoy-E/видео.html) • Element Internals (...
Repeatable Requests with Idempotency
Просмотров 203Месяц назад
في الحلقة دي بتكلم عن مصطلح مهم جداً وهو الـ 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?
Просмотров 370Месяц назад
في الحلقة دي بتكلم عن الـ VDOM وازاي تقارن بالـ DOM وليه احنا كنا محتاجينها بشدة وازاي ممكن تختلف من Framework لآخر بالرغم من انها نفس المبدأ وازاي الاختلافات دي بتأثر عليك في طريقة كتابتك للكود. ببص عليها من نواحي مختلفة ممكن مسمعتهاش قبل كدا زي ليه الـ HTML سيئ كوسيلة Serialization وايه الي يخلي الـ VDOM اسهل في عملية الـ Rendering. وبختم بنظرة علي آخر الـ Frameworks وليه التطور القادم للادوا...
Corrections on Auth
Просмотров 174Месяц назад
تصحيحات الحلقة السابقة بعد ما اكثر من شخص تواصل معايا بخصوص بعض الاخطاء في الكلام الي قولته عن الـ JWT. الخلاصة اني نسيت انه Base64 Encoded وبالتالي اي حد يقدر يعمله decode بشكل آمن من غير ما يعرف الـ Secret Key. فلو انت بتعمل كدا علي الـ Client Side دا مش خطر. الخطر ان يكون الـ Secret Key موجود بشكل ما علي الـ Client Side زي مثلاً يكون في موضع يمكنه انه يتحقق من صحة الـ Token من غير ما يرجع لل...
Yapping about Auth
Просмотров 543Месяц назад
في الحلقة دي بتكلم عن الـ 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 بالعربي
Просмотров 3,1 тыс.Месяц назад
نتناقش عن عالم الاوبن سورس ونتكلم عن خلاصة تجاربنا فيه القديمة والمستمرة، ومن اكثر من منظور سواء كمساهمين، كصناع مكتبات، او كمستخدمين واصحاب مبادرات. بنتكلم بشكل عام يعني ايه اوبن سورس واشكاله المختلفة، وازاي تبدأ في المساهمة وتختار نوعها وايه الصعوبات الي ممكن تواجهك. بنتكلم برضو عن قواعد "الادب" او الـ "اتيكيت" لما تيجي تساهم في مشاريع غيرك وبعض العوامل الي ممكن لم تخطر علي بالك من واقع خبرتن...
Ship Faster with Feature Flags
Просмотров 2162 месяца назад
في الحلقة دي بتكلم عن Technique مهمة جداً نعرفها وهي الـ Feature Flags. بتكلم عن ازاي بتسمح لينا اننا نختبر Features جديدة بدون ما نأثر علي المستخدمين الحاليين وازاي بنعملها Release لكل المستخدمين بدون تغيير اي حاجة في الـ source code. بدي امثلة عملية من شغلي وازاي وجهة نظري السلبية عنها تغيرت لايجابية، وايه الادوات والتقنيات الي ممكن تساعدك في ادارتها بفعالية. لينكات مفيدة: • Flipper (www.flip...
Debugging JS with logs and breakpoints
Просмотров 2202 месяца назад
Debugging JS with logs and breakpoints
ممتع ..شكرا ليك ي عبد الرحمن وكل الناس الجميله اللي كانت حاضره
حلقة جميلة يعطيكم العافيه بس يليت لو تكلمتوا عن نقطة كيف نقفل الdialog اذا ضغطنا على اي مكان outside the dialog لأنه بحثت والموضوع مش بسيط
بارك الله فيكم
حلقة جامدة جدًا ومفيدة جزاكم الله كل خير على مجهودكم والله 🙏👍👍👍
وفقكم الله لما يحب ويرضى
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
الله ينور يا هندسة