npm- Specifying dependencies and devDependencies in a package.json file

Install packages required by your application in production:

 

Install packages that are only needed for local development and testing:

NPM cheat sheet:
https://kapeli.com/cheat_sheets/npm.docset/Contents/Resources/Documents/index

Specifying dependencies and devDependencies in a package.json fileTo specify the packages your project depends on, you must list them as “dependencies” or “devDependencies” in your package’s package.json file. When you (or another user) run npm install, npm will download dependencies and devDependencies that are listed in package.json that meet the semantic version requirements listed for each. To see which versions of a package will be installed, use the semver calculator.”dependencies”: Packages required by your application in production.”devDependencies”: Packages that are only needed for local development and testing.

To specify the packages your project depends on, you must list them as "dependencies" or "devDependencies" in your package’s package.json file. When you (or another user) run npm install, npm will download dependencies and devDependencies that are listed in package.json that meet the semantic version requirements listed for each. To see which versions of a package will be installed, use the semver calculator.

  • "dependencies": Packages required by your application in production.
  • "devDependencies": Packages that are only needed for local development and testing.

Source: Specifying dependencies and devDependencies in a package.json file | npm Documentation

mockserver – npm

mockserver is a library that will help you mocking your APIs in a matter of seconds: you simply organize your mocked HTTP responses in a bunch of mock files and it will serve them like they were coming from a real API; in this way you can write your frontends without caring too much whether your backend is really ready or not.

Source: mockserver – npm

Dark and light mode websites – prefers-color-scheme: CSS Media Query

One device and app feature I’ve come to appreciate is the ability to change between light and dark modes. If you’ve ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result. macOS recently implemented a native dark mode but that mode doesn’t convert websites to a dark interface, so you’re still getting a bright site regardless of native theme. Wouldn’t it be amazing if websites would also go dark or light based on user’s system preference?

Source: prefers-color-scheme: CSS Media Query

Setup private SSH key for WebStorm and other IDEs in Windows

I had a problem pushing commits to Bitbucket inside Webstorm “no access” or similar error when trying to push.

I usually use Sourcetree together with Putty Pageant loaded with the putty specific SSH file format ppk. So the solution was to convert the private putty ppk file into OpenSSH file format using PuTTygen.

Then save that file into %userprofile%\.ssh\id_rsa
(id_rsa is the open ssh file name, no extension).
It made it possible for Webstorm to push to Bitbucket.

Follow these steps to convert from ppk to OpenSSH:

Another option is to convert the ppk format to an OpenSSH format using the PuTTygen program performing the following steps:
  1. Run the puTTygen program.
  2. Click Load.
  3. Select your private key that ends in .ppk and then click Open.
  4. Click the Conversions menu option.
  5. Click Export OpenSSH key.

Source: Change Private Key Format to Use with PuTTY

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000011270-How-to-set-up-git-SSH-keys-

Angular – Stop mouse event propagation – Stack Overflow

If you want to be able to add this to any elements without having to copy/paste the same code over and over again, you can make a directive to do this. It is as simple as below:

import {Directive, HostListener} from “@angular/core”;
@Directive({
selector: “[click-stop-propagation]”
})
export class ClickStopPropagation
{
@HostListener(“click”, [“$event”])
public onClick(event: any): void
{
event.stopPropagation();
}
}

Then just add it to the element you want it on:

<div click-stop-propagation>Stop Propagation</div>

Source: angular – Stop mouse event propagation – Stack Overflow

Fixing Webstorm cant debug in Chrome error: “Please ensure that the browser was started successfully with remote debugging port opened”

Error message in Jetbrains Webstorm:

Waiting for connection to localhost:59066. Please ensure that the browser was started successfully with remote debugging port opened. Port cannot be opened if Chrome having the same User Data Directory is already launched.

Can be fixed by installing the “jetbrains ide” chrome extension and make sure the above settings checkbox is active “Use JetBrains IDE support extension…”