6 ms·
Show HN: kutty, jQuery-free intercooler.js
- recursivedoubts 6y agothis is my covid project: a ground up, jQuery (and all other dependencies)-free rewrite of intercooler.js
- newx 6y agoGreat idea! ++ for things that are jQuery-free. :) One quick (fix/)suggestion: the kutty header on the top left, even being a clickable link to home as expected, changes the cursor to textual selection cursor upon hover instead of the usual link/hand/finger pointer. :)
- recursivedoubts 6y agoYeah, there is an annoyance w sinon.js (the library I use for mocking AJAX) that breaks the top nav (I'm using the kt-boost attribute) I'll fix it up. update: fixed, thanks for calling me out for being lazy
- CSSer 6y agoI've been really interested in Intercooler.js, but the jQuery dependency bummed me out. This is a very cool project, and I highly appreciate you putting in the work here! I do have one question. Is there a specific reason why you chose not to follow the standardized specification[0] of using data-* prefixes for HTML attributes? I realize it's pedantic, but I'd like to see this project receive wide support and usage. I'm concerned many potential users will criticize this. [0]: https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-%2a-attributes https://html.spec.whatwg.org/multipage/dom.html#embedding-cu... Edit: Nevermind, I just looked through the docs from the start. You do support it!
- recursivedoubts 6y ago:) Yep, do it the way you like. Btw, check out the kt-classes attribute if you want to do some slick CSS transitions w/o javascript: https://kutty.org/attributes/kt-classes/ https://kutty.org/attributes/kt-classes/
- rebataur 6y agoawesome, we use intercooler.js, would explore this for future projects.
- purerandomness 6y agoIntercooler/Kutty is truly a remedy to modern web development's accidental complexity. Love it, thank you for putting so much effort into it!
- dec0dedab0de 6y agoI got in so many arguments at work defending intercooler.js, eventually I caved and started using angular. I'm still regretting it.
- recursivedoubts 6y ago:) I think the jQuery thing was a big part of the problem, and also the idea that this is a competitor w/ angular, rather than a way to enhance HTML. That's part of the rename, I want it to break out of that comparison.
- rlue 6y agoSame thing happened to me. I was really intrigued by intercooler when I first found it a couple years ago, but lacking experience in the front-end, I found myself cornered in a conversation about it with a React snob. Ultimately, I turned my attention elsewhere before I ever got a chance to sink my teeth into it. Glad to see the project is going strong and getting a makeover. Especially in web development, the constant obsession with the Next Big Thing can be a real deterrent against some really cool ideas. Kutty won't make you a more desirable job candidate or force you to develop new and challenging mental models (afaiu); it'll never give rise to an ecosystem of plugins and extensions the way React has; and with Webpack integration in the latest release of Rails (where I'm coming from), frontend frameworks are being normalized as the default approach (or at least the final destination) of any web application these days. But engineering is about trade-offs. There's a sizable chunk of projects out there whose requirements are modest enough to be met with HTML, AJAX, and a little glue to hold them together, and kutty seems to provide a really clean abstraction layer there. Really looking forward to trying it out soon.
- projektfu 6y agoWho knows? If you get a lot of little projects working quickly because of kutty+backend, it might just make you a more attractive job candidate.
- ng12 6y agoOne of you is definitely wrong, but it depends on the scope of the project. I would never build an SPA with intercooler and I would never build a static website with Angular/React.
- kfk 6y agoWould this work with an html table element? I am building online pivot tables and I like the idea of building the entire table on the server and swapping it with a div on user click.
- recursivedoubts 6y agoYep. Here's an example showing a table that updates and flashes a color depending on the operation: https://kutty.org/examples/bulk-update/ https://kutty.org/examples/bulk-update/
- ComputerGuru 6y agoHey just some feedback. The UX there is wrong because there is instant feedback in the toggling of the activate/deactivate button but a slight delay in the reaction time for the selected row (due to the round trip). I believe the correct paradigm here is for the button to not toggle state until the response is received/acted upon (to indicate a short “hang”).
- ComputerGuru 6y agoBig intercooler fan here, I’ll definitely be checking this out. For others interested in this field of “graceful enhancement” see also unpoly: https://unpoly.com/ https://unpoly.com/ OP may also want to look into integrating some features/ideas from there as it is very similar to intercooler.
- recursivedoubts 6y agoThanks! Unpoly is an excellent project.
- scwoodal 6y agoAnother vote for unpoly, it’s jquery free as well. I’m currently using it in a project that’s a PWA and its been a pleasure to work with.
- piranha 6y agoWell, it’s the same size as intercooler plus jQuery, so not a lot of savings here. :)
- scwoodal 6y agoSize aside, there was a considerable increase in performance after jquery was removed. https://blog.makandra.com/2019/01/performance-impact-of-removing-jquery/ https://blog.makandra.com/2019/01/performance-impact-of-remo...
- chrisrickard 6y agoUnpoly is awesome, and I think deserves more recognition. Having said that I recently moved to Alpine JS (plus Turbolinks) and I think that also deserves more recognition https://github.com/alpinejs/alpine https://github.com/alpinejs/alpine
- ComputerGuru 6y agoAh, yes, that’s the other one I was trying to remember. Can you explain your switch and the library choice a bit more? Turbolinks seems to me to be a very primitive version of Intercooler/Unpoly.
- skrebbel 6y agoSuper nice! Feels a lot like a manual version of Phoenix LiveView. That's a good thing!
- aitchnyu 6y agoI was amazed that this page preserved HTML and scroll even for dynamic content. I'm thinking about how to do the same in Vue, and my crazy idea is using a store/controller for each path and storing and retrieving it from an LRU cache on history events. https://kutty.org/examples/click-to-load/ https://kutty.org/examples/click-to-load/
- adamstep 6y agoCongrats on the launch! As a big user of Intercooler, I'm curious about which features you considered mistakes, or which ideas didn't work out as well as you expected. My own library Hyperview is heavily inspired by Intercooler, so I'm hoping to learn from your experience!
- recursivedoubts 6y agoheya adam Here are some off the top of my head: - the dependency mechanism (too magical) - the ic-action attribute (sometimes it's OK to write some javascript) Generally I'm trying to reduce the number of attributes and add a bit of syntax if necessary, e.g. kt-trigger="every 1s" vs. a separate ic-poll attribute. Also I'm trying to make it pluggable so that people can add their own functionality rather than pressuring me to add a new attribute or feature. :) Hyperview is an awesome library btw, everyone check it out: https://hyperview.org/ https://hyperview.org/ Hypertext: the once and future king.
- janwillemb 6y agoYSK that in Dutch the name kutty resembles the popular term for the female reproductive organs.
- recursivedoubts 6y agoPERFECT
- kalev 6y agoI genuinly LOL'ed seeing this name. I would definitely consider changing it.
- recursivedoubts 6y agonah, it's all good: https://www.urbandictionary.com/define.php?term=kutty https://www.urbandictionary.com/define.php?term=kutty Maybe in dutch it can be called mutty.
- Insanity 6y agoSeeing the name I immediately came here to comment this! unfortunate name.. :D
- recursivedoubts 6y agoI love kutty. What, you don't like kutty?
- lowdose 6y agoAt least a delight to work with no lube and all.
- wtmt 6y agoYSK that in a few South Indian languages, “kutty” means “small”, and is also used to address or refer to kids.
- mosselman 6y agoThis reminds me a lot of rails-ujs. I built a jquery-based alternative to intercooler (didn't know it existed) back in the day that used the rails-ujs events to do its thing. A few days ago, instead of going this route, I just used a `.js` view in Rails to replace the necessary elements in the DOM. This is even easier than having to load something like kutty and specifying in attributes what it needs to do: Taken from the Rails guides: $("<%= escape_javascript(render @user) %>").appendTo("#users"); This uses jQuery, but you can all imagine how to do this with vanilla js and it works so well.
- deanstag 6y agoFYI, Kutty or കുട്ടി means child in the language of malayalam :)
- recursivedoubts 6y agoI like that a lot more than what it means in Dutch!
- jslakro 6y agoThis make me think how related are intercooler and knockout, functionality is quite similar
- aruggirello 6y agoTo all users of unpoly, intercooler / kutty: which one would you recommend for a new e-commerce project? I'm especially concerned by maintainability issues, as well as possible SEO implications.