4 ms·

Hey there, creator of instacss here. Thanks for all the feedback! I posted this as a Show HN last week, but it's nice to see that someone has re-discovered it:

by rgarcia 15y ago

Hey there, creator of instacss here. Thanks for all the feedback! I posted this as a Show HN last week, but it's nice to see that someone has re-discovered it: http://news.ycombinator.com/item?id=3222253 http://news.ycombinator.com/item?id=3222253. Since then I've added a few features, one of which being the ability to have permalinks so that you could use it as a google chrome search. This is why I push to the url bar as you type. I'm really open to feedback on how to do this without screwing with people's back buttons, since I agree that's pretty bad.

xutopia 15y ago
Though the MDN docs are down right now check out the replaceState method. It allows to write over the url (on the same domain) without creating a new history object. This is a textbook example of where using replaceState would make sense.
morrow 15y ago
An idea would be to separate the history push from the loading of the resources, and only push history after an action that denotes the user has found the result they were looking for (blur of input, pressing enter, etc) to avoid a search history filled with every keystroke of a query. A different take would be to never automatically push the results to the url bar, but still parse the address bar for queries, and provide a permalink for each result with the hash in it.
level09 15y ago
Would be nice if you share some of the used backend technology
- rgarcia 15y ago
  Here you go :) https://github.com/rgarcia/instacss https://github.com/rgarcia/instacss Data is scraped mostly from MDN using node-scraper and then thrown into mongodb for storage. Backend is also node and just provides a json endpoint for pulling the entire db client-side (along with serving up index.html and all the client-side js). Frontend is all backbonejs, which makes writing the search function pretty insanely simple: https://github.com/rgarcia/instacss/blob/master/static/js/views/searchheader.js#L37 https://github.com/rgarcia/instacss/blob/master/static/js/vi... Both backend and frontend code is organized using requirejs, which I am pretty much in love with.
danielsoneg 15y ago
Just add a short delay between the keypress & the search/url push, and add a check to see if the query is the same. If after a ~second or so the query is the same, do the search and update the URL.
- tripzilch 15y ago
  Yes please! This was the first thing I noticed, maybe my netbook is too slow but I do a lot of coding on the little thing. The way I solved this in a similar auto-complete app was using a setTimeOut to prevent updating or requesting data unless no key had been pressed in the last 0.2 seconds or so: var updateId = 0; function searchKeypress(e) { if ((e || window.event).keyCode == 13) { updateCookie(radioStations.selected); document.location = radioStations.selected.links[0].url; } clearTimeout(updateId); updateId = setTimeout(searchUpdate, 200); } Disclaimer: this piece of code is about 4 years old and as you can see it doesn't even use jQuery, but I trust it demonstrates the principle well enough.
- pdaddyo 15y ago
  I'd use underscore.js's _.debounce method, simples!

by rgarcia 15y ago

xutopia 15y ago

Though the MDN docs are down right now check out the replaceState method. It allows to write over the url (on the same domain) without creating a new history object. This is a textbook example of where using replaceState would make sense.

morrow 15y ago

An idea would be to separate the history push from the loading of the resources, and only push history after an action that denotes the user has found the result they were looking for (blur of input, pressing enter, etc) to avoid a search history filled with every keystroke of a query. A different take would be to never automatically push the results to the url bar, but still parse the address bar for queries, and provide a permalink for each result with the hash in it.

level09 15y ago

Would be nice if you share some of the used backend technology

rgarcia 15y ago
Here you go :) https://github.com/rgarcia/instacss https://github.com/rgarcia/instacss Data is scraped mostly from MDN using node-scraper and then thrown into mongodb for storage. Backend is also node and just provides a json endpoint for pulling the entire db client-side (along with serving up index.html and all the client-side js). Frontend is all backbonejs, which makes writing the search function pretty insanely simple: https://github.com/rgarcia/instacss/blob/master/static/js/views/searchheader.js#L37 https://github.com/rgarcia/instacss/blob/master/static/js/vi... Both backend and frontend code is organized using requirejs, which I am pretty much in love with.

danielsoneg 15y ago

Just add a short delay between the keypress & the search/url push, and add a check to see if the query is the same. If after a ~second or so the query is the same, do the search and update the URL.

tripzilch 15y ago
Yes please! This was the first thing I noticed, maybe my netbook is too slow but I do a lot of coding on the little thing. The way I solved this in a similar auto-complete app was using a setTimeOut to prevent updating or requesting data unless no key had been pressed in the last 0.2 seconds or so: var updateId = 0; function searchKeypress(e) { if ((e || window.event).keyCode == 13) { updateCookie(radioStations.selected); document.location = radioStations.selected.links[0].url; } clearTimeout(updateId); updateId = setTimeout(searchUpdate, 200); } Disclaimer: this piece of code is about 4 years old and as you can see it doesn't even use jQuery, but I trust it demonstrates the principle well enough.
pdaddyo 15y ago
I'd use underscore.js's _.debounce method, simples!