How to migrate Javascript webpack configuration to Typescript
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
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
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
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
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 :(