Repository: HubSpot/youmightnotneedjquery
Branch: dev
Commit: 2848af90368d
Files: 314
Total size: 76.4 KB
Directory structure:
gitextract_5m9lppc8/
├── .editorconfig
├── .github/
│ └── workflows/
│ └── build.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── astro.config.ts
├── package.json
└── src/
├── comparisons/
│ ├── ajax/
│ │ ├── alternatives.json
│ │ ├── json/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── load/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── post/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ └── request/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── effects/
│ │ ├── alternatives.json
│ │ ├── fade_in/
│ │ │ ├── ie10.css
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ ├── modern.css
│ │ │ └── modern.js
│ │ ├── fade_out/
│ │ │ ├── ie10.css
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ ├── modern.css
│ │ │ └── modern.js
│ │ ├── hide/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── show/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ └── toggle/
│ │ ├── ie8.js
│ │ └── jquery.js
│ ├── elements/
│ │ ├── add_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── after/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── alternatives.json
│ │ ├── append/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── append_to/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── before/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── children/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── clone/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── closest/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── contains/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── contains_selector/
│ │ │ ├── alternatives.json
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── contents/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── create_elements/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── each/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── empty/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── filter/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── find_children/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── find_elements/
│ │ │ ├── alternatives.json
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── find_selector/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── first/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_attributes/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_height/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── get_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_outer_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_style/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── get_text/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── get_width/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── has_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── index/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── inner_height/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── inner_width/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── is_hidden/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── is_visible/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── last/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── matches/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── matches_selector/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── next/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── offset/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── offset_parent/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── outer_height/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── outer_height_with_margin/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── outer_width/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── outer_width_with_margin/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── parent/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── parents/
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── position/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── position_relative_to_viewport/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── prepend/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── prev/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── remove/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── remove_attributes/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── remove_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── replace_from_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── scroll_left/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── scroll_top/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── serialize/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── set_attributes/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_height/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_style/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_text/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── set_width/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── siblings/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── toggle_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── unwrap/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── val/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ └── wrap/
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── events/
│ │ ├── alternatives.json
│ │ ├── click/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── delegate/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── off/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── on/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── ready/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── trigger_custom/
│ │ │ ├── alternatives.json
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ └── trigger_native/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ └── utils/
│ ├── array_each/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── bind/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── deep_extend/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── extend/
│ │ ├── alternatives.json
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── index_of/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── is_array/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── is_numeric/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── map/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── now/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── object_each/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── parse_html/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── parse_json/
│ │ ├── ie8.js
│ │ └── jquery.js
│ ├── slice/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── to_array/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── trim/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ └── type/
│ ├── ie8.js
│ └── jquery.js
├── components/
│ └── CodeBlock.astro
├── env.d.ts
├── lib/
│ ├── comparisons.ts
│ └── newest-engine.ts
├── pages/
│ └── index.astro
└── utils/
├── is-even.ts
├── throttle.ts
└── title-case.ts
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
[*.{js,css}]
charset = utf-8
================================================
FILE: .github/workflows/build.yml
================================================
on:
push:
branches:
- dev
pull_request:
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install, build and upload
uses: withastro/action@v0
- name: Upload artifacts
uses: actions/upload-pages-artifact@v1
with:
path: dist
publish:
name: Publish
needs: build
runs-on: ubuntu-latest
if: ${{ github.ref == 'refs/heads/dev' }}
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
================================================
FILE: .gitignore
================================================
node_modules
.DS_Store
.vscode
.idea
# Generated files
dist
================================================
FILE: .prettierignore
================================================
# Generated files
dist/*
================================================
FILE: .prettierrc.json
================================================
{
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": false,
"plugins": ["prettier-plugin-astro"]
}
================================================
FILE: LICENSE
================================================
Copyright (c) 2014 HubSpot, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
# You Might Not Need jQuery
A resource for doing things _au naturel_.
### [YouMightNotNeedjQuery.com](https://youmightnotneedjquery.com)
## Contributing
To add a new section, just create a folder for it, and add `jquery.js`, and `ie8.js`, `ie9.js`, `ie10.js`, `ie11.js`, and `modern.js` (for Chrome/Safari/Firefox) as needed. For example, if you have `ie8.js` and `ie9.js`, the ie9 version will be shown to people looking for a solution that works in ie9, ie10, ie11, or modern JS.
## Building
Building YMNNJQ requires Node.js
1. In the project directory, run `npm install`
1. To build the project and watch for changes, run `npm run dev`.
1. To build the project without watching for changes, use `npm run build`.
================================================
FILE: astro.config.ts
================================================
import {defineConfig} from 'astro/config';
import compress from 'astro-compress';
export default defineConfig({
integrations: [compress()]
});
================================================
FILE: package.json
================================================
{
"private": true,
"scripts": {
"dev": "astro dev",
"build": "astro build",
"format": "prettier -w ."
},
"devDependencies": {
"@astrojs/prism": "^1.0.1",
"@sindresorhus/class-names": "^2.0.0",
"@types/node": "^18.7.16",
"astro": "^1.1.7",
"astro-compress": "^1.0.7",
"modern-normalize": "^1.1.0",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.5.4",
"readfiletree": "^1.0.0",
"sass": "^1.54.9",
"sort-keys": "^5.0.0"
}
}
================================================
FILE: src/comparisons/ajax/alternatives.json
================================================
{
"fetch": "https://github.com/github/fetch"
}
================================================
FILE: src/comparisons/ajax/json/ie10.js
================================================
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.response);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function () {
// There was a connection error of some sort
};
request.send();
================================================
FILE: src/comparisons/ajax/json/ie8.js
================================================
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success!
var data = JSON.parse(this.responseText);
} else {
// Error :(
}
}
};
request.send();
request = null;
================================================
FILE: src/comparisons/ajax/json/ie9.js
================================================
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function () {
// There was a connection error of some sort
};
request.send();
================================================
FILE: src/comparisons/ajax/json/jquery.js
================================================
$.getJSON('/my/url', function (data) {});
================================================
FILE: src/comparisons/ajax/json/modern.js
================================================
const response = await fetch('/my/url');
const data = await response.json();
================================================
FILE: src/comparisons/ajax/load/ie8.js
================================================
function load(selector, path) {
var request = new XMLHttpRequest();
request.open('GET', path, true);
request.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success!
var elements = document.querySelector(selector);
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = this.responseText;
}
} else {
// Error :(
}
}
};
}
load('#some.selector', '/path/to/template.html');
================================================
FILE: src/comparisons/ajax/load/jquery.js
================================================
$('#some.selector').load('/path/to/template.html');
================================================
FILE: src/comparisons/ajax/load/modern.js
================================================
const response = await fetch('/path/to/template.html');
const body = await response.text();
document.querySelector('#some.selector').innerHTML = body;
================================================
FILE: src/comparisons/ajax/post/ie8.js
================================================
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded; charset=UTF-8'
);
request.send(data);
================================================
FILE: src/comparisons/ajax/post/jquery.js
================================================
$.ajax({
type: 'POST',
url: '/my/url',
data: data
});
================================================
FILE: src/comparisons/ajax/post/modern.js
================================================
await fetch('/my/url', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
================================================
FILE: src/comparisons/ajax/request/ie8.js
================================================
function request(success, error) {
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function () {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success! If you expect this to be JSON, use JSON.parse!
success(this.responseText, this.status);
} else {
error();
}
}
};
request.send();
}
================================================
FILE: src/comparisons/ajax/request/ie9.js
================================================
function request(success, error) {
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function () {
if (this.status >= 200 && this.status < 400) {
// Success! If you expect this to be JSON, use JSON.parse!
success(this.responseText, this.status);
} else {
// We reached our target server, but it returned an error
error();
}
};
request.onerror = function () {
error();
};
request.send();
}
================================================
FILE: src/comparisons/ajax/request/jquery.js
================================================
$.ajax({
type: 'GET',
url: '/my/url',
success: function (resp) {},
error: function () {}
});
================================================
FILE: src/comparisons/ajax/request/modern.js
================================================
const response = await fetch('/my/url');
if (!response.ok) {
}
const body = await response.text();
================================================
FILE: src/comparisons/effects/alternatives.json
================================================
{
"animate.css": "https://animate.style",
"move.js": "https://github.com/visionmedia/move.js",
"velocity.js": "https://julian.com/research/velocity/"
}
================================================
FILE: src/comparisons/effects/fade_in/ie10.css
================================================
.show {
transition: opacity 400ms;
}
.hide {
opacity: 0;
}
================================================
FILE: src/comparisons/effects/fade_in/ie10.js
================================================
el.classList.add('show');
el.classList.remove('hide');
================================================
FILE: src/comparisons/effects/fade_in/ie8.js
================================================
function fadeIn(el, speed = 400) {
var opacity = 0;
el.style.opacity = 0;
el.style.filter = '';
var last = +new Date();
var tick = function () {
opacity += (new Date() - last) / speed;
if (opacity > 1) opacity = 1;
el.style.opacity = opacity;
el.style.filter = 'alpha(opacity=' + (100 * opacity || 0) + ')';
last = +new Date();
if (opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) ||
setTimeout(tick, 16);
}
};
tick();
}
fadeIn(el);
================================================
FILE: src/comparisons/effects/fade_in/ie9.js
================================================
function fadeIn(el, speed = 400) {
el.style.opacity = 0;
var last = +new Date();
var tick = function () {
el.style.opacity = +el.style.opacity + (new Date() - last) / speed;
if (opacity > 1) opacity = 1;
last = +new Date();
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) ||
setTimeout(tick, 16);
}
};
tick();
}
fadeIn(el);
================================================
FILE: src/comparisons/effects/fade_in/jquery.js
================================================
$(el).fadeIn();
================================================
FILE: src/comparisons/effects/fade_in/modern.css
================================================
.show {
transition: opacity 400ms;
}
.hide {
opacity: 0;
}
================================================
FILE: src/comparisons/effects/fade_in/modern.js
================================================
el.classList.replace('hide', 'show');
================================================
FILE: src/comparisons/effects/fade_out/ie10.css
================================================
.show {
opacity: 1;
}
.hide {
opacity: 0;
transition: opacity 400ms;
}
================================================
FILE: src/comparisons/effects/fade_out/ie10.js
================================================
el.classList.add('hide');
el.classList.remove('show');
================================================
FILE: src/comparisons/effects/fade_out/ie8.js
================================================
function fadeOut(el, speed = 400) {
var opacity = 1;
el.style.opacity = 1;
el.style.filter = '';
var last = +new Date();
var tick = function () {
opacity -= (new Date() - last) / speed;
if (opacity < 0) opacity = 0;
el.style.opacity = opacity;
el.style.filter = 'alpha(opacity=' + 100 * opacity + ')';
last = +new Date();
if (opacity > 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) ||
setTimeout(tick, 16);
}
};
tick();
}
fadeOut(el);
================================================
FILE: src/comparisons/effects/fade_out/ie9.js
================================================
function fadeOut(el, speed = 400) {
el.style.opacity = 1;
var last = +new Date();
var tick = function () {
el.style.opacity = +el.style.opacity - (new Date() - last) / speed;
if (opacity < 0) opacity = 0;
last = +new Date();
if (+el.style.opacity > 0) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) ||
setTimeout(tick, 16);
}
};
tick();
}
fadeOut(el);
================================================
FILE: src/comparisons/effects/fade_out/jquery.js
================================================
$(el).fadeOut();
================================================
FILE: src/comparisons/effects/fade_out/modern.css
================================================
.show {
opacity: 1;
}
.hide {
opacity: 0;
transition: opacity 400ms;
}
================================================
FILE: src/comparisons/effects/fade_out/modern.js
================================================
el.classList.replace('show', 'hide');
================================================
FILE: src/comparisons/effects/hide/ie8.js
================================================
el.style.display = 'none';
================================================
FILE: src/comparisons/effects/hide/jquery.js
================================================
$(el).hide();
================================================
FILE: src/comparisons/effects/show/ie8.js
================================================
el.style.display = '';
================================================
FILE: src/comparisons/effects/show/jquery.js
================================================
$(el).show();
================================================
FILE: src/comparisons/effects/toggle/ie8.js
================================================
function toggle(el) {
if (el.style.display == 'none') {
el.style.display = '';
} else {
el.style.display = 'none';
}
}
================================================
FILE: src/comparisons/effects/toggle/jquery.js
================================================
$(el).toggle();
================================================
FILE: src/comparisons/elements/add_class/ie10.js
================================================
el.classList.add(className);
================================================
FILE: src/comparisons/elements/add_class/ie8.js
================================================
if (el.classList) {
el.classList.add(className);
} else {
var current = el.className,
found = false;
var all = current.split(' ');
for (var i = 0; i < all.length, !found; i++) found = all[i] === className;
if (!found) {
if (current === '') el.className = className;
else el.className += ' ' + className;
}
}
================================================
FILE: src/comparisons/elements/add_class/jquery.js
================================================
$(el).addClass(className);
================================================
FILE: src/comparisons/elements/after/ie8.js
================================================
target.insertAdjacentElement('afterend', element);
================================================
FILE: src/comparisons/elements/after/jquery.js
================================================
$(target).after(element);
================================================
FILE: src/comparisons/elements/after/modern.js
================================================
target.after(element);
================================================
FILE: src/comparisons/elements/alternatives.json
================================================
{
"bonzo": "https://github.com/ded/bonzo",
"$dom": "https://github.com/julienw/dollardom"
}
================================================
FILE: src/comparisons/elements/append/ie8.js
================================================
parent.appendChild(el);
================================================
FILE: src/comparisons/elements/append/jquery.js
================================================
$(parent).append(el);
================================================
FILE: src/comparisons/elements/append/modern.js
================================================
parent.append(el);
================================================
FILE: src/comparisons/elements/append_to/ie8.js
================================================
parent.appendChild(el);
================================================
FILE: src/comparisons/elements/append_to/jquery.js
================================================
$(el).appendTo(parent);
================================================
FILE: src/comparisons/elements/append_to/modern.js
================================================
parent.append(el);
================================================
FILE: src/comparisons/elements/before/ie8.js
================================================
target.insertAdjacentElement('beforebegin', element);
================================================
FILE: src/comparisons/elements/before/jquery.js
================================================
$(target).before(element);
================================================
FILE: src/comparisons/elements/before/modern.js
================================================
target.before(el);
================================================
FILE: src/comparisons/elements/children/ie8.js
================================================
var children = [];
for (var i = el.children.length; i--; ) {
// Skip comment nodes on IE8
if (el.children[i].nodeType != 8) children.unshift(el.children[i]);
}
================================================
FILE: src/comparisons/elements/children/ie9.js
================================================
el.children;
================================================
FILE: src/comparisons/elements/children/jquery.js
================================================
$(el).children();
================================================
FILE: src/comparisons/elements/clone/ie8.js
================================================
el.cloneNode(true);
================================================
FILE: src/comparisons/elements/clone/jquery.js
================================================
$(el).clone();
================================================
FILE: src/comparisons/elements/closest/ie10.js
================================================
el.closest(sel);
================================================
FILE: src/comparisons/elements/closest/ie8.js
================================================
function closest(el, sel) {
Element.prototype.matches ||
(Element.prototype.matches =
Element.prototype.matchesSelector ||
Element.prototype.mozMatchesSelector ||
Element.prototype.msMatchesSelector ||
Element.prototype.oMatchesSelector ||
Element.prototype.webkitMatchesSelector ||
function (b) {
b = (this.document || this.ownerDocument).querySelectorAll(b);
for (var a = b.length; 0 <= --a && b.item(a) !== this; );
return -1 < a;
});
Element.prototype.closest ||
(Element.prototype.closest = function (b) {
var a = this;
do {
if (a.matches(b)) return a;
a = a.parentElement || a.parentNode;
} while (null !== a && 1 === a.nodeType);
return null;
});
return el.closest(sel);
}
closest(el, sel);
================================================
FILE: src/comparisons/elements/closest/ie9.js
================================================
function closest(el, sel) {
Element.prototype.matches ||
(Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector);
Element.prototype.closest ||
(Element.prototype.closest = function (c) {
var a = this;
do {
if (a.matches(c)) return a;
a = a.parentElement || a.parentNode;
} while (null !== a && 1 === a.nodeType);
return null;
});
return el.closest(sel);
}
closest(el, sel);
================================================
FILE: src/comparisons/elements/closest/jquery.js
================================================
$(el).closest(sel);
================================================
FILE: src/comparisons/elements/contains/ie8.js
================================================
el !== child && el.contains(child);
================================================
FILE: src/comparisons/elements/contains/jquery.js
================================================
$.contains(el, child);
================================================
FILE: src/comparisons/elements/contains/modern.js
================================================
node.contains(anotherNode);
================================================
FILE: src/comparisons/elements/contains_selector/alternatives.json
================================================
{
"xpath": "https://www.w3schools.com/xml/xpath_intro.asp"
}
================================================
FILE: src/comparisons/elements/contains_selector/jquery.js
================================================
$("div:contains('my text')");
================================================
FILE: src/comparisons/elements/contains_selector/modern.js
================================================
[...document.querySelectorAll('div')].filter((el) =>
el.textContent.includes('my text')
);
================================================
FILE: src/comparisons/elements/contents/jquery.js
================================================
$(el).contents();
================================================
FILE: src/comparisons/elements/contents/modern.js
================================================
el.childNodes;
================================================
FILE: src/comparisons/elements/create_elements/ie8.js
================================================
function generateElements(html) {
var div = document.createElement('div');
div.innerHTML = html;
return div.children;
}
generateElements('<div>Hello World!</div>');
================================================
FILE: src/comparisons/elements/create_elements/jquery.js
================================================
$('<div>Hello World!</div>');
================================================
FILE: src/comparisons/elements/create_elements/modern.js
================================================
function generateElements(html) {
const template = document.createElement('template');
template.innerHTML = html.trim();
return template.content.children;
}
generateElements('<div>Hello World!</div>');
================================================
FILE: src/comparisons/elements/each/ie8.js
================================================
function forEachElement(selector, fn) {
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) fn(elements[i], i);
}
forEachElement(selector, function (el, i) {});
================================================
FILE: src/comparisons/elements/each/ie9.js
================================================
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function (el, i) {});
================================================
FILE: src/comparisons/elements/each/jquery.js
================================================
$(selector).each(function (i, el) {});
================================================
FILE: src/comparisons/elements/each/modern.js
================================================
document.querySelectorAll(selector).forEach((el, i) => {});
================================================
FILE: src/comparisons/elements/empty/ie8.js
================================================
while (el.firstChild) el.removeChild(el.firstChild);
================================================
FILE: src/comparisons/elements/empty/jquery.js
================================================
$(el).empty();
================================================
FILE: src/comparisons/elements/empty/modern.js
================================================
el.replaceChildren();
================================================
FILE: src/comparisons/elements/filter/ie8.js
================================================
function filter(selector, filterFn) {
var elements = document.querySelectorAll(selector);
var out = [];
for (var i = elements.length; i--; ) {
if (filterFn(elements[i])) out.unshift(elements[i]);
}
return out;
}
filter(selector, filterFn);
================================================
FILE: src/comparisons/elements/filter/ie9.js
================================================
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);
================================================
FILE: src/comparisons/elements/filter/jquery.js
================================================
$(selector).filter(filterFn);
================================================
FILE: src/comparisons/elements/filter/modern.js
================================================
[...document.querySelectorAll(selector)].filter(filterFn);
================================================
FILE: src/comparisons/elements/find_children/ie8.js
================================================
el.querySelectorAll(selector);
================================================
FILE: src/comparisons/elements/find_children/jquery.js
================================================
$(el).find(selector);
================================================
FILE: src/comparisons/elements/find_children/modern.js
================================================
// For direct descendants only, see https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#user_notes
el.querySelectorAll(`:scope ${selector}`);
================================================
FILE: src/comparisons/elements/find_elements/alternatives.json
================================================
{
"qwery": "https://github.com/ded/qwery",
"sizzle": "https://sizzlejs.com/"
}
================================================
FILE: src/comparisons/elements/find_elements/ie8.js
================================================
document.querySelectorAll('.my #awesome selector');
================================================
FILE: src/comparisons/elements/find_elements/jquery.js
================================================
$('.my #awesome selector');
================================================
FILE: src/comparisons/elements/find_selector/ie8.js
================================================
!!el.querySelector(selector);
================================================
FILE: src/comparisons/elements/find_selector/jquery.js
================================================
$(el).find(selector).length;
================================================
FILE: src/comparisons/elements/first/ie8.js
================================================
document.querySelector(el);
================================================
FILE: src/comparisons/elements/first/jquery.js
================================================
$(el).first();
================================================
FILE: src/comparisons/elements/get_attributes/ie8.js
================================================
el.getAttribute('tabindex');
================================================
FILE: src/comparisons/elements/get_attributes/jquery.js
================================================
$(el).attr('tabindex');
================================================
FILE: src/comparisons/elements/get_height/ie8.js
================================================
function getHeight(el) {
var d = /^\d+(px)?$/i;
if (window.getComputedStyle)
el = parseFloat(getComputedStyle(el, null).height.replace('px', ''));
else {
var c = el.currentStyle.height;
if (d.test(c)) el = parseInt(c);
else {
d = el.style.left;
var e = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = c || 0;
c = el.style.pixelLeft;
el.style.left = d;
el.runtimeStyle.left = e;
el = c;
}
}
return el;
}
getHeight(el);
================================================
FILE: src/comparisons/elements/get_height/ie9.js
================================================
parseFloat(getComputedStyle(el, null).height.replace('px', ''));
================================================
FILE: src/comparisons/elements/get_height/jquery.js
================================================
$(el).height();
================================================
FILE: src/comparisons/elements/get_height/modern.js
================================================
el.getBoundingClientRect().height;
================================================
FILE: src/comparisons/elements/get_html/ie8.js
================================================
el.innerHTML;
================================================
FILE: src/comparisons/elements/get_html/jquery.js
================================================
$(el).html();
================================================
FILE: src/comparisons/elements/get_outer_html/ie8.js
================================================
el.outerHTML;
================================================
FILE: src/comparisons/elements/get_outer_html/jquery.js
================================================
$(el).prop('outerHTML');
================================================
FILE: src/comparisons/elements/get_style/ie8.js
================================================
// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle
// https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js
================================================
FILE: src/comparisons/elements/get_style/ie9.js
================================================
getComputedStyle(el)[ruleName];
================================================
FILE: src/comparisons/elements/get_style/jquery.js
================================================
$(el).css(ruleName);
================================================
FILE: src/comparisons/elements/get_text/ie8.js
================================================
el.textContent || el.innerText;
================================================
FILE: src/comparisons/elements/get_text/ie9.js
================================================
el.textContent;
================================================
FILE: src/comparisons/elements/get_text/jquery.js
================================================
$(el).text();
================================================
FILE: src/comparisons/elements/get_width/ie8.js
================================================
function getWidth(el) {
var d = /^\d+(px)?$/i;
if (window.getComputedStyle)
el = parseFloat(getComputedStyle(el, null).width.replace('px', ''));
else {
var c = el.currentStyle.width;
if (d.test(c)) el = parseInt(c);
else {
d = el.style.left;
var e = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = c || 0;
c = el.style.pixelLeft;
el.style.left = d;
el.runtimeStyle.left = e;
el = c;
}
}
return el;
}
getWidth(el);
================================================
FILE: src/comparisons/elements/get_width/ie9.js
================================================
parseFloat(getComputedStyle(el, null).width.replace('px', ''));
================================================
FILE: src/comparisons/elements/get_width/jquery.js
================================================
$(el).width();
================================================
FILE: src/comparisons/elements/get_width/modern.js
================================================
el.getBoundingClientRect().width;
================================================
FILE: src/comparisons/elements/has_class/ie10.js
================================================
el.classList.contains(className);
================================================
FILE: src/comparisons/elements/has_class/ie8.js
================================================
if (el.classList) el.classList.contains(className);
else new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
================================================
FILE: src/comparisons/elements/has_class/jquery.js
================================================
$(el).hasClass(className);
================================================
FILE: src/comparisons/elements/index/ie8.js
================================================
function index(el) {
if (!el) return -1;
var i = 0;
while (el) {
el = el.previousSibling;
if (el && el.nodeType === 1) i++;
}
return i;
}
================================================
FILE: src/comparisons/elements/index/ie9.js
================================================
function index(el) {
if (!el) return -1;
var i = 0;
while ((el = el.previousElementSibling)) {
i++;
}
return i;
}
================================================
FILE: src/comparisons/elements/index/jquery.js
================================================
$(el).index();
================================================
FILE: src/comparisons/elements/index/modern.js
================================================
[...el.parentNode.children].indexOf(el);
================================================
FILE: src/comparisons/elements/inner_height/jquery.js
================================================
$(el).innerHeight();
$(el).innerHeight(150);
================================================
FILE: src/comparisons/elements/inner_height/modern.js
================================================
function innerHeight(el, value) {
if (value === undefined) {
return el.clientHeight;
} else {
el.style.height = value;
}
}
innerHeight(el);
innerHeight(el, 150);
================================================
FILE: src/comparisons/elements/inner_width/jquery.js
================================================
$(el).innerWidth();
$(el).innerWidth(150);
================================================
FILE: src/comparisons/elements/inner_width/modern.js
================================================
function innerWidth(el, value) {
if (value === undefined) {
return el.clientWidth;
} else {
el.style.width = value;
}
}
innerWidth(el);
innerWidth(el, 150);
================================================
FILE: src/comparisons/elements/is_hidden/jquery.js
================================================
$(el).is(':hidden');
================================================
FILE: src/comparisons/elements/is_hidden/modern.js
================================================
function isHidden(el) {
return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}
================================================
FILE: src/comparisons/elements/is_visible/jquery.js
================================================
$(el).is(':visible');
================================================
FILE: src/comparisons/elements/is_visible/modern.js
================================================
function isVisible(el) {
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}
================================================
FILE: src/comparisons/elements/last/ie8.js
================================================
var els = document.querySelectorAll(el);
els[els.length - 1];
================================================
FILE: src/comparisons/elements/last/jquery.js
================================================
$(el).last();
================================================
FILE: src/comparisons/elements/last/modern.js
================================================
[...document.querySelectorAll(el)].at(-1);
================================================
FILE: src/comparisons/elements/matches/ie8.js
================================================
el === otherEl;
================================================
FILE: src/comparisons/elements/matches/jquery.js
================================================
$(el).is($(otherEl));
================================================
FILE: src/comparisons/elements/matches_selector/ie8.js
================================================
var matches = function (el, selector) {
var _matches =
el.matches ||
el.matchesSelector ||
el.msMatchesSelector ||
el.mozMatchesSelector ||
el.webkitMatchesSelector ||
el.oMatchesSelector;
if (_matches) {
return _matches.call(el, selector);
} else {
if (el.parentNode === null) return false;
var nodes = el.parentNode.querySelectorAll(selector);
for (var i = nodes.length; i--; ) {
if (nodes[i] === el) return true;
}
return false;
}
};
matches(el, '.my-class');
================================================
FILE: src/comparisons/elements/matches_selector/ie9.js
================================================
var matches = function (el, selector) {
return (
el.matches ||
el.matchesSelector ||
el.msMatchesSelector ||
el.mozMatchesSelector ||
el.webkitMatchesSelector ||
el.oMatchesSelector
).call(el, selector);
};
matches(el, '.my-class');
================================================
FILE: src/comparisons/elements/matches_selector/jquery.js
================================================
$(el).is('.my-class');
================================================
FILE: src/comparisons/elements/matches_selector/modern.js
================================================
el.matches('.my-class');
================================================
FILE: src/comparisons/elements/next/ie8.js
================================================
// nextSibling can include text nodes
function nextElementSibling(el) {
do {
el = el.nextSibling;
} while (el && el.nodeType !== 1);
return el;
}
el.nextElementSibling || nextElementSibling(el);
================================================
FILE: src/comparisons/elements/next/ie9.js
================================================
el.nextElementSibling;
================================================
FILE: src/comparisons/elements/next/jquery.js
================================================
$(el).next();
================================================
FILE: src/comparisons/elements/next/modern.js
================================================
function next(el, selector) {
const nextEl = el.nextElementSibling;
if (!selector || (nextEl && nextEl.matches(selector))) {
return nextEl;
}
return null;
}
next(el);
// Or, with an optional selector
next(el, '.my-selector');
================================================
FILE: src/comparisons/elements/offset/ie8.js
================================================
function offset(el) {
var docElem = document.documentElement;
var rect = el.getBoundingClientRect();
return {
top:
rect.top +
(window.pageYOffset || docElem.scrollTop) -
(docElem.clientTop || 0),
left:
rect.left +
(window.pageXOffset || docElem.scrollLeft) -
(docElem.clientLeft || 0)
};
}
================================================
FILE: src/comparisons/elements/offset/ie9.js
================================================
function offset(el) {
box = el.getBoundingClientRect();
docElem = document.documentElement;
return {
top: box.top + window.pageYOffset - docElem.clientTop,
left: box.left + window.pageXOffset - docElem.clientLeft
};
}
================================================
FILE: src/comparisons/elements/offset/jquery.js
================================================
$(el).offset();
================================================
FILE: src/comparisons/elements/offset_parent/ie8.js
================================================
el.offsetParent || el;
================================================
FILE: src/comparisons/elements/offset_parent/jquery.js
================================================
$(el).offsetParent();
================================================
FILE: src/comparisons/elements/outer_height/ie8.js
================================================
el.offsetHeight;
================================================
FILE: src/comparisons/elements/outer_height/jquery.js
================================================
$(el).outerHeight();
================================================
FILE: src/comparisons/elements/outer_height_with_margin/ie8.js
================================================
function outerHeight(el) {
var height = el.offsetHeight;
var style = el.currentStyle || getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
return height;
}
outerHeight(el);
================================================
FILE: src/comparisons/elements/outer_height_with_margin/ie9.js
================================================
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
return height;
}
outerHeight(el);
================================================
FILE: src/comparisons/elements/outer_height_with_margin/jquery.js
================================================
$(el).outerHeight(true);
================================================
FILE: src/comparisons/elements/outer_height_with_margin/modern.js
================================================
function outerHeight(el) {
const style = getComputedStyle(el);
return (
el.getBoundingClientRect().height +
parseFloat(style.marginTop) +
parseFloat(style.marginBottom)
);
}
outerHeight(el);
================================================
FILE: src/comparisons/elements/outer_width/ie8.js
================================================
el.offsetWidth;
================================================
FILE: src/comparisons/elements/outer_width/jquery.js
================================================
$(el).outerWidth();
================================================
FILE: src/comparisons/elements/outer_width_with_margin/ie8.js
================================================
function outerWidth(el) {
var width = el.offsetWidth;
var style = el.currentStyle || getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
return width;
}
outerWidth(el);
================================================
FILE: src/comparisons/elements/outer_width_with_margin/ie9.js
================================================
function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
return width;
}
outerWidth(el);
================================================
FILE: src/comparisons/elements/outer_width_with_margin/jquery.js
================================================
$(el).outerWidth(true);
================================================
FILE: src/comparisons/elements/outer_width_with_margin/modern.js
================================================
function outerWidth(el) {
const style = getComputedStyle(el);
return (
el.getBoundingClientRect().width +
parseFloat(style.marginLeft) +
parseFloat(style.marginRight)
);
}
outerWidth(el);
================================================
FILE: src/comparisons/elements/parent/ie8.js
================================================
el.parentNode;
================================================
FILE: src/comparisons/elements/parent/jquery.js
================================================
$(el).parent();
================================================
FILE: src/comparisons/elements/parents/ie9.js
================================================
function parents(el, selector) {
var parents = [];
while ((el = el.parentNode) && el !== document) {
// See "Matches Selector" above
if (!selector || matches(el, selector)) parents.push(el);
}
return parents;
}
================================================
FILE: src/comparisons/elements/parents/jquery.js
================================================
$(el).parents(selector);
================================================
FILE: src/comparisons/elements/parents/modern.js
================================================
function parents(el, selector) {
const parents = [];
while ((el = el.parentNode) && el !== document) {
if (!selector || el.matches(selector)) parents.push(el);
}
return parents;
}
================================================
FILE: src/comparisons/elements/position/ie8.js
================================================
function position(el) {
var box = el.getBoundingClientRect();
var docElem = document.documentElement;
var marginLeft = 0;
var marginTop = 0;
if (typeof getComputedStyle === 'function') {
var style = window.getComputedStyle(el);
marginLeft = parseInt(style.marginLeft, 10);
marginTop = parseInt(style.marginTop, 10);
} else if (el.currentStyle) {
marginLeft = el.currentStyle['marginLeft']
? parseInt(el.currentStyle['marginLeft'], 10)
: 0;
marginTop = el.currentStyle['marginTop']
? parseInt(el.currentStyle['marginTop'], 10)
: 0;
}
return {
top: box.top + (window.pageYOffset || docElem.scrollTop) - marginTop,
left: box.left + (window.pageXOffset || docElem.scrollLeft) - marginLeft
};
}
================================================
FILE: src/comparisons/elements/position/jquery.js
================================================
$(el).position();
================================================
FILE: src/comparisons/elements/position/modern.js
================================================
function position(el) {
const {top, left} = el.getBoundingClientRect();
const {marginTop, marginLeft} = getComputedStyle(el);
return {
top: top - parseInt(marginTop, 10),
left: left - parseInt(marginLeft, 10)
};
}
================================================
FILE: src/comparisons/elements/position_relative_to_viewport/ie8.js
================================================
el.getBoundingClientRect();
================================================
FILE: src/comparisons/elements/position_relative_to_viewport/jquery.js
================================================
function offset(el) {
var offset = $(el).offset();
return {
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
};
}
================================================
FILE: src/comparisons/elements/prepend/ie8.js
================================================
parent.insertBefore(el, parent.firstChild);
================================================
FILE: src/comparisons/elements/prepend/jquery.js
================================================
$(parent).prepend(el);
================================================
FILE: src/comparisons/elements/prepend/modern.js
================================================
parent.prepend(el);
================================================
FILE: src/comparisons/elements/prev/ie8.js
================================================
// prevSibling can include text nodes
function previousElementSibling(el) {
do {
el = el.previousSibling;
} while (el && el.nodeType !== 1);
return el;
}
el.previousElementSibling || previousElementSibling(el);
================================================
FILE: src/comparisons/elements/prev/ie9.js
================================================
el.previousElementSibling;
================================================
FILE: src/comparisons/elements/prev/jquery.js
================================================
$(el).prev();
// Or, with an optional selector
$(el).prev('.my-selector');
================================================
FILE: src/comparisons/elements/prev/modern.js
================================================
function prev(el, selector) {
const prevEl = el.previousElementSibling;
if (!selector || (prevEl && prevEl.matches(selector))) {
return prevEl;
}
return null;
}
prev(el);
// Or, with an optional selector
prev(el, '.my-selector');
================================================
FILE: src/comparisons/elements/remove/ie8.js
================================================
if (el.parentNode !== null) {
el.parentNode.removeChild(el);
}
================================================
FILE: src/comparisons/elements/remove/jquery.js
================================================
$(el).remove();
// multiple elements
$(selector).remove();
================================================
FILE: src/comparisons/elements/remove/modern.js
================================================
el.remove();
// multiple elements
for (const el of document.querySelectorAll(selector)) {
el.remove();
}
================================================
FILE: src/comparisons/elements/remove_attributes/ie8.js
================================================
el.removeAttribute('tabindex');
================================================
FILE: src/comparisons/elements/remove_attributes/jquery.js
================================================
$(el).removeAttr('tabindex');
================================================
FILE: src/comparisons/elements/remove_class/ie10.js
================================================
el.classList.remove(className);
================================================
FILE: src/comparisons/elements/remove_class/ie8.js
================================================
function removeClass(el, className) {
var classes = className.split(' ');
for (var i = 0; i < classes.length; i++) {
if (el.classList) {
el.classList.remove(classes[i]);
} else {
el.className = el.className
.replace(new RegExp('(?:^|\\s)' + classes[i] + '(?:\\s|$)'), ' ')
.replace(new RegExp(/^\s+|\s+$/g), '');
}
}
}
================================================
FILE: src/comparisons/elements/remove_class/jquery.js
================================================
$(el).removeClass(className);
================================================
FILE: src/comparisons/elements/replace_from_html/ie8.js
================================================
el.outerHTML = string;
================================================
FILE: src/comparisons/elements/replace_from_html/jquery.js
================================================
$(el).replaceWith(string);
================================================
FILE: src/comparisons/elements/scroll_left/jquery.js
================================================
$(window).scrollLeft();
================================================
FILE: src/comparisons/elements/scroll_left/modern.js
================================================
function scrollLeft(el, value) {
var win;
if (el.window === el) {
win = el;
} else if (el.nodeType === 9) {
win = el.defaultView;
}
if (value === undefined) {
return win ? win.pageXOffset : el.scrollLeft;
}
if (win) {
win.scrollTo(value, win.pageYOffset);
} else {
el.scrollLeft = value;
}
}
================================================
FILE: src/comparisons/elements/scroll_top/jquery.js
================================================
$(window).scrollTop();
================================================
FILE: src/comparisons/elements/scroll_top/modern.js
================================================
function scrollTop(el, value) {
var win;
if (el.window === el) {
win = el;
} else if (el.nodeType === 9) {
win = el.defaultView;
}
if (value === undefined) {
return win ? win.pageYOffset : el.scrollTop;
}
if (win) {
win.scrollTo(win.pageXOffset, value);
} else {
el.scrollTop = value;
}
}
================================================
FILE: src/comparisons/elements/serialize/jquery.js
================================================
$(formElement).serialize();
================================================
FILE: src/comparisons/elements/serialize/modern.js
================================================
new URLSearchParams(new FormData(formElement)).toString();
================================================
FILE: src/comparisons/elements/set_attributes/ie8.js
================================================
el.setAttribute('tabindex', 3);
================================================
FILE: src/comparisons/elements/set_attributes/jquery.js
================================================
$(el).attr('tabindex', 3);
================================================
FILE: src/comparisons/elements/set_height/ie8.js
================================================
function setHeight(el, val) {
if (typeof val === 'function') val = val();
if (typeof val === 'string') el.style.height = val;
else el.style.height = val + 'px';
}
setHeight(el, val);
================================================
FILE: src/comparisons/elements/set_height/jquery.js
================================================
$(el).height(val);
================================================
FILE: src/comparisons/elements/set_html/ie8.js
================================================
el.innerHTML = string;
================================================
FILE: src/comparisons/elements/set_html/jquery.js
================================================
$(el).html(string);
================================================
FILE: src/comparisons/elements/set_style/ie8.js
================================================
// Use a class if possible
el.style.borderWidth = '20px';
================================================
FILE: src/comparisons/elements/set_style/jquery.js
================================================
$(el).css('border-width', '20px');
================================================
FILE: src/comparisons/elements/set_text/ie8.js
================================================
if (el.textContent !== undefined) el.textContent = string;
else el.innerText = string;
================================================
FILE: src/comparisons/elements/set_text/ie9.js
================================================
el.textContent = string;
================================================
FILE: src/comparisons/elements/set_text/jquery.js
================================================
$(el).text(string);
================================================
FILE: src/comparisons/elements/set_width/ie8.js
================================================
function setWidth(el, val) {
if (typeof val === 'function') val = val();
if (typeof val === 'string') el.style.width = val;
else el.style.width = val + 'px';
}
setWidth(el, val);
================================================
FILE: src/comparisons/elements/set_width/jquery.js
================================================
$(el).width(val);
================================================
FILE: src/comparisons/elements/siblings/ie8.js
================================================
var siblings = function (el) {
if (el.parentNode === null) return [];
var siblingElements = Array.prototype.slice.call(el.parentNode.children);
for (var i = siblingElements.length; i--; ) {
if (siblingElements[i] === el) {
return siblingElements.splice(i, 1);
}
}
return siblingElements;
};
siblings(el);
================================================
FILE: src/comparisons/elements/siblings/ie9.js
================================================
var siblings = function (el) {
if (el.parentNode === null) return [];
return Array.prototype.filter.call(el.parentNode.children, function (child) {
return child !== el;
});
};
siblings(el);
================================================
FILE: src/comparisons/elements/siblings/jquery.js
================================================
$(el).siblings();
================================================
FILE: src/comparisons/elements/siblings/modern.js
================================================
[...el.parentNode.children].filter((child) => child !== el);
================================================
FILE: src/comparisons/elements/toggle_class/ie10.js
================================================
el.classList.toggle(className);
================================================
FILE: src/comparisons/elements/toggle_class/ie8.js
================================================
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = -1;
for (var i = classes.length; i--; ) {
if (classes[i] === className) existingIndex = i;
}
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
================================================
FILE: src/comparisons/elements/toggle_class/ie9.js
================================================
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
================================================
FILE: src/comparisons/elements/toggle_class/jquery.js
================================================
$(el).toggleClass(className);
================================================
FILE: src/comparisons/elements/unwrap/jquery.js
================================================
$(el).unwrap();
================================================
FILE: src/comparisons/elements/unwrap/modern.js
================================================
el.replaceWith(...el.childNodes);
================================================
FILE: src/comparisons/elements/val/jquery.js
================================================
$(el).val();
================================================
FILE: src/comparisons/elements/val/modern.js
================================================
function val(el) {
if (el.options && el.multiple) {
return el.options
.filter((option) => option.selected)
.map((option) => option.value);
} else {
return el.value;
}
}
================================================
FILE: src/comparisons/elements/wrap/jquery.js
================================================
el.wrap('<div></div>');
================================================
FILE: src/comparisons/elements/wrap/modern.js
================================================
function wrap(el) {
const wrappingElement = document.createElement('div');
el.replaceWith(wrappingElement);
wrappingElement.appendChild(el);
}
================================================
FILE: src/comparisons/events/alternatives.json
================================================
{
"ftdomdelegate": "https://github.com/ftlabs/ftdomdelegate",
"defer": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer",
"modules": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"
}
================================================
FILE: src/comparisons/events/click/ie8.js
================================================
var onClick = function (element, handler) {
if (element.addEventListener) {
element.addEventListener('click', handler, false);
} else {
element.attachEvent('onclick', handler);
}
};
onClick(el, function () {});
================================================
FILE: src/comparisons/events/click/ie9.js
================================================
el.addEventListener('click', function () {});
================================================
FILE: src/comparisons/events/click/jquery.js
================================================
$(el).click(function () {});
================================================
FILE: src/comparisons/events/click/modern.js
================================================
el.addEventListener('click', () => {});
================================================
FILE: src/comparisons/events/delegate/ie8.js
================================================
document.addEventListener(
eventName,
function (e) {
// loop parent nodes from the target to the delegation node
for (
var target = e.target;
target && target != this;
target = target.parentNode
) {
if (target.matches(elementSelector)) {
handler.call(target, e);
break;
}
}
},
false
);
================================================
FILE: src/comparisons/events/delegate/jquery.js
================================================
$(document).on(eventName, elementSelector, handler);
================================================
FILE: src/comparisons/events/delegate/modern.js
================================================
document.addEventListener(eventName, (event) => {
if (event.target.closest(elementSelector)) {
handler.call(event.target, event);
}
});
================================================
FILE: src/comparisons/events/off/ie8.js
================================================
function removeEventListener(el, eventName, handler) {
if (el.removeEventListener) el.removeEventListener(eventName, handler);
else el.detachEvent('on' + eventName, handler);
}
removeEventListener(el, eventName, handler);
================================================
FILE: src/comparisons/events/off/ie9.js
================================================
el.removeEventListener(eventName, eventHandler);
================================================
FILE: src/comparisons/events/off/jquery.js
================================================
$(el).off(eventName, eventHandler);
================================================
FILE: src/comparisons/events/on/ie8.js
================================================
function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
return handler;
} else {
var wrappedHandler = function (event) {
handler.call(el, event);
};
el.attachEvent('on' + eventName, wrappedHandler);
return wrappedHandler;
}
}
// Use the return value to remove that event listener, see #off
var handlerToRemove = addEventListener(el, eventName, handler);
================================================
FILE: src/comparisons/events/on/ie9.js
================================================
function addEventListener(el, eventName, eventHandler, selector) {
if (selector) {
var wrappedHandler = function (e) {
if (e.target && e.target.matches(selector)) {
eventHandler(e);
}
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
} else {
el.addEventListener(eventName, eventHandler);
return eventHandler;
}
}
// Use the return value to remove that event listener, see #off
addEventListener(el, eventName, eventHandler);
// Or when you want to delegate event handling
addEventListener(el, eventName, eventHandler, selector);
================================================
FILE: src/comparisons/events/on/jquery.js
================================================
$(el).on(eventName, eventHandler);
// Or when you want to delegate event handling
$(el).on(eventName, selector, eventHandler);
================================================
FILE: src/comparisons/events/on/modern.js
================================================
function addEventListener(el, eventName, eventHandler, selector) {
if (selector) {
const wrappedHandler = (e) => {
if (!e.target) return;
const el = e.target.closest(selector);
if (el) {
eventHandler.call(el, e);
}
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
} else {
const wrappedHandler = (e) => {
eventHandler.call(el, e);
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
}
}
// Use the return value to remove that event listener, see #off
addEventListener(el, eventName, eventHandler);
// Or when you want to delegate event handling
addEventListener(el, eventName, eventHandler, selector);
================================================
FILE: src/comparisons/events/ready/ie8.js
================================================
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function () {
if (document.readyState != 'loading') fn();
});
}
}
================================================
FILE: src/comparisons/events/ready/ie9.js
================================================
function ready(fn) {
if (
document.attachEvent
? document.readyState === 'complete'
: document.readyState !== 'loading'
) {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
================================================
FILE: src/comparisons/events/ready/jquery.js
================================================
$(document).ready(function () {});
================================================
FILE: src/comparisons/events/ready/modern.js
================================================
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
================================================
FILE: src/comparisons/events/trigger_custom/alternatives.json
================================================
{
"EventEmitter": "https://github.com/Wolfy87/EventEmitter",
"Vine": "https://github.com/arextar/Vine",
"microevent": "https://github.com/jeromeetienne/microevent.js"
}
================================================
FILE: src/comparisons/events/trigger_custom/ie8.js
================================================
// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.
================================================
FILE: src/comparisons/events/trigger_custom/ie9.js
================================================
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
var event = document.createEvent('CustomEvent');
event.initCustomEvent('my-event', true, true, {some: 'data'});
}
el.dispatchEvent(event);
================================================
FILE: src/comparisons/events/trigger_custom/jquery.js
================================================
$(el).trigger('my-event', {some: 'data'});
================================================
FILE: src/comparisons/events/trigger_custom/modern.js
================================================
const event = new CustomEvent('my-event', {detail: {some: 'data'}});
el.dispatchEvent(event);
================================================
FILE: src/comparisons/events/trigger_native/ie8.js
================================================
function trigger(el, eventType) {
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else if (eventType === 'string') {
if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent(eventType, true, false);
el.dispatchEvent(event);
} else {
el.fireEvent('on' + eventType);
}
} else {
el.dispatchEvent(eventType);
}
}
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
trigger(el, 'focus');
================================================
FILE: src/comparisons/events/trigger_native/ie9.js
================================================
function trigger(el, eventType) {
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else {
var event;
if (eventType === 'string') {
event = document.createEvent('HTMLEvents');
event.initEvent(eventType, true, false);
} else {
event = eventType;
}
el.dispatchEvent(event);
}
}
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
trigger(el, 'focus');
================================================
FILE: src/comparisons/events/trigger_native/jquery.js
================================================
$(el).trigger('focus');
================================================
FILE: src/comparisons/events/trigger_native/modern.js
================================================
function trigger(el, eventType) {
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else {
const event =
typeof eventType === 'string'
? new Event(eventType, {bubbles: true})
: eventType;
el.dispatchEvent(event);
}
}
trigger(el, 'focus');
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/Event
trigger(el, new PointerEvent('pointerover'));
================================================
FILE: src/comparisons/utils/array_each/ie8.js
================================================
function forEach(array, fn) {
for (var i = 0; i < array.length; i++) fn(array[i], i);
}
forEach(array, function (item, i) {});
================================================
FILE: src/comparisons/utils/array_each/ie9.js
================================================
array.forEach(function (item, i) {});
================================================
FILE: src/comparisons/utils/array_each/jquery.js
================================================
$.each(array, function (i, item) {});
================================================
FILE: src/comparisons/utils/array_each/modern.js
================================================
array.forEach((item, i) => {});
================================================
FILE: src/comparisons/utils/bind/ie8.js
================================================
fn.apply(context, arguments);
================================================
FILE: src/comparisons/utils/bind/ie9.js
================================================
fn.bind(context);
================================================
FILE: src/comparisons/utils/bind/jquery.js
================================================
$.proxy(fn, context);
================================================
FILE: src/comparisons/utils/deep_extend/ie8.js
================================================
function deepExtend(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
var obj = arguments[i];
if (!obj) continue;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var rawType = Object.prototype.toString.call(obj[key]);
if (rawType === '[object Object]') {
out[key] = deepExtend(out[key], obj[key]);
} else if (rawType === '[object Array]') {
out[key] = deepExtend(new Array(obj[key].length), obj[key]);
} else {
out[key] = obj[key];
}
}
}
}
return out;
}
deepExtend({}, objA, objB);
================================================
FILE: src/comparisons/utils/deep_extend/jquery.js
================================================
$.extend(true, {}, objA, objB);
================================================
FILE: src/comparisons/utils/deep_extend/modern.js
================================================
function deepExtend(out, ...arguments_) {
if (!out) {
return {};
}
for (const obj of arguments_) {
if (!obj) {
continue;
}
for (const [key, value] of Object.entries(obj)) {
switch (Object.prototype.toString.call(value)) {
case '[object Object]':
out[key] = out[key] || {};
out[key] = deepExtend(out[key], value);
break;
case '[object Array]':
out[key] = deepExtend(new Array(value.length), value);
break;
default:
out[key] = value;
}
}
}
return out;
}
deepExtend({}, objA, objB);
================================================
FILE: src/comparisons/utils/extend/alternatives.json
================================================
{
"Lodash": "https://lodash.com/docs#assign",
"Underscore": "https://underscorejs.org/#extend",
"ECMA6": "https://www.2ality.com/2014/01/object-assign.html"
}
================================================
FILE: src/comparisons/utils/extend/ie8.js
================================================
var extend = function (out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i]) continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) out[key] = arguments[i][key];
}
}
return out;
};
extend({}, objA, objB);
================================================
FILE: src/comparisons/utils/extend/jquery.js
================================================
$.extend({}, objA, objB);
================================================
FILE: src/comparisons/utils/extend/modern.js
================================================
const result = {...objA, ...objB};
================================================
FILE: src/comparisons/utils/index_of/ie8.js
================================================
function indexOf(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i] === item) return i;
}
return -1;
}
indexOf(array, item);
================================================
FILE: src/comparisons/utils/index_of/ie9.js
================================================
array.indexOf(item);
================================================
FILE: src/comparisons/utils/index_of/jquery.js
================================================
$.inArray(item, array);
================================================
FILE: src/comparisons/utils/is_array/ie8.js
================================================
isArray =
Array.isArray ||
function (arr) {
return Object.prototype.toString.call(arr) == '[object Array]';
};
isArray(arr);
================================================
FILE: src/comparisons/utils/is_array/ie9.js
================================================
Array.isArray(arr);
================================================
FILE: src/comparisons/utils/is_array/jquery.js
================================================
$.isArray(arr);
================================================
FILE: src/comparisons/utils/is_numeric/ie8.js
================================================
function isNumeric(num) {
if (typeof num === 'number') return num - num === 0;
if (typeof num === 'string' && num.trim() !== '')
return Number.isFinite ? Number.isFinite(+num) : isFinite(+num);
return false;
}
isNumeric(val);
================================================
FILE: src/comparisons/utils/is_numeric/jquery.js
================================================
$.isNumeric(val);
================================================
FILE: src/comparisons/utils/is_numeric/modern.js
================================================
function isNumeric(num) {
if (typeof num === 'number') return num - num === 0;
if (typeof num === 'string' && num.trim() !== '')
return Number.isFinite(+num);
return false;
}
isNumeric(val);
================================================
FILE: src/comparisons/utils/map/ie8.js
================================================
function map(arr, fn) {
var results = [];
for (var i = 0; i < arr.length; i++) results.push(fn(arr[i], i));
return results;
}
map(array, function (value, index) {});
================================================
FILE: src/comparisons/utils/map/ie9.js
================================================
array.map(function (value, index) {});
================================================
FILE: src/comparisons/utils/map/jquery.js
================================================
$.map(array, function (value, index) {});
================================================
FILE: src/comparisons/utils/map/modern.js
================================================
array.map((value, index) => {});
================================================
FILE: src/comparisons/utils/now/ie8.js
================================================
new Date().getTime();
================================================
FILE: src/comparisons/utils/now/ie9.js
================================================
Date.now();
================================================
FILE: src/comparisons/utils/now/jquery.js
================================================
$.now();
================================================
FILE: src/comparisons/utils/object_each/ie8.js
================================================
function objectEach(obj, callback) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
callback(key, obj[key]);
}
}
}
objectEach(obj, function (key, value) {});
================================================
FILE: src/comparisons/utils/object_each/jquery.js
================================================
$.each(obj, function (key, value) {});
================================================
FILE: src/comparisons/utils/object_each/modern.js
================================================
for (const [key, value] of Object.entries(obj)) {
}
================================================
FILE: src/comparisons/utils/parse_html/ie8.js
================================================
var parseHTML = function (str) {
var el = document.createElement('div');
el.innerHTML = str;
return el.childNodes;
};
parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_html/ie9.js
================================================
var parseHTML = function (str) {
var tmp = document.implementation.createHTMLDocument('');
tmp.body.innerHTML = str;
return Array.prototype.slice.call(tmp.body.childNodes);
};
parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_html/jquery.js
================================================
$.parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_html/modern.js
================================================
function parseHTML(str) {
const tmp = document.implementation.createHTMLDocument('');
tmp.body.innerHTML = str;
return [...tmp.body.childNodes];
}
parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_json/ie8.js
================================================
JSON.parse(string);
================================================
FILE: src/comparisons/utils/parse_json/jquery.js
================================================
$.parseJSON(string);
================================================
FILE: src/comparisons/utils/slice/ie8.js
================================================
function slice(els, start, end) {
var f = Array.prototype.slice;
try {
f.call(document.documentElement);
} catch (h) {
Array.prototype.slice = function (g, b) {
b = 'undefined' !== typeof b ? b : this.length;
if ('[object Array]' === Object.prototype.toString.call(this))
return f.call(this, g, b);
var e = [];
var a = this.length;
var c = g || 0;
c = 0 <= c ? c : Math.max(0, a + c);
var d = 'number' == typeof b ? Math.min(b, a) : a;
0 > b && (d = a + b);
d -= c;
if (0 < d)
if (((e = Array(d)), this.charAt))
for (a = 0; a < d; a++) e[a] = this.charAt(c + a);
else for (a = 0; a < d; a++) e[a] = this[c + a];
return e;
};
}
return els.slice(start, end);
}
slice(els, start, end);
================================================
FILE: src/comparisons/utils/slice/ie9.js
================================================
els.slice(begin, end);
================================================
FILE: src/comparisons/utils/slice/jquery.js
================================================
$(els).slice(begin, end);
================================================
FILE: src/comparisons/utils/to_array/ie8.js
================================================
function toArray(selector) {
var array = [];
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) array.push(elements[i]);
return array;
}
================================================
FILE: src/comparisons/utils/to_array/jquery.js
================================================
$(selector).toArray();
================================================
FILE: src/comparisons/utils/to_array/modern.js
================================================
const array = [...document.querySelectorAll(selector)];
================================================
FILE: src/comparisons/utils/trim/ie8.js
================================================
string.replace(/^\s+|\s+$/g, '');
================================================
FILE: src/comparisons/utils/trim/ie9.js
================================================
string.trim();
================================================
FILE: src/comparisons/utils/trim/jquery.js
================================================
$.trim(string);
================================================
FILE: src/comparisons/utils/type/ie8.js
================================================
Object.prototype.toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
================================================
FILE: src/comparisons/utils/type/jquery.js
================================================
$.type(obj);
================================================
FILE: src/components/CodeBlock.astro
================================================
---
import {Prism} from '@astrojs/prism';
export interface Props {
lang?: string;
code?: string;
}
const {lang, code} = Astro.props as Props;
---
<div class="code-wrapper">
<button title="Copy code snippet" class="copy-code">📋</button>
{code && <Prism class="code" lang={lang} code={code} />}
</div>
<style lang="scss">
.code-wrapper {
position: relative;
}
button {
position: absolute;
top: 0;
right: 0;
opacity: 0.2;
cursor: pointer;
background: #eee;
border: 1px solid transparent;
padding: 6px;
&:hover {
opacity: 1;
border-color: #ccc;
}
}
</style>
<script>
function oldCopyText(text: string) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.top = '0';
textArea.style.left = '0';
textArea.style.position = 'fixed'; // Avoids scrolling on focus
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
} finally {
document.body.removeChild(textArea);
}
}
function copyText(text: string) {
if (!navigator.clipboard) {
oldCopyText(text);
return;
}
navigator.clipboard.writeText(text).catch(() => {
oldCopyText(text);
});
}
const buttonElements = document.querySelectorAll('.copy-code');
buttonElements.forEach((el) => {
el.setAttribute('data-label', el.innerHTML);
el.addEventListener('click', (event) => {
const currentEl = event.target as HTMLElement;
const pre = currentEl.nextElementSibling;
if (pre) {
copyText(pre.textContent);
const range = document.createRange();
range.selectNode(pre);
getSelection().removeAllRanges();
getSelection().addRange(range);
currentEl.innerHTML = 'Copied!';
setTimeout(() => {
currentEl.innerHTML = currentEl.getAttribute('data-label');
}, 1000);
} else {
currentEl.innerHTML = 'Failed to copy :(';
setTimeout(() => {
currentEl.innerHTML = currentEl.getAttribute('data-label');
}, 1000);
}
});
});
</script>
================================================
FILE: src/env.d.ts
================================================
/// <reference types="astro/client" />
================================================
FILE: src/lib/comparisons.ts
================================================
import path from 'node:path';
import process from 'node:process'; // Astro must be run while the current working directory is the repository root so that the comparison files can be detected.
import readFileTree from 'readfiletree';
import sortKeys from 'sort-keys';
import {engineOrder} from './newest-engine';
type FileTree = {[fileName: string]: string | FileTree};
type Engine = Array<{
language: string;
code: string;
}>;
interface Comparison {
engines: {
ie8?: Engine;
ie9?: Engine;
ie10?: Engine;
ie11?: Engine;
jquery: Engine;
modern?: Engine;
};
alternatives?: Record<string, string>;
}
interface Category {
comparisons: Record<string, Comparison>;
alternatives?: Record<string, string>;
}
type Comparisons = Record<string, Category>;
export default async function getComparisons(): Promise<Comparisons> {
const fileTree: FileTree = await readFileTree(
path.join(process.cwd(), 'src', 'comparisons')
);
const categories = {};
for (const [categoryName, comparisons] of Object.entries(fileTree)) {
const category: Category = {
comparisons: {}
};
if (comparisons['alternatives.json']) {
category.alternatives = JSON.parse(comparisons['alternatives.json']);
delete comparisons['alternatives.json'];
}
for (const [comparisonName, engines] of Object.entries(comparisons)) {
const comparison: Comparison = {
engines: {
jquery: [
{
language: 'js',
code: engines['jquery.js']
}
]
}
};
delete engines['jquery.js'];
if (engines['alternatives.json']) {
comparison.alternatives = JSON.parse(engines['alternatives.json']);
delete engines['alternatives.json'];
}
for (const [engineFile, code] of Object.entries(engines)) {
const [engineName, extension] = engineFile.split('.');
if (!comparison.engines[engineName]) {
comparison.engines[engineName] = [];
}
comparison.engines[engineName].push({
language: extension,
code
});
}
for (const engines of Object.values(comparison.engines)) {
// Sorted in-place
engines.sort((a, b) => {
if (a.language === 'js') {
return -1;
}
if (b.language === 'js') {
return 1;
}
return a.language.localeCompare(b.language);
});
}
comparison.engines = sortKeys(comparison.engines, {
compare: (a, b) => engineOrder.indexOf(a) - engineOrder.indexOf(b)
});
category.comparisons[comparisonName] = comparison;
}
category.comparisons = sortKeys(category.comparisons);
categories[categoryName] = category;
}
return sortKeys(categories);
}
================================================
FILE: src/lib/newest-engine.ts
================================================
export const engineOrder = ['jquery', 'ie8', 'ie9', 'ie10', 'ie11', 'modern'];
export default function getNewestEngine(
engines: string[],
targetEngine?: string
): string {
engines = [...engines];
engines.sort((a, b) => engineOrder.indexOf(b) - engineOrder.indexOf(a));
engines = engines.filter((engine) => engine !== 'jquery');
if (!targetEngine) {
return engines[0];
}
return (
engines.find(
(engine) =>
engineOrder.indexOf(engine) <= engineOrder.indexOf(targetEngine)
) || engines[0]
);
}
================================================
FILE: src/pages/index.astro
================================================
---
import classNames from '@sindresorhus/class-names';
import CodeBlock from '../components/CodeBlock.astro';
import getNewestEngine from '../lib/newest-engine';
import getComparisons from '../lib/comparisons';
import isEven from '../utils/is-even';
import titleCase from '../utils/title-case';
const comparisons = await getComparisons();
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>You Might Not Need jQuery</title>
<meta
name="description"
content="Examples of how to do common event, element, ajax and utility operations with plain javascript."
/>
<link rel="icon" href="https://static.hubspot.com/favicon.ico" />
</head>
<body>
<div class="main-wrapper">
<input id="sidebar-toggle" type="checkbox" />
<nav id="navbar">
<label id="sidebar-toggle-label" for="sidebar-toggle">
<span></span>
</label>
</nav>
<nav id="sidebar">
<ul class="sidebar-categories">
{
Object.entries(comparisons).map(([categoryName, category]) => (
<li class="sidebar-category">
<div class="sidebar-category-title">
<a href={`#${categoryName}`}>{titleCase(categoryName)}</a>
</div>
<ul class="sidebar-comparisons">
{Object.keys(category.comparisons).map((comparisonName) => (
<li class="sidebar-comparison-title">
<a href={`#${comparisonName}`}>
{titleCase(comparisonName.replaceAll('_', ' '))}
</a>
</li>
))}
</ul>
</li>
))
}
</ul>
</nav>
<main id="main-content">
<div id="top">
<header id="top-header">
<h1 class="title">You might not need jQuery</h1>
</header>
<article class="explanation">
<p>
jQuery and its cousins are great, and by all means use them if it
makes it easier to develop your application.
<br /><br />
If you're developing a library on the other hand, please take a moment
to consider if you actually need jQuery as a dependency. Maybe you
can include a few lines of utility code, and forgo the requirement.
If you're only targeting more modern browsers, you might not need anything
more than what the browser ships with.
<br /><br />
At the very least, make sure you know what <a
href="https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o"
>jQuery is doing for you</a
>, and what it's not. Some developers believe that jQuery is
protecting us from a great demon of browser incompatibility when,
in truth, post-IE8, browsers are pretty easy to deal with on their
own; and after the Internet Explorer era, the browsers do even
more.
</p>
</article>
<address class="share-buttons">
<a
href="https://github.com/HubSpot/YouMightNotNeedjQuery"
class="share-button-github"
>
<span class="share-button-github-message">★ Star on Github</span>
<span class="github-stars"></span>
</a>
</address>
<nav>
<input
id="search"
type="text"
role="searchbox"
placeholder="Search..."
required
/>
<div class="input-box">
<label for="ie-question">Do you need to support IE?</label>
<input type="checkbox" id="ie-question" name="ie-question" />
</div>
<div id="ie-version-box" class="input-box hidden">
<label for="ie-min-version"
>What's the oldest version of IE you need to support?</label
>
<div class="slider">
<input
type="range"
id="ie-min-version"
name="ie-min-version"
min={8}
max={11}
value={11}
/>
<table class="slider-labels" aria-hidden={true}>
<tr>
{
[8, 9, 10, 11].map((version) => (
<td class="slider-label ie-slider-label">{version}</td>
))
}
</tr>
</table>
</div>
</div>
</nav>
</div>
<article id="comparisons">
<div class="empty-message">
Your search didn't match any comparisons.
</div>
<div class="categories">
{
Object.entries(comparisons).map(
([categoryName, category], index) => (
<section
class={classNames('category', {
even: isEven(index)
})}
id={categoryName}
>
<header class="comparisons-header">
<h2 class="category-name">
<a href={`#${categoryName}`}>
{titleCase(categoryName)}
</a>
</h2>
{category.alternatives && (
<div class="alternatives">
<h3 class="alternatives-title">Alternatives:</h3>
<ul class="alternatives-list">
{Object.entries(category.alternatives).map(
([alternativeName, alternativeUrl]) => (
<li>
<a
href={alternativeUrl}
target="_blank"
rel="noopener"
class="alternative-link"
>
{alternativeName}
</a>
</li>
)
)}
</ul>
</div>
)}
</header>
<div class="category-comparisons">
{Object.entries(category.comparisons).map(
([comparisonName, comparison]) => {
const newestEngine = getNewestEngine(
Object.keys(comparison.engines)
);
return (
<div class="comparison" id={comparisonName}>
<header class="comparisons-header">
<h3 class="comparison-title">
<a href={`#${comparisonName}`}>
{titleCase(
comparisonName.replaceAll('_', ' ')
)}
</a>
</h3>
{comparison.alternatives && (
<div class="alternatives">
<h4 class="alternatives-title">
Alternatives:
</h4>
<ul class="alternatives-list">
{Object.entries(
comparison.alternatives
).map(
([alternativeName, alternativeUrl]) => (
<li>
<a
href={alternativeUrl}
target="_blank"
rel="noopener"
class="alternative-link"
>
{alternativeName}
</a>
</li>
)
)}
</ul>
</div>
)}
</header>
<div class="engines">
{Object.entries(comparison.engines).map(
([engineName, allCode]) => (
<div
class={classNames('engine', {
hidden:
engineName !== newestEngine &&
engineName !== 'jquery'
})}
data-engine={engineName}
>
<h4 class="engine-name">
{`${engineName}${
engineName.startsWith('ie') ? '+' : ''
}`}
</h4>
{allCode.map(({language, code}) => (
<CodeBlock
lang={language}
code={code}
/>
))}
</div>
)
)}
</div>
</div>
);
}
)}
</div>
</section>
)
)
}
</div>
</article>
<footer>
<p>
Made by <span id="credit-a"></span>, <span id="credit-b"></span> and
some engineer gamers at <a href="https://dev.hubspot.com">HubSpot</a
>.
</p>
</footer>
</main>
</div>
<style is:global lang="scss">
@use 'modern-normalize';
@use 'prismjs/themes/prism.css';
</style>
<style lang="scss">
$border-color: #eee;
$sidebar-width: 300px;
$sidebar-collapsed-screen-width: 828px;
$navbar-height: 60px;
$transition-duration: 0.25s;
::placeholder {
color: rgba(0, 0, 0, 0.5);
}
html {
scroll-behavior: smooth;
scroll-padding-top: $navbar-height;
}
body {
font-family: system-ui, sans-serif;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
}
.hidden {
display: none !important;
}
.main-wrapper {
width: 100%;
}
#sidebar-toggle {
display: none;
}
#sidebar-toggle:checked ~ #sidebar {
left: 0;
}
#sidebar-toggle:checked ~ #main-content {
margin-left: $sidebar-width;
}
#sidebar-toggle-label {
position: fixed;
z-index: 2;
top: 16px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
span,
span::before,
span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #333;
transition-duration: $transition-duration;
top: 50%;
}
span::before {
content: '';
top: -8px;
}
span::after {
content: '';
top: 8px;
}
}
#sidebar-toggle:checked + #navbar {
#sidebar-toggle-label span {
transform: rotate(45deg);
&::before {
top: 0;
transform: rotate(0deg);
}
&::after {
top: 0;
transform: rotate(90deg);
}
}
}
#navbar {
position: fixed;
left: 0;
right: 0;
background-color: #fff;
height: $navbar-height;
border-bottom: 1px solid $border-color;
z-index: 1;
display: block;
}
#sidebar {
flex: 0;
background-color: #fff;
z-index: 1;
width: $sidebar-width;
position: fixed;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
padding: 2em;
transition-duration: $transition-duration;
margin-top: $navbar-height;
border-right: 1px solid $border-color;
left: -100%;
@media screen and (max-width: $sidebar-collapsed-screen-width) {
width: 100%;
}
ul {
list-style: none;
padding-left: 0;
}
a {
display: block;
padding: 4px;
text-decoration: none;
color: inherit;
&.active {
background: rgba(0, 0, 0, 0.1);
}
&:hover {
background: rgba(0, 0, 0, 0.05);
}
}
.sidebar-category {
margin-bottom: 1em;
.sidebar-category-title {
font-size: 20px;
}
.sidebar-comparison-title {
color: #666;
}
.sidebar-category-title,
.sidebar-comparison-title {
font-weight: 300;
}
}
}
#main-content {
align-items: center;
display: flex;
flex-direction: column;
margin-left: 0;
margin-top: $navbar-height;
transition-duration: $transition-duration;
}
#top {
display: flex;
flex-direction: column;
max-width: 40rem;
gap: 2rem;
margin-left: 16px;
margin-right: 16px;
margin-top: 4rem;
margin-bottom: 3rem;
@media (max-width: 42rem) {
margin-top: 16px;
}
#top-header {
text-align: center;
.title {
padding: 2rem 2rem;
border: 0.25rem solid;
font-size: 2.5rem;
font-weight: 300;
margin: 0;
line-height: 1;
}
}
.explanation {
max-width: 100%;
a {
color: inherit;
text-decoration: none;
box-shadow: inset 0 -0.125rem;
}
p {
margin: 0;
}
}
.share-buttons {
display: flex;
justify-content: center;
.share-button-github {
display: flex;
color: inherit;
margin-left: auto;
margin-right: auto;
text-decoration: none;
font-style: normal;
> span {
border: 1px solid #ccc;
padding: 0.5rem 0.8rem;
&.share-button-github-message {
margin-right: -1px;
background: #eee;
}
&.github-stars {
text-align: center;
min-width: 3rem;
&:empty::after {
content: '···';
}
}
}
}
}
nav {
display: flex;
flex-direction: column;
gap: 10px;
#search {
max-width: 40rem;
border: 0;
font-family: inherit;
font-weight: 400;
color: inherit;
background: rgba(0, 0, 0, 0.1);
width: 100%;
padding: 1rem;
&:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
}
}
@media print {
display: none;
}
}
.input-box {
display: flex;
justify-content: space-between;
align-items: center;
input[type='checkbox'] {
height: 20px;
width: 20px;
}
input {
accent-color: black;
}
.slider {
.slider-labels {
border-collapse: collapse;
min-width: 100%;
margin-left: 3px;
margin-right: 3px;
.slider-label {
text-align: center;
&:first-child {
text-align: left;
}
&:last-child {
text-align: right;
}
&.ie-slider-label {
// 25% for each of the 4 versions
width: 25%;
&.ie-slider-label:nth-child(2) {
padding-right: 12px;
}
}
}
}
}
}
}
#comparisons {
width: 100%;
.empty-message {
text-align: center;
background: #eee;
padding-top: 5.5rem;
padding-bottom: 5.5rem;
font-weight: 500;
font-size: 1.2rem;
display: none;
}
&.no-search-results {
.empty-message {
display: block;
}
}
.categories {
.comparisons-header {
display: flex;
flex-direction: column;
gap: 10px;
}
.category {
padding-top: 5.5rem;
padding-bottom: 5.5rem;
padding-left: 16px;
padding-right: 16px;
display: flex;
flex-direction: column;
gap: 5.5rem;
@mixin section-symbol {
// :after is used to ensure the text is centered - this is never shown
&:before,
&:after {
content: '§';
visibility: hidden;
}
&:hover:before {
visibility: visible;
}
}
.category-name {
font-size: 3rem;
font-weight: 200;
letter-spacing: 1rem;
text-transform: uppercase;
color: #888;
text-align: center;
margin: 0;
word-wrap: break-word;
a {
color: inherit;
text-decoration: none;
@include section-symbol;
// At such a small screen size, we have to remove this text so that the title remains centered
@media (max-width: 28rem) {
&:before,
&:after {
content: '';
}
}
}
}
.category-comparisons {
display: flex;
flex-direction: column;
gap: 5.5rem;
.comparison {
display: flex;
flex-direction: column;
gap: 16px;
.comparison-title {
text-align: center;
font-size: 2em;
font-weight: normal;
margin: 0;
a {
color: inherit;
text-decoration: none;
@include section-symbol;
}
}
}
}
.alternatives {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
.alternatives-title {
font-size: 1.1rem;
font-weight: 300;
color: #666;
letter-spacing: 0.07em;
font-size: 1.4em;
text-transform: uppercase;
margin: 0;
line-height: 1;
word-wrap: break-word;
}
.alternatives-list {
margin: 0;
font-size: 1.1em;
list-style: none;
padding: 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
.alternative-link {
color: inherit;
text-decoration-thickness: 3px;
text-decoration-line: underline;
text-decoration-skip-ink: none;
}
}
}
&.even {
background: #eee;
:global(.code) {
background: white;
}
}
.engines {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
margin: 0 auto;
width: 100%;
.engine {
width: 30rem;
min-width: 0;
.engine-name {
font-weight: 300;
color: #666;
letter-spacing: 0.07em;
font-size: 1.4em;
text-transform: uppercase;
margin-bottom: 0;
margin-top: 8px;
line-height: 1;
}
}
}
}
}
}
footer {
margin: 3em auto;
font-size: 1.4em;
text-align: center;
padding-left: 16px;
padding-right: 16px;
a {
color: inherit;
}
}
</style>
<script>
import getNewestEngine from '../lib/newest-engine';
import isEven from '../utils/is-even';
import throttle from '../utils/throttle';
const adamfschwartz = document.createElement('a');
adamfschwartz.href = 'https://twitter.com/adamfschwartz';
adamfschwartz.textContent = '@adamfschwartz';
adamfschwartz.style.color = 'inherit';
const zackbloom = document.createElement('a');
zackbloom.href = 'https://twitter.com/zackbloom';
zackbloom.textContent = '@zackbloom';
zackbloom.style.color = 'inherit';
const creditA = document.querySelector('#credit-a');
const creditB = document.querySelector('#credit-b');
if (Math.random() >= 0.5) {
creditA.replaceWith(adamfschwartz);
creditB.replaceWith(zackbloom);
} else {
creditA.replaceWith(zackbloom);
creditB.replaceWith(adamfschwartz);
}
const searchInput: HTMLInputElement = document.querySelector('#search');
const comparisonsParent = document.querySelector('#comparisons');
const versionBox = document.querySelector('#ie-version-box');
const ieQuestion =
document.querySelector<HTMLInputElement>('#ie-question');
const ieMinVersion =
document.querySelector<HTMLInputElement>('#ie-min-version');
document.addEventListener('keydown', (event) => {
if (event.key === '/' && searchInput !== document.activeElement) {
event.preventDefault(); // Firefox uses this for quick find
searchInput.focus();
}
});
function resetResults() {
comparisonsParent.classList.remove('no-search-results');
for (const hiddenCategoryOrComparison of document.querySelectorAll(
'.category.hidden, .comparison.hidden'
)) {
hiddenCategoryOrComparison.classList.remove('hidden');
}
for (const [index, category] of document
.querySelectorAll('.category')
.entries()) {
category.classList.toggle('even', isEven(index));
}
}
searchInput.addEventListener('input', (event) => {
const query = (event.target as HTMLInputElement).value.toLowerCase();
resetResults();
if (query.length === 0) {
return;
}
const categories = document.querySelectorAll('.category');
let hiddenCategories = 0;
for (const [index, category] of categories.entries()) {
const comparisons = category.querySelectorAll('.comparison');
let hiddenComparisons = 0;
for (const comparison of comparisons) {
if (!comparison.textContent.toLowerCase().includes(query)) {
comparison.classList.add('hidden');
hiddenComparisons++;
}
}
if (hiddenComparisons === comparisons.length) {
category.classList.add('hidden');
hiddenCategories++;
}
{
category.classList.toggle('even', isEven(index - hiddenCategories));
}
}
if (hiddenCategories === categories.length) {
comparisonsParent.classList.add('no-search-results');
}
});
function setQueryString(supportedVersion?: string) {
if (supportedVersion) {
const urlParams = new URLSearchParams(location.search);
urlParams.set('support', supportedVersion);
history.replaceState({}, '', '?' + urlParams);
} else {
history.replaceState({}, '', location.pathname);
}
}
function updateEngines(targetVersion?: string) {
setQueryString(targetVersion);
for (const engine of document.querySelectorAll(
'[data-engine].hidden'
)) {
engine.classList.remove('hidden');
}
for (const engines of document.querySelectorAll('.engines')) {
const engineElements = [
...engines.querySelectorAll<HTMLDivElement>(
`[data-engine=ie8], [data-engine=ie9], [data-engine=ie10], [data-engine=ie11], [data-engine=modern]`
)
];
const bestEngine = getNewestEngine(
engineElements.map((engine) => engine.dataset.engine),
targetVersion
);
for (const engine of engines.querySelectorAll(
`.engine:not([data-engine=${bestEngine}]):not([data-engine=jquery])`
)) {
engine.classList.add('hidden');
}
}
}
function getInitialSliderState(): string | undefined {
const urlParams = new URLSearchParams(location.search);
return urlParams.get('support');
}
const initialSliderState = getInitialSliderState();
if (initialSliderState) {
if (initialSliderState.includes('ie')) {
ieQuestion.checked = true;
ieMinVersion.value = initialSliderState.replace('ie', '');
versionBox.classList.remove('hidden');
}
updateEngines(initialSliderState);
}
ieQuestion.addEventListener('change', () => {
const isChecked = ieQuestion.checked;
versionBox.classList.toggle('hidden', !isChecked);
if (isChecked) {
updateEngines(`ie${ieMinVersion.value}`);
} else {
updateEngines();
}
});
ieMinVersion.addEventListener('change', () => {
updateEngines(`ie${ieMinVersion.value}`);
});
function findActiveCategoryOrComparison(): string | undefined {
let closestElementY = 0;
let anchor: string;
// First, check category names
for (let el of document.querySelectorAll('.category-name')) {
const elementY = (el as HTMLElement).offsetTop;
// Element is hidden
if (elementY === 0) {
continue;
}
if (elementY >= window.scrollY) {
closestElementY = elementY;
anchor = el.querySelector('a').href.split('#').pop();
break;
}
}
for (let el of document.querySelectorAll('.comparison-title')) {
const elementY = (el as HTMLElement).offsetTop;
// Don't evaluate nodes beyond the closest category
if (elementY > closestElementY) {
break;
}
// Element is hidden
if (elementY === 0) {
continue;
}
const diff = elementY - window.scrollY;
const isCloser =
diff >= 0 &&
(!closestElementY || diff < closestElementY - window.scrollY);
if (isCloser) {
anchor = el.querySelector('a').href.split('#').pop();
break;
}
}
return anchor;
}
function markSidebarAnchorActive(anchorName?: string) {
// Clear out active anchors first
const sidebar: HTMLDivElement = document.querySelector('#sidebar');
sidebar.querySelectorAll('a').forEach((el) => {
if (!anchorName || el.href !== `#${anchorName}`)
el.classList.remove('active');
});
if (anchorName) {
const maybeAnchor: HTMLAnchorElement | null = sidebar.querySelector(
`a[href='#${anchorName}']`
);
if (maybeAnchor) {
maybeAnchor.classList.add('active');
}
}
}
window.addEventListener(
'scroll',
throttle(() => {
const activeCategoryOrComparison = findActiveCategoryOrComparison();
markSidebarAnchorActive(activeCategoryOrComparison);
}, 100)
);
const activeCategoryOrComparison = findActiveCategoryOrComparison();
markSidebarAnchorActive(activeCategoryOrComparison);
function readLocalStorage<T>(key: string, defaultValue: T): T {
try {
const rawItem = window.localStorage.getItem(key);
if (rawItem == null) return defaultValue;
return JSON.parse(rawItem);
} catch (err) {
return defaultValue;
}
}
function writeLocalStorage<T>(key: string, value: T) {
try {
window.localStorage.setItem(key, JSON.stringify(value));
} catch (err) {
// Swallow error
}
}
const MOBILE_WIDTH = 828;
const sidebar: HTMLDivElement = document.querySelector('#sidebar');
const sidebarToggle: HTMLInputElement =
document.querySelector('#sidebar-toggle');
const SIDEBAR_LOCAL_STORAGE_KEY = 'sidebar-open';
const sidebarDefaultChecked = readLocalStorage(
SIDEBAR_LOCAL_STORAGE_KEY,
// Default the sidebar toggle open when on larger screens
window.innerWidth >= MOBILE_WIDTH
);
sidebarToggle.checked = sidebarDefaultChecked;
sidebarToggle.addEventListener('change', () => {
const isChecked = sidebarToggle.checked;
writeLocalStorage(SIDEBAR_LOCAL_STORAGE_KEY, isChecked);
});
sidebar.querySelectorAll('a').forEach((el) => {
el.addEventListener('click', () => {
const sidebarToggle: HTMLInputElement =
document.querySelector('#sidebar-toggle');
// Only close the sidebar automatically on mobile
if (window.innerWidth < MOBILE_WIDTH) {
sidebarToggle.checked = false;
}
});
});
const numberFormat = new Intl.NumberFormat('en-US');
const starsText = document.querySelector('.github-stars');
async function getStars(): Promise<number> {
const response = await fetch(
'https://api.github.com/repos/HubSpot/youmightnotneedjquery'
);
if (!response.ok) {
throw new Error('Failed to fetch GitHub stars');
}
const {stargazers_count: stars} = await response.json();
return stars;
}
try {
starsText.textContent = numberFormat.format(await getStars());
} catch {
starsText.textContent = '10k+';
}
</script>
</body>
</html>
================================================
FILE: src/utils/is-even.ts
================================================
export default function isEven(value: number) {
// This is a certified hood classic
return value % 2 === 0;
}
================================================
FILE: src/utils/throttle.ts
================================================
/**
* Throttle function with a trailing edge.
*
* @param func function to execute
* @param wait time in milliseconds to wait before calling again
* @returns
*/
export default function throttle(func: () => void, wait: number = 100) {
let context: any, args: any;
let waiting = false;
let doTrailing = false;
return function () {
context = this;
args = arguments;
if (!waiting) {
func.apply(context, args);
waiting = true;
window.setTimeout(function () {
if (doTrailing) {
func.apply(context, args);
}
waiting = false;
doTrailing = false;
context = args = null;
}, wait);
} else {
doTrailing = true;
}
};
}
================================================
FILE: src/utils/title-case.ts
================================================
const capsWords = ['JSON', 'HTML', 'AJAX'];
export default function titleCase(str: string) {
return str
.replace(
/(^|\b)([a-z])([a-z]+)/g,
(_match, space, first, rest) => `${space}${first.toUpperCase()}${rest}`
)
.replace(new RegExp(`(${capsWords.join('|')})`, 'ig'), (_match, word) =>
word.toUpperCase()
);
}
gitextract_5m9lppc8/
├── .editorconfig
├── .github/
│ └── workflows/
│ └── build.yml
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── astro.config.ts
├── package.json
└── src/
├── comparisons/
│ ├── ajax/
│ │ ├── alternatives.json
│ │ ├── json/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── load/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── post/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ └── request/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── effects/
│ │ ├── alternatives.json
│ │ ├── fade_in/
│ │ │ ├── ie10.css
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ ├── modern.css
│ │ │ └── modern.js
│ │ ├── fade_out/
│ │ │ ├── ie10.css
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ ├── modern.css
│ │ │ └── modern.js
│ │ ├── hide/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── show/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ └── toggle/
│ │ ├── ie8.js
│ │ └── jquery.js
│ ├── elements/
│ │ ├── add_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── after/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── alternatives.json
│ │ ├── append/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── append_to/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── before/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── children/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── clone/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── closest/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── contains/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── contains_selector/
│ │ │ ├── alternatives.json
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── contents/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── create_elements/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── each/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── empty/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── filter/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── find_children/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── find_elements/
│ │ │ ├── alternatives.json
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── find_selector/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── first/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_attributes/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_height/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── get_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_outer_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── get_style/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── get_text/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── get_width/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── has_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── index/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── inner_height/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── inner_width/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── is_hidden/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── is_visible/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── last/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── matches/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── matches_selector/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── next/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── offset/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── offset_parent/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── outer_height/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── outer_height_with_margin/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── outer_width/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── outer_width_with_margin/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── parent/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── parents/
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── position/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── position_relative_to_viewport/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── prepend/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── prev/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── remove/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── remove_attributes/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── remove_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── replace_from_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── scroll_left/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── scroll_top/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── serialize/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── set_attributes/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_height/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_html/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_style/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── set_text/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── set_width/
│ │ │ ├── ie8.js
│ │ │ └── jquery.js
│ │ ├── siblings/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── toggle_class/
│ │ │ ├── ie10.js
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── unwrap/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── val/
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ └── wrap/
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── events/
│ │ ├── alternatives.json
│ │ ├── click/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── delegate/
│ │ │ ├── ie8.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── off/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ └── jquery.js
│ │ ├── on/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── ready/
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ ├── trigger_custom/
│ │ │ ├── alternatives.json
│ │ │ ├── ie8.js
│ │ │ ├── ie9.js
│ │ │ ├── jquery.js
│ │ │ └── modern.js
│ │ └── trigger_native/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ └── utils/
│ ├── array_each/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── bind/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── deep_extend/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── extend/
│ │ ├── alternatives.json
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── index_of/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── is_array/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── is_numeric/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── map/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── now/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── object_each/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── parse_html/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── parse_json/
│ │ ├── ie8.js
│ │ └── jquery.js
│ ├── slice/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ ├── to_array/
│ │ ├── ie8.js
│ │ ├── jquery.js
│ │ └── modern.js
│ ├── trim/
│ │ ├── ie8.js
│ │ ├── ie9.js
│ │ └── jquery.js
│ └── type/
│ ├── ie8.js
│ └── jquery.js
├── components/
│ └── CodeBlock.astro
├── env.d.ts
├── lib/
│ ├── comparisons.ts
│ └── newest-engine.ts
├── pages/
│ └── index.astro
└── utils/
├── is-even.ts
├── throttle.ts
└── title-case.ts
SYMBOL INDEX (77 symbols across 72 files)
FILE: src/comparisons/ajax/load/ie8.js
function load (line 1) | function load(selector, path) {
FILE: src/comparisons/ajax/request/ie8.js
function request (line 1) | function request(success, error) {
FILE: src/comparisons/ajax/request/ie9.js
function request (line 1) | function request(success, error) {
FILE: src/comparisons/effects/fade_in/ie8.js
function fadeIn (line 1) | function fadeIn(el, speed = 400) {
FILE: src/comparisons/effects/fade_in/ie9.js
function fadeIn (line 1) | function fadeIn(el, speed = 400) {
FILE: src/comparisons/effects/fade_out/ie8.js
function fadeOut (line 1) | function fadeOut(el, speed = 400) {
FILE: src/comparisons/effects/fade_out/ie9.js
function fadeOut (line 1) | function fadeOut(el, speed = 400) {
FILE: src/comparisons/effects/toggle/ie8.js
function toggle (line 1) | function toggle(el) {
FILE: src/comparisons/elements/closest/ie8.js
function closest (line 1) | function closest(el, sel) {
FILE: src/comparisons/elements/closest/ie9.js
function closest (line 1) | function closest(el, sel) {
FILE: src/comparisons/elements/create_elements/ie8.js
function generateElements (line 1) | function generateElements(html) {
FILE: src/comparisons/elements/create_elements/modern.js
function generateElements (line 1) | function generateElements(html) {
FILE: src/comparisons/elements/each/ie8.js
function forEachElement (line 1) | function forEachElement(selector, fn) {
FILE: src/comparisons/elements/filter/ie8.js
function filter (line 1) | function filter(selector, filterFn) {
FILE: src/comparisons/elements/get_height/ie8.js
function getHeight (line 1) | function getHeight(el) {
FILE: src/comparisons/elements/get_width/ie8.js
function getWidth (line 1) | function getWidth(el) {
FILE: src/comparisons/elements/index/ie8.js
function index (line 1) | function index(el) {
FILE: src/comparisons/elements/index/ie9.js
function index (line 1) | function index(el) {
FILE: src/comparisons/elements/inner_height/modern.js
function innerHeight (line 1) | function innerHeight(el, value) {
FILE: src/comparisons/elements/inner_width/modern.js
function innerWidth (line 1) | function innerWidth(el, value) {
FILE: src/comparisons/elements/is_hidden/modern.js
function isHidden (line 1) | function isHidden(el) {
FILE: src/comparisons/elements/is_visible/modern.js
function isVisible (line 1) | function isVisible(el) {
FILE: src/comparisons/elements/next/ie8.js
function nextElementSibling (line 2) | function nextElementSibling(el) {
FILE: src/comparisons/elements/next/modern.js
function next (line 1) | function next(el, selector) {
FILE: src/comparisons/elements/offset/ie8.js
function offset (line 1) | function offset(el) {
FILE: src/comparisons/elements/offset/ie9.js
function offset (line 1) | function offset(el) {
FILE: src/comparisons/elements/outer_height_with_margin/ie8.js
function outerHeight (line 1) | function outerHeight(el) {
FILE: src/comparisons/elements/outer_height_with_margin/ie9.js
function outerHeight (line 1) | function outerHeight(el) {
FILE: src/comparisons/elements/outer_height_with_margin/modern.js
function outerHeight (line 1) | function outerHeight(el) {
FILE: src/comparisons/elements/outer_width_with_margin/ie8.js
function outerWidth (line 1) | function outerWidth(el) {
FILE: src/comparisons/elements/outer_width_with_margin/ie9.js
function outerWidth (line 1) | function outerWidth(el) {
FILE: src/comparisons/elements/outer_width_with_margin/modern.js
function outerWidth (line 1) | function outerWidth(el) {
FILE: src/comparisons/elements/parents/ie9.js
function parents (line 1) | function parents(el, selector) {
FILE: src/comparisons/elements/parents/modern.js
function parents (line 1) | function parents(el, selector) {
FILE: src/comparisons/elements/position/ie8.js
function position (line 1) | function position(el) {
FILE: src/comparisons/elements/position/modern.js
function position (line 1) | function position(el) {
FILE: src/comparisons/elements/position_relative_to_viewport/jquery.js
function offset (line 1) | function offset(el) {
FILE: src/comparisons/elements/prev/ie8.js
function previousElementSibling (line 2) | function previousElementSibling(el) {
FILE: src/comparisons/elements/prev/modern.js
function prev (line 1) | function prev(el, selector) {
FILE: src/comparisons/elements/remove_class/ie8.js
function removeClass (line 1) | function removeClass(el, className) {
FILE: src/comparisons/elements/scroll_left/modern.js
function scrollLeft (line 1) | function scrollLeft(el, value) {
FILE: src/comparisons/elements/scroll_top/modern.js
function scrollTop (line 1) | function scrollTop(el, value) {
FILE: src/comparisons/elements/set_height/ie8.js
function setHeight (line 1) | function setHeight(el, val) {
FILE: src/comparisons/elements/set_width/ie8.js
function setWidth (line 1) | function setWidth(el, val) {
FILE: src/comparisons/elements/val/modern.js
function val (line 1) | function val(el) {
FILE: src/comparisons/elements/wrap/modern.js
function wrap (line 1) | function wrap(el) {
FILE: src/comparisons/events/off/ie8.js
function removeEventListener (line 1) | function removeEventListener(el, eventName, handler) {
FILE: src/comparisons/events/on/ie8.js
function addEventListener (line 1) | function addEventListener(el, eventName, handler) {
FILE: src/comparisons/events/on/ie9.js
function addEventListener (line 1) | function addEventListener(el, eventName, eventHandler, selector) {
FILE: src/comparisons/events/on/modern.js
function addEventListener (line 1) | function addEventListener(el, eventName, eventHandler, selector) {
FILE: src/comparisons/events/ready/ie8.js
function ready (line 1) | function ready(fn) {
FILE: src/comparisons/events/ready/ie9.js
function ready (line 1) | function ready(fn) {
FILE: src/comparisons/events/ready/modern.js
function ready (line 1) | function ready(fn) {
FILE: src/comparisons/events/trigger_native/ie8.js
function trigger (line 1) | function trigger(el, eventType) {
FILE: src/comparisons/events/trigger_native/ie9.js
function trigger (line 1) | function trigger(el, eventType) {
FILE: src/comparisons/events/trigger_native/modern.js
function trigger (line 1) | function trigger(el, eventType) {
FILE: src/comparisons/utils/array_each/ie8.js
function forEach (line 1) | function forEach(array, fn) {
FILE: src/comparisons/utils/deep_extend/ie8.js
function deepExtend (line 1) | function deepExtend(out) {
FILE: src/comparisons/utils/deep_extend/modern.js
function deepExtend (line 1) | function deepExtend(out, ...arguments_) {
FILE: src/comparisons/utils/index_of/ie8.js
function indexOf (line 1) | function indexOf(array, item) {
FILE: src/comparisons/utils/is_numeric/ie8.js
function isNumeric (line 1) | function isNumeric(num) {
FILE: src/comparisons/utils/is_numeric/modern.js
function isNumeric (line 1) | function isNumeric(num) {
FILE: src/comparisons/utils/map/ie8.js
function map (line 1) | function map(arr, fn) {
FILE: src/comparisons/utils/object_each/ie8.js
function objectEach (line 1) | function objectEach(obj, callback) {
FILE: src/comparisons/utils/parse_html/modern.js
function parseHTML (line 1) | function parseHTML(str) {
FILE: src/comparisons/utils/slice/ie8.js
function slice (line 1) | function slice(els, start, end) {
FILE: src/comparisons/utils/to_array/ie8.js
function toArray (line 1) | function toArray(selector) {
FILE: src/lib/comparisons.ts
type FileTree (line 7) | type FileTree = {[fileName: string]: string | FileTree};
type Engine (line 9) | type Engine = Array<{
type Comparison (line 14) | interface Comparison {
type Category (line 26) | interface Category {
type Comparisons (line 31) | type Comparisons = Record<string, Category>;
function getComparisons (line 33) | async function getComparisons(): Promise<Comparisons> {
FILE: src/lib/newest-engine.ts
function getNewestEngine (line 3) | function getNewestEngine(
FILE: src/utils/is-even.ts
function isEven (line 1) | function isEven(value: number) {
FILE: src/utils/throttle.ts
function throttle (line 8) | function throttle(func: () => void, wait: number = 100) {
FILE: src/utils/title-case.ts
function titleCase (line 3) | function titleCase(str: string) {
Condensed preview — 314 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (103K chars).
[
{
"path": ".editorconfig",
"chars": 148,
"preview": "[*]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\nindent_size = 2\ntrim_trailing_whitespace = true\n\n["
},
{
"path": ".github/workflows/build.yml",
"chars": 732,
"preview": "on:\n push:\n branches:\n - dev\n pull_request:\n\njobs:\n build:\n name: Build\n runs-on: ubuntu-latest\n\n st"
},
{
"path": ".gitignore",
"chars": 61,
"preview": "node_modules\n.DS_Store\n.vscode\n.idea\n\n# Generated files\ndist\n"
},
{
"path": ".prettierignore",
"chars": 25,
"preview": "# Generated files\ndist/*\n"
},
{
"path": ".prettierrc.json",
"chars": 120,
"preview": "{\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"bracketSpacing\": false,\n \"plugins\": [\"prettier-plugin-astro\"]\n}\n"
},
{
"path": "LICENSE",
"chars": 1058,
"preview": "Copyright (c) 2014 HubSpot, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this s"
},
{
"path": "README.md",
"chars": 829,
"preview": "# You Might Not Need jQuery\n\n![Build Workflow](https://github.com/HubSpot/youmightnotneedjquery/actions/workflows/build."
},
{
"path": "astro.config.ts",
"chars": 146,
"preview": "import {defineConfig} from 'astro/config';\nimport compress from 'astro-compress';\n\nexport default defineConfig({\n integ"
},
{
"path": "package.json",
"chars": 491,
"preview": "{\n \"private\": true,\n \"scripts\": {\n \"dev\": \"astro dev\",\n \"build\": \"astro build\",\n \"format\": \"prettier -w .\"\n "
},
{
"path": "src/comparisons/ajax/alternatives.json",
"chars": 49,
"preview": "{\n \"fetch\": \"https://github.com/github/fetch\"\n}\n"
},
{
"path": "src/comparisons/ajax/json/ie10.js",
"chars": 393,
"preview": "var request = new XMLHttpRequest();\nrequest.open('GET', '/my/url', true);\n\nrequest.onload = function () {\n if (this.sta"
},
{
"path": "src/comparisons/ajax/json/ie8.js",
"chars": 343,
"preview": "var request = new XMLHttpRequest();\nrequest.open('GET', '/my/url', true);\n\nrequest.onreadystatechange = function () {\n "
},
{
"path": "src/comparisons/ajax/json/ie9.js",
"chars": 406,
"preview": "var request = new XMLHttpRequest();\nrequest.open('GET', '/my/url', true);\n\nrequest.onload = function () {\n if (request."
},
{
"path": "src/comparisons/ajax/json/jquery.js",
"chars": 42,
"preview": "$.getJSON('/my/url', function (data) {});\n"
},
{
"path": "src/comparisons/ajax/json/modern.js",
"chars": 77,
"preview": "const response = await fetch('/my/url');\nconst data = await response.json();\n"
},
{
"path": "src/comparisons/ajax/load/ie8.js",
"chars": 535,
"preview": "function load(selector, path) {\n var request = new XMLHttpRequest();\n request.open('GET', path, true);\n request.onrea"
},
{
"path": "src/comparisons/ajax/load/jquery.js",
"chars": 52,
"preview": "$('#some.selector').load('/path/to/template.html');\n"
},
{
"path": "src/comparisons/ajax/load/modern.js",
"chars": 152,
"preview": "const response = await fetch('/path/to/template.html');\nconst body = await response.text();\n\ndocument.querySelector('#so"
},
{
"path": "src/comparisons/ajax/post/ie8.js",
"chars": 195,
"preview": "var request = new XMLHttpRequest();\nrequest.open('POST', '/my/url', true);\nrequest.setRequestHeader(\n 'Content-Type',\n "
},
{
"path": "src/comparisons/ajax/post/jquery.js",
"chars": 60,
"preview": "$.ajax({\n type: 'POST',\n url: '/my/url',\n data: data\n});\n"
},
{
"path": "src/comparisons/ajax/post/modern.js",
"chars": 133,
"preview": "await fetch('/my/url', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringi"
},
{
"path": "src/comparisons/ajax/request/ie8.js",
"chars": 433,
"preview": "function request(success, error) {\n var request = new XMLHttpRequest();\n request.open('GET', '/my/url', true);\n\n requ"
},
{
"path": "src/comparisons/ajax/request/ie9.js",
"chars": 487,
"preview": "function request(success, error) {\n var request = new XMLHttpRequest();\n request.open('GET', '/my/url', true);\n\n requ"
},
{
"path": "src/comparisons/ajax/request/jquery.js",
"chars": 101,
"preview": "$.ajax({\n type: 'GET',\n url: '/my/url',\n success: function (resp) {},\n error: function () {}\n});\n"
},
{
"path": "src/comparisons/ajax/request/modern.js",
"chars": 101,
"preview": "const response = await fetch('/my/url');\n\nif (!response.ok) {\n}\n\nconst body = await response.text();\n"
},
{
"path": "src/comparisons/effects/alternatives.json",
"chars": 158,
"preview": "{\n \"animate.css\": \"https://animate.style\",\n \"move.js\": \"https://github.com/visionmedia/move.js\",\n \"velocity.js\": \"htt"
},
{
"path": "src/comparisons/effects/fade_in/ie10.css",
"chars": 63,
"preview": ".show {\n transition: opacity 400ms;\n}\n.hide {\n opacity: 0;\n}\n"
},
{
"path": "src/comparisons/effects/fade_in/ie10.js",
"chars": 55,
"preview": "el.classList.add('show');\nel.classList.remove('hide');\n"
},
{
"path": "src/comparisons/effects/fade_in/ie8.js",
"chars": 523,
"preview": "function fadeIn(el, speed = 400) {\n var opacity = 0;\n\n el.style.opacity = 0;\n el.style.filter = '';\n\n var last = +ne"
},
{
"path": "src/comparisons/effects/fade_in/ie9.js",
"chars": 415,
"preview": "function fadeIn(el, speed = 400) {\n el.style.opacity = 0;\n\n var last = +new Date();\n var tick = function () {\n el."
},
{
"path": "src/comparisons/effects/fade_in/jquery.js",
"chars": 16,
"preview": "$(el).fadeIn();\n"
},
{
"path": "src/comparisons/effects/fade_in/modern.css",
"chars": 63,
"preview": ".show {\n transition: opacity 400ms;\n}\n.hide {\n opacity: 0;\n}\n"
},
{
"path": "src/comparisons/effects/fade_in/modern.js",
"chars": 38,
"preview": "el.classList.replace('hide', 'show');\n"
},
{
"path": "src/comparisons/effects/fade_out/ie10.css",
"chars": 77,
"preview": ".show {\n opacity: 1;\n}\n.hide {\n opacity: 0;\n transition: opacity 400ms;\n}\n"
},
{
"path": "src/comparisons/effects/fade_out/ie10.js",
"chars": 55,
"preview": "el.classList.add('hide');\nel.classList.remove('show');\n"
},
{
"path": "src/comparisons/effects/fade_out/ie8.js",
"chars": 518,
"preview": "function fadeOut(el, speed = 400) {\n var opacity = 1;\n\n el.style.opacity = 1;\n el.style.filter = '';\n\n var last = +n"
},
{
"path": "src/comparisons/effects/fade_out/ie9.js",
"chars": 417,
"preview": "function fadeOut(el, speed = 400) {\n el.style.opacity = 1;\n\n var last = +new Date();\n var tick = function () {\n el"
},
{
"path": "src/comparisons/effects/fade_out/jquery.js",
"chars": 17,
"preview": "$(el).fadeOut();\n"
},
{
"path": "src/comparisons/effects/fade_out/modern.css",
"chars": 77,
"preview": ".show {\n opacity: 1;\n}\n.hide {\n opacity: 0;\n transition: opacity 400ms;\n}\n"
},
{
"path": "src/comparisons/effects/fade_out/modern.js",
"chars": 38,
"preview": "el.classList.replace('show', 'hide');\n"
},
{
"path": "src/comparisons/effects/hide/ie8.js",
"chars": 27,
"preview": "el.style.display = 'none';\n"
},
{
"path": "src/comparisons/effects/hide/jquery.js",
"chars": 14,
"preview": "$(el).hide();\n"
},
{
"path": "src/comparisons/effects/show/ie8.js",
"chars": 23,
"preview": "el.style.display = '';\n"
},
{
"path": "src/comparisons/effects/show/jquery.js",
"chars": 14,
"preview": "$(el).show();\n"
},
{
"path": "src/comparisons/effects/toggle/ie8.js",
"chars": 133,
"preview": "function toggle(el) {\n if (el.style.display == 'none') {\n el.style.display = '';\n } else {\n el.style.display = '"
},
{
"path": "src/comparisons/effects/toggle/jquery.js",
"chars": 16,
"preview": "$(el).toggle();\n"
},
{
"path": "src/comparisons/elements/add_class/ie10.js",
"chars": 29,
"preview": "el.classList.add(className);\n"
},
{
"path": "src/comparisons/elements/add_class/ie8.js",
"chars": 332,
"preview": "if (el.classList) {\n el.classList.add(className);\n} else {\n var current = el.className,\n found = false;\n var all ="
},
{
"path": "src/comparisons/elements/add_class/jquery.js",
"chars": 27,
"preview": "$(el).addClass(className);\n"
},
{
"path": "src/comparisons/elements/after/ie8.js",
"chars": 51,
"preview": "target.insertAdjacentElement('afterend', element);\n"
},
{
"path": "src/comparisons/elements/after/jquery.js",
"chars": 26,
"preview": "$(target).after(element);\n"
},
{
"path": "src/comparisons/elements/after/modern.js",
"chars": 23,
"preview": "target.after(element);\n"
},
{
"path": "src/comparisons/elements/alternatives.json",
"chars": 96,
"preview": "{\n \"bonzo\": \"https://github.com/ded/bonzo\",\n \"$dom\": \"https://github.com/julienw/dollardom\"\n}\n"
},
{
"path": "src/comparisons/elements/append/ie8.js",
"chars": 24,
"preview": "parent.appendChild(el);\n"
},
{
"path": "src/comparisons/elements/append/jquery.js",
"chars": 22,
"preview": "$(parent).append(el);\n"
},
{
"path": "src/comparisons/elements/append/modern.js",
"chars": 19,
"preview": "parent.append(el);\n"
},
{
"path": "src/comparisons/elements/append_to/ie8.js",
"chars": 24,
"preview": "parent.appendChild(el);\n"
},
{
"path": "src/comparisons/elements/append_to/jquery.js",
"chars": 24,
"preview": "$(el).appendTo(parent);\n"
},
{
"path": "src/comparisons/elements/append_to/modern.js",
"chars": 19,
"preview": "parent.append(el);\n"
},
{
"path": "src/comparisons/elements/before/ie8.js",
"chars": 54,
"preview": "target.insertAdjacentElement('beforebegin', element);\n"
},
{
"path": "src/comparisons/elements/before/jquery.js",
"chars": 27,
"preview": "$(target).before(element);\n"
},
{
"path": "src/comparisons/elements/before/modern.js",
"chars": 19,
"preview": "target.before(el);\n"
},
{
"path": "src/comparisons/elements/children/ie8.js",
"chars": 164,
"preview": "var children = [];\nfor (var i = el.children.length; i--; ) {\n // Skip comment nodes on IE8\n if (el.children[i].nodeTyp"
},
{
"path": "src/comparisons/elements/children/ie9.js",
"chars": 13,
"preview": "el.children;\n"
},
{
"path": "src/comparisons/elements/children/jquery.js",
"chars": 18,
"preview": "$(el).children();\n"
},
{
"path": "src/comparisons/elements/clone/ie8.js",
"chars": 20,
"preview": "el.cloneNode(true);\n"
},
{
"path": "src/comparisons/elements/clone/jquery.js",
"chars": 15,
"preview": "$(el).clone();\n"
},
{
"path": "src/comparisons/elements/closest/ie10.js",
"chars": 17,
"preview": "el.closest(sel);\n"
},
{
"path": "src/comparisons/elements/closest/ie8.js",
"chars": 823,
"preview": "function closest(el, sel) {\n Element.prototype.matches ||\n (Element.prototype.matches =\n Element.prototype.matc"
},
{
"path": "src/comparisons/elements/closest/ie9.js",
"chars": 498,
"preview": "function closest(el, sel) {\n Element.prototype.matches ||\n (Element.prototype.matches =\n Element.prototype.msMa"
},
{
"path": "src/comparisons/elements/closest/jquery.js",
"chars": 20,
"preview": "$(el).closest(sel);\n"
},
{
"path": "src/comparisons/elements/contains/ie8.js",
"chars": 36,
"preview": "el !== child && el.contains(child);\n"
},
{
"path": "src/comparisons/elements/contains/jquery.js",
"chars": 23,
"preview": "$.contains(el, child);\n"
},
{
"path": "src/comparisons/elements/contains/modern.js",
"chars": 28,
"preview": "node.contains(anotherNode);\n"
},
{
"path": "src/comparisons/elements/contains_selector/alternatives.json",
"chars": 63,
"preview": "{\n \"xpath\": \"https://www.w3schools.com/xml/xpath_intro.asp\"\n}\n"
},
{
"path": "src/comparisons/elements/contains_selector/jquery.js",
"chars": 30,
"preview": "$(\"div:contains('my text')\");\n"
},
{
"path": "src/comparisons/elements/contains_selector/modern.js",
"chars": 93,
"preview": "[...document.querySelectorAll('div')].filter((el) =>\n el.textContent.includes('my text')\n);\n"
},
{
"path": "src/comparisons/elements/contents/jquery.js",
"chars": 18,
"preview": "$(el).contents();\n"
},
{
"path": "src/comparisons/elements/contents/modern.js",
"chars": 15,
"preview": "el.childNodes;\n"
},
{
"path": "src/comparisons/elements/create_elements/ie8.js",
"chars": 172,
"preview": "function generateElements(html) {\n var div = document.createElement('div');\n div.innerHTML = html;\n return div.childr"
},
{
"path": "src/comparisons/elements/create_elements/jquery.js",
"chars": 30,
"preview": "$('<div>Hello World!</div>');\n"
},
{
"path": "src/comparisons/elements/create_elements/modern.js",
"chars": 209,
"preview": "function generateElements(html) {\n const template = document.createElement('template');\n template.innerHTML = html.tri"
},
{
"path": "src/comparisons/elements/each/ie8.js",
"chars": 208,
"preview": "function forEachElement(selector, fn) {\n var elements = document.querySelectorAll(selector);\n for (var i = 0; i < elem"
},
{
"path": "src/comparisons/elements/each/ie9.js",
"chars": 113,
"preview": "var elements = document.querySelectorAll(selector);\nArray.prototype.forEach.call(elements, function (el, i) {});\n"
},
{
"path": "src/comparisons/elements/each/jquery.js",
"chars": 39,
"preview": "$(selector).each(function (i, el) {});\n"
},
{
"path": "src/comparisons/elements/each/modern.js",
"chars": 60,
"preview": "document.querySelectorAll(selector).forEach((el, i) => {});\n"
},
{
"path": "src/comparisons/elements/empty/ie8.js",
"chars": 53,
"preview": "while (el.firstChild) el.removeChild(el.firstChild);\n"
},
{
"path": "src/comparisons/elements/empty/jquery.js",
"chars": 15,
"preview": "$(el).empty();\n"
},
{
"path": "src/comparisons/elements/empty/modern.js",
"chars": 22,
"preview": "el.replaceChildren();\n"
},
{
"path": "src/comparisons/elements/filter/ie8.js",
"chars": 255,
"preview": "function filter(selector, filterFn) {\n var elements = document.querySelectorAll(selector);\n var out = [];\n for (var i"
},
{
"path": "src/comparisons/elements/filter/ie9.js",
"chars": 76,
"preview": "Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);\n"
},
{
"path": "src/comparisons/elements/filter/jquery.js",
"chars": 30,
"preview": "$(selector).filter(filterFn);\n"
},
{
"path": "src/comparisons/elements/filter/modern.js",
"chars": 59,
"preview": "[...document.querySelectorAll(selector)].filter(filterFn);\n"
},
{
"path": "src/comparisons/elements/find_children/ie8.js",
"chars": 31,
"preview": "el.querySelectorAll(selector);\n"
},
{
"path": "src/comparisons/elements/find_children/jquery.js",
"chars": 22,
"preview": "$(el).find(selector);\n"
},
{
"path": "src/comparisons/elements/find_children/modern.js",
"chars": 164,
"preview": "// For direct descendants only, see https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#user_notes"
},
{
"path": "src/comparisons/elements/find_elements/alternatives.json",
"chars": 83,
"preview": "{\n \"qwery\": \"https://github.com/ded/qwery\",\n \"sizzle\": \"https://sizzlejs.com/\"\n}\n"
},
{
"path": "src/comparisons/elements/find_elements/ie8.js",
"chars": 52,
"preview": "document.querySelectorAll('.my #awesome selector');\n"
},
{
"path": "src/comparisons/elements/find_elements/jquery.js",
"chars": 28,
"preview": "$('.my #awesome selector');\n"
},
{
"path": "src/comparisons/elements/find_selector/ie8.js",
"chars": 30,
"preview": "!!el.querySelector(selector);\n"
},
{
"path": "src/comparisons/elements/find_selector/jquery.js",
"chars": 29,
"preview": "$(el).find(selector).length;\n"
},
{
"path": "src/comparisons/elements/first/ie8.js",
"chars": 28,
"preview": "document.querySelector(el);\n"
},
{
"path": "src/comparisons/elements/first/jquery.js",
"chars": 15,
"preview": "$(el).first();\n"
},
{
"path": "src/comparisons/elements/get_attributes/ie8.js",
"chars": 29,
"preview": "el.getAttribute('tabindex');\n"
},
{
"path": "src/comparisons/elements/get_attributes/jquery.js",
"chars": 24,
"preview": "$(el).attr('tabindex');\n"
},
{
"path": "src/comparisons/elements/get_height/ie8.js",
"chars": 532,
"preview": "function getHeight(el) {\n var d = /^\\d+(px)?$/i;\n if (window.getComputedStyle)\n el = parseFloat(getComputedStyle(el"
},
{
"path": "src/comparisons/elements/get_height/ie9.js",
"chars": 65,
"preview": "parseFloat(getComputedStyle(el, null).height.replace('px', ''));\n"
},
{
"path": "src/comparisons/elements/get_height/jquery.js",
"chars": 16,
"preview": "$(el).height();\n"
},
{
"path": "src/comparisons/elements/get_height/modern.js",
"chars": 35,
"preview": "el.getBoundingClientRect().height;\n"
},
{
"path": "src/comparisons/elements/get_html/ie8.js",
"chars": 14,
"preview": "el.innerHTML;\n"
},
{
"path": "src/comparisons/elements/get_html/jquery.js",
"chars": 14,
"preview": "$(el).html();\n"
},
{
"path": "src/comparisons/elements/get_outer_html/ie8.js",
"chars": 14,
"preview": "el.outerHTML;\n"
},
{
"path": "src/comparisons/elements/get_outer_html/jquery.js",
"chars": 25,
"preview": "$(el).prop('outerHTML');\n"
},
{
"path": "src/comparisons/elements/get_style/ie8.js",
"chars": 180,
"preview": "// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle\n// https://github.com/jona"
},
{
"path": "src/comparisons/elements/get_style/ie9.js",
"chars": 32,
"preview": "getComputedStyle(el)[ruleName];\n"
},
{
"path": "src/comparisons/elements/get_style/jquery.js",
"chars": 21,
"preview": "$(el).css(ruleName);\n"
},
{
"path": "src/comparisons/elements/get_text/ie8.js",
"chars": 32,
"preview": "el.textContent || el.innerText;\n"
},
{
"path": "src/comparisons/elements/get_text/ie9.js",
"chars": 16,
"preview": "el.textContent;\n"
},
{
"path": "src/comparisons/elements/get_text/jquery.js",
"chars": 14,
"preview": "$(el).text();\n"
},
{
"path": "src/comparisons/elements/get_width/ie8.js",
"chars": 528,
"preview": "function getWidth(el) {\n var d = /^\\d+(px)?$/i;\n if (window.getComputedStyle)\n el = parseFloat(getComputedStyle(el,"
},
{
"path": "src/comparisons/elements/get_width/ie9.js",
"chars": 64,
"preview": "parseFloat(getComputedStyle(el, null).width.replace('px', ''));\n"
},
{
"path": "src/comparisons/elements/get_width/jquery.js",
"chars": 15,
"preview": "$(el).width();\n"
},
{
"path": "src/comparisons/elements/get_width/modern.js",
"chars": 34,
"preview": "el.getBoundingClientRect().width;\n"
},
{
"path": "src/comparisons/elements/has_class/ie10.js",
"chars": 34,
"preview": "el.classList.contains(className);\n"
},
{
"path": "src/comparisons/elements/has_class/ie8.js",
"chars": 125,
"preview": "if (el.classList) el.classList.contains(className);\nelse new RegExp('(^| )' + className + '( |$)', 'gi').test(el.classNa"
},
{
"path": "src/comparisons/elements/has_class/jquery.js",
"chars": 27,
"preview": "$(el).hasClass(className);\n"
},
{
"path": "src/comparisons/elements/index/ie8.js",
"chars": 156,
"preview": "function index(el) {\n if (!el) return -1;\n var i = 0;\n while (el) {\n el = el.previousSibling;\n if (el && el.nod"
},
{
"path": "src/comparisons/elements/index/ie9.js",
"chars": 128,
"preview": "function index(el) {\n if (!el) return -1;\n var i = 0;\n while ((el = el.previousElementSibling)) {\n i++;\n }\n retu"
},
{
"path": "src/comparisons/elements/index/jquery.js",
"chars": 15,
"preview": "$(el).index();\n"
},
{
"path": "src/comparisons/elements/index/modern.js",
"chars": 41,
"preview": "[...el.parentNode.children].indexOf(el);\n"
},
{
"path": "src/comparisons/elements/inner_height/jquery.js",
"chars": 45,
"preview": "$(el).innerHeight();\n$(el).innerHeight(150);\n"
},
{
"path": "src/comparisons/elements/inner_height/modern.js",
"chars": 177,
"preview": "function innerHeight(el, value) {\n if (value === undefined) {\n return el.clientHeight;\n } else {\n el.style.heigh"
},
{
"path": "src/comparisons/elements/inner_width/jquery.js",
"chars": 43,
"preview": "$(el).innerWidth();\n$(el).innerWidth(150);\n"
},
{
"path": "src/comparisons/elements/inner_width/modern.js",
"chars": 172,
"preview": "function innerWidth(el, value) {\n if (value === undefined) {\n return el.clientWidth;\n } else {\n el.style.width ="
},
{
"path": "src/comparisons/elements/is_hidden/jquery.js",
"chars": 21,
"preview": "$(el).is(':hidden');\n"
},
{
"path": "src/comparisons/elements/is_hidden/modern.js",
"chars": 103,
"preview": "function isHidden(el) {\n return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length);\n}\n"
},
{
"path": "src/comparisons/elements/is_visible/jquery.js",
"chars": 22,
"preview": "$(el).is(':visible');\n"
},
{
"path": "src/comparisons/elements/is_visible/modern.js",
"chars": 105,
"preview": "function isVisible(el) {\n return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);\n}\n"
},
{
"path": "src/comparisons/elements/last/ie8.js",
"chars": 62,
"preview": "var els = document.querySelectorAll(el);\nels[els.length - 1];\n"
},
{
"path": "src/comparisons/elements/last/jquery.js",
"chars": 14,
"preview": "$(el).last();\n"
},
{
"path": "src/comparisons/elements/last/modern.js",
"chars": 43,
"preview": "[...document.querySelectorAll(el)].at(-1);\n"
},
{
"path": "src/comparisons/elements/matches/ie8.js",
"chars": 16,
"preview": "el === otherEl;\n"
},
{
"path": "src/comparisons/elements/matches/jquery.js",
"chars": 22,
"preview": "$(el).is($(otherEl));\n"
},
{
"path": "src/comparisons/elements/matches_selector/ie8.js",
"chars": 527,
"preview": "var matches = function (el, selector) {\n var _matches =\n el.matches ||\n el.matchesSelector ||\n el.msMatchesSel"
},
{
"path": "src/comparisons/elements/matches_selector/ie9.js",
"chars": 262,
"preview": "var matches = function (el, selector) {\n return (\n el.matches ||\n el.matchesSelector ||\n el.msMatchesSelector "
},
{
"path": "src/comparisons/elements/matches_selector/jquery.js",
"chars": 23,
"preview": "$(el).is('.my-class');\n"
},
{
"path": "src/comparisons/elements/matches_selector/modern.js",
"chars": 25,
"preview": "el.matches('.my-class');\n"
},
{
"path": "src/comparisons/elements/next/ie8.js",
"chars": 206,
"preview": "// nextSibling can include text nodes\nfunction nextElementSibling(el) {\n do {\n el = el.nextSibling;\n } while (el &&"
},
{
"path": "src/comparisons/elements/next/ie9.js",
"chars": 23,
"preview": "el.nextElementSibling;\n"
},
{
"path": "src/comparisons/elements/next/jquery.js",
"chars": 14,
"preview": "$(el).next();\n"
},
{
"path": "src/comparisons/elements/next/modern.js",
"chars": 239,
"preview": "function next(el, selector) {\n const nextEl = el.nextElementSibling;\n if (!selector || (nextEl && nextEl.matches(selec"
},
{
"path": "src/comparisons/elements/offset/ie8.js",
"chars": 342,
"preview": "function offset(el) {\n var docElem = document.documentElement;\n var rect = el.getBoundingClientRect();\n return {\n "
},
{
"path": "src/comparisons/elements/offset/ie9.js",
"chars": 234,
"preview": "function offset(el) {\n box = el.getBoundingClientRect();\n docElem = document.documentElement;\n return {\n top: box."
},
{
"path": "src/comparisons/elements/offset/jquery.js",
"chars": 16,
"preview": "$(el).offset();\n"
},
{
"path": "src/comparisons/elements/offset_parent/ie8.js",
"chars": 23,
"preview": "el.offsetParent || el;\n"
},
{
"path": "src/comparisons/elements/offset_parent/jquery.js",
"chars": 22,
"preview": "$(el).offsetParent();\n"
},
{
"path": "src/comparisons/elements/outer_height/ie8.js",
"chars": 17,
"preview": "el.offsetHeight;\n"
},
{
"path": "src/comparisons/elements/outer_height/jquery.js",
"chars": 21,
"preview": "$(el).outerHeight();\n"
},
{
"path": "src/comparisons/elements/outer_height_with_margin/ie8.js",
"chars": 226,
"preview": "function outerHeight(el) {\n var height = el.offsetHeight;\n var style = el.currentStyle || getComputedStyle(el);\n\n hei"
},
{
"path": "src/comparisons/elements/outer_height_with_margin/ie9.js",
"chars": 207,
"preview": "function outerHeight(el) {\n var height = el.offsetHeight;\n var style = getComputedStyle(el);\n\n height += parseFloat(s"
},
{
"path": "src/comparisons/elements/outer_height_with_margin/jquery.js",
"chars": 25,
"preview": "$(el).outerHeight(true);\n"
},
{
"path": "src/comparisons/elements/outer_height_with_margin/modern.js",
"chars": 211,
"preview": "function outerHeight(el) {\n const style = getComputedStyle(el);\n\n return (\n el.getBoundingClientRect().height +\n "
},
{
"path": "src/comparisons/elements/outer_width/ie8.js",
"chars": 16,
"preview": "el.offsetWidth;\n"
},
{
"path": "src/comparisons/elements/outer_width/jquery.js",
"chars": 20,
"preview": "$(el).outerWidth();\n"
},
{
"path": "src/comparisons/elements/outer_width_with_margin/ie8.js",
"chars": 220,
"preview": "function outerWidth(el) {\n var width = el.offsetWidth;\n var style = el.currentStyle || getComputedStyle(el);\n\n width "
},
{
"path": "src/comparisons/elements/outer_width_with_margin/ie9.js",
"chars": 201,
"preview": "function outerWidth(el) {\n var width = el.offsetWidth;\n var style = getComputedStyle(el);\n\n width += parseFloat(style"
},
{
"path": "src/comparisons/elements/outer_width_with_margin/jquery.js",
"chars": 24,
"preview": "$(el).outerWidth(true);\n"
},
{
"path": "src/comparisons/elements/outer_width_with_margin/modern.js",
"chars": 208,
"preview": "function outerWidth(el) {\n const style = getComputedStyle(el);\n\n return (\n el.getBoundingClientRect().width +\n p"
},
{
"path": "src/comparisons/elements/parent/ie8.js",
"chars": 15,
"preview": "el.parentNode;\n"
},
{
"path": "src/comparisons/elements/parent/jquery.js",
"chars": 16,
"preview": "$(el).parent();\n"
},
{
"path": "src/comparisons/elements/parents/ie9.js",
"chars": 227,
"preview": "function parents(el, selector) {\n var parents = [];\n while ((el = el.parentNode) && el !== document) {\n // See \"Mat"
},
{
"path": "src/comparisons/elements/parents/jquery.js",
"chars": 25,
"preview": "$(el).parents(selector);\n"
},
{
"path": "src/comparisons/elements/parents/modern.js",
"chars": 192,
"preview": "function parents(el, selector) {\n const parents = [];\n while ((el = el.parentNode) && el !== document) {\n if (!sele"
},
{
"path": "src/comparisons/elements/position/ie8.js",
"chars": 760,
"preview": "function position(el) {\n var box = el.getBoundingClientRect();\n var docElem = document.documentElement;\n var marginLe"
},
{
"path": "src/comparisons/elements/position/jquery.js",
"chars": 18,
"preview": "$(el).position();\n"
},
{
"path": "src/comparisons/elements/position/modern.js",
"chars": 230,
"preview": "function position(el) {\n const {top, left} = el.getBoundingClientRect();\n const {marginTop, marginLeft} = getComputedS"
},
{
"path": "src/comparisons/elements/position_relative_to_viewport/ie8.js",
"chars": 28,
"preview": "el.getBoundingClientRect();\n"
},
{
"path": "src/comparisons/elements/position_relative_to_viewport/jquery.js",
"chars": 167,
"preview": "function offset(el) {\n var offset = $(el).offset();\n return {\n top: offset.top - document.body.scrollTop,\n left:"
},
{
"path": "src/comparisons/elements/prepend/ie8.js",
"chars": 44,
"preview": "parent.insertBefore(el, parent.firstChild);\n"
},
{
"path": "src/comparisons/elements/prepend/jquery.js",
"chars": 23,
"preview": "$(parent).prepend(el);\n"
},
{
"path": "src/comparisons/elements/prepend/modern.js",
"chars": 20,
"preview": "parent.prepend(el);\n"
},
{
"path": "src/comparisons/elements/prev/ie8.js",
"chars": 222,
"preview": "// prevSibling can include text nodes\nfunction previousElementSibling(el) {\n do {\n el = el.previousSibling;\n } whil"
},
{
"path": "src/comparisons/elements/prev/ie9.js",
"chars": 27,
"preview": "el.previousElementSibling;\n"
},
{
"path": "src/comparisons/elements/prev/jquery.js",
"chars": 75,
"preview": "$(el).prev();\n// Or, with an optional selector\n$(el).prev('.my-selector');\n"
},
{
"path": "src/comparisons/elements/prev/modern.js",
"chars": 243,
"preview": "function prev(el, selector) {\n const prevEl = el.previousElementSibling;\n if (!selector || (prevEl && prevEl.matches(s"
},
{
"path": "src/comparisons/elements/remove/ie8.js",
"chars": 65,
"preview": "if (el.parentNode !== null) {\n el.parentNode.removeChild(el);\n}\n"
},
{
"path": "src/comparisons/elements/remove/jquery.js",
"chars": 60,
"preview": "$(el).remove();\n\n// multiple elements\n$(selector).remove();\n"
},
{
"path": "src/comparisons/elements/remove/modern.js",
"chars": 108,
"preview": "el.remove();\n\n// multiple elements\nfor (const el of document.querySelectorAll(selector)) {\n el.remove();\n}\n"
},
{
"path": "src/comparisons/elements/remove_attributes/ie8.js",
"chars": 32,
"preview": "el.removeAttribute('tabindex');\n"
},
{
"path": "src/comparisons/elements/remove_attributes/jquery.js",
"chars": 30,
"preview": "$(el).removeAttr('tabindex');\n"
},
{
"path": "src/comparisons/elements/remove_class/ie10.js",
"chars": 32,
"preview": "el.classList.remove(className);\n"
},
{
"path": "src/comparisons/elements/remove_class/ie8.js",
"chars": 365,
"preview": "function removeClass(el, className) {\n var classes = className.split(' ');\n for (var i = 0; i < classes.length; i++) {"
},
{
"path": "src/comparisons/elements/remove_class/jquery.js",
"chars": 30,
"preview": "$(el).removeClass(className);\n"
},
{
"path": "src/comparisons/elements/replace_from_html/ie8.js",
"chars": 23,
"preview": "el.outerHTML = string;\n"
},
{
"path": "src/comparisons/elements/replace_from_html/jquery.js",
"chars": 27,
"preview": "$(el).replaceWith(string);\n"
},
{
"path": "src/comparisons/elements/scroll_left/jquery.js",
"chars": 24,
"preview": "$(window).scrollLeft();\n"
},
{
"path": "src/comparisons/elements/scroll_left/modern.js",
"chars": 332,
"preview": "function scrollLeft(el, value) {\n var win;\n if (el.window === el) {\n win = el;\n } else if (el.nodeType === 9) {\n "
},
{
"path": "src/comparisons/elements/scroll_top/jquery.js",
"chars": 23,
"preview": "$(window).scrollTop();\n"
},
{
"path": "src/comparisons/elements/scroll_top/modern.js",
"chars": 329,
"preview": "function scrollTop(el, value) {\n var win;\n if (el.window === el) {\n win = el;\n } else if (el.nodeType === 9) {\n "
},
{
"path": "src/comparisons/elements/serialize/jquery.js",
"chars": 28,
"preview": "$(formElement).serialize();\n"
}
]
// ... and 114 more files (download for full content)
About this extraction
This page contains the full source code of the HubSpot/youmightnotneedjquery GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 314 files (76.4 KB), approximately 28.9k tokens, and a symbol index with 77 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.