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.
Are you a teacher? What tools are you using in this COVID-19 times to communicatte with students? Do you teach remotely and what tools are you using?
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
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()
inProgram.cs
- Properties with setter only, using keyword
init
- Use
new
expression without class name. - Check for not
null
withis 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
- Click
Load
to open the file-dialog - Show all files
- Select the private key, in our case
id_rsa
(not the one showing as Microsoft Publisher Document) - Click
Save private key
and give it a distinct name such asputtyprivatekey.ppk
- Open PuTTY and load your saved sesssion
- In
Connection/SSH/Auth/
, clickBrowse...
- Select the
puttyprivatekey.ppk
file - 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.
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