Coolest CSS Zen Garden solution ever! August 26, 2006
Posted by Predrag in : Resources and Links, Web Design , 1 comment so farI couldn’t stop laughing once I saw this solution. As you probably know, CSS Zen Garden website is all about one singe XHTML page that designers can dress up using their external CSS. Well, this theme is called Geocites 1996, and it’s a real time machine!
I congratulate Bruce Lawson on this one, he really tried to make every detail in the same way as archdesigners done in those ages - and all that by using standard CSS! Great job!! This reminds me of Andy Warhol work from some reason. Anyway, thumbs up!
You can read more about this masterpiece here.
Ubuntu: xserver-xorg-core version 10.3. breaks the Xserver! August 23, 2006
Posted by Predrag in : Resources and Links, News , add a commentIf you updated your xserver-xorg-core recently, then you’re avare that your GUI ain’t working and all you can do is to login without one. Since I am new to Linux, I need some kind of step by step solutions in order to avoid panic.
What you need to do is to update your xserver-xorg-core to a version 10.4. It looks very simple once you visit this page.
Amazon.com is down! August 21, 2006
Posted by Slobodan Kovacevic in : News , 7 commentsJust when I wanted to go shopping on Amazon.com it went down! I know it’s not usual that I write about this kind of things, but hey it’s Amazon.com, one of the top 10 properties on the net. The almighty Amazon was one of the sites I thought I’ll never see going offline. It’s 20:50 CET and I can not access neither Amazon.com, Amazon.co.uk, Amazon.de, Amazon.ca. However, Amazon.co.jp works perfectly. Is it a DDOS attack? Any ideas?
1280×800 Wallpaper for free
Posted by Predrag in : 1280x800 Wallpapers , 12 commentsUPDATE! We placed all our 1280×800 widescreen wallpapers on one page.
I quickly browsed through the Web to find a good wallpaper for my laptop. Since I coudn’t find any and my personal favorite VladStudio ain’t giving 1280×800 wallpapers for free, I created one of my own.
I used some of my last year drawings, ain’t much but if anyone needs a wallpaper for widescreen laptop, here is one absolutely free.
Marlboro smokers use IE August 17, 2006
Posted by Slobodan Kovacevic in : Web , 1 comment so farToday, I’ve stumbled upon real gem on Daily WTF blog. It appears that people at Marlboro are very concerned with web standards and they want their site to support all browsers… Or not.
As Daily WTF notes when you visit Marlboro.com with FireFox you only get a blank page. This effectively eliminates more than 10% of visitors. As if that’s not enough they also decided that usual redirection methods are not for them (for example, sending 300 response code, META refresh or setting window.location). They have some strange ideas on how people should be redirected.
- create empty link
- change it’s href
- invoke click() method (IE only)
I guess that they though this is simpler and more effective.
If you’d like to see complete redirect code visit either Marlboro.com or The Daily WTF entry
MySQL: Get total number of rows when using LIMIT August 11, 2006
Posted by Slobodan Kovacevic in : Programming , 14 commentsEvery now and then you need to limit the number of rows MySQL returns, i.e. use the LIMIT clause. Result set pagination is by far the most often usage of LIMIT clause, since you usually want to select only rows you’ll be displaying on certain page.
The problem is that for pagination you also need total number of rows in a result set, so you know how many pages you’ll have. This usually means that you need to execute query two times. First query is for counting total number of rows without LIMIT. Second query is exactly the same as the first, just without LIMIT and it will actually retrieve required data. You would need two queries like these:
SELECT COUNT(*) FROM users WHERE name LIKE 'a%'; SELECT name, email FROM users WHERE name LIKE 'a%' LIMIT 10;
Now, this is not such a big problem when you have small result sets and/or simple queries. But if you have a complex query that joins several tables and takes a while to execute - well, you probably wouldn’t want to execute it twice and waste server resources.
Luckily since MySQL 4.0.0 you can use SQL_CALC_FOUND_ROWS option in your query which will tell MySQL to count total number of rows disregarding LIMIT clause. You still need to execute a second query in order to retrieve row count, but it’s a simple query and not as complex as your query which retrieved the data.
Usage is pretty simple. In you main query you need to add SQL_CALC_FOUND_ROWS option just after SELECT and in second query you need to use FOUND_ROWS() function to get total number of rows. Queries would look like this:
SELECT SQL_CALC_FOUND_ROWS name, email FROM users WHERE name LIKE 'a%' LIMIT 10; SELECT FOUND_ROWS();
The only limitation is that you must call second query immediately after the first one because SQL_CALC_FOUND_ROWS does not save number of rows anywhere.
Although this solution also requires two queries it’s much more faster, as you execute the main query only once.
You can read more about SQL_CALC_FOUND_ROWS and FOUND_ROWS() in MySQL docs.
Web App Conversion Funnel August 4, 2006
Posted by Slobodan Kovacevic in : Web , add a commentWhen you are building a web application you think that you can presume how people will use it and you build it a certain way. You presume that a lot of visitors will signup for free plan or free trial. You presume that people who register will actually login.
Of course these presumptions are often completely wrong. People use your web app in strangest ways. A lot of them, or to be more precise most of them, won’t even consider signing up, even though you offer them a fabulous free plan. Even those who register, you would think that they will actually login at least once, but some of them don’t.
Usually it’s good if 5-10% of your visitors actually signup (if you have higher percentage - you must be doing something right). Also in each step (casual visitor, trial signup, login, paying customer) you will probably lose high percentage of your visitors (in some even up to 90%). So, basically you need a lot of casual visitors to get few paying customers.
The most useful thing you can do is to track how people use your web app and where they usually give up. Vitamin features an excellent article on this subject: “How to measure the success of your web app”. It talks about the conversion funnel which can be used to represent steps through which users go through. You can create a detailed funnel model and use it to track what people are doing and when they are giving up on you app. For example:
If 30 per cent of your visitors are viewing your sign-up page, but only 2 per cent are actually signing up, you’ll want to redesign your sign-up page.
The conclusion is that you should track everything and you should try to fix stuff that is high in the funnel, i.e. the places where you lose most of your visitors. So, if you are building or consider building web app read Vitamin’s article and start tracking everything.
CSS hacks and Cross-Browser Compatibility August 3, 2006
Posted by Predrag in : Resources and Links , add a commentThis is a great starting point for every HTML coder and Web Designer who wants to pass over to pure XHTML/CSS coding. Cross browser compatibility is the thing I find most annoying in this field, and I looked for this kind of table for a while.
Take a look at this List of CSS Hacks and start your fight. Below the table you’ll find a lot of useful links too. Simply, one great web page.
How to deal with picky clients – Red Rabbit Technique July 28, 2006
Posted by Predrag in : Web Design , 5 comments
Here is a secret I would like to share with you. I bet that anyone who ever seriously worked as a web designer encountered a client (or clients) who always needed to change at least a pixel of your design. It can be a masterpiece - no matter what you create - but they’ll always find something to change. Don’t know why, but they just do.
If you are constantly receiving responses like these listed below, you’ll need to learn this simple Red Rabbit Technique:
- That looks great, but can you please make that line a bit thinner
- Why did you choose 24px Verdana for headline? I think 25px will do much better
- That green you picked is too green. Is there a way you can change it to something more yellow?
- I love those icons very much. Can you move them 2px up? And make them 2% brighter
Here is what you should do. I know it sounds silly, but it freaking works - it is more than fun and it requires very small amount of time!
Red Rabbit Technique
First you need do create the design in the way you think is the best. Move it around, polish it, use the fonts you like… Create whatever you think the final design should look like. Save your masterpiece and backup it.
It’s time for Red Rabbit! Basically, what you need to do now is to decrease the quality of your design. Create one simple eye catching mistake everyone will notice. Something like the sample I’ve provided above. You can do practically everything you wouldn’t do for real. Here are some ideas:
- Destroy your color scheme. Add a strong color that is out of any harmony from your layout
- Change your headline font to some old-school one like Times New Roman (this might be to obvious)
- Replace your cool photo you’ve spent 3 days to find with something you found on Google Image Search
- Anything else you can think off.
To keep the story short, don’t go too far. Key issue here is to create a minor, eye catching mistake. If you ruin it completely, your client will request re-do of an entire design. The goal is to hear: “That’s great! One thing I dislike is that red color you picked. Please change it to something different.” Than, you show them your original work – and they love it.
Extended Red Rabbit Technique
This one requires a bit more time, but the principle is the same. You should use it when the client requires more than a single design from you so they can pick one of them. Again, you create what you think is the best. Than, downgrade it in various ways. Align it to the left, change colors, use different font, etc. Bare in mind you’ll need to place a winner as the final version. Downgraded versions should be presented first. This technique works even more than the first one.
One way or another, you have nothing to lose, your work will be done faster, and you’ll have a lot of fun during the process of downgrading your design. Guaranteed! Also, no harm is done and your client will receive the best solution anyway. 
Why is it called Red Rabbit?
Well, this was my first association when I’ve started implementing this technique. If you see a red rabbit while you’re walking through the forest, you’ll notice it. That’s exactly what your picky client will do.
In one of my next posts, I’ll provide you with some real life samples of correct Red Rabbit Technique usage.
rsync - synchronize web server and your local computer July 20, 2006
Posted by Slobodan Kovacevic in : Resources and Links , add a commentWhen developing sites it’s always a pain to upload updates on server, i.e. to synchronize server with local copy of the files. This is especially true if you have a site which you don’t keep under version control (although there is no good reason for that) or if your hosting company doesn’t have CVS / SVN client installed so you cannot simply update server working copy. So usually you are best of always uploading the whole site.
But if you have SSH access to your server (and most decent hosting companies will give you SSH) you may use rsync to upload only changed files from your local computer to server. If you have Linux you probably already have rsync and if you use Windows you’ll need to use Cygwin (just look at any of these for Windows rsync install instructions).
The command itself looks like this:
rsync -e ssh -av /path/to/local/copy/ yourusername@yourserver.com:/path/to/www/server/copy/
When you execute (obviously you’ll have to change command a bit to reflect your real paths) it will ask you for your password and upon login you’ll get something like this:
building file list ... done ./ production.php sound_and_light.php specialist.php user-edit-process.php user-logout.php user-sendemail.php sent 1942 bytes received 158 bytes 113.51 bytes/sec total size is 1692 speedup is 0.81
That’s it, files on your server have been updated and they are exactly the same as those on your local computer.
Main advantage when using rsync is that it will only upload files that have been changed, so you won’t have to upload everything whenever you want to update server files - this will save you a lot of time.
Although command might seem complicated it’s actually pretty straight forward. You are just telling rsync that you want to synchronize first dir with second one which happens to be on server. It also contains couple options:
‘-e ssh’ - tells it to use ssh to connect to your server.
‘-av’ - tells it to be verbose and use something called ‘archive mode’ (which basically says you want to copy everything in this dir and to preserve file time stamps).
You can also use rsync for much more than this, for example you can synchronize two servers, set it up to run as cron script to perform daily synchronization / backup or even just make local backup copies of your files.
