An interactive cheatsheet tool for the Linux command-line
Source: denisidoro/navi: An interactive cheatsheet tool for the command-line
Author: Andreas Plahn
Hack | A typeface designed for source code
Hack is hand groomed and optically balanced to be your go-to code face.
sourcefoundry.org/hack/
CSS only shaped: circles, ovals, triangles and arrows
Create circles, ovals, triangles and arrows using css only:
sharkcoder.com/visual/shapes
VS Code extension that lets you open the MDN docs of a CSS property
VS Code extension that lets you open the MDN docs of a CSS property
dev.to/dzhavat/vs-code-extension-that-lets-you-open-the-mdn-docs-of-a-css-property-gj6
Lighthouse | Tools for Web Developers | Google Developers
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.
You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module.
developers.google.com/web/tools/lighthouse/
Caniuse and MDN compatibility data collaboration
Two great data sources come together
Today we’re announcing the integration of MDN’s compat data into the caniuse website. Together, we’re bringing even more web compatibility information into the hands of web developers.
hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/
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); }
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
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