Kelvin's tech blog(seawaywen)

Kelvin's tech-box

Latest — May 14, 2024

Mange the IP address on Ubuntu server

Change to static IP address 1. update /etc/netplan/50-cloud-init.yaml network: ethernets: enp0s3: dhcp4: false addresses: [192.168.1.202/24] gateway4: 192.168.1.1 nameservers: addresses: [8.8.8.8,8.8.4.4,192.168.1.1] version: 2 2. apply the changes sudo netplan apply

More issues

Modern Angular Form validation

recently I tweaks on the Angular form validation and come up with a handy solution to simplify the tedious validation process on the form. A small library is created for this article. The basic process to define a form in the Angular project. 1. Define your form in your component

Angular inject() usage

We can use inject() function to inject the service in the angular project instead of inject in the constructor(). When we have a service that rely on an abstract interface, we need a a little tricky to have this inject() work. for example, we have a a interface: export interface

FFmpeg使用秘籍

🔨FFmpeg 提取视频的音频提取mp4视频的音频并存为mp3 ffmpeg -i sample.mp4 -q:a 0 -map a sample.mp3 提取视频文件中的部分片段存为音频mp3文件 $ ffmpeg -i sample.mp4 -ss 00:03:05 -t 00:00:45.0 -q:a 0 -map a sample.mp3 -ss: 指定开始时间戳 -t : 选项指定编码持续时间，例如从3分钟到5秒钟，持续45秒。 • 时间戳必须采用HH：MM：SS.xxx格式或以秒为单位。 • 如不指定-t选项，它编码到文件结束只提取音频流而不进行重新编码提取格式不能为mp3，可以是aac和m4a

Setup credential store for Docker login

how to setup the credential store for docker login

GPG daily usage

basic construction to use gpg

Use CSS to display truncate text

Sometimes we need to truncate the text in limit space, it will be more reasonable to display the ellipsis at the end of the truncated text instead of show whole text. CSS to truncate text for single line .truncate { width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } CSS to truncate

CSS child selector

We use > to combine 2 selectors, like div > p (div indicates the parent element, and p is the child element) find all descendant elements // select all the descendants of *div* div p { color: red; } white space to separate the parent and descendant elements. find sibling elements div ~ p

Typescript Object Array sorting

Demonstrate the approach of sorting object array in typescript. var students = [ { 'id': 1, 'name': 'Kelvin'}, { 'id': 1, 'name': 'Marry'}, { 'id': 1, 'name': 'John'}, ] Object array sort with comparison logic //ascending order sortedStudents

Angular Reusable HTML with NgTemplateOutlet

When we speak reusability in Angular, the component is the final solution. But what if we're only reusing some HTML snipplet, it might be heavy and hard to maintain to create a separate component. One another solution is to use tngTemplateOutlet. Here are some usage of ngTemplateOutlet <