Woshiadai Dev Notebook

There are different options to install/use PHP on Mac Leopard: use the default installation, use MacPort to install, or use XAMPP.

I like the all-in-one bundle XAMPP, it is easy to manage and includes most commonly used options. So, I use it for the most of the time. However, when I need to install imagick, a PHP wrapper for ImageMagick, I got into some troubles.

First, this package is not available via PEAR or PECL (PECL got into some errors). So, I end up manually compile imagick and copy the imagick.so into XAMPP extension directory. Here is what I did:

1. change PATH to use default Leopard PHP installation, i.e. put /usr/bin ahead of XAMPP bin directory in PATH setting
2. use MacPort to install ImageMagick (assume you have MacPort installed, Yahoo! it if you did not know how to)
3. go to http://pecl.php.net/package/imagick, and find out the latest release
4. manually build imagick and copy to XAMPP PHP extension directory (assuming using PHP5)
   
curl -O http://pecl.php.net/get/imagick-2.2.2RC1.tgz
tar xvfz imagick-2.2.2RC1
cd imagick-2.2.2RC1
phpize
./configure --with-imagick=/opt/local
make
sudo make install (we are using /usr/bin/php, so the imagick.so is created in /usr/lib/php/extensions/no-debug-non-zts-20060613/)
sudo cp /usr/lib/php/extensions/no-debug-non-zts-20060613/imagick.so /Applications/xampp/xamppfiles/lib/php/php5/extensions/no-debug-non-zts-20060613/imagick.so

5. edit /Applications/xampp/etc/php.ini, find “Dynamic Extensions” block, add
   extension=imagick.so
   6. testing, add this test.php file to /Applications/xampp/htdocs and try it at http://localhost/test.php, you will see this jpg turned 45 degree clockwise (get santa-claus.jpg from here)
   
< ?php
$img = new Imagick('santa-claus.jpg');
$img->rotateImage(’#fff’, 45);
header(’Content-type: image/jpeg’);
echo $img;
?>


Reference:

• Install PHP5, lighttpd and Imagick on Mac OSX Leopard (talks about using MacPorts to install these things)
• Mac with PHP / Imagick to install
• PECL::Package::imagick
• Install ImageMagick on Mac
• Compiling shared PECL extensions

Had a hard time configuring Tomcat to use JNDI to access MySQL, here is how to do it. Basically, we need to add a datasource resource, then define a resource link in server.xml.

…

…
type="javax.sql.DataSource"
password="1234ge"
driverClassName="com.mysql.jdbc.Driver"
maxIdle="2"
maxWait="5000"
username="guozheng"
url="jdbc:mysql://localhost:3306/testdb"
maxActive="4"/>


…
name="localhost">

1. CSS shorthand for boxes:

margin: 10px — applies to all edges
margin: 10px, 20px — 10px applies to the top and bottom edges; 20px applies to left and right edges
margin: 10px, 20px, 30px — 10px applies to the top, 20px to the left and right, 30px to the bottom
margin: 10px, 20px, 30px, 40px — clockwise order starting from the top (top, right, bottom, and left)

2. Applying styles to a Web page:

a) use a link tag:
[link rel=”stylesheet” type=”text/css” href=”mystylesheet.css” /]

b) use import:
[style type=”text/css”]
@import url(mystylesheet.css);
[/style]

c) embed styles in HTML document:
[head]
[style type=”text/css” media=”all”]
p{
color: black;
}
#navigation p{
color: blue;
font-weight: bold;
font-size: 120%;
}
[/style]
[/head]

d) inline styles:
[p style=”color: red;”]This is painted in Red.[/p]

3. DOCTYPE declarations:

a) XHTML strict:
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”]

b) XHTML transitional: good for depreciated tags
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”]

c) XHTML frameset:
[!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”]

4. Go to top of a page:

a) [a id=”top” name=”top”][/a]
[a href=”#top”]Back to top[/a]

b) some browsers ignore empty elements, so we need to put a single
space in between; if we use XHTML Strict, we need to put elements into
a block element such as [p] or [div].
[div id=”topOfPageAnchor”]
[a id=”top” name=”top”] [/a][/div]

define CSS
div#topOfPageAnchor{
position: absolute;
top: 0;
left: 0;
height: 0;
}

c) use Javascript:
[div id=”topOfPageAnchor”]
[a id=”top” name=”top”] [/a][/div]

[a href=”#top” onclick=”javascript: scrollTo(0,0);”]Top of page[/a]

5. Attaching Javascript:

a) External
[script type=”text/javascript” src=”javascriptfile.js”][/script]

b) Internal
[script type=”text/javascript”] script content [/script]

6. Toggling div visibility with Javascript:

function swap(targetID){
if(document.getElementByID){
target = document.getElementById(targetId);
if(target.style.display == “none”){
target.style.display == “block”;
}else{
target.style.display == “none”;
}
}
}

[div][a href=”#” title=”show text” onclick=”swap(’hiddenDiv’);return false;”]show text[/a][/div]
[div id=”hiddenDiv” style=”display: none;”][p]hello[/p][/div]

7. pseudo-class selectors:

For anchors

a{color: #3366cc;}
a:link{color: #3366cc;}
a:visited{color:#777700;}
a:active{color:#cc00ff;}
a:hover{color:#0066ff;}

# Useful resources:

CSS hacks for different Web browsers
W3C Markup Validation
W3C Link Checker
W3C CSS Validation
iCapture shows your page in Safari
CSS switcher demo