Phine Solutions web work notes

A float DIV overflow tip

Filed under: css/design — 1.618 @ 11:09 pm

I have a container div which has one or several images inside. The container has a border. Since I want the images flow naturally I applied “float: left” to the image wrapper div.

Here comes the problem: the image grows outside the container DIV.

Reason: Floated elements can extend outside their containers (and their containers’ margins). To make sense of this, consider this scenario: if I have a fairly large image and a few small paragraphs floating to its right, the image has to be able to flow outside the container; otherwise only the first paragraph stays on the right side of the image and the rest will be moved below the image, which is not what I intend it to be.

To fix this, end the image(s) with a “cleardiv” (DIV with “clear:both” style) which will force the container to wrap all the images.

install Postfix

Filed under: server setup — 1.618 @ 10:33 pm

First, remove sendmail.

rpm -e –nodeps sendmail

Add a dedicated user:
groupadd -g 5000 vmailman
adduser -u 5000 -g 5000 vmailman
usermod -d /var/mail/vhosts vmailman

install Postfix from RPM.

install mysql

Filed under: server setup — 1.618 @ 10:33 pm

Installed MySQL 5 from RPMs grabbed from mysql.com

MySQL-client-standard-5.0.24-0.rhel4.i386.rpm
MySQL-devel-standard-5.0.24-0.rhel4.i386.rpm
MySQL-server-standard-5.0.24-0.rhel4.i386.rpm
MySQL-shared-standard-5.0.24-0.rhel4.i386.rpm

mysql configuration file
cp /usr/share/doc/MySQL-server-standard-5.0.24/my-small.cnf etc
use the following configuration:
[mysqld]
bind_address = 127.0.0.1

installation path
mysql home is located under /var/lib/mysql

mysqladmin -u root status
shows some stats.

Now we need to tighten it up:

shell> mysql -u root
mysql> DELETE FROM mysql.user WHERE User = ”;
mysql> FLUSH PRIVILEGES;

mysql -u root mysql
mysql>update mysql.user set password = PASSWORD(”whateveritis”) where user = ‘root’;
mysql>FLUSH PRIVILEGES;

or

shell> mysql -u root
mysql> SET PASSWORD FOR ‘root’@'localhost’ = PASSWORD(’newpwd’);
mysql> SET PASSWORD FOR ‘root’@'host_name’ = PASSWORD(’newpwd’);

or

shell> mysqladmin -u root password “newpwd”
shell> mysqladmin -u root -h host_name password “newpwd”

Add a new user:

mysql> GRANT ALL PRIVILEGES ON *.* TO ’someuser’@'localhost’
-> IDENTIFIED BY ’somepass’ WITH GRANT OPTION;

or

mysql> INSERT INTO user
-> VALUES(’localhost’,’someuser’,PASSWORD(’somepass’),
-> ‘Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’,'Y’);

mysql> GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,DROP
-> ON somedb.*
-> TO ’someuser’@'localhost’
-> IDENTIFIED BY ’somepass’;

Note: if PHP was installed befor MySQL, it will need to be re-compiled…

apache2.2/php virtual host

Filed under: server setup — 1.618 @ 10:32 pm

When testing viewing index.php under a user directory, I kept getting this error:
in the log: client denied by server configuration
On the browser: Permission denied: access to /index.php denied

Feeling puzzled aftering trying to set the directory permission, I found this post and it really helped me out.

In the default directory configuration, it looks like this:
<directory>
Options FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all
</directory>

It is very restrictive and essentially denies everything.

Now what I need to do is to add this in my virtual host session:
<directory>
AllowOverRide All
Order deny,allow
Allow from all
</directory>>

That fixed the issue.

install PHP

Filed under: server setup — 1.618 @ 10:31 pm

Since I didn’t intall the devel packages, some extra RPMs need to be installed for PHP installation.

A bunch of RPMs that need to be installed:
flex-2.5.4a-33.i386.rpm
libxml2-devel-2.6.16-6.i386.rpm
zlib-devel-1.2.1.2-1.2.i386.rpm
mysql-devel-4.1.12-3.RHEL4.1.i386.rpm
openssl-devel-0.9.7a-43.8.i586.rpm
krb5-devel-1.3.4-27.i386.rpm
e2fsprogs-devel-1.35-12.3.EL4.i386.rpm
mysql-bench-4.1.12-3.RHEL4.1.i386.rpm
perl-DBD-MySQL-2.9004-3.1.i386.rpm
perl-DBI-1.40-8.i386.rpm
mysql-4.1.12-3.RHEL4.1.i386.rpm

Again, if you have development packages installed when insalling Linux at the beginning, these packages should be there.

some additional packages:
yum install libpng-devel
yum install libjpeg-devel
yum install libxslt-devel

yum install libcrypt-devel <– without this one make will error out at last step.

Now we can run:
./configure –with-apxs2=/usr/local/apache2/bin/apxs –with-mysql –enable-mbstring –with-curl=/usr/ –enable-exif –with-xsl=/usr/lib/ –with-gd –with-jpeg-dir=/usr/lib/ –with-png-dir=/usr/lib/ –with-zlib-dir=/usr/lib/

make
make install

install apache

Filed under: server setup — 1.618 @ 10:31 pm

Now it’s time to install the apache web server.

  • First, need to remove the existing httpd stuff. I removed the following RPMS.

rpm -e mod_python-3.1.3-5.1.i386
rpm -e mod_ssl-2.0.52-22.ent.centos4.i386
rpm -e mod_perl-1.99_16-4.centos4.i386
rpm -e webalizer-2.01_10-25.i386
rpm -e httpd-2.0.52-22.ent.centos4 httpd-manual-2.0.52-22.ent.centos4 system-config-httpd-1.3.1-1 httpd-suexec-2.0.52-22.ent.centos4

The Perl and Python stuff depend on the httpd so I went ahead removed them.

  • Then I downloaded apache 2.2.3 source code, unpacked them and then compile:

Oops…
configure –enable-so tells me gcc is not there.

./configure –enable-so –enable-ssl –enable-rewrite –enable-speling=shared

Ok, I didn’t install the developer’s package during system installation to try to save some space, not it came back to bite me.

After some research, the following rpms are installed:
gcc-3.4.5-2.i386.rpm
glibc-headers-2.3.4-2.19.i386.rpm
pkgconfig-0.15.0-3.i386.rpm
glib2-devel-2.4.7-1.i386.rpm
glibc-kernheaders-2.4-9.1.98.EL.i386.rpm
glibc-devel-2.3.4-2.19.i386.rpm

  • Apache compiled and installed succefully.

./apachectl start

“It works!”

Now we want to add Apache httpd server to the services:

  • first, make sure we have the startup script ready, copy the following script to /etc/init.d

————————————————————————
#!/bin/bash
#
# httpd Startup script for the Apache HTTP Server
#
# chkconfig: - 85 15
# description: Apache is a World Wide Web server. It is used to serve # HTML files and CGI.
# processname: httpd
# config: /etc/httpd/conf/httpd.conf
# config: /etc/sysconfig/httpd
# pidfile: /var/run/httpd.pid

RETVAL=0

# The semantics of these two functions differ from the way apachectl does
# things — attempting to start while running is a failure, and shutdown
# when not running is also a failure. So we just do it the way init scripts
# are expected to behave here.
start() {
echo -n $”Starting $prog: ”
/usr/local/apache2/bin/apachectl start
RETVAL=$?
return $RETVAL
}
stop() {
echo -n $”Stopping $prog: ”
/usr/local/apache2/bin/apachectl stop
RETVAL=$?
return $RETVAL
}

# See how we were called.
case “$1″ in
start)
start
;;
stop)
stop
;;
status)
status $httpd
RETVAL=$?
;;
restart)
stop
start
;;
condrestart)
if [ -f ${pidfile} ] ; then
stop
start
fi
;;
graceful|help|configtest|fullstatus)
$apachectl $@
RETVAL=$?
;;
*)
echo $”Usage: $prog {start|stop|restart|condrestart|status|fullstatus|graceful|help|configtest}”
exit 1
esac

exit $RETVAL

————————————————————————

The script is not going to win me any award but it is functional….status check is not in the service since it is quite easy to check on port 80…

  • Second, add the service:

chkconfig –add httpd

  • Third, turn it on:

chkconfig –level 3 httpd on

  • Ok, do a little testing:

service httpd restart

prepare for my dedicated server

Filed under: server setup — 1.618 @ 10:30 pm

Since I decided to upgrade one of my website’s hosting to a dedicated server in the near future, I figured that I need to prepare for the administration tasks. Got to shake some dust off my fingers. What’s the plan? Use one of my old box to practice installing Apache/PHP, MySQL and Qmail.

Downloaded the CentOS 4.3 ISO image from web and burned 4 CDs.

Dug out my 10 year old PC. Yes, you heard it right, I built it myself 10 years ago. The CPU is an AMD400(mm?), and it has 256m emmory. Hard drive? 10G. It was a HUGH hard drive then.

Ok, booted the system from CDROM and the rest of the stuff was pretty much no brainer.

I about 2 hours I had my system running.

For GUI, I selected KDE. Not that I preferred it, just thought it takes less space comparing with Gnome…I may be wrong here, or I can get some other X system which is far lighter than KDE. But I am not palnning to use the GUI to manage the machine. As a matter of fact, once the system is up I’ll change the default runlevel to 3 so it doesn’t load this clunky GUI to start.

Here is how I did it:

Su to root
Open /etc/inittab
change
id:3:initdefault:
to
id:5:initdefault:

Restarted the system…

The meaning of the runlevels:
0 - halt (Do NOT set initdefault to this)
1 - Single user mode
2 - Multiuser, without NFS (The same as 3, if you do not have networking)
3 - Full multiuser mode
4 - unused
5 - X11
6 - reboot (Do NOT set initdefault to this)

Is my design good enough?

Filed under: css/design — 1.618 @ 10:22 pm

I love designing web pages. But often times, I found myself submerged in the endless changing and tweaking the page designs and still not satisfied with the result. This can last hours and sometimes days. I figure this is not the most efficient way to get the things done. Here are some tips I use to improve this:

When stuck in an endless design change, take a break and come back with some fresh eyes and fresh mind. I know it is really hard to put down the unfinished work but this can actually help us finish quicker. Plus, this step leads to the next one, which is even more important;

Use this break to think about what is the GOAL of this part of the design. Am I working to achieve the goal or I am simply just after the pure visual details? Is moving this image 10 pixel to the right really improve the usability of this web page? Ask the questions and get the answer from the design requirement.

Hope these tips can help you too my friend.

A quick web design primer

Filed under: css/design — 1.618 @ 10:21 pm

To build a really user friendly web site, made a list of rules that I consider a user really hates, and us, as the site designers, try to work on:

I don’t want to be lost in your site.
The usability is the key to your web site. The user ought to be able to easily tell “where I am” and “what I am doing” all the time on your web site. How to do this? Good navigation system and clear links. They really need to stand out from the rest of the content. Sometimes a simple underlink navigation beats the sophisticated rollover image manu. Why? Because they are just easier to follow.

I love your content, but can I see your main point first?
Every web site (or page) need to have a clear point from the very beginning. Web users scam the content. And they will appreciate the clear writing which shows them what this page is all about.

I love your content, but I am lazy and I don’t want to dig around.
Links are good. They provide nice structure. But overuse the internal links can really test someone’s patience. Don’t make the users make too many clicks. For example, if you contact phone number and email are short enough (which is true most of the time), show them instead of putting a “click here” link which leads to another page.

Your image is obscure, and what does this icon mean?
Images bring the liveliness to your web page. And remember, they can also be the source of the distraction. The image needs to fit the whole theme of your web page. They are the “eye-pleasers”, not dominant roles.

Talk to me…
Write the web copy like you are talking to someone.

Left, or right?
I’ve seen some web sites place their logo on the right top corner of the page. Quitely frankly I think this is not a very good idea. In English speaking country, people read from left to right. Maybe that logo looks nice on the right, but it really works against users’ brain.

My eyes don’t want to jump!
A web site needs to have a consistent flow, left to right, up and down. It should guide the user to the next click or next part of your page, natuarally.

Yahoo map mash

Filed under: web 2.0 build 1 — 1.618 @ 10:20 pm

The good news is that Yahoo! upgraded its map service and it looks very decent. The better news is that it is much easier to use the existing API to “mash” the map into your own web site. There are a lot of new terms and technologies, we can start with this nice piece of article:
How to build a Maps Mash-up from Dan Theurer.

©phinesolutions.com