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.

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.

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.

Professional

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 www.21-points.com 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.

<settings>
  <mirrors>
    <mirror>
      <id>google-maven-central</id>
      <name>Google Maven Central</name>
      <url>https://maven-central.storage.googleapis.com</url>
      <mirrorOf>central</mirrorOf>
    </mirror>
  </mirrors>
</settings>

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.

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

Google:
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
  end

  def layout_chapter_title node, title
    if node.id == "dedication" || node.id == "acknowledgements"
      layout_heading_custom title, align: :center
    elsif node.id.include? "mini-book" # colophon
      move_down 470
      layout_heading title, size: @theme.base_font_size
    elsif node.id.include? "jhipster" #chapters
      puts 'Processing ' + node.id + '...'
      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 node.id.include? "ui-components"
        part_number = "TWO"
      elsif node.id.include? "api"
        part_number = "THREE"
      end

      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
      start_new_page
    else
       # delegate to default implementation
       super
    end
  end

  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
      }.merge(opts)
      move_up 5
      $i = 0
      underline = ''
      while $i < string.length do
          if string == 'Dedication'
            underline += '/////'
          else
            underline += '//////'
          end
          $i += 1
      end
      if string == 'Dedication'
          underline += '////'
      end
      typeset_text underline, calc_line_metrics((opts.delete :line_height) || @theme.heading_line_height), {
            inline_format: true, color: 'B0B0B0', size: 8, style: :italic
      }.merge(opts)
      move_down 20
  end

end

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

Angular Summit 2015

I was in Boston this week, speaking and attending the very first Angular Summit. I had the privilege of delivering the opening keynote on Monday. I spoke about the Art of Angular and used a slide deck similar to last time. I did update the presentation to show the astronomical growth of AngularJS in terms of candidate skills (on LinkedIn) and job opportunities (on Dice.com)1.

LinkedIn Skills Growth for JavaScript MVC Frameworks Dice.com Job Growth for JavaScript MVC Frameworks

I mentioned the recently announced good news for Angular 2:

  • We're enabling mixing of Angular 1 and Angular 2 in the same application.
  • You can mix Angular 1 and Angular 2 components in the same view.
  • Angular 1 and Angular 2 can inject services across frameworks.
  • Data binding works across frameworks.

In related news, Craig Doremus recently posted a state-geo-angular project that shows how you can develop an Angular 1.x application that will be easy to upgrade to Angular 2.x. Thanks Craig!

After my keynote, I attended Pratik Patel's session on High Performance JavaScript Web Apps. Pratik pointed out mobitest.akamai.com for testing an app's performance and seeing its blocking resources. He also mentioned speedgun.io (currently unavailable) for capturing performance numbers as part of a continuous integration process. Finally, he recommended Addy Somani's JavaScript Memory Management Masterclass.

My second presentation was about JHipster. Near the end of the presentation, I mentioned that I hope to finish the JHipster Book this month. Writing presentations for SpringOne 2GX and the Angular Summit occupied a lot of my free time in September. Now that it's October, I'll be dedicating my free time to finishing the book. In fact, I think I can finish the rough draft this week!

For the last session of the day, I attended John Lindquist's session on Angular 2 Components. John showed us how everything is a component in Angular 2. He also said "now is the time to learn ES6" and built an Angular 2 ToDo App using ES6 and a bit of TypeScript. You might recognize John's name; he's the founder of egghead.io, an excellent site for learning Angular with bite-sized videos.

Tuesday morning started with a Angular 2.0 keynote from Peter Pavlovich. I really enjoyed this session and received lots of good tips about getting ready for Angular 2. The tweet below from Ksenia Dmitrieva shows his advice.

My biggest takeaway was to start following John Papa's Angular Style Guide ASAP.

The first session I attended on Tuesday was Judd Flamm's Google Material Design & Angular. I'm using Material Design for Bootstrap on a side project, so I was interested in learning more about its inspiration. We learned that Google Design has everything you need to know about why Material Design exists. We also learned about Angular Material and spent most of the session looking at its components. Judd recommended Angular Material-Start for those looking to get started quickly with both frameworks. Judd was a very entertaining speaker; I highly recommend you attend one of his talks if you get the opportunity.

After being dazzled by Peter's knowledge of Angular 2 in Tuesday's keynote, I attended two more of his talks: one on Meteor and another on Aurelia. I've known about Meteor for a while, but have become more intrigued by it lately with its 1.2 release and Angular support. Meteor's command line tools that auto-inject CSS and JS demoed very well, as did it's installable features like a LESS support and Facebook authentication.

After hearing all the good things about Angular 2 from Peter, it was interesting to hear him downplay it in his Aurelia talk later that day. When he started showing code, it was pretty obvious that Aurelia is doing a great job of simplifying JavaScript MVC syntax for developers. You can develop components with almost half the code that Angular 2 requires, and it uses ES6, jspm and SystemJS. If you're developing JavaScript, learning these tools will help prepare you for the future. It's cool that Aurelia encourages learning things you should learn anyway.

Aurelia and Angular 2 are both still in Alpha, so I'm not sure it makes sense to use them on a project this year. However, I do think it's important to track them both. I especially think it's interesting that the founder of Aurelia, Rob Eisenberg, left the Angular Team in November 2014 and announced Aurelia in January 2015 (Hacker News thread). Peter mentioned several times that Aurelia wants to help developers write apps, while AngularJS is more tied to helping Google write apps.

There were around 400 people at Angular Summit, which I think is pretty good for a first-run conference. As with most No Fluff Just Stuff shows, it ran smoothly, had plenty of time between sessions and was filled with knowledgeable, entertaining speakers. It was fun doing my first keynote and I look forward to speaking again in November (at Devoxx) and December (at The Rich Web Experience).

1. I know Dice.com is probably not a great site, but it makes sense to use it since I've been tracking JavaScript MVC framework job stats on it since February 2014.

Posted in The Web at Oct 01 2015, 10:29:31 AM MDT Add a Comment