9 ms·
Show HN: garlic.js - don't let your users lose their form data
- mmanfrin 14y ago'Loose' is the opposite of 'tight'; to 'lose' is to misplace, which is the word you were going for.
- StavrosK 14y agoHuh, this is very nice. Congratulations!
- guillaumepotier 14y agoThanks :)
- stevoyoung 14y agoIs there a way to differentiate between data that's only saved using Garlic (local) vs data that's also been saved to the server? This could be a huge confusion for users if there isn't.
- guillaumepotier 14y agoYes, I'll need to work on that, if there is already server data. Maybe in a tooltip like, let the user choose which version he should use
- kmfrk 14y agoCould you add a version number to your script for this reason? It'll also make diff'ing much easier.
- citricsquid 14y agoI wonder if you should have some sort of icon or text indicator (per field) that shows there is saved form data available, but don't populate until the user triggers it, or an option to restore all available form data in one click? There are situations where I want to clear a form so I'll refresh the page if a clear option isn't available. I guess the solution would be for everyone that uses garlic.js to make sure they have a clear option.
- stevoyoung 14y agoThere are all sorts of use cases that might want one thing over the next (display server data vs local data for example). Keep you API open and flexible for the UX designer to choose what's best when. Also, if it's showing local data do something simple, like give the field a class of "garlic-data". That way the UX designer can choose the best way to differentiate it for their use case.
- condiment 14y agoI agree with this. Outside of explicitly signaling to users that they have a saved 'draft' of the form, and having them click a button on the page to restore their filled out fields from the draft, there aren't really very many sane implementations. Some other issues: - doesn't work in IE - saved data doesn't expire - Storage keys aren't unique to the URL, so if two pages have the same exact layout, but different content, identical forms on the page will be filled out with stored information. So it's a good concept, but I think that there are definitely some questions about user privacy, and that it needs to be paired with some extra UI cues that make it clear to the user that they're looking at draft information, and not something that's saved.
- fruchtose 14y agoI think the desire for this kind of project is very reasonably based, and it looks like you have done great work on most of the implementation. I have one gripe with it, though. It would be nice if the documentation mentioned that garlic.js requires an HTML5 browser with localStorage implemented. Remember, there are people who are still using Internet Explorer 6 and 7, and these browsers are incompatible [1]. This is a minor details considering browser marketshare, but a fallback using cookies would be a nice-to-have feature. Besides that, awesome work! [1] http://www.quirksmode.org/dom/html5.html#t00 http://www.quirksmode.org/dom/html5.html#t00
- gildas 14y agoIt would also be nice if the documentation mentioned that it requires jQuery.
- guillaumepotier 14y agoright!
- StavrosK 14y agoHmm, what does jQuery provide that is so essential that someone decides to add a dependency this big for something so simple? It seems that everything requires jQuery these days, even when a 5-line for loop would do.
- vidarh 14y ago> It seems that everything requires jQuery these days And there's your answer: The "cost" of depending on jQuery is small since so many things depend on it that most potential users probably already pull it in.
- StavrosK 14y agoThat's true, I guess. I just don't think you should include large dependencies if you can easily avoid them.
- bookcasey 14y agoJust a heads up, the <title> of your page is still "Bootstrap".
- pyrotechnick 14y agoThat was a test. You passed.
- guillaumepotier 14y agoahah ^^
- RBerenguel 14y agoI just hope everyone gets to use it. I added it to my "great to have" Javascript libraries list. Good work!
- pratyushmittal 14y agoRuben, can you please share your "great to have" Javascript libraries list? It sounds promising.
- RBerenguel 14y agoIt's still a work in progress, but of course! I have many (many!) bookmarked pages with more libraries in my instapaper feed, some emails to myself and a few emacs .org files I use as buckets. I just decided to start collecting them last week and made a quick sweep-clean with the most recent tabs I had open and the few I had linked to recently: 1.1 Markdown 1.1.1 http:// http:// attacklab.net/showdown/ 1.2 DBs 1.2.1 http://jazzrecord.org http://jazzrecord.org 1.3 Unit tests 1.3.1 http://jsunittest.com/ http://jsunittest.com/ 1.4 Documentation 1.4.1 http://www.naturaldocs.org/ http://www.naturaldocs.org/ 1.4.2 http://fitzgen.github.com/pycco/ http://fitzgen.github.com/pycco/ 1.5 Visual 1.5.1 http://lab.hakim.se/kort/ http://lab.hakim.se/kort/ 1.6 localStorage 1.6.1 Redis inspired, at twilio https://github.com/twilio/BankersBox https://github.com/twilio/BankersBox 1.6.2 Amplify.store http://amplifyjs.com/api/store/ http://amplifyjs.com/api/store/ 1.6.3 Persistent form data http://guillaumepotier.github.com/Garlic.js/ http://guillaumepotier.github.com/Garlic.js/ I'll probably end up posting the list (or the mind map that forms it) on my blog sooner or later (probably as soon as I hit 30 or when I finish my current Javascript RTE project)
- guillaumepotier 14y agoNice! You should gather that in a cool markdown file on a github repo that every one could fork and suggest / add their own good libs :)
- RBerenguel 14y ago
- LearnYouALisp 14y ago> don't let your users lose their form data This is a huge problem, and is the reason I've had Lazarus installed for a few years now. https://addons.mozilla.org/en-us/firefox/addon/lazarus-form-recovery/ https://addons.mozilla.org/en-us/firefox/addon/lazarus-form-... Apparently it exists for Chrome now, too.
- mikeash 14y agoThinking about it, I'm mildly amazed that the browsers themselves didn't solve this problem back in 1996 or so.
- deleted 14y ago[deleted]
- fudged71 14y agoMaybe it's a security issue? With some sites you might not want that information saved, perhaps.
- guillaumepotier 14y agoGood call. Not thought about that. At least, it is shown to the user, and not hidden and recorded secretly.
- aw3c2 14y agoOpera saves forms when possible. It also has instant backward navigation from cache. I guess it saves forms on cached pages.
- dbaupp 14y agoFirefox seems to do this sometimes too. (e.g. I went backwards then forwards while typing this, and my text was retained.)
- anothermachine 14y agoForm content recall is a native Chrome feature now.
- guillaumepotier 14y agoThanks for your first comments ;) This is a very very early alpha release. 1h of work in fact.. Please, feel free to contribute!
- csmatt 14y agoI was thinking about this the other day and I thought "How is this not standard!?" Good job!
- ceejayoz 14y agoIt's not standard because people frequently do things like type a credit card number into a form on a public computer. Lots of potential for privacy breaches.
- ErikD 14y agoWith and option to disable this behavior from the HTML websites could chose to disable it on forms which might contain sensitive data. Browsers could even disable it by default and let the websites enable using an attribute.
- wildgift 14y agoEven on a private computer, having it stored in a file can be bad, because if another process gets on there and reads the storage, it'll get the data.
- deleted 14y ago[deleted]
- 5vforest 14y agoDon't want to be that guy, but what's different from http://simsalabim.github.com/sisyphus/ http://simsalabim.github.com/sisyphus/?
- pyrotechnick 14y agoName, code, documentation, dependencies, browser support, test coverage, etc.
- guillaumepotier 14y agoOh, I was totally unaware of this one. Never mind, it clearly shows that there's a lack here on this browser behavior. My project is juste a few hours pet project. I'll try to maintain it and make it as advanced & usefull as sisyphus, for fun :)
- salman89 14y agoShould add an option for users to disable this (like remember me on login forms)... not good for public computers if you don't know the form you just filled in but didn't submit will retain the data. Other than that, cool!
- wildgift 14y agoPersisting localStorage seems to be controlled by the setting to delete cookies after exiting the browser. If i have it set to delete cookies, it deletes localStorage. if i allow it to keep cookies after quitting the browser, then it persists localStorage. (Noticed this because the demo failed for me the first time.)
- guillaumepotier 14y agoAre you sure of that? I've tested the behavior of cookies / localStorage on iPads recently, and on private sessions without cookies, Safari on iPad had localStorage persisted.
- anothermachine 14y agoWhy is this a website feature instead of a browser extension, where it would work for every site?
- skndr 14y agoI would imagine it's easier for a site owner to provide this than get everyone to install a browser extension.
- ErikD 14y agoI think anothermachine meant it should be default behavior in browsers. I agree, with the attribute to disable or enable this from the html it would be a nice feature for browsers to implement.
- copypasteweb 14y agoIt should be a browser feature, option or extension, for users to have control over it from one place.
- kornnflake 14y agoI just made a simple Chrome Extension out of it: https://chrome.google.com/webstore/detail/simple-form-recovery/cieifohdikchafcbdjbcmkdiabggalhp https://chrome.google.com/webstore/detail/simple-form-recove...
- zapt02 14y agoi like it. workaround for older browser possible?
- guillaumepotier 14y agoYes possible. Someone mentioned usage of store.js, i'll dive into it next week
- program 14y agoAs a side note do not use the Bootstrap class .well together with .row cause it overflow because of padding. Create this structure: div.row > div.well > the content.
- guillaumepotier 14y agoHi there, github has some difficulties with the page url and tend to show some weird 404 :( Please, could you update the link of this post to http://garlicjs.org http://garlicjs.org? Thx!
- mkelley 14y agoPretty cool - another very similar option that comes in the form of a jQuery plugin that I just noticed in the [new] section of HN.... https://github.com/simsalabim/sisyphus https://github.com/simsalabim/sisyphus - It looks pretty slick.
- minervauk 14y agoThey have been doing this for years!! http://www.bonsoni.com/post_ad.php http://www.bonsoni.com/post_ad.php
- astro1138 14y agoWhile convenient and technically fine, this can get creepy for users. “Wait, I didn't submit the form on purpose but the data has been saved?”
- bluetidepro 14y agoI had this same thought, but I think it would just be best to use these sort of plugins wisely, and not on every form element possible. Or to maybe have some sort of form "note/tip" that mentions it's being auto saved. Sites like Quora do this via drafts of your comments/responses that you write. That way people know to erase the content if they truly don't want it saved. Like many UX features similar to this, I would say it mainly comes down to who your audience is, and where it's being used on how "weirded out" users would feel by this feature.
- ryankirkman 14y agoNice work! I've added garlic to cdnjs: http://cdnjs.cloudflare.com/ajax/libs/garlic.js/0.0.1/garlic.min.js http://cdnjs.cloudflare.com/ajax/libs/garlic.js/0.0.1/garlic...
- daymun 14y agoI'm getting a 404. https://github.com/guillaumepotier/Garlic.js https://github.com/guillaumepotier/Garlic.js
- flyingyeti 14y agohttp://garlicjs.org/ http://garlicjs.org/ works as well
- borplk 14y agoLink doesn't work (404)
- baseh 14y agoGetting a 404 on the OPS link. This seems to work https://github.com/guillaumepotier/Garlic.js https://github.com/guillaumepotier/Garlic.js
- qohen 14y agoThe provided github link 404's. But this one works: https://github.com/guillaumepotier/Garlic.js https://github.com/guillaumepotier/Garlic.js Another link worth knowing about -- perhaps even more so, since there are demos there: http://garlicjs.org http://garlicjs.org
- webmech 14y agoit's gooooone!