🎯 ليه لازم تكون فاهم الـ Business Goal قبل ما تبدأ تشتغل على أي Feature؟
.
.
إنك تكون بتعرف تكتب clean code ده مهم، وإنك تبقى سريع في تنفيذ الـ tasks كمان حاجة حلوة، بس ده كله لوحده مش كفاية.

اللي فعلًا بيفرق بين مبرمج عادي… ومهندس برمجيات تقيل، هو قد إيه فاهم البزنس اللي بيشتغل عليه.

يعني إيه؟
يعني قبل ما تفتح VS Code وتبدأ تكتب أي سطر كود، لازم تسأل نفسك سؤال بسيط:

"هو ليه بنعمل الـ feature دي أصلاً؟"

لأنك لو مش فاهم الـ “ليه”، ممكن تشتغل كتير وتبذل مجهود كبير… وفي الآخر تطلع النتيجة مش هي اللي الـ business محتاجها!

———

💡 يعني إيه Business Goal؟

الـ business goal هو السبب الحقيقي إن الشركة قررت تضيف الـ feature دي.
مش بس إزاي نعملها، لكن ليه بنعملها؟
بنحاول نحل مشكلة لمين؟ وإيه اللي هنستفاده لما نحلها؟

يعني مثلًا:

- ممكن نكون بنعمل filter عشان نزود الـ conversion rate.
- أو بنضيف notification جديدة عشان نقلل الـ churn.
- أو بنعمل redesign لجزء معين عشان نخلي الـ onboarding أسرع.

كل واحدة من دول محتاجة تفكير وتنفيذ مختلف، رغم إن ممكن يكون شكل الـ features شبه بعض.

———

📌 إيه اللي هيحصل لما تشتغل من غير ما تفهم البزنس؟

1- بتكتب كود حلو… بس غلط.
بتبذل مجهود كبير في حاجات مش مطلوبة أو مش مفيدة حاليًا.

2- بتفوّت فرصة إنك تضيف value.
ممكن تكون عندك اقتراحات تحسّن الفكرة لو كنت فاهم الهدف الحقيقي، بس لأنك مش عارف الـ context، بتنفّذ وخلاص.

3- بتزود الـ tech debt من غير قصد.
لأنك ممكن تختار حل تقني مش مناسب للهدف الأساسي، وبعد شوية الشركة تضطر ترجع تغير الحل ده.

4- بتكون reactive مش proactive.
بتنفّذ اللي مكتوب وخلاص، بدل ما تكون شريك حقيقي في الحل.

———

لو المبرمج سأل أول ما استلم الـ task:

"إحنا ليه عايزين نضيف الفلتر ده؟"
وكان الرد:
"عشان عندنا data بتقول إن المستخدمين بيخرجوا من الصفحة لما مش بيلاقوا المنتج اللي عاوزينه بسرعة"

ساعتها كان ممكن:

- يركّز على تحسين تجربة البحث أكتر من شكل الفلتر.

- يقترح autocomplete.

- يضيف ranking based on popularity.

- يحلل الـ analytics أكتر ويشتغل مع الـ designer على UI/UX أحسن.

يعني كان هيفكّر زي ما الـ product owner بيفكر، ويبقى مش بس مبرمج بيكتب كود، لكن شريك في الحل.

———

✅ تعمل إيه عشان تبقى فاهم البزنس كويس؟

1- اسأل دايمًا "ليه؟" قبل ما تبدأ في أي task.

2- افهم الـ KPIs اللي الفريق بيشتغل عليها.
إيه اللي بيقيسوا به النجاح؟ Traffic؟ Conversion؟ Retention؟

3- احضر meetings مع الـ product/marketing لما تقدر.
هتشوف الدنيا من زاويتهم، وده هيفرق في طريقة تفكيرك.

4- اربط الـ code اللي بتكتبه بالـ impact اللي بيعمله.
"الـ PR ده لما دخل، زوّد الـ signup rate 10%".
ده أفضل بكتير من "عملت login form بالـ clean code".

———

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

أكيد تعرف npm install أو npm i
.
.
لكن هل تعرف npm ci؟

لما تكتب npm install، هو بيبص على الـ package.json ويشوف إيه الـ packages المطلوبة، وبعدين:

- لو فيه package-lock.json بيحاول يطابقه.
- ولو مش موجود، بيبدأ يركّب اللي محتاجه ويعمل واحد جديد.
- وكمان ممكن يحدث بعض الـ packages لو شاف إن فيه إصدار أحدث متوافق مع الشروط.

وطبعًا ده كويس لكن ممكن يحصل اختلافات من جهاز للتاني...

———

الـ ci معناها "clean install"، والأمر ده معمول مخصوص عشان الـ automation وبيشتغل بشكل أسرع وأسهل.

- بيمسح فولدر node_modules تمامًا.
- وبعدين يركّب الـ packages بالضبط زي ما هي مكتوبة في package-lock.json.
- لو فيه فرق بين package.json و package-lock.json بيقف ويعمل Error.


✅ ده معناه إن npm ci:

- أسرع من install.
- بيعمل نفس النتائج كل مرة.
- ممتاز في الـ CI/CD pipelines أو في الشركات الكبيرة.

———

لو شغال لوحدك ولسه بتضيف/تحدث packages: استخدم npm install.

لو بتشتغل في تيم أو بتعمل Deploy على سيرفر: استخدم npm ci عشان تضمن ثبات البيئة.

———

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

React Design Patterns and Best Practices for 2025

Let’s see React design patterns and best practices for 2025 so you can build more robust and maintainable applications.

🔗 https://www.telerik.com/blogs/react-design-patterns-best-practices

JavaScript DOM Selection and Manipulation 💯

🔰 Linux Command Cheat Sheet

File Commands

- ls - Directory listing
- ls -l - Long listing format
- ls -a - List all files including hidden files
- cd /path/to/directory - Change directory
- pwd - Display the current working directory
- mkdir directory_name - Create a new directory
- rmdir directory_name - Remove an empty directory
- rm file_name - Remove a file
- rm -r directory_name - Remove a directory and its contents recursively
- touch file_name - Create or update a file
- cat file_name - Concatenate and display the file content
- more file_name - View file content page by page
- less file_name - Improved viewing of file content over more
- cp source_file target_file - Copy files from source to target
- mv old_name new_name - Rename or move a file/directory

SSH (Secure Shell)

- ssh user@host - Connect to host as user
- ssh -p port user@host - Connect using a specific port
- ssh-keygen -t rsa - Generate RSA key pair
- ssh-copy-id user@host - Copy your key to the remote server for password-less login

Searching

- grep pattern files - Search for a pattern in files
- grep -r pattern dir - Recursively search for a pattern in a directory
- find dir -name name* - Find files starting with name in a directory
- locate file_name - Find files by name (uses a database)

Process Management

- ps aux - Display your currently active processes
- ps aux | grep process_name - Find a process named process_name
- top - Display all running processes
- kill pid - Kill a process with a given PID
- killall process_name - Kill all processes named process_name
- bg - List stopped or background jobs; resume a stopped job in the background
- fg - Bring the most recent job to the foreground

File Permissions

- chmod +x file_name - Make a file executable
- chmod 755 file_name - Set read and execute permissions for owner and read for others
- chown user:group file_name - Change file owner and group

Networking

- ifconfig - Display all network interfaces and IP addresses
- ping host - Send ICMP echo request to host
- traceroute host - Display the route packets take to a network host
- netstat -tulnp - Display listening ports and their applications

Archiving and Compression

- tar cf archive_name.tar files - Create a tar archive containing files
- tar xf archive_name.tar - Extract files from a tar archive
- gzip file_name - Compress a file and rename it to file.gz
- gunzip file.gz - Decompress file.gz back to the original

System Info and Management

- uname -a - Show system and kernel info
- df -h - Display free disk space in a human-readable form
- du -sh directory_name - Show disk usage of a directory in human-readable form
- free -m - Show free and used memory in MB

Misc Commands

- man command_name - Show manual for a command
- echo "text" - Display a message on the screen
- date - Display the current date and time
- uptime - Show how long the system has been running

Storybook 9 is here!

▶️ Interaction tests
♿️ Accessibility tests
👁 Visual tests
🛡 Coverage reports
🚥 Test widget
🪶 48% Leaner
✍️ Story generation
🏷 Tag-based organization
🌐 Story globals
🏗 Major updates for Svelte, Next.js, React Native, and more!

Read more

Production Deployment on VPS using Docker 🚀

https://youtu.be/C7aooGtKq8Y

إزاي تنفذ الـ Caching في Node.js؟ 🤔
.
.
لو أنت شغال بـ Node.js، فـ أكيد قابلت في يوم مشكلة إن الـ API عندك بيبقى بطيء بسبب requests كتير أو عمليات تقيلة زي queries على database، وبدأت تفكر:
"ليه كل مرة أجيب نفس الداتا؟ طب مفيش حل أسرع؟"

الإجابة هي: Caching.

وده اللي هنتكلم عنه اليوم بالتفصيل....

[ كل الأكواد هتلاقيها في التعليقات تحت الرسالة ]

———

🎯 إيه هو الـ Caching؟

ببساطة، هو إنك تحفظ نسخة من الداتا مؤقتًا في مكان تاني (بيكون أسرع من المصدر الأساسي زي الـ DB)، علشان لما تيجي تطلب نفس الحاجة تاني، ما تروح تجيبها من الأول، لا، ترد بسرعة من الـ cache.

وده بيفرق جامد جدًا في السرعة، والأداء، والحمل على السيرفر.

———

إزاي تعمل الـ Caching في Node.js؟

1. الـ In-Memory Caching (باستخدام node-cache أو lru-cache)

لو عندك داتا مش كبيرة ومش محتاج تشاركها بين أكتر من instance، فـ in-memory caching بيكون حل سريع وسهل.

📌 مناسب لحالات زي الداتا القليلة، أو عمليات حسابية تقيلة، بس خلي بالك إنه volatile، يعني لو السيرفر عمل restart، كل حاجة بتروح.

———

2. الـ Redis Caching (الحل الأقوى والأشهر)

لو بتدور على Cache centralized وسريع وتقدر تشارك الداتا بين أكتر من instance، يبقى Redis هو الأفضل هنا.

🎯 الـ Redis سريع جدًا، وبيستخدم في مشاريع كبيرة زي Twitter و GitHub. وكمان تقدر تتحكم في TTL، وتعمل invalidation، وتخزن أكتر من نوع داتا.

———

3. الـ Caching Responses مباشرة (مثلًا في GraphQL أو REST)

لو شغال مثلاً بـ Apollo Server في GraphQL، تقدر تستخدم built-in caching

أو حتى لو شغال REST تقدر تستخدم middlewares زي apicache أو express-cache-controller.

———

🤔 إمتى تستخدم الـ Caching؟

- لما تكون بتكرر نفس الـ requests بكميات كبيرة.
- لما الداتا تكون مش بتتغير كتير.
- لو الـ DB عندك بطيئة أو بتاخد وقت في المعالجة.
- لو عايز تقلل الترافيك على الـ backend.

———

⚠️ خلي بالك:

لازم تعمل Cache Invalidation كويس، علشان ما ترجع داتا قديمة بعد التحديث.

بلاش تستخدم الـ Caching لأي داتا حساسة أو شخصية (privacy first).

خليك دايمًا عارف إمتى تعمل Cache، وإمتى لا... مش كل حاجة محتاجة تتخزن.

———

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

AI Fluency

Learn to collaborate with AI systems effectively, efficiently, ethically, and safely

———

What you'll learn:

- Understand the purpose and structure of the course to determine if it will meet my learning needs

- Recognize the importance of AI Fluency in today's world

- Identify key components of your learning journey ahead

- Set clear expectations for what you’ll gain from this course

———

🔗 https://www.anthropic.com/ai-fluency