Dear Sir or Madam,

on page xyz of your website is a misspelling in line 123. The word you use there is “mitsake”, yet I think you meant “mistake”. Please correct that.

Sincere regards …

Sounds snobish, does it?! That’s why I’ve written a little JavaScript- and PHP-Code to put my idea into action. See everything in detail after the jump.

Edit This Post - New feature: Correct me! - Enabled by JavaScript and PHP

If you’re missing this “Edit This Post”-button in your window: at the moment I’m the only one who can see it. And even if I’ll unlock it, Safari- and Google Chrome-users will be the only ones who will see this.

But anyway. Here’s a nice gallery:

What I don’t like at the moment:

• The look: I haven’t styled it yet! The whole look is css-based and it doesn’t look very well currently. I also don’t want to have it centred, but I have a “logged in”-display at the bottom left corner and I didn’t want the two to be layered over each other.
• The unnecessary click: If you click on “Edit This Post” the describing text slides up. There you have to click again on the button “Edit This Post” to finally actually edit the post. Two clicks where only one is needed…
• Little functionality: I’m not very sure about this point. You can only remove, replace or add text. You can’t change links, style parts differently or things like that. But on the other hand: Keep it simple, ay?!
• No safety: I’ve written it today. I only cared for the basic functionality. So, there are probably bugs and stuff.

And another thing: Maybe an “in-text-comment-function” would have been better. Like at flickr with these “notes” within the photos. That would have the advantage that users could see what others have already written/noted. Furthermore you wouldn’t need to correct the text necessarily, but you could also leave comments like “What do you mean here?!”

Nevertheless I won’t change everything I’ve written today. By the way: This is what I get per mail

To: me@me-blogs-it.com
Subject: Correction has been sent for Post 305
Message: Correction at character 1461: …write Mac-, iPhone and iPod touch-Apps! I’…

I don’t receive the whole post. The text is trimmed to the part where it differs from the “old”, original post.

Now: What do you think of this whole thing?

In April, for example, I developed a whole new WordPress-Theme called “JavaScript-OperatingSystem-Theme” (“JS-OS-Theme“). I’ve chosen this extraordinary name, because it’s based on JavaScript (and PHP of course, the WordPress-part!) and looks and behaves like an operating system. For all those of you who can speak German: Ihr könnt euch diesen Screencast ansehen, in dem ich das Theme ausführlich vorstelle. For all those of you who can’t: Enjoy the “ö”s and “ü”s in the last sentence and believe that all your stereotypes about Germany are true. Or go directly to trial.me-blogs-it.com – I’ve installed the Theme for experimental purpose and the test-posts are all in English!

I’ve done even more things in May!

Now, in June I began to teach myself Objective-C to write Mac and iPhone-Apps! I’ve already done a dozen of “Hello, World!”-Tutorials, yet I haven’t learned anything at all… But before I begin to bore you with this I rather tell you about the two other projects which ended up in further subdomains:

The first one is a simple WYSIWYG-Editor. I had to google for a long time until I found how to write one actually: The secret behind wysiwyg-editors is an iframe with the JavaScript-method designMode = “on”;

function id2obj(id) {if(document.getElementById) {return(document.getElementById(id))} else if(document.all) {return(document.all.id);} }
var Idocument = id2obj('showHTML').contentWindow.document;
Idocument.designMode = "on";

The special thing about this wysiwyg-Editor: Next to the wysiwyg-Editor is a textarea with the sourcecode of the wysiwyg-editor. Now, if you type into the textarea, the sourcecode is simultaneously turned into HTML and shown in the wysiwyg-editor. If you edit something in the wysiwyg-editor (btw: For all those of you who don’t know what this cryptical “wysiwyg” actually stands for: It means “What you see is what you get” – you know, this Britney Spears song!) the sourcecode changes in the textarea at the same time! Unfortunately it doesn’t work in Firefox. It probably doesn’t work in the Internet Explorer, but that’s a thing I don’t care about!

The last new subdomain: I was shocked when I read a study (I don’t know how old it was) in which it says that almost a quarter of all Internet users have a screen resolution of 800×600! I wanted to know how my sites actually look like in those screenresolutions and have written a simple php-file which makes customized resolutions possible: 800×600.me-blogs-it.com

JavaScript-OperatingSystem-Theme WordPress screenshot

When you want a picture to change, while the cursor hovers over it, you usually use JavaScript’s <onMouseOver> in this way:

<img src=”picture.jpg” onmouseover=”this.src=’hover-picture.jpg’;” onmouseout=”this.src=’picture.jpg’;” />
 

Although this is the common way, there’s actually another, better and way simpler way to accomplish this hover-effect, which also works when JavaScript is turned off in the browser. It’s – as you can guess from the headline – via CSS:

<div id=”avatar”></div>

<style type=”text/css”>
#avatar {
width: 64px;
height: 64px;
background-image: url(gravatar1.jpg);
}
#avatar:hover {
background-image: url(gravatar2.jpg);
}
</style>

It uses the :hover-funtion in CSS. The picture is actually just a background-image which is swapped, when the cursor hovers over the div. Many sites already use this method. Some even just have one background-image which is relocated via background-postion-y or -x. Facebook does that: The logo is actually two logos – the first one is the normal logo, the second one is with a “Home”-icon. When you hover over the logo background-position-y: -17px; is executed. Although it’s actually the background-image which is repositioned, for you it looks like a house is simply added behind the logo.

Facebook-logo background-picture with and without house

And this leads me to another CSS-thing: Instead of relocating a background-image you could indeed add a house behind the facebook-logo by means of the rather unknown tags :after in combination with content: …;:

<div id=”add-content”> Facebook </div>

<style type=”text/css”>
#add-content:hover:after {
content: “house”;
}
</style>

Though this example works with text, you could easily change that to use images. Now, why does Facebook used the other way to add the house behind the logo and not this, simpler one? Because crappy Internet Explorer can’t interpret :after and content! These tags are actually official web-standards, but -hey- the IE doesn’t give a fuck about web-standards! Instead Microsoft invents its own standards like filter:Alpha(opacity=50, finishopacity=20);… Oh, dude, I hate the IE! From the bottom of my heart! But 66% of all Internet users are still using the IE, because they don’t even know about Firefox or Opera or Flock or Safari…