Images in placeholder for input fields

Since I have been doing a heap of web/html dev lately, I’ve taken to noticing things. Today, on MacWorld, I noticed this:

Google-search-placeholder

Clicking in the search box results in:

Google-search-placeholder-focus

So, there is an image in the placeholder. This is very neat!

Unfortunately, it appears this might not be a part of the HTML5 spec, but is done using JavaScript.

VirtualHost in Apache

I’m working on a website at the moment, and to make stuff easier I created a new VirtualHost entry in my /etc/httpd/httpd.conf file. However, after creating it, and putting a new entry into /etc/hosts, I was still unable to access it. The machine name resolved fine, but was showing the root of the main server, not the virtual host.

[Fri Sep 21 09:15:51 2007] [error] Cannot resolve host name memake --- ignoring!

Turns out the hostname entry must be put in before the httpd master process is (re)started, else it whinges about not being able to find the hostname. Restarting the server again made it work perfectly.

Moral of the story: /etc/hosts before /etc/httpd/httpd.conf

AJAX website

I’ve just finished developing a fully-AJAX website. It’s somewhat static in the sense there is little interaction, but I’ve used XMLHttpRequest instead of links for the pages. You can see it at http://jaquiehagan.com. Basically, the home page is the only one that needs to be loaded. If you click on any of the dropdown menus (done with CSS, rather than JS, to make it more compatible; this includes using csshover.htc for IE, since they aren’t simple A tags), it loads the side menu from the server. Choosing an item from this side menu loads the final menu, and the image(s) that need to be displayed. This final menu swaps out the different images in the main image pane. Why do this using JS? It might make a difference to the bandwidth used, although I probably overcompensate for this in that I preload images rather than wait on the user to click on them. More importantly, and if you turn off JavaScript and load the page, you will see the effect I had to remove. This site uses hidden-frame forwarding to allow a nice URL to remain in the address bar, even though it is hosted on a different server. By doing this, on a refresh the frame turns grey before loading, which causes a flash of grey, which is unnerving. I guess more than this it was a proof of concept that I could build a site that uses JavaScript for navigation, making it more like a multimedia site than a plain website. It does break one usability guide, which I am still working on. If you click on the back button in your browser, it will take you out of the site. Finally, it degrades nicely if a user doesn’t have JavaScript turned on. The required pages are all there (and generated from the list of images and menus), and are used by older browsers.

The Awakening [Mellow Mix]YorkThe Chillout Session

Boom Swagger Boom

Boom Swagger Boom:
Firefox Mac OS X Native Form Controls Preview
Now, there’s really only one reason I use Firefox, other than the fact I can then use the same browser on Windows. Okay, I guess there are two then… I’ll try again: There’s one big reason I use Firefox on Mac over Safari or Camino. Simply, I’m not that big of a fan of the Aqua controls. Sure, they are okay as part of an application, but, when building web sites, and viewing them, it’s kind of nice to be able to change the appearance of buttons and other form controls. Admittedly, Safari using the new WebKit builds works, as seen here: Firefox: screenshot Safari: screenshot Camino: screenshot WebKit: screenshot Minefield: screenshot Now, as can also be seen, Minefield, the Firefox linked to above, also supports restyling buttons. So, this looks okay from my point of view. It defaults to the Aqua buttons, but if savvy web designers re-style controls, they are displayed as such. So, that leaves my big complaint about Firefox. It doesn’t access any of the cool OS X features, like Keychain, and better integration with the system. Camino and Safari both will share saved passwords and the like, as they are all stored in this Keychain. Meaning it is easier to test stuff in multiple browsers, I don’t have to keep remembering site passwords and the like. Apparently this is coming in a future version of Firefox.

ObsessionSugababesTaller In More Ways [Mutya Version]

Text-only browsing

I’ve had to use a text-only browser over the recent days, since Internet Sharing is being screwed up by my router. I could, I suppose plug my switch back into the network, and disconnect the router, but then I have to worry about IP addresses again, since the router is also the DHCP server. Anyway, it’s been an interesting exercise. Some sites are well designed, and using them in links is possible, easy even. This site, for instance, shows up very well in links, and is easy to navigate around in. Credit where it is due, this is mainly due to Patricia, and the Wordpress team. The backend for instance is similarly easy to navigate around. Gmail is satisfactory. It whinges about missing JavaScript, but still seems to work. Not sure if the emails I have been sending have been working, but we’ll find out. Actually, I’ll take that back. It doesn’t seem to send emails properly. Dammit. Whirlpool and WildIT do not work very well at all. Sure, you can view stuff, but you cannot log in properly, which prevents you from seeing the really important data, and adding your own comments. Yellow Pages seems to work okay, as long as you don’t mind only looking at the first page of results. Well, hopefully my ADSL churn will come through in the next couple of days, as I’m sick of it already.

Ajax Search

This is very cool. Better than Live Search. I might be able to implement this, and even include the abililty to get multiple pages worth of results. And, it should be possible to do it so the search results appear in the sidebar, too. I’ll definitely look into this one. (Thanks Kreaper!)

Edit HTML in Word?

I had an HTML file I wanted to look at the source of, so I right-clicked on it in Windows, and chose “Edit”. Tell me Mr Gates, why on earth would I want to edit it in Word? I’ve never ever opened or saved an HTML file from Word, I’m not about to start now. I expected it to load up in Notepad, which would have been bearable (a real text editor would have been better), but not Word.

Google Domain Pages

Whilst troubleshooting Gmail for Hosted Domains mail delivery issues, I came across Google Apps for Your Domain. It doesn’t appear on my Dashboard, but does on Jaq’s. It allows for publishing of web pages, stored on Google’s servers, under your domain name. I’m playing with it now.

Why JPEGs are not always good

I’m pedantic about some interesting things. The one I’m best known for amongst my RealWorld™ friends is probably improper apostrophe use (I was tempted to put in apostrophe’s), although your/you’re is close! One other thing I’m a bit tetchy about is correct image format selection. Now, as far as most casual computer users are concerned, computer images are computer images. However, there is one big difference between the two main types of image format. Lossless images, which includes formats such as PNG, BMP and TIFF, and Lossy images, which includes JPEG. Perhaps to enable readers to better understand the difference, we need to understand how images are stored on a computer, or other electronic device. If you zoom in on a computer image, you will find it is made up of a series of little blocks, called pixels. Pixels are “picture elements,” and each pixel has a particular colour. The number of pixels in an image is usually very large, particularly if it’s an image from a modern digital camera, which can often exceed 7 or 8 mega- (or million) pixels. Your computer monitor, on the other hand, can probably only display 1024 pixels on each row and 768 in each column, for around 3/4 of a megapixel. Digital cameras need a higher resolution (or number of pixels) in order to enable images printed from them to be free from pixellation, or the blocky effect you see if you zoom in on a digital image. Each pixel also has a colour, as indicated above, but it’s a little more complicated than that. An image can also have a “bit depth,” which is how many colours are “in” the picture. For a purely black and white image, this bit depth is 1 - this is how many “bits” of information are required to store the colour value, and eeach pixel is either black or white, so a bit, which can store a value of either 0 or 1, can accomodate this. For images that can have up to 8 colours, a bit depth of 3 is required. 8-bit images can store 256 colours, but even these are obviously not photographs. Full image quality is 24-bit, which can store around 16 million colours, about as many as the eye can distinguish. With 8 bits making up a byte, a full colour image from a 4 megapixel camera would take up around 12Mb in a raw format - 3 bytes for each pixel, 4 million pixels. Obviously, this is not a good way to store images. Even with cheaper memory storage, most cameras would not be able to store more than a few images. This is where Lossy compression techniques come in. JPEG, the format most people are familiar with, allows an image of this size to be compressed by around a factor of 5. That is, with an acceptable image quality, I can store 4MP images from my camera in files a bit larger than 2Mb. Note that these numbers are approximate - the quality of JPEG files can be altered by changing the compression rate. Higher compression results in smaller files, but poorer quality images. The main thing to note is that the compression technique is called Lossy for a reason. To save bytes, some image information is discarded. With a high quality setting, you might not notice it, but each time you modify and then re-save a file, you will lose some more quality. JPEG is really only designed as a final format. If you are planning on modifying files, save them in another format! Because the format is lossy, the image may not look exactly like the original. For instance, the compression algorithm isn’t designed to work with large areas of flat colour adjacent to other colours. It’s designed to cope with gradients and ranges that might appear in real life photographs, and can save heaps of space by compressing these well, but does a very poor job of compressing images that have a constant colour next to another colour, due to the way it averages out the colours in this border area. Areas of fixed colour can, on the other hand, be compressed very well by non-lossy, or lossless techniques, such as those used by PNG. Remembering that an image is a series of pixels, the compressor can instead of storing 150 bytes that are the same, store one copy of the bytes, and state that it is repeated 150 times. This is a simplification of the process, but it’s fairly representative. Lossless techniques are also found in ZIP archives. After all, when you decompress an archive of a program or text document, you want the data exactly the same, not just pretty close. The main place I see JPEGs being used where they shouldn’t be used is in screen captures. When you Cmd-Shift-3 on a Mac, or Alt-PrScr on a PC, there is a very good reason that the computer doesn’t save the image as a JPEG. For example, a screenshot from the iTunes source window, stored first as a PNG, and secondly as JPEG: Granted, the PNG file is 8,271 bytes, and the JPEG is 4,777 bytes, but the quality difference is obvious. The fuzziness you can see around the JPEG image is called artifacts, and I hate it! So, the moral of the story is: only use JPEGs when you really need them. Most definitely not for screenshots. I’m not bagging lossy compression. It has it’s place: it’s also very useful in music files. MPEG Layer 3 audio, or MP3, allows for about 10:1 compression, meaning files can be compressed to around 3-4Mb per song, which is very acceptable for transfer over most networks. Transferring the full amount would mean that home networks would struggle to cope with even one computer playing a song stored on another machine. Similarly, with a high quality, it’s possible to have screenshots that look acceptable. But file size savings are then not so great.

Why Opera Bites...

…but not as much as Internet Explorer. I’ve tried to make my blog, and by definition the template itself, work with every OS/Browser combo I can. And I’ve noticed one big similarity between Opera and Internet Explorer. Stuff that doesn’t work in one tends not to work in the other. That is, Opera is almost as crappy as IE. For example, I wrote a script that creates a list of links in the current post, and it failed in both of these browsers. The worst thing about this is that it’s damn near impossible to test (easily, at least) without making a change, reloading, repeating. With Firefox, you can easily get a JavaScript Bookmarklet that opens a JavaScript Shell, allowing you to experiment with commands, a-la python. Which can then be used to create the final script. At least Opera allows you to see what’s going wrong with JavaScript. IE’s pathetic attempt at error reporting (popping up a dialog box on each error is a real quick way to get yourself turned of, error reporter) is unproductive. Opera can display errors, which quickly enabled me to figure out what was wrong with my script. I think.