4 ms·

Show HN: My 24-hour project, instacss.com

90 points by rgarcia 15y ago

http://instacss.com (in case DNS update hasn't propagated: http://morning-warrior-3377.herokuapp.com/) Last night I was annoyed at how slow (and web 1.0-ish) most CSS reference sites seem to be, so I created this. It's basically a scrape of the CSS reference on w3schools, but with client side searching. Feedback is most welcome! some of the tech involved: node, requirejs, backbone, mongodb the code: http://github.com/rgarcia/instacss

noformnocontent 15y ago
needs support for hashtags: http://instacss.com/#background http://instacss.com/#background
- rgarcia 15y ago
  It's on my list of todos! https://github.com/rgarcia/instacss/blob/master/static/js/views/searchheader.js#L42 https://github.com/rgarcia/instacss/blob/master/static/js/vi...
  - noformnocontent 15y ago
    hm, i should have read the code first... although github issues is a better way to go, if crowdsourcing is appreciated
- noformnocontent 15y ago
  [proposal] add some layer of abstractions so different insta-docs (i.e. insta- html5, js, node, some-api) could be easily build on top of that engine
rgarcia 15y ago
clickable: http://instacss.com http://instacss.com (or http://morning-warrior-3377.herokuapp.com/ http://morning-warrior-3377.herokuapp.com/)
greattypo 15y ago
Cool - I will totally use this.
2arrs2ells 15y ago
Any chance you could use the MozDev CSS reference instead? https://developer.mozilla.org/en/CSS/CSS_Reference https://developer.mozilla.org/en/CSS/CSS_Reference
- rgarcia 15y ago
  Thanks for the link. MozDev looks pretty good...I'll look into it some more. (or you could submit a pull request! :))
- drivingmenuts 15y ago
  Yeah. If you can speed up the MozDev reference, you've got something. Also, needs an index for those times when I can't remember what I'm looking for.
- nicwest 15y ago
  or have an option for source (just a radio with a default or something)
Trezoid 15y ago
Placebo search button? Based on effect it doesn't seem to do anything, and visually it looks like it "sticks" and doesn't ever get "pressed" when you click on it. also, it can't handle "gradient" at all.
- rgarcia 15y ago
  Thanks for the feedback--I only search on property names (not descriptions or possible values), so that's why gradient doesn't work. It's a two-line change to add matching on values and descriptions, so I'll put it on the todo list of "advanced" search options.
joliss 15y ago
What's the license for your code? You should put one in before you accept patches. ;-) And the UI is totally awesome.
kittxkat 15y ago
cool, super useful. +++ superfast, the search-as-you-type is especially useful (not having to wait for something you just wanna "quickly lookup if you got it right in your head" is a MASSIVE plus!) - you should really implement a "goto top" button, especially when there are more results - placebo button. why is it there if it doesn't do anything? seems like you search after i type anyway, so why is there a button after all? - wasn't clear what queries the search can handle, i.e. i wasn't sure what exactly could i look up. maybe you could give some examples on the start page, and also i would set the background of the search input field to say something like "search as you type", so it gets more clearer. really, it's a fine site. but as there are only the site title "instaCSS", the tagline "gimme teh css" and a search field, it could have really profit for a bit more information about the service. not much, but subtle. it really wasn't clear what your service can do without the HN subtext.
artursapek 15y ago
W3schools isn't the greatest source. I agree, MozDev would be a better target for your scraping. Also, many examples appear twice. (Try text-shadow, border-spacing)
- rgarcia 15y ago
  just switched to MozDev, try it out!
ykamakazi 15y ago
Love the license btw ;)
grantjgordon 15y ago
Very nice. Way to use Bootstrap!
minikomi 15y ago
Minor nitpick - iOS defaults to first letter capitalized, thus getting no search results. You could either force downcase on the text area or ignore case in the search.
- artursapek 15y ago
  Good call. The author could easily force the query to be treated as all lowercase.
  - rgarcia 15y ago
    yup, fixed!
    - minikomi 15y ago
      Thanks!
hackernews 15y ago
definitively useful, but some feedback: + Need a way to do an explicit search. There are a lot of shorthand properties and searching for "border" requires me to scroll way down to find the border reference doc. If I typed border: it should only show me one result. + The possible values need to be presented in a list. It is difficult to scan that paragraph to determine what are my options. + Make the search box position fixed. Maybe in the header? If no input is present in the search input, show the howto below. Make sure to add a background color to the howto to distinguish from results.
- rgarcia 15y ago
  Thanks for the feedback! The search algorithm is very basic right now, and will definitely change to address the "exact match" scenario. The paragraph was a mistake in the template that should be fixed shortly...
  - Rygu 15y ago
    I really like how you can actually use regexp to search though: "position" vs "^position". How about changing the search box heading to something more instructive, more instant, like "Begin typing a CSS property". Also, I'd like to see filters like :hover. Great job so far!
    - rgarcia 15y ago
      Yeah, I like it too, but I don't think most people will think of typing "border$" to get just the "border" property :)
      - sheppy 15y ago
        A checkbox you can click to do a non-regexp exact match search would be handy.
thegorgon 15y ago
this is awesome. well done.
kenok 15y ago
w3schools? I'd recommend MozDev.
waf 15y ago
My test case was typing in 'background', since I can never remember the order of all the values. It showed a lot of the border-* properties (but not all of them, background-position, for example), and didn't show plain old 'background'
epenn 15y ago
How are you sorting these? I did a search for "border" just to try it out. It returned 18 entries with pretty much every variation of border-*, but border itself was the 16th entry almost at the end of the results page.
- rgarcia 15y ago
  Right now it just sorts randomly, which I admit is pretty bad. The search itself is very basic--it just takes your query and regex matches it on property names in the db.
  - morrow 15y ago
    If you want to keep it simple, you could just sort by length, with shorter property names first. I think that would work pretty well for most cases (border would come before border-color, etc).
julian37 15y ago
This looks really useful, thanks! One suggestion: if you put "color" in the search box, you currently get "border-bottom-color", "column-rule-color", "border-top-color", and "color", in that order. It would make more sense to put "color", the exact match, at the very top. (And probably also to sort the remaining matches alphabetically.)
- rgarcia 15y ago
  Since it's doing a regex search, for now you can type "^color" to match just "color"--I agree it's not optimal!
mrpollo 15y ago
My suggestion would be to add a brief description of what i should be using as an input on your form, I first tried the url of a CSS file, then a selector, then when i started typing the selector i started seeing the actual properties display thats when i knew i had to input a css property, maybe It's just me.
stoodder 15y ago
Love the idea, would be great to have a 'quick' link at the top that could jump me down the page to the correct section. For example. When I search for border, I get all of the possible permutations of that style. It'd be nice to have 'border, border-left, border-right' etc. listed at the top. When I click on one, I get taken to it's section on the page.
JoshTriplett 15y ago
Very awesome. You could use Levenshtein distance (https://en.wikipedia.org/wiki/Levenshtein_distance https://en.wikipedia.org/wiki/Levenshtein_distance) as your search metric. That would provide two advantages: it would handle slight misspellings, and it would find the closest match first ("radius" would prefer "border-radius" to "border-top-left-radius", and "border" would prefer "border" as requested in another comment). You might consider providing a quick list of the property names (perhaps over on the right) in addition to the fully expanded list, to make it easier to tell if you have the right results, and jump to them in the list. Please put the "[source]" links closer to the content; right now they seem more closely associated with the following entry. How about putting the link near the top right of each entry instead? Please don't fade the "default" and "inherited" text so close to white; I found it uncomfortable to read with that little contrast.
JoshTriplett 15y ago
Please consider using the HTML5 history API to change the page location to a URL that will work as a permalink to the search results.
deleted 15y ago
[deleted]
- vecter 15y ago
  You couldn't post this under your original name?
  - deleted 15y ago
    [deleted]
binarydreams 15y ago
amazing, love it!
gregsadetsky 15y ago
This is great, congrats! I would love to have access to Python docs this way (builtins, the standard library, etc.). And Django's methods & template tags too...
Rumnha 15y ago
This is fast. period. But when I searched for 'width' (without quotes) it showed all results (*width) but not for 'width' (exact). Same with 'background' css property. Otherwise it's awesome.
drewsmith 15y ago
After a quick glance, the examples seem to be duplicating for me. Also, is it really an example? It's more akin to an example usage I suppose, but it shouldn't be that hard to provide a true example right? Just slap a div with the inline css or store an example div column along with the example usage column.
sheppy 15y ago
fwiw, we at Mozilla Developer Network think this is awesome. :)

90 points by rgarcia 15y ago

noformnocontent 15y ago

needs support for hashtags: http://instacss.com/#background http://instacss.com/#background

rgarcia 15y ago
It's on my list of todos! https://github.com/rgarcia/instacss/blob/master/static/js/views/searchheader.js#L42 https://github.com/rgarcia/instacss/blob/master/static/js/vi...
- noformnocontent 15y ago
  hm, i should have read the code first... although github issues is a better way to go, if crowdsourcing is appreciated
noformnocontent 15y ago
[proposal] add some layer of abstractions so different insta-docs (i.e. insta- html5, js, node, some-api) could be easily build on top of that engine

rgarcia 15y ago

clickable: http://instacss.com http://instacss.com (or http://morning-warrior-3377.herokuapp.com/ http://morning-warrior-3377.herokuapp.com/)

greattypo 15y ago

Cool - I will totally use this.

2arrs2ells 15y ago

Any chance you could use the MozDev CSS reference instead? https://developer.mozilla.org/en/CSS/CSS_Reference https://developer.mozilla.org/en/CSS/CSS_Reference

rgarcia 15y ago
Thanks for the link. MozDev looks pretty good...I'll look into it some more. (or you could submit a pull request! :))
drivingmenuts 15y ago
Yeah. If you can speed up the MozDev reference, you've got something. Also, needs an index for those times when I can't remember what I'm looking for.
nicwest 15y ago
or have an option for source (just a radio with a default or something)

Trezoid 15y ago

Placebo search button? Based on effect it doesn't seem to do anything, and visually it looks like it "sticks" and doesn't ever get "pressed" when you click on it. also, it can't handle "gradient" at all.

rgarcia 15y ago
Thanks for the feedback--I only search on property names (not descriptions or possible values), so that's why gradient doesn't work. It's a two-line change to add matching on values and descriptions, so I'll put it on the todo list of "advanced" search options.

joliss 15y ago

What's the license for your code? You should put one in before you accept patches. ;-) And the UI is totally awesome.

kittxkat 15y ago

cool, super useful. +++ superfast, the search-as-you-type is especially useful (not having to wait for something you just wanna "quickly lookup if you got it right in your head" is a MASSIVE plus!) - you should really implement a "goto top" button, especially when there are more results - placebo button. why is it there if it doesn't do anything? seems like you search after i type anyway, so why is there a button after all? - wasn't clear what queries the search can handle, i.e. i wasn't sure what exactly could i look up. maybe you could give some examples on the start page, and also i would set the background of the search input field to say something like "search as you type", so it gets more clearer. really, it's a fine site. but as there are only the site title "instaCSS", the tagline "gimme teh css" and a search field, it could have really profit for a bit more information about the service. not much, but subtle. it really wasn't clear what your service can do without the HN subtext.

artursapek 15y ago

W3schools isn't the greatest source. I agree, MozDev would be a better target for your scraping. Also, many examples appear twice. (Try text-shadow, border-spacing)

rgarcia 15y ago
just switched to MozDev, try it out!

ykamakazi 15y ago

Love the license btw ;)

grantjgordon 15y ago

Very nice. Way to use Bootstrap!

minikomi 15y ago

Minor nitpick - iOS defaults to first letter capitalized, thus getting no search results. You could either force downcase on the text area or ignore case in the search.

artursapek 15y ago
Good call. The author could easily force the query to be treated as all lowercase.
- rgarcia 15y ago
  yup, fixed!
  - minikomi 15y ago
    Thanks!

hackernews 15y ago

definitively useful, but some feedback: + Need a way to do an explicit search. There are a lot of shorthand properties and searching for "border" requires me to scroll way down to find the border reference doc. If I typed border: it should only show me one result. + The possible values need to be presented in a list. It is difficult to scan that paragraph to determine what are my options. + Make the search box position fixed. Maybe in the header? If no input is present in the search input, show the howto below. Make sure to add a background color to the howto to distinguish from results.

rgarcia 15y ago
Thanks for the feedback! The search algorithm is very basic right now, and will definitely change to address the "exact match" scenario. The paragraph was a mistake in the template that should be fixed shortly...
- Rygu 15y ago
  I really like how you can actually use regexp to search though: "position" vs "^position". How about changing the search box heading to something more instructive, more instant, like "Begin typing a CSS property". Also, I'd like to see filters like :hover. Great job so far!
  - rgarcia 15y ago
    Yeah, I like it too, but I don't think most people will think of typing "border$" to get just the "border" property :)
    - sheppy 15y ago
      A checkbox you can click to do a non-regexp exact match search would be handy.

thegorgon 15y ago

this is awesome. well done.

kenok 15y ago

w3schools? I'd recommend MozDev.

waf 15y ago

My test case was typing in 'background', since I can never remember the order of all the values. It showed a lot of the border-* properties (but not all of them, background-position, for example), and didn't show plain old 'background'

epenn 15y ago

How are you sorting these? I did a search for "border" just to try it out. It returned 18 entries with pretty much every variation of border-*, but border itself was the 16th entry almost at the end of the results page.

rgarcia 15y ago
Right now it just sorts randomly, which I admit is pretty bad. The search itself is very basic--it just takes your query and regex matches it on property names in the db.
- morrow 15y ago
  If you want to keep it simple, you could just sort by length, with shorter property names first. I think that would work pretty well for most cases (border would come before border-color, etc).

julian37 15y ago

This looks really useful, thanks! One suggestion: if you put "color" in the search box, you currently get "border-bottom-color", "column-rule-color", "border-top-color", and "color", in that order. It would make more sense to put "color", the exact match, at the very top. (And probably also to sort the remaining matches alphabetically.)

rgarcia 15y ago
Since it's doing a regex search, for now you can type "^color" to match just "color"--I agree it's not optimal!

mrpollo 15y ago

My suggestion would be to add a brief description of what i should be using as an input on your form, I first tried the url of a CSS file, then a selector, then when i started typing the selector i started seeing the actual properties display thats when i knew i had to input a css property, maybe It's just me.

stoodder 15y ago

Love the idea, would be great to have a 'quick' link at the top that could jump me down the page to the correct section. For example. When I search for border, I get all of the possible permutations of that style. It'd be nice to have 'border, border-left, border-right' etc. listed at the top. When I click on one, I get taken to it's section on the page.

JoshTriplett 15y ago

Very awesome. You could use Levenshtein distance (https://en.wikipedia.org/wiki/Levenshtein_distance https://en.wikipedia.org/wiki/Levenshtein_distance) as your search metric. That would provide two advantages: it would handle slight misspellings, and it would find the closest match first ("radius" would prefer "border-radius" to "border-top-left-radius", and "border" would prefer "border" as requested in another comment). You might consider providing a quick list of the property names (perhaps over on the right) in addition to the fully expanded list, to make it easier to tell if you have the right results, and jump to them in the list. Please put the "[source]" links closer to the content; right now they seem more closely associated with the following entry. How about putting the link near the top right of each entry instead? Please don't fade the "default" and "inherited" text so close to white; I found it uncomfortable to read with that little contrast.

JoshTriplett 15y ago

Please consider using the HTML5 history API to change the page location to a URL that will work as a permalink to the search results.

deleted 15y ago

[deleted]

vecter 15y ago
You couldn't post this under your original name?
- deleted 15y ago
  [deleted]

binarydreams 15y ago

amazing, love it!

gregsadetsky 15y ago

This is great, congrats! I would love to have access to Python docs this way (builtins, the standard library, etc.). And Django's methods & template tags too...

Rumnha 15y ago

This is fast. period. But when I searched for 'width' (without quotes) it showed all results (*width) but not for 'width' (exact). Same with 'background' css property. Otherwise it's awesome.

drewsmith 15y ago

After a quick glance, the examples seem to be duplicating for me. Also, is it really an example? It's more akin to an example usage I suppose, but it shouldn't be that hard to provide a true example right? Just slap a div with the inline css or store an example div column along with the example usage column.

sheppy 15y ago

fwiw, we at Mozilla Developer Network think this is awesome. :)