Raible Designs

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.

Father's Day Weekend on The Colorado River

I've been writing about Father's Day since this blog was first born. It all started with my first Father's Day in 2003, continued in 2004 (the year I bought The Bus), 2005 and 2006. In 2008, I started the Father's Day Camping Trip tradition and it's been a blast ever since. We spent a couple years at the Great Sand Dunes and a year at Lake Granby. Last year, we changed things up a bit and headed to The Oregon Coast. This year, we brought back the camping tradition, packed up the raft we bought last year and headed for the Upper Colorado River.

On Saturday, we put in at Rancho del Rio and took out at Two Bridges. This stretch took about 4 hours, which was perfect considering we didn't put in until 2pm. Saturday night, we camped at Catamount, then started early Sunday floating from Catamount to Pinball (9 miles). We got on the river around 10 and disembarked 5½ hours later.

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.

Life Update

For the past several years, I've written "farewell to ski season" posts at the end of April. This year, I intended to as well, but I never knew it was going to end!

A lot's been going on since I last wrote here. First of all, the end of the ski season was fantastic! The last week in Winter Park was the best skiing of the year. The first (Tuesday) afternoon, I started skiing around 1pm and it snowed all afternoon - resulting in several inches by the end of the day. The next day was smooth and empty, followed by a day of deep powder and knee-deep runs down Eagle Wind. I had one of the best runs of my life that day.

While the snow was great at the end (and far better than last year), I didn't get as many days as I'd like. Only 22 this year. Most of them with Trish, Abbie and Jack. Next year, we'll be getting Abbie a Colorado 5th Grade Free Ski Pass and trying to hit all the ski resorts in the state. Below are some of my favorite pictures from this year's season - can't wait for next year!

The Bus Project
The last time I wrote about The Bus, it was in October. Since then, its rear suspension and wheels/times have been installed. In February, I bought a brand-new 911 racing engine and it's been installed as well.

There's still quite a bit of suspension, drivetrain and steering work to do, but it's in good hands. Last week, I removed it from Motorworks Restorations and I've started finishing it myself. I don't have welding skills and equipment, so I'm contracting that out, as I will most of the finishing touches. I'm also thinking of writing a letter to one of those Body Shop shows on TV and seeing if I can get them to finish it.

New Gig
If you've seen my LinkedIn Profile lately, you'll know I was looking for a new gig. I found one in mid-May and started consulting at Travelport in June. It's a nice 11-mile bike ride (uphill on the way there, downhill coming home) that I've thoroughly enjoyed. Takes me about an hour each way and is much better than sitting in traffic for 45 minutes. The project is interesting and fun to work on, and it ends in a couple weeks.

The Wedding and Honeymoon
In July, we're heading up to The Cabin in Montana to vacation and get ready for our wedding. We'll be enjoying the outdoors (rafting, biking, fishing), visiting with my folks and getting ready for the big day. After that, we'll be heading on a whirlwind honeymoon that takes us from Ireland to Italy to Thailand to Fiji. We're very much looking forward to the whole adventure.

And with that, I must go. It's Craft Cruisers night and there's beer to drink.

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.