Using JQuery (and Semantic UI) with Angular CLI

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.

[Read More]

Angular Masterclass Day 3 and Final Retro

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:

Day 3 Gitlog Doesn't Lie

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).

[Read More]

Angular Masterclass Day 2 Retro

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:

Day 2 Gitlog Doesn't Lie

[Read More]

Angular Masterclass Day 1 Retro

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:

[Read More]

2016 Year In Review

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.

[Read More]

Configuring Yarn to use Nexus

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.

Yarn is npm with win

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:

[Read More]

Painless Push Notifications with Pushover

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!

[Read More]

The Thoughtram guys are coming to Sydney!

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).

Love Teaching on YouTube

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.

[Read More]

Lessons from my first Angular2 app

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:

31 Day Streak To Get it Home

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

Setting up PrimeNG with the Angular CLI

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!”

PrimeNG OrderList in Action

[Read More]

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.

[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!

[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

[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.

[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:

[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:

[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:

[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:

[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.

[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:

[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.

[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:

[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:

[Read More]