Pocket Casts is WIN for Podcasts

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!

Pocket Casts on the Web is Capital A Awesome

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…

[Read More]

How To Ship Your Hobby Project in 30 Days

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.

It's all about 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:

Wireframe and Minimal Plan for PuppyMail

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!

[Read More]

Securing Angular 2 Routes with OAuth and Firebase

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),
[Read More]

Hacking a Serverless QOTD App with Angular2, Firebase and AngularFire2

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.

Real Time Quote Action

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
[Read More]

Angular 2 Challenge Day 21 - Deployment and Resources

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

[Read More]

Angular 2 Challenge Day 20 - Linting and Code Coverage and Mocking

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
[Read More]

Angular 2 Challenge Day 19 - End To End Testing

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)

[Read More]

Angular 2 Challenge Day 18 - Reactive Forms

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

[Read More]

Angular 2 Challenge Day 17 - Template Driven Forms

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

[Read More]

Angular 2 Challenge Day 16 - HTTP Error Handling with Observables

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);
[Read More]

Angular 2 Challenge Day 15 - HTTP CRUD operations with Observables

It’s finally time to introduce some Http CRUD implementation! Today on the show we use yesterday mock in-memory RESTful Http service to get(), post(), and put() our way to remote data!

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:

[ ] Implement our getCurrentFeed() method

private getTweetFromJson(obj: Tweet): Tweet {
    return new Tweet(
      obj.id, obj.body, obj.author, obj.date, obj.retweets, obj.favorites)
  }

  getCurrentFeed(): Observable<Tweet[]> {

    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>;
    });

  }

[ ] Update feed.component.ts to handle the observable

this.feedService.getCurrentFeed().subscribe( (newTweets) => {
  console.log(newTweets);
    this.tweets = newTweets;
});

[ ] Demo of changing our database file.

[Read More]

Angular 2 Challenge Day 14 - Using 3rd party JS with Angular CLI and Configuring an In-Memory RESTful endpoint

You’ll need to test your API - and your backend might not be built yet. But no matter! The Angular 2 team have your back with an InMemoryDbService Http RESTful database.

Learn how to configure it in today’s episode (or just learn about using 3rd party JS with the Angular CLI)

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:

[ ] Install a 3rd party npm module to simulate REST (I’ve used a specific version since I know this one is compatible with Angular 2 RC5)

npm install --save angular2-in-memory-web-api@0.0.17

[ ] Update angular-cli-build.js to copy the npm over to dist

'angular2-in-memory-web-api/*.+(js|js.map)'
[Read More]

Angular 2 Challenge Day 13 - Introducing Http and Observables

It’s finally time to introduce some Http action into our app by fetching our Friends in async! Along the way we’ll learn about Observables.

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:

[ ] Fix the friend component deprecation

import { FriendComponent } from './friend';

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

[ ] First, let’s import the Angular Http Module into app.module.ts

import { HttpModule }    from '@angular/http';

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

[ ] Create a static json file in public/friends.json to simulate our server and hold our users (note the “double” quotes)

[Read More]

Angular 2 Challenge Day 12 - Deep Linking in the Router

On Day 12 we turn the Angular 2 Router up to 11 by deep linking to specific friend in our friends component.

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 implement our Friends Component

import { FeedService } from '../feed.service';

friends = [ ];

  constructor(private feedService : FeedService) { 

  }

  ngOnInit() {
    this.friends = this.feedService.getFriends();
    console.log(this.friends);
  }

[ ] Implement our getFriends() method

getFriends() : Array<string> {

    return [ 'Mary', 'Joe', 'Karen', 'Phil', 'Toni' ];

}

[ ] Update the view

[Read More]

Angular 2 Challenge Day 11 - Router Essentials

It’s time to introduce you to the Angular Router and get our menu routing to the various components in our application.

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:

[ ] Let’s create a component for friends and messages

ng g c messages
ng g c friends

[ ] Now we’ll create a routing file app.routing.ts to setup all our routes in the app

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FeedComponent } from './feed';
import { FriendsComponent } from './friends';
import { MessagesComponent } from './messages';

const appRoutes: Routes = [
  { path: '',  redirectTo: '/feed',  pathMatch: 'full'},
  { path: 'feed', component: FeedComponent },
  { path: 'friends', component: FriendsComponent },
  { path: 'messages', component: MessagesComponent },
];

export const appRoutingProviders: any[] = [

];

export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes); 

[ ] Tell our module about this new routes in app.module.ts

[Read More]

Angular 2 Challenge Day 10 - The Refactor and Consolidate Episode

Today we inject services into services, refactor business logic out of components, and introduce you to Plain Old TypeScript Objects.

It’s a major tech debt paydown! And we consolidate everything you’ve learned so far!

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:

[ ] Introduce a new tweet class

ng g class tweet

[ ] First we’ll create our tweet properties

export class Tweet {

    public avatar;

    constructor(public body : string, public author: string, public date: Date, public retweets: Array<string>, public favorites: Array<string>) {
        this.avatar = `${author}.jpg`;
    }

}
[Read More]

Angular 2 Challenge Day 9 - Services and Dependency Injection

The technical debt has been piling up fast in our FeedComponent. It’s time to refactor that business logic out into services - and today on the show we’ll teach you how to get started.

(Spoiler: If you’ve done any Spring or Guice or Java EE6+ - this will be a piece of cake!)

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:

[ ] If you’ve used Spring or @Inject, this is all super familiar!

[ ] First we’ll create a user service

ng g s User

[ ] Note the @Injectable

[Read More]

Angular 2 Challenge Day 8 - Data Binding and ngModel

It’s finally here - the day we add a tweet input element and can actually post things to our timeline.

Let’s take a moment to brag:

Let the tweets flow!

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 use the element markup

<form class="ui form">
  <div class="field">
    <label>What's on your mind?</label>
    <textarea name='body' placeholder="Penny for your thoughts" type="text"></textarea>
  </div>

  <button class="ui button primary" type="button">Tweet</button>
</form>

[ ] Then we’ll make a local variable that gives you access to the element in the template

[Read More]

Angular 2 Challenge Day 7 - Properties and Styles

Today on the show we investigate Angular 2 [property] syntax - and also explore the wonders of per-component styling.

Now with click events and dynamic styles!

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 to follow along at home:

[ ] You can hack DOM properties directly with [prop] syntax (not the quotes inside the quotes)

[style.color]='"red"'

[ ] You can also do per-component styling that won’t clash with the rest of your layout:

.like {
    color: red !important;
} 

.retweet {
    color: red !important;
}
[Read More]

Angular 2 Challenge Day 6 - Events

Today we investigate the wonders of (click) events and catching them in our backing component. We’ll be tweeted and favoriting up a storm.

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 to follow along at home:

[ ] First we’re going to implement our Favorite and Retweet buttons using (click) Events

(click)='OnFavorite(tweet)'

(click)='OnRetweet(tweet)'

[ ] Implement the click handlers too

OnFavorite(tweet) {
    tweet.favorites.push('Glen');
}

OnRetweet(tweet) {
    tweet.retweets.push('Glen');
}

[ ] Stop double-adds? Be great to do it “properly” with a Tweet object method

[Read More]

Angular 2 Challenge Day 5 - ngIf, ngFor and a real timeline

In today’s episode, we finally implement a nice looking timeline! Along the way we learn about ngFor, ngIf, and the Date Pipe.

Our Twitter Timeline is taking shape!

Here’s some cool resources to checkout from today’s show:

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 cheat sheet to follow along at home…

[ ] Copy our avatars into public/avatars

[ ] First of all add an Array of Objects/Maps to timeline.component.ts to hold our tweets:

[Read More]

Angular 2 Challenge Day 4 - Migrate to RC5

In today’s episode, we’re moving from RC4 to RC5. RC5 is reported to be the last of the breaking changes before Go-Live, so it’s worth upgrading.

Here’s some cool resources to checkout for further deep diving on the RC5 migration:

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 cheat sheet to follow along at home…

[ ] Update package.json with rc5 links (Ctrl-D is your friend)

  • @angular stuff rc5
  • forms to 0.3.0
  • router to rc.1

[ ] Do an npm install to fetch the new packages
[ ] Run ng serve to prove the backward compatible action is working
[ ] Add app.module.ts in root.

[Read More]

Angular 2 Challenge Day 3 - Components within Components

In today’s episode, we’re moving from “page thinking” to “component thinking” as we explore nesting Angular components within one another.

It’s also time to start getting our Twitter vibe happening using some magic stuff from Semantic UI

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 cheat sheet to follow along at home…

[ ] Twitter - in component terms rather than page terms
[ ] ng generate component menu
[ ] Add the <app-menu></app-menu> markup
[ ] import { MenuComponent } from './menu';
[ ] directives: [ MenuComponent ]
[ ] Rinse and repeat for Feed
[ ] Add layout magic from Semantic Menus

Here are the CDN links for Semantic UI that I used:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.css" >

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>

<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.2/semantic.min.js"></script>
[Read More]

Angular 2 Challenge Day 2 - Where Things Go, SystemJS and Component Trees

Day 2 is now live and we hack some properties on our first component (as well as learn how Angular’s component model hangs together).

Three big ideas on today’s show:

  1. Where everything goes in an AngularJS CLI application
  2. What SystemJS is, and how it bootstraps your main app code
  3. How Angular components are structured with html, css and components (think “backing beans”)

Lots of groundwork laid today for the next episode where we hack our first component tree.

I’m also updating a YouTube Playlist of all the episodes as they come out.

Cheat sheets below if you’re interested in following along at home.

[ ] We now have a Git Repo which I will tag day1, day2, etc
[ ] Review we introduced angular-cli ng new & ng serve
[ ] Talk through the directories
[ ] SystemJS - Bootstrapping our application
[ ] Main.ts bootstraps our App for the browser

[Read More]