argyleink / blingblingjs Goto Github PK
View Code? Open in Web Editor NEW๐ฒ Micro-library of shorthands for DOM selection, events, and attribute manipulation
License: MIT License
๐ฒ Micro-library of shorthands for DOM selection, events, and attribute manipulation
License: MIT License
I coded up a mockup of the idea here. While there is overlap with .attr()
I think there could still be a place for it. especially when handling data that can't be coerced to a string.
$('div').attr('data-user', {
fname: 'argyle',
lname: 'ink'
});
$('div').attr('user') // "[object Object]"
// data-user="{"fname":"ginger","lname":"chew"}"
$('div').data('user', {
fname: 'ginger',
lname: 'chew'
});
$('div').data('user') // { fname: 'ginger', lname: 'chew' }
// Needing to set `data-` like this on an object is frustrating
$('div').attr({
'data-fname': 'argyle',
'data-lname': 'ink'
'data-user-id': 1
});
// the `data-` is assumed and don't need to wrap the keys in quotes
// and converting camelCase to kebab-case is handled automatically
$('div').data({
fname: 'ginger',
lname: 'chew',
userId: 2
})
The mockup handles set/get/delete, so accepting an object as the first argument like in .attr()
isn't there yet.
Hi,
some plugins are independent of the jquery name to be able to work, for example Bootstrap 4 or other plugins.
Is it perhaps possible to add the JQuery as an option to blingblingjs and make the other plugins which are dependent of JQuery to work? Of course I do know that those plugins are dependent of JQuery functions which perhaps may not be available in the current state of blingblingjs.
But this functionality would be pretty cool to have!
regards
Now I'm doing:
const node = document.createElement('span').innerText = JSON.stringify(variableName, 2, ' ')
document.getElementById('idname').replaceChildren(node)
But is there a sipmpler way with blingblingjs syntax?
i can't always install blingblingjs or jQuery for certain projects, but i'd still like to avoid manually typing things like [...document.querySelectorAll('a')].map(x=>x.addEventListener(
when i'm quickly debugging stuff in the devtools console. it's also a little wasteful to fetch all of jQuery when i usually only need to do a few things with selecting and .on
.
Using a bookmarklet seems to address this nicely for my own personal use. just thought i'd share my bookmarklet here.
to try it out, create a bookmark (preferably in Chrome) and paste the following into the URL of that new bookmark:
javascript: fetch('https://cdn.jsdelivr.net/npm/blingblingjs@latest/dist/index.min.js')
.then((x) => x.text())
.then((x) => {
eval(x);
$ = $.default;
console.log("๐ฒ BlingBlingJS ready ๐ฒ");
});
https://github.com/hchiam/learning-js/blob/main/bookmarklets/blingbling.js
you can now use the following keyboard shortcuts in Chrome to quickly "install" BlingBlingJS on almost any page:
mac: command + L, then type to search for the bookmark name, then hit enter --> $('...').on
now works in the console!
pc: Ctrl + L, then type to search for the bookmark name, then hit enter --> $('...').on
now works in the console!
Depending on how uniquely you name your bookmark, you can reach it in a few keystrokes. Note that these keyboard shortcuts may not work for you in Firefox. In Firefox, I give short names for the bookmarklets I use often, and place them within easy reach in the bookmark bar (not inside a folder).
sugarrrrrrrrrrrrr
Currently $(window).on is not setup as an 'addEventListener' alias as per the original bling.js -- would be nice to have this in blingbling too.
Excited to try out blingblingjs for quick prototyping without a build step. I dropped it into an HTML file via unpkg.com, and I was surprised that window.$
was undefined. Turns out that window.blingblingjs
is what gets defined, so to use $
as seems to be the convention from the README, I have to do the following:
<!DOCTYPE html>
<script src="//unpkg.com/[email protected]/dist/index.js"></script>
<script>
var $ = blingblingjs;
</script>
Proposal:
window.blingblingjs
window.$
is undefined, set it to point to blingblingjsone time event shorthand
$("table").class("table", false) or style?
I have an input field:
<input type="text" id="querytext" placeholder="some query words" value="some other words" />
I'm trying to read what is the present value of the input field. I tried this, but I only get the predefined value some other words
:
import $ from './blingbling.js'
$('#querytext').on('keydown', e => querytext())
const querytext = function () {
const [txt] = $(document.querySelector('input#querytext'))
console.log(txt.attr('value'))
}
if the selector has no matches, nothing breaks, but the red in the console is annoying
I'm getting an error in Safari 9 (although presumably this applies to similarly old browsers) due to the use of the spread operator on line 37.
This issue appears after transpilation with Babel and seems to be due to nodeLists not being iterable in older browsers.
[...$nodes].map($el => Object.assign($el, sugar)),
A quick fix would be to wrap $nodes
in Array.from(...)
although I'm not sure at first glance if that would break anything.
Happy to submit a PR if that seems like a viable fix.
shouldnt block users from having this option
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.