Awesome GitHub RepositoriesVanilla JavaScript Implementations

This project is a collection of reference implementations for vanilla web applications, interactive browser games, and core frontend development patterns. It consists of small web applications and tools built using standard HTML, CSS, and JavaScript without the use of external frameworks or libraries. The collection demonstrates various practical implementations, including browser-based mini games with arcade and word-guessing mechanics, as well as frontend interface prototypes. These examples cover the use of the native document object model for state manipulation and the implementation of i

Flowbite is a cross-framework UI library and design system built as a collection of pre-styled components and layout blocks using Tailwind CSS utility classes. It functions as a TypeScript UI toolkit and a general web framework for creating responsive websites and applications. The project provides a mirroring Figma design system to allow prototyping of components and variants before they are coded. It distinguishes itself through an AI-driven approach to page generation and the creation of design specifications via a command-line interface. The library covers a wide range of interactive int

Card-style Hugo theme designed for bloggers

هذا المشروع عبارة عن مدير لموافقة ملفات تعريف الارتباط (cookies) وأداة للامتثال للائحة العامة لحماية البيانات (GDPR) المستخدمة لجمع موافقة المستخدم على فئات ملفات تعريف الارتباط. تم تنفيذه كإضافة JavaScript خام تعمل بدون أطر عمل أو تبعيات خارجية. توفر الأداة واجهة موافقة متعددة اللغات تكتشف تلقائيًا لغات المتصفح أو المستند لتقديم محتوى مترجم. وتدير تفضيلات الخصوصية عن طريق حظر إطارات iframe والنصوص البرمجية التابعة لجهات خارجية حتى يتم منح موافقة المستخدم الصريحة. يغطي النظام تخصيص خصوصية الموقع الإلكتروني من خلال لافتات ونوافذ منبثقة قابلة للتكوين، بما في ذلك خيارات لأنماط التخطيط والسمات. كما يتضمن إمكانيات لتقييد التفاعل مع الصفحة حتى يتم اتخاذ قرار الموافقة.

Tiny-slider هي مكتبة JavaScript خفيفة لإنشاء شرائح عرض (carousel) تدعم اللمس ومكونات واجهة مستخدم سهلة الوصول دون أي تبعيات خارجية. تعمل المكتبة كمحرك تخطيط متجاوب يقوم بضبط رؤية الشرائح وأبعادها بناءً على نقاط توقف العرض (breakpoints). تتميز المكتبة بالتحميل الكسول (lazy loading) المدمج للصور والوسائط لتحسين أداء الصفحة، ونظام متجاوب يقوم تلقائياً بتغيير حجم العناصر وتباعدها وفقاً لحجم شاشة الجهاز. كما تدعم المكتبة حالات الشرائح المتداخلة، مما يسمح بإنشاء تخطيطات تمرير متعددة الاتجاهات. يغطي المشروع قدرات تنقل وتفاعل شاملة، بما في ذلك دعم أسهم لوحة المفاتيح، وإمكانية الوصول لقارئات الشاشة، واكتشاف إيماءات اللمس. كما يوفر أدوات لانتقالات الشرائح التلقائية، وتنسيق تنقل مخصص للترقيم والأزرار، ونظاماً قائماً على الأحداث لتشغيل منطق مخصص أثناء تغييرات دورة الحياة.

Pickr is a dependency-free JavaScript color picker library and multi-format color converter. It provides a visual interface for selecting colors and transforming them between HEX, RGB, HSL, and CMYK representations. The library is designed as a themed UI component that can attach to and function within web shadow roots. It supports customizable visual styles and layout applications to align with various CSS frameworks and design systems. Capability areas include visual color selection with alpha channel opacity control, the management of preset color swatches, and an event-driven callback sy

autoComplete.js هي مكتبة JavaScript بسيطة تُستخدم لإضافة قوائم منسدلة للاقتراحات القابلة للبحث إلى عناصر الإدخال. تعمل كمحرك بحث من جانب العميل ومدير دورة حياة الإدخال الذي يعمل بدون تبعيات أو أطر عمل خارجية. تتميز المكتبة بمحرك بحث قابل للتخصيص مع أوضاع مطابقة متعددة ودعم للعلامات التشكيلية لتصفية البيانات بدقة. وتتضمن أداة لإلغاء ارتداد الطلبات (Debouncing) لتقليل تكرار طلبات الشبكة عن طريق تأخير تنفيذ البحث أثناء الكتابة النشطة. يوفر النظام عرضاً للاقتراحات قائماً على DOM لاكتشاف القيم في الوقت الفعلي ومديراً لدورة حياة قائم على الأحداث لتشغيل إجراءات مخصصة في مراحل محددة من عملية الإكمال التلقائي.

هذه مجموعة من مشاريع JavaScript الصغيرة ونماذج الكود التي توضح تنفيذ مفاهيم البرمجة الأساسية من خلال تطبيقات عملية. يعمل المستودع كمرجع لبناء واجهات مستخدم تفاعلية، وإدارة حالة التطبيق، ودمج واجهات برمجة التطبيقات الخارجية باستخدام JavaScript الخام (Vanilla). يركز المشروع على استخدام JavaScript القياسي بدون أطر عمل خارجية لإنشاء عناصر واجهة مثل النوافذ المنبثقة (Modals)، وأشرطة التمرير (Sliders)، والمعارض. يوفر أمثلة لتنظيم منطق التطبيق المعقد من خلال أنماط البرمجة الكائنية (OOP) باستخدام الفئات والكائنات لضمان أن يكون الكود منظماً وقابلاً لإعادة الاستخدام. تغطي القدرات المشمولة جلب البيانات غير المتزامن لملء المحتوى الديناميكي، ومعالجة عناصر DOM لتحديثات واجهة المستخدم في الوقت الفعلي، وتطوير أنظمة وظيفية مثل المؤقتات والترقيم.

هذا المشروع عبارة عن قالب لوحة تحكم إدارية شامل مبني على Bootstrap 5. يوفر مكتبة معيارية من مكونات الواجهة المصممة مسبقاً، وتخطيطات الصفحات، وعناصر النماذج التي تهدف إلى تسريع بناء تطبيقات الويب المتجاوبة. صُمم إطار العمل ليكون خفيف الوزن، حيث يستخدم برمجة المتصفح الأصلية لجميع السلوكيات التفاعلية للقضاء على التبعيات على المكتبات الخارجية الثقيلة. يتميز القالب بالتركيز على الأداء والتخصيص. يتضمن خط أنابيب أصول قائماً على مشغل المهام (task-runner) يقوم بأتمتة تجميع وتصغير وتغليف ملفات المصدر، مما يضمن أصولاً جاهزة للإنتاج ومحسنة. يمكن للمطورين الحفاظ على هوية العلامة التجارية والتصميم المتسقة عن طريق تعديل ملفات التكوين المركزية، التي تستفيد من متغيرات المعالج المسبق (preprocessor) والمزيج (mixins) لإنشاء فئات أدوات مخصصة وأوراق أنماط. بعيداً عن مكونات واجهة المستخدم الأساسية، يتضمن المشروع مجموعة من الوحدات الوظيفية لإدارة مصادقة المستخدم، بما في ذلك سير عمل التسجيل وتسجيل الدخول واستعادة كلمة المرور. كما يوفر أدوات متكاملة لتصور البيانات، وإدارة البيانات الجدولية، والجدولة التفاعلية، إلى جانب قوالب جاهزة لصفحات التطبيق الشائعة مثل شاشات الخطأ وإدارة الملف الشخصي. يوفر المستودع كلاً من ملفات المصدر غير المصغرة وحزم الإنتاج المحسنة، مما يسمح بالنشر المباشر دون الحاجة إلى بيئات تشغيل معقدة من جانب الخادم.