Raible Designs

JavaOne 2013: My Presentations

I flew into San Francisco this past Monday to speak at JavaOne 2013, and to meet with my new client. I made sure to wear a Broncos shirt since I was riding the train through Oakland and had some co-workers that were Raiders fans. My trip started off nicely as the Broncos dismantled the Raiders on Monday Night Football. My new team and I watched it during a team dinner at Havana in Walnut Creek. Historically, the Broncos and Raiders have had a heated rivalry historically, so the win was the perfect start to the week.

On Tuesday, I worked from my hotel in the morning, then met James Ward to do some last minute prep for our smackdown. The prior week, we both upgraded our respective apps to use the latest versions of Grails and Play Framework. I ran into a few issues when upgrading, while Play required some API changes.

We both added Memcachier to our apps (to share caching between dynos) and ran some Apache Bench tests. The results showed quite a bit of slowdown compared to last time, which we attributed to caching needing to make network hops. Other than that, we both had to make changes to our framework's buildpacks to get the latest versions running on Heroku, and when we headed for our talk, my instance of Grails wasn't running (60 second boot timeout on startup). The good news is it somehow solved its issues during our talk and was up and running when I checked it after, as it is now. Below is an embedded version of the presentation we delivered. You can also click here to see it in a new window, or view it on SlideShare.

On Wednesday morning, I tried to attend Venkat's Programming with Lambda Expressions in Java, but quickly discovered it was sold out. My talk on The Modern Java Web Developer started shortly after and I had a fantastic time talking to a packed room and preaching the virtues of learning and staying up-to-date with web technologies. I made sure to include a slide on Avatar, an Oracle-sponsored JavaScript-based framework that requires "very minor JavaScript knowledge". You can view my presentation below or on SlideShare.

According to @JavaOneConf, all JavaOne 2013 presentations will be published on Parleys.com.

After completing my talks, I journeyed to my client and practiced what I preached, successfully finishing a spike that reduced page load time from 8 seconds to 2 seconds. That evening, I attended the Oracle Appreciation Event at Treasure Island, had some cold beer and listened to some loud music.

I had a great time speaking at JavaOne this year, and look forward to my next speaking engagement. In November, I'll be traveling to Devoxx where I'll be giving a 3-hour University session on The Modern Java Web Developer. Hope to see you there!

JavaOne 2013: My First Time Speaking

I've been to JavaOne many times in my life, starting in 2004 and continuing in 2005, 2006 and 2008. I have fond memories of the first couple years, meeting all the Java open source guys and having a lot of fun.

You might notice that the aforementioned blog posts no longer show pictures. That's because they were originally hosted on Apple's HomePage, which they shut down years ago. I haven't bothered to republish the photos and fix the links, but I do still have them. For those looking for a blast from the past, checkout Mike, Howard and James or Bruce and Marc. I also have a set of photos from our Geronimo Live party in 2006.

As many of you know, JavaOne used to be a huge conference, attracting 15,000 attendees back in the day. Numbers have dwindled a lot since Oracle bought Sun and I've heard recent years are more around 1500. Since I've spoken at a lot of conferences, but never JavaOne, I figured I'd try this year. The good news is I got accepted and I'll be there next week!

On Tuesday afternoon, I'll be presenting the Play Framework vs Grails Smackdown with James Ward. On Wednesday morning, I'll be talking about The Modern Java Web Developer. I also look forward to The Black Keys on Wednesday night.

I have a feeling it's gonna be a great week!

Developing with AngularJS - Part IV: Making it Pop

Welcome to the final article in a series on my experience developing with AngularJS. I learned its concepts, beat my head against-the-wall with and finally tamed it enough to create a "My Dashboard" feature for a client. For previous articles, please see the following:

• Part I: The Basics
• Part II: Dialogs and Data
• Part III: Services

The last mile of development for the My Dashboard feature was to spice things up a bit and make it look better. We hired a design company to come up a new look and feel and they went to work. Within a week, we had a meeting with them and they presented a few different options. We picked the one we liked the best and went to work. Below are screenshots that I used to implement the new design.

Developing with AngularJS - Part III: Services

This is the 3rd article in a series on my experience developing with AngularJS. I used AngularJS for several months to create a "My Dashboard" feature for a client and learned a whole bunch of Angular goodness along the way. For previous articles, please see Part I: The Basics and Part II: Dialogs and Data.

Angular offers several ways to interact with data from the server. The easiest way is to use the $resource factory, which lets you interact with RESTful server-side data sources. When we started the My Dashboard project, we were hoping to interact with a REST API, but soon found out that it didn't have all the data we needed. Rather than loading the page and then making another request to get its data, we decided to embed the JSON in the page. For communication back to the server, we used our tried-and-true Ajax solution: DWR.

In Angular-speak, services are singletons that carry out specific tasks common to web apps. In other words, they're any $name object that can be injected into a controller or directive. However, as a Java Developer, I tend to think of services as objects that communicate with the server. Angular's documentation on Creating Services shows you various options for registering services. I used the angular.Module api method.

Video of Comparing JVM Web Frameworks from Devoxx France

Whenever I do a talk, I get requests for a recording of it. It's rare that recordings are made, but when they are, I like to share them. In March of this year, I traveled to Devoxx France and had a great time. One of the talks I delivered was Comparing JVM Web Frameworks, with a bit of a twist from prior versions.

I started reading The Paradox of Choice and found many parallels to the agony that developers experience with choosing a web framework. I described how I didn't think good framework decisions were based on the many, many features that frameworks have, but often on pre-defined constraints. There's those lucky developers that get to choose a Full Stack Framework because they're doing greenfield development. Then there's those that want a better Pure Web Framework that replaces something (e.g. Struts) that's not satisfying their needs. And lastly, there's those that've found it possible to leverage a SOFEA and use a JavaScript MVC framework with an API Framework on the backend. I don't think it makes sense to compare all web frameworks and I tried to use these pre-defined constraints (language, platform and application type) argument to separate into categories and help make choosing easier.

The good folks at Parleys have published the video of this talk. If you haven't heard of Parleys, it's an awesome platform for watching conference talks. As their Mission Statement says: If YouTube and Slideshare would make a baby then it would be named Parleys.

Below is an embedded video of this presentation - I hope you enjoy watching it as much as I did delivering it!

Developing with AngularJS - Part II: Dialogs and Data

A couple of days ago, I wrote an article on how I started developing with AngularJS. I used AngularJS for several months to develop a "My Dashboard" feature for a client's product and learned a whole bunch of stuff along the way.

This article provides an overview of how I changed some of My Dashboard's features to use Angular instead of jQuery. After finishing the prototype work in January, we started moving bits and pieces into the main application. We kept the same file names for our Angular-related files and copied them into the project.

All these files are packaged up into a dashboard.js file that's included at the bottom of our Dashboard page. While our prototype used jQuery 1.9 and jQuery UI 1.10, the application's codebase used jQuery 1.7.1 and jQuery UI 1.8.3. Luckily, this didn't present a problem as everything continued to work as expected.

Around this time, we also had many discussions with the Product Team about charts. Since Highcharts required we purchase a license, we took at look at AnyChart, which we were already using. We were able to get AnyChart to work with our existing chart directive with minimal changes. Most changes were in the JSON itself.

We committed the first pass (with sample data still hard-coded) in mid-February.

Developing with AngularJS - Part I: The Basics

There's many, many different introductions to AngularJS available on the internet. This article is not another introduction, but rather a story about my learning experience. It all started way back in January of this year. I was working as a UI Architecture Consultant at Taleo/Oracle, my client for the last 21 months. My gig there ended last month, but they agreed to let me publish a series of articles about the knowledge I gained.

Project Background

The Director of Product Management had been working on the concepts for a new project - codenamed "Visual MyView". Below is a mockup he created for our kickoff meeting on January 4th.

From his original email about the above mockup:

I started the initial layout with static HTML and CSS and had a wireframe to show by mid January.

By the end of January, we'd renamed the project to My Dashboard and had a working prototype using CoolClock and moment.js for the clock in the top right, AngularJS to display widget data, jQuery UI for drag-n-drop of rows and widgets, Bootstrap's Carousel for holding charts and Highcharts for rendering charts.

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.

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.