Use "const" to define variables. This practice forces you to write immutable code.
Avoid global variables
Avoid duplicated code
Avoid negative conditions
Using Location API on anchor elements
JavaScript
Did you know that a HTML anchor element can be treated as a Location object? This means similar to how you can use
window.location to read or write different parts of a URL, you can do the same with an anchor element. For example if you
have a link like this:
You can use different properties of Location object on an anchor element and same as with window.location you
can both read and write these properties. For more info see: https://developer.mozilla.org/en-US/docs/Web/API/Location
Fixing TypeScript error property does not exist on type EventTarget
TypeScript
When working with event listeners in TypeScript one often runs into error that a particular property does not exist on type EventTarget. While it's relatively easy to fix this error using type "any" or by typecasting the event target using "as", none of these solutions are optimal since they simply disable TypeScript's type checking, which is what we are using TypeScript for in the first place!
Use below command in terminal to get a list of all open ports:
netstat -an | grep LISTEN
Find the process ID (PID) of the port you wish to close. You may need to use sudo.
lsof -i :PortNumber
Then use the following command to kill the process listening on your port. You may need to use sudo with kill -9 parameter.
kill PID
Deploying a static HTML page and a serverless function (Node.js) live via Vercel
VercelNode.js
In this example you will create a static HTML page that calls an api (Node.js serverless function) which responds by returning
the word "Hello
World" and displaying it in the browser. You can see a deployed version at:
https://test-pi-tawny.vercel.app/
Responsive images that do not scale up beyond their intrinsic size
CSSResponsive
Usually all you need to make an image resize based on size of screen is to add one simple CSS rule:
img {
width: 100%;
}
However if the screen resolution is higher than width of your image, this would result in a blurred image as there is simply not enough data in image to render it at higher resolutions. In such cases it might be more desirable to keep the image responsive, but not allow it to get larger than it's actual size. This can be achieved by the following CSS rule:
img {
width: auto;
max-width: 100%;
}
Deploy to Vercel only when a specific file or folder in repository is changed
VercelGithub Actions
When you install Vercel application on GitHub and give it access to your repository, GitHub will trigger a deployment on Vercel every time there is
a new commit in your main branch, however if your API on Vercel only needs to be updated when a certain file or folder is changed, these
deployments are unnecessary. You can avoid unnecessary deployments to Vercel using GitHub Actions as described here:
https://vercel.com/guides/how-can-i-use-github-actions-with-vercel.
Another advantage of using GitHub Actions with Vercel is that you can uninstall Vercel application from GitHub as Vercel no longer needs access to
your GitHub repository. You simply need to create a token on Vercel and store it along with your Vercel Org and Project IDs (found in .vercel/project.json in root of your project) in secrets on Github at https://github.com/your-username/your-repository/settings/secrets/actions
Disabling preview deployments in Vercel
Vercel
If you don't want Vercel to do preview deployments for other branches of your repository you can disable preview deployments by going to your project's settings > git > Ignored Build Step and add the following command:
if [ "$VERCEL_ENV" == "production" ]; then exit 1; else exit 0; fi
This is probably the easiest way. Another way would be to add a vercel.json to all branches and set "deploymentEnabled" to false for any branches that should not trigger deployment, like below: