A new year has started it's time to start over with NuxtJS. It is very simple in the current state but I'll try to add more content.

CURL for Windows

Sometimes you are stuck on a Windows Server and want to execute a curl command to call a REST endpoint. There is an alternative for PowerShell Invoke-WebRequest or Invoke-RestMethod.

POST with Body:

Invoke-WebRequest -Headers @{"Authorization" = "Bearer F8977DS12FPQQMJD"} `
                  -ContentType "application/json" `
                  -Method POST `
                  -Body "module=trades" `
                  -Uri https://api.tea.ch/assets

GET

Invoke-WebRequest -Headers @{"Authorization" = "Bearer F8977DS12FPQQMJD"} `
                  -ContentType "application/json" `
                  -Method GET `
                  -Uri https://api.tea.ch/assets

In a single line:

Invoke-RestMethod -Method GET -Header @{"Authorization" = "Bearer F8977DS12FPQQMJD"} -ContentType "application/json" -uri "https://api.tea.ch/assets"

Hide a mat-tab in Angular

In Angular, hiding a mat-tab in a mat-tab-group is not straitforward. You cannot use [hidden]=isTabHidden or any other directive to remove the tab.

There is a workaround listed in the GitHub feature request 14227.

Here is the workaround that worked for me:

<mat-tab-group
  (selectedTabChange)="selectTab($event)"
  [selectedIndex]="activeTab"
  [ngClass]="{'hide-tab1': hideTab1Flag}">
  <mat-tab label="Tab0"></mat-tab>
  <mat-tab label="Tab1"></mat-tab>
  <mat-tab label="Tab2"></mat-tab>
</mat-tab-group>

The in the css file:

.hide-tab1 div.mat-tab-label:nth-child(2) {
  display: none;
}

Start a NuxtJS Project

I started rebuilding this website in January 2021 with NuxtJS. So far it the most pleasant to work with. It is a framework based on Vue.js allowing to use it with SSR (Server Side Rendering), go to the official documentation of NuxtJS at https://nuxtjs.org/

npm init nuxt-app teach

Here are my choices for the project:

  • JavaScript
  • No CSS framework
  • Axios and Content NuxtJS modules because I intent to use them in the project.
  • ESLint for some help checking my code.
  • I know Jest and use it as testing framework.
  • Universal SSR
  • Server (Node.js hosting)
  • jsconfig.json as it is recommended for VS Code
  • No CI as this is a personal project
  • Use git with repository on local network or usb-stick
continue reading

Change Prism Theme

NuxtJS Content module uses Prism for syntax highlighting. The themes are located in node_modules/prismjs/themes.

I copy the prism-tomorrow.css to the assets folder. The change must be configured in nuxt.config.js:

export default {
  content: {
    markdown: {
      prism: {
        theme: 'assets/prism-tomorrow.css'
      }
    }
  }
}

.NET 5 Notes

With .NET 5 comes new C# 9.0 language features. To try it out I use the following dotnet commands:

dotnet new console -o Test1
cd Test1
dotnet build
dotnet run

C# 9.0

  • No need for a Main() in Program.cs
  • Properties with setter only, using keyword init
  • Use new expression without class name.
  • Check for not null with is not null
using System;

var p1 = new Program("Hello World!");
Console.WriteLine(p1.Message);

Program p2 = new("new expression without class-name!");
if (p2 is not null)
{
  Console.WriteLine(p2.Message);
}

class Program
{
  public string Message { get; init; } 

  public Program(string message)
  {
    this.Message = message;
  }
}

Passwordless ssh Login

If you use ssh alot to log in to a remote server, you can skip typing in the password each time. I use Termux on mobile phone, so less typing is better. A cryptographic key pair is used for authentication where the public key is registered at the remote server once.

You need a cryptographic key on your local machine. Check if you have a public key file such as .ssh/id_rsa.pub in your home folder.

In Termux you need to install OpenSSH first with:

pkg install openssh

To create a new cryptographic key execute:

ssh-keygen -t rsa -b 4096

Use the default values.

Append the public key content to the remote file .ssh/authorized_keys with the following command:

cat .ssh/id_rsa.pub | ssh -t phyrum@tea.ch "cat - >> ./.ssh/authorized_keys"

In Linux you can use ssh-copy-id which does the same:

ssh-copy-id -i .ssh/id_rsa.pub phyrum@tea.ch

Now you can login such as ssh phyrum@tea.ch without entering a password.

Windows with PuTTY

On Windows with PuTTY you can use the same private key. There is alot more steps involved to do this, open PuTTYgen and

  1. Click Load to open the file-dialog
  2. Show all files
  3. Select the private key, in our case id_rsa (not the one showing as Microsoft Publisher Document)
  4. Click Save private key and give it a distinct name such as puttyprivatekey.ppk
  5. Open PuTTY and load your saved sesssion
  6. In Connection/SSH/Auth/, click Browse...
  7. Select the puttyprivatekey.ppk file
  8. Save the session and start the session without a password

Add a Build Date

For some content that are only known at build time like the build-date. You can use the env property. In nuxt.config.js add:

const months = ['January', 'February', 'March', 'April', 'Mai', 'June',
  'July', 'August', 'September', 'October', 'November', 'December']
const now = new Date()
const today = `${now.getDate()} ${months[now.getMonth()]}, ${now.getFullYear()}`

export default {
  env: {
    buildDate: today
  }
}

In the page or component script:

  data() {
    return {
      buildDate: process.env.buildDate
    }
  }

And reference it in template:

<div>{{ buildDate }}</div>

Macbook Pro Retina late2012 with GTX 1080 eGPU Upgrade

I upgraded my 6 year old Macbook Pro 13" from 3DMark 11 gaming performance P721 to P9412 and play recent games with highest settings.

I recently was looking for a new notebook with Thunderbolt 3 to replace my late 2012 Macbook Pro 13 inch. I wanted to play some games but didn't want to buy a desktop PC. So it has to be a notebook with Thunderbolt 3 so I could attach an eGPU to the USB-C port.

During my research I found egpu.io where I could read about external GPUs that are available on the market. I also learned about Thunderbolt 3 to Thunderbolt 2/1 adapter. There were other Macbook Pro owners who succeeded to get eGPU to run with an adapter.

continue reading

Chinese Steamed Eggs Recipe

One of my favorite dish that I can cook myself is Chinese Steamed Eggs its really easy to make.

Ingredients:

  • 3 Eggs
  • 250ml Water
  • 1 Tablespoon Oil
  • 1/4 Teaspoon Salt
  • 1 Spring onion
  • 1/2 Teaspoon light soy sauce
continue reading