Consideration When Using External Resources on Your Web Page

    Unfortunately some network did not have internet connection except you log in to their instance. Before you can even reach the login page, the site you are trying to reach are requesting data to fonts.googleapis.com that mean require any internet connection. This process will stuck and wait until reach the timeout (limit). 

    The other case are when you are try to developing a website with your local environment without charge any internet / data connection. And the last that always hearth-bleeding are waiting for the DNS resolver to solve this issue when they cannot understand what is fonts.googleapis.com domain. 

    Last but not least, you can try to download specific fonts and put it on your web folder or you can just using default fonts that are available without requesting from the external sites. With this concern, I hope your site are very fast to load and not causing any issues because of "unimportant thing" that you copy from the internet.

NPM Install Take So Long and Sometimes Looks Hang

    I am currently using NPM for developing ReactJS and I just test sample code from git. Eventually when I try to install packages for the first time its work normally, because of some reason I try to upgrading some package and reinstall it but the installation process looks hang.

The package that I try to reinstall is react-scripts. Here is some advice from StackOverflow:

• Try to remove package-lock.json (https://stackoverflow.com/questions/50522376/npm-install-hangs-on-loadidealtreeloadalldepsintoidealtree-sill-install-loadid)
• Try to using unix command line (e.g. git bash). (https://stackoverflow.com/questions/64290462/npx-create-react-app-takes-too-long-every-time)
• Try to using `npm install <package> --verbose` to know the progress

Walkthrough:

    I just try install using verbose and hang after checking several packages. I find the pattern which different between the package that pass the check and package that hang, it was the status code (HTTP Response), package that pass check will response with status code 304 (Not Modified) and for the hang one there is no response. I search some solution on StackOverflow and found this 'https://stackoverflow.com/questions/45433130/npm-install-gets-stuck-at-fetchmetadata' that lead me to checking the npm installation registry domain (registry.npmjs.org) which is the global config of my npm registry.

Figure out:

    I try the url of hang package in the browser, for the first time it return ERR_NETWORK_CHANGED that I know because of DNS Server not correctly response my request. After that I try to ping to make sure my connection and it was fine.

Resolve:

    After several test and check, I try to add static route to my hosts list that direct to the npm registry url. I add this line  at the end of file /etc/hosts.

104.16.20.35 registry.npmjs.org

This is the end because when I try install again (with verbose) it was really smooth and the log is show that not only response with status code of 304, it also show the status code of 200.