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"

Detect resized images on a page

This script detects resized images and background images, which consume your traffic and time. Images are visually marked as 1px dotted red, detailed information is written to the console of your DevTools.

https://gist.github.com/victor-homyakov/9c29b553270c5c71135a1746ab93325d

Run-time assertions for JSDoc @param and @type tags in Babel

1. Annotate types and functions/methods with JSDoc
2. Closure Compiler syntax is also accepted
3. Use plugin for Babel: https://github.com/azu/babel-plugin-jsdoc-to-assert

debug.css

У хороших парней из Blueprint позаимствовал идею debug.css - CSS, которая подключена в процессе разработки страницы/сайта/web 2.0 приложения, и которая при предварительном просмотре разрабатываемой страницы в браузере визуально выделяет некоторые ошибки HTML-разметки:

Валидное унифицированное подключение Java-апплета в XHTML

Когда встала реальная необходимость использования Java-апплета в проекте, освежил знания по этой тематике и перекопал интернеты. Результат совершенно не удовлетворил меня как веб-девелопера: невнятные советы, невалидная древняя разметка, куча логики, проверки на Netscape 6. Нужно было своё решение - современное, валидное, правильное.

Нестандартные атрибуты тегов HTML

Тема нестандартных атрибутов (пользовательских, custom attributes) в тегах HTML уже давно бродит в кругах web-девелоперов. Некоторые, не долго думая, пишут всё что им вздумается, забивая на то, что получившийся HTML-код не пройдёт валидацию (раньше этим сильно грешил ZK framework). Некоторые с недавних пор уповают на будущий HTML5 и атрибуты, начинающиеся с префикса data-.

Практически никто не вспоминает (или вообще не знает) о решении, которое существует уже давно: XHTML. С самого начала XHTML позволял указывать свои пространства имён XML, в которых можно было творить почти всё, что душе угодно, не нарушая валидности XHTML кода.