I’ve been reflecting on a very diverse professional year. This year I’ve written or sustained codebases in the following platforms:

• Micronaut with Angular
• Golang with Gin
• Vue.js with Quasar
• Flutter for Android & iOS targets using MobX
• Bash
• and even large Classic Java EE codebase running on Wildfly

It’s a struggle to remember how to define a function these days!

Crunching the stats

I’ve been using a tiny git stats bash script discussed here to pull my numbers. Not large, but they do represent a decent amount of work (and a lot of learning).

Some surprises from the year

And I’ve learned a few things along with the way…

• Micronaut is a delight. It’s all the things I love about Grails, but in Java form. It’s really straightforward to get things done. I’m yet to get stuck into GraalVM (on my list for first up next year).

• Go is verbose but relaxing. Yes, there’s lots of boiler-plate. And yes there are a few interesting design decisions, but overall I found it a really productive language and very easy to come back and maintain. Gin is a fab web framework with all the built-ins (including Swagger support). And compiling a single binary for the client’s numerous target platforms (including low memory embedded) has been something else…

• Flutter really does work cross platform. No, for reals. I built and tested on Android, and the client recompiled that codebase for their iPad and iPhone and everything “just worked”. Really. I was floored. Even the camera stuff worked! And the language is very Java-esque too. Super great stuff. Need to do more next year on mobile.

• Shell is awesome for client hacking. The scripts I developed were around letting a client hack their existing systems into talking with a third-party backend. They were slow, but super functional, and they let the client adapt them to other inhouse systems that I didn’t have access to. Super fun.

• Angular is awesome. Vue.js is awesome. Pick your awesome. Both super productive frameworks with great docs and examples. Great UI framework support via PrimeNG or Quasar. Produced some of the best-looking apps of my career this year.

• I need to code more in 2023. It brought me a lot of joy working on software this year - and it was probably less a part of my day-to-day than it has been earlier in my career. Really looking forward to leaning into it more in 2023.

Had a blast this year with great clients and interesting work. Super grateful.

The integration works great with steering controls, and whole Android Auto experience is fantastic.

However, it wasn’t always so.

If you’ve had the issue with:

• Frequent drops and reconnects on your Android phone
• Not even recognising your phone is connected

… well you’re not alone. I had the same problems.

There’s tons of threads about how bad the experience has been for people. The primary reason for the bad reviews is not the unit itself - it’s the constant dropouts. It makes the unit unusable.

But there is good news in this thread which captures the solution towards the end of the thread:

TL;DR: Replacing the USB socket with one that has a *much* shorter cable appears to have resolved the issue for me.

But I have even better news. This worked for me by just using a new shorter, high-quality usb cable and attaching to the USB extension provided with the unit. I didn’t need to open the dash again - just buy a new shorter cable!

I went down to my local Officeworks and bought one of these 25cm cables:

Completely eliminated all dropouts and the unit is working perfectly. I’m connected to a Moto G7 Plus via USB-C, but the cables are also available in MicroUSB and Lightening. I’ve tried the MicroUSB on my son’s OPPO AX7 and, after we fixed the “Unrecognised USB device” error - which was related to how his Phone’s USB port was set to Midi rather than File Transfer) it works great too!

Phew! Hope it works out great for you! Once the drop-outs go away, this really is a fantastic unit. You’re going to love it.

But it’s just that I haven’t been writing publicly. And I feel like I want to do more of that in this season.

So here we are.

And let me start by talking about some of my private writing…

For the course of this year, each workday I’ve kept a “Developer Journal”. It’s really just a scrapbook of the things that I have worked on each day.

Sometimes it’s documenting weird Angular stuff, or something I’ve learned about PrimeNG. It can be something I learned about refactoring or something I’ve read or realised in leveling up my professional skillset.

But often it’s simply documenting how I solved some problem that I ran into (with links to interesting stuff I discovered when I was researching it). Kinda like a personal blog but without the overhead. And super easy to search in later when I know the error message, but not how I solved it :-)

I use Microsoft OneNote since I can update it from client sites using OneNote online, as well as on my phone and laptop and everything just syncs nicely.

It’s been tremendously helpful to me - like a personal knowledgebase. I remember having friends who’ve kept personal Wikis back in the day - this is my modern version of that. But it’s also been useful to remind me of all the cool stuff I get to work on - and how much progress I’ve made on the days where I simply feel like “I’ve just got nothing done today.”

Highly recommend you take the practice for a spin for a week or two to see if it’s valuable to you.

Here’s an extract of the kind of stuff I write down. Have fun with your experiments!

(BTW.. feels great to be blogging again. Forgotten how much joy it brings me!)

Sounds like a great reason to dive into CSS filters as a lightweight way to transform captured images on mobile. After a little googling, I ran into CSSgram - a CSS filters library for Instagram style filters! How cool.

Import a CSS file, and you’re ready to filter:

Implementing a given filter is super quick. Pick one of the many style names, and add it the parent element of your image, and you’re off to the races. They recommend doing that via the figure tag, which I’ve done in the page above with:

<figure class="hudson">    <img src="[[imageData]]" on-click="selectFilter"></figure><figure class="inkwell">    <img src="[[imageData]]" on-click="selectFilter"></figure><figure class="kelvin">    <img src="[[imageData]]" on-click="selectFilter"></figure>

Definitely a cool way to add some pop to your PWA image capture stuff!

Have fun!

Turns out there is a MediaStream Recording API, so I’m putting it to good use on my PWA Sensors course (it will appear here one day).

Dude! I’m actually recording a video note - with audio - in-browser on my SurfaceBook at my local Maccas McCafe!

There’s an awesome Mozilla post that gives you a good nuts and bolts of the API - which I found super helpful.

The MediaRecorder stuff really builds on the MediaStream stuff I was talking about last week.

You take an incoming stream, then feed it into a MediaRecorder. Call mediaRecorder.start() to start recording - in my case I supply a “ms chunk size” with .start(1000) so chunks of video will arrive in my callback every second. Once started, your ondataavailable handler will start getting chunks of video. How cool!

When you’re done recording, invoke mediaRecorder.stop() (which I do from a button click - not shown here).

Once you call stop() on the MediaRecorder to stop the recording, your onstop handler will get called back. You then take that nice selection of video chunks that we have accumulated in the array, and Blob() it into an object that we can URL-ize.

Finally, assign your Blob URL to a stock standard vanilla <video> component and click play to playback your video!

// find my <video> element in the DOMconst videoPreview = this.$.videoNote;navigator.mediaDevices.getUserMedia(constraints)    .then((stream) => {        let mediaRecorder = new MediaRecorder(stream);        // save for later so we can mediaRecorder.stop() from a button click        this.set('mediaRecorder', mediaRecorder);         // Start with number of ms per "chunk"        mediaRecorder.start(1000);                let chunks = [];                mediaRecorder.ondataavailable = function(e) {                chunks.push(e.data);               }        mediaRecorder.onstop = function(e) {            var blob = new Blob(chunks, { 'type' : 'video/webm' });                           videoPreview.src = URL.createObjectURL(blob);        }            }, (err) => {        console.log('User rejected camera capture permissions', err);    });}

Constantly amazed at how much you can do in a browser these days.. Such an exciting time for PWAs.

Time to finish this script and get this module out the door later in the week.

Have fun!

One cool trick I’ve been playing with is populating a selectbox with a list of available cameras, then letting the user select the camera that they’d like to work with.

The API has an enumerateDevices() call which is handy for tracking down everything that’s available on your system. I iterate over the returned MediaDeviceInfo objects since having their label and deviceId is handy for my next trick…

navigator.mediaDevices.enumerateDevices()    .then(function (devices) {        let cameras = [];        let microphones = [];        devices.forEach(function (device) {            console.log(device.kind + ": " + device.label +                " id = " + device.deviceId);            if (device.kind === 'videoinput') {                cameras.push(device);            } else if (device.kind == 'audioinput') {                microphones.push(device);            }        });        self.set('cameraDevices', cameras);        self.set('microphoneDevices', microphones);    })    .catch(function (err) {        console.log(err.name + ": " + err.message);    });}

Now I have that those list of MediaDeviceInfo, I can put them into a dropdown and we’re off to the races:

But what happens if you have more than one device? My Surfacebook has a front and rear camara, and so does my mobile handset. How do you tell the API which one to use?

The magic you need is the super-handy Constraints block. Pass this into your media acquisition, and can specify exactly which DeviceId you’d like:

let constraints = {    video: {        deviceId: selectedCamera.deviceId    },    audio: false,};

That constraints object is all the secret sauce you need. Pass those constraints in your getUserMedia call and you’re in business:

navigator.mediaDevices.getUserMedia(constraints).then((stream) => {    photoPreview.srcObject = stream;    this.set('cameraActive', true);}, (err) => {    console.log('User rejected camera capture permissions', err);    this.set('captureRejected', true);});

Can’t stop winning! But right now I need to get back to scripting my course - still have some media recording stuff to churn through (super, super fun!). I have a DevEditor progress call tomorrow and I’m way behind! Eeek!

Will post some more media recording coolness here soon.

Good. Now we’re on the same page..

I’m an avid daily journal person - I’ve been collecting daily posts for the last four years which I keep in OneNote. But this recent journal entry seems like something others may benefit from.

This post is about a bunch of my own internal resistance reasons that I use to procrastinate doing actual work on my next Pluralsight Course (which is on PWA sensors, and which I’m actually super pumped about)… and the rebutt to those lies so you can just get on with Turning Pro and actually doing the work.

Enjoy the journal!

Daily Journal. Tuesday, 20th February, 2018.

There is massive resistance on working on my Pluralsight course today - even though I have set aside the day to do just that.

So what’s under the waterline of this iceberg of resistance? What’s stopping the daily progress?

• Deadlines are creating fear and disappointment. I thought my accountability stuff - asking a friend and my editor to hold me to a deadline - would help me kick my own butt and make some progress, but the reverse has happened. It’s made me freeze. Scared to progress. Terrified of clicking record. Fearful I won’t ship anything in time and miss a great opportunity. BUT: that mindset takes hold when you forget: Habits make goals come to you!! Just fall in love with the daily grind and you’ll be done in no time. Just move the needle forward in some small way every day.

• Resentment that I’m not making hay while the sun shines. I have this awesome consulting opportunity at the moment that I could be monetizing every single day . But I’m busy tinkering on this slow-as-molasses course progress which I resent as anti-business-wisdom. BUT: will I resent this down the track? Absolutely not - I know the work an hour/get paid an hour thing is dead. I only do it at all because it’s a good way of keeping my dev skills applied in a real business team context - and grow my programming chops by working with other developers. Pluralsight scales out!

• Scared I don’t have the stuff. Ah, that old chestnut. That I “don’t know this area deep enough”. The truth is that I, like everyone, have many knowledge gaps - but I’m curious, and so will explore things with a beginners mind as I go along. My mind still plays the old, “there are better people out there in this area who will rubbish and ridicule this course”. BUT: of course, that’s all non-sense. Most real experts I know are gracious - and love to see others level up. And I’ll also be offering a ton of enthusiasm, a beginner’s mind, and a passion for levelling people up.

• Tension about having the (super large) tracts of time I (pretend I) need. I feel like there are constant interruptions, so how will I get in the flow for this course to progress? How will I move this forward in little blocks of an hour here or there? BUT: the truth of the matter is that I make great progress in a single Pomodoro - so there’s no risk of this lie really being true. Thinking in smaller blocks of time is very helpful.

• Zero self-compassion. No matter how much I track through, I’ll never feel like I’ve done enough, so why even start? Reality means other things do sometimes trump my courseware development. BUT: the other things that have trumped Pluralsight progress have been wonderful, and important, and it’s worth remembering my value is not measured by completed Pluralsight courses - I was created to enjoy life. Imagine if I treated myself the way that I would treat a friend who accomplished a similar amount of work in a day… I would give them a raise! So feel good about yourself, and crack on.

• Losing my why. I forget that I want to become a world class trainer, mentor and coach. BUT: the way that you do that is through mindful practice. I sometime resent “putting in the practice” on my Pluralsight work - since it’s not making immediate money. But then I remember that it’s not, and was never, about the money anyway!! It was about making the world a cooler place - levelling up developers in entertaining ways - and growing in my own potential - and getting better at doing online training!

• No next step. This one is actaully kinda true. I am a little light on the planning stage - and when you don’t have an immediate “next step” to move onto, you can spin the wheels working that out. BUT: I can grow in this area and I have great tools available to me in Kanbanflow or even Trello - so I’m going to develop my next steps as I go. Certainly having no plan doesn’t serve me - so I’m going to create a coarse grain plan and refine as you go. Live the agile dream!

• Not making it fun. First, learn to practice! BUT: the first step there is to make it fun. Give yourself little rewards. Set micro-deadlines that are actually doable - and then hit them and celebrate. No more Herculean epic tasks - those “I’m not allowed to celebrate without doing 40 hours of progress in 6 hours of work” mindsets. That’s ridiculous. And it doesn’t serve you. So leave it behind.

• No room for overflow. When I dive into Pluralsight, all my blogging/vlogging/whatever goes to zero. There’s no overflow to share. BUT: that’s crazy. I’m learning new things every time I sit down to work on the course, so I just need to work out a lightweight way to share those insights. No “massive tome” blog posts. Just punch out a few little sentences to encourage yourself. Or a quick vid to just demonstrate something cool. Or something from your journal. I’m going to commit to a Wednesday blog day.

Well, that’s all I can think of immediately this morning. So I figured I’d just write it down so I can see the madness in some of my mindsets.

I’m going to edge forward today. I’m going to break that resistance.

Let’s get started :-)

One of the these pictures this year is around innovation.

Innovate. That word used to conjure up “Elon Musk-ish” level innovation. But no more. I now tell a different story about innovation.

My new innovation story is more about friction reduction. And automation.

Removing the Friction

Imagine if you could remove a small percentage of the friction you experience every day delivering software. How great would that feel? Annoying tasks gone forever.

The crazy thing is that automation - using robots to do our boring work - lets us actually do that, but often we put it off since we figure we’re just doing a “one off”. Or it would be too fiddly or time consuming to automate.

Interestingly I used to work with a guy who was completely the other way around. He wouldn’t even copy a file to a floppy without creating a batch file to do it (since he figured he’d be doing it again real soon now).

I think he was onto something.

So this year I’m leaning in to “automating the friction”. That will be my innovation. If a task is annoying (and maybe even difficult and annoying), I’m going to lean into automating it. For me, and for my clients.

I will automate the fiction and boredom right out of my life (ironically, through diving deep into the difficult and boring task of automating tricky tasks)!

Cue my next Vision Wall picture.

Starting with CI/CD

A key part of my startegy is working with the resource I have. In fact, I’ve joined one of my business mates in doing the Depth Year challenge - where I just work inside the resources I already know - but take them deeper.

I introduced GitLab to my current client (via a Docker install) and it’s been working a treat. We use it for bug tracking. We use it for revision control. We even use it for basic docs.

Gitlab has tons of CI/CD stuff in the box. You can:

• Hack up a YAML file;
• Build your app inside a clean Docker image;
• Pass in SSH keys via magic secret variables
• Rsync it to staging - or a canary build
• Deploy to production after QA
• And tons more. Tons.

But it’s all very fiddly to configure. And the docs need a polish. And it’s hard.

But since this year is about friction reduction, I dived in. And a day later I have all the cookbooks for automated build and deploy to remote hosts via rsync. It was hell, but the hell is over!

And now every time I merge to master, remote machines update and the birds sing. It’s really satisfying.

And onto the next win..

Now I’m diving into a messy refactor so I can finally get my test harnesses working smoothly.

Reducing friction AND deliving a higher quality product to the client.

You don’t need to choose.

Except automating the hard stuff. That is definitely the choice :-)

New PWA Pluralsight Course in Flight

I’m presently working on new Pluralsight Course related to Progressive Web Apps and Sensor Integration. I’m still scripting but there’s tons of cool stuff in there.

It’s called Sights and Sounds

But not just any travel app. We’ll be developing a lightweight PWA on your handset and:

• Taking photos;
• Recording videos;
• Lauching Notifications;
• Interacting with Fullscreen
• Doing Geo & directions;
• Launching native apps;
• Sensing network access and coping with it
• Doing offline sync magic with Firebase (including image upload)

I am so pumped about it. It’s pretty scratchy at the moment, but it’ll get there:

Discovering Polymer

I’ve been doing heaps of Angular over the last year (and loving every second of it) - so my first thoughts were around teaching the PWA course with Angular.

But it’s hard to teach the concepts in Angular without it being super-Angular-specific - lots of @ViewChild action which doesn’t translate well to other frameworks.

So I stared exploring what other, more lightweight, tooling I could use to teach the course.

Then I discovered Polymer 2 and fell in love!

Here’s a super, super lightweight framework - mostly just a browser API with polyfills - hence the #UseThePlatform mantra.

The kicker for me is the cool component action. I love, love, love components. And Polymer has a vast library of high quality components to get you started. So I can just throw on a Google Maps component, or a bunch of Material Design components, wire them all up to some backing properties, and I’m productive.

The learning curve was super gentle too. It’s just JavaScript.

And the big win for teaching is the no-build-chain-just-straight-F9-driven-development. Light and fast with minimal clutter to distract you.

I’m really interested in how people find this approach from a learning perspective. And if you’re a hardcore framework person, the translation to your framework of choice should be very straightforward - or just use the existing Polymer integrations to bolt in WebComponents to your existing Angular/React/Vue app.

Can’t wait to get recording!

This video will give you a five minute way to have a look for yourself - and get ideas to shrink your production build sizes. The magic tool you need is Source Map Explorer.

I learned this tip from Jim Cooper’s excellent Pluralsight course on “Angular Best Practices“ and thought it we be good to pass on in a way you can add to your own projects.

First then vid, or read on for the commands I added to package.json.

First we’re going to install Source Map Explorer. I’m going to do things locally, since I like the idea of the project being self contained:

npm install source-map-explorer --save-dev --save-exact

Because source-map-explorer is a lot to type, I’ll create a little alias for it:

"scripts": {    ...    "sme": "source-map-explorer"    ...}

Now to use Source Map Explorer, you’re clearly going to need some source maps! You generate those by adding --sourcemaps=true to your prod build. To keep things DRY, I like to just decorate the dist target with my own dist-with-maps target. Something like this:

"scripts": {    ...    "dist-with-maps": "npm run dist -- --sourcemaps=true",    ...}

We’re all infrastructured up! So I’ll now run that new target so I can generate my source maps:

npm run dist-with-maps

Ok. Now we’re good to go. You should see a bunch of source maps in your /dist directory now.

Let the sme magic commence!

npm run sme dist\vendor.ea432fea42.bundle.js

And remember you can click on areas to drill down, and then back on the headings to drill up!

Enjoy!

That’s what I wrote in my daily journal.

But really it was more about device checking. Desktop, Handset, whatever.

Constant. Device. Checking.

And I was exhausted. I needed an intervention.

But… I’m a programmer, right?

I get it. You need to be online, right? All the time, right?

I won’t speak for you, but living with this “constant on” mindset was just draining my batteries.

During the day the browser always had an email and twitter tab open.

My phone was always beside me in the evenings, just a quick check every so often for new email, twitter, and newsfeed action. Quick email replies and keep that inbox trimmed.

Getting more and more drained.

And that “always on” mindset wasn’t even true. People in my world are more than happy getting a reply in 24 hours (rather than 24 minutes).

Then Rob Bell came along..

So I took action!

Some tools to help with the Desktop journey

The first step was to take the browser out of play during the work day. Those email, twitter and news tabs would have to go. For good.

Enter Leechblock. (I’m sure there’s a Chrome equivalent)

Leechblock lets me block groups of websites. First the ones that were killing me:

Then I could either configure things up by “allowed minutes”, or “time of day”.

I was going hardcore. Let’s just lock those sites down for most of the day.

Yes I could still cheat by going to other browsers. But honestly, it felt like cheating which meant it hasn’t been a problem.

Now, about that phone…

Turning your Smartphone into a Candybar…

The desktop filtering approach was working great. During work hours, it was a solid strategy.

But I realised that most of my drain was actually coming from after-hours.

So I wanted to go all in on blocking every dopamine thief on my phone handset..

Enter AppBlock.

This is when things really starting getting serious (and interesting). Now I could block both apps and notifications by time of day.

So I went even harder on the time allowances - since I already knew out-of-hours was where the big wins were to be had…

Then I blocked every one of those energy thieves.

So what went on the list? All my access to email, Twitter, YouTube, eBay, Feedly, even Chrome!

Remember I still have access to Phone, SMS, Camera, Music, Podcasts & Nav. And turns out that’s plenty.

As I said, I was going all in.

The results so far…

I’ve been using the desktop browser block for a few months and loving it. Greatly improved focus during the day. Couple it with a Pomodoro approach, and you use your breaks for genuine recharge, not a mindless surfing/checking cycle.

But the AppBlock install took things totally next level. I’ve only been doing that for two weeks and I’m so much more refreshed and creative. Should have done it years ago!

Maybe one day I’ll just ditch the whole handset :-)

Anyways, hope these tools are helpful in regulating your own online-ness.

If you have your own useful tools, tweet me up (but I don’t check it that often, so be patient :-).

On the back of my Pluralsight “Building Beautiful Angular Apps with PrimeNG“ course, I landed an awesome consulting gig building a very cool PrimeNG front-end.

The double-cool part of this gig is that the backend is totally asynchronous with lots of concurrent user changes coming over websockets. This was a great chance to apply a lot of the RxJS “Reactive Angular” stuff I’d been learning about over the last few months. That stuff is rocket fuel..

But everything has its limits.

I was soon lost in a maze of Observables and spiraling in a technical debt of state mutation.

Enter ngrx.

If you haven’t bumped into ngrx before, it’s about applying the new hotness of Redux-style applications to Angular, but built on RxJS.

The Benefits of ngrx

How does this ngrx stuff help my async plight?

• There’s now a single central place in my app where state lives. Everything goes through here!
• That state is transformed through a set of pure reducer functions (think super easy to test since there’s no DI, just in and out)
• Reducers are triggered by actions - simple async calls in my client code to say “Hey, I got a new piece of data, please add it to the store” or similar.
• I can subscribe to changes in the parts of the store my component cares about (eg “tell me when the list of inventory changes”), at whatever points in my app need to listen for those changes

The Refactor Factor

And what’s been the result in my refactor to ngrx?

• I ended up throwing out tons of code (always a good thing, especially the way I code :-)
• The complexity level went through the floor (it was much easier to see where things were broken, since a lot of the code that was removed was “side-effect” style stuff which are replaced by ngrx Effects, or just plain reducers)
• I could debug async stuff since I could see the flow of actions, and the mutations they were effecting

But what’s really blown my mind has been the Redux Devtools which work just great with ngrx.

Because all the store mutations are through returning fresh copies of the mutated store, you can use the dev tools to time travel! I can travel back in time inside my app to see what the state looked like before and after a particular event. Crazy, right!

The Dreaded Learning Curve…

Yeah. That’s really been the only snag. There’s actually not too much “noob-level” ngrx tutorial stuff. And like everything JS, versions of things cycle like crazy, so lots of tutes get out of date very quickly.

I found Oren’s book Reactive Programming with Angular and ngrx to be super helpful on fundamentals. And particularly his rock star sample app – demo, source. Such great code in there!

I’m actually really keen to YouTube some basic screencasts around ngrx - at the noob level - that’s all I’ve unlocked! So if you think that would be helpful/interesting, tweet me up.

Will keep you posted..

The great news is that PluralSight is pulling together the launch video right now - so we’re really, really close!

So what’s next?

That’s an awesome question.

And the answer is… more PrimeNG!

I’m excited to say that I’m currently working on a short-term commercial consulting gig using Angular/PrimeNG - so I’m definitely dog-fooding my enthusiasm for both frameworks.

I’ve decided to move toward online teaching for the next season of my life - but I’ve always felt the best teachers are the ones working in the field, so it’s important to me to keep my hand in professional development work (outside of just “professional training”).

It’s actually been really confronting to sit down and work out a professional growth plan for myself as a programmer. 20 years in, and there’s still so many fundamentals that I get slack about.. (blog posts coming on “leveling up” soon..)

But that’s what’s so great about our profession. There is always a growth goal to stretch toward - or something new to learn - and the disruption never stops!

And the Hobby Mobile project…

I’ve promised a friend that I’d pull together a little PWA/Mobile app to help him track his swim progress. I’ve been building it with Ionic and having a ball.

Really looking forward to spending more time with ServiceWorker this year. Some cool stuff to learn there..

And what’s coming up on the blog?

I’m hoping to explore a few themes here over the next month:

• Stuff I’m still learning about PrimeNG (love that framework)
• Some thinking about developing a personal growth plan for leveling up as a programmer
• Things I’m learning about PWA/Ionic to build for the Mobile Web

That sounds like a bunch of cool stuff. Time to get cracking!

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.

From there we head off into the less common controls such as Schedule, Trees, Google Maps, Wizards and Dialogs. Lots of fun stuff in there too!

Finally, we finish up by diving into some Advanced PrimeNG concepts. We dig into non-visual controls with Drag and Drop, explore how to Unit Test your PrimeNG app, and even dip our toes into the PrimeNG sourcecode to see how to work around things when you hit the wall.

I really hope developers are going to love this course - and that it builds some passion for PrimeNG.

For now, it’s time for me to get back to recording. I’m only just getting started recording, and I need to get this course shipped off to post production in two weeks time!

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:

    private configureDefaultColours(data: number[]): string[] {        let customColours = []        if (data.length) {        customColours = data.map((element, idx) => {            return DEFAULT_COLORS[idx % DEFAULT_COLORS.length];        });        }        return customColours;    }

Then last of all, call that routine with your data whenever you need to generate some colours for your chart, and you’ll get back an array of colours to keep things fresh:

    private hoursByProject = [        {id: 1, name: 'Payroll App', hoursSpent: 8},        {id: 2, name: 'Agile Times App', hoursSpent: 16},        {id: 3, name: 'Point of Sale App', hoursSpent: 24},    ]    private pieData = this.hoursByProject.map((proj) => proj.hoursSpent);    private pieLabels = this.hoursByProject.map((proj) => proj.name);    private pieColors = this.configureDefaultColours(this.pieData);    private hoursByProjectChartData = {        labels: this.pieLabels,        datasets: [        {            data: this.pieData,            backgroundColor: this.pieColors,        }        ]    };

And you have yourself a chart with some funky default colours… Voila!

If you love this sort of stuff, you’ll probably enjoy my upcoming Pluralsight course on PrimeNG! Stay tuned!

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.

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

So I need npm install those libs first.

npm install jquery --savenpm install semantic-ui-css --save

Once those are installed, you should be able to spy them in the ./node_modules/ directory in the root of your project.

All good so far.

Next, import your global JS libs in browser global scope using angular-cli.json

You’ll find a angular-cli.json in the root directory of your project. This is the config file for the CLI, and you can tell the CLI about your global styles and JS there.

You’ll need to make insertions in the styles and scripts arrays. Here’s the extract from mine that deals with the CSS and JS I need:

"styles": [    "styles.css",    "../node_modules/semantic-ui-css/semantic.css"  ],  "scripts": [    "../node_modules/jquery/dist/jquery.js",    "../node_modules/semantic-ui-css/semantic.js"  ],        

You notice I slurped in my global styles in the styles section - and they are the path to the node_modules we installed earlier. The path is double-dot `../node_modules/‘ remember.

Same for the scripts block. Import what you need and you’re set.

Finally, declare the global JavaScript to your TypeScript

In my case, Semantic is augmenting the existing jQuery object, so I’ll need to “declare” that global variable so TypeScript knows about it.

For that you need a line like this at the top of your class file:

declare var jQuery: any;

And with that inplace, you can now call the jQuery() methods you’ve been looking for.

Note: You don’t need any <link> or <script> tags. The CLI/WebPack has done all the bundling work for you. Just start using stuff!

So, for example, to invoke the SideNav from Semantic UI, you’d normally call the sidebar() method on the jQuery object.

Here’s the full sample code (with that declare magic) to follow along at home:

import { Component } from '@angular/core';declare var jQuery: any;@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {    title = 'jQuery works!';    onToggle() {        jQuery('.ui.sidebar').sidebar('setting', 'transition', 'push').sidebar('toggle');    }}

And the matching HTML that it’s invoking:

<h1>{{title}}</h1><div class="ui left demo vertical inverted sidebar labeled icon menu" id="sidenav"><a class="item">    <i class="home icon"></i>    Home</a><a class="item">    <i class="block layout icon"></i>    Topics</a><a class="item">    <i class="smile icon"></i>    Friends</a></div><button (click)="onToggle()">Toggle Me</button>

Which gives you the goodness:

Hope it helps next time you need jQuery (or Semantic UI) in your Angular CLI app!

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.

Then on to Child Routes and Laziness

With our forms experiments behind us, it was on to master/detail child routing - which was really great to see in action (I’d read about it, but never had a reason to experiment with it). We had a top level of routing for our menu, then a master/detail child route looking after our Contacts List -> Detail Detail/Editor connection. Super great.

We finished the day exploring lazy loading of routes, then a little about AOT Compilation before I had to leave early to catch the last flight to Canberra.

Overall?

So was it worth it? Travel costs, Accommodation, Course fees, Time off, etc?

Absolutely. And on so many fronts:

• Super high-bandwidth classmates. Confirmation bias? :-) The type of developer that’s attracted to a course like this is already a, well, little self-selecting. Everyone was deep-ending tech all over the place and experimenting with different approaches to things (check out Phil’s Post on Piping Errors). Just hanging out with that set of folk was stretching!
• Super high-bandwidth instructors. Up-to-the minute instruction on latest best practices and emerging approaches. And friendly and approachable as well (we went out for drinks as a several times together as a class just to hang out)! And being committers in ecosystem projects made everything grounded in reality of daily grind (which is super helpful).
• Multiple Instructors. I’m really sold on this approach. Not only does it give you multiple perspectives and backgrounds, switching up the talking head keeps things fresh and moving.
• Great exercises. The tasks were clear in what you needed to do, but left you to work out how to do it. There was no “bounding ball” to follow - you had to draw on the courseware, colleagues, and experimenting to get you there. That really forces you to collaborate and learn the stuff (and provides interesting sidetracks along the way).
• Evergreen courseware. Lifetime access to evolving course materials, exercises and solutions is awesome. This is a super cool benefit in the fast-moving Angular landscape.
• Pure Focus. For professional development, I’m convinced that nothing beats being in a high-bandwidth focused “in person” training environment. I love video training (and will be both giving and consuming plenty of it this year), but there’s nothing like being in a class of motivated people forcing yourself to do the work.

This was a five star training experience. Six stars if you can do it in Sydney ;-)

Many thanks to thoughtram for coming over!

Recommended.

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.

And work it out we did. We implemented the classic debounceTime() search scenario (but optimised it with a little distinctUntilChanged(), followed up with some merge()ing with the initial ContactList Http fetch for the non-search case, and even sprinkled in some serious switchMap() rocket surgery to make sure that async fetches arriving out of sequence were handled (to cater for load balancing scenarios).

It was impressive.

And it will take a lot more practice.

But here’s a vanity showoff of what we covered today.

As one of the many bonuses, I finally understand why you use this form of import for RxJS (compared with the standard Angular imports):

import 'rxjs/add/operator/map';

Intercomponent Comms turned up to 11

We did all kinds of intercomponent comms yesterday - property binding, EventEmitter, and all their friends were covered - culminating in implementing a basic EventBus shell. Powered by a Subject(), this EventBusService let us update the Header component of our application with a breadcrumb from wherever we were in the app. Very nifty!

Bring On Day Three

Today we dive into all the nuances of Forms and Validation and will be getting deep into the Router for routing child views. Great way to finish!

Pumped!

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.

Day One in the Box

Being the “Jumpstart” day, you get a taste of everything, starting from a blank “scorched-earth” Angular 2 project containing some supplied CSS and sample data - and building piece by piece on that.

Based on my Git logs, the day was a solid basics wrap-up:

• The Bootstrapping process (how it works, not just what to type)
• Writing a basic component
• Property Binding
• Basic Directives (*ngFor and *ngIf and friends)
• Component Lifecycyle (eg ngOnInit and what runs when)
• Services and DI (including OpaqueToken, Instance handling and how the DI resolves things)
• Basic Routing from Zero
• Routing with Parameter Passing (routerLink and friends)
• Using Http for basic Observables subscriptions
• Two-Way Databinding in a basic form editor (including how NgModel works as a directive)

That’s quite a first day. If you’re already using Angular 2 that might sound a little basic, but the great thing about having experienced instructors is that we deep dive all the way along.

• Not sure when component instances get created and how are affected by the the update cycle (in debug and prod modes)? Just ask!
• Keen to know how the router handled instance handling and re-use? Just ask and get a history of how it used it, and how it does now!
• What’s the difference between a template directive and a regular directive? They can talk you through that on the way.

Covering all those “so I wonder how that actually works?” demystifies a lot of the Angular magic you’d be templated to glaze over and get stuck on down the track. Super valuable.

And After Dark…

The first day was long (9:30 until after 6pm) but it went really fast and the pace intensified as the day went on.

After hours, Christoph and Thomas took us out to the Opera House Bar for Drinks and Hangout time. This is where you want to be at the end of the first day:

Bring On Day Two

They team have told us that the intensity ramps up today as we dive into Observables and functional programming.

Super excited!

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 had so much fun on my YouTube Channel shooting Learn Angular 2.0 in 21 days and Ship Your Hobby Project in 30 days. That’s a lot of video content, and by the end of it the projection workflow has improved considerably!

I’m going to be doing a lot more video next year, so make sure you subscribe if you haven’t yet!

Creating Blog Posts.

I love writing. And it was great to get back on the blogging horse this year.

This is post 46 for this year. That’s almost my busiest blog year on record (only exceeded by 2006 with 47). That was ten years ago when life was a lot simpler!

I’m really enjoyed the switch to Hexo, Git and Markdown, and this style of blogging is definitely the minimalist future I’ve been looking for.

Discovering Fresh Community.

I’ve really enjoyed making new friends inside and outside the tech community this year. You really are the sum of the five closest people you hang around - so make sure you’re intentional about those people!

I’m putting the whole “personal networking” thing front and centre for next year. I’ve learned so many great techniques from Fizzle this year that I can’t wait to apply in 2017.

Rediscoving the Web

Angular 2 and Ionic 2 have really pulled me back into the heart of the WebDev community - and it’s an awesome place to be.

TypeScript is all kinds of wonderful, and I’d happily spend all of 2017 hacking on Angular and Ionic apps in TypeScript.

In fact, that’s what my diary looks like at the moment.

So. Very. Pumped.

Great Habits

Kent Beck said, “I’m not a great programmer; I’m just a good programmer with great habits.”

This year, I’ve had a really hacked on my own personal habits and have definitely gone next level.

I’m more disciplined than ever (inside and out), and have worked out some great productivity hacks to be the most effective I’ve been in my life (check out my free Ship Your Hobby Project in 30 days for an insight).

And 2017 looks even more awesome…

So many great projects scheduled for 2017. Can’t wait to get started!

Thanks for hanging out!

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!

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)

Integrating the Pushover API into your app is a snack. There are node modules, and other third party API libs (Java, C#, Python and all the other good gear) to use out of the gate, but the API is simple form POST to an endpoint, so rolling your own is no big deal either. I’ll show you how.

In Angular 2, I’d create a pushover.service.ts file to host my service, and drag in my keys and endpoints:

@Injectable()export class PushoverService {    private PUSHOVER_ENDPOINT='https://api.pushover.net/1/messages.json';    private PUSHOVER_TOKEN='your-magic-token-here';    private PUSHOVER_USER_KEY='your-user-key-here';    constructor(private http : Http) { }}

And with my shell class in place, there’s just the small matter of performing that actual form POST and getting those notifications rolling in:

sendNotification(title : string, body : string) : Observable<Object>{    let pushoverMessage = {        token : this.PUSHOVER_TOKEN,        user: this.PUSHOVER_USER_KEY,        title: title,        message: body    };    let options = {} as RequestOptionsArgs;    options.headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });    let pushoverStr = this.mapToFormData(pushoverMessage);    console.log(`Pushing message ${pushoverStr}`);    return this.http.post(this.PUSHOVER_ENDPOINT, pushoverStr, options).map( resp => {    if (resp)        if (resp.status == 200) {            return resp.json()        } else {            throw resp;        }    }).catch((err, other) => {        console.log("Trouble in the land of POST", err);        return Observable.throw(err);    });}

The only other magic I needed was a way to format my data into an old school form POST. There’s probably a better way in npm to do this stuff, but here’s my heavy hammer approach:

public mapToFormData(map: Object): string {    let formData = '';    for (var key in map) {        if (formData)            formData += '&';        let eKey = encodeURIComponent(key);        let eValue = encodeURIComponent(map[key]);        formData += `${eKey}=${eValue}`;    }    return formData;}

And will all the code happening, it’s a matter of calling it from my login form:

this.notificationsService.sendNotification(`Successful login for ${as.auth.email}`, "With all kinds of winning").    subscribe( value => { console.log("Winning"; },    err => { console.log("Observable threw", err); })

And then sit back and enjoy the greatness:

Having so much fun with this stuff. Thanks Pushover.net!

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?

Sorting out accommodation and transport is always a big hassle when travelling for training.

Here’s my $0.02 on what I’ve found out so far.

After a fair bit of research, I’m going to be staying at The Tank Stream Hotel which is just around the corner from the training venue Tank Stream Labs. Pretty cool rooms from $160/night - which is pretty cheap for Sydney City.

It’s also accessible from Wynyard station, so it’s easy to get there from the Airport (and get home when we’re done)

And after that?

I already have a few Angular 2 and Ionic 2 projects banking up for 2017 - both commercial consulting and startup gigs, so this is the absolute perfect kickstart.

Hope to see you there!

And will report back on how it goes…

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.

Show me the screenshots!

Ladies and Gentleman, I give you PuppyMail:

And I thought I would go all out with a landing page to (with links to source, etc).

What did you learn along the way?

Yes. Well. There were quite a few side tracks in those 31 days. But all wonderful learning experiences none the less.

A few things really did prove trickier than I anticipated.

1. GetPocket doesn’t support CORS

First “crash and burn” moment for me was lack of CORS support on the GetPocket API.

That meant the standard http angular component would die in the browser when doing the cross-origin calls. This lead to a tiny bit of glue in a node proxy which I called puppymail-server. Under the covers, it just uses express-http-proxy to do all the heavy lifting.

2. Custom Firebase tokens

I needed to generate Custom tokens for Firebase logins (since I wanted the user to be able to use their GetPocket creds as auth to the Database)

This was actually a blessing, since I already had the proxy server doing all the Pocket oAuth proxying, so it was easy to inject a custom Firebase token on the way back from a successful oAuth.

The Database Auth rules on Firebase are just fantastic. I can lock down sections of the Db to just the user that creates them. So very painless!

3. PrimeNG is so productive

Paginated lists turned out to be trivial. Just throw in a PrimeNG DataList component, point it at your array of objects, and you’re good to go. Rince and repeat for OrderList if you need to sort that list. Throw in a few Growl notifications, a couple of SplitButtons, and a pinch of Dialog action and you’re cooking.

I will definitely be recommending PrimeNG to enterprise clients as a great way to standardise the app experience.

4. SemanticUI makes so much sense

I’ve used Bootstrap a lot in the past, and SemanticUI really takes ideas to a whole new level of usability. The whole “semantic-ness” is just so readable! I love creating a <div class='stackable two column grid'>!

I need to get deeper in SemanticUI, and fortunately the docs are just awesome.

5. Deep Linking and Nginx

This one really caught me off guard in deployment. Nginx kept throwing 404s when deep linking into the app using html5 style URLs.

You’d end up with requests like: /puppymail/login/backFromPocket which you’d hope would route to the LoginController, but end up 404’ing as Nginx tried to resolve that to a real file. Apparently there are serverside fixes which map all 404’s back to index.html to support this. That’s on my list, but a quick workaround is using a HashMappingStrategy in the router on the client side.

This means you end up “hashy” style links like /puppymail/#/login/backFromPocket, but that doesn’t worry me for now - especially since it was a one-line change to my Angular module to:

  imports: [RouterModule.forRoot(routes, { useHash: true })],

And I was done!

6. through 1000.

There were tons of other stuff I learned along the way about Angular 2 - particularly in creating re-usable components that shared data across the app. Still plenty to learn about Observables, RxJS and error handling. But the pieces are coming together for me.

I just can’t believe how fast the thing runs too! Just awesome!

Can’t wait for my next hobby project. I can feel some Ionic 2 mobile app action coming on to channel my Angular passion into the mobile space.

And in the meantime, if you are a GetPocket user, have a play with PuppyMail, or checkout the source code, or just sign up to the Motivated Programmer Newsletter.

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.

First, install the dependency, and save it to your project…

npm install primeng --savenpm install font-awesome --save

Once that is installed, you’ll have a ./node_modules/primeng/ directory (and a ./node_modules/font-awesome/ directory). Edit the angular-cli.json file in your root directory to include the PrimeNG style tags you’ll need:

"styles": [    "styles.css",    "../node_modules/font-awesome/css/font-awesome.css",    "../node_modules/primeng/resources/themes/omega/theme.css" , // or whatever theme you prefer    "../node_modules/primeng/resources/primeng.css"],

You’ll need font-awesome for some of the icon glyphs, so I added it to the styles above.

With the styles in place, it’s time to drag in the modules you’ll need to update your app.module.ts to load the modules of the components you need.

You’ll find the name of the module you need to load on the Documentation tab of the component you want to use on the PrimeNG website. For example, on the OrderList page, the Documentation tab says:

import {OrderListModule} from 'primeng/primeng';

So you’ll need to add that line to the top of your app.module.ts. Then finally, include the component in your imports: section of app.module.ts towards the bottom of the file (which makes sure the p-dataList tag becomes active in your markup. So, your app.module.ts will have something like:

imports: [    BrowserModule,    FormsModule,    HttpModule,    OrderListModule, // this line brings the magic of p-dataList to your markup!  ]

With those bits in play, you can start using the p-dataList tag in your actual markup:

<p-dataList [value]="entries" [paginator]="true" [rows]="5" [paginatorPosition]="both">

In my case entries is an Array<PocketEntry> property on my controller, which I can iterate over to output each Pocket link entry.

To make the iteration happen, inside the p-dataList markup you specify a template directive which gets output for each iteration of my entries (in a very similar style to good ‘ol Primefaces).

I want to call each iteration entry, so the line I need is:

<template let-entry>

Then I’m free to start referencing that entry variable as I choose..

    <div class="content">        <a class="header">{{entry.resolved_title}}</a>        <div class="meta">            <span class="cinema"><a [href]='entry.resolved_url'>{{entry.resolved_url}}</a></span>        </div>        <div class="description">            <p>{{entry.excerpt}}</p>        </div>    </div> <!-- etc... -->

Super productive!

It’s been amazing to see the PrimeNG library take shape - there are already dozens of components in place - all with the super high engineering standards that the Prime team deliver (check out their source code and enjoy the greatness!)

Awesome work Prime!

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…

Developer Related

• The devRant Podcast - just starting out, but cool guests so far!
• Adventures in Angular - I’m all in on Angular, and I really like this show (even just to stay current).
• The Groovy Podcast - back in the day I was one of the hosts, so I like to stay connected. BTW - it’s WAY improved from when I was on it!
• Hanelminutes - guests are always a little left of centre and always 30 minutes.
• .NET Rocks! - even though I don’t do much in the MS space, these guys are prolific and always have diverse guests on who aren’t MS focussed.

Life Stuff

• Revisionist History - Malcolm Gladwell’s amazingly challenging podcast on all things under-researched. Worth it for the production value alone!
• The Tim Ferriss Show - Interviews super interesting folk and pulls apart some of their world view and life philosophy. Long, but interesting.
• The Art of Manliness - Don’t be put off by the title, this is actually a really progressive, practical and intellectual show. The host is an ex-layer and always polished.

Business and Entrepreneur Stuff

• The Fizzle Show — Heart & Hustle, Self Employment & Creative Business - I love these guys. All heart and hustle without the sketchy online business stuff. Somewhat quirky humor, but it works for me!
• The Smart Passive Income Podcast - Pat Flynn is just great. I have learned heaps from this show about how to improve my business game.
• Business Bootcamp Podcast w/ Mike Andes - tons of really actionable stuff on this one. And always short!

Spirituality

• The RobCast - there is only one Rob Bell, and he’s jam packed full of awesome. I would love to communicate and connect like this guy.
• The Liturgists - love these guys - arty, sciency, inclusive, non-judgemental Jesus stuff. Without the hating.
• Woodland Hills Church - The best of the more trad Sunday sermon thing. If there were Greg Boyd T-shirts on sale, I would buy one!

Anyways…

There’s a bunch of things to get you started. And do check out Pocket Casts if you’re in the market for a good player!

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!

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

[ ] Now to secure the routes in app.routing.ts

const appRoutes: Routes = [    { path: '',  redirectTo: '/quotes',  pathMatch: 'full'},    { path: 'quotes', component: QuotelistComponent, canActivate: [LoggedInGuard] },    { path: 'login', component: LoginComponent }];export const appRoutingProviders: any[] = [    LoggedInGuard];

[ ] Implement login.guard.ts

import { LoginService } from './login.service';import { Injectable } from '@angular/core';import { Router, CanActivate } from '@angular/router';@Injectable()export class LoggedInGuard implements CanActivate {    constructor(private loginService: LoginService, private router: Router) { }    canActivate(): boolean {        console.log("Guard function has been invoked");        let authenticated = false;        if (this.loginService.isAuthenticated) {            authenticated = true;        }        else {            this.router.navigate(['/login']);        }        console.log("Returning from Guard function with: " + authenticated);        return authenticated;    }}

[ ] Explore the actual login service

[ ] Add some markup to the menu

<div class="right item" *ngIf='loginService.isAuthenticated'>    <a class="item" >        <img class="ui avatar image" [src]='loginService.photoUrl'>        <span>{{ loginService.displayName }} </span>        </a>    </div>    <div class="right item" *ngIf='!loginService.isAuthenticated'>    <a class="ui inverted button" routerLink='/quotes'>Log in</a></div>

[ ] GitHub repo has localStorage to cache oAuth tokens

[ ] Next time we’ll look at editing values.

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

[ ] I’ve added Semantic UI to the index.html in the root

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

[ ] I’ve also customised the index.html to use the Home Page layout from Semantic UI (scroll down that page to see it in action)

[ ] Install the firebase deps

npm install firebase angularfire2 --save

[ ] Sign up for a firebase account:

https://console.firebase.google.com

[ ] Create some data

[ ] Edit the read and write action on the your table (the rules tab) - so you can read without authenticating

{    "rules": {        ".read": "true",        ".write": "auth != null"    }}

[ ] Configure your app.module.ts to use Firebase

Update your module definitions    import * as firebase from 'firebase';    import { AngularFireModule } from 'angularfire2';    // Initialize Firebase    export const firebaseConfig = {      apiKey: "AIzaSyAtkDOebowUCsSF8efOL_0yup1DKCCan00",      authDomain: "qotd-caac8.firebaseapp.com",      databaseURL: "https://qotd-caac8.firebaseio.com",      storageBucket: "qotd-caac8.appspot.com",      messagingSenderId: "922026910241"    };        @NgModule({      declarations: [        AppComponent,      ],      imports: [        BrowserModule,        FormsModule,        HttpModule,        AngularFireModule.initializeApp(firebaseConfig)      ],      providers: [],      bootstrap: [AppComponent]    })    export class AppModule { }

[ ] Add your quote list component

import { Component, OnInit } from '@angular/core';import { AngularFire, FirebaseListObservable } from 'angularfire2';@Component({  selector: 'app-quotelist',  templateUrl: './quotelist.component.html',  styleUrls: ['./quotelist.component.css']})export class QuotelistComponent implements OnInit {  quotes: FirebaseListObservable<any>;  constructor(private af: AngularFire) { }  ngOnInit() {    this.quotes = this.af.database.list('quotes', {      query: {        orderByChild: 'author'      }    });  }}

[ ] Add some markup

<table class="ui basic table" id="quoteTable">  <thead>    <tr><th>Id</th>    <th>Author</th>    <th>Quote</th>  </tr></thead>  <tbody>    <tr *ngFor="let quote of quotes | async">      <td>{{quote.$key}}</td>      <td>{{quote.author}}</td>      <td>{{quote.quote}}</td>    </tr>      </tbody></table>[ ] Celebrate the awesome serverless realtime update action

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 --prodng build --target=prod --env=prod

[ ] Have a look at your tiny dist directory

[ ] Then we’ll deploy our app to github pages

ng github-pages:deploy --message "First official release of Twit-ng!"

[ ] Sit back and wait to be acquired

[ ] While we’re waiting to bathe in the cash, let’s explore some cool resources

[ ] First some free stuff…

[ ] You should subscribe to ng-newsletter - super interesting articles. Here’s a direct link to the current issue at time of writing.

[ ] If you’re into podcasts, the Adventures in Angular podcast is jam packed full of great stuff

[ ] If you’re into blogs, the Thoughtram guys are the gold-standard for black belt Angular. Super cool dudes.

[ ] If you’re after a book, I can recommend the ng-book-2 offering. Don’t really need the screencast bundle - but the base book offering is awesome (albeit expensive)

[ ] I’m seriously thinking about putting together a $5 book package that covers just the essential stuff that I cover in these 21 days. If you’d be interested, just thumbs up this vid and I’ll take it as a call to arms!

[ ] And we’re done. Thanks for 21 days of effort and positivity. You guys have been so supportive, I have learned so much!

[ ] Subscribe to the channel, I’m going to keep posting vids regularly (and I’m going to be doing a Git course here shortly!).

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

[ ] What that actually does is just run npm run lint

"scripts": {    "start": "ng serve",    "lint": "tslint \"src/**/*.ts\"",

[ ] How to configure your linting rules via tslint.json in the root of your project

"no-trailing-whitespace": false,"indent": [  true,  "spaces"],

[ ] And let’s tidy up our Tweet class appropriately

[ ] Look up the docs

ng doc TestBed

[ ] Let’s have a look at code coverage

ng test

[ ] Let’s enhance our FeedComponent with an mock call

it('should retrieve things on init..', () => {    let fixture = TestBed.createComponent(FeedComponent);    let app = fixture.debugElement.componentInstance as FeedComponent;    expect(app.loaded).toBeFalsy();    expect(app.tweets.length).toEqual(0);    app.ngOnInit();    expect(app.tweets.length).toEqual(2);    expect(app.loaded).toBeTruthy();  });

[ ] And the same for favorites and retweets

it('should favorite and retweet appropriately..', () => {    let fixture = TestBed.createComponent(FeedComponent);    let app = fixture.debugElement.componentInstance as FeedComponent;    let tweet = new Tweet(125, 'Another Mock Tweet', 'Glen', new Date(), [], []);    expect(tweet.favorites.length).toEqual(0);    app.OnFavorite(tweet);    expect(tweet.favorites.length).toEqual(1);    expect(tweet.retweets.length).toEqual(0);    app.OnRetweet(tweet);    expect(tweet.retweets.length).toEqual(1);  });

[ ] Celebrate our awesome coverage!

[ ] Tomorrow we look at where to go from here

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)

export class TwitNgPage {  navigateTo() {    return browser.get('/feed');  }  postTweet(tweetText) {    element(by.name("body")).sendKeys(tweetText);     element(by.css("button")).click();  } }

[ ] Discuss selectors by.name by.id and by.css (not by.model)

[ ] Use the debugger

browser.pause();

[ ] And add an assertion to app.e2e-spec.ts

it("Should post a tweet", () => {    page.navigateTo();    page.postTweet("This is awesome");    expect(page.getFeedCount()).toEqual(6);  });

[ ] Implement our selector in app.po.ts

  getFeedCount()  {    return element.all(by.css(".comment")).count();  }

[ ] Let’s confirm it’s working by getting the text of the tweet in app.po.ts

getLatestTweet() {    return element.all(by.css(".comment .content .text")).get(0).getText();}

[ ] And asserting it in app.e2e-spec.ts

expect(page.getLatestTweet()).toEqual("This is awesome");

[ ] Let’s also test our retweet action in app.e2e-spec.ts

it("Should increment retweet count", () => {    page.navigateTo();    page.retweetLatestTweet();    var rtCount = page.getLatestTweetRetweetCount();    expect(rtCount).toEqual("2 Retweets");  });

[ ] And implement the logic to retweet/count to the Page in app.po.ts

  retweetLatestTweet() {    element.all(by.css(".comment .content .actions .retweet")).get(0).click();  }  getLatestTweetRetweetCount() {    return element.all(by.css(".comment .content .actions .retweet")).get(0).getText();  }

[ ] We have smashed end to end testing!

[ ] Tomorrow we look at quality tools

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

[ ] Wire our form to our model

<form class="ui form error" [formGroup]='form' name='username' becomes formControlName='username' etc

[ ] Test our form model

[ ] Add some validation logic

form = new FormGroup({    username : new FormControl('',[ Validators.required] ),    password : new FormControl('', [ Validators.required] ),    rememberme : new FormControl(true)  })

[ ] Refresh our validation logic

<div *ngIf='form.controls.username.invalid && form.controls.username.dirty' class="ui error message"><p>Username is a required field</p></div>

[ ] Refactor to use the FormBuilder DSL

  public form : FormGroup;  constructor(private formBuilder : FormBuilder) { }  ngOnInit() {    this.form = this.formBuilder.group({      username: ['', Validators.required],      password: ['', Validators.required],      rememberme: [true],    })  }

[ ] Winning with reactive forms complete

[ ] Tomorrow we’ll tackle End to End testing

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

import { LoginComponent } from './login';{ path: 'login', component: LoginComponent },

[ ] And add that router link to our menu

<a class="ui item" routerLink="/login" routerLinkActive="active">

[ ] Demonstrate the login page

[ ] Now create a rough login form

<form class="ui form error">  <div class="field">    <label>User Name</label>    <input name="username" placeholder="User Name" type="text" required >  </div>  <div class="field">    <label>Password</label>    <input name="password" placeholder="Password" type="password">  </div>  <div class="field">    <div class="ui checkbox">      <input name="rememberme" tabindex="0" type="checkbox">      <label>Remember Me</label>    </div>  </div>  <button class="ui button primary" type="submit">Submit</button></form>

[ ] Now we’re going to use the ngForm module to do magic in creating a form backing model (not our domain model!)

<form class="ui form error" #form="ngForm"

[ ] Add ngModel to each input field

[ ] Add a pipe to see the data in action

{{ form.value | json }}

[ ] Handle the form values in OnSubmit()

(ngSubmit)='OnSubmit(form.value)' OnSubmit(formJson) {    console.log(formJson);  }

[ ] Let’s look at the form model for validation

<input #username='ngModel' ...>  <div *ngIf='username.invalid && username.dirty' class="ui error message"><p>Username is a required field</p></div>

[ ] You can also structure JSON, and do validity checking on whole groups (eg an address)

ngModelGroup='blah'

[ ] Celebrate the win of template-driven forms

[ ] Tomorrow we’ll tackle reactive forms

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

[ ] Implement our error handler (service side) for diagnostic/forensics

errorHandler(err) {    console.log(err);    return Observable.throw(err);  }

[ ] Update our feed component to catch the error (second arg to subscribe) - this should be our user facing error!

ngOnInit() {this.feedService.getCurrentFeed().subscribe( (newTweets) => {  this.tweets = newTweets;}, ( error ) => {  this.errorText = error;});

[ ] Display the error text in the component (conditionally) after we render the form, perhaps, but before the timeline…

<div *ngIf="errorText" class="ui negative message">  <i class="close icon"></i>  <div class="header">    {{ errorText }}  </div></div>

[ ] Throw an error to test it out!!!

throw "Internal Error";

[ ] There are scenarios when you do want to trip these errors yourself - for example, bad status codes come back. Let’s updated updateTweet() in our feed service

return this.http.put(url, body).map(      (resp: Response) => {        console.log(resp);        if (resp.status == 204) {          console.log("Success. Yay!");        } else {        throw `Error fetching tweet ${tweet.id}. Received status code: ${resp.status}`;      }      }).catch(this.errorHandler);

[ ] Finally, let’s handle the “Loading..” screen scenario. In our feed component backing class, we’ll add a loaded property and use it as a toggle. The third argument to a subscribe is an “on complete” or finally block.

loaded = false;ngOnInit() {    this.feedService.getCurrentFeed().subscribe( (newTweets) => {      this.tweets = newTweets;    }, ( error ) => {      this.errorText = error;    }, () => {      this.loaded = true;    });  }

[ ] Update the markup and we’re done

<div *ngIf="loaded">    // existing markup..</div><div *ngIf='!loaded'>  <h2>Loading...</h2></div>

[ ] Let’s slow down our fake request timing in our app.module.ts

InMemoryWebApiModule.forRoot(MockDatabaseService, {     delay: 3000,  rootPath: 'api/'})

[ ] Robustness award unlocked! (level 1 :-)

[ ] Next up we’ll start looking at Form validation (continuing our robust theme).

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.

[ ] Next, we’ll update our service to handle posting a new tweet as a JSON object

postNewTweet(tweetText: string) {    let body = JSON.stringify({      body: tweetText, author: this.userService.getCurrentUser(),      date: new Date(), retweets: [], favorites: []    });    return this.http.post('/api/tweets', body).map(      (resp: Response) => {        console.log(resp.json());        return this.getTweetFromJson(resp.json().data);      });  }

[ ] Update our feed.componoent.ts to subscribe to the create..

OnNewTweet() {    console.log(this.tweetText);    this.feedService.postNewTweet(this.tweetText).subscribe(      (newTweet : Tweet) => {        console.log(newTweet);        this.tweets.unshift(newTweet);      });    this.tweetText = '';  }

[ ] Finally, update our service to handle updates..

updateTweet(tweet: Tweet) {    let body = JSON.stringify(tweet);    let url = `/api/tweets/${tweet.id}`;    return this.http.put(url, body).map(      (resp: Response) => {        console.log(resp);        if (resp.status == 204) {          console.log("Success. Yay!");        }      });}

[ ] Update retweet and favorite routines in service with an update call

this.updateTweet(tweet).subscribe(resp => console.log(resp));

[ ] Let the winning flow!!!

[ ] Next up we’ll start looking into HTTP Error Handling

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

[ ] Run an ng build to copy it over to dist and have a look

[ ] Update system-config.ts - but only in the top section of the file

/** Map relative paths to URLs. */const map: any = {  'angular2-in-memory-web-api' : 'vendor/angular2-in-memory-web-api'};/** User packages configuration. */const packages: any = {  'angular2-in-memory-web-api': {        main: './index.js',        defaultExtension: 'js'   }};

[ ] Now we import the actual classes into our app\app.module.ts

// Imports for loading & configuring the in-memory web apiimport { InMemoryWebApiModule } from 'angular2-in-memory-web-api';import { MockDatabaseService }  from './mock.database.service';    imports: [ BrowserModule, FormsModule, routing, HttpModule,    InMemoryWebApiModule.forRoot(MockDatabaseService, {         delay: 100,  rootPath: 'api/'    }) ],

[ ] Implement our mock.database.service.ts method

import { InMemoryDbService } from 'angular2-in-memory-web-api';import { Tweet } from './tweet';export class MockDatabaseService implements InMemoryDbService {  createDb() {    let friends = [       "Mary", "Joe", "Karen", "Phil", "Toni"     ];    let tweets = [      new Tweet(1, 'Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', 'Glen', new Date(), ['Joe'], []),      new Tweet(2, 'Measuring programming progress by lines of code is like measuring aircraft building progress by weight', 'Joe', new Date(), [], ['Mary']),      new Tweet(3, 'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', 'Mary', new Date(), ['Glen'], ['Mary']),      new Tweet(4, 'People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones', 'Glen', new Date(), ['Joe', 'Mary'], []),      new Tweet(5, 'You can’t have great software without a great team, and most software teams behave like dysfunctional families.', 'Joe', new Date(), [], ['Mary', 'Glen']),    ];    return { 'tweets' : tweets, 'friends' : friends };  }}

[ ] Update the Tweet constructor to handle that id field

constructor(public id : number, public body: string, public author: string, public date: Date, public retweets: Array<string>, public favorites: Array<string>)

[ ] Fix any code that the new id field on Tweets breaks

[ ] Demo that direct URL routing is not messed with

[ ] Demo that you can debug into your new class/api

[ ] Run it and celebrate the win!

[ ] Next up we’ll start looking into CRUD http

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)

[ "Glen", "Joe", "Mary" ]

[ ] Inject our http service into our friend.service.ts

import { Http, Response  }    from '@angular/http';import { Observable } from 'rxjs';constructor(private userService: UserService, private http : Http) { }

[ ] Implement our getFriends() method using http.get()

getFriends() : Observable<string[]> {return this.http.get('/friends.json').          map((resp : Response) => resp.json() as string[]) ;}

[ ] Update the our friends.component.ts to subscribe to the Observable

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

[ ] Run it and celebrate the win!

[ ] Next up we’ll start looking into CRUD http

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

<div class="ui comments" *ngIf='friends.length'>  <div class="comment" *ngFor='let friend of friends'>    <a class="avatar">      <img src="./avatars/{{friend.toLowerCase()}}.jpg">    </a>    <div class="content">      <a class="author">{{friend}}</a>            <div class="actions">        <a >Details</a>      </div>    </div>  </div></div><div *ngIf='!friends.length'>  <h2>THere are not any friends here</h2></div>

[ ] Show the friends list

[ ] Let’s create a component for deep linking into our friends details

ng g c friend

[ ] Update our app.routing.ts to point to the new component

import { FriendComponent } from './friend';{ path: 'friends/:friendId', component: FriendComponent },

[ ] Implement the new component friend.component.ts logic to get params

  friendId = '';  constructor(private route : ActivatedRoute) { }  ngOnInit() {    this.route.params.map(params => params['friendId']).subscribe((friendId) => {      this.friendId = friendId;      console.log(friendId);    })  }

[ ] Update the friend.component.html view file to output the friend:

<h2>  This friend is {{ friendId }}</h2>

[ ] Update our router link in feeds.component.html to pass the parameters:

routerLink="/friends/{{friend}}"

[ ] Run it and cheer!

[ ] Next up we’ll start looking into http for remote data fetching

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 messagesng 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

import { routing,     appRoutingProviders } from './app.routing';providers: [ UserService, FeedService, appRoutingProviders ],imports: [ BrowserModule, FormsModule, routing ],

[ ] Then update our app component html in app.component.html

<app-menu></app-menu><router-outlet></router-outlet>

[ ] Then we’ll need to update our menu to link to these new routes in menu.componont.html

<a class="item" routerLink="/feed" routerLinkActive="active">    Home</a><a class="item" routerLink="/messages" routerLinkActive="active">    Messages</a><a class="item" routerLink="/friends" routerLinkActive="active">    Friends</a>

[ ] Run application and celebrate

[ ] Tomorrow we’ll deep-route our User names

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

[ ] Then refactor our tweet array

tweets = [    new Tweet('Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', 'Glen', new Date(), ['Joe'],  []),        new Tweet('Measuring programming progress by lines of code is like measuring aircraft building progress by weight','Joe', new Date(),  [],  ['Mary'] ),    new Tweet('Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', 'Mary',  new Date(),  ['Glen'],  ['Mary']),    new Tweet('People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones',  'Glen',  new Date(),  ['Joe', 'Mary'],  [] ),        new Tweet('You can’t have great software without a great team, and most software teams behave like dysfunctional families.',  'Joe',  new Date(),  [],  ['Mary', 'Glen'] ),  ]

[ ] Create a new feed service

ng g s feed

[ ] Then we’ll move all our logic out of our feed component and into feed service (injecting our UserService into our FeedService

private tweets = [    new Tweet('Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', 'Glen', new Date(), ['Joe'],  []),        new Tweet('Measuring programming progress by lines of code is like measuring aircraft building progress by weight','Joe', new Date(),  [],  ['Mary'] ),    new Tweet('Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', 'Mary',  new Date(),  ['Glen'],  ['Mary']),    new Tweet('People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones',  'Glen',  new Date(),  ['Joe', 'Mary'],  [] ),        new Tweet('You can’t have great software without a great team, and most software teams behave like dysfunctional families.',  'Joe',  new Date(),  [],  ['Mary', 'Glen'] ),  ]  constructor(private userService : UserService) {   }  getCurrentFeed() : Array<Tweet> {    return this.tweets;  }  private isUserInCollection(collection : string[], userId : string) : boolean {      return collection.indexOf(userId) != -1;  }  postNewTweet(tweetText : string) {    this.tweets.unshift(          new Tweet(tweetText, this.userService.getCurrentUser(), new Date(), [], [])        );  }  reTweet(tweet : Tweet) {    if (!this.isUserInCollection(tweet.retweets, this.userService.getCurrentUser())) {      tweet.retweets.push(this.userService.getCurrentUser());    }  }  favoriteTweet(tweet : Tweet) {    if (!this.isUserInCollection(tweet.favorites, this.userService.getCurrentUser())) {      tweet.favorites.push(this.userService.getCurrentUser());    }  }

[ ] Let’s inject our feed service into our Feed component

import { FeedService } from '../feed.service';import { Tweet } from '../tweet';tweets = [];constructor(private userService : UserService, private feedService : FeedService) { }ngOnInit() {this.tweets = this.feedService.getCurrentFeed();}

[ ] Implement our logic

  OnFavorite(tweet) {    this.feedService.favoriteTweet(tweet);  }  OnRetweet(tweet) {    this.feedService.reTweet(tweet);  }  OnNewTweet() {    console.log(this.tweetText);    this.feedService.postNewTweet(this.tweetText);    this.tweetText = '';  } 

[ ] Update our view

liked: tweet.hasFavorited(userService.getCurrentUser())retweeted: tweet.hasRetweeted(userService.getCurrentUser())

[ ] Enhance our Tweet class

hasFavorited(userId : string) : boolean {    return this.favorites.indexOf(userId) != -1;}hasRetweeted(userId : string) : boolean {    return this.retweets.indexOf(userId) != -1;}

[ ] Run application to fan hysteria.

(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

[ ] Then we’ll implement a current user method

getCurrentUser() : string {    return 'Glen';  }

[ ] Let’s write a test for that service (using Jasmin)

expect(service.getCurrentUser()).toBe('Glenz');

[ ] Run the test

ng test --build=false --watch=false 

[ ] Fix the test

[ ] Inject the UserService into the FeedComponent

import { UserService } from '../user.service';providers: [UserService],constructor(private userService : UserService) { }

[ ] Replace all our backing component refs to ‘Glen’

[ ] Replace all our view component refs to ‘Glen’

[ ] Move the provides to the ng Module level

[ ] Talk about implications of exporting ngModule services

[ ] Cue Applause. Tomorrow we’ll tackle the FeedService

Let’s take a moment to brag:

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

#mytext(click)='OnNewTweet(mytext)'

[ ] We’ll need a method to handle the new tweet

OnNewTweet(myTweet) {    console.log(myTweet.value);}

[ ] Need to add the forms module to the app.module.ts

import { FormsModule } from '@angular/forms';imports: [ BrowserModule, FormsModule ],

[ ] Binding to a backing property MVVM

tweetText = '';

[ ] Add the ngModel directive - put the banana in the box

[(ngModel)]='tweetText'

[ ] Change the OnNewTweet to take no args

OnNewTweet() {    this.tweets.unshift(      { body: this.tweetText, author: 'Glen', avatar: 'glen.jpg', date: new Date(), retweets: [], favorites: [] }    );    this.tweetText = '';}

[ ] Live the dream!

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

[ ] But we want that to be conditional, so we’ll change the classes

.liked {    color: red !important;} .retweeted {    color: red !important;}

[ ] Be good to do this conditionally using ngClass directive

[ngClass]='{ retweeted: isUserInCollection(tweet.retweets, "Glen") }'[ngClass]='{ retweeted: isUserInCollection(tweet.retweets, "Glen") }'

[ ] Cheer our awesomeness. We’ve learned about (events) and [properties]. Tomorrow, the textbox cometh!

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

isUserInCollection(collection : string[], userId : string) : boolean {    return collection.indexOf(userId) != -1;}OnFavorite(tweet) {    if (!this.isUserInCollection(tweet.favorites, 'Glen')) {        tweet.favorites.push('Glen');    }}OnRetweet(tweet) {    if (!this.isUserInCollection(tweet.retweets, 'Glen')) {        tweet.retweets.push('Glen');    }}

[ ] Demonstrate only adding yourself once

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

• That Comment Layout from Semantic UI
• Free Icons for Twitter Templates

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:

tweets = [     { body: 'Some tweet text', author: 'Glen' },    { body: 'Some other text', author: 'Karen' },]

[ ] Put in our layout code from Semantic UI into timeline.component.html

<div class="ui comments">  <div class="comment" *ngFor='let tweet of tweets'>    <a class="avatar">      <img src="/avatars/{{tweet.avatar}}">    </a>    <div class="content">      <a class="author">{{tweet.author}}</a>      <div class="metadata">        <span class="date"> {{tweet.date  }}</span>      </div>      <div class="text">        {{tweet.body}}      </div>      <div class="actions">        <a class="reply">Reply</a>        <a class="like">          <i class="like icon"></i> {{tweet.favorites.length}} Favourites        </a>        <a class="retweet">          <i class="retweet icon"></i> {{tweet.retweets.length}} Retweets        </a>      </div>    </div>  </div></div>

[ ] Then fill it out with some real data

tweets = [    { body: 'Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', author: 'Glen', avatar: 'glen.jpg', date: new Date(), retweets: [ 'Joe'], favorites: [] },    { body: 'Measuring programming progress by lines of code is like measuring aircraft building progress by weight', author: 'Joe', avatar: 'joe.jpg', date: new Date(), retweets: [], favorites: ['Mary'] },    { body: 'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', author: 'Mary', avatar: 'mary.jpg', date: new Date(), retweets: ['Glen'], favorites: ['Mary'] },    { body: 'People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones', author: 'Glen', avatar: 'glen.jpg', date: new Date(), retweets: [ 'Joe', 'Mary'], favorites: [] },    { body: 'You can’t have great software without a great team, and most software teams behave like dysfunctional families.', author: 'Joe', avatar: 'joe.jpg', date: new Date(), retweets: [], favorites: ['Mary', 'Glen'] },  ]

[ ] Put in our conditional show of tweets or “No tweets today” using *ngIf

<div class="ui comments" *ngIf='tweets.length'> </div><div *ngIf='!tweets.length'>  <h2>No tweets today.</h2></div>

[ ] Put in our pipe for the date to get a nicer layout

{{tweet.date | date:'h:mm:ss dd/mm/yy' }}

[ ] Deploy to crowd applause

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

• The Official Guide
• A Practical Guide - cool deep-dive from the field

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.

import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';@NgModule({    declarations: [ AppComponent ],    providers: [ ],    imports: [ BrowserModule ],    bootstrap: [ AppComponent ]})export class AppModule { }

[ ] Updated your bootstrap in main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { AppModule } from './app/app.module';platformBrowserDynamic().bootstrapModule(AppModule);

[ ] Move your directives into declarations

import { MenuComponent } from './menu';import { FeedComponent } from './feed';@NgModule({    declarations: [ AppComponent, FeedComponent, MenuComponent ],

[ ] Remove all your providers and declarations in app.componont.ts

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>