

Review my weekend project: Webapp to add CSS to any website and share the result - metachris
http://www.csspivot.com

======
kmfrk
One of my favourite HN projects in a long time.

You'll have to do a blog post on how you pulled it off some time.

Design feedback is going to be so friggin' easy from now on. If you ever begin
to lose money on this, I'd love to buy a premium account or look into a
subscription model.

(Regardless, you should look into a premium user program. Some ideas:
prioritized bandwidth, custom shorturl for credit(?) such as
/<user>/<shorturl>, a profile to save a history and metrics similar to URL-
shortening services. No ads.

It'd seriously be stupid not to monetize this; I can't emphasize how much I
love your concept.)

You could also reach out to companies looking for redesigns (or -aligns) and
find a way to match them with a designer.

Remember to put up a link on Forrst. Heck, you could turn this into a design
community by your own, where people share redesigns of sites - and you could
implement a favourite and upvote system to reward the best ones. Showing users
how shitty airline websites could look - not just as Adobe mock-ups - is very
powerful. Set up some basic Django, include some thumbnails of each site link
and implement a basic upvote and favourite system - boom, Dribbble for CSS.
Scale later. Basically imitate all the monetization Kyle has done for Forrst.

As someone gravitating between college and no job, finding a way to prove my
skills publicly is very difficult. This service would be great to leverage and
would make it very easy to accomplish this feat. A premium user system could
also allow people to include a pretty embed csspivot portfolio.

And then there's the whole let-me-show-you-what-I-can-do-for-you-application
discussion[1].

If I were anyone on HN, I'd pitch him an offer for a banner on the site,
because there's a very good chance that this blows up and goes viral. If I had
a site or service to plug, I'd already have done this. Here is his Twitter
profile, the only contact information I can see:
<http://twitter.com/metachris>.

[1]: <http://news.ycombinator.com/item?id=2361034>

~~~
metachris
Wow thanks for the great response! A lot to think about -- I'd definitely love
to do something more with it! My contact is chris (at) metachris.org if
anybody wants to get in touch.

[edit] kmfrk: just wanted to send you a mail, but you haven't got a contact in
your profile

~~~
kmfrk
Sending you an e-mail. It's n...e@gmail.com.

------
d2
This is cool. A few suggestions:

* Add a way to delete previews you've made.

* Add more viral hooks. FB wall post, email, etc.

* Do the same concept but with javascript.

* Load each website in a frame with a 50px bar at the top or bottom with your branding and more options. This is where you'll monetize. I know you're focused on usability right now, but if it goes viral you need it to pay you or it will go away.

* Don't bother with premium features until you have a working viral loop providing consistent growth.

Best of luck!!

~~~
stephenhalter
I imagine that doing the same concept with javascript would make you an
attractive hosting service for phishers.

~~~
gumbo
Not if you add some banner at the top.

------
shazow
Very awesome! Suggestions:

1\. Revamp the "Recently viewed" and "new" lists to show the domains instead
of the slugs.

2\. Add "Most popular CSS pivots" for global and for a specific domain, track
the most popular domains for pivots. Possibly add upvote/downvote ratings ala
HN/Reddit.

3\. Promote competitions for "CSS pivoting" specific sites. For example, "Best
rated news.ycombinator.com pivot by April 15th wins a YC t-shirt" or something
(partner with the websites for prizes, they get free design improvements).

Update: When make a pivot to a specific domain, show me "There's 11 other
pivots for this domain" with a link to the list. Make it into something that
could be collaborative/social. Let people fork/clone pivots easily ala github.

~~~
metachris
Great suggestions!

I've improved on #1 (added a "Discover Pivots" button that displays the url's
as well).

I'm working on #2 and definitely thinking about #3! Showing the number of
pivots for a specific domain would also be quite interesting!

------
jarin
I'm sure you'll get a little bit of flak for the name, but this is a fantastic
idea.

It will make my part-time hobby of sending people completely unsolicited
design suggestions even easier :)

~~~
Nat0
I am so glad to hear that I am not the only person that does that :)

------
ookblah
Not quite sure the implementation you have (whether you iframe it or pull
content in and redisplay it), but thought of a few suggestions:

1) inject the style tags w/ javascript and it will refresh the CSS content
without doing a page reload. We do this on our editors and works well:)

2) Make the text box more coder friendly (allow indents, for one).

Great idea!

~~~
metachris
Will do (both)! Thanks.

~~~
metachris
Both done!

------
elliottcarlson
Nice project - I made something like this 10 years ago but with editing the
HTML that was pulled in instead of CSS. Brings back memories :)

Only note; perhaps you should block out CSS expressions, going to
<http://www.csspivot.com/1HDq6> in IE will not be a pleasant experience at the
moment...

~~~
metachris
Thanks, will do!

------
jackbach
Nice project!

After some use, there are some points I'd like to share with you:

* Everytime I save I create a new url. I feel bad, like I'm creating things I'm not gonna use... And this way I can't edit the already saved urls, so if I share one with my friends and then I want to change something, I can't. Maybe you could ask for an optional password before saving.

* If I create a custom CSS, let's say for dribbble, and then I click a dribbble link in the 'frame' in csspivot, the style is not aplied to the loaded page!

Btw, that's what I got: Dribbble Black <http://www.csspivot.com/y036m> (just
for ff, srry I have no more time).

Good luck with the project! ;)

~~~
metachris
Thanks for your feedback! Yeah it only applies the css to the selected page --
will think about extending it though!

I'm working on the ability to update existing pivots (if you are a logged in
user). Should be online later today.

BTW: I really like your dribble variation -- added it to the selected
examples!

------
deniszgonjanin
Cool! I've just done something extremely similar for a school project:
<https://github.com/deniszgonjanin/Automagical>

I'll put up a public demo soon. My implementation uses Node, and pulls the
page html and css, then lets you edit it. If I can make a couple of
unsolicited suggestions:

Right now when you click on a button or a link, it will redirect you to
another website. Add a click handler for all elements and then
event.preventDefault() so that the link doesn't take you off the page. And
second, add a css "outline" style on hover so that the user can see what
they're clicking on.

Great work!

------
Vivtek
One suggestion: add a button on your top bar to view the original site (flip
back and forth) to compare before-and-after.

~~~
Haarball
Yes, this. I found myself constantly removing all the styles to compare the
custom version to the original.

~~~
metachris
Yes me too, actually. Will add something to toggle between the original and
the custom website shortly (tomorrow or the day after).

------
rocktronica
Well done! I'd be ears to a writeup on how you did it: tech considerations,
Ajax, etc.

Super minor nits:

Missing characters <https://skitch.com/rocktronica/rs5nx/csspivot1>

External scripts/CSS brought in with "//" falsely prepended with URL
<https://skitch.com/rocktronica/rs5nk/csspivot2>

~~~
metachris
Thanks for the feedback!

The missing characters are because the of unicode decoding in Python. If the
content-encoding if not found in the html headers it will replace all unknown
characters. I'm working on improving that.

The // is something I can fix right now.

[edit] the // link bug is fixed, and it also allows <https://> links (which i
noticed that it didn't work because i pasted in your urls)

~~~
karanbhangui
Have you considered using this: <http://chardet.feedparser.org/> to detect the
encoding?

I'm not sure if this helps, but seems like it would.

~~~
metachris
Thank you for the link! Will definitely give it a try (tomorrow)!

------
vidyesh
Brilliant work metachris. I suggest really look forward to expand this
project, for budding web designers this seems a excellent tool.

You can really create a community around this, more it goes social the better.
A community would really help everyone discuss over the mockup.

And everything else kmfrk already said in his comment.

Good luck!!!

------
Baadier
This is brilliant,im constantly playing around with ideas using Firebug and
then having to take a screenshot and mailing it,now its much simpler. Plus
having the site with modified css open in the browser window makes it so much
more intuitive for the viewer as opposed to an image. brilliant!

------
metachris
I actually got the idea from a comment here on HN a few weeks ago, and had a
little time on my hands today and did it.

Here's the obligatory HN link: <http://www.csspivot.com/CH7HJ> (just a green
background)

~~~
endergen
You should try to leverage Dustin Curtis' American Airlines remake controversy
in some way:

[http://www.dustincurtis.com/dear_american_airlines_redesign....](http://www.dustincurtis.com/dear_american_airlines_redesign.html)

~~~
cemregr
Andrew Wilkinson's Zappos "Redesign" which almost consisted of just putting
gradients and drop shadows all over the page would definitely be easy with
this project too!

<http://www.metalabdesign.com/zappos/>

------
ivank
You should remind the user to add "!important" to their styles. I was puzzled
for a few seconds.

~~~
mattparcher
Maybe it would be better to add this automatically, even if it’s hidden from
the user? I imagine this would match the intent of most uses.

~~~
metachris
Added a reminder inside the title of the dialog. Didn't want to change the
user's css -- if they copy it out it might no work then.

------
twodayslate
I love it! Great job!

It is so simple too. I don't need highlighting or anything. Don't make it
bloat. Keep the simplicity. This is great.

------
sam33r
Stylebot is a chrome extension that has similar functionality, with features
for easily selecting and manipulating elements on page.

[https://chrome.google.com/extensions/detail/oiaejidbmkiecgbj...](https://chrome.google.com/extensions/detail/oiaejidbmkiecgbjeifoejpgmdaleoha)

~~~
metachris
Yes. But you need to install the plugin to share it -- csspivot.com just let's
you send a link to anyone. I think that beats it.

------
blehn
I like the idea. Here's how I envision it:

Show me all the existing CSS (with syntax-highlighting) in an editor in a
sidebar. Let me modify that or add to it, then share the result. Also,
highlight new or modified code somehow. Basically, a save-able, shareable,
Firebug editor with diffs.

~~~
twodayslate
I like the simplicity though. No need to make it busy and bloated. Most
browsers already have a Firebug or something on them already (or you can add
them yourself). No reason to have two.

~~~
kaisdavis
I agree that there isn't a need to reinvent the wheel, but using it I find
myself wanting some firebug-esq capabilities. I ended up just firing up
inspector in Chrome, but there may be an opportunity here.

Or integrating something like that could ruin the simplicity of the app.

Still, I like this a ton.

~~~
kmfrk
He could add is as an advanced feature of sorts - one that isn't immediately
visible to the average user.

~~~
metachris
Am definitely thinking about it! Got a pretty good backlog of feature ideas
from the feedback here!

------
navs
How much noticeable overhead would be introduced by adding something like xray
<[http://www.westciv.com/xray/>](http://www.westciv.com/xray/>); ?

xray or an even simpler implementation being included would make this service
even greater.

~~~
shashashasha
This and using Javascript to refresh the css without reloading would make this
killer.

------
kingofspain
Beat me to it :) I decided to have a go at this myself last week and got quite
a lot done until the day job interfered. Second comes right after first
though, right?

Nice work getting it done!

~~~
jmacd
It seems like people say this for every HN post.

------
peteypao
This would have seriously helped me in a project I am currently doing...

------
edshadi
I love it the way it is, no need to add noise. Thank you!

------
egiva
I have totally hypothetical (but related) question, though: to what extent
does a site's CSS need to be changed, for that CSS to be one's own? I'm just
not sure to what legal limits people can use your site to save CSS code from
other websites that aren't their own? Again, I have no expertise in this
particular question, but maybe you want to include a small disclaimer...?

~~~
rocktronica
Might be a moot point for this app, since it only _appends_ arbitrary CSS and
doesn't modify the existing.

That's a good question, though. I bet the WordPress GPL decision might have
some relevance to it.

~~~
egiva
Good idea on the _appends_ - who wants to save the entire code for each
iteration, rather than just the changes? (hitting myself over head) haha About
Wordpress: their explanation seems more marketing-related rather than
practical: <http://codex.wordpress.org/License> Maybe going GPL reflects a
core change in their business model, now that they're hitched with all the
Windows Live blogs?

------
dayjah
I love this! I looked at doing something similar with node a few weeks ago -
you nailed it so much better than my attempt. Congrats!

------
JGuo
Very clever concept. I also think it would be nice to easily browse edits by
having the best css modification bubble up to the top.

------
kaisdavis
This is awesome! This will save me a lot of time in communicating small CSS
changes across a team. Thanks a ton for building this!

~~~
metachris
I'm happy it will be useful to you -- I was wondering if it would! Drop me a
line if you have any feedback and ideas: chris (at) metachris.org

~~~
kaisdavis
For sure! I'll try using it when I have the chance and let you know what I
think.

Lightning Edit: and a friend IMs me with questions about CSS. I'm going in.

------
iM8t
Websites with utf-8 encoding look quite silly.

~~~
metachris
The website works fine with all pages that either

(a) have only ascii chars (b) have any utf8-encoded unicode characters (c)
specify the content encoding in the http headers

I'm trying to find a solution.

------
grandalf
This is awesome. Great job. Please don't feel pressure to lay on many new
features. I like the simplicity of the concept.

------
shashashasha
Awesome idea. Right now it's a bit rudimentary but you should look at the flow
that Optimizely has for this.

See how they work here:
<https://optimizely.appspot.com/edit#url=news.ycombinator.com>

------
carterdea
I kept trying to tab to format my CSS and accidentally went to the preview.
That might be for accessibility, but I'd like to ability to Tab the textarea.

Also Syntax highlighting would be great, but I like the simplicity of it.
Don't worry about showing any of the existing css.

~~~
metachris
Thanks! I am working on allowing tabs in the textarea (that's not exactly easy
though). Don't know about syntax highlighting.

~~~
carterdea
syntax highlighting isn't that important. CSS is a pretty simple language

------
yemkay
Will be a good tool for design reviews. Just one feedback: Can the popup be
aligned to bottom?

~~~
metachris
Let me know how you liked it! I'm also just working on settings for registered
users, and that may be one of them.

Now you can also toggle the popup by pressing `, btw.

------
chr15
This is pretty creative. Question about the implementation: are you just using
urllib to read the contents of the provided URL, then overriding the page's
CSS with the user provided CSS?

~~~
metachris
Yes, it works by proxying the request and injecting CSS and the header at the
right places.

------
there
neat. here's how i've been viewing HN through the stylish firefox plugin and
my custom style:

<http://www.csspivot.com/PRGZ3>

~~~
metachris
Oddly news.ycombinator.com doesn't load in the iframe all the time --
sometimes I need to reload several times.

------
pedrokost
Woow, I like it. I could actually use it as a simpler replacement for
Stylebot. However, I have a feature request: let me change the css styles
_without_ changing the url.

~~~
metachris
Is coming today, for registered users!

~~~
metachris
done

------
crowsfan85
Great concept. Love it. Adding to my toolkit.

Maybe consider leveraging/partnering with <http://userstyles.org>.

------
systemtrigger
Very cool. Any chance you plan to integrate with Firebug?

~~~
metachris
Some kind of inspector would be nice, yeah. The downside is that it adds quite
some javascript overhead. I don't know if it's possible to just integrate with
Firebug or Chrome inspector.

------
BasDirks
It's ok. Don't go nuts over how you can monetize/expand it yet, work on
features and interface.

------
blader
A good idea well designed. Kudos!

------
Papirola
isn't this already a feature on firebug?

~~~
taphangum
That's what i thought. Maybe i'm missing something.

------
OoTheNigerian
AWESOME! I just launched an app with my friends <http://takeastand.com.ng> and
I was looking for a way to get design suggestions. I would be glad to get some
for my landing page.

PS: do not take a stand becuse it will automatically post to your FB profile
and I know the HN crowd will not like it.

------
crizCraig
Nice simple design. <http://userstyles.org/> does something very similar via
the very popular "Stylish" Firefox and Chrome extensions. Before I knew about
user styles I had a similar idea and made a prototype on
<http://perfecttheweb.com>. I have some advice on how to proxy difficult sites
like drpepper.com (though perfecttheweb does not implement it) if you're
interested. Just gmail craig.quiter.

