📌 Master server-side data fetching in Next.js 15
Avoid race conditions, prevent collisions, and make parallel routes work smoothly.
❤3
البرمجة الوظيفية (Functional Programming) 💯
.
.
البرمجة الوظيفية (Functional Programming) تعتبر نمط من الأنماط البرمجية اللي بتختلف عن النمط التقليدي اللي بنسميه الـ Imperative Programming.
الفكرة الأساسية في البرمجة الوظيفية إنها بتركز على استخدام الدوال (functions) كعنصر أساسي في كتابة الكود، وبتعتمد على فكرة إن الكود يكون واضح وسهل التتبع، بدون ما نغير الـ state أو البيانات بشكل مباشر.
———
📌 إيه اللي بيميز البرمجة الوظيفية؟
في البرمجة الوظيفية، بنستخدم حاجة اسمها pure functions، ودي دوال بتستقبل مدخلات (inputs) وتطلع مخرجات (outputs) من غير ما تأثر على أي حاجة بره الدالة نفسها.
يعني الدالة اللي بتشتغل بالطريقة دي، كل مرة تستخدمها بنفس المدخلات، هتطلع نفس النتيجة. ده بيسهل جدًا اختبار الكود والتأكد إنه شغال صح.
كمان في البرمجة الوظيفية بنبعد تمامًا عن فكرة side effects، اللي هي تغيير في البيانات أو الـ state خارج الدالة. وده بيدي الكود ميزة إنه يبقى قابل للتوقع (predictable) وسهل الصيانة.
———
📌 الـ Higher-Order Functions؟
البرمجة الوظيفية بتعتمد بشكل كبير على نوع خاص من الدوال اسمه Higher-Order Functions. الدوال دي بتستقبل دوال تانية كمدخلات أو بتطلع دوال كمخرجات.
مثلًا في JavaScript عندنا دوال زي
الدوال دي بتخليك تقدر تعمل عمليات معقدة على البيانات بطريقة مختصرة ومنظمة، وبدون ما تكتب كود كتير. مثلًا لو عاوز تعدل قيم معينة في Array، بدل ما تستخدم for loop، ممكن تستخدم map واللي بتخليك تقدر تعيد بناء الـ Array بطريقة أسرع وأنضف.
———
📌 الـ Immutable Data
واحدة من المفاهيم الأساسية كمان في البرمجة الوظيفية هي immutable data، يعني البيانات مبتتغيرش. بدل ما نعدل على نفس الـ Array أو الـ Object، بنرجع نسخة جديدة من البيانات بعد التعديل.
ده بيدي الكود أمان أكتر، وبيمنع الأخطاء اللي ممكن تحصل لما البيانات تتغير بطريقة غير متوقعة.
البرمجة الوظيفية بتتطبق في لغات زي Haskell و Elm بشكل كبير، لكن الأفكار دي كمان ممكن تتطبق في لغات زي JavaScript, Python وحتى Java و #C.
———
📌 ليه تستخدم البرمجة الوظيفية؟
- الكود بيكون واضح جدًا وسهل التتبع.
- التقليل من الأخطاء بفضل استخدام الـ pure functions.
- سهولة اختبار الكود.
- دعم الـ parallelism والـ concurrency بشكل أفضل.
———
وفقكم الله لكل خير 🌿
.
.
البرمجة الوظيفية (Functional Programming) تعتبر نمط من الأنماط البرمجية اللي بتختلف عن النمط التقليدي اللي بنسميه الـ Imperative Programming.
الفكرة الأساسية في البرمجة الوظيفية إنها بتركز على استخدام الدوال (functions) كعنصر أساسي في كتابة الكود، وبتعتمد على فكرة إن الكود يكون واضح وسهل التتبع، بدون ما نغير الـ state أو البيانات بشكل مباشر.
———
📌 إيه اللي بيميز البرمجة الوظيفية؟
في البرمجة الوظيفية، بنستخدم حاجة اسمها pure functions، ودي دوال بتستقبل مدخلات (inputs) وتطلع مخرجات (outputs) من غير ما تأثر على أي حاجة بره الدالة نفسها.
يعني الدالة اللي بتشتغل بالطريقة دي، كل مرة تستخدمها بنفس المدخلات، هتطلع نفس النتيجة. ده بيسهل جدًا اختبار الكود والتأكد إنه شغال صح.
كمان في البرمجة الوظيفية بنبعد تمامًا عن فكرة side effects، اللي هي تغيير في البيانات أو الـ state خارج الدالة. وده بيدي الكود ميزة إنه يبقى قابل للتوقع (predictable) وسهل الصيانة.
———
📌 الـ Higher-Order Functions؟
البرمجة الوظيفية بتعتمد بشكل كبير على نوع خاص من الدوال اسمه Higher-Order Functions. الدوال دي بتستقبل دوال تانية كمدخلات أو بتطلع دوال كمخرجات.
مثلًا في JavaScript عندنا دوال زي
map, filter, reduce، ودي أمثلة ممتازة على الـ Higher-Order Functions.الدوال دي بتخليك تقدر تعمل عمليات معقدة على البيانات بطريقة مختصرة ومنظمة، وبدون ما تكتب كود كتير. مثلًا لو عاوز تعدل قيم معينة في Array، بدل ما تستخدم for loop، ممكن تستخدم map واللي بتخليك تقدر تعيد بناء الـ Array بطريقة أسرع وأنضف.
———
📌 الـ Immutable Data
واحدة من المفاهيم الأساسية كمان في البرمجة الوظيفية هي immutable data، يعني البيانات مبتتغيرش. بدل ما نعدل على نفس الـ Array أو الـ Object، بنرجع نسخة جديدة من البيانات بعد التعديل.
ده بيدي الكود أمان أكتر، وبيمنع الأخطاء اللي ممكن تحصل لما البيانات تتغير بطريقة غير متوقعة.
البرمجة الوظيفية بتتطبق في لغات زي Haskell و Elm بشكل كبير، لكن الأفكار دي كمان ممكن تتطبق في لغات زي JavaScript, Python وحتى Java و #C.
———
📌 ليه تستخدم البرمجة الوظيفية؟
- الكود بيكون واضح جدًا وسهل التتبع.
- التقليل من الأخطاء بفضل استخدام الـ pure functions.
- سهولة اختبار الكود.
- دعم الـ parallelism والـ concurrency بشكل أفضل.
———
وفقكم الله لكل خير 🌿
❤6
سؤال انترڤيو مهم جدًا...
If you’ve built React apps for a while, you’ve likely thought:
"Didn’t I already write this logic before?"
That’s where Render Props shine — an older but still handy pattern for sharing logic without locking you into a specific UI. Let’s see how it works in React with TypeScript.
🔗 Full Article:
https://medium.com/@dev.alisamir/render-props-in-react-with-typescript-a-practical-guide-144ffcce3e11
Render Props in React with TypeScript: A Practical GuideIf you’ve built React apps for a while, you’ve likely thought:
"Didn’t I already write this logic before?"
That’s where Render Props shine — an older but still handy pattern for sharing logic without locking you into a specific UI. Let’s see how it works in React with TypeScript.
🔗 Full Article:
https://medium.com/@dev.alisamir/render-props-in-react-with-typescript-a-practical-guide-144ffcce3e11
❤2
💡 JavaScript is full of hidden Web API gems you probably aren’t using.
From observing elements to copying content, this carousel breaks down underrated APIs that level up your frontend.
From observing elements to copying content, this carousel breaks down underrated APIs that level up your frontend.
❤4