7 ms·
InstaCSS: the CSS docs you always wish you had
- J3L2404 15y agohttp://news.ycombinator.com/item?id=3222253 http://news.ycombinator.com/item?id=3222253
- Antelope 15y agoThe link is broken for me.
- kittxkat 15y agoJup, for me too. And not even Google Cache shows something.
- highace 15y agoIt filled my back button up with mess :(
- jasonkester 15y agoNice. To avoid the annoying type-to-search feature, just search for "a" and get the whole document at once: http://instacss.com/#a 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?
- angerman 15y agoI second this. An option to see the whole document would be /really/ nice.
- cleverjake 15y agoHere ya go https://developer.mozilla.org/en/CSS https://developer.mozilla.org/en/CSS
- judofyr 15y agoThe query is a regex, so it's pretty easy: http://instacss.com/# http://instacss.com/#.
- obeattie 15y agohttp://instacss.com/#^ http://instacss.com/#^
- leeoniya 15y agoguys, just type "." - regex 101
- estel 15y agoThe first thing I searched for (background-color) wasn't found. Uhh...
- zenijin 15y agoThat's the first thing I searched for too, and also with no success...
- akhkharu 15y agoYeah, I am stuck with that too.
- saurabh 15y agoI searched for it too. Weird.
- billybob 15y agoSame here. Also got nothing for 'inline' or 'block'.
- rgarcia 15y agoWorking on fixing this...looks like the scraper croaked on that MDN page. Thanks for finding this.
- uptown 15y agoThe creator should really put the search field in the persistent top-bar.
- baby 15y agohow is it better than google -> check the first result?
- phzbOx 15y agoHell 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.
- donbronson 15y agoThis site would be even better if they included compatibility. Maybe there could be an API call to http://caniuse.com/ http://caniuse.com/ ?
- mike-cardwell 15y agoMy 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_Service_-_ReDoS https://www.owasp.org/index.php/Regular_expression_Denial_of...
- balac 15y agoReally, nice resource. I would love some quick links after a search to save on scrolling.
- mweibel 15y agoYou were faster ;) Yes, that was also my first thought :)
- deleted 15y ago[deleted]
- makmanalp 15y agoHey, 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.
- jlongster 15y agoI've found MDN to be the best resource: https://developer.mozilla.org/en/CSS https://developer.mozilla.org/en/CSS
- jarek-foksa 15y agoThis app is using the data from MDN. It's similar to http://w3viewer.com/ http://w3viewer.com/ which makes it easier to browse W3C specs.
- antidaily 15y agoRad. Lose this "gimmeh teh CSS docs." to get taken seriously.
- timbonicus 15y agoAgreed, "gimmeh teh" is lolcats idiocy instead of a professional tool. I'm embarrassed to have it up on my monitor in a work setting.
- csomar 15y agoI 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.
- lovskogen 15y agoWhat, no azimuth?!
- initself 15y agoThis design breaks the back button pretty badly.
- sedev 15y agoOh 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.
- retube 15y agoDon't even get a blank page :) Get a "Server not found"
- jgroome 15y ago> What is wrong with you? There's got a be a more polite way to phrase that. Also, while I understand the reasons for disabling JavaScript generally, is this really something to get that upset about?
- sedev 15y ago"Doesn't function right without JavaScript" disabled rates a shrug - JS enables lots of cool stuff. "Displays a completely blank page without JavaScript" is - well, in this case, as others have pointed out, one of the tradeoffs made in pursuit of a 24-hour project. However, in a mature site (I'm looking at certain MSDN blogs), it's very disturbing, it's a big warning flag for "lack of attention to detail." My reactions to broken-without-JS sites spring from security, privacy, usability, and accessibility concerns. "Sites that completely break without JS" is a category that strongly correlates with "sites that have major issues in at least one of those four categories."
- endtwist 15y agoThe 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-users-have-javascript-disabled/ http://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-... [2] http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_stats.asp
- tijs 15y agoIt 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).
- snorkel 15y agoNice, 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 15y agoAgree 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 15y agoYes, needs better separator elements to distinguish between the hits. A condensed default view would help with this though.
- chris_partridge 15y agoAgree, however if there is a single result (such as a background$ query), then show in expanded format.
- oinksoft 15y agoIn 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.
- perlgeek 15y agoIt 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.
- tlb 15y agoNice! 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 15y agoThe 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).
- JoshTriplett 15y agoMDN has started improving that, and showing compatibility information for more than just Mozilla browsers. They already include full compatibility tables for some of the more frequently used features.
- mcpherrinm 15y agoFYI: 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.
- ianmassey 15y agosome 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.
- tomlin 15y agoLove 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 15y agoThe query is a regex, so background$ gets you what you want.
- rgarcia 15y agoHey 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 agoThough 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 agoAn 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 agoWould be nice if you share some of the used backend technology
- rgarcia 15y agoHere 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.
- joeshaw 15y agoOne 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.
- rmoriz 15y agoI think your DNS for www.instacss.com is broken: ;; ANSWER SECTION: www.instacss.com. 300 IN CNAME http://morning-warrior-3377.herokuapp.com/ http://morning-warrior-3377.herokuapp.com/. CNAME accepts only hostnames or (depends on your RFC-acceptance-level) a FQDN. No URI/URL
- rgarcia 15y agoAh, thanks--I've been meaning to fix this. Should be working shortly.
- alexhaefner 15y agoI 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.
- evilpie 15y agoSome linking love to MDN and highlighting the wiki property would be nice.
- ErikRogneby 15y agosearching for cursor yielded some nice content. A few proprietary things I didn't know about. Thanks!
- maw 15y agoI searched for "layout" and found nothing. These are not docs I always wish I had.
- mikedougherty 15y agoAny 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 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.
- thushan 15y agoI can't take this seriously when it beings like this: "gimmeh teh CSS docs."