Matt RaibleMatt Raible is a Web Developer and Java Champion. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

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.

Happy Birthday Abbie!

This weekend, we celebrated Abbie's 10th birthday. And we did it in style, with a limo to dinner at the Melting Pot and a slumber party with all her friends.

Heading out to Abbie's Birthday dinner in style! Happy Girls! Abbie and her friends in the limo

Having fun at The Melting Pot

Today is her actual birthday and it's hard to believe we now have a 10 year old. I guess that means it's also my 10th Anniversary of becoming a father. And it's Trish's 2nd Anniversary of meeting the kids. Phew! That's a lot for one day.

Abbie is really into horses these days. Trish competed in Hunter Jumper riding when she grew up in Puerto Rico. She won all kinds of awards and fell in love with the horses and the sport. Since Abbie loved riding this summer at Trish's Boot Camp and in Hawaii, we enrolled her in horseback riding classes. So far, she's having a great time and has even won some ribbons at her first show.

She's also been playing quite a bit of basketball, a sport I love. She started last spring at the YMCA, continued this fall and is starting with another league through her school this week. I'm sure she'll tear it up on the slopes this year too, just like in years past. I can't wait to root for her basketball team and race her down the mountain this winter.

To see Abbie on her birthday through the years, checkout my past Happy Birthday posts: #0, #1, #3, #4, #5, #6, #7, #8 and #9.

Posted in General at Nov 05 2012, 12:58:37 PM MST Add a Comment

When is the bus gonna be done?

When I meet up with friends these days, the most common question I'm asked is "when is the bus gonna be done?" I've often replied "in a few months" and I've been wrong every single time. However, this time, I really do believe it's gonna happen.

... says the guy who thought his kitchen would take 1 month to remodel (it's going on 4 months) and his deck a couple weeks to build (it took around 6 months).

The difference this time is that the last part we're waiting on has shipped. The part is the custom-built rear suspension from Franklin's VW Werks. You can see some pictures of them building it here. When this arrives, Motorworks Restorations can finally start putting all the pieces together.

Even with this good news, history has taught me that in a few months is not gonna happen. Here's a timeline of events since I bought the bus back in 2004 (4 months before Jack was born).

  • April 10, 2004 - [VW Bus] Could this be the one?: "Hmmm, if I could buy my dream car today and DU wins the National Championship tonight..."
  • June 09, 2004 - Pictures from "Bus Rescue" Road Trip: "1500 Miles, 4 days, 4 quarts of oil used. Pretty damn good for a Volkswagen."
  • October 15, 2005 - The Bus Project Begins: "With any luck, I'll have the bus in Mike's shop by December. Estimated time to complete body work and paint: 6 months to a year."
  • April 17, 2006 - Off to The Shop!: "Estimated time at the shop: 6 months to a year."
  • November 11, 2006 - Bus Project Update: "I'd like to be driving it around next summer, hopefully it'll be done by then."
  • June 08, 2007 Bus Project Update: "I doubt it'll be done this summer, but I'm still hopeful."

Project Reset: first guy went out of business and ended up costing me 5K for his work and 10K to fix his work at the next shop.

  • January 19, 2008 - Bus Project Update: "To start with, I'm going to have Motorworks do paint and body, and possibly suspension. Jeremy said they could probably take it out of my hands in March and have it back to me 2-3 months later."
  • July 07, 2008 - Bus Project Update: "With any luck, I'll have it completely restored sometime in 2010."
  • May 17, 2010 - Volkswagens On The Green 2010 and The Bus Project: "I don't know if we'll finish it this year, but there's a really good chance we'll be driving it to a lot of Colorado VW Shows next year."
  • April 30, 2012 - Bus Project Update: "With any luck, I'll have a kick-ass new ride arriving sometime in June. In July, I hope to drive it in the Swan Valley 4th of July parade."

So yeah, I have no idea when it's gonna be done. I'm hopeful it'll be in a few months. ;)

Posted in The Bus at Oct 26 2012, 11:00:07 AM MDT 1 Comment

The Deck Project

In March of this year, Trish and I decided we wanted to build a new deck and spruce up our backyard a bit. After returning from an awesome Spring Break adventure, we asked my parents to stay and help us start our Backyard Project. In addition to building a new deck, we concluded we wanted some stamped concrete, as well as a house-side garage door so we could admire The Bus when it's done. We sketched out the design we wanted and went to work.

It took several days to remove the old deck. My parents and Trish did most of the work that week as I had a bunch of client work to catch up on. They had to make several trips to the dump to get rid of all the old materials. Then came the wood order from Lowes. We had too much to fit in any of our vehicles, so we rented a truck and picked it all up. By the 2nd week, the foundation was in for the 1st deck and we started screwing in the composite decking.

Dad doing what he does best New Deck!

While finishing the first deck, we hired someone to pour two stamped concrete platforms and install a 2nd garage door. The stamped concrete was done in a couple days, but the garage door took 6 weeks to frame the opening, order the door and have it installed. Both turned out quite nice.

Rock Deck Lookin' Good! New Inside Garage Door

After returning from our summer vacation, I went to work on the 2nd deck and thought I could finish in a couple weeks. It ended up taking over 2 months. I figured out how to most of it from my Dad and the internet, particularly decks.com including the buried post footing, framing around a tree and sloping your deck. The framing and joists took all of August to complete.

Deck 2, Phase 1 complete! Deck 2, Phase 2 complete!

In September, I worked on the steps and had a friend do the electrical work to install lights, which I bought from Deck Depot. This past weekend, I found the time to finish the 2nd deck and make it all look good.

Deck Project Complete!

Thanks go out to Trish and my parents for the old deck removal and 1st deck building, Ted Pepper for his advice, Ric Nepomuceno for his electrical help, and Lowes for all the building materials. While it's a little late in the year to enjoy our new backyard much, I'm sure we'll figure out a way to have many good times on it in the future. ;)

For more pictures, including some night shots, checkout my Deck Project on Flickr.

Posted in General at Oct 15 2012, 10:27:09 AM MDT Add a Comment

AppFuse News: GitHub, Hibernate Search and The Future

It's been a while since I've written anything about AppFuse, but since the project has had quite a bit of activity lately, now seems like a good time.

GitHub
First of all, we moved the source code from java.net to GitHub way back in June. Thanks to Serge for helping with this process and making it quick and painless. For some reason, shortly after moving, we started having quite a few build issues with Bamboo. I was able to diagnose the problem as not enough memory on our server. Thankfully, Contegix was able to add another 2GB of RAM to our box and get everything back up-to-snuff.

New Committer: J. Garcia
J. Garcia has been a regular voice on the users and developers mailing list for several months. He's recently started contributing a lot of patches in JIRA and seems genuinely interested in the success of AppFuse. That's why we voted and added him as a committer. To prove this was a smart move, he recently replaced Compass with Hibernate Search and upgraded to Hibernate 4. As part of this work, he removed iBATIS support, which brings me to my next point.

The Future
In mid-August, I sent an email to the community, asking them "Anyone using iBATIS?"

I'm thinking of replacing AppFuse's Data Tier with Spring Data, especially because it has NoSQL and REST support. There's a good intro on InfoQ today:

http://www.infoq.com/articles/spring-data-intro

Does anyone see an issue with this? The lack of iBATIS support could be an issue, but I doubt it since if we wanted to continue supporting it, we should move to MyBATIS.

Everyone agreed this was a good idea and it seemed like a logical time to remove iBATIS support. In addition, I posted a roadmap I jotted down in early May. Since we've missed all the dates so far, I've removed them from the listing below. We hope to get 1-2 releases done by the end of this year, with 2.2 in the next 2-3 weeks.

2.2
Hibernate 4
Hibernate Search
Bootstrap
H5BP

2.3
AMP for all light modules
Wicket
PrimeFaces

2.4
JSR 303 (might require removing or developing client-side support)
Mockito instead of jMock/EasyMock

2.5
AMP one-to-many
Spring Data
MyBatis (if there's interest in adding it back in)

2.6
wro4j for concatenation and minimizing JS and CSS
pjax - https://github.com/defunkt/jquery-pjax

2.7
Scala example
Gradle example
Article about examples

3.0
GWT

Maven Central Statistics
To prove there's still a fair amount of folks using AppFuse, here's some statistic from Sonatype's OSS Repository Hosting Service.

AppFuse Downloads

From this screenshot, you can see that AppFuse artifacts are downloaded around 7,000 times per month. The following graph is even more interesting. Apparently, around 3,000 new projects are created with AppFuse archetypes each month.

AppFuse Archetype Downloads

The AppFuse Name
Finally, I recently discovered that ShoreTel decided to name a new product AppFuse. I guess this signifies two things: 1) it's a good name for a product and 2) someone didn't do their research before naming it. At this point, I'm not too concerned, but it is an interesting development.

Posted in Java at Sep 25 2012, 10:42:14 AM MDT 5 Comments

Core HTML5 Canvas Book Review

Core HTML5 Canvas I've known David Geary for quite some time, from our original meeting in the blogosphere to speaking on the No Fluff Tour. At first, I had trouble respecting the guy because he was such a JSF Fanboy. However, over the years, he's switched to Ruby on Rails, GWT and now he's all about HTML5. Specifically, HTML5's <canvas> element. When David asked me if I'd like a copy of his lastest book, I jumped at the opportunity.

I received it in the mail shortly before heading to Hawaii this summer. I started reading it by the pool the next day.

I was immediately impressed that the book was printed in color. The first copy I ever saw of my Spring Primer was in color and it really popped. Geary's book does the same and I'm glad the publisher decided the extra cost of printing was worth it. In the preface (and in a recent blog post), David explains how he wrote the book code-first in the Zen tradition, so you can read it without reading. I saw him write somewhere that he spent 2 years, 60 hours per week writing it. It really shows - the sheer amount of code and knowledge in this book is amazing.

Looking back at the Table of Contents, I remember getting overwhelmed early on. Not overwhelmed in that I didn't understand how things were working, but more like "there's too much in here to try and remember it all". I haven't used algebra since high school, and right there on page 53 it says:

To do anything interesting with Canvas, you need a good basic understanding of basic mathematics, especially working with algebraic equations, trigonometry, and vectors.

Reading the book poolside wasn't a huge motivator to refresh my algebraic knowledge, but I did enjoy David's brief 10-page refresher. In Chapter 2 on Drawing, the book dives into the low-level API that canvas offers for drawing rectangles, circles and polygons. It also goes on to show you how to do gradients, patterns and shadows as well as all there is to know about paths, stroking and filling. This is when it hits you that <canvas> is more about JavaScript than HTML. In fact, it's usually only a couple lines of HTML and a whole lotta JavaScript.

In Chapter 3, you learn about text and how to work with fonts and paragraphs. David even spends 10 pages showing you how to implement a Paragraph, complete with positioning the cursor, adding new lines and working with backspace. It really makes you appreciate what HTML offers you with the good ol' <p> and <input type="text">.

Chapter 4 is where you learn about working with images and video, using offscreen canvases and working with a canvas within a canvas. I believe I was back in Colorado when I started reading this chapter. It's also where I succumbed to the fact that this was an excellent reference book and not something I was going to read, learn from and start using the next week. It feels like a book I'll refer back to many times when using <canvas> on a project. The amount of knowledge in the book seems akin to Rod Johnson's J2EE Development without EJB. I remember getting the general gist of Rod's ideas while reading the book, but not knowing how to put them into use. Then the Spring Framework was introduced and everything became clear. As I read Geary's book, I thought the same thing - someone really needs to develop a simpler API for Canvas.

As I read on, through chapters on Animations, Sprites, Physics, Collision Detection and Game Development, it hit me - maybe that's what David is doing!

Throughout the book, David builds a framework for working with Shapes, animating them and finally, for putting them to work in a gaming environment. The Ungame is nice in that it shows you how to use a game engine for building your own games. Then he goes on to show you a Pinball game that looks overly complex, but breaks it down into terms you can understand.

The last chapter is on Mobile development. It explains in detail about the viewport metatag, media queries for CSS and touch events. The section on iOS5 is good, but does make the book seem slightly outdated with iOS6 coming out next week. I'm sure all of the content is still relevant, but it almost seems like labeling it iOS5+ would've been better. In the final pages of the book, you learn how using a canvas that requires typing on a touch device might suck. David shows you how to implement a Virtual Keyboard to handle these situations, since the native keyboard won't pop up unless you're typing into HTML controls like <input> and <textarea>.

I read this book to learn more about Canvas and what it was capable of. I learned all it can do and much, much more. I learned how animations and timing can be different between browsers and how you might need to create a polyfill for requestAnimationFrame for it to work consistently.

More than anything, I recognized that this is one of the few technical books I've read in a long time that's become an instant valuable resource. With other books, the information is often available online. Not so with Geary's book. To me, it seems like the best resource available for learning and using HTML5 Canvas.

Well done, David, well done.

Posted in The Web at Sep 14 2012, 09:21:56 AM MDT 2 Comments

We bought a boat!

I've always enjoyed whitewater rafting. I think the first time I did it was in college and I immediately fell in love. Through the years, I've been on many trips with family and friends. However, it wasn't until this summer that I realized it was something I should do more often. It was Trish's friends, Chris and Bryce, that started it all. They bought a raft last year and we floated down the Colorado River with them a couple times over Memorial Day Weekend. Then we went to Montana and enjoyed a couple days on the Middle Fork of the Flathead with Dr. Barton and a bunch of raft guides. That weekend in July, we realized we'd done more rafting than any other outdoor activities (mountain biking, camping and even golfing). That's when we decided to buy our own.

We had a lot of help in the process of buying a raft. First of all, I sat down with my friend Dr. Barton and made a list of all the things we'd need. The good doctor was a whitewater guide in Montana for 5 years, has rescued trips from the wilderness and has even rafted the Grand Canyon - so I considered him a good source of information. After composing the list of necessary gear, we headed to Down River Equipment on August 26th, the last day of their end-of-season sale. It took us an hour to pick out the raft we wanted (a Pro 140) and gather up all the gear (frame, cooler, oars, dry box/bags, lifejackets, koozies, etc.). We asked them to have it ready by Friday and headed home.

Last Friday, we picked up a raft trailer from Trailer Source an hour before they closed, then journeyed to Down River where Mike (the owner) and Matt (the guy who helped us the previous Sunday) helped us setup our oars and load up our new boat. There was much rejoicing.

We bought a boat! Thanks to Mike and Matt from Down River

Saturday, we took it on its Maiden Voyage on the Colorado River, floating from Radium to Rancho del Rio. According to this page, there were some Class III rapids, but they all felt like Class II. I guided and rowed the boat most of the time while our 7 passengers (and 2 dogs) enjoyed cold beverages, great scenery and relaxing in the sun. It took us a bit longer (4 hours) than expected (2 hours), but we all thought it was well worth it.

Abbie with our new boat

Abbie's First Golf Game
After a long day of floating on Saturday, we decided to chill on Sunday with a little golf. We split the kids up for the weekend (Jack went with his mom), so we figured the proper way to treat our only child was to take Abbie to play her first real game of golf at Pole Creek. We played 9 holes and both Abbie and I had a great time trying out our new clubs. We received a nice kids golfing tip from someone at the driving range: have them tee off from the 150 marker so they have a chance to par the hole.

The course had a 50% discount for kids and we never saw anyone behind us the entire game. We were especially impressed when the course photographer offered us a framed set of Abbie pics for $15.

Nice form kiddo! Great day of golf at Pole Creek. Got a sweet framed set of Abbie pics at the end too!

Abbie frolicking on the golf course

We don't know how many more days of rafting we'll get in this year, but next year should be epic. We're hoping to do multi-day trips on the Green River, the Smith River and fly into Schafer Meadows for a journey through the Bob Marshall Wilderness. I grew up only 10 miles from "The Bob" and I've never been in it. I can't wait! :-D

Posted in General at Sep 05 2012, 11:12:02 AM MDT Add a Comment

Happy Birthday Jack!

Eight years ago today, Jack was born. Today, it's hard to even imagine him as a baby or a toddler. But then again, we all looked quite a bit different back then.

Hiking at Red Rocks Abbie and Jack on the Train

These days, Jack has his own website and prefers to spend his free moments playing with Beyblades or his new Nintendo 3DS. He started 3rd grade this year and has excellent math and reading skills, even though he's the youngest in his class. As he grows older, he's starting to like the same things I do, particularly fishing, skiing and golfing.

Last weekend, we threw a birthday party for Jack at Julie's house. He invited some of his close friends from school and had a Beyblade tournament. Fun was had by all and you couldn't wipe the smile off his face when he went home.

Let it rip!

This fall, Jack will be playing lacrosse again and might even pass up his sister in height. He sure is a handsome kid. Happy Birthday Jack!

Jack and his buddies on his 8th birthday

Related: Jack's 5th, 4th, 3rd and 1st birthdays.

Posted in General at Aug 28 2012, 12:12:46 PM MDT 2 Comments

Refreshing Taleo's UI with HTML5, Twitter Bootstrap and CSS3

Back in December, I wrote about what I've been working on at Taleo. Shortly after finishing up the Profile Picture, Talent Card and Org Chart features for TBE, I spent two weeks doing page speed optimization. By following Web Performance Best Practices, I was able to make the TBE application twice as fast and improve its score into the low 90s.

Next, I started working on a new project - refreshing the UI. Nick, the Lead UX Designer at Taleo (at the time), had developed a number of mockups and presented it to the developers and product folks in early November. I listened to a WebEx of that meeting and learned that everyone thought it'd take 6-9 months to complete the work. They figured they could release the new design in Q3 2012.

Since I like to provide high-value for my clients, I offered to help with the redesign and do a spike to help estimate. They agreed it'd be a good use of my time and I started working on it the week before Christmas. Since I'd used Twitter Bootstrap for my Play More! app, I recommended we use it as a foundation of the redesign. They agreed and I went to work. By the end of the week, I'd made good progress and told them I thought the redesign was possible in 2-3 months (including QA and cross-browser compatibility).

When I came back to work in January, we decided to split the redesign into two phases. Rather than moving elements around and introducing new features, we decided to do that in the 2nd phase. The 1st phase would entail simply re-skinning the existing UI, with minimal HTML changes. I spent a week refining my spike and integrating it into a branch. The next week, I switched images from individual images to CSS sprites. Next, I implemented a new theming system with different colors/icons and got everything looking good in Chrome, Safari and IE8/9.

The result is something I'm quite proud of. IE8 doesn't have the rounded corners (via border-radius), but it still looks good. Forms look much better thanks to Bootstrap's styling and even jQuery UI's widgets look good thanks to jQuery UI Bootstrap. I did have to override quite a few Bootstrap styles in the process, but the result is something that doesn't look too bootstrappy.

One technique I found to be extremely useful during this process was to pair with Nick (the designer) as mentioned in Building Twitter Bootstrap. At one point, when we were trying to refine slight nuances and spacing in the UI, I paired with the Product Manager and found this to be a real time-saving effort as well.

Taleo's UI Refresh project has been a great experience for me in sharpening my CSS skills. I used quite a bit of child and sibling selectors, which work great in all the browser's we're supporting. Also, by using CSS sprites and colors (vs. images), I was able to get the manual theme-creation process down to around 15 minutes. After getting the manual process greatly reduced, I wrote a Theme Generator (based on Ant, LESS and wro4j) and got it down to mere minutes. I found Sprite Cow to be an invaluable resources for working with CSS sprites.

Below are some before and after shots of what we've been able to accomplish in the first quarter of this year.

Old UI - My View Old UI - New Employee

New UI - My View New UI - New Employee

I originally wrote this post at the end of January. We ran into some stumbling blocks shorty after its original composition: Nick (the designer) moved onto greener pastures and Oracle bought Taleo. What I didn't expect when I wrote this was to spend the next two months fixing slight bugs that occurred with spacing, alignment and dependent applications I didn't know about at the time. And then there was IE7. We didn't realize we needed to support it until mid-March. Then it took us around a month to make it all work good enough.

The good news is the UI Refresh was released a few months ago and seems to be humming along just fine. Sure, there were slight nuances and customizations we had conflicts with (clashing CSS classes), but overall it seems to have gone well. I can't thank the Bootstrap developers enough for motivating us to move to HTML5 and CSS3. Also, cheers to the excellent co-workers that helped make this happen: Murray Newton (Product Manager) and Vladimir Bazarsky. I couldn't have done it without you guys.

Posted in The Web at Aug 20 2012, 12:27:21 PM MDT 5 Comments

The First Day of School

The first day of school always marks a big change for my family. We have to start getting up early, start our scouting adventures and figure out some sports to play. This year, it seemed to come faster than ever. I'm sure that had nothing to do with the fact that we were gone most of the summer.

Abbie and Jack's first day of school was yesterday and they couldn't be happier. Abbie is now a 4th grader and Jack is in the 3rd grade. Heck, they even seem to have some fashion sense!

Abbie and Jack on the First Day of School 2012

For fall activities, Abbie is doing horseback riding and Jack will be playing lacrosse at DU. Both are pumped about their sports and Abbie had her first lesson last night. She looks pretty good on a horse if you ask me.

Abbie's first horseback riding lesson

In other life news, our house is a disaster (we're halfway through getting our kitchen remodeled), our deck project is almost done and The Bus will be finished in just a few more weeks.

OK, I made that last part up - one can dream, right? ;)

Related: First Day of School 2010 and First Day of School 2007

Posted in General at Aug 16 2012, 01:01:30 PM MDT 1 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