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.
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.
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:
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
"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
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.
My favorite CSS hack dev.to/gajus/my-favorite-css-hack-32g3
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.
Svelte Web Interfaces with Svelte dev.to/jacobherrington/svelte-web-interfaces-with-svelte-44ib
Starting with Firefox 69, debugging an application that includes event handlers is simplified because the debugger now includes the ability to automatically break when the code hits an event handler.
It’s Time for Everyone to Learn About PostCSS What It Really Is; What It Really Does
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