Review my weekend project: Webapp to add CSS to any website and share the result

http://www.csspivot.com

by metachris • 15 years ago

248 93 15 years ago

kaisdavis4• 15 years ago

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!

metachris25• 15 years ago

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

kaisdavis4• 15 years ago

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.

metachris25• 15 years ago

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• 15 years ago

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

http://www.dustincurtis.com/dear_american_airlines_redesign....

cemregr• 15 years ago

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/

kmfrk4• 15 years ago

The completely hopeless cases tend to either require some big HTML rewrites or really laborious CSS.

In general, though, I thought of the same thing, and it might lead to an increased trend in these unsolicited redesigns.

egiva2• 15 years ago

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...?

rocktronica2• 15 years ago

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.

egiva2• 15 years ago

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?

rocktronica2• 15 years ago

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

metachris25• 15 years ago

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• 15 years ago

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.

jarin2• 15 years ago

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• 15 years ago

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

bradly• 15 years ago

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

Here's one for Github :) http://www.csspivot.com/8J5J4

kmfrk4• 15 years ago

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

kaisdavis4• 15 years ago

Yeah, I'd love to be a paying user for this.

jarin2• 15 years ago

BuySellAds would also be a good idea, as the advertisers on there tend to be pretty design-centric: http://buysellads.com/

metachris25• 15 years ago

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

kmfrk4• 15 years ago

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

gumbo3• 15 years ago

Good job. I was thinking this money about something that migth interest you. Here is the short story: Sometime at HN it is penible to read all those hundred comments. There are few possible improvments: - collapsible threads

How about a chrome plugin that allow one to add css to any website? I know it look like a hackers only tool but how freakibg cool this could be.

michalstanko• 15 years ago

There is one already, it's called Stylebot: https://chrome.google.com/extensions/detail/oiaejidbmkiecgbj...

ookblah• 15 years ago

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!

metachris25• 15 years ago

Will do (both)! Thanks.

metachris25• 15 years ago

Both done!

blehn• 15 years ago

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.

twodayslate2• 15 years ago

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.

kaisdavis4• 15 years ago

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.

davido• 15 years ago

You can use this Chrome Extension called Stylebot: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei...

Or you can browse themes on http://stylebot.me/.

blader• 15 years ago

A good idea well designed. Kudos!

chr15• 15 years ago

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?

metachris25• 15 years ago

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

systemtrigger• 15 years ago

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

metachris25• 15 years ago

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.

twodayslate2• 15 years ago

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.

Baadier• 15 years ago

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!

deniszgonjanin• 15 years ago

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!

Vivtek2• 15 years ago

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

tnorthcutt• 15 years ago

This would be a fantastic addition. And if the styles are inserted into the html with jQuery/javascript, perhaps not that hard to implement?

Haarball• 15 years ago

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

metachris25• 15 years ago

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

Vivtek2• 15 years ago

Sub-suggestion, once you have a little time: add a radio button group at the top to group alternate designs for the same site - the first one being the non-changed one.

metachris25• 15 years ago

Thanks for the suggestion -- will do!

navs• 15 years ago

How much noticeable overhead would be introduced by adding something like xray <http://www.westciv.com/xray/>; ?

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

shashashasha2• 15 years ago

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

metachris25• 15 years ago

Good idea -- I'm definitely interested in a lightweight element selecter.

elliottcarlson• 15 years ago

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...

metachris25• 15 years ago

Thanks, will do!

edshadi• 15 years ago

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

sam33r• 15 years ago

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...

metachris25• 15 years ago

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.

peteypao• 15 years ago

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

shashashasha2• 15 years ago

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

d2• 15 years ago

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• 15 years ago

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

gumbo3• 15 years ago

Not if you add some banner at the top.

metachris25• 15 years ago

Thank you! I'm definitely thinking about how to improve the app, added sharing options for fb and twitter, and now also switched over to javascript/iframes (which has the advantage of a 100% accurate display of the website and not needing to reload the whole site for a preview).

JGuo• 15 years ago

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.

ivank• 15 years ago

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

mattparcher• 15 years ago

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.

metachris25• 15 years ago

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.

dayjah• 15 years ago

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!

iM8t• 15 years ago

Websites with utf-8 encoding look quite silly.

metachris25• 15 years ago

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.

Papirola• 15 years ago

isn't this already a feature on firebug?

taphangum• 15 years ago

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

yemkay• 15 years ago

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

metachris25• 15 years ago

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.

crowsfan85• 15 years ago

Great concept. Love it. Adding to my toolkit.

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

carterdea2• 15 years ago

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.

metachris25• 15 years ago

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

carterdea2• 15 years ago

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

crizCraig• 15 years ago

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.

vidyesh• 15 years ago

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!!!

OoTheNigerian• 15 years ago

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.

BasDirks• 15 years ago

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

kingofspain• 15 years ago

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• 15 years ago

It seems like people say this for every HN post.

pedrokost• 15 years ago

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.

metachris25• 15 years ago

Is coming today, for registered users!

metachris25• 15 years ago

done

grandalf• 15 years ago

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

shazow• 15 years ago

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.

metachris25• 15 years ago

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!

jackbach• 15 years ago

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! ;)

metachris25• 15 years ago

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!

there• 15 years ago

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

http://www.csspivot.com/PRGZ3

metachris25• 15 years ago

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

Review my weekend project: Webapp to add CSS to any website and share the result

Related Stories