DevGuide

مفهوم الـ WebAssembly ⚡️ . . تخيل معايا كده إنك عايز تكتب برنامج بيشتغل في المتصفح، بس البرنامج ده تقيل شوية… زي لعبة فيها جرافيكس عالية، أو برنامج بيعدل صور وفيديوهات، أو حتى تطبيق علمي بيعمل حسابات معقدة. عادة في الحالات دي بتستخدم JavaScript، بس JavaScript مش دايمًا هتديك الأداء اللي أنت محتاجه… وهنا بييجي دور الـ WebAssembly... ——— الـ WebAssembly (أو WASM) عبارة عن تقنية بتسمحلك إنك تكتب كود بلغة تانية زي C أو ++C أو Rust، وتحوّله لحاجة شبه لغة الآلة يقدر المتصفح يفهمها ويشغّلها بسرعة رهيبة، أسرع بكتير من JavaScript. يعني الـ WebAssembly مش لغة برمجة زي بقية اللغات، بل هي طريقة تشغّل بيها كود مكتوب بلغات قوية داخل المتصفح، وتستفيد من السرعة العالية دي من غير ما تتنازل عن مزايا الويب. ——— 📌 أهم استخدامات الـ WebAssembly: لو بتعمل مشروع تقيل ومحتاج أداء عالي، الـ WebAssembly هينقذك في حاجات زي: - ألعاب 3D أو ألعاب أونلاين بتشتغل في المتصفح - برامج معالجة صور وفيديوهات مباشرة على الويب - برامج CAD أو محاكاة أو أدوات تحليل بيانات ضخمة - أو حتى لو عندك مكتبة جاهزة بلغة زي C وحابب تستخدمها على الويب من غير ما تعيد كتابتها ——— إزاي الـ WebAssembly بيشتغل؟ 1- بتكتب الكود بلغة قوية (زي C، C++، Rust) 2- بتستخدم Compiler بيحوّل الكود لملف بصيغة wasm 3- بتشغل الملف ده من داخل كود JavaScript بتاعك في الصفحة 4- المتصفح يشغّل WebAssembly وكأنك كاتب كود JavaScript، بس بأداء أعلى بكتير وده كله بيشتغل في كل المتصفحات الكبيرة: Chrome، Firefox، Safari، Edge وغيرهم. ——— 🤔 هل WebAssembly بديل لـ JavaScript؟ الإجابة: لا. الـ JavaScript لسه هي الأساس في الويب، بس الـ WebAssembly بيشيل الحمل التقيل عن JavaScript، ويساعدك تنفذ أجزاء معينة في التطبيق بسرعة وكفاءة. ——— #دقيقة_برمجة

🍪 CookieStore API offers a modern, promise-based way to read, write, update, and delete cookies, all without parsing strings manually. It brings, ✅ Async operations ✅ Structured data ✅ Service worker support Learn more 👇 https://developer.mozilla.org/en-US/docs/Web/API/CookieStore

انضم إلى #مجرة — مجتمع المطوّرين ومستجدّات التقنية! اكتشف أحدث المقالات والأدوات وشارك خبراتك مع مطوّرين من كل مكان. ——— https://majara.dev/register?ref=alisamir

Faster Loops in JavaScript ⚡️

Custom Error Handling in Next.js 🚀 . . Your Next.js app deserves better than boring errors! Learn how to create custom 404s and error pages with the App Router, even in nested layouts. Friendly, branded, and user-first.

CSS nesting is now Baseline 🎉

Write nested selectors directly in CSS — just like Sass, but natively.

.card {
  color: black;
  &:hover { color: blue; }
  .title { font-weight: bold; }
}

No preprocessor needed. ——— Learn more 👇 https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

What To Know in JavaScript (2026 Edition) 💯

https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition

إزاي تكتب Commit Message بطريقة صحيحة؟ ✅ . . الـ Commit في Git تعتبر "لحظة حفظ" للتغييرات اللي عملتها في مشروعك. يعني لو فيه حاجة حصلت وحبيت ترجع لها بعدين، تقدر تلاقي الـ Commit ده. لكن عشان يكون شغلك مميز، لازم تعمل Commit صح. 💡 ——— 1- اعمل Commit صغير ومنظم لازم الـ Commit يكون خاص بتغيير معين أو ميزة معينة، يعني متعملش Commit كبير جدًا فيه شوية حاجات مش مترابطة. خليك دايمًا مركز في حاجة واحدة، زي "إصلاح bug في الصفحة الرئيسية" أو "إضافة زر جديد للتسجيل". 2- اكتب رسالة Commit واضحة رسالة الـ Commit هي اللي هتشرح للناس (وأنت كمان بعد مدة) إيه اللي اتحسن أو اتغير في الكود. خلي الرسالة مختصرة وواضحة. مهم جدًا إن الرسالة تكون واضحة علشان لو حد رجع لها بعد فترة، يعرف التغيير ده كان بخصوص إيه. 3- استخدم صيغة الزمن الحاضر خلي الرسالة مكتوبة في الزمن الحاضر. يعني لو هتكتب عن إضافة ميزة جديدة، اكتب "Add new feature" بدل "Added new feature". دايمًا خلي الكلام بسيط ومباشر. 4- افصل بين التغييرات باستخدام أكثر من Commit متعملش Commit لكل حاجة مع بعض. يعني لو عدلت على أكثر من جزء في المشروع، خلي كل Commit له حاجة واحدة، كده لو حصل مشكلة في حاجة معينة، هتكون عارف الـ Commit اللي تسبب فيها. 5- متعملش Commit للـ Files المؤقتة أو اللي فيها بيانات سرية زي ملفات الـ logs أو الملفات المؤقتة (node_modules أو build folders). خلي الملفات دي في الـ gitignore علشان Git ما يضيفها مع الـ Commits بتاعتك. ——— قبل ما تعمل الـ Commit، دايمًا اعمل مراجعة للتغييرات اللي عملتها باستخدام git status أو git diff. كده هتكون متأكد إنك مش ناسي حاجة أو فيه حاجة غلط. ——— #دقيقة_برمجة

💡How email protocols work?

What is HTTP Caching?

An effective way to improve load performance because it reduces unnecessary network requests.

🔰 Border-collapse in CSS

The border-collapse property in CSS is used to specify whether or not table borders are collapsed into a single border.

الفرق بين SQL و NoSQL؟ 🤔 . . خلال رحلتك في عالم البرمجة، أكيد سمعت عن قواعد البيانات (Database) وعرفت إن فيه نوعين مشهورين: SQL و NoSQL، بس إيه الفرق بينهم؟ ——— 📌 الـ SQL - قواعد بيانات علائقية (Relational Databases) - بتستخدم جداول (Tables) زي الإكسل كده، كل جدول فيه أعمدة وصفوف، وبيكون فيه علاقات بين الجداول. - بتستخدم لغة SQL (Structured Query Language) عشان تعمل استعلامات على البيانات (SELECT, INSERT, UPDATE, DELETE). - مثالية للبيانات المنظمة والمترابطة، زي الحسابات البنكية، بيانات الموظفين، والمخازن. - أمثلة عليها: MySQL, PostgreSQL, SQL Server, Oracle. ——— 📍 مثال سريع: لو عندك جدول اسمه Users، ممكن تجيب كل المستخدمين اللي أعمارهم فوق 25 سنة بكود زي ده: SELECT * FROM Users WHERE age > 25; ——— 📌 الـ NoSQL - قواعد بيانات غير علائقية (Non-Relational Databases) - ملهاش جداول ثابتة زي SQL، بتستخدم طرق تخزين مختلفة زي المستندات (Documents)، الـ (Key-Value)، الـ (Wide-Column)، أو الرسوم البيانية (Graph). - مش بتحتاج مخطط ثابت (Schema-less)، يعني ممكن تخزن بيانات غير متناسقة بدون مشاكل. - مناسبة للبيانات اللي بتتغير باستمرار والأنظمة اللي بتحتاج سرعة عالية وقابلية توسع كبيرة، زي مواقع التواصل الاجتماعي وأنظمة التحليل الفوري. - أمثلة عليها: MongoDB (بتستخدم الـ Documents)، Redis (بتستخدم Key-Value)، Cassandra (بتستخدم Wide-Column). ——— 📍 مثال سريع: في MongoDB، لو عندك مجموعة (Collection) اسمها Users، وعاوز تجيب المستخدمين اللي أعمارهم فوق 25 سنة، هتستخدم استعلام زي ده: db.Users.find({ "age": { $gt: 25 } }) ——— أستخدم أي نوع في المشروع؟ 🤔 ✅ الـ SQL مناسب لو عندك بيانات مترابطة وعاوز تضمن التكامل بينها. ✅ الـ NoSQL مناسب لو عندك بيانات غير منظمة، أو بتحتاج تتوسع بسرعة، أو عندك عمليات قراءة وكتابة ضخمة.

🚨 CRITICAL: Active supply chain attack on axios -- one of npm's most depended-on packages. The latest axios@1.14.1 now pulls in plain-crypto-js@4.2.1, a package that did not exist before today. This is a live compromise. This is textbook supply chain installer malware. axios has 100M+ weekly downloads. Every npm install pulling the latest version is potentially compromised right now. Socket AI analysis confirms this is malware. plain-crypto-js is an obfuscated dropper/loader that: • Deobfuscates embedded payloads and operational strings at runtime • Dynamically loads fs, os, and execSync to evade static analysis • Executes decoded shell commands • Stages and copies payload files into OS temp and Windows ProgramData directories • Deletes and renames artifacts post-execution to destroy forensic evidence If you use axios, pin your version immediately and audit your lockfiles. Do not upgrade.

Build Distributed Systems from Scratch

Learn distributed systems the hard way, by implementing real algorithms. Progress from basic message passing to consensus protocols through hands-on, Maelstrom-compatible challenges. ——— - Build Real Systems - Progressive Learning - Hands-on Coding - Concept Explanations ——— https://www.builddistributedsystem.com

Build Distributed Systems from Scratch 💯

Learn distributed systems the hard way, by implementing real algorithms. Progress from basic message passing to consensus protocols through hands-on, Maelstrom-compatible challenges. ——— - Build Real Systems - Progressive Learning - Hands-on Coding - Concept Explanations ——— https://www.builddistributedsystem.com

7 GitHub repos for JavaScript Developers ⚡️

CSS Tip: Create smooth page transitions with just one line of CSS: