دردشة سريعة عن الـ Buffer في Node.js 💯
.
.
أغلب الوقت وإحنا بنكتب كود في Node.js، بنتعامل مع البيانات اللي راجعه من الـ APIs أو من الـ Database أو من الـ Files على هيئة Strings أو JSON. تمام كده؟ لكن، لو هنتعامل مع حاجات زي الصور، الملفات الصوتية، الفيديو، أو أي Data غير نصيّة (non-text)، وقتها الـ JavaScript ما تعرف تتعامل مع النوع ده بشكل مباشر. وهنا ييجي دور الـ Buffer.

———

📌 إيه هو الـ Buffer؟

الـ Buffer هو ببساطة طريقة Node.js للتعامل مع البيانات الخام (Raw Binary Data) اللي راجعة من أو رايحة لمصدر خارجي، زي مثلًا File System أو TCP Stream، أو حتى من HTTP Response.

يعني لو عندك فايل MP3، أنت مش هتقرأه كـ "نص"، أنت هتقرأه كـ سلسلة من الأرقام (bytes). والـ Buffer بيسمحلك تمسك السلسلة دي، وتتعامل معاها في الذاكرة.

———

📦 ليه Node.js بتستخدم Buffers؟

علشان Node.js مبنية حول الـ Streams. والـ Streams في الغالب مش بتديلك البيانات كلها مرة واحدة، بتبعتها لك جزء جزء.

مثال بسيط:
لو بتقرأ فايل كبير من على الهارد، الـ Node.js مش هتحمّل الفايل كله في RAM مرة واحدة (عشان ده مش عملي وممكن يموت السيستم لو الفايل كبير جدًا)، هي بتقرأ Chunk بـ Chunk. كل Chunk من دول هو عبارة عن Buffer.

———

💡 مثال عملي

const fs = require('fs');

const readableStream = fs.createReadStream('video.mp4');

readableStream.on('data', (chunk) => {
  console.log('Received chunk:', chunk);
  console.log('Chunk is a buffer?',    

  Buffer.isBuffer(chunk)); // true
});

في المثال ده، كل مرة الـ Stream بيبعت Data، بنستقبلها على هيئة Buffer. تقدر تتعامل معاها، تخزنها، تبعتها، أو حتى تعدّل فيها.

———

✨ شوية حاجات مهمة عن Buffer:

- الـ Buffer.from: بيحوّل أي String أو Array أو حتى ArrayBuffer لـ Buffer.
- الـ Buffer.alloc(size): بيعمل Buffer فاضي بالحجم اللي تحدده.
- الـ buffer.toString: لو عايز ترجّع الـ Buffer لصيغة String (لو أصلًا كانت Text).

———

لازم تكون فاهم يعني إيه Buffer في الحالات دي:

- لو بتتعامل مع الملفات الكبيرة.
- لو شغال على تطبيق بيستقبل صور أو فيديوهات أو أصوات.
- لو شغال مع Streams (زي HTTP Requests أو TCP Connections).
- لو بتبعت أو بتستقبل Binary Data من API أو جهاز تاني.

———

الـ Buffers بتشتغل على مستوى الـ Memory مباشرة، يعني لو معرفتش تتعامل معاهم صح، ممكن تقع في مشاكل زي memory leaks أو inefficient data handling.

———

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

إزاي تعرض شغلك كـ Backend Developer؟
.
.
بتقعد ساعات تكتب في code، تبني APIs، تظبط الـ Auth، تتعامل مع Databases و Logging و Queues، وكمان ممكن تكون بتشتغل على Microservices و Event-driven architecture…

بس لما تيجي تقدم على شغل أو تعرض شغلك لحد، بتقف ومش عارف تقول إيه...
المشكلة مش إن شغلك قليل، المشكلة إنك مش عارف "تعرضه" بشكل يخلي اللي قدامك يعرف خبرتك والمعلومات اللي عندك.

الـ Backend أصعب شوية في النقطة دي عن الـ Frontend، لأن الناس مش بتشوف شغلك بعنيهم، فأنت اللي لازم "تخليهم يشوفوه".

تعال أقولك إزاي تعرض شغلك كـ Backend Developer بطريقة محترمة...

———

✨ أول حاجة: أنت بتشتغل على إيه؟

اكتب الكلام ده في شكل نقاط واضحة، وبلغة بسيطة. حاول تجاوب على الأسئلة دي:

- إيه نوع الـ systems اللي اشتغلت عليها؟ (E-commerce, CMS, Booking system…)
- كان فيها كام user؟ أو traffic عامل إزاي؟
- هل كانت Monolith ولا Microservices؟
- هل اشتغلت على حاجات زي Authentication, Payments, Notifications؟
- هل فيه Challenges معينة حليتها؟ (scalability, performance, data integrity…)

✅ مثال:

اشتغلت على نظام E-commerce بيخدم 200K user شهريًا، بنيت فيه REST APIs بـ Node.js وExpress، وعملت Integration مع Stripe للـ payments.

ساهمت في refactor من Monolith لـ Microservices، واشتغلت على Service خاصة بالـ Orders باستخدام MongoDB وRabbitMQ.

———

✨ ثاني حاجة: تكلم عن قراراتك التقنية

بلاش تقول "اشتغلت بـ Node.js وخلاص"، ولكن احكي ليه استخدمتها؟
إزاي اختارت Database معينة؟ ليه استخدمت Redis أو Kafka؟

اللي بيفرق أي حد شاطر مش بس إنه بيعرف يستخدم tools…إنما بيعرف إمتى يستخدم إيه، وليه، وإيه البدائل اللي كانت متاحة؟


✅ مثال:

استخدمنا Redis علشان نعمل caching لبيانات المنتجات عشان نحل مشكلة الـ latency العالية في الـ product listing. ده قلل الـ response time بنسبة 60%.

———

✨ ثالث حاجة: تكلم بلغة الـ Impact

بلاش تقول "اشتغلت على كذا…"، الناس بتحب تسمع التأثير - "بسبب شغلي، حصل كذا وكذا…"

تتكلم عن النتائج:

- الـ API response time قل بنسبة كام؟
- كم bug اتصلحت؟
- الـ revenue زاد؟ retention اتحسن؟
- الـ system بقى يستحمل كام request في الثانية؟


✅ مثال:

عملت تحسين للـ queries في MySQL خلّى الـ checkout process أسرع بنسبة 40%، وقلل الـ cart abandonment بنسبة ملحوظة.

———

✨ رابع حاجة: الـ Showcase  الحقيقي

- اعمل repos على GitHub فيها مشاريع حقيقية (مش مشاريع الـ Hello World)
- اعرض Postman Collection أو OpenAPI Spec
- لو اشتغلت على حاجات Open Source أو عندك Blog بيشرح اللي بتعمله ممكن تضيفه.

———

✨ خامس حاجة: خلي شغلك "مفهوم" للناس اللي مش في نفس التخصص

خلي دايمًا الطريقة اللي بتتكلم بها سهلة، وفيها أرقام.

بدل ما تقول:

“Built scalable APIs using Node.js.”

ممكن تقول:

“Built RESTful APIs using Node.js to handle 20K+ daily requests, with response time under 200ms.”

تكلم عن الفائدة، مش بس التفاصيل التقنية.

بدل ما تقول:

“اشتغلت على تحسين الـ indexing strategy في MongoDB باستخدام compound indexes.”

ممكن تقول:

“قللت وقت تحميل صفحة المنتجات من 5 ثواني لأقل من ثانية بعد تحسين الـ indexing في MongoDB.”

———

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

إزاي تتجنب الـ Memory Leaks في JavaScript؟ 🤔
.
.
خلال رحلتك في عالم الـ JavaScript، سواء في فرونت اند أو باك اند، ممكن تكون سمعت عن مصطلح الـ "Memory Leaks". وده موضوع ممكن يتسبب في كوارث زي إن التطبيق بتاعك يبقى بطيء جدًا أو حتى ينهار خالص...⚠️

تعال ندردش شوية عن الـ Memory Leaks وإزاي تتجنبها في الكود...

———

Memory Leaks in JavaScript: A Simple Guide 💯

في المقال ده تكلمنا عن أهم المواضيع اللي تخص الـ Memory Leaks:

📍 What is a Memory Leak?
📍 How JavaScript Manages Memory
📍 Common Causes of Memory Leaks
📍 How to Detect Memory Leaks
📍 Tips to Prevent Memory Leaks

———

📌 رابط المقال:

⚡️ Dev Community
https://dev.to/alisamir/memory-leaks-in-javascript-a-simple-guide-31e8

⚡️ Medium
https://medium.com/@dev.alisamir/memory-leaks-in-javascript-a-simple-guide-e274d44f169c

———

وفقكم الله لكل خير ☘️

———

#javascript

One line of CSS. Smooth page transitions. No JavaScript. 💯

@view-transition {
  navigation: auto;
}

The 🆕 CSS View Transitions bring native animations to multi-page apps, no SPA setup needed!

———

Explore now 👇
https://developer.mozilla.org/en-US/blog/view-transitions-beginner-guide

———

#css