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:
|
1 2 3 |
npm install [package name] |
Install packages that are only needed for local development and testing:
|
1 2 3 |
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.
My favorite CSS hack 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
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
Set event listener breakpoints – Firefox Developer Tools | MDN
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.
developer.mozilla.org/en-US/docs/Tools/Debugger/Set_event_listener_breakpoints
10 Awesome PostCSS Plugins to Make You a CSS Wizard – Hongkiat
It’s Time for Everyone to Learn About PostCSS | David Clark Develops the Web
It’s Time for Everyone to Learn About PostCSS What It Really Is; What It Really Does
davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
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?