Skip to main content

デタラメ

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

「出鱈目」の読み方は〈でたらめ〉で、「根拠がないこと」や「いいかげんなこと」を指して使う言葉です。江戸時代末期ごろから使われている言葉で、「出鱈目なことをいってごまかそうとしている」などと使います。

出鱈目な人: デタラメな人とは、理屈が通っておらず、物事や言動が一貫していない人のことです。特に、嘘でも思いつくままに言う人のことで、結果信用ができず、責任感もない人のことです。

YouTube Video Downloading with yt-dlp

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

yt-dlp had set the standard for downloading YouTube videos. It is a fork of youtube-dl with a lot of improvements. It is more actively maintained and has a lot of new features. It is a command-line program that can be used to download videos from YouTube and other websites. It is available for Windows, macOS, and Linux. GitHub

Installation​

With Homebrew:

brew install yt-dlp

To update yt-dlp:

brew upgrade yt-dlp

Usage​

To download a video:

yt-dlp <video-url>

For Example:

yt-dlp 'https://www.youtube.com/watch?v=3Gt3r42tY5k'

To download a playlist:

yt-dlp <playlist-url>

For Example:

yt-dlp 'https://www.youtube.com/watch?v=PoK4oEuIx9U&list=PLlFS0wtICmJAUpqDUPRuf7DYG59by9oB5'

ffmpeg

yt-dlp uses ffmpeg to merge audio and video files. You need to have ffmpeg installed on your system. You can install it with Homebrew:

brew install ffmpeg

Heeds not Praise

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer
  • Me:

what does "A pride that dares, and heeds not praise, A stern and silent pride" mean

  • ChatGPT:

"A pride that dares, and heeds not praise, A stern and silent pride" describes a type of pride characterized by boldness and courage, yet it remains unaffected by external validation or recognition. It suggests a self-assuredness and inner strength that doesn't seek approval or acknowledgment from others. This pride is firm and resolute, expressed quietly and without fanfare. It emphasizes the idea of being confident and self-reliant, regardless of external opinions or acclaim.

Me: Well said, I give you that.

Save to Cloud

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

I really enjoy deploy things on cloudflare, it's fast and free.

worker and crypto​

Node.js capabilities​

reference

what a shame 'Sign' and 'Verify' are not supported. So I have to use WebCrypto API.

SSG & SSR

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

link

SSR: render HTML every time, on the server. Good for SEO, need hydration

SSG（Static Site Generation）: render once when build, good for SEO, need hydration.

ISR（Incremental Static Regeneration）: for static pages, use SSG and CDN, for other pages, return CSR page

SEO

· 2 min read
Shi Xinyu
Shi Xinyu
Front End Developer

learned a new word Cannibalization. like cannibalization between, cannibalize one unit for the sake of another of the same kind.

for SEO improvements:

Canonical URL

when we have two urls for similar content, the two URLs will compete in the page-ranking algorithm. Thus, both have low score.

We need to tell google crawler to seem them as the same page.

<head>
  <link rel="canonical" href="https://juejin.cn" />
</head>

for example https://shopee.sg/list/Phone and https://shopee.sg/search?keyword=phone are the same.

How to have better page loading experience​

start render time is the moment something first displays on the user’s screen.

Human-computer interaction (HCI) guidelines recommend a 1-2 second start render time.

see link

What is FCP? The First Contentful Paint (FCP) metric measures the time from when the user first navigated to the page to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements.

schema​

you may wonder how some pages shows extra infos. that's because they specify schema.

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "item": { "@id": "https://www.lazada.sg", "name": "Home" },
        "@type": "ListItem",
        "position": 1
      },
      {
        "item": {
          "@id": "https://www.lazada.sgurl",
          "name": "Mobiles & Tablets"
        },
        "@type": "ListItem",
        "position": 2
      },
      {
        "item": { "@id": "https://www.lazada.sgurl", "name": "Smartphones" },
        "@type": "ListItem",
        "position": 3
      }
    ]
  }
</script>

typescript-1

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer
type separator = "-" | "/" | ".";

type Num = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
type Num2 = 0 | Num;

type DD = `0${Num}` | `1${Num2}` | `2${Num2}` | `30` | `31`;
type MM = `0${Num}` | `10` | `11` | `12`;
type YYYY = `19${Num2}${Num2}` | `20${Num2}${Num2}`;

type GetDateType<T extends string> = T extends "MM"
  ? MM
  : T extends "DD"
  ? DD
  : T extends "YYYY"
  ? YYYY
  : never;

type FormatDate<T extends string> =
  T extends `${infer D}${separator}${infer M}${separator}${infer Y}`
    ? T extends `${D}${infer sep1}${M}${infer sep2}${Y}`
      ? `${GetDateType<D>}${sep1}${GetDateType<M>}${sep2}${GetDateType<Y>}`
      : never
    : never;

const date: FormatDate<"DD-MM-YYYY"> = "13-01-2023";

refer to this

typescript-2

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

How to generate a .d.ts file from a .ts file?

tsc --declaration --emitDeclarationOnly index.ts

or in tsconfig.json

{
  "compilerOptions": {
    "declaration": true,
    "emitDeclarationOnly": true
  }
}

refer to typescript-2