Matt RaibleMatt Raible is a Web Architecture Consultant specializing in open source frameworks.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: AngularJS, 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.


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.

Getting Started with Angular 2

Click here to see an updated version of this tutorial that's been upgraded for Angular 2.0 RC1.

I was hired by one of my current clients in November to help them develop a project management application with AngularJS. I'm proud to say we've built the application, it looks great, and it's scheduled to be released next month. The team had lots of experience with ExtJS, but was new to AngularJS. While using AngularJS worked, they're keen on moving to Angular 2 shortly after it's released.

To help them learn Angular 2, I decided to write a couple tutorials similar to the AngularJS tutorials I wrote last year. In this tutorial, I did my best to keep the functionality and features similar to Getting Started with AngularJS so you can compare the code between the two.

What you'll build

You'll build a simple web application with Angular 2 and TypeScript. You'll add search and edit features with mock data.

What you'll need

  • About 15-30 minutes.
  • A favorite text editor or IDE. I recommend IntelliJ IDEA.
  • Git installed.
  • Node.js and npm installed. I recommend using nvm.

Create your project

Clone the angular2-seed repository using git:

git clone angular2-tutorial
cd angular2-tutorial
[Read More]

Posted in The Web at Mar 23 2016, 09:23:53 AM MDT 7 Comments

How to Implement a Smart Chunking Bootstrap Carousel with AngularJS

I've been helping a client develop a project management application for the last several months. One of the features I implemented uses UI Bootstrap's carousel directive to display a list of project templates to choose from when creating a new project. Rather than displaying one at a time, we wanted to display as many as the user's screen would allow. That is, if they were on a large monitor, we wanted to display five templates, a medium size monitor would display three and so on. This is a story of how I implemented a smart chunking carousel.

[Read More]

Posted in The Web at Mar 15 2016, 09:47:30 AM MDT Add a Comment

Raible Road Trip #70: To Jekyll Island and Back

My Dad's 70th birthday was January 16, 2015. Years ago, we started talking about celebrating this event and suggested we go somewhere warm. Trish and I proposed Hawaii, Mexico, or even Cuba. My Dad had his own idea: he wanted to go to Jekyll Island, Georgia. He spent a few high school years in Brunswick, GA and had fond memories of the place and weather. He also wanted to drive there, because road trips are awesome. At least they are in my family. We've done many family road trips over the years; the last one was in July.

One of the great joys in owning a VW Vanagon Westfalia is having the ability to sleep anywhere. Home is where your van is. We did a bunch of van repairs and upgrades last fall: rebuilt the transmission, added modern headlights, installed a Truck Fridge and a Propex heater. It was finally in tip-top shape for winter camping (or a road trip), so I suggested to my parents that we drive it to Georgia, via New Orleans. They agreed and we all smiled with thoughts of visiting the Big Easy. We'd never been.

Sunrise on the first day of Raible Road Trip #70 My parents flew to Denver a few days before we started. Our journey began early Sunday morning, January 10th. We left Denver around 6am and I spent the first couple hours driving in the dark, eastbound on I-70. Within the first hundred miles, the van's odometer quit working, so we had to rely on the gas gauge to know when to fill up. For anyone that's owned a vanagon, you'll know their gas gauges are fairly unreliable. Tom Hanks even talked about this on the David Letterman show.

[Read More]

Posted in General at Feb 04 2016, 10:43:09 AM MST Add a Comment

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.


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.
[Read More]

Posted in Roller at Jan 12 2016, 04:21:15 PM MST 2 Comments

Devoxx 2015: A Java Hipster Visits Belgium

I've been excited to show people JHipster and what it can do ever since I started using it in September 2014. I've been using its core frameworks (AngularJS, Bootstrap and Spring Boot) for a few years and believe they do a great job to simplify web development. Especially for Java developers.

When my JHipster talk was accepted for Devoxx Belgium, I told Trish we were headed back to Belgium. She smiled from ear-to-ear. Belgium is one of our favorite countries to visit. In an effort to live healthier prior to Devoxx, I stopped drinking beer a month beforehand. I mentioned this to friends the week prior.

One month ago, I stopped drinking beer. I hoped it'd help me with and weight loss. Unfortunately, it did not.

I told myself I'd start drinking beer again when 1) The Bus was finished or 2) Trish and I arrived in Belgium for Devoxx. Looks like #2 will win (we land on Tuesday).

We arrived in Brussels late Tuesday morning and hopped aboard a train to Antwerp. After arriving, we were hungry so we stopped at Bier Central for lunch. The mussels and beer were splendid.

First beer in over a month, so good!

[Read More]

Posted in Java at Nov 17 2015, 12:09:43 AM MST 2 Comments

Google's Mirror of Maven Central 25% Faster

Last week, Takari announced that Google is Maven Central's New Best Friend. While writing a news article about this for InfoQ, I decided to run a small test to see the speed of the default Maven Central versus the new Google Cloud Storage instance. This micro benchmark didn't seem worthy of including in the article, but I think it's interesting to see the speed improvements I found.

I ran rm -rf ~/.m2/repository, then mvn install with the default repository configured. I ran the commands again with Google Cloud Storage. I found that the downloading of dependencies, compilation and running unit tests on AppFuse's web projects averaged 4 minutes, 30 seconds. With Google Cloud Storage, the same process averaged 3 minutes and 37 seconds. By my calculations, this means you speed up artifact resolution for your Maven projects by 25% by switching to Google. To do that, create a ~/.m2/settings.xml file with the following contents.

      <name>Google Maven Central</name>

Benchmark Details
My tests were run on a Mac Pro (late 2013) with a 3.5 GHz 6-Core Intel Xeon E5 processor and 32 GB of RAM. Bandwidth speeds during this test averaged 57 Mbps down, 6 Mbps up. Below are the timing numbers (in minutes) from my test:

Default: 4:33, 4:36, 4:32, 4:24, 4:09
Google: 5:13, 3:35, 2:15, 3:38, 3:39

Google had some wide variances in its results, with five minutes and two minutes. Because of this, I dropped the low and high numbers for each service before calculating the average. My math with raw numbers is below.

273, 276, 272, 264, 213 = 260, 4:20
276, 272, 264 = 270, 4:30

313, 215, 135, 218, 219 = 220, 3.66 = 3:40
215, 218, 219 = 3:37

Chen Eric commented on the InfoQ article to note that Chinese programmers are blocked from using Google.

Update: Jason Swank of Sonatype has done some more extensive benchmarking and found different results.

We found that average unprimed Google API (first mvn run) caching performed 30% slower than Maven Central. Primed Google API cache performance (second run) was 3% faster then Maven Central (second run). We also ran a number of cloud-based tests with similar results.

Posted in Java at Nov 10 2015, 12:13:51 AM MST 4 Comments

Happy Birthday Abbie!

We now have a teenager. Abbie turns 13 today and we're celebrating with smiles in the Raible household. Abbie is in 7th grade now. She's a straight-A student and still loves to pick on her little brother. She's old enough that she's picked up an after school job babysitting and often has more money in her back account than I do. Trish takes her horseback riding a couple times per week and she recently competed in her first horse show competition. You can tell by the photo below that she enjoyed the experience.

Abbie at her first competitive horse show

If you're a long-time reader, you might remember the day she was born. I started this blog only a few months before.

Happy Birthday Abbie! Most people are scared of their children's teenage years. We're not. You're an awesome human and we love your fun-loving spirit, your kindness and your ability to rile up Jack like no other. We can't wait to experience your teenage years with you and support you in whatever challenges you take on. 😋

Posted in General at Nov 05 2015, 06:37:43 AM MST Add a Comment

The JHipster Mini-Book: How We Did It and What's Next

The JHipster Mini-Book Last Friday, the JHipster Mini-Book was published on InfoQ. I wrote about this milestone on the book's blog. I'm pumped to see this release happen, and I'd like to give you a behind-the-scenes peak at how it went from idea to production.

The Idea
At the end of last year, I wrote down my goals for 2015:

  • 21 Point Fitness App
  • JHipster Mini Book (InfoQ)
  • Finish Bus
  • New House
  • Good Blood Pressure

My reason for wanting to write a JHipster Mini-Book was simple: I knew AngularJS, Bootstrap and Spring Boot quite well. I'd used them on several projects and I really liked how JHipster married them all together. I often ran into people that used these technologies, but hadn't heard of JHipster. I was hoping to make more people aware of the project and market my development skills at the same time.

[Read More]

Posted in Java at Nov 03 2015, 10:13:40 AM MST 8 Comments

RE: Customizing an Asciidoctor PDF so it looks like an InfoQ Mini-Book

Last week, I wrote about customizing an Asciidoctor PDF so it looks like an InfoQ Mini-Book. Shortly after writing that blog post, Dan Allen responded to my questions and showed me how to customize Asciidoctor's PDF generation. I ended up using both techniques he described: creating a custom theme and using Ruby to override methods. To recap, here are the changes I was hoping to make:

  1. The colophon is not aligned to the bottom of the page.
  2. The title page (first one after the cover) and colophon pages should be merged.
  3. The dedication and acknowledgement headers are not center-aligned and underlined like InfoQ's format.
  4. The main sections don't have whole-page delimiters.
  5. The table of contents comes right after the title page, rather than after the dedication and acknowledgement.

I'm happy to report that I was able to fix most these issues, except for the second one and last one. There is a pull request to allow changing the location of the table of contents, but I was unable to make it work. I spent a good hour building the asciidoctor-pdf gem and trying to modify AsciidoctorJ to use it. In the end, I decided to mark this as a bug in the JHipster book and we'll fix it when Asciidoctor supports moving the table of contents.

To customize the output, I created an src/main/ruby/asciidoctor-pdf-extensions.rb file and added the following code to it:

require 'asciidoctor-pdf' unless defined? ::Asciidoctor::Pdf

module AsciidoctorPdfExtensions

  def layout_title_page doc
      # no title page

  def layout_chapter_title node, title
    if == "dedication" || == "acknowledgements"
      layout_heading_custom title, align: :center
    elsif "mini-book" # colophon
      move_down 470
      layout_heading title, size: @theme.base_font_size
    elsif "jhipster" #chapters
      puts 'Processing ' + + '...'
      move_down 120
      # set Akkurat font for all custom headings
      font 'Akkurat'
      layout_heading 'PART', align: :right, size: 120, color: [91, 54, 8, 13], style: :normal
      move_up 40

      part_number = "ONE"
      if "ui-components"
        part_number = "TWO"
      elsif "api"
        part_number = "THREE"

      layout_heading part_number, align: :right, size: 120, color: [42, 1, 83, 1], style: :bold
      layout_heading title, align: :right, color: [42, 1, 83, 1], style: :normal, size: 30
      move_up 30
       # delegate to default implementation

  def layout_heading_custom string, opts = {}
      move_down 100
      typeset_text string, calc_line_metrics((opts.delete :line_height) || @theme.heading_line_height), {
          inline_format: true
      move_up 5
      $i = 0
      underline = ''
      while $i < string.length do
          if string == 'Dedication'
            underline += '/////'
            underline += '//////'
          $i += 1
      if string == 'Dedication'
          underline += '////'
      typeset_text underline, calc_line_metrics((opts.delete :line_height) || @theme.heading_line_height), {
            inline_format: true, color: 'B0B0B0', size: 8, style: :italic
      move_down 20


Asciidoctor::Pdf::Converter.prepend AsciidoctorPdfExtensions

Then I modified build.gradle to use this file.

asciidoctor {
    backends 'html5', 'pdf', 'epub3'
    attributes 'sourcedir': '../../../main/webapp',
            'source-highlighter': 'coderay',
            'imagesdir': './images',
             toc: 'left',
             icons: 'font',
             linkattrs: true,
             encoding: 'utf-8',
            'setanchors': true,
            'idprefix': '',
            'idseparator': '-',
            'docinfo1': 'true'
    requires file('src/main/ruby/asciidoctor-pdf-extensions.rb')

After getting this to work, we're very close to publishing the JHipster Mini-Book! Thanks to Dan for creating Asciidoctor and supporting this great open source project. It's been a pleasure to write with it and the editing process with Git and pull requests has been wonderful.

Update: The JHipster Mini-Book has been released!

Posted in Open Source at Oct 28 2015, 10:41:38 AM MDT Add a Comment

Customizing an Asciidoctor PDF so it looks like an InfoQ Mini-Book

The JHipster Mini-Book Earlier this month, I finished the rough draft of the JHipster Mini-Book. Since then, I've been working with editors to get it ready for production. I've also been working with InfoQ to try and make the generated PDF look like their current mini-books. I wrote the book using Asciidoctor and I'm using Gradle to generate HTML5, PDF and EPUB versions.

After doing some research on Asciidoctor PDF themes I created an issue in the asciidoctor-pdf project. My reason for was to see if it was possible to customize certain sections of the generated PDF. The main issues I've had in making the PDF look like an InfoQ mini-book are the following:

  1. The colophon is not aligned to the bottom of the page.
  2. The title page (first one after the cover) and colophon pages should be merged.
  3. The dedication and acknowledgement headers are not center-aligned and underlined like InfoQ's format.
  4. The main sections don't have whole-page delimiters.
  5. The table of contents comes right after the title page, rather than after the dedication and acknowledgement.

After thinking about this a bit more, I thought of a few possible workarounds.

  1. I could add a number of line breaks at the beginning of the page to push everything down to the bottom.
  2. We could delete the title page (with Preview on a Mac or another PDF editor).
  3. We could create new PDF pages that have InfoQ's headers and my content. Then, using a PDF editor, we could delete pages and put the new ones in their place.
  4. There might be a way to have no text in a section's title (so it doesn't show up at the top of a page) and do the same copy/paste of an InfoQ section-delimiting page (with large Part One text) before the section. The hard part here might be lining up the table of contents with page numbers.
  5. Move pages around in the PDF and renumber pages using a PDF editor.

Even if all these workarounds are possible, this will only work for the PDF. InfoQ has asked me to make similar header customizations for the EPUB/MOBI versions.

I looked at the PDF theming guide and it looks like many things are customizable, but they're global customizations, not per-section customizations. Dedication, Acknowledgement, Preface, and Chapter Titles all live on the same level (level 2). I believe it's possible to customize how they all look, but I haven't figured out how to change an individual title.

The only thing I can think of beyond these workarounds are 1) hiring someone to create a custom theme for InfoQ or 2) forking the project and trying to make customizations to the source code myself.

I haven't had any feedback from the Asciidoctor team, so I'm posting this here to try and reach a wider audience. If you've authored a book in Asciidoctor, did you customize the output to fit your publisher's desired format, or did you just take the out as-is and publish it?

Posted in Open Source at Oct 22 2015, 02:15:21 PM MDT 2 Comments