Geekfindr: XHTML & CSS
I’ve just started messing around a little bit in the htmlPlayground. It’s a pretty interesting site - it let’s you interactively play around with xhtml and css attributes while showing you the output of your efforts.
The site is pretty cool, with several panes that list all the tags, css attributes, a little contextual description and sample code and sample rendering. It does a nice job of focusing in on the single tag you have chosen so you can easily isolate and see what effect your coding gyrations have on that hapless tag. When you click a tag in the tag list, it gives you the sample code with a very simple inline css directive for that tag. If you click on the css element you’ll get a list of all css attributes. Unfortunately, that list isn’t context sensitive so it doesn’t just show you the elements that are appropriate to the tag in question, but the entire set of all attributes.
The attributes all have a button next to them that let you set their values which is automatically reflected in the sample code pane (as well as the sample rendered pane). Clicking on the button brings up a contextual window that gives you all the options that are available for that attribute.
The site is pretty slick, but it falls short on a couple fronts that are relatively minor but would really improve useability. The first thing, I mentioned above, is making the css list context sensitive so only attributes that matter would be shown. The second is a wierd thing where in order to get the description of a css attribute you first have to give it a value so it shows up in the sample code and then click on the attribute in the sample code. You should be able to get that help directly from the css list. Also, it would be really nice if the description of the attributes contained a description of what the various possible values meant.
Overall, though, I really like the site. It’s new enough to me that I haven’t had yet to actually need to use it to help me figure something out but I suspect that it’ll be pretty useful. Easier than experimenting and reloading html pages, since it’s all javascripty and dynamic. Immediate gratification is very nice. So, give it a whirl and see if you like it.
