Make OL list start from number different than 1 using CSS August 31, 2006

Posted by Predrag in : Web Design , 7 comments

If you need to create an OL list that starts from number different than 1, here is an elegant solution. This is very useful if you need to display a listing on more pages (eg. there are 100 search results, and you want to display 10 results per page). In this case, if you are using OL list, it will start from number 1 on every page, and that is not a good solution because it will look like this:


Page 1

  1. Division Bell
  2. Atom Hearth Mother
  3. Relics
  4. Dark Side of the Moon
  5. Wish You Were Here



Page 2

  1. The Wall
  2. More
  3. Piper at the gates of Dawn
  4. Final Cut
  5. Meddle

In order not to use deprecated < ol start=”6″ > parameter in my second list, we’ve searched the Web for an adequate solution which complies with W3C standards - and we found it.

You need to write the following in your CSS:

	OL#page_one { counter-reset: item }
	OL#page_two { counter-reset: item 5 }
	LI { display: block }
	LI:before {
		content: counter(item) ". ";
		counter-increment: item;
		display:block;
		}

And, this is how your lists should be defined:

<ol id="page_one">
	<li>Division Bell</li>
	<li>Atom Hearth Mother</li>
	<li>Relics</li>
	<li>Dark Side of the Moon</li>
	<li>Wish You Were Here</li>
</ol>

<ol id="page_two">
	<li>The Wall</li>
	<li>More</li>
	<li>Piper at the gates of Dawn</li>
	<li>Final Cut</li>
	<li>Meddle</li>
</ol>

These fieldsets represent separate pages, of course. Now, our lists look as we wanted them to look in the first place:


Page 1

  1. Division Bell
  2. Atom Hearth Mother
  3. Relics
  4. Dark Side of the Moon
  5. Wish You Were Here



Page 2

  1. The Wall
  2. More
  3. Piper at the gates of Dawn
  4. Final Cut
  5. Meddle

(more…)

Amazon on Rails - search Amazon using Rails and Ruby/Amazon

Posted by Slobodan Kovacevic in : Programming, Ruby & Rails , 4 comments

Currently I am working on my first big Rails application and I needed an simple and quick way to get matching movies and music based on user entered keywords. The best place to get such information is Amazon as they have almost anything in their store.

So I decided to write a small Rails application that takes input from user and displays products from Amazon matching that criteria - in essence Amazon search. In the end it will look something like this - Amazon on Rails
(more…)

Excellent PHP Thumbnailer Class August 29, 2006

Posted by Slobodan Kovacevic in : Resources and Links, PHP , 3 comments

PHP logo
I’ve found an excellent PHP Thumbnailer Class which lets you manipulate images easily. Beside usual functions you’d expect from thumbnailer class (such as resize and crop) it also has ability to create thumbnails on the fly or to save them. You can see it in action on PHP Thumbnailer demo page.

Coolest CSS Zen Garden solution ever! August 26, 2006

Posted by Predrag in : Resources and Links, Web Design , 2 comments

I 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!

Zen Garden?

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 comment

If 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 , 10 comments

Just 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?
Amazon.com Down

1280×800 Wallpaper for free

Posted by Predrag in : 1280x800 Wallpapers , 12 comments

UPDATE! 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.

Dance Wallpaper 1280x800

Marlboro smokers use IE August 17, 2006

Posted by Slobodan Kovacevic in : Web , 1 comment so far

Today, 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 , 16 comments

Every 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 comment

When 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.