Arabic Dev Snippets 🇸🇦🇪🇬
كود بالعربي — لكل developer عربي
ليه Arabic Dev Snippets؟
أول extension عربي بيديك:
- كود جاهز بضغطة Tab
- شرح بالعربي لكل snippet
- بيغطي كل الـ stack من Frontend للـ Backend
- مناسب للمبتدئين والمحترفين
التقنيات المدعومة
| Technology |
Prefix |
Snippets |
| HTML |
html-ar- |
35 |
| CSS |
css-ar- |
33 |
| JavaScript |
js-ar- |
32 |
| TypeScript |
ts-ar- |
15 |
| Angular |
ng-ar- |
25 |
| NestJS |
nest-ar- |
12 |
| Prisma |
pr-ar- |
14 |
| Ionic |
ion-ar- |
22 |
| Git |
git-ar- |
12 |
الإجمالي: أكتر من 200 snippet
التثبيت
من داخل VS Code
- افتح VS Code
- اضغط
Ctrl+P
- اكتب:
ext install MostafaSaqly.arabic-dev-snippets
من الـ Marketplace
ابحث عن Arabic Dev Snippets في تبويب الـ Extensions
طريقة الاستخدام
- افتح أي ملف TypeScript أو HTML
- ابدأ الكتابة بالـ prefix المناسب
- اختار الـ snippet من القائمة
- اضغط Tab والكود بيكتب لوحده
قائمة الـ Snippets الكاملة
HTML — html-ar-
| Prefix |
الوصف |
html-ar-page |
صفحة HTML5 كاملة جاهزة للبدء |
html-ar-meta |
وسوم meta لتحسين الـ SEO ومشاركة الروابط |
html-ar-navbar |
شريط تنقل أساسي بقائمة روابط |
html-ar-header |
رأس الصفحة بعنوان ووصف |
html-ar-footer |
تذييل الصفحة بحقوق النشر |
html-ar-section |
قسم من الصفحة بعنوان ومحتوى |
html-ar-article |
مقال مستقل له معنى بذاته |
html-ar-form |
نموذج إدخال بيانات كامل |
html-ar-input |
حقل إدخال مع تسمية |
html-ar-select |
قائمة اختيار منسدلة |
html-ar-textarea |
صندوق نص متعدد الأسطر |
html-ar-checkbox |
مربع اختيار للموافقة أو التحديد |
html-ar-radio |
مجموعة أزرار اختيار واحد فقط |
html-ar-button |
زر قابل للنقر |
html-ar-table |
جدول بيانات بعناوين وصفوف |
html-ar-ol |
قائمة مرقمة |
html-ar-ul |
قائمة نقطية غير مرقمة |
html-ar-img |
صورة مع نص بديل وتحميل كسول |
html-ar-picture |
صورة متجاوبة تتغير حسب حجم الشاشة |
html-ar-video |
مشغل فيديو مع عناصر التحكم |
html-ar-audio |
مشغل صوت مع عناصر التحكم |
html-ar-link |
رابط يفتح في تبويب جديد بأمان |
html-ar-card |
بطاقة بصورة وعنوان ومحتوى |
html-ar-modal |
نافذة منبثقة بزر إغلاق |
html-ar-accordion |
قسم قابل للطي والفتح بدون جافاسكربت |
html-ar-figure |
صورة مع تعليق وصفي |
html-ar-iframe |
إطار لتضمين صفحة أو فيديو خارجي |
html-ar-progress |
شريط تقدم لإظهار نسبة الإنجاز |
html-ar-fieldset |
تجميع حقول النموذج تحت عنوان واحد |
html-ar-datalist |
حقل بإقتراحات جاهزة أثناء الكتابة |
html-ar-layout |
هيكل صفحة دلالي كامل |
html-ar-breadcrumb |
مسار التنقل لمعرفة مكان الصفحة الحالية |
html-ar-hero |
قسم ترحيبي بارز أعلى الصفحة |
html-ar-favicon |
أيقونة الموقع في تبويب المتصفح |
html-ar-comment |
تعليق بارز لتقسيم الكود |
CSS — css-ar-
| Prefix |
الوصف |
css-ar-reset |
إعادة ضبط الأنماط الافتراضية للمتصفح |
css-ar-flex-center |
توسيط العناصر أفقياً وعمودياً بالـ flexbox |
css-ar-flex |
ترتيب العناصر في صف أو عمود مرن |
css-ar-grid |
تقسيم الصفحة لشبكة من الأعمدة |
css-ar-grid-auto |
شبكة متجاوبة تتكيف تلقائياً مع المساحة |
css-ar-media |
أنماط خاصة بحجم شاشة معين |
css-ar-vars |
متغيرات لإعادة استخدام القيم في كل المشروع |
css-ar-transition |
انتقال سلس عند تغير الخصائص |
css-ar-hover |
تأثير عند مرور الماوس فوق العنصر |
css-ar-keyframes |
تعريف حركة مخصصة بمراحل |
css-ar-animation |
تطبيق حركة على عنصر |
css-ar-fadein |
حركة ظهور تدريجي للعنصر |
css-ar-spinner |
مؤشر تحميل دائري يدور |
css-ar-shadow |
ظل ناعم حول العنصر |
css-ar-card |
تنسيق بطاقة بظل وحواف دائرية |
css-ar-btn |
تنسيق زر جذاب مع تأثير hover |
css-ar-gradient |
خلفية متدرجة الألوان |
css-ar-center-abs |
توسيط مطلق للعنصر داخل أبيه |
css-ar-position |
تحديد موضع العنصر بدقة |
css-ar-sticky |
رأس يلتصق بأعلى الشاشة عند التمرير |
css-ar-truncate |
قص النص الطويل وإضافة ثلاث نقاط |
css-ar-clamp |
قص النص بعد عدد محدد من الأسطر |
css-ar-aspect |
الحفاظ على نسبة أبعاد ثابتة للعنصر |
css-ar-glass |
تأثير الزجاج الشفاف الضبابي |
css-ar-scrollbar |
تنسيق شريط التمرير بشكل مخصص |
css-ar-pseudo |
إضافة محتوى قبل أو بعد العنصر |
css-ar-dark |
أنماط الوضع الليلي حسب تفضيل النظام |
css-ar-container |
حاوية بعرض أقصى وتوسيط تلقائي |
css-ar-overlay |
طبقة تغطية شفافة فوق المحتوى |
css-ar-hide |
إخفاء العنصر بصرياً مع بقائه لقارئ الشاشة |
css-ar-fluid-font |
حجم خط متجاوب يتغير مع حجم الشاشة |
css-ar-lift |
رفع العنصر مع ظل عند المرور عليه |
css-ar-comment |
تعليق بارز لتقسيم الكود |
JavaScript — js-ar-
| Prefix |
الوصف |
js-ar-select |
اختيار عنصر واحد من الصفحة |
js-ar-select-all |
اختيار كل العناصر المطابقة والمرور عليها |
js-ar-event |
ربط حدث بعنصر |
js-ar-ready |
تشغيل الكود بعد تحميل الصفحة بالكامل |
js-ar-create |
إنشاء عنصر جديد وإضافته للصفحة |
js-ar-toggle |
تبديل وجود class على العنصر |
js-ar-function |
تعريف دالة |
js-ar-arrow |
دالة سهمية مختصرة |
js-ar-fetch |
جلب بيانات من API |
js-ar-async-fetch |
جلب بيانات بطريقة async/await مع معالجة الأخطاء |
js-ar-post |
إرسال بيانات للسيرفر بطلب POST |
js-ar-promise |
إنشاء وعد للعمليات غير المتزامنة |
js-ar-try |
محاولة تنفيذ كود مع التقاط الأخطاء |
js-ar-map |
تحويل كل عنصر في المصفوفة لعنصر جديد |
js-ar-filter |
تصفية المصفوفة حسب شرط معين |
js-ar-reduce |
تلخيص المصفوفة في قيمة واحدة |
js-ar-find |
إيجاد أول عنصر يحقق الشرط |
js-ar-foreach |
المرور على كل عناصر المصفوفة |
js-ar-destruct |
تفكيك الكائن لاستخراج قيمه |
js-ar-spread |
نسخ ودمج المصفوفات أو الكائنات |
js-ar-template |
نص مع متغيرات بداخله |
js-ar-ternary |
شرط مختصر في سطر واحد |
js-ar-optional |
الوصول الآمن لخصائص قد تكون غير موجودة |
js-ar-storage |
حفظ وجلب البيانات من التخزين المحلي |
js-ar-timeout |
تنفيذ كود بعد فترة زمنية محددة |
js-ar-interval |
تكرار تنفيذ كود كل فترة زمنية |
js-ar-debounce |
تأخير تنفيذ الدالة حتى يتوقف المستخدم |
js-ar-class |
تعريف كلاس لإنشاء الكائنات |
js-ar-form-submit |
التقاط إرسال النموذج ومنع إعادة التحميل |
js-ar-array |
إنشاء مصفوفة والعمليات الأساسية عليها |
js-ar-object-loop |
المرور على مفاتيح وقيم الكائن |
js-ar-log |
طباعة قيمة في الكونسول للتتبع |
TypeScript — ts-ar-
| Prefix |
الوصف |
ts-ar-interface |
تعريف شكل الكائن وحقوله |
ts-ar-type |
تعريف نوع مخصص بسيط أو اتحادي |
ts-ar-enum |
قائمة قيم ثابتة معروفة مسبقاً |
ts-ar-generic |
دالة تشتغل مع أي نوع من البيانات |
ts-ar-decorator |
إضافة سلوك على الكلاس أو الميثود |
ts-ar-class |
قالب كامل لإنشاء الكائنات |
ts-ar-abstract |
كلاس مجرد يورث منه ولا يستخدم مباشرة |
ts-ar-generic-interface |
واجهة تتكيف مع أي نوع بيانات |
ts-ar-utility |
أنواع مساعدة جاهزة لتحويل الأنواع |
ts-ar-async |
دالة غير متزامنة مع معالجة الأخطاء |
ts-ar-typeguard |
التحقق من نوع البيانات وقت التشغيل |
ts-ar-mapped |
إنشاء نوع جديد بناءً على نوع موجود |
ts-ar-intersection |
دمج نوعين معاً في نوع واحد |
ts-ar-record |
ربط المفاتيح بقيم من نوع معين |
ts-ar-reduce |
تلخيص مصفوفة في قيمة واحدة |
Angular — ng-ar-
ملفات TypeScript
| Prefix |
الوصف |
ng-ar-component |
إنشاء component — المبنة الأساسية في Angular |
ng-ar-service |
إنشاء service — لمشاركة البيانات والـ logic |
ng-ar-guard |
إنشاء route guard — بيمنع الدخول بدون إذن |
ng-ar-interceptor |
إنشاء HTTP interceptor — بيضيف الـ token تلقائياً |
ng-ar-pipe |
إنشاء pipe — بيغير شكل العرض |
ng-ar-signal |
استخدام signals — إدارة الـ state في Angular 17 |
ng-ar-resolver |
إنشاء resolver — بيجيب البيانات قبل ما الصفحة تفتح |
ng-ar-reactive-form |
إنشاء reactive form كامل مع الـ validation |
ng-ar-store |
store بسيط بالـ signals |
ng-ar-ondestroy |
إلغاء الـ subscriptions عند تدمير الـ component |
ng-ar-directive |
إنشاء custom directive |
ng-ar-io |
تمرير بيانات بالـ Input والـ Output |
ng-ar-input-signal |
Input signal — الطريقة الجديدة في Angular 17 |
ملفات HTML
| Prefix |
الوصف |
ng-ar-template |
قالب أساسي لـ component |
ng-ar-for |
تكرار العناصر — الطريقة القديمة *ngFor |
ng-ar-if |
إظهار وإخفاء العناصر — الطريقة القديمة *ngIf |
ng-ar-for-new |
تكرار العناصر @for — Angular 17 |
ng-ar-if-new |
الشرط @if — Angular 17 |
ng-ar-switch-new |
الـ switch @switch — Angular 17 |
ng-ar-switch |
الـ switch القديم ngSwitch |
ng-ar-form |
قالب reactive form |
ng-ar-twoway |
ربط ثنائي الاتجاه [(ngModel)] |
ng-ar-event |
ربط أحداث HTML بدوال الـ component |
ng-ar-class-style |
إضافة classes وـ styles بشكل ديناميكي |
ng-ar-bind |
ربط خصائص HTML |
ng-ar-defer |
تحميل كسول @defer — Angular 17 |
NestJS — nest-ar-
| Prefix |
الوصف |
nest-ar-module |
إنشاء module — بينظم الكود في وحدات |
nest-ar-controller |
إنشاء controller — بيستقبل الـ HTTP requests |
nest-ar-service |
إنشاء service — منطق العمل الرئيسي |
nest-ar-dto |
إنشاء DTO — بيحدد شكل البيانات الجاية |
nest-ar-guard |
إنشاء guard — بيتحقق من صلاحية المستخدم |
nest-ar-pipe |
إنشاء pipe — بيتحقق من البيانات أو بيحولها |
nest-ar-interceptor |
إنشاء interceptor — بيلتقط الـ request والـ response |
nest-ar-filter |
إنشاء exception filter — بيمسك الأخطاء |
nest-ar-decorator |
إنشاء custom decorator لجلب بيانات من الـ request |
nest-ar-schedule |
جدولة مهام — تشغيل مهمة تلقائياً في وقت معين |
nest-ar-prisma-module |
إنشاء Prisma service للتواصل مع قاعدة البيانات |
nest-ar-jwt |
مصادقة كاملة بالـ JWT |
Prisma — pr-ar-
| Prefix |
الوصف |
pr-ar-model |
تعريف model — جدول في قاعدة البيانات |
pr-ar-findmany |
جيب كل السجلات مع فلترة وترتيب |
pr-ar-findone |
جيب سجل واحد بالـ ID |
pr-ar-create |
إضافة سجل جديد |
pr-ar-update |
تعديل سجل موجود |
pr-ar-delete |
حذف سجل |
pr-ar-relation |
علاقة One-to-Many بين جدولين |
pr-ar-many-to-many |
علاقة Many-to-Many |
pr-ar-transaction |
transaction — تنفيذ عمليات متعددة مع بعض |
pr-ar-pagination |
تقسيم النتايج لصفحات |
pr-ar-search |
بحث في أكتر من حقل |
pr-ar-upsert |
إضافة أو تحديث سجل |
pr-ar-deletemany |
حذف متعدد بشرط |
pr-ar-aggregate |
إحصائيات — مجموع ومتوسط وأقصى وأقل |
Ionic — ion-ar-
ملفات TypeScript
| Prefix |
الوصف |
ion-ar-page |
صفحة Ionic كاملة |
ion-ar-modal |
نافذة منبثقة — بتظهر فوق الصفحة الحالية |
ion-ar-toast |
رسالة صغيرة بتظهر وتتخلى لوحدها |
ion-ar-alert |
رسالة تأكيد قبل تنفيذ عملية مهمة |
ion-ar-loading |
مؤشر تحميل أثناء انتظار البيانات |
ion-ar-actionsheet |
قائمة خيارات بتظهر من تحت الشاشة |
ion-ar-popover |
نافذة صغيرة بتطلع جنب العنصر |
ion-ar-nav |
التنقل بين الصفحات |
ion-ar-storage |
حفظ وجلب البيانات من التخزين المحلي |
ion-ar-refresher |
بيسمح المستخدم يسحب لأسفل لتحديث البيانات |
ion-ar-infinite |
تحميل بيانات إضافية عند الوصول لآخر الصفحة |
ion-ar-camera |
التقاط صور من الكاميرا أو الاستوديو |
ملفات HTML
| Prefix |
الوصف |
ion-ar-list |
قائمة عناصر قابلة للنقر |
ion-ar-card |
card بعنوان ومحتوى وأزرار |
ion-ar-grid |
تقسيم الشاشة لأعمدة |
ion-ar-search |
شريط البحث |
ion-ar-refresher-html |
قالب السحب للتحديث |
ion-ar-infinite-html |
قالب التحميل اللانهائي |
ion-ar-segment |
تبويبات للتنقل بين المحتوى |
ion-ar-slides |
slider للصور والبطاقات |
ion-ar-tabs |
شريط التنقل السفلي |
ion-ar-form-html |
نموذج Ionic كامل مع تحقق |
Git — git-ar-
| Prefix |
الوصف |
git-ar-init |
إنشاء repo جديد وربطه بـ GitHub |
git-ar-branch |
إنشاء branch والانتقال إليه |
git-ar-commit |
حفظ التغييرات بشكل صحيح |
git-ar-merge |
دمج الـ branches |
git-ar-undo |
التراجع عن التغييرات |
git-ar-remote |
رفع وجلب التغييرات |
git-ar-conflict |
حل الـ conflicts عند الدمج |
git-ar-stash |
حفظ مؤقت للتغييرات بدون commit |
git-ar-log |
عرض تاريخ الـ commits بشكل جميل |
git-ar-tag |
وسم الـ releases |
git-ar-rebase |
interactive rebase لإعادة كتابة التاريخ |
git-ar-clean |
تنظيف الـ repo من الـ branches القديمة |
تعلم أكتر
الـ snippets دي مشروحة بالتفصيل في Saqly Courses:
المساهمة في المشروع
الـ extension ده open source — مرحب بأي مساهمة!
git clone https://github.com/MostafaSaqly/arabic-dev-snippets
cd arabic-dev-snippets
npm install
code .
عاوز تضيف snippet جديدة؟
- افتح الملف المناسب في مجلد
snippets/
- أضف الـ snippet بنفس الشكل الموجود
- افتح Pull Request
الرخصة
MIT License — مجاني للاستخدام الشخصي والتجاري
دعم المشروع
لو الـ extension أفادك:
- اعمل Star على GitHub
- اشترك في Saqly Courses
- شارك الـ extension مع زمايلك
| |
