8 ms·
Review my weekend project: Webapp to add CSS to any website and share the result
- kaisdavis 16y agoThis 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 16y agoI'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 16y agoFor 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.
- metachris 16y agoI 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 http://www.csspivot.com/CH7HJ (just a green background)
- endergen 16y agoYou should try to leverage Dustin Curtis' American Airlines remake controversy in some way: http://www.dustincurtis.com/dear_american_airlines_redesign.html http://www.dustincurtis.com/dear_american_airlines_redesign....
- cemregr 16y agoAndrew 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/ http://www.metalabdesign.com/zappos/
- kmfrk 16y agoThe 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.
- egiva 16y agoI 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 16y agoMight 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 16y agoGood 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 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?
- rocktronica 16y agoWell 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 https://skitch.com/rocktronica/rs5nx/csspivot1 External scripts/CSS brought in with "//" falsely prepended with URL https://skitch.com/rocktronica/rs5nk/csspivot2 https://skitch.com/rocktronica/rs5nk/csspivot2
- metachris 16y agoThanks 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:// https:// links (which i noticed that it didn't work because i pasted in your urls)
- karanbhangui 16y agoHave you considered using this: http://chardet.feedparser.org/ http://chardet.feedparser.org/ to detect the encoding? I'm not sure if this helps, but seems like it would.
- metachris 16y agoThank you for the link! Will definitely give it a try (tomorrow)!
- jarin 16y agoI'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 :)
- kmfrk 16y agoOne 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 http://twitter.com/metachris. [1]: http://news.ycombinator.com/item?id=2361034 http://news.ycombinator.com/item?id=2361034
- ookblah 16y agoNot 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!
- blehn 16y agoI 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 16y agoI 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 16y agoI 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 16y agoYou can use this Chrome Extension called Stylebot: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei... Or you can browse themes on http://stylebot.me/ http://stylebot.me/.
- blader 16y agoA good idea well designed. Kudos!
- chr15 16y agoThis 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 16y agoYes, it works by proxying the request and injecting CSS and the header at the right places.
- systemtrigger 16y agoVery cool. Any chance you plan to integrate with Firebug?
- metachris 16y agoSome 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.
- twodayslate 16y agoI 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 16y agoThis 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 16y agoCool! I've just done something extremely similar for a school project: https://github.com/deniszgonjanin/Automagical 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!
- deleted 16y ago[deleted]
- Vivtek 16y agoOne suggestion: add a button on your top bar to view the original site (flip back and forth) to compare before-and-after.
- tnorthcutt 16y agoThis would be a fantastic addition. And if the styles are inserted into the html with jQuery/javascript, perhaps not that hard to implement?
- Haarball 16y agoYes, this. I found myself constantly removing all the styles to compare the custom version to the original.
- metachris 16y agoYes me too, actually. Will add something to toggle between the original and the custom website shortly (tomorrow or the day after).
- Vivtek 16y agoSub-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.
- metachris 16y agoThanks for the suggestion -- will do!
- hjtykyu 16y agoONLINE STORE: ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== Air jordan(1-24)shoes $30 Handbags(Coach l v f e n d i d&g) $35 Tshirts (Polo ,ed hardy,lacoste) $15 Jean(True Religion,ed hardy,coogi) $30 Sunglasses(Oakey,coach,gucci,A r m a i n i) $15 New era cap $12 Bikini (Ed hardy,polo) $20 accept paypal and free shipping ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )==== ====== ( http://www.fullmalls.com http://www.fullmalls.com )====
- navs 16y agoHow 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 16y agoThis and using Javascript to refresh the css without reloading would make this killer.
- metachris 16y agoGood idea -- I'm definitely interested in a lightweight element selecter.
- elliottcarlson 16y agoNice 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 http://www.csspivot.com/1HDq6 in IE will not be a pleasant experience at the moment...
- metachris 16y agoThanks, will do!
- edshadi 16y agoI love it the way it is, no need to add noise. Thank you!
- sam33r 16y agoStylebot is a chrome extension that has similar functionality, with features for easily selecting and manipulating elements on page. https://chrome.google.com/extensions/detail/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/extensions/detail/oiaejidbmkiecgbj...
- metachris 16y agoYes. 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 16y agoThis would have seriously helped me in a project I am currently doing...
- shashashasha 16y agoAwesome 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 https://optimizely.appspot.com/edit#url=news.ycombinator.com
- d2 16y agoThis 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 16y agoI imagine that doing the same concept with javascript would make you an attractive hosting service for phishers.
- gumbo 16y agoNot if you add some banner at the top.
- metachris 16y agoThank 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 16y agoVery 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 16y agoYou should remind the user to add "!important" to their styles. I was puzzled for a few seconds.
- mattparcher 16y agoMaybe 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 16y agoAdded 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 16y agoI love this! I looked at doing something similar with node a few weeks ago - you nailed it so much better than my attempt. Congrats!
- joeycfan 16y agoI'm glad this site is here - I HATE CSS I know it's important, but I still hate it... Here's my site. I basically beat on it, CSS wise, until it sort of worked. http://www.jgsbws.com http://www.jgsbws.com
- iM8t 16y agoWebsites with utf-8 encoding look quite silly.
- metachris 16y agoThe 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 16y agoisn't this already a feature on firebug?
- taphangum 16y agoThat's what i thought. Maybe i'm missing something.
- yemkay 16y agoWill be a good tool for design reviews. Just one feedback: Can the popup be aligned to bottom?
- metachris 16y agoLet 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 16y agoGreat concept. Love it. Adding to my toolkit. Maybe consider leveraging/partnering with http://userstyles.org http://userstyles.org.
- carterdea 16y agoI 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.
- crizCraig 16y agoNice simple design. http://userstyles.org/ 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 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 16y agoBrilliant 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 16y agoAWESOME! I just launched an app with my friends http://takeastand.com.ng 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 16y agoIt's ok. Don't go nuts over how you can monetize/expand it yet, work on features and interface.
- kingofspain 16y agoBeat 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 16y agoIt seems like people say this for every HN post.
- pedrokost 16y agoWoow, 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.
- grandalf 16y agoThis is awesome. Great job. Please don't feel pressure to lay on many new features. I like the simplicity of the concept.
- shazow 16y agoVery 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 16y agoGreat 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 16y agoNice 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 http://www.csspivot.com/y036m (just for ff, srry I have no more time). Good luck with the project! ;)
- metachris 16y agoThanks 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 16y agoneat. here's how i've been viewing HN through the stylish firefox plugin and my custom style: http://www.csspivot.com/PRGZ3 http://www.csspivot.com/PRGZ3
- metachris 16y agoOddly news.ycombinator.com doesn't load in the iframe all the time -- sometimes I need to reload several times.