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.

Life as an Open Source Developer

It's been a little over a month since I started my new gig at Stormpath. I gotta say, life is great as an open source developer! Yes, I did start working for them as a consultant in April, so it's not a huge change for me. However, I only recently realized I haven't written a single line of proprietary code the entire time. My GitHub contributions look pretty good this year. They're nothing like @mojavelinux, or @dsyer, but I'll get there. ;)

GitHub Profile - November 3, 2016

It's also been a bit more stress than I'm used to. I think this comes from a couple things: 1) turning my hobby into my job and 2) I've set a lot of high expectations for myself. As a developer evangelist, I get to create my own job. That means I can speak at the conferences I want to, write the code I want to, create the blog posts I want to, and everything else in between.

At the end of September, I finished updating the JHipster Mini-Book for JHipster 3.x. It's gone through tech editing and it's being copy-edited right now. I hope to release it within a week.

In early October, I said I'd commit to writing one blog post per week, develop a JHipster module for Stormpath, and help get their Angular 2 support good enough for an alpha release. I'm happy to report I've been able to accomplish most of these and I hope to show off our Angular 2 support soon.

I then channeled my efforts into integrating Stormpath's Java SDK with their AngularJS directives. You can read about how I did that in Get Started with AngularJS, Spring Boot, and Stormpath. Unlike my previous AngularJS tutorial, this one connects to a backend and shows how to communicate with Spring Boot cross-domain.

If you like to read code more than words, you can look at the example project's commits on GitHub.

  1. Create an AngularJS UI: search and edit features
  2. Create a Spring Boot app with Stormpath: app from start.stormpath.io
  3. Develop an API to CRUD people with Spring Data REST: /api/people
  4. Integrate AngularJS and Spring Boot apps: cross-domain
  5. Integrate Stormpath into AngularJS for login, registration and forgot password: Stormpath Angular SDK

Last week, I released a JHipster module that integrates Stormpath. This exercise was good because I was able to identify some gaps in Stormpath's SDKs and fix them. Getting something to work made me feel good; having the ability to improve the developer experience was even better! Of course, I blogged about what I learned.

This week, I edited and code reviewed some posts from Karl Penzhorn on React with Spring Boot and using webpack with React. I also got to bang my head against the wall writing Angular 2 tests. If you're writing a module for Angular 2, generator-angular2-module provides a nice starting point.

Last, but certainly not least, I'll be speaking at a few events about Microservices, JHipster, Angular 2 and Stormpath in the near feature.

If you have any questions about developer evangelism, the technologies I mentioned in this post, or Stormpath, please let me know. Otherwise, I hope to see you on the road soon!

Posted in Open Source at Nov 03 2016, 04:29:01 PM MDT 1 Comment

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

The Passionate Programmer by Chad Fowler

Today I'm attending Developer Day in Boulder, Colorado. The opening keynote was done by Chad Fowler and below are my notes from his talk.

Chad recently wrote a book called The Passionate Programmer. It's about Creating a Remarkable Career in Software Development. Why is it important to do this? Because the average adult spends 53% of their time working, so it's really about creating a remarkable life. What is remarkable. For Chad, it was driving around the country in a 1986 Tioga motor home for two months. He worked the whole time and got to enjoy a lot of beautiful scenery along the way. He just returned from "working" in Hawaii for the last two weeks.

One of the things that motivated Chad to take control of his career was The Pragmatic Programmer book. It taught him you should always try work with people that are smarter than you. What we all really strive for is freedom, especially creative freedom. The whole idea of a remarkable career is it's different for everyone. Some folks want to get rich, some want to take a lot of vacation, some want to travel the world.

The process of developing a remarkable career is fairly easy - you just need two things. You have to have the intention and a system for getting it done. Most people do their careers by coincidence, but they don't drive it. In the music world, no one gets into it for the paycheck. Everybody gets into it because they think they're going to be the best. When Chad became a programmer, he thought the same thing - that he wanted to be a rock star.

When you have a plan, it makes hard things easy. A good example of a helpful planning technique is training for a running race. In September, Chad completed the Indian Summer Half Marathon and he used a training program that introduced mileage in a systematic way. Because of this, training never felt difficult. Another system that Chad recommends is the Seinfeld Calender, where you have a calendar that you X the days when you completed your training (or steps toward a goal). An interesting open source version of this is Calendar About Nothing.

One good way to look at your career is to think of yourself as a product. Choose your market, invest in yourself, execute and market your skills. You should hang out with people you want to be like and work with people you want to become. Chad recommends not only learning a new language every year, but also learning a new domain. You should decide if you want to be a generalist or a specialist. Being a specialist does not mean only knowing one thing, it just means you know one thing very well. If you do both, it's the best path towards awesomeness.

The thing that most programmers don't do enough of is practice. CodeKata is an example of how you can practice. Don't just practice programming, understand how your business operates. One of the best ways to do this is learn how to read a balance sheet. Don't be a Partial Person. Don't be someone who says I'm not a UI programmer. Learn how to do it. If you say "I've always wanted to", you should do it (unless it's illegal of course).

Execution is a mindset. The best person is not always the smartest person. People who struggle have to come up with systems to make them stronger. People who get things naturally (fitness, brains, etc.) tend to not keep perfecting their skill. Always think about how much you cost per hour and try to do something you can tell your boss everyday. Another way to execute impressively is to do an 8-hour burn (similar to the 40-hour work week)

The best way to market yourself is to be remarkable. When you do networking events, try to help people. We can all get stuck in the trap of saying I am an X programmer. This happens a lot when you're successful at X. Don't limit yourself by tying yourself to one technology. As a programmer, your job doesn't suck. If what you're doing is not fun, then you're probably doing the wrong thing. Ruthlessly cut out the crap you don't enjoy.

Posted in Open Source at Oct 10 2009, 01:59:19 PM MDT 6 Comments

Lean Teams: Doing more with less

This evening I attended the Denver Rails User Group (a.k.a. DeRailed) to hear a presentation by Marty Haught. It was titled "Lean Teams: Doing more with less" and the following are my notes from the event.

Today's talk is about "Rocking with Ramen" - a.k.a. working with less funds to make great things. Lean comes from the manufacturing world in that you should Add Nothing but Value. The most important thing you should do is add business value.

The Seven Wasteful Sins for manufacturing are:

  • Overproduction
  • Inventory
  • Extra Processing Steps
  • Motion
  • Defects
  • Waiting
  • Transportation

The key to fighting overproduction in software is to trim features to those that achieve the greatest value. You should do "the simplest thing that could possibly work" and delay commitment as long as you can because YAGNI.

A minimum viable product is a starting place for validated learning with the least amount of effort. It should be embarrassing. Early adopters see the potential. Rails Rumble and Startup Weekend are good examples of promoting this type of development.

Unused and useless features are best solved by feedback-driven development. This is a process for validating value and creating software that people use. The end result is that you create software that people use and you're able to pivot your plan as you learn. The benefit of this is you stay humble and you don't drink the Kool-Aid (e.g. VC's tell you you're going to be the next Twitter).

The first part of feedback is "Pirate Metrics" by Dave McClure. The main things to track are acquisition, activation, retention, referral and revenue (AARRRR!). The main things you should gather from metrics is they're actionable and should help you make decisions. Vanity metrics like hits-per-month and such should be ignored.

Other feedback options include net promoter score (popup question to ask if users would recommend to a friend), feedback form (make it easy for users to tell you what you think about your product), A/B testing, and usability testing.

The final point is that it's OK to remove features.

To reduce extra processing and waiting, you should implement "Kanban". It's a pull-based system for a continuous flow of work and can be used in software projects to manage/schedule work for cross functional teams. It's an expression of just-in-time and has an emphasis on flow. It's all about getting across the board as fast as possible. In agile development, this is often expressed as a card-based system on a wall in the same room as your development team. Things can only move from the left-to-right as there is space for them. Marty is showing a screenshot of a "Zen" tool he uses on his projects. It has 3 columns (Definition, Work and Verification) from left-to-right that allows you to easily move stuff.

The most important thing about Kanban is it helps to eliminate constraints. The Zen tool only allows a certain amount of items in the "Work" column and it visually communicates blocked items by moving them to the top and highlighting them with a red border. The Zen tool that Marty is showing looks similar to Rally, but is much more visually appealing.

The benefits of Kanban include:

  • simple, less process
  • less inventory of requirements/stories
  • limit work in progress, maximize throughput
  • less time in meetings
  • more naturally represents story lifecycle
  • more easily spot bottlenecks
  • estimate only if it adds value

Kanban promotes tracking how long it takes for a story get across the board and into production vs. tracking velocity of a team.

On my current project, we use Rally, a small team and have two week iterations. Because the things that Marty is talking about seem to be things we're already doing, I asked him how Kanban differs from Scrum with small teams. He explained that this biggest difference is Kanban is most useful when you're pushing things to production with each iteration.

The most controversial practice that Marty promotes is Continuous Deployment. This is the automated deployment of code to production. It includes automated testing and continuous integration, simple deployment/rollback scripts, a successful CI build triggers deployment, and there's real-time alerts in production. When shit goes wrong, you should use the "five whys" to perform root cause analysis. Marty admits that this is only a good idea when there's a high-level of trust in your development team and lots of tests to prove nothing is broken.

The benefits of continuous deployment is there's a lower story cycle time, you eliminate waste in deploying code, you deliver features/bugs fixes faster and you find integration issues quicker and in isolation. It's also a great way to promote not checking in shitty code.

The skeptics think this is a bad idea because 1) it's scary, 2) they believe it causes lower quality and 3) it causes more issues in production. The good news is you can still control production deployments with your source control system (e.g. branches and such). More than anything, it forces you to have a high quality continuous integration system that acts as the gatekeeper for what goes to production.

You can learn more about topics Marty covered in this talk at the following sites:

If you're lucky enough to be attending Aloha on Rails, Marty will be presenting there. I recommend you attend his talk if you're trying to get stuff done quickly and get it into production even quicker. His techniques seem to be invaluable for developers that are trying to maximize their efficiency and reduce the time it takes to get their code into production.

Posted in Open Source at Sep 23 2009, 09:20:28 PM MDT 4 Comments

How I recovered data from my failed Linux box

Yesterday, I decided to quit procrastinating and finish up my 2007 taxes once and for all. When I booted up QuickBooks on my XP box, it said it couldn't connect to drive Q. Drive Q is on my Linux box, which I discovered wasn't on. When I booted it, the screen showed an "Error 18" after the GRUB loading message. The resulted in several hours of grub-install and many other commands to no avail.

Since I hadn't messed with the box in almost a year, I didn't even know if it had Fedora or Suse installed on it. I had both disks lying around, so I tried the good ol' linux rescue with my Fedora disks. I was able to access the data, but had no luck in getting network connectivity or copying files to a USB drive.

Today I hoped for a different route: Live CDs. Yesterday, I discovered I was running Suse 10, so I downloaded a Suse 11 Live CD, burned it and booted. It worked, but I didn't have access to my hard drives and wasn't able to mount anything. Next up, I tried Knoppix, which allowed me to boot and access my hard drives. Unfortunately, I still didn't have any network access and my 2GB thumb drive didn't hold enough data.

Next, I pulled out a 250GB USB drive I had lying around. Knoppix recognized it, but was unable to format it for some reason. I plugged it into my XP box, used fat32format to format the drive as FAT32, and plugged it back into my Linux box. Success! I was able to copy all the data I needed and now I have the USB drive plugged into my Airport Extreme.

Hopefully if someone else runs into similar issues, they can use this post to find their path to success.

Posted in Open Source at Dec 11 2008, 02:02:29 PM MST 6 Comments

Appcelerator with Matt Quinlan

This evening I attended the Denver Open Source User Group meeting where the Basic Concepts talk was on Appcelerator. Matt Quinlan (Twitter, Blog, LinkedIn) was the presenter. I arrived 10 minutes late, so I didn't hear any of the intro stuff. Below are my notes from the event.

The Appcelerator developers liked the "onclick" syntax, but found it was too limited to do everything they wanted. Rather than onclick, they use an on attribute. For example:

<div on="click then l:show.box">
Click me
<div>

"DOM Manipulation is JavaScript cruft."

Appcelerator allows you to implement the Observer pattern in the browser. In addition to allowing DOM elements to subscribe to messages, server-side objects (in any language) can subscribe as well. In Appcelerator syntax "l:" means local and "r:" means remote. The messages that are passed to the server are JSON and have payloads. JSON is more popular than XML because you can eval() it and create JavaScript objects from it. Appcelerator allows you to do Declarative Ajax. On the server-side, you can annotation Java and C# classes with @Service to subscribe to messages. In other languages (i.e. PHP), Javadoc-style comments are used.

Tagline: The seamless fusion of RIA and SOA.

Web Expression Language
Goal is to eliminate 90% of the JavaScript you write. Example syntax:

on="[condition] then [action]"

Conditions include DOM events (click, focus, blur, change, mouse events), key events (up, down, press), other (history, drag/drop, selected, resize, iPhone orient, sortXYZ), subscribe to custom message. Actions include Scriptaculous effects (show/hide, fade, move, drop, grow), set element value (static, dynamic, bind), set CSS class or attribute, execute custom JavaScript, publish custom message.

Now Matt is doing a demo on http://try.appcelerator.org. This site consists of a form that allows you to type in Appcelerator code and run it. 3 attributes can be added to any tag: draggable, droppable and resizeable.

Client-Side
Add simple tags to your HTML to inject RIA widgets. Add single property to existing HTML elements for dynamic behavior. Eclipse Plugin built on Aptana, but is generally targeted towards web developers moreso than business analysts (no drag and drop of widgets).

Server-Side
Server-side development done with your IDE of choices. Based on your server-side tehchnology platform. Easily create services using annotations.

App Command
The app command is similar to Rails' GEM command. Allows you to build scaffolding and deploy to cloud (AppEngine, Amazon S3). It also allows you to pulldown components from the main server and auto-updating.

Examples:

Appcelerator allows you to create prototypes easily by using a JavaScript file with mocks for the server-side objects. In the next version, you can "annotate" the UI and allow end-users to Ctrl+Click on elements and add feedback. For an example of this, see http://dev.appcelerator.com/pearson.

When starting with Appcelerator, you can start by crawling (including appcelerator.js for widgets) then move to walking (decouple server-side and client-side) and finally running (developing working prototypes with mocks for server-side).

"Let's face it, ASP, JSP, PHP and Ruby are just lipstick on CGI."

Posted in Open Source at Oct 07 2008, 07:08:19 PM MDT 5 Comments

Performance Testing Memcached

Earlier this week, co-workers and I did some performance testing with Memcached. We wanted to see how long it'd take to send different sizes of objects over the wire to Memcached on a remote server.

We setup a simple environment with 2 Mac Pros both running 2 x 2.8 Ghz Quad-Core Intel Xeon processors and 12GB of RAM. We used one machine as a Memcached server and one machine running an application with the addition of a new Servlet Filter. The Servlet Fitler read a size parameter and used it to set the size of the object being written and read from the Memcached server. We used JMeter to put load on the box. The following describes the load and the results.

Write Times
Write tests were performed with a single user executing 1000 sequential remove then writes.

Size in Bytes Time (ms.) Min. Time (ms.) Max. Time (ms.) Total
20000 1.31 0 7 1000
50000 1.834 1 8 1000
100000 2.87 2 9 1000
500000 12.641 9 283 1000

Read Times
Read tests were performed using 50 users with 1 sec. ramp times executing 100 reads each.

Size in Bytes Time (ms.) Min. Time (ms.) Max. Time (ms.) Total
20000 4.8414 1 375 5000
50000 18.343 1 354 5000
100000 46.181 2 415 5000
500000 137.7328 6 953 5000

During our tests, Memcached was started using the following settings:

memcached -d -m 2048 -M -p 10171 -vv

If you've done similar performance testing with Memcached, we'd love to see your results.

Posted in Open Source at Sep 19 2008, 11:29:33 AM MDT 6 Comments

Presenting Web Frameworks of the Future Tomorrow in Denver

Tomorrow (Thursday) night, I'll be doing an encore presentation of my Web Frameworks of the Future at DeRailed. If you're in Denver and would like to hear me ramble while drinking a beer, join us at Forestroom 5 at 6:30.

After the last few days, I'm happy to report I should be in good enough condition to pull this off. If you're curious to learn more about my experience at OSCON and this presentation, please see my writeup on the LinkedIn Blog.

Posted in Open Source at Jul 30 2008, 09:56:17 PM MDT 2 Comments

OSCON 2008 Wrapup

This week, I attended OSCON 2008 in Portland, Oregon. I talked to someone who thought the conference had a very small Java presence. I noticed this too, but that's how it's always been. Interestingly enough, they also thought it had a small Ruby showing. I guess Perl, Python and PHP will always dominate OSCON. Of course, there's nothing wrong with that. I've always admired OSCON for the diversity of developers and languages.

Below is a list of my entries for all the sessions I attended.

If you attended OSCON, did you enjoy the show? What was your favorite session? I'd love to hear other's impressions of the conference and how it could be improved.

Posted in Open Source at Jul 25 2008, 10:05:08 AM MDT Add a Comment