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.

Nowadays whenever I need to translate any words from swedish to english or the other way around I use the site tyda.se. Tyda means 'interpret' by the way.

It is a free, ajax-based dictionary which shows the possible translation(s) as you type the word.
You can set it to only list swedish words, english words or both. The nice thing about the site except for the design, usability and content is that the users help building the content in a true web2.0 spirit.

If you set it up to show both english and swedish translation suggestions (which is default) it looks like this as you type in the word.



A typical results looks like this:


The site contains about 1.5 million words and offers voice pronounciation for some words. You can also see information like word classes, example sentences and synonyms and the results of you searches can be saved if you create an account.

Because it is free there are also adveritising on the site. Not disturbing in my point of view though.
Great site!

I have a web form in which you can fill in basic information about a customer.
The customer is divided into categories and subcategories, which means that the customer can be a member of several categories and several subcategories for each category.
When you click on the save button an AJAX-request is sent to a backend-controller php page via the post method using dojo to save all the data.

Categories and subcategories are stored in a database as a string separated by delimiters, eg. "#str1#str2#str5#".

What I was wondering was how to get the result of multiple checked checkboxes over to the controller page and transform them to this string if you assume that the value of the checked checkboxes are "str1", "str2" and "str5". And this is the solution:

The frontend page. The checkboxes are displayed like this:

str1 str2 str3 str4 str5 str6

The html-code for these checkboxes looks like this:

<input type="checkbox" value="str1" name="categories[]" checked /> <input type="checkbox" value="str2" name="categories[]" checked /> <input type="checkbox" value="str3" name="categories[]" /> <input type="checkbox" value="str4" name="categories[]" /> <input type="checkbox" value="str5" name="categories[]" checked /> <input type="checkbox" value="str6" name="categories[]" />

Notice the brackets after the name ([ ]). These specify that the values of the checkboxes will be in an array. So the page is sent via http post to the controller page and there at the controller page the categories array is handled to produce a string that we can use. Notice the php implode function that converts the array to a string with a specified delimiter.

$categories = $_POST['categories']; $transCategories = "#" . implode("#", $categories) . "#"; // Outputs: #str1#str2#str5#

I like playing with widgets now and then. There are widgets for the web and for the desktop. You can read further on about the different meanings here. The ones that I refer to here are widgets for the web. Here is an abstract of the wikipedia article.

"A web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets include: gadget, badge, module, webjit, capsule, snippet, mini and flake. Web widgets often but not always use DHTML, JavaScript, or Adobe Flash."

Widgipedia says a widget is...

"...a small application that runs on your desktop or in a web page. Widgets enrich your desktop or web pages with functionality, useful information and a lot of fun!"

On Wohill we have a so-called widget too that we refer to as the Wohill widget. It is built the same way as Planet Lotus' and IdeaJam's widgets and you are most welcome to use it if you'd like to.

There are several places where you can find different types of widgets and two of them are Widgipedia and Widgetbox. Here are a couple of examples. I am not sure I like the adverts although I see the point. It kind of ruins the whole idea of the widget.

Simple Calendar:

Super Mario Game:

Art Painter:

When being a web developer there are several occassions where you need to analyse things like code, stylesheets, headers and responses (that you get from for example ajax requests) in a simple way. You could always check the source code, the JavaScript console or navigate to the css-file but sometimes the error messages are cryptical and hard to solve and then a more advance tool can come in very handy.

Using the tools presented below will help you and ease your work a great deal. You can for example easily switch between the source code, style sheets, JavaScript console, headers or requests or responses by a single click.

There is one superior over all in my opinion and this one is called Firebug and is an extension for Firefox. Install this and learn how it works if you haven't. It will most definately be of very good assistance to you.

Firebug:

Another one is Microsofts tool, the IE Developer Toolbar.

Internet Explorer Developer Toolbar:

I also took a look at what Google had and there is a built in JavaScript console in which you can find some help as well although not as detailed. This one is built in and can be found in the menu.

Chrome:

For those of you that didn't know, you can debug JavaScript by writing to the console in an easy way. Use the tools to read the console after running the scripts.

console.debug("This is a test...");

If you are using an Apache server for your site you can easily specify error documents to display depending on the error code.

Here are some common ones and how you can write the lines in the .htaccess file:

# Bad request ErrorDocument 400 /eDocs/400.php # Unauthorized ErrorDocument 401 /eDocs/401.php # Forbidden ErrorDocument 403 /eDocs/403.php # File not found ErrorDocument 404 /eDocs/404.php # Internal server error ErrorDocument 500 /eDocs/500.php

When someone for example tries to type in a non-existing url, the page /eDocs/404.php is displayed to the user. See this document on apache.org for more fine-tuning.

The error pages don't have to be php-pages of course but can instead be static html-files. A tip on what to display on them if they are php-pages is where the user came from and which page that was entered. Use the following to get the referer and the requested url.

// Referer $_SERVER['HTTP_REFERER']; // Requested url $_SERVER['REQUEST_URI']

I tried out the Wordle service on the Internet a few days ago. I have seen it before so I know it's been around for some time.

"Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends."

Here's how the word cloud looks for Wohill at the time taken.

Click on the small word cloud below for a closer look at wordle.net.


Cool service by the way and lots of kudos to Jonathan Feinberg for this. Much like the tag cloud on Wohill (to the bottom left) and as for Wohill's tag cloud the idea is that the bigger font the more common the word is. You can also change font and color and the layout of the words, i.e. if the words is written in horizontal, vertical or other angles.

Let's say you have a menu on a webpage. You might use hover effects to indicate which menu item the mouse is currently over. This looks nice and is also useful to the user.

In a similar way there might also be a need to keep the menu state (the hovering effect or something similar) when a menu item has been clicked on. I am sure there are tons of different ways to accomplish this and here are two for two different demands.

One solution has been provided by the CSS Guy, who with examples shows how to implement a menu that keeps the state when clicked on and at the same time removes the state for the previous clicked menu item. This is a good solution but only works when the item being clicked on updates a div or does something similar, i.e. not a solution when you want to load different pages at the same time. See his page for details on this solution.

If you want it to keep the menu state but at the same time load another page you have to do something else.
Since we here on Wohill are working with PHP-pages the solution is pretty straight forward and uncomplexed. You simply use conditional statements to set the CSS-class for the current page. Assuming you already have css-behaviour for links, both normal and hovered, create a new css-class 'selected' which describes the behaviour for menu item that has been clicked. Here is an example how it could look like:

.selected { background: #2580a2 url("images/hover.gif") bottom center no-repeat; color: #fff; padding-bottom: 8px; }

The PHP-code that displays the menu has conditional statements which in this example checks which is the current page. Depending on which page this is, the class-attribute is set to 'selected' for this corresponding menu item.

<?php Print "<table><tr><td>"; Print "<ul>"; /*** HOME - '/' ***/ if ($_SERVER["REQUEST_URI"] == "/") { Print "<li><a href=\"index.php\" class=\"selected\">Home</a></li>"; } else { Print "<li><a href=\"index.php\">Home</a></li>"; } /*** PAGE 1 - '/aDirectory/page1.php ***/ if ($_SERVER["REQUEST_URI"] == "/aDirectory/page1.php") { Print "<li><a href=\"aDirectory/page1.php\" class=\"selected\">Page 1</a></li>"; } else { Print "<li><a href=\"aDirectory/page1.php\">Page 1</a></li>"; } /*** PAGE 2 - '/page2.php ***/ if ($_SERVER["REQUEST_URI"] == "/page2.php") { Print "<li><a href=\"page2.php\" class=\"selected\">Page 2</a></li>"; } else { Print "<li><a href=\"page2.php\">Page 2</a></li>"; } Print "</ul>"; Print "</td></tr></table>"; ?>

For our solution the menu is generated by PHP and included for each page it needs to be on. This way, we only have to make changes on one place. To see how this works, goto Stepcounter and have a look.

On http://stepcounter.wohill.com you can fill in how many steps you have taken for specific days. When saving, an AJAX-request is sent to the backend PHP-controller page which stores the data in the database. When a response is sent back that everything went ok, other functions are called that redraws a table and a chart presenting the current steps status. Here was the first raw design of how it looks, just to give you the idea:



When the redraw takes place we want it to be displayed in real-time of course. This is no issue if your browser doesn't cache the pages. Many browsers do use cache however - this is for example the default behaviour for Internet explorer 6. So when using IE6 you will not see the update in the table or chart when adding new steps. For static pages this could be handled by modifying the http-headers using meta tags or by tuning the web server settings.

To do this using the meta tags add these lines to the page (see source page here):

<meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0">

If you are using an Apache web server you could for instance modify the .htacccess file by adding these lines (see the Wikipedia source page here):

<FilesMatch "\.(html|htm|js|css)$"> Header set Cache-Control "max-age=0, no-cache, no-store, private" Header set Pragma "no-cache" Header set Expires "0" </FilesMatch>

But if you would get the data using AJAX which is the case here (a JavaScript function calls a backend PHP-function to get the data asynchronously) then these modifications will not be enough. Instead the solution here is to set the http-headers before writing the response back to the calling function (see source page here):

<?php /* Functionality to handle and get data. */ /* Set http-headers */ // Backwards Compatibility for HTTP/1.0 clients header("Expires: 0"); header("Pragma: no-cache"); // HTTP/1.1 support header("Cache-Control: no-cache,no-store,max-age=0,s-maxage=0,must-revalidate"); Print "Data that should be sent back to the calling front-end function"; ?>

So this way the table and chart will be updated instantly without having to refresh the page.

There are easy ways to embed movies on a web page from YouTube or similar sites. The script for YouTube movies can for example be found for each movie just next to it and all you have to do is to copy and paste the html-code on a web page:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/0RVp8Q6H9e0&hl=en"></param><embed src="http://www.youtube.com/v/0RVp8Q6H9e0&hl=en" type="application/x-shockwave-flash" width="425" height="344"></embed></object>

When you want to embed your own movies the code have to be slightly different and also different depending on the format. Here is a JavaScript function for creating and returning an html-block which creates an embedded video on a web page based on the path of the video, the url. This one is for videos with the Windows Media Player format. It also works for movies with the file extension 'mpg':

<html> <head> <script type='text/javascript'> function genMPlayer(fldVal) { var r0 = '<!-- EMBEDDED MOVIE -->'; var r1 = '<object classid=clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6 width=238 height=195 type=application/x-oleobject>\n'; var r2 = '<param name=url value='; var r3 = fldVal; var r4 = ' />\n'; var r5 = '<embed src='; var r6 = fldVal; var r7 = ' width=238 height=195'; var r8 = ' type=application/x-mplayer2'; var r9 = ' pluginspage=http://www.microsoft.com/Windows/MediaPlayer/>'; var r10 = '</embed>\n'; var r11 = '</object>\n'; var content = r0 + r1 + r2 + r3 + r4 + r5 + r6 + r7 + r8 + r9 + r10 + r11; document.write(content); } </script> </head> <body> <script>genMPlayer('someVideo.wmv')</script> </body> </html>

This one works for Quicktime player movies. I have tested it for movies with the file extension 'mp4', '3gp' and 'mov':

<html> <head> <script type='text/javascript'> function genQuicktime(fldVal) { var r0 = '<!-- EMBEDDED MOVIE -->'; var r1 = '<object classid=clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B width=238 height=195 codebase=http://www.apple.com/qtactivex/qtplugin.cab>\n'; var r2 = '<param name=src value=' var r3 = fldVal; var r4 = ' />\n'; var r5 = '<param name=controller value=true />\n'; var r6 = '<param name=autoplay value=true />\n'; var r7 = '<param name=cache value=false />\n'; var r8 = '<embed src='; var r9 = fldVal; var r10 = ' width=238 height=195'; var r11 = ' controller=true'; var r12 = ' autoplay=true'; var r13 = ' cache=false'; var r14 = ' type=video/quicktime'; var r15 = ' pluginspage=http://www.apple.com/quicktime/download/>'; var r16 = '</embed>\n'; var r17 = '</object>\n'; var content = r0 + r1 + r2 + r3 + r4 + r5 + r6 + r7 + r8 + r9 + r10 + r11 + r12 + r13 + r14 + r15 + r16 + r17; document.write(content); } </script> </head> <body> <script>genMPlayer('someVideo.mp4')</script> </body> </html>

Here is an example of how it can look like for an embedded mp4-video. PS. turn on the sound