Forem: Vy Quốc Vũ

Ways to optimize your Lighthouse score

Vy Quốc Vũ — Wed, 14 Dec 2022 18:08:12 +0000

There are several ways to optimize your Lighthouse score, including the following:

Minimize the size of your page's resources, such as HTML, JavaScript, and CSS files, by minifying them and reducing the number of files that your page loads. This can help improve your page's performance and reduce its loading time.

Enable compression on your web server, which can help reduce the size of the files that your page loads. This can help improve your page's performance and reduce its loading time.

Optimize your images by reducing their size and using the appropriate image file format for the type of image. This can help improve your page's performance and reduce its loading time.
Use a content delivery network (CDN) to serve your page's static assets, such as images and JavaScript files. This can help improve your page's performance by reducing the distance that the assets have to travel to reach the user.

Use caching to store frequently-used resources on the user's device, so that they don't have to be downloaded again on subsequent page visits. This can help improve your page's performance and reduce its loading time.

Use asynchronous loading for your JavaScript and CSS files, so that they don't block the rendering of the page. This can help improve your page's performance and reduce its loading time.

Use a web font service, such as Google Fonts, to serve your page's fonts, rather than hosting them on your own server. This can help improve your page's performance and reduce its loading time.

Use a tool, such as Lighthouse, to audit your page and identify specific areas for improvement. This can help you identify specific steps that you can take to optimize your page and improve your Lighthouse score.

Remove Vietnamese characters form string in JS

Vy Quốc Vũ — Thu, 18 Aug 2022 16:57:37 +0000

    function _formatString(str) {
      str = str.toLowerCase();
      str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, "a");
      str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, "e");
      str = str.replace(/ì|í|ị|ỉ|ĩ/g, "i");
      str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, "o");
      str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, "u");
      str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, "y");
      str = str.replace(/đ/g, "d");
      return str;
    }

I wrote a state management npm - Any State

Vy Quốc Vũ — Tue, 16 Aug 2022 17:15:27 +0000

Features:

Lightweight object state management
Open Source Project
Small App Size (~2Kb)
Easy to use with nay framework, just a callback on change

About:

AnyState is an open source programs built using Typescript (for a more secure environment).

Usage

Initialize anyState object with createStore()

  const anyState =  createStore({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });

Set state

  anyState.setState({
    name: 'John',
    age: 30,
    children: [{
      name: 'Bob',
      age: 5,
    }]
  });

Get state

  const state = anyState.getState();

Set item

  // const path = 'name';
  const path = 'children[0].name'; // the path to the item
  anyState.setItem(path, 'Jane');

Get item

  const path = 'children[0]';
  const child = anyState.getItem(path);

Watch onChange

  const path = 'name'; // path to item
  anyState.watch(path, (nextState, prevState) => {
     // do anything
  });

Examples

React Todo

Solid Todo

Links:

GitHub: https://github.com/vyquocvu/anystate
Npm: https://www.npmjs.com/package/anystate
MySite: https://vyquocvu.co/

Happy coding! 🎉
Accepted any advices.