Raible Designs

20 Years of blogging!

This blog was started on August 1, 2002 — 20 years ago yesterday! It's amazing to look back at my first month of blogging and see how many times I'd post per day. Most posts are only a sentence or two with no comments because Roller didn't have that feature yet.

Other fun facts:

• This blog has used Apache Roller and Tomcat from day one.
• I've had the same hosting provider, KGB Internet Solutions, the whole time.
• I've authored 3,284 blog posts over the years and received 13,970 comments.
• Stats show I still get around 5K visits per day, serve up 30-40 GB per month, and receive over a million hits per month.

Thanks to all of you that have read this blog over the years. I appreciate you!

2017 - A Year in Review

2017 was a year with many changes. We changed presidents, Stormpath joined forces with Okta, our daughter started high school, and we lost two of our precious pets. On the upside, I traveled to many beautiful places, talked to developers around the world, and became a Devoxx Champion. Not only that, but our two classic VWs ran like champs the whole year. We put upwards of 10K adventure miles on our Syncro, and another couple thousand on Hefe the Bus.

I'm going to look back on 2017 using the following categories.

• Professional
  • Speaking
  • Devoxx4Kids
  • Projects
• Personal
  • Stout and Hefe
• 2018

Professional

2017 was the first year I started with a full-time job in January since the turn of the century. I'd been an independent consultant for most of my career. Stormpath enticed me enough with their people and vision that I became a full-time employee with them in September 2016.

January started slow, but I started to hit my stride in February when I traveled to Sweden for Jfokus and skiing. Coincidentally, it was shortly after the conference that I found myself negotiating with Eric Berg about joining forces with Okta. I remember it well: I was sitting in the hotel lobby, with James Ward and Ray Tsang, when it all happened. Shortly after, we were sitting in the back of the bus on our way to a skiing adventure.

2016 - A Year in Review

When I wrote my 2015 year in review blog post, I was certain my '66 VW Bus would finally be finished. AND IT IS! Do I need to even write this year's post? Yes, because I want to tell you how awesome it is to own this incredible-looking, awesomely-fast, mean machine.

But first, let's review the year using the following categories.

• Professional
  • Speaking
  • Devoxx4Kids
  • Projects
• Personal
  • The Ski Bus (aka Stout)
  • The Porsche Bus (aka Hefe)
• 2017

Professional

I had two different clients in 2016: CA Technologies and Stormpath. I worked full-time for CA in January and February, helping them adopt AngularJS. To help them learn about Angular 2, I rewrote my AngularJS getting started and testing tutorials for Angular 2. The first versions were published at Getting Started with Angular 2 and Testing Angular 2 Applications. I refactored both tutorials to use Angular CLI in August and published Getting Started + Testing with Angular CLI and Angular 2 (RC5). Since then, I've been maintaining an up-to-date version on GitHub.

In April, I started working half-time for CA and half-time for Stormpath. For Stormpath, I worked on their Java SDK and helped them launch their Java SDK 1.0. I really enjoyed working with the team at Stormpath. This led to me think about my priorities in life. I realized that I wanted to work remotely, get paid to speak at conferences, and get paid to work on open source. Stormpath provided me with all of these opportunities and I started working full-time for them on September 26, 2016.

In May, I joined the board of the Denver Java User Group. I've been helping organize meetups, find speakers, and secure location sponsors. If you're interested in speaking at DJUG in 2017, please let me know!

2015 - A Year in Review

2015 was the year The Bus was supposed to be finished. If you read my year in review from last year, you'll see I was certain of it. To be fair, I did have estimates from people that had me expecting it to be done in July. The good news is the interior was finished in July. Since then, it's been back at Reincarnation getting the finishing touches applied. I believe if it was worked on for a week straight, it could be finished. It's that close. So close I can taste it. THIS will be the year!

For this Year in Review post, I'll same the format I've used the last few years.

• Professional
  • Speaking
  • Devoxx4Kids
  • Projects
• Personal
  • The Ski Bus
• 2016

Professional

I had four different clients in 2015. The first was in the healthcare industry, the second in the API hosting space, one in the fashion industry and one in computer software. For the first client, I wrote about integrating Node.js, Ruby and Spring with Okta's SAML support. I also helped them adopt and learn AngularJS. Learning about Foundation and Angular was a nice treat too.

In March, I revisited how to setup your own software company. In that post, I wrote about how I felt when valuing time over money.

Earlier this year, I had the opportunity to work 20 hours per week instead of 40. It was one of the greatest work-life experiences I've had to date. I was still able to pay all my bills, and I had time during each-and-every-day to do something fun. When working 40 hours per week, exercising and cooking dinner were somewhat of a chore. When I flipped to working less, work became the chore and exercise and cooking became the fun parts of my day. I read somewhere recently that if Americans valued health over wealth, we'd be a lot better off. I felt like I did this when working less and that I was rich in time.

2014 - A Year in Review

2014 was destined to be a spectacular year. When I wrote my thoughts down last January, I thought the Broncos would win the Super Bowl and my VW Bus restoration project would be finished by summer. To focus on finishing the bus project, I didn't submit any talks to conferences. Instead of traveling to exotic locations, we opted to visit a bunch in our own backyard instead.

For this Year in Review post, I'll use the format I've used the last couple of years.

• Professional
  • Speaking
  • Devoxx4Kids
  • Projects
• Personal
• 2015

Professional

I had three different clients throughout the year, all in the health care industry. I continued working on a project with John Muir Health where we developed a hybrid mobile app. I wrote about what I learned in Documenting your Spring API with Swagger and Developing an iOS Native App with Ionic. Since I wrote the article about Swagger's Spring MVC support, it has become much easier to integrate; now it only requires an @EnableSwagger annotation.

In April, I started consulting with a small company in Alabama. I helped them modernize their tech stack and implemented a number of web services with Apache Camel. I wrote about this in a four-part series in September and October.

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.

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
  • Speaking
  • Projects
• Personal
• 2014

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.

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.

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.

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
  • Business
  • Speaking
  • Projects
• Personal
• 2013

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.

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:

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