
InstaCSS: the CSS docs you always wish you had - idan
http://instacss.com
======
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.

~~~
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.

~~~
tripzilch
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.

------
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.

~~~
bdr
This is a separate question. The URL can be updated without creating browser
history.

------
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!

------
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...](https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-
_ReDoS)

------
highace
It filled my back button up with mess :(

~~~
ashconnor
This is terrible and needs fixing immediately.

------
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...

------
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>

------
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).

~~~
mcpherrinm
FYI: MDN is a wiki. Feel free to add information about other browsers. It's
meant to be docs for the web, and that includes more than just Firefox.

------
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.

------
thushan
I can't take this seriously when it beings like this: "gimmeh teh CSS docs."

------
oinksoft
In addition to the complaints about this flooding history, I expect the
"background" style to appear first once I've typed "bac", and even with
"background" there's some webkit thing first.

------
Antelope
The link is broken for me.

~~~
kittxkat
Jup, for me too. And not even Google Cache shows something.

------
jlongster
I've found MDN to be the best resource: <https://developer.mozilla.org/en/CSS>

~~~
jarek-foksa
This app is using the data from MDN. It's similar to <http://w3viewer.com/>
which makes it easier to browse W3C specs.

------
phzbOx
Hell yeah, thank you. I've been so tired of googling up "css background" and
click 2-3 website and hope they'd show what I want.

------
balac
Really, nice resource. I would love some quick links after a search to save on
scrolling.

~~~
mweibel
You were faster ;) Yes, that was also my first thought :)

------
evilpie
Some linking love to MDN and highlighting the wiki property would be nice.

------
ianmassey
some things aren't meant for automatic submission as you type. this is a good
example. it's annoying.

also - the automatic URL hashing of the query breaks the back button to a
ridiculous degree.

cool content, bad design.

------
tijs
It would be nice if it sorted by relevance; i.e. a search for background would
give you the definition of the background property first instead of the
-webkit-background-composite property which is almost certainly less relevant
(worse match, less used).

------
ErikRogneby
searching for cursor yielded some nice content. A few proprietary things I
didn't know about. Thanks!

------
baby
how is it better than google -> check the first result?

~~~
tikhonj
It's faster and more consistent--I don't have to worry about which site I'm
getting information from each time.

~~~
baby
faster? I think it's less practical since it needs you to add a new bookmark
(and I have way too much of those)

------
lovskogen
What, no azimuth?!

------
J3L2404
<http://news.ycombinator.com/item?id=3222253>

------
sedev
Oh look, it's another site that loads _nothing_ with JavaScript off. What is
wrong with you? Progressively enhance, or gracefully degrade, or display
something other than a completely blank page to non-JavaScript visitors. I
harbor many doubts re: your competence in the realm of usability.

~~~
endtwist
The percentage of users with Javascript disabled[1] is _smaller_ than the
percentage of users using Opera[2].

So there is nothing wrong with choosing to not support 2 out of every 100
users; that's simply a time/cost assessment. What's wrong with you?

[1] [http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-
many-...](http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-
have-javascript-disabled/)

[2] <http://www.w3schools.com/browsers/browsers_stats.asp>

~~~
btucker
Which is all well and good unless users don't have a choice.
<http://en.wikipedia.org/wiki/Comparison_of_screen_readers>

~~~
endtwist
Except, that's a poor argument:
<http://webaim.org/projects/screenreadersurvey3/#javascript>

~~~
ricardobeat
Except that most sites don't care about providing decent clues (correct mark-
up, ARIA attributes, etc) for javascript interactions, so that's also a poor
argument.

