I wrote a minimalistic photo gallery for my wife. It’s a quick mix of php and MySQL on the server, css/html page, and some Javascript+jQuery for a still unfinished slideshow function.

The layout spec was:

– left-side navigation column
– picture to the right of the navigation, with a title centered underneath
– work with pictures of varying sizes
– a screen-wide footer
– as little else as possible

I wanted to make it as friendly as possible to screen sizes and form factors, so that even in the smallest or weirdest screen, you would see as much of the picture as possible. Therefore, I stuck the title in the nav bar rather than as a horizontal banner, so that the picture would not have wasted space above it.

As far as I can see, it looks great on everything from large monitors to an iPhone. The photo uses all the height available the device, the left bar will squeeze and word wrap in horizontally narrow screens, the photo will be pleasantly centered in wide screens, and it will adapt nicely to on-the-fly changes in screen size.

Being the old dog that I am, I laid out the page using classic html tables rather than the more modern css layout paradigm (of course, I still used css for styling). When I was done, I looked into doing it the css way; table cells and nested tables are hard to keep track of in html, and the design is so simple, that css should make it much easier. Conclusion?

It can’t be done with css.

Separate elements in css can’t have the kind of flexibility and influence on each other that table cells have. In essence:

– you can’t dock two elements together with css, so if you have two elements side by side, in narrow screens the element on the right will wrap to the "next" line, ending up below the left element.

– to force elements to stay on the same line, you have to take them out of the normal layout flow, which means they can’t influence each other anymore or dynamically resize to adapt to their content and the size of their container.

So tables it is. How disappointing! If you know how to solve this, please give me a shout. (And no, solutions that include any sort of hardcoded position or size are not acceptable)

In the previous post, I made references to MySQL but didn’t say anything about a quick local setup. So here’s what I did for mine:

– Download MySQL binaries from http://dev.mysql.com/downloads/mysql/. I chose the huge 64-bit Zip archive.
– I unzipped the /bin/, /data/, /docs/ and /share/english/ folders into my destination MySQL folder. Then I deleted all the *.pdb files.
– Start the server via start mysqld. You can later stop it with mysqladmin.exe shutdown -u root.
– By default it has a root user without password, and an anonymous user.
– Run the client with mysql -u root.
– Delete the anonymous user or it will mess up with your ability to connect using other users you create: DELETE FROM mysql.user WHERE user=”; FLUSH PRIVILEGES;
– Create your database and your development user: CREATE DATABASE MyDatabase; GRANT SELECT, CREATE, DELETE, UPDATE, INSERT ON MyDatabase.* to MyUser@’%’ IDENTIFIED BY "MyPassword";
– Now you can connect as your development user with mysql -u MyUser -pMyPassword.
– I recommend downloading MySQL Workbench from http://dev.mysql.com/downloads/workbench/ to perform database maintenance.

Since I started working on Pyro’s server backend for its social games, I have grown to love the nginx web server. Compact, efficient and fully featured, it’s a great alternative to Apache if you are in full control of your web server and apps.

A few days ago nginx came of age with the release of 1.0, so I did a refresh of my simple web dev setup at home:

– Download nginx 1.0 Windows binary here
– Download thread-safe php Windows binary here
– Unzip them to their own folders
– Copy php.ini-development to php.ini. Edit php.ini and uncomment the lines containing extension=php_mysql.dll and extension_dir = "ext".
– Start php by running php-cgi.exe -b 127.0.0.1:9000. You can later stop it with Ctrl-C, taskkill /IM php-cgi.exe or with your favourite process killing method.
– Make the following edits to conf\nginx.conf:
– If you are running Vista or later with IPv6, change the line listen 80 to listen [::]:80. This makes nginx listen on both IPv4 and IPv6. Even if you are not doing any work related to IPv6, your Windows hosts file will probably contain the IPv6 loopback entry for localhost (::1), and your browsers will try to use that IPv6 address for localhost. Enabling IPv6 in nginx lets you use all three loopbacks (http://127.0.0.1/, http://[::1]/ and http://localhost/) intercheangeably and without problems.
– Uncomment the block lines starting with location ~ \.php$ to enable php scripts.
– Change the fastcgi_param line to eliminate the hardcoded "scripts" folder path. It should be fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;.
– Add index.php to the index line so it looks like index index.html index.htm index.php;
– Remove all the root html; lines and leave a single root d:\dev\mywebdevfolder line at the server scope. I usually put it just below the server_name localhost; line.
– Start nginx by running nginx.exe or, since it can’t be killed with Ctrl-C, start nginx.exe.
– use the command-line signals to control nginx: nginx -s quit to stop it, nginx -s reload to reload the configuration.

That should be it, nginx+php in 5 minutes or less!