
<p>Bạn có đang gặp khó khăn với việc cung cấp Mã Pin AdSense không?&nbsp;Không thể xác minh tài khoản AdSense của bạn và nhận 100 đô la đầu tiên của bạn từ AdSense?&nbsp;Bạn không đơn độc, vì người dùng AdSense từ nhiều quốc gia đang phải đối mặt với tình huống tương tự do các vấn đề gửi thư.</p>



<p>Nếu bạn không chắc chắn về những gì tôi đang nói, thì đây là thông tin: AdSense sẽ gửi cho bạn một Ghim khi bạn đã kiếm được 10 đô la đầu tiên trong tài khoản AdSense của mình.&nbsp;Mã pin AdSense này là duy nhất cho mọi tài khoản AdSense và họ gửi nó qua đường chuyển phát nhanh đến Địa chỉ mà bạn đã đề cập trong khi tạo tài khoản AdSense.&nbsp;Thông thường, AdSense sẽ gửi mã PIN của bạn bằng thư thường sau vài ngày kể từ khi đạt đến ngưỡng xác minh.</p>



<p>Bạn sẽ có bốn tháng kể từ ngày mã PIN đầu tiên của bạn được tạo để nhập mã đó vào tài khoản của bạn.&nbsp;Nếu bạn không nhập nó sau bốn tháng, AdSense sẽ ngừng hiển thị quảng cáo trên các trang của bạn.&nbsp;Những điều quan trọng cần biết:</p>



<ul><li>Bạn phải đợi một tuần sau khi số dư tài khoản của bạn đạt đến ngưỡng xác minh để mã PIN được tạo và gửi cho bạn qua thư.</li><li>Thường mất đến 4 tuần để nhận được mã PIN qua đường bưu điện, mặc dù có thể mất nhiều thời gian hơn tùy thuộc vào vị trí của bạn.</li><li>Nếu bạn không nhận được mã PIN của mình sau bốn tuần, bạn cần yêu cầu một mã PIN mới.&nbsp;Để tìm ngày bạn có thể yêu cầu mã PIN mới, hãy đăng nhập vào tài khoản của bạn và xem&nbsp;trang&nbsp;<strong>Cài đặt Tài khoản</strong>&nbsp;trong tab&nbsp;<strong>Trang chủ .</strong></li></ul>



<h2>Cách nhận mã PIN AdSense trong 2 ngày:</h2>



<ol><li>Đăng nhập vào tài khoản AdSense của bạn</li><li>Nhấp vào biểu tượng Bánh răng ở trên cùng bên phải và chọn cài đặt.</li><li>Trong thanh bên trái, nhấp vào thông tin tài khoản</li><li>Nhấp vào liên kết Xác minh địa chỉ</li><li>Yêu cầu mã pin AdSense mới ở cuối trang</li></ol>



<p>Hãy nhớ:&nbsp;<strong>Tất cả các PIN đã gửi là bản sao của PIN đầu tiên</strong>&nbsp;được gửi cho bạn.&nbsp;Vì vậy, ngay cả khi bạn đã nhận được mã pin đầu tiên sau khi yêu cầu mã mới, bạn có thể sử dụng nó để xác minh địa chỉ của mình.</p>



<p>Thông thường, do vị trí (Đặc biệt nếu bạn đang cư trú ở vùng sâu vùng xa của quốc gia mình), bạn có thể&nbsp;<strong>không nhận được mã pin AdSense</strong>&nbsp;ngay cả sau khi đăng ký lại mã pin AdSense.&nbsp;Bản thân tôi đã nghe báo cáo về nhiều sự cố như vậy và đó là khi tôi bắt đầu tìm kiếm các phương pháp xác minh địa chỉ AdSense thay thế.</p>



<p>Theo Trợ giúp của AdSense,&nbsp;<em><strong>người dùng có tối đa 3 lần thử</strong>&nbsp;để nhận được mã PIN xác minh AdSense</em>&nbsp;.&nbsp;Nếu bạn đã yêu cầu tối đa 3 mã PIN và không nhận được bất kỳ mã nào trong số đó&nbsp;<strong>trong vòng bốn tuần kể từ lần yêu cầu mã PIN cuối cùng,</strong>&nbsp;&nbsp;thì bạn có tùy chọn xác minh tài khoản của mình bằng cách tải lên thẻ ID được Chính phủ phê duyệt.</p>



<p>Trong đó:</p>



<p>Bạn lưu ý nên điền tiếng Việt có dấu hết nhé.</p>



<ol><li>Tên: Điền tên Có Dấu và VIẾT HOA.<br>Ví dụ: NGUYỄN NAM ANH…</li><li>Dòng Địa chỉ 1: Điền địa chỉ của bạn đang ở càng chi tiết càng tốt,</li><li>Địa chỉ 2: Mục này quan trọng, bạn điền Số Điện Thoại + dòng “Vui lòng gọi” như hình trên của bạn để nhân viên bưu điện BÁO BẠN ĐẾN LẤY khi có thư về.</li><li>Thành Phố/ Tỉnh: Điền Tỉnh hoặc Thành Phố nơi bạn sinh sống.</li><li>Mã Bưu Điện (Zip Code hoặc Postal Code): BẠN NHẬN ĐƯỢC THƯ HAY KHÔNG LÀ Ở MỤC NÀY. Các bước chi tiết:</li><li>Hãy truy cập trang Mã Bưu Chính Quốc Gia của Việt Nam (trang này là chính xác và cập nhật ĐÚNG NHẤT): http://mabuuchinh.vn</li><li>Tra mã bưu cục phát Quận, Huyện nơi gần bạn nhất.</li></ol>



<h2>Cách Nhập mã PIN Google Adsense</h2>



<p>Khá bất ngờ khi <strong>chỉ sau 2 ngày</strong> thì phía bưu cục phát họ gọi điện để mình ra nhận.</p>



<p>Theo mình đoán thì Google in và gửi đi từ Việt Nam nên mới nhanh như vậy.</p>



<p>Giao diện thư của Google Adsense như bên dưới.</p>



<figure class="wp-block-image size-full"><img decoding=async  width="706" height="500" src="https://ml3lpt0uarlu.i.optimole.com/w:706/h:500/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/ma-pin-adsense.jpg" alt="" class="wp-image-8537"/></figure>



<p>Phong bì rất đơn giản có hai mặt in thông tin địa chỉ người gửi, người nhận thư và logo Google Adsense.</p>



<p>Sau khi đã có mã PIN, bạn lấy 6 số mã PIN nhập vào phần Nhập mã PIN và nhấn Gửi mã PIN là&nbsp;<strong>HOÀN THÀNH.</strong></p>



<p>Nhập xong, bạn đợi tầm&nbsp;<strong>5 phút rồi F5 (LÀM MỚI TRANG WEB)</strong>&nbsp;lại trang Google Adsense là&nbsp;<strong>OK</strong>.</p>



<p>Lúc này, không còn dòng chữ:&nbsp;<strong>“Thanh toán của bạn hiện đang bị giữ do bạn chưa xác minh địa chỉ của mình”.</strong></p>



<p>Như vậy, bạn đã<strong>&nbsp;THÀNH CÔNG</strong>&nbsp;xác minh địa chỉ Google Adsense rồi nhé.</p>


Cách nhận mã PIN xác minh Google Adsense trong 2 Ngày


<p>Để cải thiện Tối ưu hóa Công cụ Tìm kiếm (SEO), bạn có thể cần thêm sơ đồ trang web hoặc tệp&nbsp;<code>robots.txt</code>&nbsp;vào trang Next.js của mình.</p>



<p><strong>Sitemap&nbsp;</strong>xác định mối quan hệ giữa các trang trong trang web của bạn. Công cụ tìm kiếm (Google,Bing,Yandex&#8230;) sử dụng tệp này để lập chỉ mục chính xác hơn trang web của bạn. Bạn cũng có thể cung cấp thêm thông tin chẳng hạn như thời gian cập nhật lần cuối&nbsp;<code>&lt;lastmod&gt;</code>, tần suất thay đổi của trang&nbsp;<code>&lt;changefreq&gt;</code>&nbsp;và hơn thế nữa.</p>



<p>Tệp&nbsp;<strong>robots.txt&nbsp;</strong>cho công cụ tìm kiếm biết những trang hoặc tệp nào mà trình thu thập thông tin (Bots) có thể hoặc không thể yêu cầu từ trang web của bạn.</p>



<h2 id="sơ-đồ-trang-web-tĩnh-static-sitemap">Sơ đồ trang web tĩnh (Static Sitemap)</h2>



<p>Nếu trang web của bạn không cập nhật thường xuyên, bạn có thể sử dụng sơ đồ trang web tĩnh. Đây là tệp <code>.xml</code> cơ bản xác định nội dung trang web của bạn. Ví dụ đơn giản:</p>



<figure class="wp-block-image size-full"><img decoding=async  width="937" height="500" src="https://ml3lpt0uarlu.i.optimole.com/w:937/h:500/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/Screen-Shot-2022-09-19-at-23.08.06.png" alt="Dynamic Sitemap" class="wp-image-8516"/></figure>



<p>Khi trang web của bạn mở rộng quy mô, bạn nên tạo sơ đồ trang web động.</p>



<h2 id="sơ-đồ-trang-web-động-dynamic-sitemap">Sơ đồ trang web động (Dynamic Sitemap)</h2>



<p>Nếu trang web của bạn thường xuyên thay đổi, bạn nên tạo một sơ đồ trang web động. Trước tiên, hãy xem xét một ví dụ trong đó nội dung trang web của bạn dựa trên tệp (ví dụ: trong thư mục&nbsp;<code>/pages</code>).</p>



<p>Đầu tiên, hãy thêm&nbsp;<code>globby</code>&nbsp;để chúng ta có thể tìm nạp danh sách routes.</p>



<pre class="wp-block-code"><code>$ yarn add --dev globby
</code></pre>



<p>Tiếp theo, chúng ta có thể tạo một tập lệnh Node tại&nbsp;<code>scripts/generate-sitemap.js</code>. Tệp này sẽ tự động tạo sơ đồ trang dựa trên thư mục&nbsp;<code>/pages</code>&nbsp;của bạn.</p>



<pre class="wp-block-code"><code>const fs = require('fs');

const globby = require('globby');
const prettier = require('prettier');

(async () =&gt; {
  const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');

  // Ignore Next.js specific files (e.g., _app.js) and API routes.
  const pages = await globby(&#91;
    'pages/**/*{.js,.mdx}',
    '!pages/_*.js',
    '!pages/api'
  ]);
  const sitemap = `
        &lt;?xml version="1.0" encoding="UTF-8"?&gt;
        &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
            ${pages
              .map((page) =&gt; {
                const path = page
                  .replace('pages', '')
                  .replace('.js', '')
                  .replace('.mdx', '');
                const route = path === '/index' ? '' : path;

                return `
                        &lt;url&gt;
                            &lt;loc&gt;${`https://webcuaban.com${route}`}&lt;/loc&gt;
                        &lt;/url&gt;
                    `;
              })
              .join('')}
        &lt;/urlset&gt;
    `;

  // If you're not using Prettier, you can remove this.
  const formatted = prettier.format(sitemap, {
    ...prettierConfig,
    parser: 'html'
  });

  fs.writeFileSync('public/sitemap.xml', formatted);
})();
</code></pre>



<p>Cuối cùng, ghi đè&nbsp;<code>next.config.js</code>&nbsp;của bạn để chạy tập lệnh này trong quá trình build. Tệp của bạn được tạo tại&nbsp;<code>public/sitemap.xml</code>, sau đó được chuyển đến Root trang web của bạn (yêu cầu&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://github.com/vercel/next.js/releases/tag/v9.0.0">Next v9.0 +</a>).</p>



<pre class="wp-block-code"><code>module.exports = {
  webpack: (config, { isServer }) =&gt; {
    if (isServer) {
      require('./scripts/generate-sitemap');
    }

    return config;
  }
};
</code></pre>



<h2 id="nội-dung-bổ-sung">Nội dung bổ sung</h2>



<p>Nếu bạn có dữ liệu được lưu trữ bên ngoài (ví dụ: CMS), bạn sẽ cần thực hiện yêu cầu API trước khi bạn có thể tạo sơ đồ trang web của mình. Việc triển khai này sẽ khác nhau tùy thuộc vào nguồn dữ liệu của bạn, nhưng ý tưởng giống nhau. Để chứng minh, tôi đã tạo một ví dụ bằng cách sử dụng dữ liệu trình giữ chỗ (placeholder data).</p>



<p>Đầu tiên, tạo một tệp mới tại&nbsp;<code>pages/sitemap.xml.js</code>:</p>



<pre class="wp-block-code"><code>import React from 'react';

class Sitemap extends React.Component {
  static async getInitialProps({ res }) {
    const request = await fetch(EXTERNAL_DATA_URL);
    const posts = await request.json();

    res.setHeader('Content-Type', 'text/xml');
    res.write(createSitemap(posts));
    res.end();
  }
}

export default Sitemap;
</code></pre>



<p>Khi route&nbsp;<code>/sitemap.xml</code>&nbsp;được tải ban đầu, chúng ta sẽ tìm nạp các bài đăng từ nguồn dữ liệu bên ngoài và sau đó ghi một tệp XML dưới dạng phản hồi.</p>



<pre class="wp-block-code"><code>import React from 'react';

const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';

const createSitemap = (posts) =&gt; `&lt;?xml version="1.0" encoding="UTF-8"?&gt;
    &lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"&gt;
        ${posts
          .map(({ id }) =&gt; {
            return `
                    &lt;url&gt;
                        &lt;loc&gt;${`${EXTERNAL_DATA_URL}/${id}`}&lt;/loc&gt;
                    &lt;/url&gt;
                `;
          })
          .join('')}
    &lt;/urlset&gt;
    `;

class Sitemap extends React.Component {
  static async getInitialProps({ res }) {
    const request = await fetch(EXTERNAL_DATA_URL);
    const posts = await request.json();

    res.setHeader('Content-Type', 'text/xml');
    res.write(createSitemap(posts));
    res.end();
  }
}

export default Sitemap;
</code></pre>



<p>Đây là ví dụ về kết quả đầu ra.</p>



<figure class="wp-block-image size-full"><img decoding=async  width="937" height="500" src="https://ml3lpt0uarlu.i.optimole.com/w:937/h:500/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/Screen-Shot-2022-09-19-at-23.08.06.png" alt="Dynamic Sitemap" class="wp-image-8516"/><figcaption>Dynamic Sitemap</figcaption></figure>



<h2 id="robotstxt">robots.txt</h2>



<p>Cuối cùng, chúng ta có thể tạo một tệp tĩnh tại&nbsp;<code>public/robots.txt</code>&nbsp;để xác định tệp nào có thể được thu thập thông tin và vị trí của sơ đồ trang web.</p>



<pre class="wp-block-code"><code>User-agent: *
Sitemap: https://callmetony.com/sitemap.xml</code></pre>


Tạo Sơ đồ trang web động (Dynamic Sitemap) với Next.js


<p>Mình đã dành rất nhiều thời gian trong 4 tháng qua để tạo ứng dụng <a href="/hoc-next-js/" target="_blank" rel="noreferrer noopener">Next.js</a> cho cả công việc và cá nhân.</p>



<ul><li>Mình đã chuyển trang cá nhân của mình từ 100% WordPress sang Headless Next.js Front-End +  WordPress CMS Back-End.</li><li>Trang web của GET Express đang được xây dựng lại với Next.js + Strapi.</li></ul>



<p>Trong suốt quá trình đó, Mình đã thực sự ấn tượng với Next.js và hệ sinh thái của nó. Dưới đây là một số điều Mình đã học được:</p>



<h2 id="css-modules">CSS Modules</h2>



<p>Mình đã làm việc với CSS, Sass, CSS-in-JS và bây giờ là CSS Modules. Đối với hầu hết các ứng dụng, Mình khuyên bạn nên sử dụng CSS Modules.</p>



<p>CSS Modules ngăn chặn xung đột đặt tên và giúp bạn không tải quá nhiều kiểu. Chúng được&nbsp;[tích hợp trực tiếp vào Next.js], giúp bạn dễ dàng bắt đầu</p>



<h2 id="font-loading">Font Loading</h2>



<p>Bằng cách sử dụng&nbsp;<code>@font-face</code>&nbsp;kết hợp với thuộc tính&nbsp;<code>font-display</code>, Mình có thể ngăn chặn FOUT (Flash of Unstyled Text) và FOIT (Flash of Invisible Text).</p>



<pre class="wp-block-code"><code>@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url(/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
</code></pre>



<p>Hơn nữa, Mình có thể&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/preload-critical-assets/">tải trước</a>&nbsp;tệp font chữ đã được tối ưu hóa trong phần Head của Document.</p>



<p>pages/_document.js</p>



<pre class="wp-block-code"><code>class MyDocument extends Document {
  render() {
    return (
      &lt;Html lang="en"&gt;
        &lt;Head&gt;
          &lt;link
            rel="preload"
            href="/fonts/inter-var-latin.woff2"
            as="font"
            type="font/woff2"
            crossOrigin="anonymous"
          /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    );
  }
}

export default MyDocument;
</code></pre>



<p><strong>Cập nhật</strong>: Để biết thêm thông tin, hãy xem&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://tanhuynh.io/blog/web-fonts-nam-2021">Font chữ Web vào năm 2021</a>.</p>



<h2 id="dynamic-imports-and-testing">Dynamic Imports and Testing</h2>



<p>Có khả năng khi scaling ứng dụng Next.js, bạn sẽ muốn sử dụng một External Package mà không hoạt động tốt server-side rendered. Với mình thì package này là&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://react-select.com/">react-select</a>.</p>



<p>Khi SSR thành phần này, nó chỉ đơn giản là không hoạt động trong Safari. Cho đến khi lỗi đó được sửa, Mình cần một giải pháp thay thế. Nhờ vào Next&#8217;s&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/docs/#dynamic-import">Dynamic Imports</a>, thật dễ dàng import component và tắt SSR.</p>



<pre class="wp-block-code"><code>import dynamic from 'next/dynamic';

const ReactSelectNoSSR = dynamic(() =&gt; import('../components/select'), {
  ssr: false
});

export default () =&gt; (
  &lt;&gt;
    &lt;Header /&gt;
    &lt;ReactSelectNoSSR /&gt;
    &lt;Footer /&gt;
  &lt;/&gt;
);
</code></pre>



<p>Khi mọi thứ hoạt động ổn, chúng ta có thể thêm loading placeholder để làm trải nghiệm người dùng tốt hơn.</p>



<pre class="wp-block-code"><code>const ReactSelectNoSSR = dynamic(() =&gt; import('../components/select'), {
  loading: () =&gt; &lt;Input /&gt;,
  ssr: false
});
</code></pre>



<p>Tuyệt vời 🎉 ok, giờ làm sao để test đây?</p>



<p>Mình hay dùng&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://jestjs.io/">Jest</a>, một testing libary. Hỗ trợ Dynamic Import do Next.js cung cấp&nbsp;<strong>không cho</strong>&nbsp;thấy cách tải trước các components được dynamic import trong môi trường của Jest. Tuy nhiên, nhờ&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://github.com/FormidableLabs/jest-next-dynamic">jest-next-dynamic</a>, chúng ta có thể hiển thị đầy đủ tree component thay vì loading placeholder. Ngon lành!</p>



<p>Bạn sẽ cần add&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://www.npmjs.com/package/babel-plugin-dynamic-import-node">babel-plugin-dynamic-import-node</a>&nbsp;vào&nbsp;<code>.babelrc</code>.</p>



<p>.babelrc</p>



<pre class="wp-block-code"><code>{
  "plugins": &#91;"babel-plugin-dynamic-import-node"]
}
</code></pre>



<p>Then, you can use&nbsp;<code>preloadAll()</code>&nbsp;to render the component instead of the loading placeholder.</p>



<pre class="wp-block-code"><code>import preloadAll from 'jest-next-dynamic';
import ReactSelect from './select';

beforeAll(async () =&gt; {
  await preloadAll();
});
</code></pre>



<h2 id="mdx">MDX</h2>



<p><a target="_blank" rel="noreferrer noopener" href="https://github.com/tanhuynh1808/tanhuynh.io">Portfolio của mình</a>&nbsp;đã thay đổi khá nhiều từ khi chỉ là trang HTML &amp; CSS tĩnh. Sau đó, mình đổi sang dùng&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://wordpress.com/">WordPress</a>&nbsp;để tiện trong việc quản lý nội dung. Mọi thứ rất ổn cho đến khi mình muốn tùy ý thay đổi toàn bộ giao diện để thân thiện với người dùng khi đọc blog của mình hơn, đồng thời để mình luyện tập code Javascript, cho nên mình đã chuyển sang Next.js và MDX.</p>



<p>Với&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://github.com/mdx-js/mdx">MDX</a>, mình có thể sử dụng JSX components ngay trong Markdown một các dễ dàng. Với các này, nếu như mình muốn tùy chỉnh một cái gì đó thì mọi thứ đơn giản như là import một React Component vậy.</p>



<h2 id="link-prefetching">Link Prefetching</h2>



<p>Để tối đa hóa performance, bạn có thể dùng&nbsp;<code>prefetch</code>&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/docs#prefetching-pages">attribute</a>&nbsp;trên Next&#8217;s&nbsp;<code>&lt;link&gt;</code>&nbsp;component. Điều này sẽ giúp cho trang tải ngay lập tức. Kể từ Next.js 8,&nbsp;<code>prefetch</code>&nbsp;sử dụng&nbsp;<code>&lt;link rel = "preload"&gt;</code>&nbsp;thay vì thẻ&nbsp;<code>&lt;script&gt;</code>. Nó cũng chỉ bắt đầu tìm nạp trước sau khi tải về để cho phép trình duyệt quản lý tài nguyên.</p>



<pre class="wp-block-code"><code>&lt;Link prefetch href="/"&gt;
  &lt;a&gt;Home&lt;/a&gt;
&lt;/Link&gt;
</code></pre>



<h2 id="polyfills">Polyfills</h2>



<p>Next.js hỗ trợ IE11 và tất cả các trình duyệt hiện đại (Edge, Firefox, Chrome, Safari, Opera). Tuy nhiên, có thể mã của riêng bạn hoặc các phần phụ thuộc NPM bên ngoài có thể sử dụng các tính năng không được hỗ trợ trong trình duyệt mục tiêu của bạn. Trong trường hợp này, bạn sẽ cần&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/docs/basic-features/supported-baries-features#custom-polyfills">thêm polyfills</a>.</p>



<p>Bạn sẽ cần thêm top-level import cho polyfill cụ thể mà bạn cần trong Custom&nbsp;<code>&lt;App&gt;</code>&nbsp;hoặc component riêng lẻ.</p>



<p>pages/_app.js</p>



<pre class="wp-block-code"><code>
// Add your polyfills here or at the component level.
// For example...
// import 'resize-observer-polyfill'

function MyApp({ Component, pageProps }) {
  return &lt;Component {...pageProps} /&gt;
}

export default MyApp
</code></pre>



<h2 id="vercel">Vercel</h2>



<p><a target="_blank" rel="noreferrer noopener" href="https://vercel.com/">Vercel</a>&nbsp;là cách&nbsp;<strong>dễ nhất để triển khai ứng dụng&nbsp;</strong>mà mình từng sử dụng. Bắt đầu cực kì dễ dàng và GitHub integration của họ sẽ tự động triển khai ứng dụng của bạn theo các yêu cầu pull request và có link để bạn xem lại các thay đổi. Nếu mọi thứ có vẻ tốt, nó sẽ deploy thành prod khi PR được merged. Đơn giản nhỉ.</p>



<p>Hệ sinh thái Vercel hoạt động cùng nhau rất tốt.&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://vercel.com/domains">Dịch vụ Domain</a>&nbsp;của họ cho phép bạn để mua tên miền từ command line. Mình chưa bao giờ có thể chuyển từ một ý tưởng thành một ứng dụng thực sự, được triển khai được lưu trữ trên một domain nhanh đến như vậy. Bản thân mình thậm chí đã có thể thiết lập chuyển tiếp email cho domain của mình và tạo&nbsp;<code>hi@tanhuynh.io</code>&nbsp;bằng cách sử dụng&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://improvmx.com/">randomvmx</a>&nbsp;🎉</p>



<h2 id="where-to-get-help">Where To Get Help</h2>



<p>Hỗ trợ từ cộng đồng Next.js và Vercel thật sự&nbsp;<em>fantastic</em>. Họ phản hồi rất nhanh từ email, cho tới bất kỳ hình thức liên hệ khác. Phương pháp ưa thích của mình luôn là&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://github.com/zeit/next.js/discussions">Thảo luận trên GitHub</a>. Tất cả câu hỏi và câu trả lời được lập chỉ mục, có thể tìm kiếm và dễ dàng tìm thấy.&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/learn/">Hướng dẫn</a>&nbsp;và&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/docs">docs</a>&nbsp;của họ cũng rất hay và được viết rất tốt, rất dễ hiểu.</p>


Những điều mình đã học được khi xây dựng Next.js Apps


<p>Bắt đầu từ tháng 6 này, Google sẽ thêm Core Web Vitals vào tín hiệu xếp hạng Trải nghiệm trang của mình. Năm ngoái, Google đã công bố rằng những thay đổi đang đến trong cách thuật toán của họ xếp hạng các trang vượt xa tốc độ tải trang, duyệt web an toàn, HTTPS và tính thân thiện với thiết bị di động của chúng.</p>



<p>Core Web Vitals đánh giá tốc độ, khả năng phản hồi và độ ổn định trực quan của các trang và ưu tiên trang đó trong bảng xếp hạng dựa trên kết quả của những điểm số này. Điều này có nghĩa là hiệu suất trang web của bạn có ảnh hưởng trực tiếp đến SEO và doanh nghiệp của bạn.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:651/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-10.png"  width="1024" height="651" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:651/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-10.png" alt="" class="wp-image-8478"/><noscript><img decoding=async  width="1024" height="651" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:651/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-10.png" alt="" class="wp-image-8478"/></noscript></figure>



<h2 id="core-web-vitals-là-gì-và-chúng-tác-động-đến-seo-như-thế-nào">Core Web Vitals là gì và Chúng tác động đến SEO như thế nào?</h2>



<p>Core Web Vitals giúp bạn hiểu tác động của hiệu suất ứng dụng của bạn đối với người dùng cuối. Có ba thành phần chính của Core Web Vitals để tối ưu hóa chất lượng trải nghiệm trang của bạn:</p>



<h3 id="largest-contentful-paint">Largest Contentful Paint</h3>



<p>Chỉ số&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/lcp/">Largest Contentful Paint (LCP)</a>&nbsp;xem xét tốc độ tải trang của bạn. LCP đo thời gian cần thiết để phần tử lớn nhất trên trang hiển thị trong khung nhìn. Đây có thể là một khối văn bản lớn, video hoặc hình ảnh chiếm nội dung chính trên trang. Đây không phải là&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/fcp/">First Contentful Paint (FCP)</a>, đo thời gian từ khi trang bắt đầu tải đến khi phần tử đầu tiên được hiển thị trên màn hình.:</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-9.png"  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-9.png" alt="" class="wp-image-8477"/><noscript><img decoding=async  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-9.png" alt="" class="wp-image-8477"/></noscript></figure>



<p>Giảm thiểu LCP của bạn chứng tỏ trang của bạn có thể sử dụng được và đưa nội dung lên màn hình một cách nhanh chóng. Mục tiêu LCP dưới 2,5 giây.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:683/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-8.png"  width="1024" height="683" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:683/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-8.png" alt="" class="wp-image-8476"/><noscript><img decoding=async  width="1024" height="683" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:683/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-8.png" alt="" class="wp-image-8476"/></noscript></figure>



<h3 id="first-input-delay">First Input Delay</h3>



<p>Chỉ số&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/fid/">First Input Delay (FID)</a>&nbsp;là nhận thức về trải nghiệm của người dùng cuối khi tương tác với một trang web. Hãy tưởng tượng bạn chỉ nhấp vào bên trong hộp nhập liệu để không có gì xảy ra &#8211; sự thất vọng với tính tương tác và khả năng phản hồi của một trang web là do sự chậm trễ đầu vào lớn.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-7.png"  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-7.png" alt="" class="wp-image-8475"/><noscript><img decoding=async  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-7.png" alt="" class="wp-image-8475"/></noscript></figure>



<p>FID xảy ra khi chuỗi chính của trình duyệt đang thực hiện các tác vụ khác và không thể phản hồi yêu cầu của người dùng. Điểm FID của bạn càng thấp, người dùng cuối của bạn càng có thể sử dụng trang của bạn. Nhắm đến FID dưới 100 mili giây.</p>



<figure class="wp-block-image size-full"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:750/h:500/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-6.png"  width="750" height="500" src="https://ml3lpt0uarlu.i.optimole.com/w:750/h:500/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-6.png" alt="" class="wp-image-8474"/><noscript><img decoding=async  width="750" height="500" src="https://ml3lpt0uarlu.i.optimole.com/w:750/h:500/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-6.png" alt="" class="wp-image-8474"/></noscript></figure>



<h3 id="cumulative-layout-shift">Cumulative Layout Shift</h3>



<p>Chỉ số&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/cls/">Cumulative Layout Shift (CLS)</a>&nbsp;là thước đo về độ ổn định bố cục tổng thể của trang web của bạn. Một trang web bất ngờ thay đổi bố cục khi tải trang có thể dẫn đến lỗi và mất tập trung của người dùng.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-5.png"  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-5.png" alt="" class="wp-image-8473"/><noscript><img decoding=async  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-5.png" alt="" class="wp-image-8473"/></noscript></figure>



<p>Điểm số&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/cls/#layout-shift-score">Cumulative Layout Shift</a>&nbsp;riêng lẻ của mỗi phần tử chỉ được tính vào CLS nếu xảy ra chuyển động không mong muốn. Nếu một phần tử mới được thêm vào DOM hoặc một phần tử hiện có thay đổi kích thước, thì phần tử đó sẽ không được tính vào sự thay đổi bố cục nếu các phần tử được tải duy trì vị trí của chúng. Nhắm mục tiêu CLS nhỏ hơn 0,1.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:683/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-4.png"  width="1024" height="683" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:683/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-4.png" alt="" class="wp-image-8472"/><noscript><img decoding=async  width="1024" height="683" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:683/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-4.png" alt="" class="wp-image-8472"/></noscript></figure>



<h2 id="cải-thiện-hiệu-suất-trang-web-để-tăng-thứ-hạng-trên-google">Cải thiện hiệu suất trang web để tăng thứ hạng trên Google</h2>



<p>Cải thiện các chỉ số quan trọng giúp trang web của bạn xếp hạng cao hơn so với các đối thủ cạnh tranh. Hãy xem các chiến lược để cải thiện Sức mạnh Web cốt lõi của bạn: kết xuất trước nội dung, tối ưu hóa hình ảnh và tối ưu hóa phông chữ.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-3.png"  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-3.png" alt="" class="wp-image-8471"/><noscript><img decoding=async  width="1024" height="477" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:477/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-3.png" alt="" class="wp-image-8471"/></noscript></figure>



<h3 id="kết-xuất-trước-nội-dung-pre-rendering-content">Kết xuất trước Nội dung (Pre-rendering Content)</h3>



<p>Một trong những điều đầu tiên bạn có thể làm để tối ưu hóa SEO và cải thiện Core Web Vitals là kết xuất trước nội dung của bạn. Bằng cách kết xuất trước nội dung, bạn có thể tạo trước HTML trên máy chủ cho mỗi trang để yêu cầu ban đầu chứa đánh dấu và Google có thể lập chỉ mục ngay lập tức. Lưu ý: Next.js hiển thị trước mọi trang theo mặc định, tối đa hóa hiệu suất và SEO. Đúng là Google có thể thu thập dữ liệu JavaScript cho các ứng dụng được hiển thị phía máy khách. Tuy nhiên, họ khuyên bạn nên sử dụng phía máy chủ hoặc kết xuất trước để không chỉ làm cho trang web của bạn nhanh hơn đối với người dùng và trình thu thập thông tin mà còn để giải thích cho những bot không sử dụng JavaScript. Các dịch vụ nhằm thêm kết xuất trước trên đầu các ứng dụng một trang có thể sẽ dẫn đến Core Web Vitals kém hơn.</p>



<h3 id="tối-ưu-hóa-hình-ảnh-image-optimization">Tối ưu hóa Hình ảnh (Image Optimization)</h3>



<p>Có một số cách để tối ưu hóa hình ảnh của bạn để cải thiện Core Web Vitals và SEO.</p>



<ul><li>Sử dụng các thuộc tính&nbsp;<code>height</code>&nbsp;và&nbsp;<code>width</code>&nbsp;trên thành phần&nbsp;<code>Image</code>&nbsp;của bạn trong phần tử Next.js hoặc&nbsp;<code>&lt;img&gt;</code>&nbsp;trong HTML để ngăn thay đổi bố cục. Việc thêm các thuộc tính này vào đánh dấu của bạn sẽ cho trình duyệt biết lượng không gian cần phân bổ.</li><li>Lazy-load hình ảnh khi chúng vào chế độ xem.</li><li>Sử dụng các định dạng hình ảnh hiện đại (WebP, AVIF).</li><li>Cung cấp hình ảnh có kích thước chính xác bằng&nbsp;<code>srcset</code>.</li><li>Cung cấp trình giữ chỗ làm mờ.</li></ul>



<h3 id="tối-ưu-hóa-font-chữ-font-optimization">Tối ưu hóa Font chữ (Font Optimization)</h3>



<p>Tám mươi hai phần trăm số trang trên máy tính để bàn sử dụng Font chữ web. Dưới đây là một số mẹo để cải thiện Core Web Vitals của bạn khi tải Font chữ:</p>



<ul><li>Sử dụng một Font chữ có thể thay đổi để bạn sẽ chỉ có một tệp chứa mọi chiều rộng, trọng lượng và kiểu Font chữ mà bạn lựa chọn.</li><li>Kết nối trước với tệp Font chữ của bạn trong phần đầu của tài liệu HTML và xác định nó trong CSS của bạn.</li><li>Tự lưu trữ Font chữ của bạn thay vì phụ thuộc vào Font chữ của Google.</li><li>Sử dụng&nbsp;<code>font-display: optional</code>&nbsp;để ngăn thay đổi bố cục (CLS).</li><li>Có Font chữ dự phòng trong trường hợp không tải được lựa chọn ban đầu.</li></ul>



<h2 id="làm-thế-nào-để-đo-lường-core-web-vitals-và-hiểu-cách-tính-điểm-xếp-hạng">Làm thế nào để đo lường Core Web Vitals và hiểu cách tính điểm xếp hạng</h2>



<p>Sau khi thực hiện các cải tiến cho trang web của bạn, sẽ có lợi khi đo lường trang web của bạn đang hoạt động như thế nào. Google Lighthouse có sẵn để kiểm tra một trang web trong năm lĩnh vực chính: hiệu suất, các phương pháp hay nhất, khả năng truy cập, SEO và Ứng dụng web tiến bộ (PWA). Core Web Vitals là một phần chính của phân tích hiệu suất.</p>



<p>Nếu bạn đang Deloy Project của bạn trên Vercel, thì Vercel Analytics đưa Lighthouse tiến thêm một bước nữa bằng cách cung cấp tính năng giám sát người dùng thực và chỉ định Điểm trải nghiệm thực (RES). Điểm số này cung cấp cho bạn một bản kiểm tra tình trạng tổng thể của Core Web Vitals mà người dùng của bạn trải nghiệm.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:716/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-2.png"  width="1024" height="716" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:716/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-2.png" alt="" class="wp-image-8470"/><noscript><img decoding=async  width="1024" height="716" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:716/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-2.png" alt="" class="wp-image-8470"/></noscript></figure>



<p>Dựa trên các chỉ số này, bạn có thể xem liệu một hồi quy hiệu suất có được giới thiệu vào bất kỳ thời điểm nào hay không và ngay lập tức hoàn nguyên về cam kết trước đó. Ngoài ra, bạn có thể thấy bảng phân tích của từng chỉ số quan trọng và các đường truyền khác nhau bên trong ứng dụng của bạn. Điều này cho phép bạn phân tích và cải thiện SEO và hiệu suất của trang web của bạn. Để biết thêm thông tin, hãy xem hướng dẫn này trên&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://web.dev/vitals/">Core Web Vitals của Google</a>. Để bắt đầu đo lường hiệu suất trang web của bạn ngay hôm nay, hãy bật&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://vercel.com/analytics">Vercel Analytics</a>&nbsp;cho bất kỳ ứng dụng Next.js, Nuxt hoặc Gatsby nào.</p>



<p>Bài viết được dịch từ&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://vercel.com/">Vercel&#8217;s Blog</a></p>


Core Web Vitals sẽ ảnh hưởng như thế nào đến Xếp hạng tìm kiếm Google vào năm 2022


<p>Mình liên tục lấy cảm hứng từ các trang web có thiết kế sáng tạo. Mình thấy rất nhiều trang web có những CSS rất đẹp nên quyết tâm tìm hiểu thêm về cách tạo Animations chỉ bằng CSS.</p>



<p>Mình thấy mình học tốt nhất bằng cách làm &#8211; tạo ra các ví dụ hữu hình để áp dụng các kỹ năng đã học. Nhiệm vụ của mình là tìm hiểu thêm về animations CSS. Để đạt được mục tiêu đó, mình đã nảy ra một ý tưởng thú vị là làm cho biểu tượng của Bang Iowa hoạt hình để xoáy như một cơn lốc xoáy.</p>



<h3 id="tạo-logo">Tạo Logo</h3>



<p>Logo của Cyclone vào cuối những năm 80 đến đầu những năm 90 đại diện cho một cơn lốc xoáy. Đây là cơ sở mà mình bắt đầu.</p>



<figure class="wp-block-image size-full"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1003/h:700/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-1.png"  width="1003" height="700" src="https://ml3lpt0uarlu.i.optimole.com/w:1003/h:700/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-1.png" alt="" class="wp-image-8466"/><noscript><img decoding=async  width="1003" height="700" src="https://ml3lpt0uarlu.i.optimole.com/w:1003/h:700/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image-1.png" alt="" class="wp-image-8466"/></noscript></figure>



<p>Mình đã đưa .png này vào Adobe Illustrator để tạo SVG&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://svgontheweb.com/">(Scalable Vector Graphic)</a>. SVG trông sắc nét ở mọi độ phân giải màn hình, có kích thước tệp siêu nhỏ và có thể dễ dàng chỉnh sửa và sửa đổi. Mình đã lần theo đường dẫn của lốc xoáy như được thấy bên dưới và tạo tệp .svg.</p>



<figure class="wp-block-image size-large"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:848/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image.png"  width="1024" height="848" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:848/q:eco/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image.png" alt="" class="wp-image-8465"/><noscript><img decoding=async  width="1024" height="848" src="https://ml3lpt0uarlu.i.optimole.com/w:1024/h:848/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image.png" alt="" class="wp-image-8465"/></noscript></figure>



<figure class="wp-block-image"><img/></figure>



<h3 id="tìm-hiểu-về-animations">Tìm hiểu về Animations</h3>



<p>CSS3 Animations cho phép bạn thay đổi dần dần từ phong cách này sang phong cách khác. Để xác định cách các kiểu đó thay đổi tại một số thời điểm nhất định, chúng mình sử dụng quy tắc&nbsp;<code>@keyframes</code>. Trong ví dụ dưới đây, mình đã tạo một quy tắc&nbsp;<code>keyframes</code>&nbsp;có tên&#8221; color &#8220;để thay đổi bộ chọn<code>&nbsp;fill</code>&nbsp;thành các màu khác nhau dựa trên tỷ lệ phần trăm hoàn thành. Thao tác này sẽ thay đổi logo từ cardinal → gold → cardinal.</p>



<pre class="wp-block-code"><code>@keyframes color {
  0% {
    fill: #99002f;
  }
  50% {
    fill: #ffc426;
  }
  100% {
    fill: #99002f;
  }
}
</code></pre>



<p>Chúng ta cần chỉ định phần tử mà chúng ta muốn liên kết animations này với. Sử dụng thuộc tính&nbsp;<code>animation</code>, chúng ta có thể áp dụng quy tắc<code>&nbsp;color</code>&nbsp;và định cấu hình cách nó chạy. Animations có sáu thuộc tính khác nhau:</p>



<ul><li><code>animation-name</code></li><li><code>animation-duration</code></li><li><code>animation-timing-function</code></li><li><code>animation-delay</code></li><li><code>animation-iteration-count</code></li><li><code>animation-direction</code></li><li><code>animation-fill-mode</code></li></ul>



<p>Để biết thêm thông tin về chi tiết cụ thể của từng thuộc tính, hãy xem&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://www.w3schools.com/css/css3_animations.asp">tài liệu đầy đủ</a>. Đây là cách chúng mình áp dụng các thuộc tính này để làm cho logo của chúng mình thay đổi màu sắc.</p>



<pre class="wp-block-code"><code>svg path {
  animation-name: color;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.85, 0.01, 0.25, 1);
}
</code></pre>



<p>Bạn cũng có thể sử dụng phiên bản ngắn.</p>



<pre class="wp-block-code"><code>svg path {
  animation: color 2s infinite cubic-bezier(0.85, 0.01, 0.25, 1);
}
</code></pre>



<p>Điều này áp dụng quy tắc &#8220;color&#8221;&nbsp;<code>@keyframes</code>&nbsp;cho đường dẫn của SVG sẽ lặp lại vĩnh viễn theo gia số 2 giây bằng cách sử dụng&nbsp;<a target="_blank" rel="noreferrer noopener" href="http://cubic-bezier.com/#.17,.67,.83,.67">khối-bezier</a>&nbsp;chức năng định thời. Chúng ta có thể áp dụng ý tưởng tương tự này để làm cho logo quay. Đầu tiên, hãy tạo một quy tắc&nbsp;<code>@keyframes</code>&nbsp;khác để quay.</p>



<pre class="wp-block-code"><code>@keyframes spin {
  0% {
    transform: rotateX(-20deg) rotateY(20deg);
  }
  100% {
    transform: rotateX(-20deg) rotateY(740deg);
  }
}
</code></pre>



<p>Cuối cùng, hãy áp dụng quy tắc này cho Container của chúng ta.</p>



<pre class="wp-block-code"><code>.container {
  animation: spin 2s infinite cubic-bezier(0.85, 0.01, 0.25, 1);
}
</code></pre>



<h3 id="kết-quả-cuối-cùng-">Kết quả cuối cùng 🎉</h3>



<figure class="wp-block-image size-full"><img decoding=async  data-opt-src="https://ml3lpt0uarlu.i.optimole.com/w:801/h:209/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image.gif"  width="801" height="209" src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20801%20209%22%20width%3D%22801%22%20height%3D%22209%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3C%2Fsvg%3E" alt="" class="optimole-lazy-only wp-image-8464"/><noscript><img decoding=async  width="801" height="209" src="https://ml3lpt0uarlu.i.optimole.com/w:801/h:209/q:mauto/f:avif/https://dev.callmetony.com/wp-content/uploads/2022/09/image.gif" alt="" class="optimole-lazy-only wp-image-8464"/></noscript></figure>



<p>Bạn có thể xem Code và ví dụ trực tiếp trên&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://codepen.io/huynhtan1808/pen/bGqejqK">CodePen</a></p>


Học CSS Animations bằng Ví dụ

Hướng dẫn cho người mới bắt đầu về Portfolio của Lập Trình Viên


<p>Kiểu chữ chiếm 95% trong thiết kế web. Lựa chọn fonts của bạn có thể rất quan trọng đối với việc xây dựng thương hiệu, khả năng đọc và hiệu suất.</p>



<p>Theo thời gian, các khuyến nghị sử dụng web fonts đã thay đổi khi các trình duyệt áp dụng các tiêu chuẩn mới. Bây giờ vào năm 2021, tôi muốn tìm hiểu các phương pháp hay nhất để sử dụng web fonts trên các trang web hiệu suất cao.</p>



<h2 id="system-fonts">System Fonts</h2>



<p>Cách nhanh nhất để sử dụng web fonts là không có. Các trình duyệt bao gồm một tập hợp các fonts an toàn cho web (ví dụ: Arial, Georgia, Times New Roman) mà bạn có thể sử dụng theo mặc định.</p>



<p>Sử dụng fonts an toàn cho web hoặc ngăn xếp fonts hệ thống sẽ là lựa chọn nhanh nhất.</p>



<pre class="wp-block-code"><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
  sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
</code></pre>



<h2 id="tại-sao-sử-dụng-web-fonts">Tại sao sử dụng Web Fonts?</h2>



<p>Nếu fonts hệ thống là lựa chọn nhanh nhất, tại sao web fonts lại tồn tại? Xây dựng thương hiệu, thiết kế cải tiến và tính nhất quán giữa các trình duyệt và thiết bị. 82% các trang web dành cho máy tính để bàn sử dụng web fonts.</p>



<p>Hãy đề cập đến năm lĩnh vực khác nhau cho các web fonts hiệu suất cao và kết thúc với một đề xuất năm 2021.</p>



<ul><li>Tự lưu trữ</li><li>Tải trước</li><li>Hiển thị fonts</li><li>Fonts có thể thay đổi</li><li>Thiết lập con</li></ul>



<h2 id="tự-lưu-trữ">Tự lưu trữ</h2>



<p>Google Fonts chịu trách nhiệm cho 70% việc sử dụng fonts trên web. Với hơn 1000 fonts, chúng cung cấp khả năng truy cập dễ dàng vào fonts chất lượng, nhiều định dạng và mặc định hiệu quả (kết nối trước và hoán đổi).</p>



<p>Tuy nhiên, Google Fonts không còn cần thiết nữa. Kể từ năm 2018, Google đã khuyên bạn nên tự lưu trữ để có hiệu suất tối ưu thông qua tải trước.</p>



<p>Không còn bất kỳ lợi thế nào về bộ nhớ đệm nữa. Giả sử bạn đang sử dụng fonts &#8220;Roboto&#8221;, đây là một fonts phổ biến trên Google Fonts. Rất có thể bạn đã truy cập một trang web khác bằng cách sử dụng &#8220;Roboto&#8221; và đã lưu vào bộ nhớ cache fonts.</p>



<p>Kể từ tháng 10 năm 2020, Chrome không còn cho phép bộ nhớ cache được chia sẻ trên các trang web nữa. Safari đã hoạt động theo cách này kể từ năm 2013. &#8220;Roboto&#8221; sẽ được tải xuống lại cho mọi trang web, bất kể nó có được lưu vào bộ nhớ đệm hay không.</p>



<p>Khi tự lưu trữ, hãy đảm bảo bạn lưu vào bộ đệm fonts của mình bằng tiêu đề HTTP Cache-Control. Immutable cho trình duyệt biết rằng tệp sẽ không bao giờ thay đổi. Khi một yêu cầu được đưa ra trong độ tuổi tối đa (1 tuổi), yêu cầu này sẽ tránh vòng vo để đảm bảo đó là nội dung mới nhất.</p>



<pre class="wp-block-code"><code>Cache-Control: public, immutable, max-age=31536000
</code></pre>



<p>Nếu bạn cần Google Fonts, hãy sử dụng những tối ưu hóa này. Với những thay đổi mới nhất trong API v2, bạn có thể điều chỉnh fonts cho phù hợp với người dùng và nền tảng cụ thể (bao gồm cả fonts có thể thay đổi).</p>



<h2 id="tải-trước">Tải trước</h2>



<p>Trình duyệt chỉ định mức độ ưu tiên tải cho các loại tài nguyên khác nhau. Theo mặc định, CSS sẽ được tải trước tập lệnh và hình ảnh. Bạn có thể ảnh hưởng đến tầm quan trọng của tài nguyên bằng cách tải trước các tài sản quan trọng.</p>



<p>Fonts được trình duyệt phát hiện muộn theo mặc định. Bằng cách tải trước, chúng tôi tìm nạp tệp fonts càng sớm càng tốt. Sau đó, trình duyệt lưu vào bộ nhớ cache của fonts làm cho nó có sẵn ngay lập tức.</p>



<p>Tải trước có thể cải thiện các chỉ số hiệu suất như Thời gian tương tác và Sơn nội dung đầu tiên. Ví dụ: Shopify đã thấy sự cải thiện 50% (1,2 giây) trong First Contentful Paint, loại bỏ Flash of Invisible Text (FOIT) của họ.</p>



<p>Tính đến năm 2020, 75% web fonts sử dụng WOFF2. Bạn có thể chỉ cần cái này. Ví dụ:</p>



<pre class="wp-block-code"><code>&lt;link
    rel="preload"
    href="/fonts/inter-var-latin.woff2"
    as="font"
    type="font/woff2"
    crossOrigin="anonymous"
/&gt;
</code></pre>



<blockquote class="wp-block-quote"><p>Hỗ trợ: Tất cả các trình duyệt hiện đại ngoại trừ Firefox.</p></blockquote>



<h2 id="fonts-display">Fonts Display</h2>



<p><code>font-display</code>&nbsp;cho phép bạn sửa đổi hành vi kết xuất của web fonts với các giá trị như tự động, hoán đổi, khối, dự phòng và tùy chọn. Khi tải web fonts, chúng tôi muốn ngăn chặn sự thay đổi bố cục. Điều này xảy ra theo hai cách:</p>



<ul><li>Flash of Unstyled Text (FOUT) &#8211; Fonts dự phòng được hoán đổi bằng một fonts mới (ví dụ: hoán đổi).</li><li>Flash of Invisible Text (FOIT) &#8211; Văn bản ẩn được hiển thị trên trang cho đến khi một fonts mới được hiển thị (ví dụ: khối).</li></ul>



<p>Các trình duyệt hiện có chiến lược mặc định tương tự như chặn. Tùy chọn duy nhất loại bỏ sự thay đổi bố cục là tùy chọn. Kết hợp với các tối ưu hóa hiệu suất khác trong bài viết này, tùy chọn là lựa chọn tốt nhất của bạn.</p>



<pre class="wp-block-code"><code>@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: optional;
  src: url(/fonts/inter-var-latin.woff2) format('woff2');
}
</code></pre>



<blockquote class="wp-block-quote"><p>Hỗ trợ: Tất cả các trình duyệt hiện đại</p></blockquote>



<h2 id="variable-fonts">Variable Fonts</h2>



<p>Variable Fonts cho phép chúng ta kết hợp nhiều kiểu và độ đậm (ví dụ: đậm, nghiêng) vào một tệp fonts duy nhất.</p>



<pre class="wp-block-code"><code>@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900; // Range of weights supported
  font-display: optional;
  src: url(/fonts/inter-var-latin.woff2) format('woff2');
}
</code></pre>



<p>Bạn có thể thử các tùy chọn fonts có thể thay đổi khác nhau tại&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">đây</a>.</p>



<blockquote class="wp-block-quote"><p>Hỗ trợ: Tất cả các trình duyệt hiện đại. Ngay cả API Google Fonts v2 cũng có hỗ trợ cho các fonts biến đổi.</p></blockquote>



<h2 id="cài-đặt-con">Cài đặt con</h2>



<p>Tệp fonts chứa nhiều ngôn ngữ và glyphs, làm tăng kích thước tệp. Thiết lập con là loại bỏ các ký tự bạn không cần.</p>



<p>Ví dụ: chúng tôi có thể sử dụng fonts Inter biến và tập hợp con cho các ngôn ngữ latin.</p>



<pre class="wp-block-code"><code>@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900; // Range of weights supported
  font-display: optional;
  src: url(/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
</code></pre>



<h2 id="phần-kết-luận">Phần kết luận</h2>



<ol><li>Sử dụng một fonts có thể thay đổi</li><li>Tải trước tệp fonts của bạn</li><li>Tự lưu trữ thay vì Fonts Google</li><li>Sử dụng&nbsp;<code>font-display: option</code>&nbsp;để ngăn thay đổi bố cục</li></ol>



<p><a target="_blank" rel="noreferrer noopener" href="https://github.com/huynhtan1808/tanhuynh.io">Đây là ví dụ</a>&nbsp;của một trang web triển khai tất cả các đề xuất này.</p>



<h2 id="tương-lai">Tương lai</h2>



<p>Nếu bạn cần sử dụng&nbsp;<code>font-display: swap</code>, hỗ trợ trong tương lai cho&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://www.youtube.com/watch?t=176&amp;v=Z6wjUOSh9Tk&amp;feature=youtu.be">Ghi đè số liệu fonts</a>&nbsp;sẽ giảm bớt sự thay đổi bố cục khi hoán đổi .</p>



<pre class="wp-block-code"><code>@font-face {
  font-family: ...;
  src: ...;
  ascent-override: 80%;
  descent-override: 20%;
  line-gap-override: 0%;
  ...;
}</code></pre>


Web Fonts năm 2022

Front-End Developer Nên Chọn Back-End Nào?


<p>Bạn đã nghe những điều tuyệt vời về Web Framework mới có tên là&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/">Next.js</a>, nhưng bạn vẫn không chắc tại sao mọi người lại sử dụng nó.</p>



<p>Một cách để hiểu tại sao bạn nên học Next.js là hiểu nó giải quyết những vấn đề gì. Điều này trực tiếp giải thích tại sao nó trở nên phổ biến như vậy.</p>



<h2 id="tại-sao-lại-sử-dụng-framework">Tại sao lại sử dụng Framework?</h2>



<p>Giả sử bạn là một công ty khởi nghiệp mới đang cố gắng khởi chạy một trang web. Bạn có thể có một số yêu cầu như:</p>



<ul><li>Trang Splash với thông tin về sản phẩm</li><li>Giới thiệu về trang mô tả đội</li><li>Các câu hỏi thường gặp</li><li>Thu hút khách hàng tiềm năng thông qua biểu mẫu liên hệ</li><li>Đăng ký nhận bản tin</li></ul>



<p>Không có gì trong những yêu cầu này quy định sự cần thiết của một khuôn khổ. Bạn hoàn toàn có thể đáp ứng những yêu cầu này bằng cách sử dụng HTML, CSS và JavaScript đơn giản.</p>



<p>Tuy nhiên, nếu chúng ta có tầm nhìn xa, chúng ta có thể biết rằng các yêu cầu trong tương lai yêu cầu quy trình xác thực người dùng và sự khởi đầu của sản phẩm SaaS.</p>



<p>Giá trị thực sự của việc sử dụng một khuôn khổ là năng suất của nhà phát triển, kiến thức được chia sẻ, tái sử dụng mã và tạo ra một nền tảng cho tương lai. Nếu chúng ta bắt đầu với React / Next.js, chúng ta có thể đáp ứng các yêu cầu ban đầu một cách dễ dàng và mở đường cho lần lặp tiếp theo của sản phẩm.</p>



<h2 id="react">React</h2>



<p><a target="_blank" rel="noreferrer noopener" href="https://reactjs.org/">React</a>&nbsp;đã trở thành tiêu chuẩn công nghiệp để xây dựng các ứng dụng web hiện đại. Trong số 90.000 nhà phát triển được&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://insights.stackoverflow.com/survey/2019">khảo sát bởi Stack Overflow</a>, React là web framework được yêu thích nhất và mong muốn nhất.</p>



<p>Tại sao? Với React, bạn có thể xây dựng mọi thứ từ các trang giật gân tiếp thị đơn giản đến các ứng dụng web chính thức trên quy mô của Facebook. Nó linh hoạt và có thể kết hợp. Các nhà phát triển thích điều này.</p>



<p>Xu hướng React.js Xu hướng này có nghĩa là ngày càng có nhiều nhà phát triển đang học React, và cả JavaScript nữa. Nó trở thành một trong những kỹ năng hot nhất mà các nhà tuyển dụng đang tìm kiếm. JavaScript là&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://octoverse.github.com/">ngôn ngữ số 1 được sử dụng</a>&nbsp;theo GitHub.</p>



<p>GitHub Octoberse Đối với các công ty, điều này có nghĩa là bạn có nhiều khả năng tìm được những nhân viên đã biết React. Đối với các nhà phát triển, điều này trở thành một kỹ năng rất có lợi để thêm vào bộ kỹ năng của bạn.</p>



<p>Theo&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://www.npmtrends.com/">xu hướng NPM</a>, nó vượt xa các web framework khác như Angular và Vue khoảng 5 triệu lượt cài đặt / ngày.</p>



<p>Xu hướng cài đặt NPM Điều này không có nghĩa là React là hoàn hảo. Vì bạn đang tải nội dung phía máy khách, bạn phải đợi gói JavaScript tải trước khi có thể xác định nội dung sẽ hiển thị trên trang. Điều này có thể gây ra vấn đề đối với những người dùng có kết nối chậm hơn.</p>



<p>Thêm vào đó, các công cụ tìm kiếm vẫn gặp khó khăn với việc lập chỉ mục các ứng dụng JavaScript phía máy khách. Nếu bạn lo lắng về Tối ưu hóa Công cụ Tìm kiếm (SEO) và muốn nội dung của bạn được lập chỉ mục nhanh hơn, tốt hơn là gửi đánh dấu từ máy chủ. Nhập Next.js.</p>



<h2 id="nextjs">Next.js</h2>



<p><a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/">Next.js</a>&nbsp;giải quyết cả hai vấn đề đó bằng cách sử dụng kết xuất phía máy chủ. Framework của Next cho phép bạn xây dựng mã React có thể mở rộng, hoạt động hiệu quả mà không gặp rắc rối về cấu hình. Đó là lý do tại sao rất nhiều công ty phụ thuộc vào Next cho các ứng dụng sản xuất vận chuyển.</p>



<figure class="wp-block-image"><img src="https://tanhuynh-mxgxq78qj-huynhtan.vercel.app/_next/image?url=%2Fstatic%2Fimages%2Fnextjs%2Fcompanies.png&amp;w=3840&amp;q=75" alt="Các công ty sử dụng Next.js"/></figure>



<h2 id="phương-pháp-tiếp-cận-zero-config">Phương pháp tiếp cận Zero-Config</h2>



<p>Để vận chuyển đúng một ứng dụng React hiệu quả, có rất nhiều điều bạn phải làm đúng. Bạn sẽ muốn định cấu hình Babel một cách chính xác để có thể sử dụng các tính năng JavaScript hiện đại, nhưng vẫn hỗ trợ các trình duyệt cũ. Bạn cũng sẽ muốn nhóm tất cả nội dung của mình (ví dụ: nhiều tệp JavaScript) để đưa vào tệp HTML của bạn (sử dụng một cái gì đó như Webpack). Danh sách cứ kéo dài.</p>



<p>Sẽ thật tuyệt nếu không phải lo lắng về điều này phải không?</p>



<p>&#8220;Sự mệt mỏi với JavaScript&#8221; này đã thúc đẩy việc&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://github.com/facebook/create-react-app">Create React App</a>&nbsp;(CRA), cải thiện đáng kể trải nghiệm của nhà phát triển khi tạo ra một ứng dụng React mới. Nhưng chúng ta có thể làm tốt hơn không?</p>



<p>Next.js hỗ trợ IE11 và tất cả các trình duyệt hiện đại. Babel được định cấu hình cho bạn, với một cửa thoát hiểm để ghi đè nếu bạn cần. CRA kết hợp tất cả các tệp JavaScript thành một gói duy nhất, trong khi Next.js có hỗ trợ tách mã. Khi tôi truy cập / định tuyến, chúng tôi chỉ tải JavaScript được sử dụng trên trang đó. Hiệu suất tốt hơn! Bạn muốn xử lý định tuyến với CRA? Điều đó sẽ yêu cầu bộ định tuyến phản ứng (hoặc một thư viện tương tự). Next.js có tính năng định tuyến dựa trên hệ thống tệp. Không cần cài đặt thêm!</p>



<h2 id="trang-web-tĩnh-static-site">Trang web tĩnh (Static Site)</h2>



<p>Tôi đã đề cập đến Next.js cũng có thể xử lý các trang web tĩnh?</p>



<p>Chạy&nbsp;<code>next build</code>&nbsp;sẽ hiển thị trước các tuyến đường mà không cần tìm nạp dữ liệu vào HTML tĩnh. Bạn cũng có thể sử dụng&nbsp;<code>getStaticProps</code>&nbsp;và&nbsp;<code>getStaticPaths</code>&nbsp;để tạo một trang web tĩnh với dữ liệu động.</p>



<p>Ngoài ra, bạn có thể deloy trong một vài cú nhấp chuột với&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://vercel.com/new">Verce</a>.</p>



<h2 id="kết-luận">Kết luận</h2>



<p>Nextjs có&nbsp;<a target="_blank" rel="noreferrer noopener" href="https://nextjs.org/">quá nhiều tính năng</a>, thật khó để nắm bắt được phạm vi rộng trong một bài viết. Tôi thực sự khuyên bạn nên xem trang web của họ, thử một ví dụ và xem liệu Next.js có thể giúp bạn xây dựng các ứng dụng web nhanh hơn hay không.</p>



<pre class="wp-block-code"><code>npx create-next-app</code></pre>


Tony Huynh

Web Developer tại One Pixel Media

Bài viết nổi bật

Cách nhận mã PIN xác minh Google Adsense trong 2 Ngày

Tạo Sơ đồ trang web động (Dynamic Sitemap) với Next.js

Những điều mình đã học được khi xây dựng Next.js Apps

Core Web Vitals sẽ ảnh hưởng như thế nào đến Xếp hạng tìm kiếm Google vào năm 2022