Comments on: rendur 2.1 - HTML / CSS Rendering Site

rendur 2.1 - HTML / CSS Rendering Site

davebug — Mon, 14 May 2007 12:25:09 -0800

rendur 2.1 - Dynamic HTML/CSS preview in your browser. A quick way to try out a bit of HTML and CSS code. Whatever you put in the box renders to its left. Now works in IE, though it's a bit better in Firefox (thanks to on-the-fly style sheet definitions). [via mefi projects]

By: chuckdarwin

chuckdarwin — Mon, 14 May 2007 12:31:55 -0800

This is just what I needed, thanks.

By: acro

acro — Mon, 14 May 2007 12:35:04 -0800

Is rendur code part of MetaFilter comment preview?

By: chuckdarwin

chuckdarwin — Mon, 14 May 2007 12:36:20 -0800

For the CSS n00bs in the house.

By: delmoi

delmoi — Mon, 14 May 2007 12:36:57 -0800

It would be more useful if the 'rendered' page was in a frame or iframe. having the input box on the same page like that is somewhat sub-optimal.

By: goldism

goldism — Mon, 14 May 2007 12:41:40 -0800

i enjoyed this

By: drezdn

drezdn — Mon, 14 May 2007 12:42:03 -0800

neat!

By: chrominance

chrominance — Mon, 14 May 2007 12:42:10 -0800

It's worth noting that if you're using Firefox, you can get the same effect by installing Firebug and opening a blank page in Firefox to edit. The only thing you can't do (as far as I know) is create CSS for classes and IDs, but you can apply styles directly in the HTML and it'll show up.

By: acro

acro — Mon, 14 May 2007 12:47:19 -0800

Pure CSS popups

By: briank

briank — Mon, 14 May 2007 13:31:55 -0800

Remember the good old days when you got called out if your post wasn't about web design? Good times...goooooood times...

By: quonsar

quonsar — Mon, 14 May 2007 13:33:09 -0800

hey, i figured out a way you can do this with notepad, a browser and your taskbar switcher.

By: Western Infidels

Western Infidels — Mon, 14 May 2007 13:53:12 -0800

It's worth noting that if you're using Firefox, you can get the same effect by installing Firebug...

Opera's built-in "view source" command displays a page's source code in a built-in editor. And the editor has an "apply changes" button for viewing the results immediately. Firebug is very cool too, though. I'm no web-design guru, that's for sure, so maybe I'm missing something obvious here. But it's already awfully easy to slap some HTML, CSS, and JavaScript into Notepad (or similar), and load the file right up in a web browser, isn't it? You can even open the file in multiple web browsers at once to see if your changes work differently in different browsers. How is this page better?

By: itchylick

itchylick — Mon, 14 May 2007 13:58:47 -0800

quonsar: hey, i figured out a way you can do this with notepad, a browser and your taskbar switcher. I agree. Can someone explain to me how this is useful?

By: ChasFile

ChasFile — Mon, 14 May 2007 14:07:46 -0800

quonsar: hey, i figured out a way you can do this with notepad, a browser and your taskbar switcher. I agree. Can someone explain to me how this is useful? Especially given that there doesn't seem to be a way to set, change, or even determine what doctype the page gets rendur-ed in.

By: Gary

Gary — Mon, 14 May 2007 14:17:52 -0800

I agree. Can someone explain to me how this is useful? It's real-time, which makes it better than the notepad/taskbar scenario. It doesn't require additional software, which is also sometimes desired.

By: dw

dw — Mon, 14 May 2007 14:24:13 -0800

The only thing you can't do (as far as I know) is create CSS for classes and IDs, but you can apply styles directly in the HTML and it'll show up. If you click the CSS tab and then "Edit" above it, you can edit the stylesheet itself and add classes and IDs. I was skeptical about Firebug at first, but now I use it as much as Dreamweaver for coding/editing (in conjunction with the Web Developer toolbar). Just wish there was a Firebug for IE.

By: armoured-ant

armoured-ant — Mon, 14 May 2007 15:31:24 -0800

Mac users, see CSSEdit, Coda.

By: chrominance

chrominance — Mon, 14 May 2007 15:35:45 -0800

If you click the CSS tab and then "Edit" above it, you can edit the stylesheet itself and add classes and IDs. Unfortunately that only seems to work if the page already had a separate stylesheet attached. Blank pages don't, and clicking on Edit when the CSS tab is active doesn't do anything. Though it occurs to me that the way around this is to slip a <style> tag in when editing the HTML. Why is this useful? The real-time aspect is what does it for me. I don't have to think about where to save a temporary HTML file, or deleting it afterwards. I just pop open a new tab, enable Firebug, and off I go. I wouldn't use the method for anything serious; it's more for testing if that crazy layout idea you had actually works or not. Firebug is amazing as a diagnostic tool, by the by. I'm not entirely sure how I managed to live without it. It's especially sad that there's no version for IE (well, there's Firebug Lite but you have to use it as a Javascript include, which isn't always ideal). Firefox is fairly predictable with its layout; with IE6 I never have a damned clue when something will break.

By: armoured-ant

armoured-ant — Mon, 14 May 2007 15:51:06 -0800

dw: "Just wish there was a Firebug for IE." Bout as close as you'll get.