Discover the best of the web!
Learn more about Digg by taking the tour.
Rendr
gregtaff.com — Rendr is a live CSS and HTML rendering tool. It displays what the page would look like as you type, making it great for rapid testing of page designs.
- 1212 diggs
- digg it
- meowcow, on 10/12/2007, -14/+11cool stuff
- zatrix, on 10/12/2007, -3/+5now all it needs is syntax highlighting
- poil11, on 10/12/2007, -13/+8looks good!
- MatthewWilkes, on 10/12/2007, -18/+1bury..
- aplusplus, on 10/12/2007, -38/+15Ah, Firefox only - weak.
- xerus, on 10/12/2007, -33/+2Yeah =(
- appy77, on 10/12/2007, -24/+13yeah, whats up with that? since when did people start to force people to get firefox in order to view their website?
- Clbck, on 10/12/2007, -11/+19What's wrong with firefox?
- panique, on 10/12/2007, -1/+12I was wondering why it seemed broken. Using Safari.
- IAmAI, on 10/12/2007, -5/+11Personally, I have nothing against circumventing Internet Explorer :)
This is assuming it works in all other browsers too. - Nitrodist, on 10/12/2007, -6/+23It has nothing to do with forcing to use Firefox. What it has to do with is technology advancing. The web is a thing that's alive and evolving so if IE doesn't want to keep up it's their fault. This CSS stuff is open standards so it's not forcing anyone to upgrade.
- itsnotvalid, on 10/12/2007, -2/+4A reason I could think is that IE has its own way of doing things that not all of us here would follow.
- Agret, on 10/12/2007, -2/+8Working fine with K-Meleon and Opera.
- pozzoe, on 10/12/2007, -2/+4I have nothing against it not being coded, I mean, hacked for IE. But does it work in Opera, Safari, Konqueror and other reasonable browser?
- Grimdotdotdot, on 10/12/2007, -1/+8I disagree - coding something to only work in one Browser is lazy.
If this had only worked in IE (or maybe even Opera) it wouldn't have got near the front page. - MatthewWilkes, on 10/12/2007, -13/+4Indeed, no digg and lamed. Firefox only is pathetic (posting this from Deerpark – don't worry, I don't actually USE IE).
Especially bad as Firefox can pretty much do this with the help of Chris Pederick's excellent Web Developer ext. - ojk007, on 10/12/2007, -2/+17[bitching]
Before you all keep bashing Firefox, i will tell you why its Firefox only.
This site uses CSS3 which is only implemented in Firefox, because of this is will not work on other browsers. So either Keep Up With The Times OR stop your IGNORANT Whinging!!!
[/bitching] - M4v3R, on 10/12/2007, -0/+3It works in Konqueror under linux too.
- Lostangel, on 10/12/2007, -0/+4@Grimdotdotdot
Might want to notify Microsoft about that. They must be the laziest company in the world as most of their websites have never worked in other browsers. - Grimdotdotdot, on 10/12/2007, -1/+1"Most of their websites"
You mean Windows update, don't you? - twollamalove, on 10/12/2007, -0/+1Actually, dude, I would venture to guess that Opera has more support for CSS3 than the Fox.
- customgamer, on 10/12/2007, -14/+3I heart Web 2.0
- toxicredm, on 10/12/2007, -4/+1delete comment
- Dempf, on 10/12/2007, -10/+4Wow...that's pretty awesome. Maybe i'll finally learn html/css
- short_man, on 10/12/2007, -14/+3finally? wow, i thought everyone could code html...
- itsnotvalid, on 10/12/2007, -13/+6HTML isn't even code...
- Dempf, on 10/12/2007, -10/+4Lawl...everyone except for n00bz like me
- Quakes, on 10/12/2007, -2/+8@itsnotvalid
Doesn't a markup language count as code? - liquidhot, on 10/12/2007, -5/+1@Quakes
For the last time (again)...
[Copy and Paste] HTML is markup language. It is not code. HTML makes paragraphs or tables, code has logical operators that allow you to perform actions. [/Copy and Paste]
This has been a test of your Emergency I-Code-In-HTML Broadcasting System. Had this been a real emergency, digg would have exploded. - Khuffie, on 10/12/2007, -0/+8@liquidhot, I suggest you look up the definition of code. Whether you're writing in HTML or C++, you're still 'coding', however, you can't be considered 'programming' in HTML whereas you're programming in C++.
- FogDogg, on 10/12/2007, -0/+12Works fine in Opera, and probably any other browser that supports web standards...
- cursor, on 10/12/2007, -2/+14This has to be one of the shortest titles for a digged story :)
- sgtpinky, on 10/12/2007, -9/+2Press the Red thumb, Neo.
- parkerault, on 10/12/2007, -11/+2AWESOME!
- latour, on 10/12/2007, -8/+2that's awesome, nice work.
- noneloud, on 10/12/2007, -0/+4I love the simplicity and accuracy of this page, but the minute I started using < DIV > overlays it became unusable as they covered the text field. I don't like iframes, but I think this would be a suitable time to use them; you could have one to show the rendred page and the other with the text box. I'm not sure if that's even possible, but I think it would make it more functional.
- squarehappy, on 10/12/2007, -1/+1Make a container div with position: relative; All absolutely positioned content will stay inside the div and out of the input field's way.
EDIT: Well, that should've worked but it just made the input fields unclickable for me. Go figure. - lane.montgomery, on 10/12/2007, -0/+1That's where z-index would help.
- squarehappy, on 10/12/2007, -1/+1Make a container div with position: relative; All absolutely positioned content will stay inside the div and out of the input field's way.
- logic, on 10/12/2007, -8/+2Wow!!
- nihlton, on 10/12/2007, -0/+5aplusplus - IE couldn't handle the operations at work here. The app modifies the CSS rules by setting the innerHTML of a style tag (kind of a hack, but Im not about to write pages and pages of code to load CSS syntax into the DOM). IE doesn't bother to reinterpret the contents of style tags once the page is loaded. Im not positive that safari and opera do either. So yeah, firefox only :(
think of this as one more reason to switch :P
-greg
noneloud - so ya know, you can move the textfield around. does that help?- Agret, on 10/12/2007, -5/+2There is a reply button for a reason you know?
- noneloud, on 10/12/2007, -1/+1Acctually, it wasn't readily apparent that I could move the box until you said that. It's just not that obvious. Either way, the functionality is lost because now that I moved it out of the way, I have to scroll over to edit code and scroll back to view the results.
I just think there has to be a better way to do this. None the less, I think it's a good idea and a very streamlined implimentation; kudos for that.
- googlyguy, on 10/12/2007, -0/+7The Web Developer Toolbar extension to Firefox already incorporates the live CSS editing feature. Just press Ctrl-Shift-E and from there you can edit any type of CSS on the current page.
Get it here: https://addons.mozilla.org/firefox/60/ - johnsto, on 10/12/2007, -0/+2The 'Edit HTML' feature of Firefox's web developer tools is also handy for doing similar things to this. I use it all the time, it's terrific to see it change right in front of your eyes :)
- johnsto, on 10/12/2007, -1/+1doh, shoulda looked up :)
- ThankTheCheese, on 10/12/2007, -0/+3fantastic. This would be an especially useful tool for teaching CSS to students. Dugg and bookmarked.
- superfunbob, on 10/12/2007, -5/+1Weak. I don't want to code in a textarea. This might be cool if you can tie it in to an IDE... oh wait, that's what WYSIWYG is for. WYSIWYG is lame too.
I don't mean to start a flame war, but there is hardly any code here. I can't believe that it got so many diggs. Is anybody actually going to use this?- willcode4beer, on 10/12/2007, -0/+1Would have been really cool to slap on some Google Adsense before posting to digg ;-)
- trevorsm, on 10/12/2007, -2/+4Hey, he left out an 'e' between the 'd' and the 'r'... how clevEr of him.
- otomo, on 10/12/2007, -0/+2Works fine in safari 2.0.3
What version was having problems? (from above)- kolywater, on 10/12/2007, -0/+0im running 2.0.3. html editing works, css editing doesn't work for me.
- elpepe, on 10/12/2007, -3/+2Ths s rlly wsme
- Brutal, on 10/12/2007, -1/+2Cutting the last vowel is SO last year. Why not just call it RendEr?
- dcipjr, on 10/12/2007, -1/+2Yeah, it's seriously getting lamr and lamr.
- nihlton, on 10/12/2007, -2/+5superfunbob - you can direct any ire at me. I made it. :) May I ask, what do you write code in? I usually scribble mock-ups out in notepad so a text area already feels like home.
hardly any code here - its it beautiful? You could feasibly shave the whole thing down to two text areas, an output div and include the one line of code found in the onkeyup event.
Is anybody actually going to use this? - I use it all the time for prototyping. If im hot and heavy in the middle of a huge project I use an industrial grade text based editor, but this is great for when you wanna get right into coding. Not to mention the time saved from saving your work in the editor - switching to the browser, hitting refresh, switching back to the editor, making changes, saving your work... etc etc.
regarding the CLEVr name - its very tongue-in-cheek. I originally posted to metafilter projects with the note: "please note AWESOME web 2.0 name! that means its good." I suppose if i blanket the whole thing in gradients the sarcasm will come through better.- superfunbob, on 10/12/2007, -0/+0nihlton - I use HomeSite for HTML/CSS/JS/Perl/Ruby/XML/CF... the list goes on. Just started playing with Vim. For Java I use Eclipse, Notepad for quickies, and Netbeans (sad but true). For Flex 1.5 I use Flexbuilder (unfortunately). For SQL I use query analyzer and MySQL query browser (barf). I haven't done any C or C++ in a while, but I use a combination of Emacs and MS Visual Studio for that. For .NET I use the defacto VS.NET.
My point isn't that your app is not cool. It's a nice idea, and I give you credit for development with very few lines of JS which is great. It's clean and responsive. Props :)
I guess my real problem is with all of the previous comments that give major credit for what is being touted as a breakthrough in rapid web development:
1) This thing is not really groundbreaking. Inline/Real-time editing is not a new idea, and the only difference is that you're using a web page to do something that is ordinarily done with an IDE.
2) I don't see how this really helps you if you are developing cross browser code. Do you cut and paste your code into a different browser's textarea every time you want to test your edits in FF, Safari, or IE? I don''t see how you can get around using some sort of a refresh or doing a laborious cut and paste across browser windows and possibly even multiple machines.
3) The idea of using this in a real dev environment sounds completely absurd to me. I don't want anybody on my team taking the time to look up documentation every time they can't remember a property name (code completion is your friend). There is no integrated SCM which slows people down.
Like I said, if this were integrated into an IDE, it would be great, but it's already been done.
Finally, if you really use notepad for all of your dev, then I highly suggest checking out an IDE. I'm guessing that you do this because of how lightweight the development environment is. If that's the case, then you have plenty of options that at least do code completion and color coding.
I use notepad for the purpose it was built... taking notes (and even then, I prefer editpad lite).
- superfunbob, on 10/12/2007, -0/+0nihlton - I use HomeSite for HTML/CSS/JS/Perl/Ruby/XML/CF... the list goes on. Just started playing with Vim. For Java I use Eclipse, Notepad for quickies, and Netbeans (sad but true). For Flex 1.5 I use Flexbuilder (unfortunately). For SQL I use query analyzer and MySQL query browser (barf). I haven't done any C or C++ in a while, but I use a combination of Emacs and MS Visual Studio for that. For .NET I use the defacto VS.NET.
- Grimdotdotdot, on 10/12/2007, -0/+1You'd think with them only supporting one browser they could get the layout on their 'help' tab right.
- edward301, on 10/12/2007, -2/+1Personally the real time HTML Editor seems better :http://www.squarefree.com/htmledit/
- tybris, on 10/12/2007, -0/+1Better or different (no css)? It certainly screws up the back button :(
- telielio, on 10/12/2007, -2/+0I
- Dotnetsky, on 10/12/2007, -2/+1Sorry, I have to press the Fart button on this one. No digg.
- gazza1934, on 10/12/2007, -0/+2Gently, and not being controversial, if you are not an experienced programmer it is ace. You can experiment and generally play around and see the way things will look. Yes, it would be good if it worked in all browsers but, as it stands, it is a great way of enlightening absolute beginners - me - on the merits of .css.
- yahoofrom, on 10/12/2007, -0/+1Now if sombody could combine that with a javascript editor.
- wusch, on 10/12/2007, -0/+1hehe, yes this is great fun - try: body { display: none; }
but useful thing :D - jmccorm, on 10/12/2007, -0/+2As our great friend Fipi would say, [this is good].Nice job, dude.
- CaughtThinking, on 10/12/2007, -2/+1Stop posting firefox only sites. They're USELESS.
Imagine if the government just didn't govern the entire midwest because "they're dumb and behind the times"
Or we didn't allow 70% and under in schools to graduate "because they're stupid"
IE is REALITY, so deal with it. Any page that deals with Firefox only is just a waste of time.- nihlton, on 10/12/2007, -0/+0eh, im not trying to make money off this little app, so I don't mind giving IE the angry finger. And even so, I couldnt include IE even if i wanted to. IE doesn't reinterpret the content of style tags after the page loads so the CSS tab would be out of comission.
however, if IE users want to start paying taxes to me, ill gladly support their browser :P - kodeiko, on 10/12/2007, -0/+2I have it working in Opera 8.5x and Firefox 1.5 in Windows. Sure you will argue those 2 represent a small percentages of web browsers being used, but you're really just behind time as IE6 is really backward. Yes, business should cater to IE because it's a major percentage and they need customers (the origins of profits) but who are you to decide what this (CSS thingy) author's targetted audience is? Just cause you're behind time doesn't mean the whole world has to lag with you, seriously. Please, stop bitching. Even if this site is Firefox only, it's by no mean "useless". If it's for "IE" only, ah then that probably is useless.
- CaughtThinking, on 10/12/2007, -0/+1I'm not as much barraging you, nihlton, as trying to point out that standard purpose sites like Digg have an expectation for cross browser-ness... If they're going to label something as "cool renderer" they should post it's firefox only so we don't get to the page only to be disappointed.
Maybe what Digg needs are some icons indicating compatability... i dunno.
- nihlton, on 10/12/2007, -0/+0eh, im not trying to make money off this little app, so I don't mind giving IE the angry finger. And even so, I couldnt include IE even if i wanted to. IE doesn't reinterpret the content of style tags after the page loads so the CSS tab would be out of comission.
- jonbach, on 10/12/2007, -1/+0This is dumb....ONE LINE of javascript. I've done this for years as an aid in programming. If I had known such petty things would make Digg frontpage, I would have made a better one (you know, TWO LINES of javascipt so it works in all browsers) and posted it!
- nihlton, on 10/12/2007, -0/+0I dare you to make one that can alter non-inline CSS rules on the fly that works in IE.
- xchbla423, on 10/12/2007, -0/+1Ah, and like all other web 2.0 services it's name is one word ending in -r instead of -er.
As for the firefox only thing-I don't mind since firefox is the browser I use, but I find it amusing that you guys get up in arms at the people complaining that it's firefox only. If it were IE only you would be the first to complain. - bpapa, on 10/12/2007, -0/+1It appears to be down... anybody know what happened to it?
Digg is coming to a city (and computer) near you! Check out all the details on our