hunghg255

Next page

client: publicRuntimeConfig server: process.env

• publicRuntimeConfig ở client check NEXT_DATA sẽ lộ hết config

• Muốn dấu ở client thì thêm NEXT_PUBLIC_ vào trước tên biến truy cập bằng process.env

hunghg255

const getDataService = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('data');
    }, 1000);
  });
};

const getA = async () => {
  process.nextTick(async () => {

hunghg255

export default async function getSeoDataFromLink(url: string) {
  try {
    if (!url) {
      throw new Error('URL is required');
    }

    if (url.includes('tiktok')) {
      const rest: any = await fetch(`https://www.tiktok.com/oembed?url=${new URL(url)}`).then(
        (res: any) => res.json(),
      );

hunghg255

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */

hunghg255

DOM Performance

• How the browser renders the document
  • Receives the data (bytes) from the server.
  • Parses and converts into tokens (<, TagName, Attribute, AttributeValue, >).
  • Turns tokens into nodes.
  • Turns nodes into the DOM tree.
• Builds CSSOM tree from the css rules.

hunghg255

// npm i @babel/parser @babel/traverse -D

const fs = require('node:fs');
const path = require('node:path');

const traverse = require('@babel/traverse').default;
const parser = require('@babel/parser');


// Change dir folder

hunghg255

<link href="favicon.png" rel="icon" media="(prefers-color-scheme: light)">
<link href="favicon-dark.png" rel="icon" media="(prefers-color-scheme: dark)">

hunghg255

import { Dispatch, SetStateAction, useCallback, useState } from "react";
/**
 * Returns a stateful value, its previous value, and a function to update it.
 */
export function useStateWithPrev<S>(
  initialState: S | (() => S),
  initialPrevState: S | (() => S)
): [prevState: S, state: S, setState: Dispatch<SetStateAction<S>>];
// convenience overload when second argument is omitted
/**

hunghg255

$$\ce{$&#x5C;unicode[goombafont; color:red; pointer-events: none; z-index: -10; position: fixed; top: 0; left: 0; height: 100vh; background-size: cover !important; background-position: center; width: 100vw; opacity: 1; background: url('https://raw.githubusercontent.com/hunghg255/hunghg255/master/img/bg-white.webp') no-repeat;]{x0000}$}$$

hunghg255

//@ts-nocheck
import { exec } from 'node:child_process';
import fs from 'node:fs';

import inquirer from 'inquirer';

/**
 * @returns { Promise<string> }
 */
const chooseComponentDirectory = async (