Awesome GitHub RepositoriesVanilla JavaScript Utilities

This project is a vanilla JavaScript reference guide and implementation collection designed to replace legacy libraries with native browser patterns. It provides a set of native JavaScript patterns for selecting, modifying, and navigating HTML elements, alongside a web API implementation guide for handling events and styles. The project serves as a reference for implementing asynchronous JavaScript patterns using native promises and fetch for remote data and background tasks. It also includes a client-side utility collection for performing data transformations, type validation, and element me

VvvebJs is a self-hosted, vanilla JavaScript library for visually assembling web pages by dragging pre-built HTML components onto a canvas. It functions as a visual HTML editor and component-based page builder that requires no build tools or external dependencies, and can be deployed on a server with PHP or Node.js backend for saving and exporting pages. The builder organizes reusable HTML components into named groups for drag-and-drop assembly, and provides visual property editing that modifies HTML attributes, CSS styles, and class names through form controls and property panels. It include

Rellax is a dependency-free vanilla JavaScript library and frontend utility used to create parallax web design effects. It functions as a scroll-based animation tool that moves page elements at different speeds to produce a sense of depth and layered motion. The library supports both vertical and horizontal parallax tracking for panoramic layouts and allows for motion speed control. It includes breakpoint-aware speed mapping to adjust movement based on screen width and provides viewport centering to position elements relative to the center of the screen. Beyond basic motion, the tool manages

This is a vanilla JavaScript DOM manipulation library that provides a collection of native methods for selecting, creating, and modifying HTML DOM elements without any framework dependencies. It operates directly on the live DOM tree using imperative JavaScript calls, wrapping standard browser DOM APIs into reusable utility functions. The library covers the full spectrum of DOM operations including element selection, creation, removal, content and attribute management, event handling, style and class manipulation, and DOM traversal. It includes approaches for cross-browser DOM compatibility,

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

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

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

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