The Geekorium

Wave has a WYSIWYG interface for styling your blips. For those of us used to working on the web however, the default Bold/Italic/Dot-point tools can leave a lot to be desired. Many wont have a character pallet handy, or remember the windows/mac keyboard codes for producing various glyphs either. But if you’ve worked on the web long enough, you might be familiar with HTML/unicode character entities such as & (&) and • (•).

If you need to add various characters to your waves, and are familiar with HTML entities, then the Character Entity bot might be what you need. Add character-entityappspot.com@ to your wave, and whenever you write a character (in the format &code;) the bot will happily convert the code into the correct characters for you.

Here are a few to try:

• © becomes ©
• ↔ becomes ⟷
• ∴ becomes ∴

A more detailed list can be found at W3 Character Entity Reference Chart

Character Entity Bot [Google Code]

I’d not call myself a website coding guru. In fact, my learning has only really started. In creating the design for my site, I’ve learned a couple of important CSS coding tricks that I had to learn from disparate sources all over the web. I hope by putting them here that I’ll cement them in my own brain, and maybe they’ll help you too. They’re elementary things but they may not be obvious at first glance.

Understanding “position:absolute”

The selector position:absolute is relative to the closest parent element explicitly marked with position:relative. If nothing is marked with position:relative the element will be absolute from the top of the page.

In my theme, I wanted to attach the post meta-information in its own separate column on the left there. In the flow of the page, the meta-information sits above the entry.

This is my HTML:

(Oh dear, I’ve lost whatever used to be pointing here - Snippet 864, whatever that was!)

The problem with positioning elements is that if I move the “postmetatext” element to the left, the following heading and the “entry” div get shifted as well. What I want is to keep them in the flow, but move the “postmetatext” div outside the margins of the “post” div.

To force the div marked “postmetatext” outside the margins, I had to use position:absolute, but then the text sat in a position that was absolutely aligned with the top of the page. By marking up the “post” div with position:relative, I reset the absolute positioning on the “postmetatext” child element.

The CSS:

(Oh dear, I’ve lost whatever used to be pointing here - Snippet 865, whatever that was!)

Don’t use “padding” for positioning when “margin” will do

Internet Explorer will give you grief if you rely exclusively on padding for positioning. I can’t think why you might, but one of my rookie mistakes was using padding a little too liberally, and fantastic layouts were entirely ruined on IE. By using the margin selector where it made no difference otherwise, I created a layout that works in pretty much every browser I threw at it.

But don’t use “margin” for positioning absolute elements

In the example above, I used top and left to spin the post meta-information out into the left column. Again, this will save you grief in IE and works well cross-browser. Using margin in combination with position:relative can be very unpredictable from browser to browser.

The cure-all: clear:both

This is the answer to all your problems. Inline elements stacking on top of each other? clear:both. Footer hovering up near your header? clear:both. Wife nagging you to take out the garbage?clear:both.

OK, so it’s not going to fix all your problems, but when you’re using floats, clear:both will help put everything back in it’s place when everything is riding up all in your face. A floated element will sit to the right (or left) of the previous element unless “cleared” You can clear to the left or right, but clear:both tells the element to shove down and stay below the previous element regardless of what else is going on. Perhaps I over-use it in my designs, but it seriously solves so many problems I just can’t help myself.

I know, I know

These few things are not advanced CSS tricks. They aren’t things that other CSS coders won’t already know. They’re probably obvious to anyone who bothered to read the CSS specification. But they’re my early mistakes, and they’re hard learned through through trial and error and checking my code against the beautiful code of my superiors. I offer them in the hopes they might help someone, and so I might remember them for next time.

CushyCMS - Take the work out of managing content

I’m researching what might be the best approach for creating a web page for a client with some limitations (i.e. html only hosting). Probably the most fantastic approach I’ve found so far is CushyCMS CushyCMS lets you define editable areas in your plain HTML then lets your client edit a page’s content without touching the page itself.

It’s similar to Adobe Dreamweaver or Contribute’s template functions, where users can only edit the sections you define as editable. Unlike Dreamweaver though, it’s cross-platform, and doesn’t have a $400 price tag. An extra bonus is that the client doesn’t have to buy it either. I’ve also looked at a number of similar programs - Rapidweaver, iWeb, Frontpage (and its progeny Expression Studio), and they all have the same fatal flaw in this case, I work on Linux and Apple, and the client works on Windows. So I could create the site, but there’d be no easy way for them to edit it without learning to get around a HTML editor, or letting them touch it in Dreamweaver. I’ve also looked at creating a CMS for them - but their hosting is HTML only. Really, CushyCMS is the closest I’ve come to a solution that keeps it simple, while giving me the options I need.

Of course there are downsides. The client has to use a third party site to edit their pages - which to some people might not be as ‘professional’ as they’d like. The system also relies on the uptime of CushyCMS - if it goes down when a client wants to update - there’d be nothing I could do about it. Another restriction (although the creators say it’s a design choice for now) is that a client could not create a new page themselves on the fly. Creating a new page requires uploading a new one and setting it up for editing by the client. It’s an easy task, but not fantastic for quick site changes.

All in all though, it looks good. And it’s made by an Australian company

• Stateless Systems, creators of Bugmenot, Retailmenot, and a few other sites - which gets it bonus points. It’s free at the moment. In future they might offer paid plans - and I might even pay a bit extra to put my branding on it, or host a version on my own site.