oraclefrontovik

Sharing what I learn

Overview

NDC London 2019 managed the impossible by being even better than last year.

A lemon meringue pie at NDC London 2019

How is that possible? Everything just seemed more ++. The facilities, the choice of food, snacks and beverages, the swag socks.
Sure sometimes the lines for food were long during the traditional lunch hours and the halls were very busy but you could always find a place to talk or pull out your laptop.

Talks

I attended 21 talks during the three days and I took away at least one thing from each one that is going to make me a better developer.

This year there were many talks that were focused on the life of the developer and the nonsense that he or she finds themselves in. From the shocking state state of agile, to dealing with incompetent managers and finding themselves thrust into leadership roles

The slides used during talks are worth mentioning. One of the things speakers at NDC don’t do is to use them as a crutch or read from them. They are used sparingly and only then to add something to the talk. They are usually innovative in their design or enjoyable to look at. Fortunately both bullet points and Death By PowerPoint presentations are not on the agenda.

My Top four

My favourite talks this year were

  1. Friday’s key note – Scott Hanselman
  2. Everything is Cyber-broken – Scott Helme & Troy Hunt
  3. Leadership Guide for the Reluctant Leader – David Neal
  4. Insecure Transit – Sam Newman

It is worth keeping an eye on the NDC site so when the videos of the presentations appear I recommend watching these. Scott and Troys talk was not recorded because it was part of the after show party.

Scott Hanselman during Fridays keynote

My Conference Agenda

Wednesday

Keynote: Welcome to the Machine – Hadi Hariri

Reading Other peoples Code – Patricia Aas

Teaching New Tricks – How to enhance the skills of experienced developers – Clare Sudbery

Insecure Transit – Microsoft Security – Sam Newman

Why Your ASP.NET Core application won’t scale – Damian Edwards, David Fowler

Avoiding the Agile Alignment Trap – Mike Long

Hack To The Future – Troy Hunt

Thursday

ComSci and My Day Job – Rob Conery

Leadership Guide for the Reluctant Leader – David Neal.

Beyond Developer – Dan North

Think like a Trainer: Improving Your Communication Skills – Olivia Liddell

ML.NET for Developers without any AI experience – Lee Mallon

A Practical Guide to Deep Learning – Tess Ferrandez-Norlander

Dot Net Rocks Live with Christine Yen

Everything is Cyber-broken – Scott Helme & Troy Hunt

Friday

Keynote: The Microsoft Open Source Cinematic Universe Phase 2 – Scott Hanselman

Ctrl-Alt-Del: Learning to Love Legacy Code – Dylan Beattie

Versioning 1.0.1 – Jon Skeet

Solving Diabetes with an Open Source Artificial Pancreas – Scott Hanselman

Crash, Burn, Report – Scott Helme

Deep Learning in the world of little ponies – Galiya Warrier

Photos

The perfect end to a perfect conference

I got to meet two of my programming heroes…

It was early on a cold, dark, wet morning and I was not looking forward to the commute. I wasn’t sure what made this one challenging. Was it the first one after a three week break? Perhaps it me forgetting albeit temporarily the average journey time of 90 minutes. The truth was probably a combination of these and other factors.

Fortunately the first podcast I listed to was:

and as I tweeted later that day

Hanselminutes is one of my favourite podcasts. It is hosted by Scott Hanselman and each week Scott sits down with a guest to discuss a topic that is of interest to developers regardless of experience or language preference.

The show starts with no throat clearing and with the guest introductions complete, Scott dives straight in and the show gets underway. The shows are conversational in style with Scott and his guests discussing this weeks topic and sharing stories. Scott gets the best out his guests by asking the right questions, listening without interrupting, clarifying opaque terms and deciphering acronyms. The wide range of topics discussed, with the current weeks topic different from the previous weeks is part of the shows secret sauce.

The result of listening to Hanselminutes is that I have become a better developer. Thanks to Scott and his guests generosity I have become more informed in areas of software development that I hadn’t thought about. Listening has also increased my desire to level up as well as experimenting with the “thing” that was discussed on that weeks show.

Thank you Scott. One day I hope to be a guest. One day…

To close out, here are some of my picks from the Hanselminutes 2018 back catalogue:

Gaming for all with the Xbox Accessibility Controller and John Alexander

How GDPR is affecting the American Legal System with Gary Nissenbaum

Forge Your Future with Open Source and VM Brasseur

Mr. Robot Disassembled with Ryan Kazanciyan

Functional Programming, F#, and Cloud Containers with Lena Hall

One use of an EventEmitter in Angular.io is for a child component to tell it’s parent something of interest has happened or to put it another way; they can be used to allow data to flow out of your component.

Below is a diagram of the application which I am going to be using in this post. It shows the parent (App-Root) and the child (App-Child) components. This post will build an application so that when something (in this case a button press) occurs in the child component the parent component should know about it.

When learning about EventEmitters I found it useful to understand the component hierarchy because without it I found it easy to become disorientated and end up not knowing what component needed to emit the event and which one needed to handle it.

Create a brand new application. If you get stuck or want to look at the completed example, it is up on GitHub.

ng new eventemitter-intro

Create a new component. I am using the short cut of g c (generate component) and spec = false to omit the testing file.

ng g c child --spec=false

The final step in setting up the application is to delete all the content from the app.component.html file and replace it with:


<app-child></app-child>

At this point your new Angular App should reflect the diagram with a parent component; app-root and a child; app-child and in Visual Studio Code looks like this:

Navigate to the child.component.html and add the following:

<p>  
<button>This button</button>
</p>
<p>
<button>That button</button>
</p>

Run your application using:

ng serve --open

You should see something similar to:

Now back to the child.component.html and add click events to the buttons:

<p>  
<button (click)="onButtonClicked()">This button</button>
</p>
<p>
<button (click)="onButtonClicked()">That button</button>
</p>

The click events are being bound to functions that have not been written yet so that will be the next step. Navigate to child.component.ts and change it so it now looks like this:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({ selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']})

export class ChildComponent implements OnInit {
@Output() whichButton = new EventEmitter<void>();

constructor() { }
ngOnInit() { }

onButtonClicked() {
this.whichButton.emit();
}

}

The first change is:

@Output() whichButton = new EventEmitter<void>();

This line creates a new EventEmitter property called whichButton and is decorated with @Output(). To use the @Output decorator and the EventEmitter they are added to the import statement at the top of the file.

Next is the method that the click event on both of the buttons use. It invokes the emit method of the whichButton property.

At this point the child component now has been set up to emit an event each time one of it’s buttons is pressed. Now it’s on to the parent component to write the handler for this event.

Navigate to app.component.html and replace:

<app-child></app-child>

with

<app-child (whichButton)="whichButtonPressed()"></app-child>
<p>
{{ buttonPressed }}
</p>

So whenever there is a “whichButton” event emitted by app-child it will be handled by the whichButtonPressed method.

whichButton is the name of the EventEmitter property from the child component and whichButtonPressed() is the name of a method that will handle the event. This method hasn’t been written yet but will be in the next step. String interpolation will be used to display the name of the button that has been pressed.

Navigate to app.component.ts and add the following:

import { Component } from '@angular/core';

@Component({ selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']})

export class AppComponent {
buttonPressed: string;

whichButtonPressed() {
this.buttonPressed = (<HTMLButtonElement>event.currentTarget).innerText;

}

}

What is interesting here is that the code can access the event object without needing to pass it in as a parameter. If you want to find out more about the $event take a look at the Angular docs.

buttonPressed is a property that the string interpolation on
app.component.html will use to display which button has been pressed. This property is set by the method whenButtonPressed().

Here is the finished application showing the buttons that are on the child component and the result of pressing one of them being handled by the parent component.



In this how to guide, I will be adding Bootstrap 4 to a new Angular 7 application without leaving VS Code.

Prerequisites

In this guide I have used VS Code 1.30.1, Chrome 71, Angular 7, Bootstrap 4

Create a new Angular Application

First step is to create a new Hello World Angular app. So after starting VS Code and starting a new terminal session, run:

ng new helloworld

When asked, accept the defaults regarding Angular routing and style sheet format

Once the app has been created, run it to ensure it works.

Install Bootstrap

With the skeleton of the Angular app in place it is now time to use Node Package Manager (npm) to install Bootstrap.

From the Angular app directory that you just created run:

<<your path to >>\helloworld>npm install bootstrap

This will download the latest version, which at the time of writing was 4.2.1.

Configuring your app to use Bootstrap

Copy the relative path of the min version of Bootstrap css (Right click on the file and select copy relative path) On my PC this path was:

node_modules\bootstrap\dist\css\bootstrap.min.css

To make the Angular app aware of Bootstrap, open the file

<<your path to >>\helloworld\angular.json

now paste in the relative path of the bootstrap.min.css file, replacing the folder separator back slashes for forward slashes. so the relative path now becomes:

"node_modules/bootstrap/dist/css/bootstrap.min.css", 

Note the quotations and comma, these are important and should be included. This is how this part of angular.json should now look like

Save your changes.

Testing

Normally Angular changes are immediately reflected but when making changes to the angular.json file I have noticed that you have to restart your local dev server in order for the changes to be picked up. Once done and with the your app running again using Chrome DevTools (Press F12) you can see Bootstrap is now included within your page.

Another check to ensure Bootstrap is correctly configured is to style a button so add the following button anywhere within the app.component.html file.


<button class="btn btn-danger">Don't press this!</button>

You should then see the button, styled by Bootstrap appear on your page. If not press F12 and investigate any errors displayed.

Summary

In this post I showed you how to add Bootstrap to a brand new Angular Application.

Books on Progressive Web Apps, JavaScript frameworks, Doom, a 20 year old classic and a developer life manual. Here are the technical books I read this year. 

Building Progressive Web Apps

Following my attendance at NDC 2018 I wanted to find out more about Progressive Web Apps (PWA) so I started with this book.

It became apparent quite quickly that I didn’t have the vanilla JavaScript knowledge to really understand the examples and that I needed to go on a detour to improve my JavaScript knowledge and return here once I had.

The four chapters of the book that I did get through were well written.  

JavaScript & JQuery

This book has been in my library since 2015 it is one of my favourite books on learning a programming language.  I still return to it when I need to understand a JavaScript or JQuery “thing”.

Don’t let the page count of 600+ put you off. This is not a dense literature -esque book. The text is clear and concise and is complemented by  illustrations in colour.

So after starting on the PWA book above I knew I had relearn JavaScript fundamentals so I had an enjoyable time getting back up to speed. An updated second edition of this book is eagerly awaited.

Detour

Once my JavaSript knowledge had improved I should have returned to PWA. However the podcasts I was listening to around this time had been talking about the various JavaScript frameworks used to build Single Page Applications (SPA). In the past I had ignored these because they were appearing almost one a week and stability appeared to be an issue. Now they were starting to mature, the breaking change version of Angular from JS to IO was already “old” by framework standards so I took a detour to SPA land starting with Angular.

The ng-book 

I had I have already talked about this book here. Suffice to say I am not a fan.  

I became so fed up with wrestling with this book, especially the chapter “How Angular Works”  it put me off Angular for a while and made me switch to another SPA framework, React.




The Road to Learn React

At the time of buying this book, it had only good reviews on Amazon.co.uk. However I have now seen there is a 2 star review which although a little harsh mirrors some of my own thoughts.

Another buying signal was the 180 page count so it was not going to be another behemoth learning “X” programming language door stop. Unfortunately I didn’t get on with the format, it is A4 which means it takes a lot of desk space when the book is open and you are working through the examples and trying to see where you went wrong. There is plenty of white space on each page and I can’t see a reason why it was published at this size.

Format aside I did enjoy the authors writing style and easily got over half way through the book with little effort. React however wasn’t appealing to me and I have since returned to continue my SPA education using Angular coupled with a Udemy course.

Masters of Doom

This superb book tells the story of John’s Carmack and Romero who created id Software which after some excellent releases developed Doom which took them and their company into the stratosphere.  

Although new to me, this book was originally published back in 2003 and having been a fan of First Person Shooters (FPS) since playing the shareware version of Doom on a friends 486 this book was almost as additive and I struggled to put it down and it became one of my favourite reads of any genre this year. 

Software Project Survival Guide

I was reminded that I should read this book after I had listened to an episode of Seth Godin’s excellent podcast where he made reference to it.

Second hand copies are available for a bargain on Amazon and although now over 20 years old it is should be no surprise coming from the author of Code Complete that it still stands up well today. It is jam packed with sage advice that will help make running your software project a better experience for everyone involved. Some of stand out parts were the coverage of Team Dynamics, Estimating, Staged Delivery (i.e. sprints. This is in 1997!) and finally how developers should address the most difficult part of the application first.

A superb book. 

Soft Skills: The software developer’s life manual

This was the last book that I managed to get in before the end of the year. I was made aware of it whilst listening to an episode of Dave Rael’s podcast Developer on Fire.

It is a difficult book to describe so I will let the rear cover do that job:
…is a unique guide, offering techniques and practices for a more satisfying life as a professional software developer

With forewords by Scott Hanselman and Uncle Bob, it has high standards to keep up and it doesn’t disappoint. The book is split into seven sections covering a disparity of topics such as career, marketing yourself, learning, financial matters and physical fitness. The chapters are small which encourages you to dip in and out instead of reading the book cover to cover. The writing is engaging, in a warm friendly style that is never condescending or patronising. It is like having the mentor you always wanted by your side.

The book has been a joy to read and some of the chapters that have helped me the most were on don’t be afraid to look like an idiot and learning. In fact I am using John’s tips as I learn Angular and I am seeing results already.

It doesn’t matter if this is your first or 20th year as a developer, you will get something out of this book.

Summary

All the books I have read this year have enriched me in one way or another, yes even the ng book.

Good technical books remain a screaming bargain and one that many developers today overlook.

Virtual Box

I use Virtual Box with Windows 10 as the Guest Operating System. It is a combination that works well and other than the usual Windows update dance, it doesn’t cause me any distractions. 

Visual Studio Code

All my Angular development have been built using Visual Studio Code which allows me to build, compile and run my projects without leaving the editor. I switched from Atom and I haven’t looked back. Using it is a joy and it allows me to focus on the task in hand. Superb Stuff. 

For Angular Development I am using the Gitlens, TSLint and Debugger for Chrome extensions

Chrome DevTools

I remember the relief I felt when a friend showed me Firebug for the first time. I was having a torrid time getting to the bottom of an opaque JavaScript problem. Fortunately Tools for the Web Developer have come a long way since then and I use the Chrome DevTools every time I work with Angular; from debugging my code to inspecting elements to see what Angular has welded on to them. The things you need most are shown whilst tools you use on lesser occasions are tucked neatly away with menus that make discoverability easy. 

I haven’t got any real experience of using the Firefox Developer Tools so if I am missing something useful please let me know in the comments.

Installed but not yet used: Chrome DevTools extension: Angular Augury

Angular Augury is an extension to Chrome that was recommended to me via the Udemy course I am taking. This extension is used for debugging and profiling your Angular Application. I haven’t had to use it yet so will revisit this post once I have some real world experience of using it.  

Err. That’s it. How does your development environment differ? What am I missing? 

I have spent many months this year learning Angular. More accurately I have wrestled with Angular, left to try React then decided that to get the most out of learning these frameworks I need to brush up on my vanilla JavaScript skills which I proceeded to do before finally returning to Angular. Phew!

I have used several resources to get up to speed with Angular and what I found useful and others that were not so are listed here. At the end of the post I ask for resources that have helped you learn Angular so if you don’t get that far please leave your recommendations in the comments

The good: Udemy Course

A friend recommended the Udemy course Angular – The Complete Guide by Maximilian Schwarzmüller. At the time of writing I am about half way through and it is the most enjoyable Angular resource I have found. Max is a friendly, enthusiastic teacher and the course is highly polished and easy to follow along building the sample applications and experimenting.

In addition to the discussions around language features there are lots of useful nuggets such as how to understand the opaque Angular errors that you are bound to see in your early days with the framework and the use of the browser add in Augury which is a very useful tool for debugging and profiling Angular applications.

The bad: ng-book

I have only purchased one book on Angular which was the eBook edition of the ng-book The print version was not available at the time. This is a large book running to 650+ pages. I didn’t enjoy it and only got as far as chapter 3 before giving up. Not sure why I didn’t enjoy it, perhaps I didn’t like the style or the fact that I prefer printed books? I lost patience by chapter three as the app wouldn’t work and I had no idea why. 


If you have a recommendation for an Angular book please do get in touch.   

The ugly: Official Docs

My adventures with Angular started with the Angular home page, I built the Tour of Heroes sample application and have wandered through the rest of the documentation look for other stuff to try out.

I have found the documentation to be dry and not a place that rewards you for spending much time there and so far I have had little reason to return. Problems that I encounter normally result in a Google search followed by a visit to the StackOverflow question.

Perhaps as my experience with the framework grows and I need to look things up I will be spending more time with the docs. If my opinion changes I will ensure that I update this post. 

Help needed

If you have Angular resources that you think may help me no matter how small please leave a comment.