Categories: AngularJS

Flexbox layout with Angular and Flex-Layout

What are you using to create a grid layout with Angular? Whatever it is, Bootstrap or Material or something else, you should try the CSS flexbox layout system instead. Using the flex-layout Angular module you can create a responsive web app effortlessly.

Angular responsive mobile layout using flex-layout

They have a demo online that shows all sorts of different layouts that you can create using flex-layout.

To use it with Angular, after installing it, you just have to use the fxLayout and fxLayoutAlign attributes.

Angular responsive layout using flex and layout-wrap and the flex-layout module

flex-layout Code Example

Here’s an example of using flex-layout to create a layout with paragraphs that are hidden based on the resolution of the screen (whether it’s a phone, tablet or desktop):

<div fxLayout="row">
  <div fxFlex fxFlexOrder="-1">
    <p>This is an example of a flexbox CSS layout using Angular</p>
  <div fxFlex fxFlexOrder="1""3">
    <p fxHide="false">Hello</p>
    <p fxShow="false">world!</p>
  <div fxFlex fxFlexOrder="2">
  <div fxFlex fxFlexOrder="3""1">
    <p fxHide="false">Another way</p>
    <p fxShow="false">to say hello world</p>

Now you are not constrained by Bootstrap or Material or some other layout module, you can use CSS flexbox to lay out a responsive and elegant Angular grid layout!

Want to learn more AngularJS?

Check out the resources at Learning AngularJS

Categories: Podcast

Designing Better Processes to Get Things Done

In this podcast we consider how to design better processes (such as business processes) and contemplate alternatives to a business process that will achieve certain criteria. Process design is a way to examine business (and personal) processes for efficiency and effectiveness. Process design is something that not enough people engage in, because of the day-to-day work that needs to happen to make the current process continue to function. Sometimes, we get tunnel vision and need a different process design, or perhaps we need to make the current process even more efficient. Whatever the case, designing better processes requires reflecting on existing business processes and coming up with improvements. Listen to the podcast or read the transcript below for more information and examples of process design.

The Rudolf Podcast is a podcast by Rudolf Olah covering technology, leadership, project management, web development and more.

If you want to be a high performer in your field, you have to optimize your processes.


Hey there listeners! Welcome to the latest episode of the Rudolf Podcast! Today we’re going to be talking about how to design better processes to get things done.

When you work on a project, you can break it down into steps. Let’s take the example of writing an article. You would break that down into three steps. Step number one is researching the information and facts and statistics for the article. Step number two is creating a first draft. And the third step is reviewing and refining that draft.

Now let’s try a different approach to writing an article. We could do a little bit of research and then write a paragraph. Then we can do a bit more research and write the next paragraph. And then, we can go back and revise the first paragraph.

In the first process for writing an article we have the three steps of researching, writing and revising. Now in this second process for writing an article, we have an iterative loop of researching, writing and revising. Each step in the second process is each individual paragraph with the final step being the completion of the article.

Now, which process is more efficient? Which process is better designed? Well, it depends on what you’re trying to achieve.

If you’re trying to achieve scale, and have the resources to hire a team the first process design is better. You could have, let’s say, five researchers conducting research for many articles, and a whole newsroom of writers putting the facts together into many articles. Then you can have a few editorial staff to help edit and revise and refine the articles before publishing. It may take a bit longer to write the article but the trade-off is worth it. You will have multiple articles ready.

If you’re trying to publish your article quickly, the second process is better. In this process you write a good first paragraph with great research and publish it. Then you can add more information and refine the article further. Most news sites and blogs do this in order to deliver breaking news fast.

I used writing an article as an example but designing a better process can apply to web development teams. For instance, the idea of a full stack developer who can write both frontend and backend code has gained popularity. On top of that they’re expected to be web designers. However, this can be inefficient for larger teams, where specialization leads to more in-depth knowledge and possibly faster development.

If you want to be a high performer in your field, you have to optimize your processes.

Think about your business and personal life. What processes are you using to get things done? Choose one and try to design a better, more effective and maybe more enjoyable process.

  • Is there a way to make whatever process you’re optimizing more efficient or less stressful?
  • Is there a way to split up that process so that it can be delegated to others so you can scale up?
  • Is there a way to batch many small tasks that are part of the process so you can maximize your time?

Think about these questions and take a bit of time to examine and improve your processes to get more things done. And with that, check out for more articles and information on project management, leadership, web development and more. Thanks for listening to this episode of the Rudolf podcast.

Categories: Life

Google and Facebook Diversifying Away from Advertising

Rick Webb wrote an article last year on how Google and Facebook will eventually suffer from a massive devaluation. This is because while they dominate the digital advertising market, they cannot displace TV advertising easily.

There’s an interesting comparison to traditional media companies, Disney, Time Warner, and Viacom:

Disney made $55 billion in revenue last year. Of that revenue, just $8.5 billion of it came from advertising, or just 15 percent. This includes all the revenue from ABC, the various Disney channels, ESPN, and A&E.

A full 17 percent of Time Warner’s revenues come from HBO alone, making its ad-to-non-ad ratio better than either Facebook or Google. In total, just 43 percent of Time Warner’s revenue comes from advertising. For Viacom, it’s 38 percent.

“Google’s $350 billion haircut”, Rick Webb

Google and Facebook are heavily reliant on digital advertising for their revenue and this puts them at a disadvantage unless they start to diversify their income streams. Right now, if you are trying to get your product or service in front of consumers on the internet, you’re going to use Google or Facebook to advertise. This makes them powerful, but also vulnerable as they extend their reach into other marketplaces and try to dismantle TV’s dominance for brand advertisement.

According to the article, tech companies do not have an inherent advantage when it comes to content production. Disney, Time Warner, etc. already make a lot of content and own the equipment, spaces, software, and hire a huge number of script writers and actors and producers to create their content.

Tech companies, like Facebook and Google and Netflix and Amazon, who try to produce content will basically be cloning the processes that Disney and others already have in place. They will be running behind in the marathon race to create more content that can be bundled with ads (and specifically brand advertising).

Traditional Content Production vs. User Generated Content

However…what the article forgets is that Google and Facebook are sitting on possibly the largest amount of UGC (User Generated Content) in comparison to all other companies.

Google has YouTube, which has a massive amount of user-generated content, over 5 billion videos uploaded with over 1.9 billion MAU (Monthly Active Users). Facebook has Instagram which has 1 billion MAU and over 100 million photos and videos uploaded.

There is absolutely no way that Disney and other media companies can come close to that amount of content production. The traditional process is to hire producers, script writers, actors, wardrobe and makeup artists, and a whole set of staff to produce many 30 minute episodes or 1 to 2 hour movies. While it’s possible to make this process very efficient, it can never match the scale that Google and Facebook have.

Platforms that produce user generated content (UGC) vs TV/movie production studios. UGC scales in ways that the traditional TV/movie production process cannot.

Instead of relying on producing hit after hit, Google and Facebook can diversify and rely on their users/creators to produce content and let the users worry about producing hit after hit. Netflix and Amazon do not have that option, they have very little user-generated content which is why they are going down the same path as traditional media companies and why they do not have an inherent advantage.

YouTube and Instagram are the content production places of the future. If Google and Facebook double-down on making it easier for users/creators to create new content, and making it easier to produce higher quality content that can compete with the highest quality content from Disney, HBO and traditional media companies, then Google and Facebook will own the future and disrupt TV advertising.

Also, I mentioned Amazon above. They actually do have a way to get a lot of user-generated content and rely on their users/creators to produce lots of content: Right now it’s for gamers and video game streaming, but Twitch has roots in which was made for life/selfie streaming which means it’s possible for more content like talk shows and selfie streams to start appearing on Twitch, which would put it directly in competition with YouTube and Instagram.

Future of Digital Ads and Content Production

This is why Google and Facebook have such high valuations. As long as they treat users/creators with respect (fewer privacy scandals, better content production tools) and shower them in advertising dollars and give good ROI to advertisers, they will continue to dominate the digital advertising platform and eventually pose a significant threat to TV advertising and gain lots of market share in brand advertising. I think brands will have to start getting used to going niche though and finding their true fans and followers instead of massively advertising to everyone.

Follow me on Twitter, Facebook, and connect on LinkedIn

If you think this advice is interesting and want to discuss it further or you would like to talk about web development training and workshops or digital marketing and ecommerce, follow me on all the social networks:

Categories: Utilities

UI Prototyping Tools

In this post I wanted to look at some UI (User Interface) prototyping tools. These are tools that are extremely important for individual web developers and for large teams of developers. For a solo developer, the prototype user interface shows what an app (whether it’s a desktop or web or mobile app) should look like. For a large team, it defines a vision that everyone can align around.

Product managers and product designers will want to get familiar with these tools because they are essential to developing mobile apps, web apps and websites

Here are the tools that I have used for prototyping user interfaces.


Balsamiq is the original user interface prototyping tool. It includes stencils and examples of user interface items like buttons and tables and menus.

The key feature, at least for me, is that the interface looked like a sketch and not the final product, the interface really looks like a prototype. This makes it easier to sketch out ideas and not be too tied to one idea for an interface and leads to rapid iteration.

Balsamiq is now available in the cloud and for Google Drive (one of the online business tools that I use) along with the original desktop version. It’s also available for JIRA and Confluence.

They now offer courses for aspiring UI/UX designers to learn how to develop wireframes for products:


Pencil: an open source tool similar to Balsamiq and it comes with stencils for designing Android and iOS apps along with stencils for designing web apps.

It’s possible to combine Pencil with a tool like InVision to make an interactive set of wireframes for UI prototyping. Check out SourceContribute for a more in-depth look at the usefulness of Pencil as a UI prototyping tool.


InVision is a web-based tool that integrates with the workflow of designers who use tools such as Sketch and PhotoShop. With InVision, you create wireframes for your user interface in graphic design apps like Photoshop (or Illustrator or GIMP or Inkscape) and then upload it.

InVision lets you connect buttons and clicks on the user interface to other screens. This allows you to create an interactive prototype to see how navigation between screens will work and to test the UI’s effectiveness and see how the UX (User Experience) feels.

For product designers, InVision helps you work with product managers to rapidly iterate on the interactivity and the design of a feature or the entire product.

Categories: Life

Latest Updates – June 2018

Here are some of the latest updates:

  1. Passed the CAPM Certified Associate in Project Management exam, which means that yes I can manage projects and lead your team.
  2. Produced a (short) video on using Local Storage for caching with AngularJS (this is a supplement to the article I wrote about the subject).
  3. Updated the article on evaluating projects with an infographic
  4. My presentation at PyCon Canada 2017 on Python as a Philosophy has been viewed thousands of times! (Update: the re-posted video at 8,000+ views was removed, the official PyCon Canada link is still up)
  5. Wrote an article on reactive programming with Ruby, Python and JavaScript

More blog posts on Angular, Ruby on Rails, and Reactive Programming are on the way along with articles on coaching and tech leadership!

Categories: Web Dev Training

Reactive Programming with JavaScript, Ruby and Python

Reactive programming is a concept that is finally gaining some popularity among programmers. It makes it easier to think in data flows and to manage and work with them. Instead of imperative programming, you’re thinking about code as a series of processes that take place on streams.

This is similar to the conceptual shift to map/reduce thinking. But it takes those ideas further. You’re doing a map/reduce and then connecting the data to other filters and maps and creating multiple pipelines so that the right data gets to the right place.

For example, when a user clicks a button in a web app (or desktop app), that click event can be propagated through the system to all the subscribers that are listening and waiting for that event.

When working with the Angular frontend web framework, that latest versions are now using RxJS, the reactive programming library for JavaScript. It is the underlying framework for working with events. Previously in AngularJS 1.x you would use the broadcast and emit system to act on events.

Reactive Programming

With Reactive, you have a generalized library for working with observables and subscribers which can work well with other libraries and other JavaScript code.

In Ruby and Python, other concepts have held sway for a long time, so here are some examples on how to do reactive programming Ruby and how to do reactive programming in Python.

These are basic examples of filtering and creating observables, think of them as the equivalent of “Hello World”..

You can find a list of other languages that are supported with a reactive library on the ReactiveX website.

RxJS: JavaScript Example

Let’s begin by creating an observable:

var numbers = [1,2,3,4,5];
var all = Rx.Observable.from(numbers);

This observable is being created from a list of numbers. It’s possible to convert other types of lists into Observables.

Next we want to print out all of the numbers. We do this by subscribing to the observable with a function:

all.subscribe(function(number) {
console.log("The number is " + number);

Right now this looks like a for loop, but remember that observables are meant for events in time. There could be milliseconds or seconds or minutes between each event that the observable is emitting to the subscriber.

Next, let’s create a new flow of data by filtering all of the numbers so we only receive even numbers in our subscriber:

var only_evens = all.filter(function(number) {
return number % 2 === 0;

Again we print out the numbers and you will notice that we only print out even numbers:

only_evens.subscribe(function(number) {
console.log("This number is even: " + number);

That was a simple example of creating two flows; one with all values, and a filtered flow of values.

Now imagine in your next web app, a user does any action. That action is sent through an observable and we can have a subscriber that waits for a specific button click action or subscribes to any button click.

Then imagine a 3rd party API or REST API whose response you’re waiting on, you are subscribing to the observable and filtering for certain responses straight for display in your user interface.

There is a lot of power in reactive programming and it makes diagramming the process of UI event flow much easier. Each new user interaction or display is just another flow of events to be filtered and subscribed to.

RxRuby: Ruby Example

Now let’s do the same thing but this time in Ruby with RxRuby.

First we create the observable and print out all the numbers:

require 'rx_ruby'
numbers = [1, 2, 3, 4, 5]
all = RxRuby::Observable.from_array numbers
all.subscribe do |number|
puts "The number is #{number}"

Then we filter the observable and print out the filtered values:

only_evens =
only_evens.subscribe do |number|
puts "This number is even: #{number}"

One interesting note when creating your observable, you should use from_array because simply using from will only emit the flow of values once. I’m not sure why RxRuby has this particular behaviour.

RxPy: Python Example

And now let’s do it all over again but with Python and RxPy.

We create the observable with all values and print them out:

import rx
numbers = [1, 2, 3, 4, 5]
all = rx.Observable.from_(numbers)
all.subscribe(lambda number: print('The number is {}'.format(number)))

And again we filter the observable’s values to a subset and print those out as well:

only_evens = all.filter(lambda number: number % 2 == 0)
lambda number: print('This number is even: {}'.format(number)))

Please note that in the JavaScript example we used the operator “filter” and in the Python example. But in the Ruby example we used “select”. If you try and use “select” in the Python example you will get a list of boolean values instead of properly filtering the list. There are a few differences like this between each library.


This was a short introduction into reactive programming. There’s a lot more you can do and here I wanted to demonstrate that it’s possible to use Rx with more than just JavaScript. I’ve only seen it used in Java and JavaScript and thought it was time to write more examples of Ruby and Python so others can see that those languages can also benefit from Rx and Reactive programming.

Categories: AngularJS

Top 15 Awesome Tutorials To Learn AngularJS

AngularJS 1.x is more stable and mature and while Angular has taken off, there are many projects still using AngularJS. It still makes sense for web developers to learn AngularJS. In a few years that may change, but for now, AngularJS 1.x is still a viable alternative to React, Angular 7, Vue.js and Ember and other frontend web frameworks.

If you’re interested in other Angular and AngularJS resources, check out the Learning AngularJS page.

Here are the top 25 awesome tutorials to learn AngularJS:

1. The Official AngularJS Tutorial

In this tutorial provided by the team that developed AngularJS, you will learn how to create templates, components, and how to work with two-way data binding. Dependency injection is also introduced in the tutorial.

Read the official AngularJS tutorial.

2. Year of Moo: AngularJS Guide

In this guide from Year of Moo (which I’ve linked to before for their unit testing guide for AngularJS), you will learn how to create components and services and how models and directives work. It goes in depth on how modules are created within AngularJS for organization of projects.

Read the Year of Moo AngularJS Guide.

3. Beginning AngularJS in 7 days

While the website has a lot of ads, the information on it is very good and is a good beginner tutorial for AngularJS. It goes into specifics on how to use REST resources with the $resource module and how to make HTTP requests with $http.

What I like are the sections on filtering and sorting tables and form validation, two common tasks in web frontends.

Learn AngularJS in 7 days.

4. Todd Motto’s AngularJS Guide

Todd Motto is one of the top AngularJS writers and developers. His complete guide to AngularJS is also a good reference when working on a project. It begins with an overview of engineering concepts in JavaScript frameworks, moves on to services and controllers and goes in-depth on routes and the $http and $resource modules.

Read Todd Motto’s Comprehensive Guide to AngularJS.

5. AngularJS: Getting Started (PluralSight)

The courses on PluralSight are all very high quality and easy to learn from. They even offer an AngularJS quiz so you can gauge what your own skill level. In this course they show you how to build controllers and directives. In particular it shows how to use the ng-click, ng-repeat, and ng-model directives.

Watch the AngularJS Getting Started video course on PluralSight.

6. Building a Mobile App with AngularJS 1.6 and Ionic

In the video course, they cover how to build a mobile web app that can be deployed for iOS and Android using the Ionic framework.

Watch the Building A Mobile App With AngularJS 1 and Ionic video course.

7. Creating a Quiz with AngularJS

Test yourself by building a quiz web app with AngularJS! Or just build the quiz app and learn how AngularJS works. What’s nice about this course is that it not only shows you how to build the components and controllers for the app, it also shows you how to style the app and how to move from one screen to another and to carry over data.

Watch the Creating a Quiz with AngularJS 1 course on

8. Build a GMail clone with AngularJS

This is always fun, instead of a contrived project to build in order to learn AngularJS, you build a clone of an existing product. This was one of the best ways to teach game programming, making clones of popular games like Tetris or Super Mario World or Final Fantasy.

In the web development world, making a clone of Instagram (as I’ve done for Elm) or GMail with AngularJS as this course shows you, is an excellent way to learn a frontend web framework.

Read the tutorial to build a GMail clone with AngularJS.

9. Creating an app with AngularJS and Rails 4

In this tutorial, you learn how to create a Rails API that can be used with AngularJS. It shows you how to use the $http HTTP module to make requests to a backend server.

Read the beginners guide to a web app with AngularJS and Rails 4.

10. Hands-on AngularJS Tutorial

This tutorial shows you how to build an online movie booking app with AngularJS. There is a really good section on creating services.

Read the Hands-on AngularJS Tutorial.

11. Animate your site with AngularJS

Animations are important for a smooth user experience, and this tutorial explains how CSS3 animations can be used to enhance your AngularJS app.

Specifically, it shows you which directives have built-in animation support. Then it ends with walking you through how to create custom animations with JavaScript.

Watch the Animate Your SIte With AngularJS video course.

12. How to create animations with ngAnimate [article]

This article embeds code snippets of AngularJS so you can see the code in action and modify it and learn from it. It shows you how to animate a list of items, and how to show and hide validation messages for form validation.

Read the How To Create Animations With ngAnimate article.

13. AngularJS Routing Using UI-Router

Routing in an SPA (single page application) is how a URL is translated into the right controller and view to display in the app. For example, a router determines how to route /hello to the HelloController and /world to the WorldController.

The UI Router is more advanced than the router included with AngularJS which makes it powerful enough to be the default for many AngularJS projects.

Read the AngularJS Routing Using UI-Router article.

14. Learn AngularJS 1.x Interactively

CodeAcademy has an interactive way to learn AngularJS where you are given the code for the tutorials, it is explained and you’re free to edit it. The course is nice because it has both free form projects and quizzes to test your knowledge of AngularJS.

Learn AngularJS interactively.

15. AngularJS Data Modeling

This is an intermediate video course that shows you how to use caching in your models, how to add validation and manage validation through sub-classes.

It is a thorough course at 104 minutes and 13 lessons.

Watch the AngularJS Data Modeling video course.

Heilmeier’s Catechism

Heilmeier Catechism

When George Heilmeier was the director of ARPA in the mid 1970s, he had a standard set of questions he expected every proposal for a new research program to answer. These have been called the Heilmeier Catechism. It’s a good exercise to answer these questions for an individual research project, too, both for yourself and as a way to convey to others what you hope to accomplish.

A nice set of questions to ask yourself when doing research. They are part of Heilmeier Catechism, who was the director of research at ARPA.

They’re also questions you can ask when you’re working on something that could be turned into a research paper (which is a lot of things in the computer world unsurprisingly).

Or when you want to execute a marketing or sales project that relies on a new technology.

Update 2018:

heilmeier catechism research project steps

Example of using Heilmeier’s Catechism

Below we will explore each question that is part of the Heilmeier Catechism in the context of a software development team TeamSaas working on a SaaS product adopting GraphQL for the API.

The questions to ask: Heilmeier Catechism in an example context

1. What is the problem? Why is it hard?

In our example, TeamSaas needs to cater to multiple clients and consumers of their API and maintain a maximum payload size of some amount. This is difficult because different clients/consumers have different needs (some may need a lot of data, others may need less data). TeamSaas is aiming to minimize the payload size and give clients/consumers of their API only the data they need.

2. How is it solved today?

Today, TeamSaas would use a REST API.

3. What is the new technical idea; why can we succeed now?

GraphQL is the new technical idea, it allows a client/consumer of an API to select and filter data before it is passed back. The reason it can succeed now is that GraphQL has an integration with the database and framework and language that TeamSaas is using; there are also client libraries that can consume a GraphQL API and they are (relatively) stable. The main reason though is that there is enough adoption and resources aimed at making GraphQL implementable and stable.

4. What is the impact if successful?

In our example, the impact for TeamSaas is that they will be able to send the exact data that each client/consumer of their API needs; additional impacts include a cleaner codebase on their server-side and on the client-side since the data is handled through a GraphQL layer and the API response doesn’t have to be transformed in an awkward/hacky way.

5. How will the program be organized?

TeamSaas could organize their project with a client developer and backend developer prototyping and developing one or two API calls using GraphQL and then further expanding from there.

6. How will intermediate results be generated?

In our example, TeamSaas can use their prototype to generate API responses and operate the new GraphQL APi in parallel with the old REST API.

7. How will you measure progress?

Progress for TeamSaas’s switch from a REST API to a GraphQL-based API can be measured by the number of clients/consumers using the new GraphQL API and by the number of complaints there are. If there are more clients switching and there are few complaints/feedback, then things are going smoothly. Additionally, the payload sizes for each request can be measured and averaged and compared in the 90th to 99th percentile range to the old REST API to ensure payload sizes overall are smaller. The total payload sizes delivered over a week or a month could be measured, aiming for a decreased payload size total in comparison to the REST API.

8. What will it cost?

This is an exercise for the reader; the cost of the project depends on the tasks and time estimates and the team.