البرمجة الوظيفية (Functional Programming) 💯
.
.
البرمجة الوظيفية (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 بشكل أفضل.

———

وفقكم الله لكل خير 🌿

CSS: Equal width columns in Flexbox

سؤال انترڤيو مهم جدًا...

Render Props in React with TypeScript: A Practical Guide

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

مفهوم الـ Middleware في Next.js 💡
.
.
أكيد قابلت سيناريو إنك محتاج تتحكم في الـ requests اللي داخلة لموقعك أو تعمل checks معينة قبل ما الـ user يشوف الـ page. مثلًا:

- محتاج تمنع user مش عامل login إنه يدخل صفحة معينة.
- أو تعمل redirect لو user مش عنده صلاحيات.
- أو حتى تضيف headers أو تعمل logging لكل request.

الحتة دي في أي app بتبقى critical جدًا، لأنك ساعات محتاج layer كده في النص بين request الـ user والـ response اللي راجع. وهنا ييجي دور الـ Middleware...

———

🔥 يعني إيه Middleware؟

الـ Middleware ببساطة عبارة عن function بتتنفذ قبل ما الـ request يوصل للـ route.

يعني هو واقف كـ حارس البوابة: أي request لازم يعدي منه الأول، وساعتها أنت تقدر:

- تغير في الـ request أو الـ response.
- تعمل redirect أو rewrite.
- تمنع requests معينة.
- أو حتى تضيف logic زي الـ authentication, logging, A/B testing, rate limiting… إلخ.

———

📌 إزاي الـ Middleware بيشتغل في Next.js؟

في Next.js 13 (والـ App Router)، لو عايز تعمل Middleware بتضيف ملف باسم:

middleware.ts or middleware.js

في الـ root بتاع الـ project.

الـ function الأساسية بتكون كده:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  // Example: check if user is authenticated
  const token = req.cookies.get('token')
  
  if (!token) {
    return NextResponse.redirect(new URL('/login', req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/dashboard/:path*'],
}

✅ اللي بيحصل هنا:

- أي request داخل على /dashboard/* لازم يعدي من الـ middleware.
- لو مفيش token: يتعمل redirect على /login.
- لو فيه token: يكمل عادي.

———

⚡️ أهم مميزات الـ Middleware في Next.js:

1- الـ Edge Runtime:
بيتنفذ على الـ Edge (Cloudflare Workers/Akamai… إلخ) يعني ultra fast ومش محتاج server تقيل.

2- الـ Lightweight:
مش معمول إنه يشيل logic تقيل جدًا، هو بس layer سريعة للـ requests.

3- الـ Selective Matching:
تقدر تحدد routes معينة بس اللي تعدي من الـ middleware عن طريق الـ matcher.

4- عنده Use Cases متنوعة:

- Authentication & Authorization.
- Redirects & Rewrites.
- A/B Testing
- Bot Protection.
- Internationalization

———

خلي بالك إن الـ Middleware مش مكان تحط فيه كل الـ business logic بتاعك، هو معمول للحاجات اللي محتاجة تتنفذ بسرعة وقبل ما الـ request يروح للـ route.

يعني authentication, headers, redirects… حاجات كده. لكن الـ heavy logic مكانها مش هنا.

———

وفقكم الله لكل خير 🌿

DevOps Full Course | Build and Deploy a Scalable Production Ready API

Learn DevOps fast in this crash course covering Git & GitHub, CI/CD pipelines, Docker, Kubernetes, IaC, and API deployment. Everything you need to automate dev and deployment.

———

https://youtu.be/H5FAxTBuNM8

Design Patterns Cheat Sheet 💯

The cheat sheet briefly explains each pattern and how to use it.

اسألني عن أي شيء من خلال حسابي في قبيلة 👇🏻

https://qabilah.com/profile/alisamir/professional-profile?target=ask-me-anything

كورس React.js ممتاز 💯
.
.
React Full Course - Beginner to Pro (React 19, 2025)

1. React Basics, JSX
2. Components, Props, Start the Chatbot Project
3. State, Event Handlers, Chatbot Project Features
4. CSS with React, Hooks, Finish Chatbot Project
5. Proper React Setup with Vite
6. React Router, Git, Start the E-commerce Project
7. React with Backend, Data Fetching, Load E-commerce Project Data
8. Data Mutation, Update E-commerce Project Data
9. Automated Tests in React with Vitest
10. Deploy React to the Internet, Intro to AWS
11. React 19 Updates
12. TypeScript with React
13. AI with React
.
.
https://youtu.be/TtPXvEcE11E

CI/CD Simplified Visual Guide 💡

Whether you're a developer, a DevOps specialist, a tester, or involved in any modern IT role, CI/CD pipelines have become an integral part of the software development process.

بلاش تستخدم git pull ⚠️
.
.
بفضل الله تم نشر مقال جديد على مدونة Level Up Coding على منصة Medium ✅

شرح مبسط وواضح للفرق بين:

- git pull
- git pull --rebase
.
.
Git Pull vs. Git Pull — Rebase: A Complete Guide for Developers 💯

———

المقال كامل هنا 👇

https://medium.com/gitconnected/git-pull-vs-git-pull-rebase-a-complete-guide-for-developers-e209ce0df18c

———

وفقكم الله لكل خير 🌿

أهم بدائل الـ localStorage 💡
.
.
خلال رحلتك في عالم الـ Front-End لازم في وقت من الأوقات هتحتاج تخزن بيانات عند الـ Client Side (يعني عند المستخدم).

أبسط حاجة كلنا عرفناها في الأول هي الـ localStorage. سهلة جدًا والكود بسيط، وكمان عبارة عن key/value، بس الحقيقة إن localStorage مش دايمًا أحسن حل.

ليه؟ 👇

- الـ size محدود (تقريبًا 5MB).
- كل حاجة بتتخزن كـ string.
- مفيهاش أي نوع من الـ security (ممكن أي حد يقرأها).
- مش scalable لو بتتعامل مع data كبيرة.

علشان كده تعال ندردش شوية عن 4 بدائل للـ localStorage ممكن تساعدك في بعض السيناريوهات المختلفة...

———

📌 الـ IndexedDB

- دي عبارة عن database كاملة داخل الـ browser.
- بتخليك تخزن structured data (objects، arrays…) مش مجرد strings.
- بتتعامل معاها عن طريق APIs أو libraries زي Dexie.js عشان تسهّل الموضوع.
- مناسبة جدًا لو عندك data كبيرة أو offline apps زي Note Apps أو Todo Apps.
- أسرع بكتير في الـ queries من localStorage.

———

📌 الـ sessionStorage

- نفس فكرة localStorage بالضبط لكن الفرق إنها بتتمسح أول ما الـ tab تتقفل.
- مناسبة لحاجات temporary زي tokens أثناء الـ session أو data مش مهمة تحتفظ بها بعد ما اليوزر يقفل الصفحة.
- حجمها برضه محدود زي localStorage.

———

📌 الـ Cookies

- أقدم وأشهر طريقة لتخزين البيانات في الـ browser.
- ميزتها إنها بتتبعت تلقائي مع كل HTTP Request للـ server.
- مناسبة جدًا للـ authentication (زي الـ JWT tokens أو session IDs).
- بس عيبها إنها صغيرة (حوالي 4KB) وأي data زيادة ممكن تقلل سرعة الـ requests.
- لازم تستخدمها للحاجات الخفيفة والمهمة بس.

———

📌 الـ Service Workers + Cache API

- ده حل advanced شوية، بيستخدم الـ Service Workers مع Cache API.
- بيخليك تخزن responses كاملة من الـ network (زي HTML, CSS, JS, Images).
- ممتاز للـ Progressive Web Apps (PWA) عشان تشتغل offline.
- تقدر تتحكم في caching strategy (مثلًا: Network First, Cache First…).
- مفيد جدًا للأداء (performance) وتحسين تجربة المستخدم.

———

💡 الخلاصة:

- لو data كبيرة: استخدم IndexedDB.
- لو data بسيطة ومؤقتة: sessionStorage.
- لو عايز data تتبعت للـ server: استخدم Cookies.
- لو بتبني PWA أو محتاج caching قوي: استخدم Service Workers + Cache API.

فكر دايمًا قبل ما تستخدم localStorage: هل هو فعلًا الحل المناسب؟ ولا في بديل أفضل يساعدك من ناحية الأداء والأمان؟

———

وفقكم الله لكل خير 🌿