Since Google Buzz started there is suddenly a need for managing your Google profile. Your profile is more or less visible and clickable depending on how well you have entered your personal information. You have to open your profile and add information and also (optional) choose a username for your profile URL (otherwise it is just a long number). Get your profile by logging into Google at www.google.com and click on 'Edit profile'. You can also goto http://www.google.com/profiles/ and search for your name.

This is how a profile can look like (my own).


You can via Buzz in Gmail search for other Buzz users to follow. Just click 'add' if they seem interesting. You are probably already following many of your Gmail friends. When looking at the people you follow you can click their profiles (if these are enabled) to see more information. It is also possible to go directly to other peoples profiles and follow their buzz from there. A profile's url is on the syntax http://www.google.com/profiles/username.

I have seen several offical profiles without any information which doesn't look too professional.

Check this site for more information, tips and trix about Buzz.

Here are a couple of interesting ones that I have found so far:
- Mashable
- BuzzUsers
- Google Buzz Team
- TechCrunch

Now you can create and save a PDF for any website for free with PDFmyURL.com either by typing in the url by hand on the site or by calling the website url with querystring parameters via a link or directly in the address field of the web browser.

This link:
Download a random wohill page as a PDF

would look like this in HTML:

<a href="http://pdfmyurl.com?url=www.wohill.com/random">Download a random wohill page as a PDF</a>

As you can see the whole blog framework with one page is created as a PDF. It could be interesting here to point to just the blog entry and being able to offer random articles as PDF-pages for example. That will be a smaller project for a rainy day...

There are also advanced options for the PDF such as specifying the filename, choosing landscape or portrait, adding text, adding header or footer etc. Read more on the first page of PDFmyURL.com.

Interesting tool. I am not sure if I like it or not. It doesn't look too good for most sites though.
I was aware that some people still uses a low resolution but I didn't think it was this bad.

However I interpret it the way that they have taken into account also parameters like when visitors don't have their browser window expanded to the maximum or when visiting with a mobile device (and the site is not specifically enabled fior that).



Something to consider anyway. Check it out for your own site!

Boxes or divs with rounded corners can be nice to present content in, but how to do it?
Well, there are several ways using both CSS and JavaScript and here are just a few of them.

My impression when looking into this is that the javascript frameworks/toolkits don't have these functions built-in easy to use but instead you will have to use one of the below methods yourself.

- RoundedCornr (it is done for you)
- CurvyCorners (A free JavaScript library)
- SpiffyCorners (done for you)
- Rounded Corner Boxes the CSS3 Way
- CSS rounded corners
- Advanced CSS rounder corners
- Rounded corners reference (CSS and JavaScript)

Please feel free to complement with any info or links. I was looking into this for a specific purpose and wanted to know of the best solution to go for.

When developing websites you often need some dummy text to be able to see how it would look like when ready for production. It is common to use some words from the latin language starting with "Lorem Ipsum dolor sit amet...".

I recently needed this and noticed that there actually is a site where you can get this type of content.

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."

Here's a taste of it for you. But if you need more which I am sure of, then go to http://www.lipsum.com/.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean hendrerit tincidunt purus sed suscipit. Etiam sed elit quam, eget volutpat orci. Aenean posuere elit vel massa bibendum sed posuere arcu tincidunt. Integer sit amet eros quis nulla aliquam tempus. Morbi leo magna, porttitor vel lacinia vitae, ornare a quam. Suspendisse tempor adipiscing accumsan. Integer orci enim, pellentesque sit amet feugiat vel, aliquet laoreet nisl."

The official Google blog posted an entry the other day - Let's make the web faster on how far we have come and the importance of getting the web faster.

because our research indicates that people prefer faster, more responsive apps

There are some tools already out there and Page Speed from Google is one of them.

Page Speed is an open-source Firefox/Firebug Add-on. Page Speed performs several tests on a site's web server configuration and front-end code. These tests are based on a set of best practices known to enhance web page performance. Page Speed evaluates performance from the client point of view, typically measured as the page load time.

All the best practices listed:
* Avoid CSS expressions
* Combine external CSS
* Combine external JavaScript
* Defer loading of JavaScript
* Enable gzip compression
* Leverage browser caching
* Leverage proxy caching
* Minify JavaScript
* Minimize cookie size
* Minimize DNS lookups
* Minimize redirects
* Optimize images
* Optimize the order of styles and scripts
* Parallelize downloads across hostnames
* Put CSS in the document head
* Remove unused CSS
* Serve resources from a consistent URL
* Serve static content from a cookieless domain
* Specify image dimensions
* Use efficient CSS selectors

After installing the firebug add-on and you have restarted Firefox you will see this when opening firebug.


When pressing the "Analyze Performance" button you will get a list of the results from measurements based on the best practices to act upon.



You can also record the activity on the Page Speed Activity button to see how long each activity takes to narrow the search down for perfomance pits.

I am trying to start a new routine here where I gather useful links that I discover during the week and to post them here as tips on Saturday. But this will probably not be every Saturday, only when there's something interesting.

+ 10 reasons why you should be using Firebug by nets tuts+

+ 10 astonishing CSS hacks and techniques by Cats who code

+ Generate a Tiny URL on the fly with PHP by tech stuff

+ Why You Need to Make a Facebook Fan Page for Your Website NOW! by Search Engine Journal

+ Top 84 MySQL Performance Tips by LazyTechie

+ New features on Google books by Inside Google Book Search

+ Introduction to Android development by IBM developerWorks Open Source

+ Networking with Android by IBM developerWorks Open Source

Maybe you have seen those boxes that pops up when something is loading on a website. Then when that something has finished loading it goes away again. This is most often used when things are loaded using the AJAX functionality since the page is not reloaded but you want to make it obvious to the user that something is happening. You can easily achieve this functionality on your own if you'd like, it's no magic or difficult stuff at all.

This is the way I have done it.

You create a div element with some code in it that makes up the box that you want to display.
Below is the code I use. Note that the div is hidden by default, i.e. on page load.

<div class="loading" id="div_loading" style="visibility:hidden;text-align:center"> <br /> <img src='images/ajax-loader.gif' style='border:none' alt="loading" /> <br /><br /> <span style="font-weight:bold;color:#000000;">Loading...</span> </div>

It renders like this (when you make it visible):


The location of this div is at the same spot of where you can see it, i.e. we are using position:relative with no movement in x- or y direction. I would say it depends on your solution how you want to do it. You could also use position:absolute if you would like to define the exact same place where the div should appear at all times. In this case it doesn't matter where the actual location is. When it becomes visible it will start at top left of the window and go down x pixels to the right and y pixels down. This is specified in the CSS below for the div together with some other things:

/* Loading */ div.loading { position:relative; left:0px; top:0px; width:170px; min-width:170px; height:105px; min-height:105px; z-index:50001; background-color:#FFFFFF; border: 2px solid #000000; }

I have also created two small and simple javascript functions to display and hide the div. I call the 'enableLoading' function just before an AJAX call that gets something from a database asynchronously. When that something has been fetched successfully and displayed I call the other function 'disableLoading' to hide the div again:

// Make div visible function enableLoading() { document.getElementById('div_loading').style.visibility = 'visible'; } // Hide div function disableLoading() { document.getElementById('div_loading').style.visibility = 'hidden'; }

Check out this site for some cool AJAX gifs if you want to try out the same thing but use another loading image.

In a former post I was telling you how we have used a solution from E(2) Interactive to come up with a photo gallery well-suited for a client.
A visitor, named Brinel, liked it and was interested in the customization that we have made on the design and functionality regarding the grouping or categorizing of different galleries.



As you can see in the screenshot above there are categories just below the actual image and above the thumbnails. This is the new customized functionality. I will try to explain how you can add these.

IMAGE UPLOAD:
The uploading functionality involves three files in this solution:
- class.upload.php
- upload.php
- controller_upload.php

An image is chosen and while uploaded a thumbnail is also created.
The image goes into one directory and the thumbnail into another. Both are named exactly the same name to be able to match them in the photo gallery.

class.upload.php
In the solution provided by E(2) Interactive the image uploader class class.upload.php by Colin Verot is used to upload images. So this file is included and instantiated in the upload controller page to make use of its methods.

upload.php:
I have modified the upload interface to be able to choose into which category a photo should belong to. There is also a small addition made so that we can choose to crop an image from either the left side
or the right side. See below:


controller_upload.php:
The customization regarding this solution is that I have created one directory for each category. Each directory then contains the two directories for images and thumbnails. So when clicking 'Upload' in the form and posting this request I have added code that checks which category that has been chosen and puts the image and thumbnail in that one instead. So this takes place in the image uploader controller page that is.

To be more precise this file instanties the class 'class.upload.php'. There is some example/skeleton code of this that you get when you download the package. But briefly what I do is that I depending on which category that has been chosen in 'upload.php' set the value of an image directory variable differently. This variable is then used as the inparameter to the Process function the get the handle.

Here are some pieces of code used in the 'controller_upload.php'

/* Include class.upload.php */ include('../include/class.upload.php');

/* Decide on which category directory */ if ($_POST['category'] == "Portrait") { $imgDir = "portraitImagesDirectoryPath"; $imgThumbDir = "portraitImagesThumbsDirectoryPath"; } elseif ($_POST['category'] == "Lifestyle") { $imgDir = "lifestyleImagesDirectoryPath"; $imgThumbDir = "lifestyleImagesThumbsDirectoryPath"; }

/* Get a handle to the image directory */ $handle->Process($imgDir); // we check if everything went OK if ($handle->processed) {

/* Get a handle to the image directory */ $handle->Process($imgThumbDir); // we check if everything went OK if ($handle->processed) {

THE GALLERY:
There is a configuration file which is used by the actual gallery page called 'config.php'. In this one the path to the images ($galleryPath) and the path to the thumbnails ($thumbpath) are defined. I have created new ones here called for example:

- gallerypathPortrait and thumbpathPortrait
- gallerypathCommercial and thumbpathCommercial
- gallerypathArtist and thumbpathArtist

etc. one of these sets for each category and as you might see the gallerypath is the path to the images directory for that category and the thumbpath is the path to the thumbnails directory.

Here is some piece of code from 'config.php'.

$gallerypathPortrait="portraitImagesThumbsDirectoryPath"; $thumbpathPortrait="portraitImagesThumbsDirectoryPath"; $gallerypathLifestyle="lifestyleImagesThumbsDirectoryPath"; $thumbpathLifestyle="lifestyleImagesThumbsDirectoryPath";

The categories on the gallery page are links. Each of these links link to the same page but with a different querystring. I.e. for portrait the querystring is gallery=Portrait. So on the top of the gallery page we first want to check if there is a querystring and in that case which one. If the querystring value for querystring variable gallery is 'Portrait' then we want to set the galleryPath and thumbPath to those specific paths that we earlier defined in config.php.

Here's some example code for that:

require_once "config.php"; if ($_GET['gallery'] == "Portrait") { $gallerypath = $gallerypathPortrait; $thumbpath = $thumbpathPortrait; }

The category links are also built up a bit differently depending on which querystring the page is loaded with, i.e. if we have querystring 'Artist' like in the screentshot we want that link to be visited. But this is just CSS that you can get at many places.

One more thing is that there are two special cases. The 'Exhibition' category and the 'About' page don't immediately link to a gallery. The about page doesn't link to such at all and the exhibition page is a middle step. What has been done here is that if you choose either of theese a specific div is built up and displayed on the photo's location instead. The links on the Exhibition page are in turn links to the gallery page with querystrings just like a normal category.

But the big and tough job really was to make the website into the specific design that Randolph Guy had created and to make that look the same in different browsers. Now for the critics, I am aware of that there are still some minor flaws if you study the solution and I will fix them later on.

Please feel free to post any questions in the comments if you have any.

Just got to lift up this post from bryan connor's blog where he lists 10 browser testing tools. Excellent information for web developers.

net tuts+ shares some SQL tips which is good reading,

If you haven't tried the Google Street View you really should. For the one's that have already done this, there is now a new double click to go functionality which makes it even better.

Google is also introducing page speed which is a tool for improving the performance of web pages.

Up until now we have had a basic homemade text editor for the admin web interfaces that we provide. I thought it was about time to change that.

I decided to try out Ext.js and at the same time see if there were a good text editor provided with Ext. Well I couldn't really find that but instead I bumped into TinyMCE which is a very powerful and easy to use WYSIWYG editor. It is easy to customize, it works in the different browsers I have tried and it was also easy to set up with AJAX. I.e. it works very well with the Ext.js implementation and also with Dojo from what I understand. There are many defined functions for all possible scenarios. I can really recommend it.

One thing you must be aware of is that although the editor is applied on textareas you can not use the usual ways of getting or setting that content (i.e. getElementById('textAreaId').innerHTML). Instead you will need to get a handle on the textarea and use TinyMCE's own functions. For example like below:

<script type="text/javascript" src="js/ext-core-debug.js"></script> <script type="text/javascript" src="js/build/util/JSON-min.js"></script> function getContents() { // Get a handle on the the textarea var body = tinyMCE.get('body'); // The AJAX request using Ext Ext.Ajax.request({   url: 'content_controller.php',   method: 'GET',   params: { action: "getContents", pid: document.getElementById('page').value },   success: function(response, opts) {     // Decode a json response and place into variable 'obj'     var obj = Ext.decode(response.responseText);     // Set field values     document.getElementById('header').value = obj.header;     document.getElementById('subHeader').value = obj.subHeader;     document.getElementById('image').value = obj.image;     // Set textarea content     body.setContent(obj.body);   },    failure: function(response, opts) {     console.log('server-side failure with status code ' + response.status);   } }); } function getBody() {   //Alert the textarea content (for some reason)   alert(tinyMCE.get('body').getContent()); }

So just go there and download and take a look at a few examples and you will be up and running in no time. The API is a good place to look for functionality.

If you have BigMachines integrated with Salesforce or some other Partner site you can add you partner login and password to seamlessly login between the two. This is done in the administration interface in the Users settings.



When you logon to the system and you get an error like below, this is because the partner login and/or password is wrong.



Adjust it and apply and you will get rid of this error.

BigMachines is currently not something that you as anybody can try. Only customers or to-be-customers have accounts. So I guess this post is for a rather limited amount of people. But nevertheless it might be something for the future or at least for myself I guess.

BigMachines product configurator sales software is a selling engine to quote, order and generate proposals - also referred to as a SaaS (software-as-a-service).

It is commonly used together with for example Salesforce or Oracle CRM as a product configurator for more advance configuration and to create quotes and generate dynamic and printable proposals.

It is built on Java as the backend programming language and Oracle for storage. Furthermore it uses Ext JS for the Ajax eperience. The entire application is rather complex and advanced and the company and their clients are growing heavily.

Now, this is not an advert although it might sound like that. I attended an admin training course last week in Frankfurt to learn how to administer a BigMachines product configuration site. And since I will be working with this to a great deal from now on I suspect, I thought I should introduce it here so that future administrators and developers of BigMachines applications can take advantage of things that I come across as well.

We are currently working with a solution from BigMachines that is integrated with Salesforce. The idea is to manage all Accounts, Contacts, Cases, Opportunities etc. from Salesforce. When a configuration needs to be done the action is started in Salesforce with a button click that gets the user into BigMachines. In here the configuration- and commerce process is started to create quotes and proposals. When we are done information is pulled back into Salesforce.

Now this is very briefly explained but I hope I can get back to this in more detail later on. I will definitely talk more about the Document Engine for instance. The sales- and commerce process is currently a much bigger task for me than the technology

This is the error message I get when I try to access the page http://mail.google.com/gmail/ in Germany.

We can't provide service under the Gmail name in Germany; we're called Google Mail here instead. If you're traveling in Germany, you can access your mail at http://mail.google.com. Oh, and we'd like to link the URL above, but we're not allowed to do that either. Bummer. For general information about Google, please visit www.google.com or www.google.de.

The same goes for the url http://www.gmail.com if you're using Firefox or Internet explorer.

However if you're using Google Chrome the url http://www.gmail.com works fine or at least the redirection part since the url changes to http://mail.google.com/mail, but not the url http://mail.google.com/gmail/. This seems like a strange thing to me. According to the error message they weren't allowed to do this or are the Chrome browser an exception?

I have blogged about this earlier on another blog but I'll do it again so that we have it here on Wohill.

When creating web sites you almost always have to struggle with browser specific issues where Internet explorer (also different versions) and other browsers display the code a bit differently.

Using css you should as far as possible try to make the site look the same for the different browsers. But sometimes that might not be possible and in these cases you can use HTML conditional statements.

The syntax that exists for the conditional statements are actually only for Internet Explorer. You can decide on which Internet Explorer version that is used by the user and display different code. But there is a way to also decide if the browser is not Internet Explorer and act upon that using these statements.

Here is a small example:

The HTML will run if the browser is Internet explorer:

<!--[If IE]> HTML <![endif]-->

The HTML will run if the browser is NOT Internet explorer:

<!--[if !IE]>--> HTML <!--<![endif]-->

See this documentation on MSDN for a complete reference.

I found this cool finger speed test via a swedish journalist, Nanok Bie.

The idea is to type words as fast as you can and of course to type them in correct.
When you start typing the clock starts ticking and you have 60 seconds to type as many of them as possible. When you're done you will get a ranking and how many characters and words you can achieve.

You can also choose between many languages.

I tried it first in Swedish since that is my mother language and got a score of 44 words per minute. However if I switched to English my score was 67 words. I tried many times as well. At least in this test it seems to be many more shorter words in English but another reason might be that in Swedish we have the characters å,ä and ö which I constantly miss.

Funny! What's your score?

67 words

Typingtest

Well, a bit late perhaps, but I have waited for this. Why haven't we seen this until now?
Lifehacker reported on this a few days ago.

Since I am already Google addicted and have most on my life there, I have to do it all the way I guess

Just go to google.com/contacts to try it out!

For those of you who have not yet come across this. 1Link is a service that offers you to create a short link which opens up multiple urls when you click on it or type it into the address bar of a web browser.

This is actually useful. I, for example, open up the following 5 urls almost everyday the first thing I do. Instead of typing them in every time it would be easier to type just one url in, wouldn't it?

- http://www.wohill.com
- http://www.gmail.com
- http://google.com/analytics
- http://planetlotus.org
- http://www.twitter.com

1. First add the urls you want to open with a single url.


2. Copy/note the short link


3. Click on the link or paste it into the address bar of a web browser. You will come to this page and need to click on "Open".


In Internet Explorer each link is opened in a separate window while in Google Chrome or Firefox they are opened as tabs. I prefer having them opened as different tabs, so you know what browsers I use then.

The only backside of this is that you either have to remember this unlogical url or bookmark it somewhere. Maybe if I could get to choose the last 5 letters it would be even great?

I found a nice little service today on JiWire. Fill in a few simple search criteria's and you will get results on Wifi spots anywhere in the world offered.

Take a look at the Wi-Fi Finder provided by JiWire. Could be quite useful at some times I can imagine. Nicely integrated with Google as well.





If you live in Sweden, Wifikartan developed by Ted Valentin, might be even a better choice for you.

There are different services on the Internet that provides different kinds of snapshots of a webpage.

- With backupURL you can get a pretty good fast cached copy of a web page that actually seems to work as is with advanced JavaScript and CSS.
- Use the Web Page Backward Compatibility Viewer to see if the webpage is backwards compatible. You have to register though.
- On freezePage you can as it says get an immediate image of a specific web page. I can see that it doesn't seem to handle my Javascript and css functionality that good.
- The Screengrab Firefox extension is an easy to use tool for grabbing the entire page or selecting a part of it to save or copy it.
- Use BrowserShots to see how a webpage looks in different browsers. You specify the url of a webpage and for which browsers you would like to see it in and the operating system. While you wait (it takes about 3 minutes) the page will present screenshots for different browsers and versions. This is really cool and useful. However I have noticed that the result doesn't always corresponds to reality. I.e. a snapshot for IE7 on Windows XP might look bad as a result on BrowserShots but if you visit it with the actual browser and version it looks ok. I haven't done that much research though. I also notices that you can create xmlrpc requests in the background.

See how it looks for Wohill on BrowserShots.

Favicon is a shortening for favorites icon, which is also known as a website icon, shortcut icon, url icon, or bookmark icon. It is an image that is displayed in the address bar or tabs of a web browser. You will see something like this in your address bar and probably the image and the title of the page if your browser is tabbed based.



The format for the image must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. The format of the image must be one of PNG, GIF, or ICO. Although PNG and GIF don't work for Microsoft Internet Explorer.

A favicon is added to a webpage with this small piece of html code between the <head> tags. Both lines are added to ensure that the favicon is displayed in different browsers.

<link rel="icon" type="image/ico" href="favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

It is possible to use either a standard image or an animated image as the favicon. The animation don't work in all browsers either. But in the case it isn't supported, a static representation of the image will be displayed instead.

So either you can create your own favicon in an image processing program with any of the dimensions and file extensions specified above or you can use an existing one from a gallery or you can create an animated favicon with a static image as the base.

Erwin Van Lun has created a set of animated favicons which starts to animate after a while to avoid irritation. The backside of Animated favicons is that they can be really annoying and irritating if they are not displayed in a smooth and subtle way. So I suggest a bit of caution regarding this and to think it through. People will in a few seconds decide if they like a website or not, not always themselves understanding why. Too much animations and flicker can be one of the reasons. Therefore Erwin's approach of delaying the animation is a good idea and then the actual animation in my opinion even more important.

Favicon galleries:

- MpP Favicon Gallery
- The Favicon Gallery
- fineicons Favicon Gallery
- FreshFavicon
- Delta Tango Bravo
- Ask the eConsultant

Generate favicons:

- FavIcon from Pics
- Animated Favicon
- Favicon Generator
- DeGraeve.com Favicon Generator
- Collabyrinth
- favicongenerator
- graphicsguru

References:

- How to Add a Favicon to your Site (w3.org)
- Wikipedia
- How to make a favicon

I just noticed something in the Gmail web client that I haven't seen before. Gmail provides a little text below the mail view which displays if you are logged into the account from another location as well, that is concurrently. In this case that location's IP-address is displayed.


You can also click on 'Details' to the right to get more information on the concurrent session and also on recent activity.


If it seems suspect I would check the IP-address for example here to get a hint whether is is reasonable or not or to try and catch the guy.

Most bloggers or site owners use an analytics tool like Google analytics or something similar to keep track of the statistics of their site. We use it here at Wohill as well and it's very helpful.

If you however need a way to easily and fast get an overview of all of your incoming links, you should test the Backlink Watch. You simply type in the url of your blog/site and the backlink watch searches and assembles the incoming links to the blog/site. It seems very accurate as well! A search came up with 592 total backlinks. About 80% of these are not interesting to me though since they list the same source although there are only a few links on that site. This is a common behaviour on these types of services I believe and probably for a reason.

An advantage to Google analytics is that you can do this for other blogs/sites that you are not the owner of as well.

Not a very pretty site though. Maybe they need some professional design help?

I was curious about if there were any hidden functionality either in Chrome or just in the search engine and found some.

The Google Chrome browser has a few about-pages which could be interesting to look at. Type in the following in the address bar.

- about:memory (Memory usage of the running browsers) - about:stats (Different statistics) - about:network - about:plugins (Installed plugin applications) - about:histograms - about:version - about:dns - about:cache

There is also a so-called easter egg but it only works in Windows XP and no longer in Vista. No that exciting really.

- about:internets

You can kill the browser process by typing in the following in the address bar.

:%

And a few tips for the search engine (http://www.google.com). That is, to be typed into the search text box.

- 1 usd in sek (Translate between different currencies) - Lotus Notes filetype:pdf (Choose to display only results on specific filetypes) - weather Stockholm (The weather in some city) - 1m in ft (Translate between different meassuring units) - 5*(8/6) - 5*7 (You can also use it as a calculator)

Do you have any additional tips or trix?

Mostly when I develop web solutions I set the charset to 'utf-8'. In some cases I need the charset 'iso-8859-1' for swedish characters.

There are three places where I put the charset definition. The first is the meta tag:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

When using this one you have to take care of the html encoding yourself like for example the swedish characters å,ä and ö. If you're using 'iso-8859-1' you can print them as they are.

The second one are sometimes used when receiving information using ajax. Then you have to set the headers before writing back information to the displaying page.

header('Content-type: text/html; charset=UTF-8');

The third way is used when you for example have some JavaScript validation on your page and the meta-tag charset is set to 'utf-8'. Then alerting text containing the swedish characters å,ä and ö will become unreadable. In these cases you can set the charset for a specific JavaScript script-tag.

<script type="text/javascript" src="aScriptLibrary.js" charset="iso-8859-1"></script>

One thing I just realized was that Google Chrome has got a resizable textarea by default. That is you can grab it by the bottom-right corner and resize it. What happens is that the rest of the html on the page re-adjusts. However, you can not make it smaller than what you have defined it with using cols and rows.

Take a look at this one and grab-and-drag!

Yup, definately a textarea... Resizable in Chrome but not in Firefox or Internet Explorer

Cool and handy!

A customer, who is a photographer, wanted a photo gallery for his creations.
So Randolph designed it with a functionality in mind and my task was to try to make it real. This new site is not completely tested or filled with photos yet but should be working as expected. Take a look at it below or see it live.



There is always a possibility of creating everything yourself, but it takes time, something that we didn't have much of in this project. So I needed an existing solution that I could modify instead.

I found a couple of candidate solutions but the one that became number one in my opinion was one that both looked really nice, that presented a very cool functionality and that was also pretty easy to modify to fit your own design. The choice fell on a solution from (E)2 Interactive which is free to use, but anyone using it should consider making a donation of course.

Take a look at the demo here. You can download the whole thing here. The solution consists of PHP, JavaScript and CSS and you almost only have to modify the css templates. There is also a php configuration file to look at with a few basic parameters.

As I said the solution consists of PHP, JavaScript, HTML and CSS but the actual frameworks used besides the own great work of (E)2 Interactive is Mootools, the Image Uploader class.upload.php that I mentioned in a previous post a few days ago, Scott Schiller's - Basic Rounded Corner CSS and Paul Sowden - styleswitcher.js.

So besides the actual photo gallery - an upload functionality comes with the package that really eases the administration of the site. As I wrote in the previous post about the uploader I added a choice to be able to categorize the images. The categories are hard coded in this solution but could pretty easily be made dynamic as well. When clicking on a category images from that specific images directory and corresponding thumbnails directory are loaded using a querystring to the same page. You could also use session variables if you want to hide it.

I had some problems (as often) making it looking and working the same with different browsers, primarily with Internet explorer 6. Some fixing with CSS adjustments made it look pretty much the same regarding layout. The problem with transparency and png-images remains however, So I tried out both the approach in this blog post and the one on this page which is a great solution. Both of them however had the side effect of making the links not working. So I used some conditional statements to not use the png-image if IE6 is used. I am sure I would find a solution if I would work with this enough, but It will have to be like this for now. Please give me a suggestion if you have any.

Great solution from (E)2 Interactive. Thanks!

Here are a some links to different icons which could be worth browsing. They should all be free to use, but you should of course check that on the site hosting the icons first.

I intend to keep this site updated and will add more links as I find them.
Please add some more if you have any, in the comments, and I will put them on the list as well.

- Create favicons (for the address bar, also animated)
- MpP Favicon Gallery (a set of favicons to use)
- AJAX icons/images. I.e. animated showing that something is loading.
- Web application icons
- 10 Beautiful icons set for web developers and designers
- VincentAbry.com (Follow me on twitter icons)
- Knob buttons
- Illustrator format icons
- Zeusbox studio (Feed icons)
- Smashing Magazine (Animal feed icons)
- Fugue icons
- High quality icon packs
- Famfamfam (lots of different icons (flags, web icons etc.)
- Some Random Dude (Different small red icons)
- twotiny (A variety of small nice icons)
- ten by twenty (Web icons)
- ProThemeDesign (Circular icons)
- icojoy (Web development icons)
- Paul Armstrong designs
- Brand Spanking New (Lots of mini icons for web development)
- Mini pixel icons (file type icons, web, user)
- UserInterfaceIcons.com (Different sizes)
- Milky (A stock vector iconset, larger icons)
- Tango Icon library (A complete set for your application)
- Different icons

Icon search engines:

- iconlet
- Iconfinder

Icon links:

- WebIconSets.com
- Devoper icon sets
- Smashing Magazine

On Wohill we use Google Analytics to collect statistics for the blog.
Wohill has been going live for almost a year now since the 3d of january and there are many interesting things to reflect over. We will publish more interesting visitor statistics at the end of the year.

I looked at the statistics since the 3d of january until today's date for different browser and operating systems that our visitors have and it was quite interesting. Some of these I have never heard of and it was also interesting to see that Firefox beats Internet explorer bigtime. Firefox has 55%, Internet Explorer 34%, Safari 5% and the rest of the list shares the remaining 16%.

One small thing I noted was that the web browser Flock that came in 2007 and was a really promising software is not represented at all. Has it died?



The list of operating systems is of course won by Microsoft and Windows with the impressing 86% followed by Macintosh and and 11,5%. Linux has only 1,5% which means that the remaining 10 operating systems share 1%.
It will be interesting to see whether these mobile and game console operating systems will grow in number in the near future since I predict much more activity for these in the next years to come.

There are a zillion search engines everywhere on the Internet from regular ones to more niched. Some are more popular than others like Google, Yahoo and Altavista and some are rather new with specific ideas trying to create a new need. One of these are RedZee, which is a visual search engine. It works in the way that you can search on words in the same way as other search engines but the result are presented visual with images instead of with texts. A search on 'Wohill' provides a search result with screenshots of sites in some way related to Wohill. See below.



You can click and drag the images to spin the wheel and when you want to go and visit a result you double-click on it and are redirected to this site within RedZee in the way that you can easily go back to the search results again. Above the site, buttons are displayed that look like this that help you navigate.



The good thing with RedZee in my opinion is that it looks nice, it is different in a good way and I like the functionality as well. It isn't that practical though. In an ordinary search engine you can quickly scan which results are likely interesting to you on the title and the short presentation. Here you are only presented with a screenshot of the site's front page and it can often be hard to get an idea of what the site is about. Another thing is that although you search a word like ibm, java or elvis presley you get a very limited search result set. I have got a maximum of 83 during my tests.

Let's keep in mind that It is still in beta though and that it might be a good alternative for different purposes.

If you are not already familiar with the Internet Archive you should definately go there and play around for a while with the Internet Archive Playback Machine. 85 billion web sites from 1996 to a few months ago are archived so you can look at how sites have progressed in design over the years.

If we take Google as an example it is not that big of a difference but still interesting. This image shows how the Google webpage looked like in 1998. It had just become a beta:


And to illustrade the difference, here is how it loooks today:


Do you wish that your site were included? Visit this page for more information on how to accomplish that.

Also, take a look at Microsoft's site or IBM's site way back in 1996.
It's fascinating when you think about what has happened in 12 years.