Skip to main content

8 posts tagged with "frontend"

View All Tags

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

lockfile debugging

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

Ideally, we don't need a lockfile, like a npm-lock, a yarn-lock, or a pnpm-lock.yaml. A lockfile should be pure function of package.json.

But some idiots invented this ^ sign. Then all the troubles begins.

{
  'pkg': "^2.2.0"
}

Could resolve to 2.2.0, 2.2.1 or sth else.

Then we need a lockfile, which could grow

A temp solution:

# clear node_modules in current folder
find . -name 'node_modules' -type d -prune -print -exec rm -rf '{}' \;
# clear the store
rm -rf node_modules && rm -rf ~/.pnpm-store

volta

· One min read
Shi Xinyu
Shi Xinyu
Front End Developer

I am currently using nvm, node version manager. And as I am maintaining many projects, I found I am busy switching node and pnpm versions like blow:

node -v
nvm use node 18.19.0

corepack enable
corepack prepare pnpm@8.11.0 --activate

Considering I need to do it multiple times a day, an automation tool becomes a necessity. So I searched and the only answer seems to be Volta.

I like the volta pin function, it pins a volta setting in the package.json file.

{
  "volta": {
    "node": "16.19.1",
    "pnpm": "8.11.0 "
  }
}

Next time you enter the folder, volta will change your node version and pnpm version automatically.

The only concern about volta, is that it seems to be built for npm / yarn. Who's not using pnpm these days? But Volta only has limited support for pnpm. https://github.com/volta-cli/volta/issues/737

pnpm

· 3 min read
Shi Xinyu
Shi Xinyu
Front End Developer

pnpm is a package manager for Node.js packages, or any other packages that are compatible with the npm ecosystem. It is optimized for fast installations and uses a shared cache for all packages.

why we use only pnpm is that it 1. saves disk space. 2. it solved the problem of phantom dependencies.

you will get a pnpm-lock.yaml file in your project. Ideally you don't need to commit it. For this file are to be a pure function of package.json. But in reality, we need to commit it. Some packages in package.json are labeled with a version range.

{
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

here ^ means that the version range is any version that is compatible.

When you run pnpm install, pnpm will install the latest version of react and react-dom. If you run pnpm install again, pnpm will install the latest version of react and react-dom again. This is because the version range is not fixed. If you commit the pnpm-lock.yaml file, pnpm will install the same version of react and react-dom every time you run pnpm install.

under the hood​

pnpm, much like maven, use hard link (and soft link).

Most single files are stored in the ~/.pnpm-store folder, based on hash of each file. Then when install, they are hard linked to the target project store.

Inside the node_modules folder, dependencies are soft linked.

tip

Consider this situation, when you delete the node_module folder to bin, and clean the bin, what is lost? Nothing is lost. inodes has referance count, files are not to be removed before reference is zero.

For typical linux systems, the process of creating hard link creates no new inode.

Creating a soft link creates a new special file.

(see Link)

tip

Some useful commands

pnpm why

pnpm prune

pnpm rebuild node-sass #who is still using node-sass in 2024?

if you read chinese, this is a good article to read: pnpm 是凭什么对 npm 和 yarn 降维打击的

首先介绍下 link，也就是软硬连接，这是操作系统提供的机制，硬连接就是同一个文件的不同引用，而软链接是新建一个文件，文件内容指向另一个路径。当然，这俩链接使用起来是差不多的。

所有的依赖都在这里铺平了，都是从全局 store 硬连接过来的，然后包和包之间的依赖关系是通过软链接组织的。

也就是说，所有的依赖都是从全局 store 硬连接到了 node_modules/.pnpm 下，然后之间通过软链接来相互依赖。