الدليل الكامل لتحديثات ECMAScript 2025 للمطورين

يوليو 6, 2025

📘 شرح تفصيلي لتحديثات ECMAScript 2025

جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية.

١. مجموعات مسماة مكررة في الـ Regex

دلوقتي تقدر تستخدم نفس اسم المجموعة أكتر من مرة في فروع مختلفة من الـ regex، وده بيسهل التعامل مع تنسيقات متعددة.

const pattern = /ECMAScript(?<version>[0-9]{4})|ES(?<version>[0-9]{2})/;
"ECMAScript2025".match(pattern).groups.version; // "2025"

الأهمية: بتخلي الـ regex أسهل في القراءة وقابل لإعادة الاستخدام.

٢. دوال جديدة لـ Set

اتضافت دوال زي union() وintersection() وdifference() علشان تسهّل عمليات المقارنة والدمج بين المجموعات.

const a = new Set([1, 2, 3]);
const b = new Set([3, 4]);
a.union(b); // Set {1, 2, 3, 4}

الأهمية: مفيش داعي تحوّل الـ Set لـ Array علشان تشتغل عليه، كل حاجة بقت جاهزة ومباشرة.

٣. Modifiers في أجزاء من الـ Regex

بقى ممكن تطبق فلاغ زي i (case-insensitive) على جزء معين من الـ regex من غير ما يطبّق على كله.

const pat = /(?i:bearer)abc/;
"Bearerabc".match(pat);

الأهمية: تحكم أدق في التحقق من النصوص، خصوصًا لو بتتعامل مع مدخلات مختلفة.

٤. import attributes

تقدر تستخدم خصائص إضافية وقت استيراد modules في المتصفح، وده بيساعد في تخصيص طريقة التحميل.

<script type="module" importattributes="mode=auto">
  import data from './data.js';
</script>

الأهمية: تحكم أفضل في طريقة تحميل الـ JavaScript modules، خصوصًا في المشاريع الكبيرة.

٥. Iterator Helpers

دلوقتي تقدر تستخدم map() وfilter() وtake() مباشرة على الـ iterator.

for await (const item of someArray[Symbol.iterator]().filter(x => x > 3)) {
  console.log(item);
}

الأهمية: بتقلل الكود وتخليه أوضح لما تتعامل مع بيانات بتتغير باستمرار.

٦. Promise.try()

طريقة جديدة تخلّيك تبدأ promise وفي نفس الوقت تتعامل مع الأخطاء جوّه try/catch من غير تعقيد.

Promise.try(() => {
  if (Math.random() > 0.5) throw new Error('Oops');
  return 42;
})
.then(console.log)
.catch(console.error);

الأهمية: كود أنضف وأسهل في التعامل مع العمليات اللي ممكن ترجع خطأ.

٧. Float16Array

نوع جديد من الـ typed arrays بيستخدم 16-bit بس، وده بيوفر في الذاكرة وبيسرّع الأداء.

const arr = new Float16Array(4);
arr[0] = 1.5;
console.log(arr[0]);

الأهمية: مفيد في الجرافيكس أو التعامل مع بيانات كتير وعايز أداء سريع.

٨. RegExp.escape()

بتديك طريقة آمنة تهرب بيها أي نص علشان تستخدمه جوه regex من غير مشاكل.

const unsafe = "hello?*";
const safe = RegExp.escape(unsafe);
const re = new RegExp(safe);

الأهمية: بتمنع الأخطاء والهجمات الناتجة عن إدخال المستخدم اللي فيه رموز regex.

المدونة

إزاي تستخدم Web Components ببساطة وذكاء

يوليو 06, 2025

إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...

مقارنة CSS: طبقات vs BEM vs Utility Classes

يونيو 26, 2025

مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS &ndash; BEM والـ utility‑first classes وك...

توليد تقارير بكفاءة مع كاش وزمن ثابت واستخدام الـ Job Queues

يوليو 07, 2025

إزاي نعمل كاش لتقارير بفترة زمنية ثابتة إزاي نولّد تقارير ضخمة في الخلفية باستخدام الـ Job Queues 1. 🧠 كاش للتقارير بفترة زمنية ثابتة لو ع...

وقّف نسخ الكود! اتعلم تستخدم Traits في Laravel صح

يوليو 01, 2025

🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...

دليل للأنيميشن المتحركة بالسكّول بس بـ CSS

يونيو 26, 2025

دليل للأنيميشن المتحركة بالسكّول بـ CSS دلوقتي تقدر تربط الأنيميشن بتاعتك بـ السكّول من غير جافاسكريبت &mdash; كله CSS بحت. 1. التلات مكونات بتوع...

تحديث Laravel 12.18.0

يونيو 17, 2025

تحديث Laravel 12.18.0 صدر نسخه Laravel 12.18.0 فيها شوية ميزات جامدة كده: توابع لتشفير وفك تشفير النصوص باستخدام Stringable ديركت في chain strings...

The Ultimate Managed Hosting Platform