https://scrollbar.app
Design your scrollbar style online interactively and directly copy the adjusted CSS code.
Design your scrollbar style online interactively and directly copy the adjusted CSS code.
scrollbar.app
Simple CSS scrollbar editor.
👍2
يعني إيه Error Boundaries؟
Error Boundaries
ببساطة هما components في React بتتحط حوالين components تانية عشان تCatch أي أخطاء تحصل في الـrendering أو ال Lifecycle Methods بتاعة الcomponents دي. يعني زي شبكة أمان كده بتمنع التطبيق كله إنه ي failing لو فيه خطأ حصل في component معين. الفكرة إننا بدل ما المستخدم يشوف شاشة بيضا أو الأبلكيشن مش شغال بنعرضله fallback UIs
إيه فايدة Error Boundaries؟
الفايدة الرئيسية لـ Error Boundaries هي إنها بتحمي التطبيق من الcrashing لو حصلت مشكلة غير متوقعة. يعني لو فيه component حصل فيه مشكلة، Error Boundaries بتعزله وتتعامل معاه، وده بيضمن إن بقية التطبيق يفضل شغال بدون مشاكل. كمان هي بتحسن تجربة المستخدم لأنها بتعرض رسائل خطأ أو fallback بدل ما المستخدم يشوف حاجة مش مفهومة أو شاشة فاضية.
أنواع الأخطاء اللي ممكن تعملها Caught بال Error Boundaries
الأخطاء اللي بتحصل في الـRendering
لو فيه component حصل فيه مشكلة أثناء الـrendering، زي مثلًا قيمة مش متوقعة أو متغير undefined، بتcatch الخطأ ده. الأخطاء دي ممكن تحصل بسبب داتا غلط مبعوتة للcomponent، أو مشكلة في component structure أو في لوجيك ال component.
أخطاء في Lifecycle Methods
الcomponents في React عندها Lifecycle Methods زي componentDidMount, componentDidUpdate, وcomponentWillUnmount. الأخطاء هنا ممكن تحصل لو فيه مشكلة في API call، أو لما نعدل state، أو لو فيه مشكلة مع مكتبة خارجية. Error Boundaries بتcatch الأخطاء دي وتمنعها من إنها توقف عملية الـrendering أو تخلي التطبيق يfail.
شايفكم ي محدثين الريأكت وانتوا بتقولوا اي ال Lifecycle Methods دي أول مرة أسمع عنها :(
أخطاء في Child Components
ال Error Boundaries مفيدة جدًا في إنها تcatch الأخطاء اللي بتحصل في الComponent اللي جواها. يعني لو فيه مشكلة في الـrendering أو في Lifecycle Methods بتاعت child component،
ال Error Boundaries الأقرب لل Component هتcatch الخطأ ده وتمنعه من إنه يطلع لفوق ويأثر على بقية التطبيق.
أخطاء في Event Handlers
مهم نعرف إن Error Boundaries مبتعملش catch للأخطاء اللي بتحصل في Event Handlers أو الكود اللي بيشتغل بشكل غير متزامن زي setTimeout أو الـfetch requests. في الحالة دي، لازم نستخدم JavaScript try-catch عشان نتعامل مع الأخطاء.
أخطاء في Constructors كمان ممكن الأخطاء اللي بتحصل في الـconstructor بتاع الComponent. لو فيه خطأ حصل أثناء مرحلة الـinitialization،
ال Error Boundaries هتعمله catch وتتعامل معاه بشكل مناسب، وده بيضمن إن الComponent يفضل شغال تمام
إزاي نطبق ال Error Boundaries؟
عشان نعمل Error Boundary، لازم نعمل Class Component بتستخدم method اسمها getDerivedStateFromError وmethod تانية اسمها componentDidCatch. الميثود الأولانية بتسمح للكومبوننت إنه يغير الـstate لو حصل خطأ، والتانية بتتعامل مع الخطأ وتعرض واجهة بديلة أو ت log الخطأ عشان نعرف نصلحه.
بنحط Error Boundaries حوالين Components
عشان نستخدم الـError Boundary، بنحطها ك wrapper لل Component اللي محتمل يحصل فيها مشاكل. لما يحصل خطأ في child component
ال React بتشغل method componentDidCatch في أقرب Error Boundary وبتتعامل مع الخطأ.
نعال نبص ع مثال لل Error Boundary Component
نصايح لاستخدامها صح
حاول تحط الـError Boundaries في المكان الصح
الأفضل إنك تحطها حوالين الأجزاء اللي فيها احتمال أكبر لحدوث أخطاء، عشان تضمن إن الأخطاء في Component معين ما تأثرش على التطبيق كله.
استخدم أكتر من Error Boundary
لو عندكlarge component trees ، يبقى من الأفضل إنك تستخدم أكتر من Error Boundary. ده بيديك تحكم أدق في معالجة الأخطاء، وبتقدر تعرض واجهات بديلة أو رسائل خطأ مخصصة لكل جزء من التطبيق الnext عظمة ف الحوار دا
زي أي جزء تاني من الكود، لازم تختبر الـError Boundaries كويس. عشان تتأكد إنها بتشتغل زي ما أنت متوقع وتتعامل مع الأخطاء بشكل سليم.
ممكن توفر ع نفسك وتستخدم react-error-boundary واحد من اللي عاملينها kentcdodds اللي عامل كورس ريأكت عظمة
Error Boundaries
ببساطة هما components في React بتتحط حوالين components تانية عشان تCatch أي أخطاء تحصل في الـrendering أو ال Lifecycle Methods بتاعة الcomponents دي. يعني زي شبكة أمان كده بتمنع التطبيق كله إنه ي failing لو فيه خطأ حصل في component معين. الفكرة إننا بدل ما المستخدم يشوف شاشة بيضا أو الأبلكيشن مش شغال بنعرضله fallback UIs
إيه فايدة Error Boundaries؟
الفايدة الرئيسية لـ Error Boundaries هي إنها بتحمي التطبيق من الcrashing لو حصلت مشكلة غير متوقعة. يعني لو فيه component حصل فيه مشكلة، Error Boundaries بتعزله وتتعامل معاه، وده بيضمن إن بقية التطبيق يفضل شغال بدون مشاكل. كمان هي بتحسن تجربة المستخدم لأنها بتعرض رسائل خطأ أو fallback بدل ما المستخدم يشوف حاجة مش مفهومة أو شاشة فاضية.
أنواع الأخطاء اللي ممكن تعملها Caught بال Error Boundaries
الأخطاء اللي بتحصل في الـRendering
لو فيه component حصل فيه مشكلة أثناء الـrendering، زي مثلًا قيمة مش متوقعة أو متغير undefined، بتcatch الخطأ ده. الأخطاء دي ممكن تحصل بسبب داتا غلط مبعوتة للcomponent، أو مشكلة في component structure أو في لوجيك ال component.
أخطاء في Lifecycle Methods
الcomponents في React عندها Lifecycle Methods زي componentDidMount, componentDidUpdate, وcomponentWillUnmount. الأخطاء هنا ممكن تحصل لو فيه مشكلة في API call، أو لما نعدل state، أو لو فيه مشكلة مع مكتبة خارجية. Error Boundaries بتcatch الأخطاء دي وتمنعها من إنها توقف عملية الـrendering أو تخلي التطبيق يfail.
شايفكم ي محدثين الريأكت وانتوا بتقولوا اي ال Lifecycle Methods دي أول مرة أسمع عنها :(
أخطاء في Child Components
ال Error Boundaries مفيدة جدًا في إنها تcatch الأخطاء اللي بتحصل في الComponent اللي جواها. يعني لو فيه مشكلة في الـrendering أو في Lifecycle Methods بتاعت child component،
ال Error Boundaries الأقرب لل Component هتcatch الخطأ ده وتمنعه من إنه يطلع لفوق ويأثر على بقية التطبيق.
أخطاء في Event Handlers
مهم نعرف إن Error Boundaries مبتعملش catch للأخطاء اللي بتحصل في Event Handlers أو الكود اللي بيشتغل بشكل غير متزامن زي setTimeout أو الـfetch requests. في الحالة دي، لازم نستخدم JavaScript try-catch عشان نتعامل مع الأخطاء.
أخطاء في Constructors كمان ممكن الأخطاء اللي بتحصل في الـconstructor بتاع الComponent. لو فيه خطأ حصل أثناء مرحلة الـinitialization،
ال Error Boundaries هتعمله catch وتتعامل معاه بشكل مناسب، وده بيضمن إن الComponent يفضل شغال تمام
إزاي نطبق ال Error Boundaries؟
عشان نعمل Error Boundary، لازم نعمل Class Component بتستخدم method اسمها getDerivedStateFromError وmethod تانية اسمها componentDidCatch. الميثود الأولانية بتسمح للكومبوننت إنه يغير الـstate لو حصل خطأ، والتانية بتتعامل مع الخطأ وتعرض واجهة بديلة أو ت log الخطأ عشان نعرف نصلحه.
بنحط Error Boundaries حوالين Components
عشان نستخدم الـError Boundary، بنحطها ك wrapper لل Component اللي محتمل يحصل فيها مشاكل. لما يحصل خطأ في child component
ال React بتشغل method componentDidCatch في أقرب Error Boundary وبتتعامل مع الخطأ.
نعال نبص ع مثال لل Error Boundary Component
نصايح لاستخدامها صح
حاول تحط الـError Boundaries في المكان الصح
الأفضل إنك تحطها حوالين الأجزاء اللي فيها احتمال أكبر لحدوث أخطاء، عشان تضمن إن الأخطاء في Component معين ما تأثرش على التطبيق كله.
استخدم أكتر من Error Boundary
لو عندكlarge component trees ، يبقى من الأفضل إنك تستخدم أكتر من Error Boundary. ده بيديك تحكم أدق في معالجة الأخطاء، وبتقدر تعرض واجهات بديلة أو رسائل خطأ مخصصة لكل جزء من التطبيق الnext عظمة ف الحوار دا
زي أي جزء تاني من الكود، لازم تختبر الـError Boundaries كويس. عشان تتأكد إنها بتشتغل زي ما أنت متوقع وتتعامل مع الأخطاء بشكل سليم.
ممكن توفر ع نفسك وتستخدم react-error-boundary واحد من اللي عاملينها kentcdodds اللي عامل كورس ريأكت عظمة
❤1
خلينا نتكلم شوية عن السر اللي بيخلي المواقع المفضلة عندك سريعة ومستجيبة بالشكل ده. السر في الموضوع ده بيرجع لطريقة التعامل مع الـ DOM.
الـ (Document Object Model) بيمثل الصفحة بتاعتك على هيئة structured tree.
زمان كنا بنستخدم طرق في الـ JavaScript زي getElementById أو removeChild عشان نعمل تعديلات على الصفحة. لكن مع تعقيد المواقع الويب وتوسعها، الطرق دي ممكن تخلي الأداء بطيء. هنا بتيجي قوة React بالـ Virtual DOM اللي غيرت قواعد اللعبة تمامًا.
المشكلة في التعامل مع الـ DOM بالطريقة التقليدية
تخيل الـ DOM كشجرة ضخمة مليانة فروع. كل مرة تحب تعدل حاجة بسيطة، زي إنك تحدث أول عنصر في قائمة من عشر عناصر، بتضطر "تهز" الشجرة كلها. ده ممكن يبطأ الأداء، وخصوصًا لما الصفحات تبقى معقدة أكتر. كل ما زاد عدد الفروع (العناصر)، كل ما بقى الموضوع أصعب.
الحل مع React
React قدمت حل رائع للمشكلة دي عن طريق الـ Virtual DOM، وده نسخة خفيفة من الـ HTML DOM.
(a lightweight in-memory representation of the real DOM)
عشان بناءا عليها هنعمل reflect لل updated state
التعديلات بتتحط الأول في الـ Virtual DOM وبعدها React بتعمل تحديث للـ DOM الحقيقي بشكل فعال وسريع.
العملية دي اسمها Reconciliation، وبتخلي التحديثات تحصل بس في الأجزاء اللي محتاجة تحديث فعلي، وده بيحسن الأداء بشكل كبير.
إزاي الـ Virtual DOM بيشتغل
لما بتعمل Render لعناصر JSX في React،
الـ Virtual DOM بيتحدث محتاجين هنا نقف ونسأل سؤال مهم أوي بيتحدث كليا ولا ؟
React only updates the parts of the Virtual DOM that have changed. This is known as "incremental rendering" or "partial rendering".
، ده أسرع بكتير من التعامل المباشر مع الـ DOM الحقيقي. ده بيحصل لإن React بتعمل نسخة من الـ Virtual DOM قبل ما تعمل أي تحديثات، وبتقارن النسخة دي مع التحديثات باستخدام عملية اسمها Diffing أو ( Reconciliation) العملية دي بتحدد العناصر اللي حصل فيها تغيير فعلاً، وReact بتحدث بس العناصر دي في الـ DOM الحقيقي.
Under the Hood React’s Diffing Algorithm
الـ Diffing في React هي السر ورا التحديثات الفعالة للـ DOM. الAlgorithm دي بتقارن بين نسختين من الـ Virtual DOM وبتطبق أقل مجموعة من التغييرات اللي محتاجها عشان تزامنهم.
مثلاً، لو أنواع العناصر الأساسية (root elements) في الشجرتين مختلفة، React هتبني الشجرة كلها من جديد. يعني لو غيرت
<div>
<Tree/>
</div>
ل
<span>
<Tree/>
</span>
بما إن العناصر الأساسية (div وspan) مختلفة، React هتعيد بناء الtree كلها.
طب لو الحالة زي دي
<span id="span1" />
<span id="span2" />
في الحالة دي، React هتحدث بس الـ id من غير ما تلمس باقي العنصر.
React كمان بتحسن التحديثات على مستوى الChild Elements
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
React هتشوف Child3 كعنصر جديد وهتحدث القائمة بناءً عليه. لكن لو أضفت عنصر جديد في البداية، React ممكن تعيد بناء القائمة كلها. وهنا بييجي دور الـ Keys.
الـ Keys بتساعد React إنها تتبع العناصر اللي حصل فيها تغيير، اللي اتضافت، أو اللي اتشالت. لازم تكون الـ Keys مميزة بين العناصر الsiblings يعني ميتككرش وثابتة بين الـ renders.
واتكلمت عنها قبل كده بالتفصيل !
Manipulating the DOM with Refs
رغم إن React بتعمل تحسينات على تحديثات الـ DOM باستخدام الـ Virtual DOM، في سيناريوهات معينة ممكن تحتاج فيها تتعامل مباشرة مع عناصر الـ DOM، زي إنك تركز على input معين، تعمل scroll لعناصر معينة، أو تقيس أبعاد عنصر. هنا بيجي دور الـ useRef Hook. من خلال إنشاء ref وربطه بعنصر DOM عن طريق ال ref، تقدر تحصل على الوصول المباشر للـ DOM node.
الـ useRef Hook بيرجع object فيه خاصية current، اللي بتبقى في الأول null لكن بتتخصص لـ DOM node بعد ما يتعمل Render. ده بيسمح لك تستدعي دوال الـ DOM مباشرة على العنصر، وده بيزود التحكم في التفاعلات المحددة.
خلينا نعمل مثال ممتع عشان نشوف الكلام ده في التطبيق. هنعمل div بيغير لونه لما تضغط على زرار. بص ع الصورة
فهم خوارزمية الـ Diffing والـ Keys في React هيساعدك تعمل تطبيقات React أنعم وأسرع لو فهمته صح
ولما تحتاج تحكم دقيق، React بتوفرلك refs اللي تساعدك تتفاعل مباشرة مع الـ DOM.
الـ (Document Object Model) بيمثل الصفحة بتاعتك على هيئة structured tree.
زمان كنا بنستخدم طرق في الـ JavaScript زي getElementById أو removeChild عشان نعمل تعديلات على الصفحة. لكن مع تعقيد المواقع الويب وتوسعها، الطرق دي ممكن تخلي الأداء بطيء. هنا بتيجي قوة React بالـ Virtual DOM اللي غيرت قواعد اللعبة تمامًا.
المشكلة في التعامل مع الـ DOM بالطريقة التقليدية
تخيل الـ DOM كشجرة ضخمة مليانة فروع. كل مرة تحب تعدل حاجة بسيطة، زي إنك تحدث أول عنصر في قائمة من عشر عناصر، بتضطر "تهز" الشجرة كلها. ده ممكن يبطأ الأداء، وخصوصًا لما الصفحات تبقى معقدة أكتر. كل ما زاد عدد الفروع (العناصر)، كل ما بقى الموضوع أصعب.
الحل مع React
React قدمت حل رائع للمشكلة دي عن طريق الـ Virtual DOM، وده نسخة خفيفة من الـ HTML DOM.
(a lightweight in-memory representation of the real DOM)
عشان بناءا عليها هنعمل reflect لل updated state
التعديلات بتتحط الأول في الـ Virtual DOM وبعدها React بتعمل تحديث للـ DOM الحقيقي بشكل فعال وسريع.
العملية دي اسمها Reconciliation، وبتخلي التحديثات تحصل بس في الأجزاء اللي محتاجة تحديث فعلي، وده بيحسن الأداء بشكل كبير.
إزاي الـ Virtual DOM بيشتغل
لما بتعمل Render لعناصر JSX في React،
الـ Virtual DOM بيتحدث محتاجين هنا نقف ونسأل سؤال مهم أوي بيتحدث كليا ولا ؟
React only updates the parts of the Virtual DOM that have changed. This is known as "incremental rendering" or "partial rendering".
، ده أسرع بكتير من التعامل المباشر مع الـ DOM الحقيقي. ده بيحصل لإن React بتعمل نسخة من الـ Virtual DOM قبل ما تعمل أي تحديثات، وبتقارن النسخة دي مع التحديثات باستخدام عملية اسمها Diffing أو ( Reconciliation) العملية دي بتحدد العناصر اللي حصل فيها تغيير فعلاً، وReact بتحدث بس العناصر دي في الـ DOM الحقيقي.
Under the Hood React’s Diffing Algorithm
الـ Diffing في React هي السر ورا التحديثات الفعالة للـ DOM. الAlgorithm دي بتقارن بين نسختين من الـ Virtual DOM وبتطبق أقل مجموعة من التغييرات اللي محتاجها عشان تزامنهم.
مثلاً، لو أنواع العناصر الأساسية (root elements) في الشجرتين مختلفة، React هتبني الشجرة كلها من جديد. يعني لو غيرت
<div>
<Tree/>
</div>
ل
<span>
<Tree/>
</span>
بما إن العناصر الأساسية (div وspan) مختلفة، React هتعيد بناء الtree كلها.
طب لو الحالة زي دي
<span id="span1" />
<span id="span2" />
في الحالة دي، React هتحدث بس الـ id من غير ما تلمس باقي العنصر.
React كمان بتحسن التحديثات على مستوى الChild Elements
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
React هتشوف Child3 كعنصر جديد وهتحدث القائمة بناءً عليه. لكن لو أضفت عنصر جديد في البداية، React ممكن تعيد بناء القائمة كلها. وهنا بييجي دور الـ Keys.
الـ Keys بتساعد React إنها تتبع العناصر اللي حصل فيها تغيير، اللي اتضافت، أو اللي اتشالت. لازم تكون الـ Keys مميزة بين العناصر الsiblings يعني ميتككرش وثابتة بين الـ renders.
واتكلمت عنها قبل كده بالتفصيل !
Manipulating the DOM with Refs
رغم إن React بتعمل تحسينات على تحديثات الـ DOM باستخدام الـ Virtual DOM، في سيناريوهات معينة ممكن تحتاج فيها تتعامل مباشرة مع عناصر الـ DOM، زي إنك تركز على input معين، تعمل scroll لعناصر معينة، أو تقيس أبعاد عنصر. هنا بيجي دور الـ useRef Hook. من خلال إنشاء ref وربطه بعنصر DOM عن طريق ال ref، تقدر تحصل على الوصول المباشر للـ DOM node.
الـ useRef Hook بيرجع object فيه خاصية current، اللي بتبقى في الأول null لكن بتتخصص لـ DOM node بعد ما يتعمل Render. ده بيسمح لك تستدعي دوال الـ DOM مباشرة على العنصر، وده بيزود التحكم في التفاعلات المحددة.
خلينا نعمل مثال ممتع عشان نشوف الكلام ده في التطبيق. هنعمل div بيغير لونه لما تضغط على زرار. بص ع الصورة
فهم خوارزمية الـ Diffing والـ Keys في React هيساعدك تعمل تطبيقات React أنعم وأسرع لو فهمته صح
ولما تحتاج تحكم دقيق، React بتوفرلك refs اللي تساعدك تتفاعل مباشرة مع الـ DOM.
❤3👍1
https://www.linkedin.com/posts/activity-7233237827298222081-9IHZ?utm_source=share&utm_medium=member_android
طريقة جديدة لل error handling هتخليك تستغني عن ال try catch
طريقة جديدة لل error handling هتخليك تستغني عن ال try catch
Linkedin
Sign Up | LinkedIn
500 million+ members | Manage your professional identity. Build and engage with your professional network. Access knowledge, insights and opportunities.
👍1
ال useTransition hook
https://www.linkedin.com/posts/activity-7233845287763476481-bXwG?utm_source=share&utm_medium=member_android
https://www.linkedin.com/posts/activity-7233845287763476481-bXwG?utm_source=share&utm_medium=member_android
Linkedin
Sign Up | LinkedIn
500 million+ members | Manage your professional identity. Build and engage with your professional network. Access knowledge, insights and opportunities.
❤1
how to create an interesting progressive blur effect using WebGL, OGL, and GLSL shaders
https://tympanus.net/codrops/2024/07/02/progressive-blur-effect-using-webgl-with-ogl-and-glsl-shaders
https://tympanus.net/codrops/2024/07/02/progressive-blur-effect-using-webgl-with-ogl-and-glsl-shaders
❤1
https://www.linkedin.com/posts/activity-7234244406508175361-1FIf?utm_source=share&utm_medium=member_android
إزاي تعمل optimization لل javascript
إزاي تعمل optimization لل javascript
Linkedin
Sign Up | LinkedIn
500 million+ members | Manage your professional identity. Build and engage with your professional network. Access knowledge, insights and opportunities.
❤1
image_2024-08-28_22-25-05.png
82.6 KB
https://www.linkedin.com/posts/activity-7234641590323957762-gNMO?utm_source=share&utm_medium=member_desktop
خش إقرأ المقالة كاملة ومتنساش تدعيلي
خش إقرأ المقالة كاملة ومتنساش تدعيلي
❤1
https://openui.fly.dev/ai/new
خد الهدية دي مني وإدعيلي إديله أي صورة وهيعملك generate للكود بتاعها ب tailwind
خد الهدية دي مني وإدعيلي إديله أي صورة وهيعملك generate للكود بتاعها ب tailwind
❤3
Custom Cursors for Your Site
https://blog.codepen.io/2024/08/18/exploring-21-unique-custom-cursors-for-your-site/
https://blog.codepen.io/2024/08/18/exploring-21-unique-custom-cursors-for-your-site/
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-based SVG Filter Animations on Text
https://tympanus.net/codrops/2024/08/22/scroll-based-svg-filter-animations-on-text/
https://tympanus.net/codrops/2024/08/22/scroll-based-svg-filter-animations-on-text/
👍1
https://github.com/trekhleb/javascript-algorithms
عاوز تذاكر Algorithms and data structures in JavaScript خد العظمة دي
عاوز تذاكر Algorithms and data structures in JavaScript خد العظمة دي
GitHub
GitHub - trekhleb/javascript-algorithms: 📝 Algorithms and data structures implemented in JavaScript with explanations and links…
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings - trekhleb/javascript-algorithms
👍1