IT

"Native code" label

Fri, 01 Aug 2025 09:14:00 +0000

How to detect if a function is a core part of browser API? This way:

  const a = () => {};
  a.toString(); // () => {}
  console.log.toString(); // function log() { [native code] }

You see? [native code] label. Sounds good, right?

  const a = () => {};
  const b = a.bind(null);
  b.toString(); // function () { [native code] }

Oops. But we still have this log name in the string snapshot.

Babel to EsBuild migration for Webpack

Sun, 09 Feb 2025 15:00:00 +0000

Recently I had some time to take a look at the performance of my pet project. One thing bothered me: the project is relatively small, but the bundle size was too big: 780 KiB. Whereas the project had only a few dependencies: react (~10 KiB), react-router (~70 KiB), react-dom (~90 KiB), dayjs (~3 KiB), lodash (~70 KiB). The bundle should not be that big for so few dependencies.

So I ran webpack-dev-analyzer and found a weird thing: the sum of the libs is 3 times smaller than the final bundle size. Then I decided to take a look at @statoscope/webpack-plugin. It was a good tool but it gave me the same result. The bundle has way too much trash.

Ok. Probably it's just webpack wrappers over 300+ small modules. So I asked Perplexity - what can I do with it? Turned out all the proper options were already activated. So, I made a decision - it's time to try esbuild. It made a huge impact on my work project, so I knew it could work out.

I knew that esbuild didn't support a lot of stuff that babel supports. So I expected that it would take a day to migrate the codebase to esbuild. But surprisingly once I replaced babel-loader with esbuild-loader the build command worked out. The build didn't work but the bundle was assembled without any errors.

Did it help? Nope. Instead of 780 KiB, I got ~1 MiB. Luckily I found out that there's also EsbuildPlugin, which replaces TerserPlugin and works better. Added this line, it worked like a charm, and... Whoa! 280 KiB. That's huuuge.

So I figured out - it worked. Now I have to find a way to fix the app (spoiler: it didn't work at all).

Implicit React imports

React 17+ supports the possibility of avoiding adding import React from 'react' to every TSX-file. esbuild supports it too, but somehow it didn't work out of the box. Solution:

  const esbuildLoader: RuleSetRule = {
    test: /\.(js|ts|tsx)$/,
    loader: 'esbuild-loader',
    exclude: /node_modules/,
    options: {
       target: 'es2020',
       minify: cfg.PROD,
+      // Support implicit React imports:
+      jsx: 'automatic',
+      jsxFactory: 'React.createElement',
+      jsxImportSource: 'react',
    } satisfies LoaderOptions,
  };

TSX-Control-Statements

I just removed the packages and all their <If/>s. I liked them though. There's a plugin for Vite that adds their support. But I still use Webpack and the plugin works via string replacements, not via AST.

SourceMaps

To enable sourcemaps I had to disable EsbuildPlugin for development. Theoretically, it supports sourcemaps, but no matter what I did it didn't work. I even debugged the package itself. Didn't help. So I surrendered and enabled it only for the prod build.

TypeScript

EsBuild supports TypeScript syntax out of the box but it doesn't check types. So it builds extremely fast but I need to know my errors. Solution:

  webpackConfig.plugins!.push(
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: cfg.paths.TS_CONFIG,
      },
    })
  );

How does it work? The build and the type-checking processes are run in parallel. The 2nd doesn't linger the 1st. You still can see the errors in the browser (and CLI) console. And visually too. Nice.

ES-Lint

For some reason, it stopped working. The solution was pretty simple:

  webpackConfig.plugins!.push(
    new ESLintPlugin({
      extensions: ['ts', 'tsx'],

Final results

File sizes
- Before: 641 KiB + 234 KiB + 29.5 KiB (css) = 904.5 KiB
- After: 221 KiB + 55 KiB + 8.1 KiB (o_O, css) = 284.1 KiB
- After minifyIdentifiers: true (scary thing) & minifyWhitespace: true: 138 KiB + 44.2 KiB + 8.1 KiB = 190.1 KiB
DOMContentLoaded:
- Before: 737ms
- After: 231ms
- After-2: 131ms
Build time: esbuild was ~3x faster

Afterthought

Taking a deeper look I found:

The main issue wasn't in babel. The main issue was that I used inline-source-map for prod. I didn't want to do it. Just a mistake. And both bundle analyzers didn't notice that. Even when I manually looked at the file I barely found it (the horisontal scroll was too big). Fixing this issue dropped the file size 3x times even with babel.
esbuild has a better wrapper logic for a ton of tiny files than babel does.
Whitespace minification is quite important. GZip doesn't eliminate the difference.
Name mangling is a beast. But be careful, it can easily break your app in runtime.

How to migrate Javascript webpack configuration to Typescript

Sat, 25 Mar 2023 16:00:00 +0000

It turned out that the newest versions (at least 5+) of webpack support Typescript out of the box. So the algorithm is next:

Create tsconfig.json at the root level. Content:

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES5",
    "esModuleInterop": true,
    "checkJs": false,
    "strict": true,
  }
}

Rename all *.js files to *.ts
Type all of them:
- no more ugly require, use import.
- webpack package has typings out of the box.
  - You may find these types useful: Configuration & RuleSetRule
  - To enable devServer write this:
    interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; }
- Some of the popular plugins have types too.
- Some of them don't have types at all:
  - Create a *.d.ts file
  - Put there something like this:
    declare module 'postcss-assets' { export default function postcssAssets(opts: { basePath: string; relative: boolean; }): unknown; }
Make sure your webpack.config.ts file is placed at the root level. I mean exactly at the same spot where node_modules is. Otherwise, you won't be able to build it. No compilerOptions helped me.
Run webpack. It should work.

How to make a simple system.d service for a node.js server

Tue, 21 Feb 2023 20:00:00 +0000

Put this content:

[Unit]
Description={name}

[Service]
Type=simple
User={user}
ExecStart=/usr/bin/node {full-path-to-script}.js

[Install]
WantedBy=multi-user.target

... somewhere as {name}.service, where:

{name} is the name of the service
{user} is the name of the user to run the script (optional)

... then:

run: this sudo ln -s /{full_path}/{name}.service /lib/systemd/system/{name}.service
then this: sudo systemctl daemon-reload
then this: sudo systemctl enable {name}.service
and finally this: sudo systemctl start {name}

How does it work?

It starts the service on boot (see WantedBy section).
Using ExecStart command. Important: we specify the full path to node
SystemD remembers the PID of the new process and considers the service is ongoing until the process is died.
So any subsequent systemctrl start {name} won't do anything if the previous process is alive.
This behavior is determined by Type=Simple

Multilayout Keybinds in a Browser

Wed, 09 Feb 2022 16:00:00 +0000

Imagine that you want to add support of some keybinds in your web application. Let it be Ctrl+L for liking\unliking something. What kind of issues can you face in such a scenario?

CMD or Ctrl?

At first look at Ctrl. Probably on MacOS you'd like to replace it with CMD. You can check it by event.metaKey.

Extra modificators

Probably you wouldn't like to consider Ctrl+Alt+S as Ctrl+S. So don't forget to handle this case.

Different layouts

Not every language that uses the Latin alphabet has the L button at the same position as in a typical English keyboard layout. You need to decide what is more important to you ― a real key position on a keyboard or a letter upon of it. I'd guess that the 2nd case is preferable for most applications.

To get a real key position you can use which, code, codeKey properties. To get a letter on the key use key property.

Different alphabets

What's about Greek or Russian alphabets? Or any other possible alphabets? Or not even alphabets? There're different strategies. And one of them is to use a key from a typical English keyboard layout. So it leads us again to code and codeKey properties.

Example

const getEventKeyBind = event => {
  const keybind = [];

  if (event.metaKey) keybind.push('cmd');
  if (event.ctrlKey) keybind.push('ctrl');
  if (event.shiftKey) keybind.push('shift');
  if (event.altKey) keybind.push('alt');

  if (event.key === ' ') keybind.push('space');
  else {
    const key = event.key.toLowerCase();

    if (key.length !== 1 || key.match(/^[a-z]$/)) {
      // latin key or a special key
      keybind.push(key);
    } else {
      // extra-latin or non-latin key
      const [, enSymbol] = event.code.match(/^Key(\w)$/) || [];
      keybind.push(enSymbol ? enSymbol.toLowerCase() : key);
    }
  }

  return keybind.join('+');
};

Custom English-German layout for Ubuntu

Sun, 24 Nov 2019 18:00:00 +0000

German language contains some extra latin symbols that English language doesn't: ä, ö, ü, ß. But if you choose German keyboard layout instead of English you get some keyboard keys moved to unusual positions. If it's okay for you then you don't need to do anything with it. Just get used to the new layout! But if you wanna stay with the English version of latin keys positions you need to find some convenient way to type German specific letters.

Under the cut 3 ways to handle it:

Compose key
International layout with "dead keys"
Write your own EN-layout

How to use babel-module-resolver with vsCode and ESLint

Tue, 04 Dec 2018 08:43:00 +0000

This article is a small guide about how to configure an enviroment for babel-plugin-module-resolver. This plugin allows you use custom prefixes for import/export declarations in JS files. E.g. import A from 'com/A' can be treated as import A from ../../components/A.

At first you should install the package npm i -D babel-plugin-module-resolver.
Then add your map-config to your .babelrc file into the plugins section. E.g.:

plugins:
[
  // ...
  [
    "babel-plugin-module-resolver",
    {
        "alias": {
           "^com(.+)": "./src/com/\\1"
        }
    }
  ],
  // ...
]

Then install npm i -D eslint-import-resolver-babel-module package for ESLint. It allows ESLint to check your rewrited imports, It assumes that you already use eslint-plugin-import package. If you don't I recommend you to start using it. This package checks your import/export declarations, it's very convinient.
Then change in your .eslint file:

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": { "jsx": true }
  },
  "settings": {
    "import/resolver": { "babel-module": {} }
  },
  "plugins": [
    // ...
    "import"
  ],
  // ...
}

You also need to install babel-eslint if you didn't do it yet. And move its declaration from parseOptions to the root of the .eslintrc.
babel-module part in .babelrc section is just {}, it's okay.
Install ESLint plugin in vsCode
Probably you'll need to write in your .vcode/settings.json something like next lines. They force vscode to change CWD (current directory) in the deamon of eslint plugin:

"eslint.workingDirectories": [
	{
		"directory": "./client",
		"changeProcessCWD": true
	}
],

If you use path-intellisense plugin, you should consider configurate your mapping in .vscode/settings.json too.
If you have any troubles, something doesn't work properly or doesn't work at all: Use force, Luke. Set vscode setting "eslint.trace.server": "verbose" and debug, debug, debug. I've spent on it several hours :(

Отладка NodeJS приложений при помощи ndb

Fri, 03 Aug 2018 10:19:45 +0000

Пост-заметка об ndb. Всем кто пишет для nodejs периодически приходится отлаживать своё приложение. Да даже тем, кто использует mocha или webpack бывает нет-нет да удобнее отладить по-человечески проблему, нежели тыкать повсюду console.log-и. NodeJS издавна предоставляет нам для этого браузерный инструмент.

Работает оно так:

мы запускаем наше приложение из консоли с нужным флагом
NodeJS в консоли нам сообщает ссылку с нужным портом
Которую мы открываем в браузере и видим перед собой копию chrome-dev-tools-ов.

Если надо перезагрузить приложение ― повторяем всё с нуля. С одной стороны сами инструменты весьма удобные. С другой стороны вся эта мышиная возня с портами и перезапусками очень неудобна.

И тут на помощь к нам приходит ndb. Просто перед командой запуска приложения добавляем ndb. Dev-tools-ы открываются прямо в своём отдельном окне. Перезагрузить приложение можно нажав ctrl+R. Все breakpoint-ы и прочая муть при этом сохраняется.

Выглядит это всё примерно так:

Webpack и SCSS импорты в купе с module-resolver

Fri, 03 Aug 2018 09:00:00 +0000

С приходоим ES7 в JS пришли import-ы и export-ы. Жить стало веселее, и... сложнее. Появилось много заморочек и вообще новых проблем. Одна из таких проблем выглядит так: `import some from ../../../../../some`. Знакомая ситуация?

Обычно её в случае webpack-а решают при помощи модуля module-resolver. Он позволяет в .babelrc (или где вы держите конфигурацию) указывать регулярные выражения для автозамены, а также добавляет поддержку root-записей. Скажем с ним можно указать `import actions from '@actions/header', где `@actions` будет алиасом к какому-нибудь пути в вашем проекте.

Дальше встаёт вопрос инструментов. А как на это должен реагировать редактор? Как он узнает, что теперь пути в import-ах устроены хитрее. Что делать с линтингом? К счастью, для eslint есть такой плагин: eslint-plugin-import. С редакторами ситуация может быть сложнее.

Хорошо, а что делать с SCSS\Sass? Нормальных рабочих решений с наскоку мне найти не удалось. Но как оказалось, всё можно решить относительно просто. В настройках webpack для sass-loader-а можно указать настройки. Они будут переданы как есть в пакет node-sass. А вот он, оказывается, достаточно гибкий. Если там указать метод importer, то можно навязать свою логику обработки @import-ов. Пример:

{
	loader: 'sass-loader',
	options:
	{
		sourceMap: true,
		url: false,
		importer: url => (
		{
			file: url
				.replace(...)
				.replace(...)
				.replace(...),
		}),
	},
}

Либо даже выцепить ваши настройки прямо из настроек в .babelrc.

Google Calendar и спам от Казино в мобильном приложении на Android

Thu, 19 Jul 2018 10:58:47 +0000

В который раз наткнулся на странную вещь. Телефон издаёт странный нестандартный непривычный звук. Подхожу - смотрю - реклама казино в google-календаре. В этот раз решил разобраться, как так. Стал рыться-копаться. Нет, таких записей в календаре у меня нет. Нет - к календарю ни у какого приложения доступа нет. WTF?

Разгадка - недоработка Gmail. Оказывается что если сформировать письмо правильным образом, то "умный" Google автоматически формирует в календаре Event под это письмо. И часть писем успевают сформировать такие спам-уведомления из календаря ещё до того момента, пока Google не определяет, что это спам и event-ы с письмами сносит. Однако диалог "пойду-не-пойду на мероприятие" на мобильнике при этом не тухнет.

Лечится принудительным отключением в настройках Google Calendar опции: Automatically add events from Gmail to my calendar. Да, она у всех включена по-умолчанию.