#VSCode: Quickly clone a git repository from #GitHub

download.pngI really enjoy Pluralsight.com as a place to refresh and learn new tech. In their courses they usually have example code on public GitHub repositories. Here’s the fast way to get them downloaded and up in VSCode (Visual Studio Code)

Here’s the fastest way to download a repo and open it in Visual Studio Code in the folder you’d like.

Step 1: Get the repo link.

For this example I’m using https://github.com/DanWahlin/Angular-JumpStart

Open the that link and press the Clone or Download button, then the Copy Link button seen here:

2020-03-11 09_43_03-DanWahlin_Angular-JumpStart_ Angular and TypeScript JumpStart example applicatio.png

Step 2: Open Windows Explorer to the folder you’d like it, then right click the folder and choose Open with Code 

2020-03-11 09_45_57-.png

Step 3: With VS Code open, press CTRL+<back tick> to open the Terminal

Type in git clone, then paste the URL:

2020-03-11 09_48_40-Welcome - Angular Architecture and Best Practices - Visual Studio Code.png

Done!

2020-03-11 09_50_11-Welcome - Angular Architecture and Best Practices - Visual Studio Code.png

 

#VSCode: Adding Windows Explorer Context Menus

1200px-Visual_Studio_Code_1.35_icon.svg.pngIn order to open VSCode in a specific folder, I used to Right Click the folder with SHIFT help down then choose Open PowerShell Window Here, then type code .

2020-03-11 09_05_44-Select Windows PowerShell.png

But, it turns out you can add Open in Visual Studio Code much easier if you choose the option in the Visual Studio Code installer.

If you have VSCode installed or not, just run the installer again. You can get it here.

Select these options:

2020-03-11 09_08_06-Setup - Microsoft Visual Studio Code (User).png

Now, when you right click a folder in Windows Explorer (SHIFT is not needed) you can choose the option:

2020-03-11 09_09_17-.png

Pro tip:

When you hold the SHIFT key down, you’ll get more options:

2020-03-11 09_11_22-.png

 

 

#VSCode: One #Angular Workspace with multiple projects

In VS Code (Visual Studio Code) you can create a single Workspace with 1 git repo but contain multiple projects. This lets you create library and app and contain them all under the same angular.json as well.

Here’s how.

Create a folder where you’d like to create the Workspace. In my example e:\ngLearn\CLIPlayGround

2020-03-09 10_42_08-Select Windows PowerShell.png

VS Code will appear. Open the Terminal Ctrl+Shift+`

Now, ask the CLI to create an Workspace, but with no default application:

ng new –createApplication=false

In the prompt give your workspace a name, like my-workspace

2020-03-09 10_46_33-CLIPlayGround - Visual Studio Code.png

It’s take a few minutes to set up. If you open Windows Explorer you’ll see the new workspace made, but without any application inside:

2020-03-09 10_47_29-my-workspace.png

Let’s now add a few applications by using the commands in the new folder

cd .\my-workspace\

ng g application

Run this twice and you’ll then notice there are 2 applications in your workspace: under a new Projects folder

2020-03-09 10_50_11-CLIPlayGround - Visual Studio Code.png

 

 

#NDepend – Rate your .Net code

download.pngRecently I tried out the NDepend tool to see how it can help with code reviews and code quality assessment of .Net code in Visual Studio.

I found this tool to be helpful and it quickly found areas of code in our projects that need some extra help.

Once you run the tool, you get a report which lays out the good, the bad and the ugly in your code. This is helpful as it lets us focus on what is important, and perhaps how much work needed to fix an issue.

Here’s a summary example:

2020-03-09 09_01_20-NDepend Report.png

 

You can then drill down and see the detail:

2020-03-09 09_02_25-NDepend Report.png

NDepend comes with a Visual Studio plug as well as a stand alone version.

#Redis Pub/Sub using .Net and #Docker – The easy way

PNG-image-00D34A55B376-1.pngSo, you’ve heard about Redis and want to go kick the tires. How does one do Pub/Sub between two .Net clients with Redis in the middle?

The Redis/Docker Part:

  • Docker will host our Redis. Go to https://hub.docker.com , sign up and download the Docker software. Install it and login with your new Docker Hub account. It’ll take a few moments to start.
  • Open a Powershell and enter this Docker command to download and run Redis in docker on the standard port:

docker run -it -d -p 6379:6379    redis 

(Pro tip: Here’s how to enable local file usage for Redis to record data to: docker run -it -d -p 6379:6379 -v e:/docker/redis:/data redis  where e: is a drive you enabled access to via the Docker Dashboard )

  • Close Powershell, it’s not needed any more.

Redis is now running, to check it, open Docker Dashboard by right clicking the little whale icon in your system tray. Docker will give the Redis a funny random name:

2020-02-20 08_23_02-.png        2020-02-20 08_23_48-Container list.png

The Coding Part:

Open Visual Studio Twice and create 2 Console apps. One will publish and one will subscribe.

In each project, add the Nuget StackOverflow.Redis

In the publisher app, add this class and call it from Main():

using StackExchange.Redis;
using System;
using System.Threading.Tasks;
 
 
namespace RedisTest
{
    public class Publisher
    {
        private ConnectionMultiplexer redis;
        public Publisher()
        {
            redis = ConnectionMultiplexer.Connect("localhost");
        }
 
        public async Task PublisherMessages()
        {
            ISubscriber sub = redis.GetSubscriber();
            for (int i = 0; i < 1300; i++)
            {
                sub.Publish("message"Guid.NewGuid().ToString());
            }
        }
    }
}

In the subscriber app, add this class and call it from Main():

using StackExchange.Redis;
using System;
using System.Threading.Tasks;
 
 
namespace RedisTest
{
    public class Subscriber
    {
        private ConnectionMultiplexer redis;
        public Subscriber()
        {
            redis = ConnectionMultiplexer.Connect("localhost");
        }
 
        public async Task SubscriberMessages()
        {
            ISubscriber sub = redis.GetSubscriber();
            await sub.SubscribeAsync("message"async (channelvalue) =>
            {
                Console.WriteLine(value);
            });
        }
    }
}

Let’s run them!

Start up the Subscriber, then the Publisher. The publisher will pump the messages to Redis, Redis will them pump them to the subscriber. Even on a low powered system, you should be able to do 1500 messages a second. There are basically an unlimited number of subscribers and publishers.

Afterward:

Get a tool like Redily to allow you to view the data inside Redis.

 

 

#Angular in #VSCode: Programmatic Router Outlet targeting

Mozilla_Firefox.pngdownload.jpgI wanted to put a component into a named router outlet, but do it from another component based on some database/API value. Here’s how I was able to get it to work relatively easily:

My main component, Customers, has this route setup:

    const routes: Routes = [
      {
        path: "customers",
        component: CustomersComponent,
        children: [
          {
            path: "customerlist",
            component: CustomerListComponent,
            outlet: "detailsOutlet"
          }
        ]
      }
    ];

and this named router outlet template:

   router-outlet name="detailsOutlet"

In the CustomerComponent I can then load the CustomerList component into the outlet:

    const parentPath = "customers";
    const childPath = "customerlist";
    this.router.navigate(
      [parentPath, { outlets: { detailsOutlet: childPath } }],
      {
        skipLocationChange: true
      }
    );

I used 2 const values to show where the string values come from. You’ll notice that the paths there match the route paths above.

I didn’t want the URL to change or the history to get the outlet assignment, so I specified the skipLocationChange.

 

#Angular and Asp.Net 3 Core 3: Creating up to date documentation

imagesAfter you create a new Asp.Net Core 3 Angular project, you’ll want to add documentation. Keeping it up to date is always a chore, but with some new tools, that can be made much easier.

We’re going to go over CompoDoc, a free tool to create and update Angular Documentation.

2019-11-12 11_15_10-Window.png

The first step is to install it into your Asp.Net Core 3 Angular app. Open up the ClientApp folder in a Terminal and enter this:

npm install --save @compodoc/compodoc

Once done, go to your package.json file and add the compodoc script to the script’s node:

2019-11-12 11_19_34-PluralsiteAngularRouting - Microsoft Visual Studio.png

To generate the docs, just run this in the same terminal:

 npm run compodoc

It will generate a ClientApp/documentation folder. Open the resulting index.html to view your new shiny docs.

Re-run the compodoc script to update as needed.

2019-11-12 11_23_01-Window.png