G'day! I'm Glen

The time has finally come!

After several weeks of scripting and code samples, the day has finally arrived to click record and get this show on the road. We’ve started recording this:

The good news is that I’m really happy with how this course has shaped up, and I think developers are really going to warm to it.

Inside this course we build a… TADA… Enterprise Timesheeting app called “Agile Times”. This app gives us a great showcase of everything PrimeNG.

We start out with learning about the Prime Grid system to create funky stats components for our Dashboard (thank you Font Awesome), then dive into a world of snazzy charting to get your motivated.

We then cover off all the common form controls people will want to use - all backed by Reactive Angular Forms to keep it real - along with matching DRY/low-ceremony validation techniques!

With some early wins up our sleeve, we dive into filterable, sortable, searchable, paginatable data grids. To make is a bit more real-worldy, but without the overhead of installing 3rd party Dbs, we back our grid with a sizeable IndexedDb (powered by Dexie) to give us that familiar ORM-styling querying that devs will probably be using. Plus we can marvel at Prime’s Lazy Loading magic which keeps it all zippy.

I’m deep into a Pluralsight course on PrimeNG, and have started to cover some of the niceties of PrimeNG charts.

The charting component is a wrapper around Chart.js, and one of the.. um.. interesting parts of the very cool Chart.js is that it has no default slice/bar colours.

Turns out this is a much requested feature and someone on that very thread went to the trouble of putting together a nice set of colours based around Google Charts.

But…

I don’t want to hand-assign the colours each time.

So..

The challenge: Write a function that will take an arbitrarily long pie chart dataset, and assign funky complimentary chart colours to each slice (so that the colour selection wraps around after depleting the set of funky colours).

Here’s my stab. First, setup a constant at the top of your TypeScript controller:

const DEFAULT_COLORS = ['#3366CC', '#DC3912', '#FF9900', '#109618', '#990099',
'#3B3EAC', '#0099C6', '#DD4477', '#66AA00', '#B82E2E',
'#316395', '#994499', '#22AA99', '#AAAA11', '#6633CC',
'#E67300', '#8B0707', '#329262', '#5574A6', '#3B3EAC']

Then inside the class, setup a routine to map the dataset into our set of default colours for each pie:

As you may know, I’ve been a big fan of PrimeNG for some time (and Primefaces before that!), so I’m super excited to announce that I’ve officially inked the paperwork and started working on a course for Pluralsight around PrimeNG.

I’ve done a bunch of YouTube training videos before, but have always wanted to try my hand at the Pluralsight training thing since I’ve always loved their style.

Pluralsight really do have a super high bar for production quality, so I’m looking forward to stretching out and leveling up my online training skills - which will also benefit my YouTube channel!

I’ve spend today digging into the sample code for the Charting module, where I’ll be teaching charting “from zero to hero” culminating with coding up real-time, mixed style charts like this bad boy:

As a side effect, I know finally understand switchMap() in RxJS! So much winning!

Anyways, can’t wait to get started recording. Will keep you all posted on the progress over the next two months or so.

Just a quick one for those struggling to get the PrimeNG charting components rendering. You might be importing the ChartModule just fine, and even setting up your component tags and data, but all you’re getting in the console is something like:

Error: Error in ./DashboardComponent class DashboardComponent - inline template:22:4 caused by: Chart is not defined

The bit of info you’re missing is that all of the PrimeNG charting components rely on you bundling Chart.js with your application. That’s the JavaScript library that supplies the Chart in Chart is not defined.

The easiest way to do that with Angular CLI is to first install the NPM package with:

npm install chart.js --save

Then bundle the library with your build by editing the angular-cli.json file in your root directory to include it in the scripts array like so:

"scripts": [
    "../node_modules/chart.js/dist/Chart.js"
  ], 

With those in-place, you’ll be ready to Chart up a storm.

Have fun!

I keep solving this problem, so it’s time to write it down for my future self!

I know your story. You want to use jQuery inside an Angular CLI app, but the whole WebPack magic is turning everything bad.

Or perhaps things are even more complex. You want to use a 3rd party product, like Semantic UI, which augments existing jQuery objects in global scope, from your Angular CLI app, and it’s not happening for you.

Your web searches are awash with old advice.

This is the page you have been looking for.

Here’s something that works with 1.0.0-beta.31 of the CLI (and probably earlier WebPack-based versions too).

Watch the vid on YouTube, or scroll down for the steps in text form

First, npm install the libraries you need

In my case, I’m working with Semantic UI. This framework both has CSS and JS component - and depends on jQuery for heavy lifting.

After a day of Observables on Day Two, the final day of the Masterclass was focused around forms and routing.

Here’s my typo-laden gitlog for the day to give you an idea of content pace and the type of exercises we worked on:

Both Kinds of Music: Template and Reactive forms

A good portion of the day was spent working with both Template-Driven and Reactive Forms in Angular - and getting a really good feel for where each of them shine.

I’ve never been much of a fan of Reactive Forms - they seemed like a separation of concerns that I didn’t want to separate - but I have a new respect for them after yesterday (I particularly love the idea of being able to unit test that validation magic in a vanilla unit test).

I now like both approaches - and look forward to road testing both in larger forms apps to give me a real feel for what has the lowest friction.

Here’s the vanity screencast of yesterday’s hacking efforts:

We also wrote our first custom validator - and used it in both Template and Reactive approaches. Validation code is another area where Reactive’s FormBuilder really shines - super straightforward and clear to read afterwards.

Wow. Things just got seriously master-level at the Masterclass! Day Two really did build on Day One, kicking off with the wonders of the Async pipe.

It was actually great to start out with Async Pipe, since it let us convert our little Contacts application to an Observable architecture and ditch all the dodgy *ngIf code and null checking we’d crammed into to play nice with the async http calls.

Getting Serious With Observables

Async was really the theme for the day, and the exercises came steadily throughout the day to make sure we were grabbing the concepts as they were introduced. There’s a lot to love about Observables, but it took the day to really appreciate what they bring to the table.

Here’s my typo-laden gitlog for the day to give you an idea of content pace and the type of exercises we worked on:

Making friends with RxJS - switchMap(), takeUntil(), Oh My!

Christoph and Thomas took us on a tour of the hardcore range of Rx operators that are helpful when working with Observables. Even with marble diagrams, some of these concepts pretty much blew our minds!

Major. Paradigm. Shift.

As a last mic drop before the switchMap() exercise Christoph told us “you’ll work it out” - then pointed it at the lab to learn-by-doing.

Well, yesterday was Day One of the thoughtram Angular Masterclass in Sydney and I’m having a ball and learning heaps.

I thought I’d write up a quick retro to give people an idea of the experience.

On our first day we build a thing! And that thing did CRUDing operations on RESTful service. And did Databinding and all that Angular-ish goodness.

In fact, the first day is called their “Jumpstart” day where you cover all the basics to get everyone on the same page.

This is what I spent the day building:

thoughtram’s Approach

I’ve always been a fan of the “Training from the Back of the Room” approach (actually all of Sharon Bowman’s stuff is awesome), and the thoughtram guys definitely train in that school - 20 minute intense “downloads” of information with Q&A, followed by labs to put it all into practice.

All their training presentation notes are browser-based and accessed by a participant login on their website. The notes are updated for the life of the course (which is awesome!)

Ditto for the lab exercises - which are all hosted on Github repos and constantly updated with tweaks.

I’ve had a cracker this year. It might well have been one of the best years of my life!

Didn’t write a book. Didn’t have a baby. Didn’t ship a world-beating app. Didn’t speak at any big gigs. Didn’t finish a marathon. Didn’t make a ton of money. Or even have something go viral.

Nope. None of those things.

This year I took bold actions toward things that matter to me.

That is all.

And that is more than enough.

Creating Software.

Wrote some great software for clients that makes their lives easier and more productive. Even delivered my own hobby app to make my own life easier.

Creating Video.

I’ve been a huge fan of Nexus for inhouse proxying of Maven artefacts for years. I’ve used it at heaps of government sites where it was a hassle to get internet access through content proxies, and it’s been a life saver. But you might not know that Nexus is also awesome for proxying NPM, Bower and even Docker images.

If you need to configure your local npm to point to Nexus, there’s awesome docs on that.

However, I’ve now started experimenting with yarn, Facebook’s drop in replacement for npm (but quite a bit faster!), and so was naturally wondering how to configure it to use my local Nexus proxy.

Turns out it’s simply a matter of:

yarn config set registry http://localhost:8081/repository/npm-central/

And you’re off and running. I thought I would write it down so I can google it later!

You can confirm that life is great, but tailing your /nexus/log/request.log and watch the traffic flowing (or try a yarn install --verbose and sit back!).

Have fun!

I have to say that Push Notifications are just super cool.

Think how cool would it be to make your Mobile ding with a custom sound every time a really important event happened in one of your systems?

• Just sold another one of your apps? Cash Register Ding.
• Just crashed your production server? Death Spiral ding.
• Just crossed an 100k subs? Happy Sound ding.

Way cooler than SMS :-).

And it turns out adding such features into your app is totally trivial thanks to the good folk at Pushover.net. And today I’m going to show you how!

Enter Pushover

Pushover is a web service (and suite of platform specific mobile apps for Android, IoS and the Browser) that lets you easily push Notifications to all (or one) of your registered devices whenever you would like.

It’s a one-off $5 subscription cost per platform, then you’re free to send up to 7500 notifications month forever. That’s a lot of events!

Integrating with Ionic 2 or Angular 2 (or whatever)

And I’m so there!

It’s no surprise to any of my friends that I’ve doubled-down hard on Angular 2 this year. I built PuppyMail to learn all about serverless Angular apps with Firebase, taught a 21 days of Angular YouTube course, spoke at a Meetup on Angular 2 for Java Devs, and have lately been diving in hard on Ionic 2 (think of Ionic 2 as Angular 2 for Hybrid Mobile apps).

But there’s so much more to learn! I’m only scratching the surface of Observables, Forms, Unit Testing, DI scoping and lots more!

As you may know, I’m a massive fan of Hobby Projects for levelling up. I even did an eight-part YouTube Series on Shipping Your Hobby Project in 30 days. But I’m also a massive fan of osmosis in community. Of hanging out with guys and girls that are further along the road than you, and leveraging off that talent and experience.

So when I heard the legends from Thoughtram are coming to Sydney to teach their Angular 2 Masterclass I was super pumped! These guys are committers on Angular 2, Angular Material, and prolific bloggers - you’re probably read some of their (hardcore) blog posts while researching Angular 2 stuff.

This is going to be an awesome opportunity from best-in-class Angular 2 folk in our own backyard - from Jan 9-11. Can’t wait to hang out with them! (and not sure why this is the first I heard of it - but now you know too!).

If you live in AU/NZ and are keen for a Sydney trip, why not come and hang out! There are still tickets!

Where to stay?

I’m totally convinced that the best way to learn anything is through having a hobby project. I’m so convinced about that, that I created a free 8-lesson YouTube course around that topic!

Well I’ve just finished “walking the talk” of that course - a 31 day streak of moving a hobby project forward from zero to basic features complete:

Learning Goals

I developed a small Angular 2 application, with a few very simple goals:

• Learn about using Firebase for Backend Storage (essentially a serverless* application)
• Create an app I actually need. In my case, that was an app to make use of my Pocket links when generating eNewsletter (in my case the Motivated Programmer newsletter. You should sign up!)
• Build something substantial in Angular 2 and get a feel for whether I’d like it on larger apps.

So I birthed “PuppyMail” to scratch that itch.

Well PuppyMail delivered in spades on those three objectives. With the TL/DR being:

• Firebase is all kinds of awesome. Particularly when coupled with AngularFire2.
• I could deliver “Cradle to Grave” on all the basic features that I wanted in this app in 29 hours - or basically a month of hobby hacking every day.
• Angular 2 all the things! I love this framework so much.

I loved hacking on Primefaces when I was working fulltime in JSF2. In fact, the whole component-based development thing is really what attracted me to Angular 2.

But since switching, I’ve really been looking for a solid component library to get work done. I’ve been having great success with Semantic UI for styling, but nothing beats being able to bind a paginated list to an Array and getting all the strong typing!

Enter PrimeNG aka Primefaces for Angular 2! This library brings all the stunning engineering and pragmatism from Primefaces to the Angular 2 domain. And it totally rocks!

Here’s that list of my PocketEntries rendering in a PrimeNG paginated OrderList. In the words of Kanye, “Enjoy the greatness!”

And there are only a few lines of code backing all that magic.

But the $1M question is, “How do you integrate it with the Angular CLI?”

Turns out that it’s a snack…

Integrating PrimeNG with Angular CLI

I’m sure the existing setup page will cover all this at some stage. But until then, here’s the steps you’ll need to use PrimeNG with Angular CLI.

Now that I’ve established some routines around my exercise habits, I’m finding that I’m listening to a lot more podcasts. And there is some epic free content out there these days (more on that later).

A short rant about Pocket Casts awesomeness..

What I really wanted to talk about today was how much I’m enjoying Pocket Casts as a player for Android (though I used it on Windows Phone originally, and it ships for iPhone too).

Of course it has:

1. Great navigation (with multiple options - by date / by show /etc); and
2. The ability to play back at variable speed (which I love so much - everything is better at 1.5x); and
3. A sensible draggable way to manage your “up next” queue of episodes for long runs; and
4. Easily see what’s “in progress” so you can finish things up or swipe them out of there; and
5. Lots of slick UI goodness with swipe left to mark done, cool progress circles for time left, etc

But the thing I really love about it is the syncing! If you pay them just a few $ more for Web access, you can manage all your subscriptions via a browser on your PC.

Better still, because everything is synced, you can easily pick up the episode your were playing on your phone, and listen to a bit more on your PC, and everything remembers where you’re up to!

So, whatcha listening to these days?

I’m always a bit interested in what people are listening to in the Podcast department, so here are a few of my faves, in case you need some more commute/exercise background listening action…

A few days ago I started a new series on YouTube called Ship Your Hobby Project in 30 Days and I’m really enjoying it.

One of the best ways to level up as a programmer is by having a side project. It gives you a great way to learn something new by actually doing (the best way to learn) - and also gives you an internal motivation bump through the exhilaration of shipping.

And I’m all about the shipping.

A whole bunch of people have been gradually coming on board and signing up for my Motivated Programmer newsletter to keep themselves honest and moving forward. And they’ve been keeping themselves honest by sending my their one-sentence app descriptions. It’s been awesome!

I’ve found the people signing up super positive and have been joining in the fun myself. We’ve just completed the lesson 3 on Wireframing and Just Enough Planning where we used e.ggtimer.com to smash through our wireframing and module planning.

Here’s my whiteboard version for accountability:

If your GitHub repo is full of half-finished stuff, and you’re keen to jump into a community that is non-judgement, it’s totally worth hanging out with us. First step is to spend just 10 minutes a day and start working your way through Ship Your Hobby Project in 30 Days.

Can’t wait to show off what the students build next month. Super exited!

Today on the show we explore securing Angular 2 routes. And we’ll use OAuth, Firebase and Google (or your preferred OAuth provider) to get us there.

You can grab the source on the GitHub Repo.

Don’t forget to Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts

Here’s the script if you’d like to follow along at home!

[ ] Discuss the plan for today - use Google authentication to login to your app. Pluck Image URLs along the way.

[ ] Check out last weeks show to get up to speed on the QOTD app

[ ] Turn on authentication in your application (auth/signin method)

[ ] Configure your module to turn on authentication methods you prefer

export const firebaseAuthConfig = {
  provider: AuthProviders.Google,
  method: AuthMethods.Popup
}    

// and in imports...
AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig),

Serverless architectures are so hot right now! Today on the show we dive into Firebase with Angular2 using the AngularFire2 library.

We’ll be a dynamic Quote of the Day application which updates from the server in real time. Get out of here! Real time!

You can grab the code for today’s episode on GitHub.

Don’t forget to Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts

Here’s the script so you can follow along at home:

[ ] Discuss the plan for today - use remote db to populate a list of quotes - with live update when server changes

[ ] Create a new app

ng new qotd

Congratulations if you’ve made it this far. Today on the show we explore doing production builds, and deploying to github pages. Then we’ll share a bunch of cool resources (down below) for the next stage in your journey!

It’s our last show in the series! But not the last show for the channel, so subscribe today!

Thanks for being so awesome!

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, we’ll do a production build

ng build --prod
ng build --target=prod --env=prod

[ ] Have a look at your tiny dist directory

Angular 2 has gone final! Yay! Today we’re going to look at linting, code coverage and mocking in the latest Angular CLI (Beta 14).

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, we’ll migrate everything to the latest CLI using this migration guide

[ ] Basically we spark a new project, and copy our src and e2e folders over.

[ ] Next will fix the broken, by removing module.id everywhere, moving our assets to src/assets (and fix matching links). Tests are a world of broken, too. We’ll talk about them shortly.

[ ] Let’s lint our file

ng lint

Today we’re going to look at integration testing using the bundled ng end to end testing tool called Protractor.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, we’ll run our integration test suite

ng e2e

[ ] Explore the directory e2e-spec.ts & .po.ts files

[ ] We’ll explore the role of Page objects to abstract elements and localise changes

[ ] Implement our TwitNgPage object (I would typically rename to FeedPage)

With Reactive Forms, our validation and binding are configured in the backing code rather than the markup. Today, we’ll take yesterday’s template-driven form and convert it to a reactive form, and in the process you can decide which style you like better.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, we’ll update our module list to import reactive forms

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

imports: [ BrowserModule, FormsModule, ReactiveFormsModule, routing, HttpModule,

[ ] We’ll update our template code to spark the form model

import { FormControl, FormGroup, FormBuilder, Validators } from '@angular/forms';

form = new FormGroup({
    username : new FormControl(),
    password : new FormControl(),
    rememberme : new FormControl()
  })

[ ] Remove all our ngModel directive

Today we’re going to look at template-driven approach to forms with the wonders of ngModel. Tomorrow we’ll look at the reactive approach to forms using backing code for validation config.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, let’s generate a login form

ng g c login

[ ] And add it to our module in app.module.ts

import { LoginComponent } from './login';

declarations: [ AppComponent, FeedComponent, MenuComponent, FriendsComponent, FriendComponent, MessagesComponent, LoginComponent ],

[ ] And add it to our router in app.routes.ts

Bad things can happen when working with remote services. Today we explore error handling in an Observables context (in both the service tier and user facing components).

And we revisit our “Loading…” state to tidy things up on initial page load.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, fix our import

import { Observable } from 'rxjs/Rx';

[ ] Implement our getCurrentFeed() method to catch errors

return this.http.get('/api/tweets').map((resp: Response) => {
  console.log(resp.json());
  var fetchedTweets = [];
  for (let tweet of resp.json().data) {
    fetchedTweets.push(this.getTweetFromJson(tweet));
  }
  return fetchedTweets as Array<Tweet>;
}).catch(this.errorHandler);