Reload! Reload! Reload!

The Reload button in Chrome has three options. If you open the Chrome DevTools (F12) the three options are visible by holding down the “Reload this page” button.

Normal Reload

Windows keyboard shortcut: F5 or CTRL + R

Reloads the current page.

Hard Reload

Windows keyboard shortcut: CTRL + Shift + R

Reloads the current page but ignoring the cached content.

Empty Cache and Hard Reload

Windows keyboard shortcut: Not available

This option empties the entire Browser cache and not just the parts for the current page. Given the impact of this option it makes sense that there is no keyboard shortcut which might accidentally trigger this option.

Acknowledgements

Scott Hanselman’s keynote at NDC London 2019 where he first made me (and half the hall if the sounds of “ooooo’s” is anything to go by) of this functionality in Chrome

This answer from Stack Overflow. Accessed 23/05/2019

This answer from Stack Overflow. Accessed 24/05/2019

My experience of being a CodeClub volunteer

I have wanted to volunteer to help run a Code Club since first hearing about it back in June 2013 thanks to this episode of the Ubuntu Podcast where they interviewed one of the founders; Linda Sandvik

The universe had different plans for me for a while but it was in the back of mind that I needed to at least try one term of teaching kids to code even though I have never worked with children or have done any sort of volunteering.

Code Clubs are usually run as an after school club and that was a problem or what I thought was a problem. As a freelancer I am usually at a client’s site and leaving early once a week, every week is not usually an option. Whilst working at one client, I met a Code Club volunteer who was helping run a Code Club from a library which started at a more achievable time.

Finding this out coupled with my visit to a Code Club session made me double down my efforts to become a volunteer.

I got in touch with my local library with a view to getting a Club started and met with the Library outreach worker who was also enthusiastic about getting a Code Club up and running. So fast forward to January 2019 and the first Code Club where I will be volunteering is 24 hours away.

I remember being very nervous before the first session. I had prepared myself as much as I had thought possible. I had completed the first Scratch project, Rock Band so many times that I could do it from memory and probably without looking at the screen. On arrival I met with the two other volunteers and the Library outreach worker. I had initially thought there would be too many volunteers for the 8 children but like most assumptions this turned out to be incorrect.

Once the first session got under way and the questions from the children came in the time passed quickly and soon it was over. Wow. I felt like I was walking on air on the way back to the car. It had been an amazing experience and one that I had waited many years for. I felt I had achieved something after that first session.

I was still nervous the following week for the second session although noticeable less than the first session. By week three the nerves although still present were being replaced by getting excited and looking forward to the upcoming session. I was still completing that weeks Scratch project many times and and trying to second guess what questions would come up. However I was starting to see there wasn’t much value in doing this because the children were rarely were interested in creating identical copies of the Scratch project for that week.

Instead they took the projects in all sorts of weird and wonderful directions. It was magnificent and something I wasn’t prepared for at all. The children’s technical ability is amazing. They are rarely phased by new things being introduced and all were very comfortable in using a computer.

Some weeks were more successful than others. The most popular weeks were the gaming projects especially Boat Race when we arranged competitions with the other volunteers and children to get the best time. It was also my favourite session out of the seven.

All too soon the Club had reached the seventh and last session of our first term. There was a huge appetite from both children and parents to continue so after a couple of months break I will be back starting again in May for another term.

I can’t wait.

SQL Developer: New worksheet, new session?

SQL Developer loading. Yesterday.

Default Behaviour

The out of the box behaviour of SQL Developer is that SQL worksheets share the same connection.

What does that mean?

If you perform a insert, update or delete in one worksheet without issuing a commit, the result(s) can be viewed in another shared worksheet. This can be illustrated by the following example.

After launching SQL Developer and connecting to a database, I start two new SQL worksheets

The next two screen shots show that for both SQL worksheets that the table t is empty

Next using using the first worksheet, an insert into table t operation is performed. No commit has been issued.

Navigating to the second worksheet and querying the table again and the newly inserted row can be seen.

Unshared Connections

It is possible to open a SQL Worksheet with a dedicated database connection. In SQL Developer this is called an unshared connection.

From an existing worksheet the keyboard shortcut on Windows is CTL + SHIFT + N. This will only work from a shared worksheet. It is not possible to open a new unshared worksheet from an existing unshared worksheet.

The following screenshots demonstrates how an unshared connection differs from a shared connection.

Two shared SQL Worksheets: hr and hr~1 are started along with and one unshared: hr (Unshared). In the first worksheet I perform an insert operation which has not been committed.

Switching to the second shared worksheet, the uncommitted record is shown after querying the table.

Moving to the unshared connection and querying the table no row is returned.

The unshared worksheet is working as expected as a new session will not see uncommitted records.

Acknowledgements

Jeff Smith, the Oracle Product manager for SQL Developer has a superb blog where he shares many SQL Developer hints and tips. One of the posts
Opening Unshared Worksheets was the inspiration and source for this post.

NDC London 2019

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…

Hanselminutes

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

An introduction to Angular EventEmitters

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.



Adding Bootstrap to your Angular App using VS Code

Introduction

In this how to guide, I will be adding Bootstrap 4 to an Angular 7 app using a Content Delivery Network (CDN)

Update 26/03/2019: This post has been replaces an earlier and incorrect version I had written on installing Bootstrap with Angular.

Prerequisites

In this guide I have used VS Code 1.32.3, Chrome 73, Angular 7, Bootstrap 4

Create a new Angular Application

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

ng new bootstrap-cdn

Accept the defaults regarding Angular routing and style sheet format

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

Adding Bootstrap

With the skeleton of the Angular app in place using your favourite browser navigate to the Bootstrap home page and select Get Started.

You are then shown the CSS and Javascript CDN links:

Copy the CSS link and paste into the Angular index.html in the <head> section before all other stylesheets. Copy the JS links and paste them at the bottom of <body>. Your Index.html should now look like:

Save your changes.

Testing

Navigate to app.component.html and add a button with a Bootstrap class

 <button class="btn btn-primary"> 
This button is styled with Bootstrap </button>

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