InstaCSS: the CSS docs you always wish you had

[rgarcia]

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.

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]

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]

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.

[danielsoneg]

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.

[level09]

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

[tomlin]

Love it. One thought - have standardized CSS listed first. I type in "background" and get "-webkit-background-composite" as a first result. I'd probably want to see just "background" come up, followed by declarations less popular. Regardless of this minor issue, I'll be using this regularly. Thanks for this!

[pilgrim689]

The query is a regex, so background$ gets you what you want.

[makmanalp]

Hey, pretty cool but you should have a delay between when the user types something and when the url gets updated and a query gets made. i.e. some sort of definition of "user stopped typing". This improves usability by a ton.

Second is, maybe you should have a sidebar on the right that shows you clickable / keyboard navigatable titles of all the search results so I don't have to scroll down browsing.

[mckoss]

Agreed. The back button is made almost useless since it is stuffed with each intermediate typed character.

[snorkel]

Nice, but a few UX nitpicks:

* Default to sort by relevence: Put the more relevant matching properties at the top. For example, I type "backg" instead the highest result being the obscure "-webkit-background-composite" ... actually most relevant result "background" which should be the first result instead of the third.

* Default results list to condensed format: Instead of showing the full verbose docs for every matching result instead show a sparse summary of each result with a option to expand it. If there's only one matching result then show the complete doc for it

* Nice example palette for standard colors. How about an example palette for the standard font families?

[Stuk]

Agree with all of these points, especially the condensed-at-first display.

I would also like it if the search box was in the fixed header, so I don't have to scroll back to the top to re-search.

Otherwise nice tool!

[antonp]

Yes, needs better separator elements to distinguish between the hits. A condensed default view would help with this though.

[chris_partridge]

Agree, however if there is a single result (such as a background$ query), then show in expanded format.

[mike-cardwell]

My immediate thought when I saw this was:

Takes regular expressions as user input. Probably DOS'able.

After looking at it for a few seconds, I realised that it's doing the regex matching on the client side, so it's ok.

If you ever accept arbitrary regular expressions as user input, be very careful: https://www.owasp.org/index.php/Regular_expression_Denial_of...

[highace]

It filled my back button up with mess :(

[ashconnor]

This is terrible and needs fixing immediately.

[leeoniya]

yes, history clutter no good at all :(

[donbronson]

This site would be even better if they included compatibility. Maybe there could be an API call to http://caniuse.com/ ?

[antidaily]

Rad. Lose this "gimmeh teh CSS docs." to get taken seriously.

[timbonicus]

Agreed, "gimmeh teh" is lolcats idiocy instead of a professional tool. I'm embarrassed to have it up on my monitor in a work setting.

[estel]

The first thing I searched for (background-color) wasn't found. Uhh...

[zenijin]

That's the first thing I searched for too, and also with no success...

[rgarcia]

Working on fixing this...looks like the scraper croaked on that MDN page. Thanks for finding this.

[billybob]

Same here. Also got nothing for 'inline' or 'block'.

[saurabh]

I searched for it too. Weird.

[akhkharu]

Yeah, I am stuck with that too.

[jasonkester]

Nice. To avoid the annoying type-to-search feature, just search for "a" and get the whole document at once:

http://instacss.com/#a

Edit: ugh, that doesn't actually work. It only gives you p-z. Hey instacss! Please provide us with a link to the actual document. Preferably in plain HTML so we can download it. Alternately, anybody care to scrape this thing and post it in full?

[cleverjake]

Here ya go https://developer.mozilla.org/en/CSS

[judofyr]

The query is a regex, so it's pretty easy: http://instacss.com/#.

[obeattie]

http://instacss.com/#^

[leeoniya]

guys, just type "." - regex 101

[angerman]

I second this. An option to see the whole document would be /really/ nice.

[initself]

This design breaks the back button pretty badly.

[uptown]

The creator should really put the search field in the persistent top-bar.

[rmoriz]

I think your DNS for www.instacss.com is broken:

;; ANSWER SECTION: www.instacss.com. 300 IN CNAME http://morning-warrior-3377.herokuapp.com/.

CNAME accepts only hostnames or (depends on your RFC-acceptance-level) a FQDN. No URI/URL

[rgarcia]

Ah, thanks--I've been meaning to fix this. Should be working shortly.

[joeshaw]

One minor bug: I notice the anchor (and results!) changing as I type and backspace, but if I backspace all the way to an empty it is stuck on the single-letter anchor. Would be nice if it cleared out entirely and took me back to the empty front page.

[mikedougherty]

Any chance of getting it to apply the filter on page load as well? It appears that it's not possible to link to a result set. i.e., if I send someone a link to http://instacss.com/#background in order for results to be shown they must perform a keypress of some sort in the search field.

edit: Apparently if you've searched something before it does display it on page load (after a brief delay)? So it seems this link might not be a good example URL. But hopefully you can just edit the URL and submit it directly to see what I'm talking about.

[perlgeek]

It would be nice to show something more useful on the front page before the user types anything into the search box. Like an index or a table of contents or so.

[alexhaefner]

I wouldn't say these are the css docks I wish I always had. see I want better presentation. I don't really want to scroll through the actual CSS docs from W3C, I want to get some quick view of what my search query returned (property, {values}, notes). After that I could click on the entry for that property and read it's docs. It's just information overload. Nice work though, but that's my suggestions.

[tlb]

Nice! It's great that it has detailed version support info, like:

  *Support for multiple, comma-separated, background images was added in Gecko 1.9.2.*

but I wish it showed what fraction of web users that represents. Maybe with a little green/red fuel gauge icon.

[jordanlev]

The OP said he's pulling the data from MDN (Mozilla Dev Network I think?), which means all the comments are only going to be Firefox-related. What I would want is for it to show all browsers and what version the feature is available in (but if he's automating the data pull, this probably isn't going to happen I imagine).

[maw]

I searched for "layout" and found nothing. These are not docs I always wish I had.

[csomar]

I typed "^color$" and it wreaked havoc on my page history. Usually, I open the story in the same window then hit the back button to see the comments. This time it took me handful clicks before I get to my previous page.