Raible Designs

My Bootstrap Presentation from HTML5 Denver

Last year, I worked on a huge redesign of Taleo's UI with HTML5, Twitter Bootstrap and CSS3. Management thought it would take 6-9 months and my colleague (Vladimir Bazarsky) and I finished it in just over 3 months. Yes, we encountered many, many cross-browser compatibility issues in the process. While in QA, we found and fixed over 750 issues. This was no small feat since the app was over 2 million lines of code and contained 1700 JSPs.

After writing about working with Bootstrap, I was contacted by my good friends, David Geary and Scott Davis to speak at the HTML5 Denver Users Group. Scott was very persuasive with his words (a.k.a. lots of trash-talking) and I chuckled as I read one of the best emails I've ever received. I replied that his strategy worked, I'd come up with a excellent topic and agreed to speak in April.

That speaking engagement was last night and you can view my presentation as an HTML5 app or on SlideShare.

Much of the Bootstrap content comes from Dan Vega. He built a Bootstrap presentation last August using the HTML5 slide template for Google I/O 2012 and put it on GitHub. In an email to the Bootstrap mailing list, he wrote "feel free to use the slide deck if you plan on telling others about this awesome product" and that's exactly what I did.

I updated all the statistics, added my redesign story, included a few slides on Scalable and Modular Architecture for CSS and beautified it with Trish's Photos. I've published the result on GitHub and encourage you to fork it.

Speaking at HTML5 Denver was a real treat. The venue, Casselman's, was awesome. It has a huge room with a proper stage, sound system and lighting. If you've done something cool with HTML5 lately, I encourage you to signup for a 10-minute lightning talk next month.

Not only was the venue great, but the cold Guinness while speaking was delicious. It was also a nice networking opportunity. I met several folks afterwards and talked about what's next for me. My contract with Taleo/Oracle ends May 31st, hence the reason "Free Agent" is listed on my LinkedIn profile. I've got a few good opportunities so far, but nothing that I've agreed to yet. I expect negotiations to heat up in the coming weeks, so please let me know if you'd like a seat at the bargaining table.

The Trifecta 2013!

The last time I pulled off a Trifecta (3 ski resorts in 3 days), it was in 2010. I hadn't met Trish yet and DU Hockey had started their we're terrible in the playoffs streak. Last weekend, I decided to go for it again, this time with fiancé and kids in tow. We originally intended to ski Friday afternoon, but Abbie had an important "Mayor Election" at school and we were unable to leave early. By the time we arrived in Winter Park, the lifts were closed.

When we drove to Steamboat on Saturday, we only intended to ski 2 days. We dressed up in our outfits and got ready for the warm, mashed-potato conditions on Steamboat's closing weekend.

The conditions weren't great, so we only skied for a couple hours. Then we hung out with Trish's friends (Jenn and Todd) for the rest of the afternoon, swimming and frolicking with our kids like good parents do. On Sunday, we woke up and checked the ski report. While Steamboat did get 8" of fresh powder, Copper had 13 inches! So we packed up the car, puppies, and kids and drove 2 hours to Copper. When we arrived, we weren't disappointed. The kids were loving it and the conditions were great.

When we stopped for lunch, I was a bit disappointed that our ski weekend was about to end. Then I checked the Winter Park forecast, was pleasantly surprised, and asked "Hey, kids - should we complete the Trifecta and skip school tomorrow?" Of course, they said "YES" and our plans were set. We did a couple more runs, listened to some good live music at the base, then headed to our mountain views in Winter Park.

Sunday night is when the fun started. I didn't call the kids in sick for school, nor did I call in sick for my current client. I simply told them both we had a unique opportunity to complete a Trifecta and the snow was too good to leave.

Monday morning we woke up to 7" of fresh powder and by the time we got to Mary Jane, it was knee-deep. The runs were unbelievable. I skied several bump runs on Mary Jane without ever hitting bottom. It snowed hard all day long and by 2pm, they'd closed Berthoud Pass. This meant we had to stay another night. Some friends were stranded, so we offered them to stay with us and we enjoyed a nice evening reminiscing about all the fluffy snow and face shots. The first photo below is the snow accumulation on Monday morning; the second is from Monday at Happy Hour.

Skiing a Trifecta with my family seems like a perfect way to end the ski season. However, it's been snowing all week and I've had several powder runs since Monday. It's snowed 37 inches in the past 7 days and there's more snow in the forecast this weekend. Winter Park's Springtopia starts tomorrow. Live music, fresh powder, the Nuggets in the playoffs and a place at the base with good friends.

The fun ain't over yet!

Paris and Iceland, A Photographer's Paradise

In February 2012, Trish and I traveled to Stockholm on Icelandair. We were immediately impressed with the airline's excellent service. Trish was also a bit miffed that we had a layover in Iceland without an opportunity to get out and see the sites. You see, Iceland is a Photographer's Paradise, and she's the best photographer I know.

This year, when planning our trip to Devoxx France, I set out to correct this missed opportunity. Since Icelandair now flies direct from Denver, and offers free stopovers, our planning was easy.

The conference was in Paris; one of the most magnificent cities to photograph. Trish has some great photos from 2011. She'll be showing many of these photos at an upcoming exhibit at Paris on the Platte in Denver. However, she wanted more.

We arrived in Paris for Devoxx France on Tuesday, March 26th. The first day's excursion started with visiting the Latin Quarter, the Panthéon and Notre Dame.

We had a nice dinner that evening while watching the Fútbol match between France and Spain. On Wednesday, we hung around the hotel in the morning, then took the metro to La Basilique du Sacré Coeur de Montmartre and Moulin Rouge.

From there, we journeyed to the Eiffel Tower for a hike. We climbed the stairs to the second floor and enjoyed the spectacular view.

Wednesday evening, we attended the Devoxx Speakers Dinner. We had a great time chatting and drinking wine with Martin Odersky, Guillaume Bort, the many Nicolas', James Ward and Josh Long.

On Thursday, I delivered my talk on Comparing JVM Web Frameworks in the early afternoon and did Play vs. Grails Smackdown with James Ward in the evening. I published an article about these talks the next day.

While I was talking about frameworks, Trish was galavanting around Paris taking some amazing photos.

Thursday night, we had a wonderfully authentic French dinner with many of the folks from the conference. Around midnight, Trish captured the beauty of Les Invalides.

On Friday, we slept in a bit and then headed to the airport for our flight to Iceland. A few hours later, we were snuggled into the cozy bar at Hotel Reykjavik Centrum. A few hours after that and we were bouncing up and down on a Super Jeep tour to see the Northern Lights. Our driver kept telling us "if you believe, it will happen". And boy oh boy, did it ever. The green and purple lights dancing in the sky overhead were mind-blowing!

Saturday came quickly after a late night, and we opted for a scenic tour of the area by helicopter.

Saturday evening, we journeyed through the ages with a tour and tasting at the Icelandic brewery Ölgerðin. The Grillmarkadurinn restaurant afterward was delicious.

Easter Sunday was our last day in Iceland and we enjoyed most of it at the Blue Lagoon. Despite the plethora of tourists, the hot springs, saunas and cold beer were a lovely way to prepare for the long road home.

Visiting Iceland and photographing the Aurora Borealis was an awesome experience. Speaking at Devoxx France, photographing Paris and having lots of good times with new (and old) friends was equally delightful. For more pictures of our travels, see my Paris and Iceland Album or Trish's Devoxx France, Iceland or Northern Lights albums.

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.

Happy 10 Year AppFuse!

10 years ago yesterday, I released the first version of AppFuse. It started with XDoclet generating ActionForms from POJOs and became very popular for Struts developers that wanted to use Hibernate. The project's popularity peaked in 2006, as you can see from the mailing list traffic below.

It's possible the decrease in traffic is because we re-wrote everything to be based on Maven. It's also possible it was because of more attractive full-stack frameworks like Grails and Rails. However, the real reason is likely that I stopped working on it all the time due to getting a divorce becoming an awesome dad.

Below is a timeline of how the project evolved over its first 4 years.

AppFuse has been a great project for me to work on and it's been a large source of my knowledge about Java, Web Frameworks, Spring, Hibernate - as well as build systems like Ant and Maven. We started with CVS, moved to SVN and now we're on GitHub. We've experienced migrating from Tapestry 4 to Tapestry 5 (thanks Serge Eby!), upgrading to JSF 2 and enjoyed the backwards compatibility of Spring and Struts 2 throughout the years. We've also added REST support, a Web Services archetype and kept up with the latest Spring and Hibernate releases.

Last year, we added Bootstrap and jQuery as foundational front-end frameworks. For our next release, we're switching to PrimeFaces, adding Wicket and changing from jMock to Mockito. Most of these changes are already in source control, we just need to polish them up a bit and add AMP support. I hope to release 3.0 before the bus is done.

Thanks to all the enthusiastic users of and contributors to AppFuse over the years. It's been a great ride!