DEV Community: Ahmet Ustun

Mixing 2 Colors in CSS with color-mix()

Ahmet Ustun — Fri, 29 Mar 2024 09:15:43 +0000

This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature.

One Byte Explainer:

Maintaining color palettes with hard-coded values in CSS can be a burden. With color-mix(), developers can mix 2 colors with different percentages to obtain a new one. It can be handy when lighter, darker, or opaque versions of a brand color are needed.

Additional Context:

The simple usage of color-mix with percentages:
color-mix(in srgb, green %30, red 70%)

The sum of the percentages gives the alpha value:
color-mix(in srgb, green %30, red %30)

If one of the percentages is omitted, the sum will be 100%:
color-mix(in srgb, green %30, red)

If both the percentages are omitted, each one will be 50%:
color-mix(in srgb, green, red)

As of March 2024, color-mix() works across the latest browser versions.

Listing the Globally Installed NPM Packages

Ahmet Ustun — Fri, 21 Apr 2023 09:35:20 +0000

When working with Node.js, you may install various NPM packages globally to use them across multiple projects. Over time, you may forget which global NPM packages are on your system.

In this article, we’ll explore how to list the global NPM packages on your system with code samples.

Listing the Global NPM Packages

To list the installed global NPM packages, you can use the following command in your terminal:

# List the installed global NPM packages
npm list -g --depth 0

This command will display the list of global NPM packages installed on your system.

-g or --global: The option to list global packages on your system.
--depth 0: The option to limit the depth of the dependency tree to zero. This will only list the top-level packages without their dependencies.

Listing the Global NPM Packages with Details

To list the installed global NPM packages with details, such as the version number and location, you can use the following command:

# List the installed global NPM packages with details
npm list -g --depth 0 --long

This command will display the list of global NPM packages installed on your system along with their version number and installation location.

--long: The option to display additional information about each package, including its version and the location of its files on disk.

Checking the Version of a Global NPM Package

To check the version of a specific global NPM package, you can use the following command:

# Check the version of a specific global NPM package
npm list -g <package_name>

Replace with the name of the global NPM package you want to check.

npm list -g create-react-app

Conclusion

Listing the global NPM packages on your system is a simple process that can help you keep track of the NPM packages installed on your system.

Remember to periodically check the list of global NPM packages to keep your system up-to-date and avoid any conflicts or issues with your projects.

Changing Remote in Git Repositories

Ahmet Ustun — Wed, 19 Apr 2023 21:08:59 +0000

Git is a powerful version control system that allows developers to collaborate on code and track changes made to a project over time.

Sometimes, you may need to change the remote URL associated with a Git repository. In this article, we’ll explore how to change the remote URL of a Git repository with code samples.

Checking the Current Remote URL

Before changing the remote URL, it’s essential to verify the current remote URL associated with your Git repository.

You can do this by using the following command:

# Verify the current remote URL
git remote -v

This command will display the current remote URL associated with your Git repository.

Adding a New Remote URL

To add a new remote URL to your Git repository, you can use the following command:

# Add a new remote URL
git remote add <name> <URL>

Replace with a name for your new remote and with the URL of your new remote repository.

git remote add newRemote https://github.com/user/newrepo.git

Removing an Old Remote URL

To remove an old remote URL from your Git repository, you can use the following command:

# Remove an old remote URL
git remote rm <name>

Replace with the name of the old remote repository, you want to remove.

git remote rm oldRemote

Setting a New Remote URL as Default

To set a new remote URL as the default for your Git repository, you can use the following command:

# Set a new remote URL as default
git remote set-url origin <URL>

Replace with the URL of your new remote repository.

git remote set-url origin https://github.com/user/newrepo.git

Conclusion

Changing the remote URL of a Git repository can be done easily with the right commands without losing any of your existing code.

Make sure to check the current remote URL before making any changes, and set the new remote URL as default to avoid any confusion in the future.