

Visualize How CSS Rules Interact with a Page - uptown
http://css.benjaminbenben.com/

======
benjaminbenben
Yup - It's been falling over quite a lot in the last couple of hours! It is
all served through cloudfront so that the popular urls get cached (which is
why I added the example links - so they would hit the cache). I've just thrown
a whole load more heroku dynos at it, so it seems to be working okay again
now!

(I built this!)

~~~
sergiotapia
Out of curiousity how many dynos did you add during this peak time?

~~~
benjaminbenben
I went to 5 and was still seeing a lot of errors, so upped it to 10.

~~~
psychometry
Do you know about Adept Scale?

<https://www.adeptscale.com>

~~~
benjaminbenben
I didn't. That's fantastic - exactly what I needed; added it and gone back
down to 2 dynos.

------
Groxx
Neat, though I haven't been able to get it to load anything but the examples.
Is this done server-side, and it's just overloaded? Or is there something odd
about e.g. yahoo.com ?

~~~
benjaminbenben
yup, it's just overloaded at the moment. It's serverside using phantomjs - I'm
running it through cloudfront so the common urls are cached there.

------
cheshire137
I think I'm making it angry. I tried 3till7.net and then civchoice.com, both
of which 'failed to load'.

------
dm8
Cool. I'm curious - how'd you do it? Is there any open source library to find
out CSS rules?

~~~
benjaminbenben
document.stylesheets - [https://developer.mozilla.org/en-
US/docs/Web/API/document.st...](https://developer.mozilla.org/en-
US/docs/Web/API/document.styleSheets)

The main part of the injected code is
<https://gist.github.com/benfoxall/5647039> \- there's a bit of hacking round
cors issues there too.

------
nuclear_eclipse
Is there not a way to scroll down the target page, or am I missing something?
I would love to be able to see this for the lower portions of my site, but it
seems that I only can only scroll through the CSS styles themselves...

~~~
arb99
Zooming out (using the browsers page zoom i.e. cmd/ctrl -) kind of works.
There is a html element <div id="zoom">-</div> on the page though but can't
actually see it. I'm guessing that will zoom the page out.

~~~
benjaminbenben
That's the minus sign on the bottom right - it's for zooming the css list so
that it's all in view (it was originally built to see if appended styles were
more specific on a page).

------
meerita
For some reason my website isn't loaded on the left side. I see my rules, but
not the screen. My website loads in 300ms or a bit more and it's way
optimized.

<http://minid.net>

------
dubcanada
Little confused... Why do like 90% of the css tags either go to the very top
left or to the bottom left? Shouldn't every tag have a specific area?

------
leeoniya
i'm not sure how useful this is compared to something like a css profiler, but
it's definitely cool

~~~
benjaminbenben
thanks. Yeah - it's not as useful as something like css profiler, I built it
to work out if there were ways that I could architect my css in a more
efficient way.. Though it looked cool, so I threw it online!

------
Raphael
I don't understand. Are the blue lines supposed to represent something?

------
kirbysayshi
Seems to be broken in FF 23

~~~
benjaminbenben
yeah - there were issues in FF dealing with large data-url embedded images in
a json file. I'm looking into it though.

~~~
bzbarsky
Please do file a bug with a testcase if you have a testcase. That should make
it pretty simple to determine where the problem is.

