
Instant CSS, JS, HTML or DOM documentation - steren
http://dochub.io/
======
jsdalton
I continue to enjoy keeping an eye on these single-page style web apps for
very basic content applications. I have a feeling this was pretty quick and
easy for the developers to put together.

That said, a few things jump out at me that make me think this approach isn't
ready for primetime (or to be more precise, takes a lot more work to make it
ready for primetime)

* Individual properties are not reflected in the URL, meaning I couldn't copy and paste a link to someone

* This is using a plain hash instead of a hash bang, which, correct me if I'm wrong, means sub pages are not hit by search engines

* If javascript is disabled and I load this, I get a blank screen.

It's this kind of thing that makes me fearful of pursuing this approach for
more serious projects...

~~~
jashkenas

        > * This is using a plain hash instead of a hash bang, 
        > which, correct me if I'm wrong, means sub pages are 
        > not hit by search engines.
    

Fortunately, you're wrong about hashbangs. They were a temporary hack to allow
the GoogleBot to index Ajax-driven pages before the HTML History API existed.
Because of New Twitter, many sites have cargo-culted the hashbang without
implementing the required "escaped_fragment" functionality on the server-side
to make it actually work. It's the web developer equivalent of an SEO rain
dance.

Please don't use hashbangs in 2011. Use pushState() if you're a public-facing
site that needs to be indexed by search engines.

~~~
jsdalton
TIL. Thanks for disabusing me of the notion that this is a good idea. I have
seen it used in numerous places which is what led me to assume it was the
"right" way.

I assume, then, that the developers of this site could have used pushState()
instead of the hash? I mean, I assume that Backbone encourages this style if
the developer makes use of it.

~~~
jashkenas
Backbone encourages pushState() if you can swing it -- you'll need to
implement every client-side route as a server-side page as well ... so it's
not possible if you're hosted in an inflexible environment. Backbone falls
back to hashes for browsers that don't support the API, and transparently
converts URLs between the two.

But regular hashes ("#") are fine for internal single-page-apps that don't
need google indexing -- of which the majority of Backbone projects probably
are.

It's just the hashbang "#!" that's a particular pet peeve of mine ;)

------
rgarcia
A little background: this started as a hack I made to have quick access to CSS
docs: <http://news.ycombinator.com/item?id=3222253>

Since then, with the help of HNer vecter, it's expanded to encompass some more
things. The goal right now is to expand this into a more general
documentation/code search.

Thanks for the feedback!

~~~
eridius
I have instacss.com in my bookmarks bar. Is dochub.io a "better" site to use,
or does it not matter which one I use?

Incidentally, I find it very strange that when the site first loads, it's a
completely blank page with a Feedback tab on the right. It can sometimes take
quite a while for the actual contents to load.

~~~
rgarcia
instacss.com or dochub.io will take you to the same place, so it doesn't
matter which one you bookmark. We moved the domain just to make the purpose of
the site clearer moving forward.

As for the long initial load time, client-side caching is on the top of our
list of todos, so stay tuned (or just wait for the HN effect to wear off :)).

~~~
eridius
It's not just the HN effect. I used instacss.com yesterday to look up the
allowed values for -webkit-user-select and was rather surprised at how long it
took before the page was usable. That said, the site really is brilliant.

------
maratd
For those that want to install this locally or just to look at the code, see
here:

<https://github.com/rgarcia/instacss>

------
hswolff
Awesome job! I wanted to do something similar and I'm glad I was beaten to the
punch. Keep iterating on the project, the idea itself and the execution has a
lot of room for growth and 'betterness'. Kudos.

------
2arrs2ells
Does anyone else read the url as "do chub"? DocHub.io might be a better way of
presenting the URL.

~~~
paisible
+1

~~~
paisible
Fair enough - was too lazy to write "I agree" instead.

------
paulrouget
The content comes from MDN (Mozilla Developer Network).

~~~
steren
Exactly, and they give credit for it at <http://dochub.io/#about> and this
usage is fine with the CC-by-sa license of the MDN.

I also guess you are fine with this, as it is a useful tool for web devs, who
will make a better web with it.

It can also be a source of inspiration for the MDN itself as it proves that
searching the MDN is slow.

------
kirchhoff
Seems to break the back button.

------
morrow
I created a similar project (CSS docs only) after seeing the original version
of this posted here and thinking of some improvements (instacss I think it was
called). My version uses the HTML5 history API and runs off of static files
(scraped with ruby). If anyone is interested:

<http://morrow.github.com/CSS-Reference>

<https://github.com/morrow/CSS-Reference>

------
theprestig3
Why is it that every time I see a .io domain, I'm not surprised there using
the cliche twitter bootstrap. Other than the lack of originality in design, I
think it's pretty useful. Although I would like to see some decent HTML5
documentation. It's not unusual for me to search several websites for HTML5
docs. Would be nice to have a 1 stop place for HTML5 and the related
languages. Keep up the good work, great project!

------
adrianwaj
Great. Ideas:

\- outline the currently selected item in the left column as clicked (and
remember the setting between sessions)

\- allow the shifting of the left column over to the right side (and remember
the setting between sessions)

\- allow searches by the url (that can jump to the first result)

\- optional: dot each property/function that is new to the latest release of
that modality (for learning purposes)

------
mrjd
It's cool but the lack of unique url's and back button is a shame. Hopefully
that gets sorted.

------
kaichanvong
It looks great... but why so slow?

~~~
micheljansen
It is on the front page of Hacker News? ;)

------
generalk
There was another "instant docs" site posted to HN a while back that had the
same issue this one has: there's no delay between keyup and pushState(), so if
I mistype and backspace a few times I've got a dozen entries in my history.

------
deepkut
Wow, extremely helpful. Thank you for this tool. Though it did take 2-3
seconds to load (which resulted in me refreshing the page thinking it wasn't
working), the documentation is fantastic. I appreciate the contribution!

------
dlf
This is a gem. For someone who just recently learned HTML and CSS (about 6
months ago) I can usually remember just enough to get it wrong. It's handy
that you can just start typing and get to the right thing.

------
blorenz
I'm hoping this becomes my source of front-end reference goodness! It is quite
usable in its current state and has potential for reference of jQuery and
other library/API inclusion. Great work!

------
perfunctory
It took more than 10 sec to load. How is that instant?

------
ChrisArchitect
zah? <http://news.ycombinator.com/item?id=3314910>

------
Hexx
It doesn't seem to be working in IE8 at all for me. Like blank page except for
the feedback button on the right.

~~~
colinm
Yeah. I also get this in IE9.

------
sealo
Why this hasn't existed in some form on the W3C site from day 1 is beyond me.
good job!

------
strager
Similar, but more speedy, less comprehensive (ES5-only), and doesn't break
your back button: <http://www.javascripture.com/>

------
jtokoph
Thank you for locking my back button.

------
abailin
Nice use of Twitter Bootstrap

------
jQueryIsAwesome
A lot of info missing, including insertBefore and appendChild on the DOM
section

