Top Tweets for #FrontEndSystemDesign
السلام عليكــــــــــــم
دي الحلقة الـ18 من سلسلة #frontendsystemdesign بالعربي
المفروض إننا كنا بنتكلم عن الـ Real-time updates، بس آخر update في السلسلة كان من 4 شهور, فواضح إن الـ implementation كان محتاج شوية تحسينات بس أخيرا رجعنا 😂
هنكمل كلامنا ان شاء الله في الحلقة دي علي الـ Real-time updates وهنتكلم علي تاني paradigm معانا وهو الـ Server-Sent Events او الـ SSE
هنتكلم علي ازاي الـ SSE بتشتغل وليه بالرغم من بساطته فهو حل منطقي جدا في حالات كتير بدل ما الـ client يفضل يعمل polling، وازاي هو في الآخر شغال باستخدام HTTP عادي من غير ما نحتاج protocol جديد
هنشوف ازاي الـ browser بيساعدنا من خلال الـ EventSource والـ automatic reconnection لو الـ connection قطعت، وايه المشاكل والـ limitations الي محتاجين ناخد بالنا منها عشان نقدر نعمل production ready implementation
هنتكلم كمان علي واحد من أهم استخدامات الـ SSE دلوقتي وهو الـ AI streaming وهنشوف demo بسيط ازاي بيشتغل و implementation صغير من ناحية الـ Client + Server
وأخيرا هنقارنه بالـ long polling ونعرف امتي الـ SSE يكون الاختيار المناسب وامتي لا
ده لينك الحلقة، أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/lI21EiEek6
#frontend_بالعربي #fsd #frontendsystemdesign #frontend #systemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ17 من سلسلة #frontendsystemdesign بالعربي
هنكمل كلامنا في الحلقة دي علي الـ Real-time updates وهنتكلم علي أول paradigm معانا وهو الـ Client Pull
هنتكلم فيه المقصود بالـ client pull وازاي هو لسه حل منطقي في حالات كتير
هنتكلم علي الـ short polling وبيشتغل ازاي وايه المشاكل الي موجود في الـ implementation البسيط بتاعة والي محتاج تاخد بالك منها كمشاكل زي race-conditions او كتحسينات زي polling on a hidden tab ونشوف مع بعض الـ production ready implementation الي فيه كل التفاصيل دي
هنتكلم بعد كدا علي الـ long polling وايه الي بيحاول يحسنه علي الـ short polling وايه الي هنستفيده منه وايه الـ challenges الي بيضيفها خاصا من ناحية الـ server والي منها اتكلمنا علي الـ stateful vs stateless وايه مشكلة الـ state هنا وهل هيبقي في مشاكل من ناحية الـ scaling ولا لا
واخيرا مقارنة بينهم واستخدام كل واحد فيهم امتي.
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/OzthTW66bC
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ16 من سلسلة #frontendsystemdesign بالعربي
هنبدأ نتكلم من الحلقة دي علي موضوع جديد و ممتع وهو الـ Real-time updates
هنتكلم علي الـ Real-time updates وأهميتها وازاي بقت دلوقتي جزء أساسي من تقريبا كل الـ apps والـ interviews خاصا مع سعي أغلب الشركات انها تضيف agentic features عندها بشكل او بأخر ونفهم ليه ده موضوع مهم في الـ System design interviews
هنتكلم علي معني Real-time وازاي انه spectrum مش binary وازاي اختلاف مكان الـ app بتاعك علي نقطة من الـ spectrum ده بيغير تماما كل حاجة
هنعرف الأسئلة المهمة الي تخليك تفهم احتاج الـ app/feature بتاعتك من الـ Real-time والـ constraints الي عندك والي بناءا عليها هنختار الـ technique المناسب
وأخيرا هنتكلم علي ازاي الـ HTTP مخلي الموضوع صعب وازاي كل Paradigm بيحاول يعمل workaround علشان يحل المشكلة سواء Client Pull او Server Push او Full-Duplex
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/LR2lvcpZlG
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ15 من سلسلة #frontendsystemdesign بالعربي
هنتكلم في الحلقة دي علي واحد من المواضيع الممتعة وهو الـ Normalization
هنبدأ كلامنا علي نظرة علي طبيعة الـ state في أغلب الـ apps الي بنبنيها وبنستخدمها من حيث انها relational data, وهنتكلم علي الـ nested structure بتاعها
هنعرف ايه مشاكل الـ nested structure دي بالتفاصيل ونشوف تأثير كل مشكلة منهم علي الـ performance و الـ user data والي هتبقي السبب الي هيخلينها نفكر في الـ normalization
هنعرف ايه هو الـ normalization, بيشتغل ازاي وهنشوف demo عملناه مع بعض وهنعدي سوا علي الـ code بتاعة
وأخيرا هنتكلم علي الـ downsides بتاعته وحاجات تساعدنا نقرر امتي هنكون محتاجينه وامتي لا
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/oXsT5WkmX5
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ14 من سلسلة #frontendsystemdesign بالعربي
هنتكلم فيها علي أخر جزء من الـ Icons rendering techniques
هنشوف بالتفاصيل الـ techniques الي بتركز أكتر علي الـ SVGs هنتكلم علي SVG as asset, Inline SVG وأخر حاجة SVG Sprites (Internal vs External)
هنتكلم بالتفاصيل علي كل technique منهم وهنشوف مع بعض في الأخر 3 production apps وكل واحد فيهم بيستخدم أنهي technique وليه وهل ممكن app يستخدم أكتر من technique في نفس الـ page ولا لا وليه
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/TWpUdc9x4R
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ13 من سلسلة #frontendsystemdesign بالعربي
في الحلقة دي هنكمل كلامنا عن الـ Icons rendering techniques
هنبدأ نتكلم علي أول 3 techniques, هنعرف مع بعض ازاي كل واحد فيهم بيشتغل والحاجة الي الـ technique ده بيحاول يحلها, وايه مميزاته وعيوبه وايه أفضل use cases لكل واحد فيهم
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/oN6F9LqyLd
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ12 من سلسلة #frontendsystemdesign بالعربي
هنبدأ نتكلم من الحلقة دي علي موضوع جديد وهو الـ Icons rendering techniques
الـ Icons جزء أساسي من اي website/webapp بنشتغل عليه وفي الأغلب بيكون عدد الـ Icons في الـ page كبيرة; مع زيادة أستخدام الـ Icons تيجي أهميتها في الـ FE System Design process وأهمية التفكير في الـ Icon rendering والطرق المختلفة الي نقدر نستخدمها ومميزات وعيوب كل طريقة منهم
هنبدأ كلامنا في الحلقة دي بمقدمة للموضوع, ليه الـ Icons بتستخدم بشكل كبيرة وايه مميزاتها عن الـ elements التانية, ايه الـ goals الي محتاجيين نحققها بأختلاف الـ Icon rendering techniques
وهنتكلم علي الـ prerequisites الي هتساعدنا نفهم أحسن الـ rendering techniques المختلفة; فهنتكلم علي الـ Raster vs. Vector images, هنتكلم علي الـ SVG internals ونشوف خطوات الـ drawing وأخيرا هنتكلم علي الـ Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT) وايه علاقتهم بالـ Icon rendering
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/Rk8Qz5pq6d
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ11 من سلسلة #frontendsystemdesign بالعربي
هنتكلم في الحلقة دي علي Pagination techniques, هنعرف ايه هو الـ pagination وايه المشاكل الي بيحاول يحلها
هنتكلم علي أشكال الـ pagination من ناحية الـ UI/UX والأختلافات بينهم وهنتكلم علي الجزء الأهم وهو الـ pagination techniques
هنشوف الـ Offset-based vs Cursor-based والأنواع المختلفة ليهم, ازاي كل واحد فيهم بيشتغل بالتفصيل وايه مميزات وعيوب كل واحد فيهم
وازاي في حالات معينة أختيار technique عن التاني ممكن تخلي الـ users يشوفوا data غلط
واخيرا هنشوف ازاي أختلاف الـ use-case والـ requirements بيحدد الـ technique المناسب وبناءا علي ايه نختار كل واحد فيهم
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/ZNAONGrrmP
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ10 من سلسلة #frontendsystemdesign بالعربي وفي الحلقة دي هنتكلم علي Appearance as an API
أتكلمنا في الحلقة الي فاتت علي الـgood و الـbad component design واتكلمنا علي ازاي الـ component بتكون أحسن كل ما كانت customizable أكتر ولكن متكلمناش علي ايه تفاصيل الـ customization ولا ايه الطرق المختلفة للـ customizations دي.
فالحلقة دي هنتكلم علي One-off vs Global customization والطرق المختلفة لكل واحد منهم, وايه الحاجات الأساسية الي بنحاول نوازن بينها في اختيار الـ customization technique وهل ممكن نجمع بينهم
وازاي نقدر نخلي الـ component بتاعتنا customizable و ازاي نقدر نختار ونقيم اي component او UI library بنتعامل معاها من ناحية الـ appearance customization
وهنتكلم كمان علي أكتر من technique ونشوف مميزات وعيوب كل واحد منهم ونتكلم بأمثلة علي ازاي نقدر نطبق الـ techniques دي سواء بتعمل design للـ component كجزء من Interview او جوا الشركة بتاعتك @wondercraft_ai
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/p2DQ1DosHs
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ9 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم علي واحد من أمتع المواضيع في Frontend System Design وهو Component API Design
كـ frontend بنتعامل مع components تقريبا طول الوقت, سواء بنكتب components وناس بتستخدمها او بنستخدم components ناس تانية عملتها.
وكلنا قابلنا مواقف كتيرة واحنا بنتعامل مع الـ components, جزء من المواقف دي بتبقي good experience وبنبقي مبسوطين لما نلاقي الـ component بتعمل بالظبط الي محتاجينه ونقدر نستخدمها في الهدف بتاعنا, وأوقات كتير برضو بتبقي bad experience وبنقابل فيها مشاكل كتيرة تخلي استخدامنا للـ component دي صعب وبنتضطر نعمل حلول تانية.
فالحلقة دي هنتكلم علي ازاي الشعور بتاع الـ good/bad experience ده وراها تفاصيل كتيرة مرتبطة بالـ component design وبالاخص الـ API بتاعها. وبعدين هنتكلم علي guides/principles نهتم ونركز عليها واحنا بنعمل API design لاي component وهنشوف ده مع بعض بالأمثلة
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/AEhUg799YC
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ8 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم علي أخر خطوة معانا في الـ RADIO Framework وهي الـ Optimizations and deep dive
هنعرف ايه الهدف من الخطوة دي وازاي أهميتها في انها الخطوة الي فيها بنتكلم علي الـ core area في اي system بنعمله design سواء Performance, Accessibility, Security, Network
وهنتكلم علي ايه الفرق في تطبيق الخطوة دي بين اننا شغالين علي feature جوا الشغل أو بنحل System design problem كجزء من Interview
وبكدا يبقي خلصنا الكلام علي RADIO Framework بشكل كام ومن الحلقات الجاية هنبدأ تطبيق الـ Framework علي systems وتطبيقات مختلفة ونشوف مع بعض الـ patterns المختلفة لكل جزء منهم
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة
https://t.co/dHyh5PNWeH
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ7 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم علي رابع خطوة معانا في الـ RADIO Framework وهي الـ Interface definition (API), هنعرف مع بعض ايه المقصود بالـ API في الـ Frontend System Design وازاي بنستخدم المصطلح ده بشكل أشمل من فكرة الـ Frontend<>Backend Communication وازاي هنستخدمة في التعبير عن اي layers بيكون في بينهم تواصل.
هنعرف ايه هي الـ components الأساسية في تعريف اي Interface وازاي الـ components دي بتتغير من layer لـ layer سواء بنتكلم علي Client<>Client او Client<>Server
وبعدين هنتكلم علي تطبيق الكلام ده علي مثال عملي ونشوف تطبيق ده كـ diagrams او wireframes في حاجه زي excalidraw.
وأخير هنتكلم علي الخطوات الجاية في Interface definition وازاي في patterns مختلفة في Client<>Server communication وازاي قدام هنتكلم علي API design للـ UI components
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/RPMOv70hHI
كل السلايدز بتاعة الفيديوهات سواء Frontend Performance او Frontend System Design موجودة هنا علي الـ Drive ومتاحة لاي حد حابب يستخدمها او يعدلها من غير اي داعي انه يستأذن وبرضو كل الفيديوهات موجودة sound علي Spotify علشان لو حد حابب يسمعها
- https://t.co/e7vJLcCy2v
- https://t.co/2V1Jq0sr7u
- https://t.co/TWwy2e8p6u
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ6 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم علي تالت خطوة معانا في الـ RADIO Framework وهي الـ Data model/Core entities
هنعرف مع بعض ايه الهدف من الخطوة دي, وازاي بتساعدنا نوصف الـ system من وجهة نظر الـ data.
هنتكلم علي الـ Server Originated Data vs. Client Originated Data والفروقات بينهم وازاي نتعامل مع كل واحد فيهم وأمثلة عليهم وهنتكلم كمان علي الـ Persisted Data vs. Temporary Data
وهنتكلم كمان علي ازاي بنقدر نعبر عن الـ state بـ Typescript notation و best practices مختلفة, واخيرا هنطبق ده مع بعض بمثال عملي علي system ونتكلم علي الـ entities المختلفة الي موجودة فيه
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/FxjEcTKyRx
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ5 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم علي تاني خطوة معانا في الـ RADIO Framework وهي الـ Architecture/High-Level Design
هنعرف مع بعض ايه الهدف من الخطوة دي, وازاي هي بتبني علي الـ Requirement Exploration Step وهنشوف الخطوتين الي هنعملهم علشان نوصل للـ High Level Design وهل فعلا محتاج الخطوتين دول كل مرة ولا لا.
هنتكلم علي الـ Wireframe والـ Dependency Graph وازاي فبنوصل للعلاقة بين الـ Components/Modules الي عندنا في الـ System الي بنحاول نبنيه ونطبيق علي ده بامثلة مع بعض.
وأخيرا هنتكلم علي ملاحظات مهمة جدا تساعدنا نعمل الـ High Level Design بطريقة صح بأختلاف حجم الـ System
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/f8BMbKKktJ
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ4 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنبدأ نتكلم علي RADIO Framework وهنبدأ بأول خطوة وهي الـ R (Requirement Exploration) وهنتكلم قد ايه الخطوة دي مهمة والي بيتبني عليها كل الـ Steps بعد كدا سواء بنتكلم علي Design Problem في Interview او لـ Feature جديدة في الشغل بتاعك.
وهنتكلم علي جزئية مهمة جدا خاصا في الـ Interviews وهو ان الـ Requirement أوقات كتيرة بتبقي Vague on purpose ومطلوب منك تسأل الأسئلة المناسبة علشان تعرف النقاط المهمة في الـ System
وأخيرا هنتكلم علي الـ Functional vs Non-Functional Requirements والفروقات بينهم وازاي تحدد الـ Focus Area في كل واحد فيهم وهنشوف ده بامثلة مع بعض.
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/OX21JuVokk
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ3 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم على الفرق بين الـ Frontend System Design و الـ Frontend Architecture.
هنبدأ من الأول بالكلام على الـ Software Architecture وايه المقصود بيه والـ definitions المختلفة ليه, وبعدين هنتكلم عن الـ Frontend Architecture, وبعدين هنتكلم عن الفرق بين الـ Design و Architectural decision وليه مهم جدا نعرف الفرق بينهم وازاي ده بيساعدنا في اي قرار بناخده في الـ System بتاعنا باختلاف حجمه.
ده لينك الحلقة, أتمنى إن شاء الله تكون مفيدة ❤️
https://t.co/Py9vm45VJI
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
السلام عليكــــــــــــم
دي الحلقة الـ2 من سلسلة #frontendsystemdesign بالعربي.
فالحلقة دي هنتكلم علي الفرق بين الـ Frontend System Design و الـ Backend System Design وهنفهم مع بعض الجوانب المختلفة الي كل واحد فيهم بيهتم بيها, وهنشوف ده علي مثال وازاي الأختلافات دي بتظهر.
وهنتكلم علي الـ intersection بينهم وازاي معرفتنا بالجانب التاني مهم, وكمان هنتكلم عن الـ local maximum و الـ global maximum وازاي كل ما معرفتنا بـ System Design بتزيد كل ما بنوصل لـ better decisions في الـ System بشكل عام.
ده لينك الحلقة, أتمني إن شاء الله تكون مفيدة ❤️
https://t.co/ZGkFVi0V6V
#frontend_بالعربي #systemdesign #frontend #frontendsystemdesign #scalablefrontend #frontendarchitecture #FrontendDev
Freshers: Do I need to know frontend system design?
Me: If you want to become a painter, you don't need. But if want to become an artist, you must 🙂
#FrontEndSystemDesign #softwareengineering #chakdeSystemDesign
Last Seen Hashtags on Sotwe
ชอบควยใหญ่
Seen from Thailand
สาวเสียบกรุงเทพ
Seen from Thailand
momson momson() filter:native_video
Seen from Philippines
黄果短剧
snapchat
Seen from Italy
hijab video
Seen from Indonesia
หลุดนักเรียน
Seen from Thailand
ให้รุ่นน้องเย็ดเมีย
Seen from United Kingdom
clip
Seen from United States
candids
Seen from United States
Trends for you
Most Popular Users
Elon Musk 
@elonmusk
241.7M followers
Barack Obama
@barackobama
119M followers
Cristiano Ronaldo
@cristiano
114.5M followers
Donald J. Trump
@realdonaldtrump
111.9M followers
Narendra Modi
@narendramodi
107.2M followers
Rihanna
@rihanna
98.7M followers
NASA
@nasa
92.4M followers
Justin Bieber
@justinbieber
91.8M followers
KATY PERRY
@katyperry
90M followers
Taylor Swift
@taylorswift13
84M followers
Lady Gaga
@ladygaga
75.5M followers
Virat Kohli
@imvkohli
73.4M followers
Kim Kardashian
@kimkardashian
70.9M followers
YouTube
@youtube
68.8M followers
Neymar Jr
@neymarjr
66.4M followers
Bill Gates
@billgates
65.2M followers
Selena Gomez
@selenagomez
63.1M followers
The Ellen Show
@theellenshow
62.3M followers
CNN
@cnn
61.8M followers
X
@x
60.7M followers