Author: Andreas Plahn

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

Install packages required by your application in production:

npm install [package name]

 

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

npm install [package name] --save-dev

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

CSS to highlight layout – great CSS hack

Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…

* { background-color: rgba(255,0,0,.2);
  outline: 1px solid rgba(255, 0, 0, 0.5);
}
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }

From: dev.to/gajus/my-favorite-css-hack-32g3

Svelte Web Interfaces with Svelte

The hypothesis behind Svelte is straightforward: Browser-based UI frameworks result in a lot of overhead; it is possible to remove this overhead by handling the framework in a build step outside of the browser. Svelte doesn’t have a virtual DOM.
It’s a compiler, not a dependency.
Frameworks like Vue and React are dependencies; they interact with your code while it executes. Svelte is a compiler; it interacts with your code before you ever put that code in production — Svelte outputs vanilla JavaScript.
Svelte Web Interfaces with Svelte dev.to/jacobherrington/svelte-web-interfaces-with-svelte-44ib

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