Category Archives: Tips

Start a dev server to preview your work without Yeoman

I published these notes on GitHub as a Gist recently, but I’ll go ahead and post them here too. It pertains to starting a dev server to preview your work quickly without using Yeoman. Yeoman is nice for doing this, especially using LiveReload, but you may need this and not always have the ability to use Yeoman or may not think it’s worth installing it just for that. Regardless, here’s how to preview your work on a dev server without Yeoman, using Ruby, Python or Node.js.

Requirements

Mac OS: Ruby and Python are pre-installed. Install Node.js.

Windows: First install Ruby, Python or Node.js

Ruby

Install the asdf gem.

gem install asdf

Change to the directory you want to host and type asdf from the terminal or command prompt.

Navigate to http://localhost:9292/ in your browser to preview your site.

Python

Change to the directory you want to host and type python -m SimpleHTTPServer 8080 from the terminal or command prompt.

Navigate to http://localhost:8080/ in your browser to preview your site.

Node.js

From the terminal or command prompt, type npm init and answer the questions from the prompts to create a package.json file.

Type npm install --save express to install express as a dependency and update your package.json file.

Create a JavaScript file called server.js and save it with the following contents.

var express = require('express'),
app = express();

app.use( express.static( __dirname + '/public' ) );

var server = app.listen(3000, function() {
console.log('Listening on port %d', server.address().port);
});

Put the files you wish to preview in a directory called public, and type node server.js from your parent directory.

Navigate to http://localhost:3000/ in your browser to preview your site.

PNG Not a Good Fit for the Web Afterall

Okay, I bought into the hype of the PNG format. I admit that on the surface, PNG is a superior format for the web versus JPEG and GIF.

There’s one problem. If you use PNG graphics with JPEG or GIF or CSS colors, the colors do not match up. This means if you use a PNG over a JPEG or colored backgound that is the same color as the PNG, the color will not look the same. This is a problem for me. So much so that I have stopped using PNGs in my designs. They only way I can use them is if the color matching is not a problem.

Also, PNG transparency is not supported in IE6. This is not such a problem because there is a workaround. But it is annoying and IE6 is still the most used browser in the world.

I found out that the reason PNG graphics do not mix with other formats is due to gamma correction. One solution is to remove the gamma information. GammaSlamma is a program for the Mac OS that does this. However, this does not work in all browsers.

I was happy to use PNGs until I figured out the problems with it. Until the technology catches up, I am still stuck using outdated graphic formats whether I want to or not.

Nowrap for CSS

Today I learned that there is a “nowrap” equivalent in CSS. Nowrap is an attribute of the td or th tag that is deprecated in HTML 4.01. Nowrap tells the table cell not to automatically wrap the text contained in the cell.

The CSS 2.1 specification has a property called “white-space.” One of the values of white-space is nowrap. I tested this property, and it works the same as nowrap does. I also confirmed that it works in IE6, IE7 and Firefox 2.

So, if text automatically wrapping is a problem for you, don’t use “nowrap” because it is deprecated. Instead use the white-space property, with nowrap for the value. I added the property as an inline style rather than in the stylesheet, so that I didn’t have to create another class and I can use it only where it is needed. How you use it is up to you.

Installing Apache 2.0, PHP and Subversion on Mac OS 10.4

After trying to install Django on my Mac and failing, I have decided to try and upgrade my local version of Apache 1.3 to version 2.0. If you are developing on the Mac OS, you may know that Mac OS 10.4 comes with Apache installed on it. While this is one of the great things about the Mac OS, what’s not great is that it is out of date. For most cases when you are developing locally on the Mac, Apache 1.3 is fine. But, you may find that with Apache 1.3 installed, you will not be able to run certain software.

The solution to this is to upgrade to Apache 2.0. I admit that I was reluctant to do this myself, but I found a tutorial from Apple that convinced me to try it. Apache 2.0.61 is the current stable version of the 2.0 series, and that is the version I decided to go with. I downloaded the package and extracted it into /usr/local/src using the following commands.

curl -O http://www.eng.lsu.edu/mirrors/apache/httpd/httpd-2.0.61.tar.gz
tar xvfz httpd-2.0.61.tar.gz
cd httpd-2.0.61
export ac_cv_func_poll=no

Make the following changes to srclib/apr/network_io/unix/sendrecv.c in the apr_socket_send function:

Change:

do {
rv = write(sock->socketdes, buf, (*len));
} while (rv == -1 && errno == EINTR);

To:

try_write: do {
rv = write(sock->socketdes, buf, (*len));
} while (rv == -1 && errno == EINTR);

(That is, add “try_write:” right before the “do {“.)

Replace the following else clause (that is, delete these five lines):

else {
do {
rv = write(sock->socketdes, buf, (*len));
} while (rv == -1 && errno == EINTR);
}

with these two lines:

else
goto try_write;

Run configure, run make, and then run sudo make install to set up Apache 2.0 for installation:

./configure --enable-mods-shared=most --enable-ssl
--with-mpm=worker --without-berkeley-db
make
sudo make install

Create a directory for mod_dav.h, and copy the module to it using the following Terminal commands:

cd /usr/local/apache2
mkdir -p modules/dav/main
cp include/mod_dav.h modules/dav/main/

Once you have it installed, run the following command to start Apache.

sudo /usr/local/apache2/bin/apachectl start

You also need to run the following commands to start Apache 2.0 on each reboot.

sudo -s
mkdir /Library/StartupItems # This directory might already exist
ditto /System/Library/StartupItems/Apache /Library/StartupItems/Apache2
mv /Library/StartupItems/Apache2/Apache /Library/StartupItems/Apache2/Apache2
defaults write /Library/StartupItems/Apache2/StartupParameters Provides -array "Apache2"
perl -p -i -e 's/WEBSERVER/APACHE2/g' /Library/StartupItems/Apache2/Apache2
echo "APACHE2=-YES-" >> /etc/hostconfig

I have a problem now in that turning off and on web sharing in the system preferences will not stop and start Apache 2.0. I am at a loss on how to make this work. I am also unsure whether or not Apache 2.0 will start on reboot or whether I have to start it manually.

Subversion is rather easy to install. I used the tutorial found at hivelogic along with the same one I used to install Apache 2.0. Subversion appears to be installed and working but I haven’t really tested it in depth.

Once I had Apache 2.0 installed, I wanted to be able to access it when I go to http://localhost/ and access the files in /Library/Webserver/Documents. You need to stop Apache and then edit the http.conf file found in /usr/local/apache2/conf/httpd.conf. Then you need to change the DocumentRoot and the Directory.

DocumentRoot "/Library/Webserver/Documents"
<Directory "/Library/Webserver/Documents">

Now you can restart Apache and you should be able to access Apache 2.0 on http://localhost/. However, I found that PHP was no longer working because I had not yet installed it for Apache 2.0. Don’t worry though all you have to do is recompile it. Here are the steps I used.

If you already have the php files on your machine, go into that directory.

cd /usr/local/src/php-4.4.7

If not download it and unpack it again and then go into the directory you just created. Now you need to create the directory to install PHP into.

sudo mkdir /apache2/php

Then all you need to do is configure it with the right options. I used the following commands which adds support for the GD graphics library, in addition to mysql.

./configure --prefix=/usr/local/apache2/php
--with-zlib-dir=/usr/local/lib
--with-jpeg-dir=/usr/local/lib
--with-png-dir=/usr/local/lib
--with-gd --with-mysql=/usr/local/mysql
--with-apxs2=/usr/local/apache2/bin/apxs
make
sudo make install

I ran into problems doing this. I kept getting the error from mysql.

dyld: Library not loaded: /usr/local/mysql/lib/mysql/libmysqlclient.15.dylib

I fixed this by copying the file into that path using the following commands.

cd /usr/local/mysql/lib
mkdir mysql
cp libmysqlclient.15.dylib mysql/libmysqlclient.15.dylib

I ran configure, make, sudo make install again, and it worked. An optional step you may want to take is to create a php.ini file. I created the php.ini file with this command.

sudo cp php.ini-dist /apache2/php/lib/php.ini

Now we need to edit the http.conf again so that PHP will run in Apache. Add the following lines in the appropriate sections.

LoadModule php4_module modules/libphp4.so
DirectoryIndex index.html index.php
AddType application/x-httpd-php .php

Now restart Apache 2.0. Once I did that it worked. I now have Apache 2.0, PHP 4.4.7 and Subversion 1.3 installed locally on my Mac.

Disclaimer: Your mileage may vary. This is the compilation of a lot of work over a period of several days. I have tried to recount the steps I used as closely as possible. Use at your own risk. Here are some tutorials you may want to look at if you get stuck. Good luck.

Building and Installing Apache 2.2.4 and PHP 5.1.4 on Mac OS X 10.4.6
Apache 2.0 on Unix systems

WordPress.com Stats Plugin

You may or may not know that I use the WordPress blogging software for all my blogging needs. I really cannot say enough about the WordPress team and their blogging tool, not to mention the Askimet comment spam blocking tool. I would recommend WordPress to anyone looking to start blogging.

One of the nice features of WordPress is the openness of it and the plugins that are freely available. I have been looking for a good stats plugin for WordPress since I started using it. The one that I started using a few months ago no longer works with the latest WordPress version, 2.3.

I also use the WordPress.com platform for blogging, and the other day I was asking the question, why isn’t the WordPress.com stats software available for the non-hosted WordPress software. Since they already have the code, it seems like it would be easy to include in the standalone version of WordPress.

It turns out that it is available. After doing a little searching, I found the WordPress.com Stats plugin which looks like exactly what I asked for. I must say I am ecstatic over this. How often do you ask for something like that only to find it so soon? Anyway, I haven’t tested it yet, so I don’t know how well it works yet. But, if it works just like WordPress.com, it should be the only stats plugin that I need.

Update: It is not showing any stats as of yet. However, a quick look at the FAQ shows me that you need the tag <?php wp_footer(); ?> in your footer.php file. I have added that tag and hope to start seeing stats soon it is working.

Downgrading Web Page Layouts for IE6

Lately, I have found that it is easier to allow a page to display differently in IE 6 than it is to make that page display the same way in IE6 as it does in other browsers. Think about it. Let’s say you have 4 browsers. Your page looks the same in 3 of the browsers, but in one of the browsers, it doesn’t quite look like it should. You could choose to spend extra time to find a work around to make it display the same across all 4 browsers. You could even go so far as changing the layout of your page. Or you could simply allow it to display differently in that one browser, and move on to the next project.

If someone has a problem with it, the solution is simple. Upgrade. Or change browsers. It makes sense, and it pisses me off I didn’t start doing it sooner.

Now before people go and get all upset, I am not advocating designing your site to purposely look bad or crappy in IE6, just different. For example, say you have a div with a transparent PNG as a background. IE6 lacks support for transparent PNGs, thus requires a work around hack to display a transparent PNG as a background. You could implement the work around hack. Or you could just set the background as a solid color in an IE6 only stylesheet using conditional comments. The solid color background won’t look as good as the transparent PNG, but it works fine. Someone using a browser that supports transparent PNGs will have a better experience, but it still works.

Finally, I know that we all have clients, and our clients drive most, if not all, of the work that we do. If a client wants it to look a certain way in a certain browser, then sometimes that’s just the way it is. But I bet if you tried reasoning with your client using the above argument, you just might persuade them to see things your way.

Update: I forgot to add that making things display differently in IE usually requires the use of an IE only stylesheet with conditional comments.

301 Redirects

I recently took two blogs and combined them into one domain, kempwire.com. In order to do that, I needed to find out how to do 301 redirects to redirect all traffic and links that were currently going to those domains to the new domain. 301 redirects are permanent redirects. According to Google, you need to use 301 redirects to let them know that your domain is moved. In addition, all links that were counted towards your old domain will be counted towards the new one. I also wanted to take out the www of this domain so that all traffic goes to kempwire.com.

I have done 301 redirects before but I needed examples of code to use to do exactly what I wanted to do. Fortunately, I didn’t have to look too hard. SEOmoz has an excellent guide on how to do 301 redirects on Apache. This guide is right on because it tells you exactly what to do and it covers all the bases, including the no-www redirect.

I got it done, and so far, everything is working perfectly. I still need a few more days of analytics tracking to make sure it is working correctly. I had to give the shout out though to SEOmoz for doing such a great post on this. Great job guys!

How to Restart Apache Locally on Mac OS X

Working with PHP and Apache locally on my Mac, I found myself needing to know how to restart Apache. The method I normally use did not work because for some reason etc/init.d does not exist or could not be found. So I found another command that worked. Simply run the following.

sudo apachectl graceful

graceful reloads the configuration files and gracefully restarts. Any current connections are allowed to complete. That’s it! You just restarted Apache. Easy huh?

Installing GD Graphics Library on Mac OS X

Recently, I needed to install the GD Graphics Library locally on my Mac. GD is an open source code library for the dynamic creation of images by programmers. GD creates PNG, JPEG and GIF images, among other formats. GD is commonly used to generate charts, graphics, thumbnails, and most anything else, on the fly. While not restricted to use on the web, the most common applications of GD involve web site development.

I searched through a lot of tutorials, and found that most of them are out of date and/or incomplete. In spite of this, I finally managed to figure it out. However, I took notes on everything I did so that someone else needing to do this will find this helpful and won’t have to struggle with it as much as I did.

I have to admit I am pretty green when it comes to using command line and installing open source code on my computer. I have learned a lot though and I really enjoy it. I have found that the Mac is a great open source programming environment. Many programmers are figuring this out, and I believe you will continue to see more programmers coming to the Mac platform.

Anyway, these instructions, as straightforward as they are, still assume you know the basics of how to install and run open source code on your computer. If you don’t, you need to go read more and then come back here. Now, let’s begin.

The first thing you need to do is download the packages you will need. Here is the commands you will use for the most current versions of these packages as of this posting.

curl -O http://www.zlib.net/zlib-1.2.3.tar.gz
curl -O http://superb-east.dl.sourceforge.net/sourceforge/libpng/libpng-1.2.20.tar.gz
curl -O ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz
curl -O http://download.savannah.gnu.org/releases/freetype/freetype-2.3.5.tar.gz
curl -O http://www.libgd.org/releases/gd-2.0.35.tar.gz

Download these packages to a directory on your hard drive. The next thing you need to do is unpack these directories. Running this command will unpack all the directories you just downloaded.

ls *gz | xargs -n 1 tar zxvf

First, we will install zlib by running the commands below.

cd zlib-1.2.3
./configure --shared
make
sudo make install

Next, install libpng by running the commands below.

cd ../libpng-1.2.20
cp scripts/makefile.darwin Makefile

Open up Makefile in your favorite text editor and edit the file to read as follows.

# Where the zlib library and include files are located
ZLIBLIB=/usr/local/lib
ZLIBINC=/usr/local/include
#ZLIBLIB=../zlib
#ZLIBINC=../zlib

Then finish the install.

make
sudo make install

Test this by running the following code.

export srcdir=.
./test-pngtest.sh

Next install libjpeg.

cd ../jpeg-6b/
ln -s `which glibtool` ./libtool
export MACOSX_DEPLOYMENT_TARGET=10.4
./configure --enable-shared
make
sudo make install

Now install freetype2.

cd ../freetype-2.3.5

Open include/freetype/config/ftoption.h in your favorite editor and uncomment line 461 to read as follows.

#define TT_CONFIG_OPTION_BYTECODE_INTERPRETER

Then complete the install.

./configure
make
sudo make install

Finally install GD.

cd ../gd-2.0.35
ln -s `which glibtool` ./libtool
./configure

The report looked like this when I did it.

Support for PNG library: yes
Support for JPEG library: yes
Support for Freetype 2.x library: yes
Support for Fontconfig library: no
Support for Xpm library: no
Support for pthreads: yes

Then finish the install.

make
sudo make install

You can test it with the following code.

./gdtest test/gdtest.png
open test/*.jpg

To add support for Fontconfig, run this command.

export GDFONTPATH=$HOME/Library/Fonts:/Library/Fonts:/System/Library/Fonts

To complete the installation, you need to recomple PHP with all the libraries you just installed. Here is how I did it.

./configure
--with-zlib-dir=/usr/local/lib
--with-jpeg-dir=/usr/local/lib
--with-png-dir=/usr/local/lib
--with-gd
--with-mysql=/usr/local/mysql
--with-apxs

make
sudo make install

Now you should have PHP with GDLIB installed. That’s it. You’re done! Now, on to your next project!

Layout Fix for Internet Explorer

A friend of mine, David Ross, just gave me a hot tip the other day. I have a lot of problems with layout in Internet Explorer 6 and 7, usually so much so that I have to have extra IE-only styles for the builds that I do.

David told me to make sure when you use floating divs that you use display: inline for Internet Explorer. That did the trick! I have way less problems with layout in IE now thanks to this tip.