Installing PhantomJS on Ubuntu for use by Apache/PHP

2 comments

UPDATE:  PhantomJS 1.5 is now purely headless and pre-compiled!  This makes it way easier than the method described in my original post.  Now, you just:

1.  Install the necessary dependencies:

sudo apt-get install libfreetype6 fontconfig

2.  Download the pre-compiled version that matches your OS.

3.  Extract it somewhere (in this case I extracted it to my $HOME directory) and then create a symbolic link to the binary: 
sudo ln -s ~/phantomjs/bin/phantomjs /usr/local/bin/phantomjs
4.  Set group: 
sudo chown root:www-data ~/phantomjs/bin/phantomjs
5.  Set file permissions: 
sudo chmod 0755 ~/phantomjs/bin/phantomjs
6.  To test everything, open a command prompt and type (this should output something like 1.5.0): 
phantomjs --version

...I'll keep this old post for historical purposes:

PhantomJS is a really cool project for specific use cases.  To install on Ubuntu and make the functionality available to Apache/PHP, do the following:

1.  Install dependencies and Xvfb (due to issue #163):
sudo apt-get install xvfb git build-essential gtk2-engines-pixbuf xfonts-100dpi x11-xkb-utils xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic libqt4-dev libqtwebkit-dev qt4-qmake python-qt4

2.  Create the Xvfb service:

sudo nano /etc/init.d/Xvfb

Paste the following into the file:

#! /bin/sh

### BEGIN INIT INFO
# Provides: Xvfb
# Required-Start: $local_fs $remote_fs
# Required-Stop:
# X-Start-Before:
# Default-Start: 2 3 4 5
# Default-Stop:
### END INIT INFO

N=/etc/init.d/Xvfb

set -e

case "$1" in
  start)
Xvfb :0 -screen 0 1024x768x24 &
;;
  stop|reload|restart|force-reload)
;;
  *) 
echo "Usage: $N {start|stop|restart|force-reload}" >&2exit 1
;;
esac

exit 0
3.  Set service to be executable and to autostart:

sudo chmod +x /etc/init.d/Xvfb

sudo update-rc.d Xvfb defaults

4.  Restart your computer

5.  Create a directory where you will build PhantomJS: 
mkdir -p ~/github && cd ~/github
6.  Download PhantomJS:
git clone git://github.com/ariya/phantomjs.git && cd phantomjs
7.  (optional)  If you want to build a specific version of PhantomJS (1.4 in this example), perform this next step, otherwise skip to Step 5 and the latest PhantomJS code (master) will be used:
git checkout 1.4
8.  Build PhantomJS:
qmake-qt4 && make
9.  Once PhantomJS is built, copy the binary into your local path: 
sudo cp ~/github/phantomjs/bin/phantomjs /usr/local/bin
10.  Set group: 
sudo chown root:www-data /usr/local/bin/phantomjs
11.  Set file permissions: 
sudo chmod 0755 /usr/local/bin/phantomjs
12.  To test everything, open a command prompt and type (this should output something like 1.4.1): 
DISPLAY=:0 phantomjs --version

Congratulations!  You can now use PhantomJS in your PHP code, for example:
<?php
echo "PhantomJS " . shell_exec("DISPLAY=:0 phantomjs --version");
?>
P.S. If you're looking for an inexpensive, reliable web host that supports PhantomJS, I recommend WebFaction

Switching to Lubuntu 11.10

0 comments

I was pretty excited to upgrade to Ubuntu Studio 11.10 this past week but I was met with three big disappointments:

  1. The release notes indicated "the Ubuntu Studio suffered an almost complete team fail during this cycle" and the XFCE transition "remains incomplete and not fully tested".  In their defense, they also politely reminded their fans that "none of the active Ubuntu Studio team members is a paid contributor or developer, we are all volunteer. We apologize for any deficiencies in this release."  So, bottom line, Ubuntu Studio 11.10 is buggy - install at your own risk.
  2. No low latency kernel.  Part of the big advantage of Ubuntu Studio is their custom kernel with improved performance for image and video editing.  Per the release notes: "We are working with the Ubuntu Kernel Team to get a -lowlatency kernel into the archives which will then ship, in addition to the -generic kernel, in Ubuntu Studio."
  3. After throwing caution to the wind, I decided to forge ahead and install anyways.  Surprisingly, it took quite awhile just to find the installation download since Ubuntu Studio doesn't list it on their download page.  I found the torrent download on Ubuntu's site but it wouldn't work with my Transmission torrent client.  So, I was forced to use the standard HTTP download, which took forever of course.  After finally downloading the DVD iso, booting into it, and waiting forever during the install process, my new Ubunutu Studio was ready!  I excitedly rebooted as instructed, saw a few initialization lines, and then it just sat there hung/frozen.  I rebooted multiple times to no avail.  Thinking perhaps my iso image was bad, I actually downloaded and installed Xubuntu (since it's based on XFCE like the new Ubuntu Studio) and then used the psychocats script to remove the Xubuntu programs and instead install the ubuntustudio-desktop package (not the ubuntu-desktop package identified in the original psychocats script).  After waiting an equally long eternity, I was again disappointed when the OS froze after reboot.  As the Master Control Program in Tron would say, End of line.
With Ubuntu Studio out of the picture, I began my quest to find a suitable Linux replacement.  After trying Xubuntu, Ubuntu, Debian, Slackware, CentOS, and openSUSE, I finally settled on my final choice:  Lubuntu.

Lubuntu is based on the lightweight LXDE desktop environment.  Lubuntu 11.10 is also the first officially recognized and supported Ubuntu variant using LXDE.  Although I've tried other LXDE distros and found them too boxy and simplistic, this release adds just the right balance of attractive UI and streamlined performance while also providing full support and access to Ubuntu's and Debian's extensive software and security repositories.

The download and install was straightforward.  The only two issues were a black screen during the LiveCD boot that lasted for some time before the mouse finally appeared (in other words, be patient) and also after I installed Lubuntu it began the reboot process and ejected my CD but there were no instructions to hit [ENTER] to continue the reboot process.  Neither issue was significant, but a total newbie might have been a little perplexed/anxious.

After Lubuntu was successfully installed, there were still some tweaks I needed to make to be fully satisfied.  Feel free to use or ignore as you see fit:

1.  Remove unneeded programs:
sudo apt-get remove pidgin sylpheed xpad abiword gnumeric ace-of-penguins gpicview chromium-browser gnome-mplayer mtpaint

2.  Install additional desired programs:
sudo apt-get install firefox thunderbird libreoffice libreoffice-gnome dmz-cursor-theme filezilla keepassx inkscape audacity virtualbox g++ git meld eclipse libbatik-java xscreensaver-gl-extra gpick eog gnome-themes-standard lubuntu-restricted-extras vlc p7zip-full
Update: configure for DVD playback

3.  Change the default cursor set:
Start > Preferences > Customize Look and Feel > Mouse Cursor tab > Select DMZ (white) > Click Apply
4.  Change the clock appearance from military to a.m./p.m. format
Right-click time in bottom-right corner > Select Digital Clock Settings > Change clock format from %R to %l:%M %p
5.  Change the screen saver:
Start > Preferences > Screensaver > Indicate only one screensaver to be shown and choose Flurry (or another screensaver of your choice).
In the screen saver settings, Blank After 9 minutes, Cycle After 0 minutes, check the box for Lock Screen After and set to 1 minute.
If the screen saver starts automatically when Lubuntu boots, run sudo leafpad /etc/xdg/lxsession/LXDE/autostart and move the @xscreensaver -no-splash line to be the very last line in the file (update: this fixed the problem for a couple weeks but it's back now...any other ideas from the blogosphere?).
6.  Remove the orphaned Gnumeric menu option
sudo mv /usr/share/applications/gnumeric.desktop /tmp
7.  Change the default view:
Open file manager > Edit > Preferences > General tab > set Default View to Detailed List View
8.  Change the launch bar:
Right-click the File Manager icon in bottom left corner > Select Application Launch Bar settings > add Firefox, Thunderbird, Leafpad, and LXTerminal
9.  Change the desktop wallpaper:
Search for a desired wallpaper (I liked this one) and save it to your hard drive.  Right-click desktop and select Desktop Preferences > Appearance tab > Click button next to current Wallpaper image and browse for your new wallpaper.
10.  Make sure Firefox is set as default browser:
Start > Preferences > Preferred Applications > make sure Web Browser setting says Firefox
11.  Set Thunderbird to reply to messages above quoted text:
Open Thunderbird > Edit > Preferences > Advanced tab > General tab > Config Editor... button > search for default.reply_on_top and set the value to 1
12.  Install printer (note: use BJC7000 driver for Canon i550)

13.  Install PhantomJS

14.  Install MySQL:
sudo apt-get install mysql-server mysql-client
15.  Install Apache web server:
sudo apt-get install apache2-mpm-prefork
16.  Set correct permissions (sudo chown -R user_name:www-data /var/www) and then verify web server is running by opening Firefox and browsing to http://localhost  (resulting page should say "It works!")

17.  Install PHP and a few extra modules:
sudo apt-get install php5 php5-mysql libapache2-mod-php5 php5-curl php5-cli php5-gd php-apc php5-xdebug
18. Configure Xdebug by opening the php.ini file (sudo nano /etc/php5/apache2/php.ini) and adding the following lines to the bottom of the file:
zend_extension_ts="/usr/lib/php5/20090626/xdebug.so"
xdebug.remote_enable=On
xdebug.remote_host="localhost"
xdebug.remote_port=9000
xdebug.remote_handler="dbgp"
19.  Restart Apache (sudo service apache2 restart) and then test the php installation:
sudo sh -c "echo '<?php phpinfo(); ?>' >> /var/www/phpinfo.php"
In Firefox, browse to http://localhost/phpinfo.php and PHP information should appear.
20.  Install phpmyadmin (for MySQL management):
sudo apt-get install phpmyadmin 
21.  Verify phpmyadmin installed correctly by browsing to http://localhost/phpmyadmin/ and logging in with user phpmyadmin and the password you created during setup.

22.  Install mod_pagespeed:
cd /tmp
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb
sudo dpkg -i mod-pagespeed-*.deb
sudo apt-get -f install
sudo service apache2 restart 
23.  Test mod_pagespeed by refreshing http://localhost/phpinfo.php a few times.  The HTTP Response Headers section should have entry for X-Mod-Pagespeed

24.  While actively developing code, you will want to disable mod_pagespeed (to see your new edits):
sudo nano /etc/apache2/mods-available/pagespeed.conf
change ModPagespeed on to ModPagespeed off and restart apache (sudo service apache2 restart)
25.  Open Firefox and install desired extensions:
26.  Configure Eclipse:
a.  Open Eclipse (Start > Programming > Eclipse) and from the Help menu select Install New Software...  If the sites dropdown does not include Indigo (or whatever your current Eclipse version is) add it by clicking the "Available Software Sites" link, and then clicking the Add... button:
Name = Indigo
Location = http://download.eclipse.org/releases/indigo/
b.  Once the Indigo site is added, select it in the sites dropdown and then search for PHP Development Tools.  Check the box next to the match in the General Purpose Tools category and use the Next buttons to install.
c.  Once PDT is installed, click on Windows in the Eclipse menu and select Preferences.   In the General > Web Browser tree menu, select Use external web browser & Firefox.  In the PHP > Debug tree menu, set PHP Debugger to XDebug.  Click OK to save these settings.  Click on Run in the Eclipse menu and select Debug Configurations... Set Server Debugger to XDebug.  Click OK to save this setting.

...Enjoy your new Lubuntu!!

WARNING: Due to a nasty Lubuntu bug involving the Archive Manager, do NOT drag and drop files from an archive (zip, rar, etc.).  Instead, use the "Extract" button in the Archive Manager GUI to extract files.  Otherwise, your system will totally freeze and you will have to hard reboot your computer!

FYI:  Due to a bug in Thunderbird, if you suddenly find it opening to full screen (no close/minimize buttons in top-right or task bar at bottom of screen), close Thunderbird, open /home/{your username}/.thunderbird/{random string}.default/localstore.rdf and change any sizemode="fullscreen" references to sizemode="normal", save and close file.


Official Dojo documentation site

0 comments

Fans of Dojo have long been confused by the myriad and overlapping documentation sites that Dojo maintains.  For example:


Well, there's hope in sight.  It appears the Dojo team has finally settled on: http://livedocs.dojotoolkit.org/

Lots of new releases

0 comments

It's been a busy month for a lot of developers...  Dojo has quietly released Dojo 1.7 RC1, Ubuntu has released version 11.10 (with their first official support of LXDE), Google has revamped their Blogger interface, and Fortress Linux has released version 1.0 of their distro.  Whew!  Good work, everyone!

Getting Avira Antivir 10 to play nice with IronKey

0 comments

Avira Antivir version 10 came with a "feature" that can at times be annoying. Specifically, it detects autorun.inf files and prevents them from running as well as popping up a notice screen:


Now, this is a good thing from a security perspective since many viruses spread via removable USB thumb drives and removable media nowadays. I was a bit disappointed, though, to discover today that my IronKey Basic S200 ships with an autorun.inf file on its virtual CD-ROM Unlocker as well as its Secure Files USB drive root. Antivir defaults to permitting autorun.inf files on CDs and DVDs, but popped up a nag screen every time I unlocked the USB key. Although I can disable the autorun.inf check in Antivir, it seems a bit extreme to ditch this useful feature for ALL drives just because ONE drive is problematic. The solution I came up with gave me the best of both worlds:

1. Install the appropriate file mentioned in the Prerequisites to disable Autorun capabilities section here. Reboot your computer, if prompted.

2. Click on Start > Run and type regedit (then click OK)

3. Browse to HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\policies\Explorer

4. Right-click the area on the right and choose New > DWORD Value

5. Name the registry key NoDriveTypeAutoRun

6. Double-click the key and give it a value of dd (this will disable autoplay/autorun on removable drives, fixed drives, network drives, RAM disks and unknown drives):


7. Click OK to save the value and close the Registry Editor.

8. Right-click the Avira system tray icon and select Configure Antivir

9. Make sure the Expert Mode checkbox is checked in the top-left corner.

10. Expand Guard > Scan > Action on detection and uncheck the Block autostart function checkbox:


11. Click OK to save the change and restart your computer.

12. You're Done! Enjoy using your IronKey USB key with Antivir Avira without nag screens and still having autorun.inf protection.

Security book and tool

0 comments

It's been a long time in coming, but Kevin Mitnick's memoir has finally been released. Also, for any of you still on Windows, here's a free security scanning tool that he recommends.

Online pattern creator

0 comments

Repper is a fun kaleidoscope online tool that can convert any image or portion of an image into a pattern that you can use for a blog, desktop, mug, pillow....whatever.

Free tools for optimizing, load testing, security scanning, and monitoring a website

0 comments

For all you website admins out there, I recommend you optimize your pages with WebPagetest, load test it with Blitz, security scan it with skipfish, and monitor it with mon.itor.us.

Free and easy screencast tool

0 comments

I just came across a nice, free, online screencast tool called Screenr that works on Windows, Mac, and Linux. I tried it on my 64-bit Ubuntu Studio and it worked great. The website lets you record up to 5-minutes for each video.

NetFirms registrar and web host is LAME!

1 comments

NetFirms used to be a decent company with low cost options and a clean user interface. Ever since they sold out to Tucows, though, the service has gotten decidedly snarky. For example, after the transition to the new owner, I received an email notification which buried in a bunch of legalese this fine print:

During the transition, we are overly cautious around domain renewals. We do not want any confusion to lead to your domains not being renewed. Therefore, during the transition we will automatically renew all domains, even if you had set your domain to not auto-renew on the original platform. At any point after your transition, you can come to the DomainCentral section of your new control panel and turn off your auto-renew status. We would rather renew an unimportant domain for you than to let your important domain expire.

That's so very kind (and financially convenient for them) to auto-renew when I specifically chose not to auto-renew. I went into the control panel to disable this "feature" as indicated in the email and I had this very ominous set of options:


Now, I don't know about you, but the words "I approve that everything related to this account will be deleted and removed from Netfirms' system" in the Downgrade to Domain Parking Account option aren't exactly warm fuzzy sounding. After contacting their support, I received this clarifying response:
We apologize for any inconvenience this may have caused you. For a downgrade account yes all files will be deleted since you will not have the disk space for your sites. But you can still host the domains on a domain parking account. Domains will not be deleted on the account.
So, what did we learn from this experience? NetFirms' new management are greedy, snarky losers that would rather use hidden auto-renewal "features" and fear, uncertainty, and doubt verbiage to make sure you fork over more dough than you need to.

Bottom line: Stay away from NetFirms!

Inkscape rant on multi-line text

1 comments

Okay, so I love Inkscape. It's a free vector-based drawing program that is almost standards compliant. Why 'almost'? Well, sadly the SVG 1.1 specification does not cover a crucial aspect of websites, art, marketing, lithography, and desktop publishing: multi-line text.

The specification bluntly states:

"SVG performs no automatic line breaking or word wrapping. To achieve the effect of multiple lines of text, use one of the following methods:

  • The author or authoring package needs to pre-compute the line breaks and use multiple ‘text’ elements (one for each line of text).
  • The author or authoring package needs to pre-compute the line breaks and use a single ‘text’ element with one or more ‘tspan’ child elements with appropriate values for attributes ‘x’, ‘y’, ‘dx’ and ‘dy’ to set new start positions for those characters which start new lines. (This approach allows user text selection across multiple lines of text -- see Text selection and clipboard operations.)
  • Express the text to be rendered in another XML namespace such as XHTML [XHTML] embedded inline within a ‘foreignObject’ element. (Note: the exact semantics of this approach are not completely defined at this time.)"
So, it's not elegant or convenient, but at least you have your options. What did Inkscape, the open source leader in the field, do? Implement a totally non-standard flowRoot approach mentioned briefly in the SVG 1.2 DRAFT, before that approach was removed altogether! In addition, it added a totally non-standard style tag called -inkscape-font-specification.

Instead of fixing the problem, they still default to flowRoot and half-heartedly suggest to anyone that complains that they should use the SVG Tiny 1.2 textArea approach.

Here's a novel idea...how about using a tspan solution as suggested by the SVG 1.1 specification above, support em line spacing, and @font-face!?!

<end of rant />

Various web font techniques

0 comments

Cool fonts are everywhere: magazines, billboards, clothing, product labels, tattoos... you get the picture. Surprisingly, the Internet itself (with all its awesome power and technical advancement) is practically devoid of typography. For example, the only fonts you can be almost absolutely certain to exist on Windows, Mac, and Linux machines are:

  • Helvetica (some operating systems substitute Arial)
  • Courier
  • Times

Since many Linux users also install the ttf-mscorefonts / msttcorefonts package, you have a moderate assurance these fonts are available as well:
  • Arial Black
  • Comic Sans MS
  • Georgia
  • Impact
  • Trebuchet MS
  • Verdana
  • Webdings (no Unicode characters)

So there you have it, of the millions of fonts in existence, Internet users can enjoy a grand total of ten (this is where you start to cry and take anti-depressant medication). Fortunately, creative human beings have ventured to resist this limitation by proposing alternatives. Each option has its own pros and cons as described below:

Embedded OpenType (EOT)
  • Date announced: September 1997 (IE 4.0)
  • Brief description: Proprietary font standard supported exclusively by Internet Explorer
  • Dependencies:
  • Difficulty to set up: Easy
  • TTF font converter: eotfast
Scalable Inman Flash Replacement (sIFR)
  • Date announced: April 2005
  • Brief description: Uses Adobe Flash to render font
  • Dependencies: JavaScript, Flash
  • Difficulty to set up: Hard
  • TTF font converter: sIFR Generator
GFX Text
  • Date announced: August 2007
  • Brief description: Uses VML TextPath element and SVG Text element to display text (supports CSS styling so can be combined with EOT, WOFF, or Google Web Fonts)
  • Dependencies: JavaScript
  • Difficulty to set up: Medium
  • TTF font converter:
Cufón
  • Date announced: June 2008
  • Brief description: Uses VML and Canvas to draw text as vector paths
  • Dependencies: JavaScript
  • Difficulty to set up: Medium
  • TTF font converter: shoqolate.com
Facelift Image Replacement (FLIR)
  • Date announced: August 2008
  • Brief description: Sends text to server-side PHP/GD to render as image
  • Dependencies: JavaScript, PHP, GD
  • Difficulty to set up: Hard
  • TTF font converter:
GFX VectorText
  • Date announced: September 2008
  • Brief description: Uses VML and SVG to draw text as vector paths
  • Dependencies: JavaScript
  • Difficulty to set up: Hard
  • TTF font converter: ttf2svg
Web Open Font Format (WOFF)
  • Date announced: October 2009
  • Brief description: W3C standard (working draft) for web fonts
  • Dependencies:
  • Difficulty to set up: Easy
  • TTF font converter: @font-face Generator
Google Web Fonts
  • Date announced: May 2010
  • Brief description: Dynamically serves EOT fonts for IE and WOFF fonts for other browsers (open font license)
  • Dependencies: optional JavaScript WebFont Loader
  • Difficulty to set up: Easy
  • TTF font converter:





EOTsIFRGFX TextCufónFLIRGFX VectorTextWOFFGoogle Web Fonts
Cross-browser (IE, Firefox, Chrome, Safari, and Opera)NoYesPartial1YesYesYesNoYes
Avoids legal EULA complicationsNoYesNoNoYesNoNoYes
A11y (visual impaired accessible) / SEO friendlyYesYesNoNoYesNoYesYes
Font is compressedYesYesYesYesYesNoYesYes
Avoids FOUT issueYesNoNoYesNoYesPartial2Partial2
Can change text size without page reloadYesNoYesNoNoYesYesYes


Notes:

1. VML does not support EOT fonts. Per Microsoft: "Embedded fonts are not accessible to Microsoft Internet Explorer structured graphics [forerunner of VML] or DirectAnimation controls: We have confirmed that these controls only work with fully installed fonts and not embedded fonts". The only workaround for Internet Explorer users is to install the TTF font locally or use Google Chrome Frame, if the website supports it.

2. Firefox will display a default font while the web font is downloading, then redisplay the text using the web font, causing an annoying flicker effect that has been dubbed "Flash Of Unstyled Text" (FOUT). Google's WebFont Loader events can be used to avoid this for regular text. However, this workaround doesn't solve the issue for SVG Text elements.

3. Internet Explorer has a security setting called "Font Download" that can be disabled to block web fonts. Fortunately, this deeply hidden setting is enabled by default (allowing the use of EOT fonts).

4. Web browsers on Windows XP often have issues with anti-aliasing (i.e. jagged edges appear on text) because ClearType is disabled by default. For Firefox, enabling ClearType will often fix the problem, but in some cases using "Standard" font smoothing has a better result. For Internet Explorer, a clever fix can be found here.

5. Finding the width and height of text is complex and problematic. The easiest way is to use offsetWidth & offsetHeight but these values do not provide a tight bounding box of the text (especially height) so using a vector path-based approach may be preferred if extreme control over size and positioning is required.

6. Assuming the desired font is installed locally (see note #1), VML in IE7 and IE8 still require one more tweak: only one font name can be used (no backup font specified) and that name needs to be surrounded by single or double-quotes in addition to the CSS single or double-quotes used to enclose a string. For example: font-family:"'Verdana'"; (notice the double and single quotes used on both sides of Verdana)

7. SVG fonts are vulnerable to additional security risks, such as embedding an <iframe> in a glyph.


For more information on font comparison, see MIT, MediaWiki font issues, Six Revisions, SocialCompare, Wikipedia, Typekit, or Mozilla.