npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@domq-js/core

v1.0.1

Published

~ Lightweight Wrapper For Vanilla JS ~

Downloads

14

Readme

What ?

domQ is an absurdly small jQuery alternative for modern browsers (IE11+) that provides jQuery-style syntax for manipulating the DOM. Utilizing modern browser features to minimize the codebase, developers can use the familiar chainable methods at a fraction of the file size. 100% feature parity with jQuery isn't a goal, but domQ comes helpfully close, covering most day to day use cases.

Why ?

I was very bored with jquery script and wanted to try something else :see_no_evil:.

Well as a web developer i wanted to move out from jQuery and use Vanilla JS. When i realized i had to write multiple lines of code for a single action thats when i decided to create a lightweight javascript library that can do most things that jQuery can.

domQ Uses Dizzle which is an alternate to jQuery's Sizzle Framework which is used for Customized CSS Selectors like :input, :hidden and Dizzle is bundled along with domQ. we both standalone & bundled versions.

Comparison

| Size | domQ | domQ + Dizzle | Zepto | jQuery Slim | | :--- | :--- | :---: | :---: | :---: | | Unminified | 45.7 KB | 77.1 KB | 58.7 KB | 250 KB | | Minified | 20.5 KB | 31.4 KB | 26 KB | 70.6 KB | | Minified & Gzipped | 7.50 KB | 11.1 KB | 9.8 KB | 24.4 KB |

| Features | domq | domQ + Dizzle | Zepto | jQuery Slim | | :--- | :---: | :---: | :---: | :---: | | Supports Older Browsers | ❌ | ❌ | ❌ | ✔ | | Supports Modern Browsers | ✔ | ✔ | ✔ | ✔ | | Actively Maintained | ✔ | ✔ | ❌ | ✔ | | Namespaced Events | ✔ | ✔ | ❌ | ✔ | | jQuery Selectors | ✔ | ✔ | ⚠️(Experimental Feature)| ✔ | | ** Animation | ✔ | ✔ | ⚠️(Custom Workaround) ️| ❌ |

** domQ uses WebAnimation's API

Usage

Get domQ from CloudFlare or jsDelivr and use it like this:

jsDelivr

  1. domQ : jsDelivr
  2. domQ + Dizzle : jsDelivr
<script src="https://cdn.jsdelivr.net/npm/@domq-js/[email protected]/dist/bundled/domq.umd.min.js"></script>
<script>
  domQ(function () {
    domQ('html').addClass ( 'domq-works' );
    domQ('<footer>Appended with domQ</footer>').appendTo ( document.body );
  });
</script>

domQ is also available through npm as the @domq-js/core package:

npm install --save @domq-js/core

That you can then use like this:

import domq from "domq";

domq(function () {
  domq('html').addClass ( 'domq-works' );
  domq('<footer>Appended with domQ</footer>').appendTo ( document.body );
});

Documentation

domQ gives you a query selector, collection methods and some library methods. If you need more details about our API just check out jQuery's, while we don't implement everything that jQuery provides, everything what we do implement should be compatible with jQuery. domQ can be extended with custom methods, read how here.

Documentation : https://domq.sva.wiki

❤️ Thanks To Mannatstudio Themes For The Awesome Logo


📝 Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

Checkout CHANGELOG.md

🤝 Contributing

If you would like to help, please take a look at the list of issues.

💰 Sponsor

I fell in love with open-source in 2013 and there has been no looking back since! You can read more about me here. If you, or your company, use any of my projects or like what I’m doing, kindly consider backing me. I'm in this for the long run.

  • ☕ How about we get to know each other over coffee? Buy me a cup for just $9.99
  • ☕️☕️ How about buying me just 2 cups of coffee each month? You can do that for as little as $9.99
  • 🔰 We love bettering open-source projects. Support 1-hour of open-source maintenance for $24.99 one-time?
  • 🚀 Love open-source tools? Me too! How about supporting one hour of open-source development for just $49.99 one-time ?

📜 License & Conduct

📣 Feedback

  • ⭐ This repository if this project helped you! :wink:
  • Create An 🔧 Issue if you need help / found a bug

Connect & Say 👋