How to use ESLint + Prettier + VS Code together without conflicts

1. Install eslint, prettier, eslint-plugin-prettier, eslint-config-prettier
2. Update eslintrc file to look like this:

extends: [
  'eslint:recommended',
  'plugin:react/recommended', // if react is used
  'plugin:react-hooks/recommended', // if react is used
  'plugin:@typescript-eslint/recommended', // if ts
  'plugin:prettier/recommended'
],
plugins: ['prettier', 'react', 'react-hooks', '@typescript-eslint'],

With this setup ESLint starts to use Prettier and its rules for code style checks and autofixes.

Moreover, now you don't need two separate commands to run ESLint and Prettier, they both will run with a single command eslint --fix.

Additional steps for VS Code:

1. Install the "Prettier - Code formatter" extension
2. Go to Settings and set the "Editor: Default formatter" to "Prettier - Code formatter"
3. Enable "Editor: Format On Save"

Code compilation and caching in V8

• https://v8.dev/blog/background-compilation
• https://v8.dev/blog/code-caching
• https://v8.dev/blog/code-caching-for-devs

Optimizing resource loading in Chrome 95+ with Priority Hints

https://web.dev/priority-hints/

React.StrictMode calls your render() and reducer() twice

In a strict mode development build of React renders your components twice. It calls your render() method, functional components, all the hooks two times. The reducer() function from the useReducer() hook is also called twice.

Before the second call, React disables all console output methods. In case your code works in non-strict mode but shows strange results in strict mode, you may want to see console output from the second call. In order to do that you can store the original console.log method at the very beginning of your code:

import { useReducer } from "react";

// other imports...

const log = console.log;

function MyComponent() {

  const [state, dispatch] = useReducer(reducer, undefined, init);

  log("MyComponent", state); // note: log instead of console.log

  return <div>markup...</div>;

}

Example: https://codesandbox.io/s/dark-night-32ejxr?file=/src/GroceryList/GroceryList.js

Details: https://dev.to/sebastianstamm/be-careful-with-console-log-when-using-react-strictmode-ah9

Browser fingerprinting and bot detection

Links from https://incolumitas.com/2021/11/03/so-you-want-to-scrape-like-the-big-boys/

• CreepJS: https://github.com/abrahamjuliot/creepjs
• Browser Red Pills, Dan Boneh: https://www.usenix.org/system/files/conference/woot14/woot14-ho.pdf
• Browser Based Port Scanning, 2021: https://incolumitas.com/2021/01/10/browser-based-port-scanning/
• Google Picasso: https://research.google/pubs/pub45581/
• Font Fingerprinting: https://browserleaks.com/fonts
• TCP/IP Fingerprinting: https://github.com/NikolaiT/zardaxt
• TLS Fingerprinting: https://github.com/salesforce/ja3
• Behavioral Classification, 2021: https://incolumitas.com/2021/04/11/bot-detection-with-behavioral-analysis/
• Gyroscope API querying (device movement/rotation detection), 2021: https://incolumitas.com/2021/02/05/why-does-this-website-know-i-am-sitting-on-the-toilet/
• Fingerprinting without JavaScript using HTTP headers, CSS feature queries and Fonts: https://fingerprintjs.com/blog/disabling-javascript-wont-stop-fingerprinting/

How to clear DNS cache in Chrome

1. Open chrome://net-internals/#dns and press "Clear host cache"
2. Open chrome://net-internals/#sockets and press "Flush socket pools"

Network Filter expressions in Chrome DevTools

Keyword	Example
cookie-domain:	cookie-domain:.google.com
cookie-name:
cookie-path:	cookie-path:/images
cookie-value:
domain:	domain:*.com domain:example.com
has-response-header:	has-response-header:Access-Control-Allow-Origin
is:	is:from-cache is:service-worker-intercepted
larger-than:	larger-than:10k
method:	method:POST
mime-type:	mime-type:application/json
mixed-content:
priority:	priority:Highest
resource-type:	resource-type:image resource-type:other
scheme:	scheme:https
set-cookie-domain:	set-cookie-domain:.google.com
set-cookie-name:	set-cookie-name:__utma
set-cookie-value:	set-cookie-value:abc123
status-code:	status-code:204
url:	url:data:

To invert the rule, i.e. leave URLs that do not match, prepend it with minus sign, e.g. -is:from-cache means "all resources loaded not from cache".

Any other text leaves only URLs with that text somewhere in it (in path, query, etc.)

Examples:

• larger-than:10k resource-type:image -domain:*.net
  "all images not from *.net larger than 10 kilobytes"
• is:from-cache resource-type:script
  "cached scripts"