Matt RaibleMatt Raible is a Web Architecture Consultant specializing in open source frameworks.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

This site now powered by Java 8, Tomcat 7 and Wufoo Forms

I recently upgraded this site to use the latest version of Apache Roller. It was a minor release (5.0.3), but I figured I'd document the steps in case "early onset" comes soon. First of all, to download raibledesigns.com and get it running locally, I perform the following steps:

  1. Backup everything using ~/bin/backup.sh on raibledesigns.com
  2. scp backup file to local hard drive and expand
  3. Copy ROOT, skins and repository directories to local webapps
  4. Make sure activation, mail, mysql and jta JARs are in $CATALINA_HOME/lib
  5. Copy roller-custom.properties from raibledesigns.com's $CATALINA_HOME/lib
  6. Copy context files from hosted $CATALINA_HOME/conf/Catalina to local directory
  7. Import database and change roller-custom.properties to match local credentials

Next, to upgrade to the latest Roller release, I do the following:

  1. Download latest Roller release and expand
  2. Copy JARs (from WEB-INF/lib) to existing install (to upgrade dependencies)
  3. Delete any lower-versioned JARS from WEB-INF/lib directory
  4. Copy JSPs (from WEB-INF/jsps) to existing install
  5. Run database migration scripts from WEB-INF/classes/dbscripts
  6. Use a diff tool (like SmartSynchronize) to compare new vs. existing
  7. Test and troubleshoot (if there's startup errors)

This process has worked well for the last 10 years, and it's been in my head the whole time. It's bound to escape someday.

Contact Form Enhancements
In addition to upgrading Roller, I also upgraded Tomcat 6 to Tomcat 7.0.52. In doing so, I found Jakarta's Mailer Taglib doesn't work with Tomcat 7. As you can tell from the aforementioned thread, I've known this for several years. That's the only thing that's stopped me from upgrading Tomcat the past couple years.

[Read More]

Posted in Roller at Apr 09 2014, 07:37:59 AM MDT Add a Comment

2013 - A Year in Review

2013 was an amazing year: Trish and I got married, celebrated on a 'round-the-world honeymoon and invested in a new 4x4 VW Bus. I finally achieved my goal of vacationing 25% and I got to spend more than two months in the presence of my wonderful parents.

For this Year in Review post, I'll use the same format as I did last year:

Professional

For the last few years, I've generally had one client per year. That changed this year when my contract with Oracle ended in May. Fortunately, I had the opportunity to develop a cool dashboard application before I finished. I wrote about it in a four-part series.

[Read More]

Posted in Roller at Jan 31 2014, 08:53:10 AM MST Add a Comment

Responsive Design with CSS Media Queries

In preparation for my upcoming talk on Bootstrap and CSS3, I figured it was high time I made this blog responsive. Making my new theme mobile-friendly has been on my todo list ever since last year's redesign. I also took the opportunity to 1) remove the geolocation lookup and associated sunset logic for theme selection and 2) change the default theme to the "light" one. If you prefer dark, just click on the black rectangle in the top-right.

I started by refreshing my knowledge of media queries by reading CSS Media Queries & Using Available Space. This led me to John Hick's site, where I grabbed a couple of his rules. Most notably, I started optimizing for iPhone, smartphones and any screens less than 1000px wide. I also decided to widen things a bit for larger screens.

/* Smartphones */
@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 1000px) {

}

/* Large Desktop */
@media screen and (min-width: 1200px) {

}

When I started hacking away, I noticed a lot of the elements had "width" hard-coded in pixels, so I changed a lot of these to use "max-width" instead, as well as "width: 100%". This allowed me to only have a few elements that controlled the width and I was able to take advantage of larger screens with the following simple rules.

@media screen and (min-width: 1200px) {
    #site-container, #body-content, #header-inner {
        max-width: 1170px;
    }

    #body-content #left-column, .next-previous {
        max-width: 808px;
    }
}

For smartphones, I started by hiding the right column and menus with display: none. Then I decided the navigation menu might be useful if I ever wanted to manage the site on my phone. I found Create an Absolute Basic Mobile CSS Responsive Navigation Menu from the treehouse blog and went to work. 20 minutes later, I had the menu I was looking for and everything was looking pretty good in iOS Simulator.

raibledesigns.com on iOS Simulator

At this point, I discovered that rotating to landscape mode caused the content font to become quite a bit larger. So I added a rule for the iPhone in landscape mode.

/* iPhone Landscape */
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
    #body-content #left-column .article .contents {
        font-size: 9px;
    }
}

I'm still not sure why this happens. I also noticed that rotating back to portrait causes some empty whitespace to show up on the right. The empty whitespace was a problem I spent most of my time solving. I ended up using web inspector with iOS Simulator to figure out which elements were bleeding past my desired width and then adjusted their width, or used overflow: hidden to hide them.

I enjoyed this mobile design experience, even with the many "why is there whitespace there!" moments. I especially liked it when I found I didn't need any rules for the iPad. I'm sure there's a few issues that still exist. For example, I haven't tested it on an Android device. Also, the Facebook button's "color-scheme" is still hard-coded in my templates. I hope to fix this by patching Roller to allow reading cookies on the server-side. If you notice anything that looks funny, please let me know.

In the meantime, I hope you enjoy squishing and stretching your modern browser to see how this new responsive design works.

Posted in Roller at Apr 10 2013, 11:38:12 AM MDT 3 Comments

2012 - A Year in Review

I wrote my first year in review blog entry way back in 2005. That means this year's is number 8. Since they keep getting longer every year, I figured I'd try something different this year and use sections similar to Remy Sharp.

Professional

I spent the entirety of the year with one client: Taleo. Oracle bought them in February. In June, the transition to Oracle happened. My tasks and projects haven't changed much since the transition, but it has been a real pain to get paid on time. My contract with them is through the end of May. I hope to take July off (to get married) and August off (to honeymoon) and start a new gig in September.

I did minimal Java work throughout the year and spent most of my time doing CSS and JavaScript. I love doing front-end work much more than back-end, so day-to-day, it was very satisfying.

[Read More]

Posted in Roller at Jan 08 2013, 01:15:24 PM MST Add a Comment

New Look and Feel, Designed by Gillen's Army

As part of my 10-year blogiversary, I was hoping to refresh this site with a new look and feel. A few months ago, I contacted my friend Mark Waggoner to see about getting his design help. We promptly worked out a logo/business card/website deal and Gillen's Army went to work.

I picked a logo from numerous choices in late June, finalized a business card for printing in July and received the HTML and CSS for the site on August 2nd. I started converting it to a Roller theme last week and did a whole bunch of other modifications in the process.

  • Upgraded to Roller 5.0.1.
  • Upgraded wro4j to the latest version (1.4.8.1) to workaround using a → (\2192) in CSS.
  • Changed to use jQuery and Lightbox2 for pictures.
  • Upgraded to the latest version (3.0.83) of SyntaxHighlighter. You might notice there is no longer a toolbar in this version. However, you can still double-click on code and easily copy/paste it.

In addition to these upgrades, I made a few enhancements. I converted to HTML5 (by switching the doctype), added Modernizr and a feature that detects if the sun is up in your location. If you allow your browser to send me your lat and long, I'll give you a dark theme when the sun is down and a light theme when it's daylight. I used Preston's Hunt's JavaScript Class for Sunrise and Sunset Calculations to determine isDaylight. You can also change the theme to light or dark using the small rectangles above the search box on the right. This sets a cookie and overrides the HTML5 Geo check. You can see the implementation of this logic in site.js.

The stylesheet switching doesn't happen as fast as I'd hoped (there's a flash even if using cookies), so I'll likely be converting some theme-setting logic to the server-side. The HTML5 version of the FaceBook Like Button requires you to specify the "data-colorscheme" in markup so this further supports moving to the server.

I have other minor adjustments I'd like to make, but more importantly - I wanted to get it out to you all. Tell me what you like and don't like. Among other things, the form inputs for comments and contact forms have backgrounds that might not be great for those color-impaired. Also, you can see how the iframe on the contact page has a white background instead of one based on the theme.

Here's some stats comparing my old andreas08 theme to the new darklight:

Metric andreas08 darklight
Size and Speed 167 requests, 3.6MB, 9.89s 148 requests, 3.2MB, 7.34s
YSlow 76 87
PageSpeed 91 96

Sweet! It looks like this site is faster than ever. Cheers to Mark and Gillen's Army for the new design. I dig it!

Posted in Roller at Aug 14 2012, 10:58:11 PM MDT 6 Comments

10 Years Ago...

Wouldn't you know it, I missed my 10-year blogiversary. 10 years ago yesterday, I wrote my first blog post. This was shortly after reading Dave Johnson's article about Roller. I originally started this blog to share a bunch of tips and tricks I'd learn while doing web development, particularly with Java and Struts. Since then, I've written 3,086 entries and received 13,462 comments.

I found that writing technical blog posts was a great way to remember things and share knowledge. According to Google Analytics (which doesn't track my RSS/Atom feeds), here's my most-visited blog posts since 2006.

I also started it to document my life, so I could remember the details of significant life events and fun family vacations. I wrote about Abbie's and Jack's arrival. I penned a story about growing up at the cabin, twice. In April 2004, I wrote about buying a 1966 21-window VW Bus. Yes, I'm still restoring it. No, I don't know when it'll be done. This year I hope.

I blogged about Abbie and Jack's first day of school, I wrote about almost all of Abbie's birthdays; Jack's 5th, 4th, 3rd and 1st. Some of my favorite comments are on Jack's got a bead stuck in his nose! I blogged about getting a divorce 5 years ago. I wrote about visiting the real Oktoberfest the next year.

I wrote about my Dad's retirement, my sister's wedding and my Mom's retirement.

I met Trish in June of 2010 and mentioned her name for the first time in September 2010. I introduced her to the kids in November and we started traveling the world together. We journeyed to Antwerp/Amsterdam, Fort Lauderdale/Key West, Crested Butte, Alta, Las Vegas, a hut trip in the Rockies and Kraków. And that was just in the first 6 months! We got engaged last November.

I summarized the years several times, in 2005, 2006, 2008, 2009, 2010 and 2011.

Last, but certainly not least, I'd like to thank the ones that made the last 10 years possible:

  • Keith at KGB Internet. Hosted here since day 1, for $20 month*.
  • Dave Johnson, for creating Roller and continuing to maintain it all these years.
  • Java and Tomcat, for your rock-solid stability through the years.
  • The Open Source Movement, for providing so much to write about.
  • My Family, for giving me with so many adventures and memories.

* Thank goodness he doesn't charge me for bandwidth. It's a little heavy on the bits.

Update: As part of this 10-year celebration, I've updated the look-and-feel with help from Gillen's Army.

Posted in Roller at Aug 02 2012, 12:47:19 PM MDT 2 Comments

2011 - A Year in Review

2010 was an awesome year, but 2011 rocked the house! At the end of last year, I kept my goals simple:

In 2011, I plan on doing two main things: keep rockin' it with Trish and finishing The Bus. Everything else is gravy.

As predicted, it was a spectacular year, but I only accomplished 50% of my goals. That is, Trish and I had a great time skiing (especially in Utah), moving in together, traveling the world and getting engaged in Versailles. I even satisfied some 5-year goals: building a sauna in my basement and getting a ski shack in the mountains.

However, I didn't get much done with The Bus. Or rather, the guys at MotorWorks Restorations didn't drain me for all I'm worth in 2011. We did make good progress with estimating the final cost and obtaining many hard-to-find parts though. I now have a Porsche 911 Engine (1983 3.0L 6 cylinder), a Porsche 901 5 speed transmission, Porsche "Turbo Twist" wheels and a Custom Air Ride Front Beam from Franklin's VW Works. The thing that slowed our progress the most was the custom beam, as it took almost 6 months from order to delivery. When it arrived in September, I decided to put things on hold. I didn't want to get my bus back in the midst of winter and not be able to drive it.

[Read More]

Posted in Roller at Jan 11 2012, 09:45:20 AM MST 2 Comments

Upgraded to Roller 5.0 and added a Like Button

Apache Roller 4 was released in December 2007. After 3.5 years, Roller 5 has landed!

The major new feature in Roller 5.0 is Media Blogging, a set of enhancements to Roller's file upload and management capabilities. Also included in 5.0 are simple multi-site support, OpenID and OAuth support for Roller's AtomPub interface. All major dependencies have been updated and Roller now uses Maven for build and dependency management. You can find a summary of Roller 5.0's new features on the Roller wiki.

I upgraded to Roller 5.0, RC4 back in March and experienced a few issues. This morning, I upgraded to the final release and everything appears to working nice and smooth. To celebrate, I added a Facebook Like Button to each entry. Adding it was pretty straightforward. Below is the code I added to my _day.vm template:

<span id="fb-root"></span>
<script src="//connect.facebook.net/en_US/all.js#appId=226411374036019&xfbml=1"></script>
<fb:like href="$url.entry($entry.anchor)" send="false" show_faces="false" font="verdana"></fb:like>

I tried removing the <script> tag and putting it in my wro4j configuration file, but this caused the Like button to disappear. I also experimented with adding Twitter and LinkedIn buttons, but decided not to add them since it was difficult to get them all to align and look good together. However, if you'd like to add either of them to your Roller blog, you can do so with the following code:

<a href="http://twitter.com/share" class="twitter-share-button" 
    data-url="$url.entry($entry.anchor)" data-count="horizontal" data-via="mraible">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

<script type="text/javascript" src="//platform.linkedin.com/in.js"></script>
<script type="in/share" data-url="$url.entry($entry.anchor)" data-counter="right"></script>

Kudos to Dave for all his hard work on Roller throughout the years.

Posted in Roller at Jun 02 2011, 02:21:58 PM MDT Add a Comment

Be careful when switching MySQL to UTF-8

Earlier this week, I noticed a couple strange issues on this blog and sent an email to the roller-user mailing list. I figured both issues were caused by my upgrade to Roller 5. Basically, my tag cloud wasn't working and I noticed a bunch of blog entries that had truncated data. I'd provide links to the truncated posts, but I believe I've fixed them, so links would be useless. This post is to make others aware of something I wasn't: be careful when switching MySQL to UTF-8.

The first issue, 404s from my tag cloud links, was something my theme was missing. It seems the tagIndex action is new in Roller 5 and required for tag clouds to work. To fix this issue, I had to add the following XML to my theme's theme.xml file.

<template action="tagsIndex">
    <name>TagsIndex</name>
    <description>Tag index page</description>
        <link></link>
    <navbar>false</navbar>
    <hidden>true</hidden>
    <templateLanguage>velocity</templateLanguage>
    <contentType>text/html</contentType>
    <contentsFile>Weblog.vm</contentsFile>
</template>

Since I wanted to replicate Roller 4's behavior, pointing the contentsFile to Weblog.vm worked just fine. The nice thing is I can always change it to another page and customize it to show more information about the selected tag.

The 2nd issue, data truncation, was a bit trickier. I thought it might've been something Roller did when upgrading my database from Roller 4 to 5. I didn't suspect upgrading from MySQL 3 to 5 would cause it. From my previous upgrade post:

At this point, I figured my database might be slightly hosed, but since it was simply creating tables, I was probably OK. I restarted Tomcat and left the old version in place while I waited for a MySQL 5 database instance from my hosting provider, KGB Internet. Once I got the new instance, I imported my backed-up database, ran the upgrade script and everything worked just peachy.

Keith at KGB looked into my issue and thought the problem was the charset. My old MySQL 3.x database used latin1 while my MySQL 5.x database uses UTF-8. The symptom looked familiar:

Be careful when switching to UTF-8. Once you have converted your data, any program/webapp that uses the database will have to check that the data they are sending to the database is valid UTF-8. If it isn't then MySQL will silently truncate the data after the invalid part, which can cause all sorts of problems.

Luckily, I had a backup of my pre-upgrade database and was able to convert and recover everything successfully with a little iconv, perl and numerous mysqldump and mysql import commands. Of course, it's possible there's still some jacked entries and comments. If you noticed any truncation, please let me know and I'll get them fixed.

Posted in Roller at Apr 28 2011, 08:11:40 PM MDT 2 Comments

Upgraded to Apache Roller 5.0, RC4

Last Sunday, Dave Johnson released Apache Roller 5.0, RC4. Since I'm an Apache Roller committer, and I've been seeing issues with comments throwing exceptions on this site, I decided to upgrade. In doing so, I discovered a number of issues. Hopefully by documenting them here, you'll be able to upgrade from Roller 4 to Roller 5 without any issues.

To upgrade, I took a snapshot of my existing site and database and copied them locally. After getting everything setup locally (importing existing database and upgrading it), I started Tomcat and began solving problems.

Database settings - JNDI vs. Properties
With Roller 4, I configured by database settings in a ROOT.xml so they'd be read using JNDI. With Roller 5, I got the following error when I tried to do this.

<openjpa-2.0.1-r422266:989424 fatal user error> org.apache.openjpa.persistence.ArgumentException:
A JDBC Driver or DataSource class name must be specified in the ConnectionDriverName property.
       at org.apache.openjpa.jdbc.schema.DataSourceFactory.newDataSource(DataSourceFactory.java:76)

I was able to get around this issue by adding the following to my roller-custom.properties:

database.configurationType=jdbc
database.jdbc.driverClass=com.mysql.jdbc.Driver
database.jdbc.connectionURL=jdbc:mysql://localhost/rollerdb
database.jdbc.username=root
database.jdbc.password=
mail.configurationType=properties
mail.hostname=localhost

After making this change, I received an error when Planet tried to startup:

ERROR 2011-03-02 09:56:08,502 DatabaseProvider:errorMessage - ERROR: unable to obtain database connection. 
Likely problem: bad connection parameters or database unavailable.
FATAL 2011-03-02 09:56:08,502 RollerContext:contextInitialized - Roller Planet startup failed during app preparation
org.apache.roller.planet.business.startup.StartupException: ERROR: unable to obtain database connection. 
Likely problem: bad connection parameters or database unavailable.

I don't remember why I enabled planet, but turning it off in roller-custom.properties seemed to solve the problem.

planet.aggregator.enabled=false

Password Encyrption
The next thing I tried to do was login. When this didn't work, I figured it must be related to password encryption. With Roller 4, I had to have "passwds.encryption.enabled=true" in roller-custom.properties. In Roller 5, I also had to add the encryption algorithm.

passwds.encryption.algorithm=SHA

GZip Compression
In November 2009, I optimized this site and used Roller's CompressionFilter and wro4j to gzip and concatenate JavaScript and CSS. With Roller 4, I used the CompressionFilter to compress *.css and *.js instead of using Wro4J's built-in gzip compression. The Roller 5 CompressionFilter seems to have issues with wro4j, so I had to disable it for *.css and *.js and use wro4j instead.

At this point, I figured I was good to go, so I zipped up my local WAR and scp'ed it to raibledesigns.com. I stopped Tomcat and attempted to upgrade my production MySQL database (version 3.23.56). Below is the error I received.

$ mysql -u raible -p raible < 400-to-500-migration.sql
Enter password:
ERROR 1064 (00000) at line 42: You have an error in your SQL syntax near 'as w set
   lastmodified = lastmodified,
   datecreated = datecreated,
   cr' at line 1

At this point, I figured my database might be slightly hosed, but since it was simply creating tables, I was probably OK. I restarted Tomcat and left the old version in place while I waited for a MySQL 5 database instance from my hosting provider, KGB Internet. Once I got the new instance, I imported my backed-up database, ran the upgrade script and everything worked just peachy.

I generally upgrade Roller by coping the new codebase over my old one. This is because I have a lot of symlinks and other files in my "ROOT" directory and like to keep those. In doing this, I found I had to do a couple things after copying everything over:

  1. Delete WEB-INF/lib and recopy from RC4's WEB-INF/lib.
  2. Delete WEB-INF/classes and recopy from RC4's WEB-INF/classes.

I then experienced some issues with JARs not being present for Roller's JSPWikiPlugin. I enabled this long ago, but don't use it anymore. However, to keep old posts still working, I wanted to enable it. The downloads for the plugin seem to be gone, but luckily I found a copy and put all the JARs into my WEB-INF/lib directory.

After starting Tomcat and browsing around a bit, I discovered two more issues:

  1. Search doesn't seem to work. For example, there are no results for jQuery.
  2. My Archives page's calendar didn't work. It showed the following:
    $calendarModel.showWeblogEntryCalendarBig($weblog, $cat)

I was able to fix issue #2 by changing #showBigWeblogCalendar() to the following.

#showWeblogEntryCalendarBig($model.weblog "nil")

The first issue with search seems to remain.

If you notice any other issues on this site, please let me know. I'll try to get them fixed asap.

Update: I entered an issue for my search problem in Roller's JIRA. I also managed to figure out that the problem is due to the old version of oscache that's needed by the JSPWiki plugin. Hopefully we can get the plugin upgraded to avoid this issue for other users.

Posted in Roller at Mar 03 2011, 11:39:37 AM MST 7 Comments