Raible Designs

How do I become a programmer?

Yesterday, I received a message from a friend, asking about how to become a programmer. It's not the first time I've been asked this. In fact, this summer I've been asked by several friends how to get into the field. It seems that as people grow older, they see the lifestyle of working remotely and enjoying their job as an attractive thing to do. In yesterday's case, this friend is a mom that now has her days free because all her kids are in school. Here's what she wrote:

Now that my girls are both in school full day, I've been thinking about taking some programming classes. It's something I started to do while I was working at [ABC Company], but obviously didn't pursue once I quit to have kids. I'm thinking of getting my MIS in web development or specializing in designing apps if that's even a thing? Anyway, what languages would you recommend I concentrate on? JavaScript, Python? Lastly, is there a particular school you would recommend? I can't afford DU on my stay-at-home-mom salary, or even Regis which is where I started when I was getting tuition reimbursement. I was hoping I could do most of my education online while the kids are in school? Any advice or words of wisdom would be greatly appreciated!

Since this is a common question I see, I figured I'd publish my answers here, and get some advice from y'all too. Here's my response:

Her response was interesting, as she thought she might need a CS degree to even get a programming job.

Coincidentally I looked over many of these coding sites yesterday but wasn't sure if I needed an accredited diploma. It sounds like it's more important that I just get some experience.

From my experience, a college degree matters, but not a CS degree. I told her people skills make programmers stand out and she's a witty person that certainly has those. What's your advice as a programmer? What would you tell people to do if they want to break into the field?

More importantly, if you're on the hiring side, what would it take for you to hire a 40-something person with no programming background? If they've been studying for six months and have really good people skills, would you hire them for a junior position?

Life Update: The Bus Project, New Gigs, New House and More

I've written a few Life Update blog posts in the past and it seems appropriate to write another one today. A lot has happened since I wrote about our trip to Syncro Solstice 2015 in Moab. First of all, let's talk about the most exciting one: The Bus Project.

The Bus Project
The last time I wrote about The Bus, it'd just arrived at Sewfine to have the interior installed. From the get-go, I knew this was going to be a good experience. I've been talking with the owners (Carol and Mike) for years about the project. Seeing the knowledge they had about VWs and knowing it was in good hands brought a sense of calmness over me. They estimated it'd take 4-8 weeks to finish and it ended up taking 12. I'm proud to say it left Sewfine yesterday with a completed interior.

In mid-May, we took The Bus to its first show: VWs on the Green in Littleton. Sewfine had completed the driver's seat and ragtop. I got license plates and insurance and was planning on driving it to the show. However, Mike pointed out that the engine compartment wasn't sealed and the engine might get really hot on the 10-mile drive (because it's an air-cooled engine). I agreed to trailer it instead and rented a car hauler from U-Haul.

Best Practices for using Foundation with AngularJS Revisited

A couple weeks ago I wrote about using Foundation with AngularJS. Based on research I'd done, I concluded that it was best to use Foundation for Apps for any webapps my client created and Foundation for Sites for any websites (e.g. a WordPress-based intranet).

After doing my initial research, I did some prototyping with Foundation for Apps (F4A). What I discovered is that F4A does not include all the same components as Foundation for Sites (F5). For example, the top-bar and dropdown functionality are missing. I posted my issues to the Foundation Forums.

The response I received:

It should work. You would need to copy over all the Scss and global mixins that you used in top-bar or at least all the output CSS from it. Otherwise there is no reason the components won't fit into the grid.

I was able to import Foundation for Sites into my project by adding it to bower.json:

  "dependencies": {
    "foundation-apps": "~1.0.2",
    "foundation": "~5.5.1"
  }

After doing this, I added the new path to Gulpfile.js:

var sassPaths = [
  'client/assets/scss',
  'bower_components/foundation/scss',
  'bower_components/foundation-apps/scss'
];

After making this change, the top-bar rendered and my dropdowns worked. Since there was no jQuery in the page, I thought this might be a viable option. However, Jason Demitri quickly pointed out it probably wouldn't work with mobile. He was right.

While using F4A, I noticed that its components, and much of its look-n-feel, was different than F5. If you look at its Email App template, you'll see it looks kinda like a mobile app, even in a desktop browser. After trying F4A myself, I decided that F4A wasn't for us. First of all, it doesn't seem to provide a consistent look and feel with a website that's written using F5. Furthermore, F4A only supports IE10+. In the healthcare industry, there's a lot of older browsers out there, so my client needs to support IE9 as a minimum.

For these reasons, I decided to try Angular directives for Foundation. I took a prototype I'd written with F5, removed its JavaScript, added Angular Foundation + Foundation dependencies to bower.json, added references to the respective scripts in index.html and added 'mm.foundation' as a dependency in app.js. The experiment worked beautifully and I was quite happy with the results. I shared my findings with the team and we decided Angular Foundation is the best way to integrate Foundation and AngularJS.

F4A is pretty new and I imagine it'll add more of F5's features as it evolves. However, I don't know if the two will ever be so similar that they can live side-by-side and allow a seamless experience for users. If you're interested in mixing F4A and F5, you might want to watch Jason Demitri's foundationUltra. This project combines Angular Foundation, Foundation for Sites, Foundation for Apps and Font Awesome. You can see a demo at http://relutiondev.github.io/foundationUltra/.

How to ReactJS and Tooling is Awesome at HTML5 Denver

Last night, I had the pleasure of attending the HTML5 Denver Meetup with two talks by Will Klein. I was motivated to attend because React has been on my radar for a while and Will's first talk was titled How to ReactJS. Will's presentation doesn't show the real meat of this talk, which contained lots of live coding. Will started with a static webapp, then converted it to use React bit-by-bit. His live coding was greatly helped by the fact that he had 3-4 co-workers in the room, so there was a sense of pair programming when things didn't work. During the presentation, he mentioned the JavaScript Jabber Podcast on React. I listened to it this morning, and I recommend it if you want to learn about the history of React.

Will's second talk was titled Tooling is Awesome. In this presentation, he showed us how to use npm and webpack. Again, the presentation doesn't capture the vast amount of knowledge demonstrated during the live-cli session. I hadn't heard of webpack before, so I was pumped to learn about it. If you need to complete/translate to JavaScript or CSS from another language, chances are that webpack will work well for you. During this demo, Will converted the previously developed React code to require/export modules, as well to do transpilation using webpack's jsx-loader. He also mentioned Keith Cirkel's How to Use npm as a Build Tool. If you're just getting started with JavaScript development and don't want to learn tools like Grunt or Gulp, this article will help you use npm as your only build tool.

Even though you can't experience the live-coding that happened last night, the code has been posted to GitHub. If you're looking to have talks about developing with React, I'd suggest contacting Will. He delivered great talks on subjects I've been keen to learn more about. Thanks Will!

In other Denver-related tech news, ThingMonk is coming March 3-4 and HTML5 Denver has lightning talks on March 23rd. ThingMonk is "a meeting of the tribes for people building the Internet of Things" and is sure to be a great conference. The Redmonk crew is always fun to hang out with and knows how to create a conference. Did I mention it's at a distillery?! The lightning talks in March are always a great time too. You can really learn a lot in a short period of time and it's a great way to share knowledge about cool technology you've recently used. Heck, you could attend ThingMonk, then create a lightning talk about what you learned for HTML5 Denver!

Converting an Application to JHipster

I've been intrigued by JHipster ever since I first tried it last September. I'd worked with AngularJS and Spring Boot quite a bit, and I liked the idea that someone had combined them, adding some nifty features along the way. When I spoke about AngularJS earlier this month, I included a few slides on JHipster near the end of the presentation.

This week, I received an email from someone who attended that presentation.

Hey Matt,
We met a few weeks back when you presented at DOSUG. You were talking about JHipster which I had been eyeing for a few months and wanted your quick .02 cents.

I have built a pretty heavy application over the last 6 months that is using mostly the same tech as JHipster.

• Java
• Spring
• JPA
• AngularJS
• Compass
• Grunt

It's ridiculously close for most of the tech stack. So, I was debating rolling it over into a JHipster app to make it a more familiar stack for folks. My concern is that it I will spend months trying to shoehorn it in for not much ROI. Any thoughts on going down this path? What are the biggest issues you've seen in using JHipster? It seems pretty straightforward except for the entity generators. I'm concerned they are totally different than what I am using.

The main difference in what I'm doing compared to JHipster is my almost complete use of groovy instead of old school Java in the app. I would have to be forced into going back to regular java beans... Thoughts?

I replied with the following advice:

JHipster is great for starting a project, but I don't know that it buys you much value after the first few months. I would stick with your current setup and consider JHipster for your next project. I've only prototyped with it, I haven't created any client apps or put anything in production. I have with Spring Boot and AngularJS though, so I like that JHipster combines them for me.

JHipster doesn't generate Scala or Groovy code, but you could still use them in a project as long as you had Maven/Gradle configured properly.

You might try generating a new app with JHipster and examine how they're doing this. At the very least, it can be a good learning tool, even if you're not using it directly.

Java Hipsters: Do you agree with this advice? Have you tried migrating an existing app to JHipster? Are any of you using Scala or Groovy in your JHipster projects?

AppFuse, Reduced

In November, I had some time off between clients. To occupy my time, I exercised my body and brain a bit. I spent a couple hours a day exercising and a few hours a day working on AppFuse. AppFuse isn't used to start projects nearly as much as it once was. This makes sense since there's been a ton of innovation on the JVM and there's lots of get-started-quickly frameworks now. Among my favorites are Spring Boot, JHipster, Grails and Play.

You can see that AppFuse's community activity has decreased quite a bit over the years by looking at its mailing list traffic.

Even though there's not a lot of users talking on the mailing list, it still seems to get quite a few downloads from Maven Central.

I think the biggest value that AppFuse provides now is a learning tool for those who work on it. Also, it's a good place to show other developers how they can evolve with open source frameworks (e.g. Spring, Hibernate, JSF, Tapestry, Struts) over several years. Showing how we migrated to Spring MVC Test, for example, might be useful. The upcoming move to Spring Data instead of our Generic DAO solution might be interesting as well.

Regardless of whether AppFuse is used a lot or not, it should be easy to maintain. Over the several weeks, I made some opinionated changes and achieved some pretty good progress on simplifying things and making the project easier to maintain. The previous structure has a lot of duplicate versions, properties and plugin configurations between different projects. I was able to leverage Maven's inheritance model to make a number of improvements:

Why I prefer IntelliJ IDEA over Eclipse

Over the last couple months, I've received a few emails asking why I prefer IntelliJ IDEA over Eclipse. They usually go something like this:

I keep seeing you recommending IntelliJ. I keep trying it intermittently with using Eclipse, but I feel like I'm missing something obvious that makes so many people think it's better. Granted having the usual plugins incorporated is nice, but other things like the build process and debugger sometimes seems a step back from Eclipse. Could you please blog a '10 reasons why I love IntelliJ' or point me to something that would clue me in?

I grew to love IntelliJ for a few reasons. It all started in 2006 when I decided to migrate AppFuse from Ant to Maven. Before that, I was a huge Eclipse fan (2002 - 2006). Before Eclipse, I used HomeSite, an HTML Editor to write all my Java code (1999-2002). Eclipse was the first IDE that didn't hog all my system's memory and was pleasant to work with.

The reason I started using IntelliJ in 2006 was because of it's multi-module Maven support. Eclipse's Maven support was terrible, and m2e hasn't gotten a whole lot better in recent years AFAIK.

Back then, I used to think everything should be built and run from the command line. A couple years later, I realized it was better to run tests and debug from an IDE. Now I'm more concerned with the ability to run tests and debug in an IDE than I am from the build system.

In 2009, I started doing a lot more front-end work: writing HTML, CSS and JavaScript. I also started digging into alternate languages for these: Jade, GWT, CoffeeScript, LESS, SASS - even Scala. I found IntelliJ's support, and plugins, to be outstanding for these languages and really enjoyed how it would tell me I had invalid JavaScript, HTML and CSS.

My original passion in software was HTML and JavaScript and I found that hasn't changed in the last 15 years. AFAIK, Eclipse still has terrible web tools support; it excels at Java (and possibly C++ support). Even today, I write most of my HTML code (for InfoQ and this blog) in IntelliJ.

In reality, it probably doesn't matter which IDE you use, as long as you're productive with it. Once you learn one IDE well, the way others do things will likely seem backwards. I'm so familiar with debugging in IntelliJ, that when I tried to use Eclipse's debugger a few weeks ago, it seemed backwards to me.

In a nutshell: the technologies I've worked with have been better embraced by IntelliJ. Has this happened to you? Have certain technologies caused you to use one IDE over another?

This site now powered by Java 8, Tomcat 7 and Wufoo Forms

I recently upgraded this site to use the latest version of Apache Roller. It was a minor release (5.0.3), but I figured I'd document the steps in case "early onset" comes soon. First of all, to download raibledesigns.com and get it running locally, I perform the following steps:

1. Backup everything using ~/bin/backup.sh on raibledesigns.com
2. scp backup file to local hard drive and expand
3. Copy ROOT, skins and repository directories to local webapps
4. Make sure activation, mail, mysql and jta JARs are in $CATALINA_HOME/lib
5. Copy roller-custom.properties from raibledesigns.com's $CATALINA_HOME/lib
6. Copy context files from hosted $CATALINA_HOME/conf/Catalina to local directory
7. Import database and change roller-custom.properties to match local credentials

Next, to upgrade to the latest Roller release, I do the following:

1. Download latest Roller release and expand
2. Copy JARs (from WEB-INF/lib) to existing install (to upgrade dependencies)
3. Delete any lower-versioned JARS from WEB-INF/lib directory
4. Copy JSPs (from WEB-INF/jsps) to existing install
5. Run database migration scripts from WEB-INF/classes/dbscripts
6. Use a diff tool (like SmartSynchronize) to compare new vs. existing
7. Test and troubleshoot (if there's startup errors)

This process has worked well for the last 10 years, and it's been in my head the whole time. It's bound to escape someday.

Contact Form Enhancements
In addition to upgrading Roller, I also upgraded Tomcat 6 to Tomcat 7.0.52. In doing so, I found Jakarta's Mailer Taglib doesn't work with Tomcat 7. As you can tell from the aforementioned thread, I've known this for several years. That's the only thing that's stopped me from upgrading Tomcat the past couple years.

Developing an iOS Native App with Ionic

In my current project, I've been helping a client develop a native iOS app for their customers. It's written mostly in Objective-C and talks to a REST API. I talked about how we documented our REST API a couple days ago. We developed a prototype for this application back in December, using AngularJS and Bootstrap. Rather than using PhoneGap, we loaded our app in a UIWebView.

It all seemed to work well until we needed to read an activation code with the device's camera. Since we didn't know how to do OCR in JavaScript, we figured a mostly-native app was the way to go. We hired an outside company to do iOS development in January and they've been developing the app since the beginning of February. In the last couple weeks, we encountered some screens that seemed fitting for HTML5, so we turned back to our AngularJS prototype.

The prototype used Bootstrap heavily, but we quickly learned it didn't look like an iOS 7 app, which is what our UX Designer requested. A co-worker pointed out Ionic, developed by Drifty. It's basically Bootstrap for Native, so the apps you develop look and behave like a mobile application.

What is Ionic?
Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps. Built with Sass and optimized for AngularJS.

I started developing with Ionic a few weeks ago. Using its CSS classes and AngularJS directives, I was able to create several new screens in a matter of days. Most of the time, I was learning new things: how to override its back button behavior (to launch back into the native app), how to configure routes with ui-router, and how to make the $ionicLoading service look native. Now that I know a lot of the basics, I feel like I can really crank out some code.

Tip: I learned how subviews work with ui-router thanks to a YouTube video of Tim Kindberg on Angular UI-Router. However, subviews never fully made sense until I saw Jared Bell's diagram.

To demonstrate how easy it is to use Ionic, I whipped up a quick example application. You can get the source on GitHub at https://github.com/mraible/boot-ionic. The app is a refactored version of Josh Long's x-auth-security that uses Ionic instead of raw AngularJS and Bootstrap. To keep things simple, I did not develop the native app that wraps the HTML.

2013 - A Year in Review

2013 was an amazing year: Trish and I got married, celebrated on a 'round-the-world honeymoon and invested in a new 4x4 VW Bus. I finally achieved my goal of vacationing 25% and I got to spend more than two months in the presence of my wonderful parents.

For this Year in Review post, I'll use the same format as I did last year:

• Professional
  • Speaking
  • Projects
• Personal
• 2014

Professional

For the last few years, I've generally had one client per year. That changed this year when my contract with Oracle ended in May. Fortunately, I had the opportunity to develop a cool dashboard application before I finished. I wrote about it in a four-part series.