Review my weekend project: Webapp to add CSS to any website and share the result | Hacker News Reader

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

csspivot.com

248 pointsmetachris93 comments

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

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

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

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

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

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.

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

Thanks, i missed that one.

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

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

Not if you add some banner at the top.

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

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.

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!

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 :)

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

>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

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!

Will do (both)! Thanks.

Both done!

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

Thanks, will do!

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

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!

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!

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

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

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

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

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.

Thanks for the suggestion -- will do!

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

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)

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.

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

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

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!

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)

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

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

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/

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.

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

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.

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.

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.

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

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.

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.

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.

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.

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

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

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

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

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.

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

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

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!

It seems like people say this for every HN post.

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

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

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

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.

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?

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!

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.

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!

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

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.

Websites with utf-8 encoding look quite silly.

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.

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

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

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.

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

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

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

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.

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?

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

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

http://www.csspivot.com/PRGZ3

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

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.

Is coming today, for registered users!

done

Great concept. Love it. Adding to my toolkit.

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

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

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.

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

A good idea well designed. Kudos!

isn't this already a feature on firebug?

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

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.

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.

Reply on news.ycombinator.com