How to run eslint in Terminal / Shell

npm install && npm i -g eslint && npx eslint --ext .tsx --ext .ts ./

Please heed that npm install is used here to start my React application, which uses it as a build tool. IMportant

npm i -g eslint will install eslint, if it does not exist yet (for example a CI with Jenkins).

The npx eventually executes eslint for all files with ending .tsx or .ts recursively in the current directory. Please adapt the endings according to your needs – when you do not use TypeScript but JavaScript change it to .js

How to check Typescript Code with ESLint in IntelliJ or Webstorm

In your package.json add this example config:

 "eslintConfig": {
    "parserOptions": {
      "parser": "babel-eslint",
      "sourceType": "module"
    "env": {
      "browser": true,
      "es6": true
    "globals": {
      "Vue": true
    "parser": "@typescript-eslint/parser",
    "plugins": [
    "extends": [
    "rules": {
      "quotes": [
          "avoidEscape": true
      "comma-dangle": [
          "arrays": "ignore",
          "objects": "always-multiline",
          "imports": "never",
          "exports": "never",
          "functions": "ignore"
      "arrow-parens": 0,
      "no-tabs": 0,
      "indent": [
          "SwitchCase": 1
      "no-console": 1,
      "generator-star-spacing": 0

In your IDE terminal, execute:

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

In IntelliJ settings, add:

From now on, when you open your .ts or .tsx files, the ESLint will detect the errors.

You can open the context menu then, by clicking the right mouse tab and click on „Fix ESlint Problems“.

IntelliJ will then automatically fix the problems.

Make JavaScript Code prettier | Format your JS or Typescript Code with Prettier in IntelliJ IDEA or Webstorm

Java Developers know it as Checkstyle – JavaScript has similar things, one of them I highly recommend is prettier.

From the Marketplace PlugIns, just install Node and the Prettier PlugIn.

In your terminal or shell, type:

  • npm install --save-dev --save-exact prettier
  • npm install --global prettier
  1. In the Settings/Preferences dialog Ctrl+Alt+S
  2. go to Languages and Frameworks | JavaScript | Prettier.
  3. Choose the Node.js interpreter to use.
  4. From the Prettier package list, select the prettier installation to use.
  5. IntelliJ IDEA will locate the prettier package itself and the field is filled in automatically.
  6. To run Prettier automatically against specific files every time such file is changed and saved, select the Run on save for files checkbox.
  7. Provide a pattern that defines the set of files to be reformatted every timeon save.

Prettier will now also format your files on save.

In you package.json you can specify prettier:

In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab. Sometimes it is shown in the context menu, right click and bottom of the options in the list.

Config File

Example of a .prettierrc.json:

"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"overrides": [
"files": "*.test.js",
"options": {
"semi": true
"files": ["*.html", "legacy/**/*.js", "*.tsx"],
"options": {
"tabWidth": 4

Format inline

I select the lines of Code and just press CMD+ALT+SHIFT+P
The Code will be reformatted instantly.

Link to Prettier:

Test Mobile Devices with Chrome Devtools – Howto

Press F12 or just open Chrome Dev Tools.
Click on the Toggle Device Icon (marked in blue).

In your browser window, you will see this resolution modifyier:

Modify according to your needs to test different screen resolutions.

NOTE: Screen Resolution CANNOT be simulated by changing the browser window size 😉

Mobile Usability – Custom Scrollbars

On mobile devices, Usability is everything.
Because of this, standard elements are often designed broader and larger.

Example of a 30px wide and 100px thumb custom scrollbar:

/*A custom scrollbar is configurable. 
Here, it is broader than the standard.
This way, it is easier to use on touchscreen 
or other small or mobile devices.*/

/* width */
::-webkit-scrollbar {
    width: 30px;

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;

/* Handle */
::-webkit-scrollbar-thumb {
    height: 100px!important;
    background: #888;

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
/*end custom scrollbar*/

Pixel sizes – Mobile – Screen – Resolution -Definition

This is a compilation from the Web. I do not know the original author. As I am good at compiling information, I think it will be useful, though.

In case you are the author of this and can prove it, please drop me a line so we can link to your content.

Standard Size Ratio Definition

16:9 Ratio
4:3 Ratio
3:2 Ratio
2:1 Ratio

Delay function in JavaScript JS

The timeout function puts a thread to sleep, which is often NOT what you want:

function someFunction(param) {
    setTimeout(function () {
        if (param == -1) {
            console.log('Parameter is -1');
    }, 2000);//2 sec delay

Instead with ECMA6 you can use the async/await syntax.

const delay = ms => new Promise(res => setTimeout(res, ms));

const delayFunction = async () => {
  await delay(2000);
  console.log("[X] 2 sec delay.");

The Code looks like being synchronous while it is in fact asynchronous. This makes it easier to maintain. Plus you avoid a freeze in UIs in case you want to delay for the human eye in a UI…

React Hook Component Conditional Rendering

The HTML is rerendered after click and displays the chosen content.

We use a stateful variable.

The stateful variable (here, a boolean) is called ‚condition‘ 😉 :

const [condition, setCondition] = useState(false);

The #useEffect method to react on variable state change:

useEffect(() => {

The methods for the buttons:

const handleClickSomething01 = () => setCondition(true);
const handleClickSomething02 = () => setCondition(false);

The returned HTML:

if (condition === true) {
    return (
            <Button variant="contained" 
            <Button variant="contained" 
            </Button>CONDITION fullfilled
} else {
    return (
            <Button variant="contained" 
            <Button variant="contained" 
            </Button>CONDITION not fulfilled

You will notice that this example uses duplicated code (sort of, a few details differ).
Why did I do this?
I have debugged so many unmaintainable Frontends during the last two decades and nearly always the obstacles where too many detailed conditions in the HTML.

Instead, by using IF/ELSE and clearly depict the HTML without conditional renderings within, the Code will be easier to maintain in the long run.

Of course, this is my personal experience and also a matter of Clean Code paradigms.
In some cases, am using inline conditions, inside the HTML lines, too. But as we Architects like to say: IT DEPENDS 😉

React – use CSS depending on states (change class according to a variable’s state)

For this example I use React Hooks and a Component with a stateful variable.
When the variable is changed, the CSS class is changed accordingly.
The part in the component is automatically re-rendered on the fly.

//The variable is called 'active'. 
//This is an example. Choose any name.
const [active, setActive] = useState(0);

We use the constant #getStyle to return a CSS class name based on the variable.

    const getStyle = (input) => {
        if (input === active){
            // This example is freely chosen. 
            //button-active is the CSS class' name
            return "button-active";
        } else {
            return "button-inactive";

The return statement returns rendered HTML.

//The hard coded value 0 can be any dynamic 
//variable from JS or React, like one from the 
//props (Properties) object
return (
  <div className={getStyle(0)}>
  • Stateful variable called ‚active‘
  • Const named #getStyle with an input parameter
  • render method returning HTML with a css class name
  • Input is provided to the #getStyle const
  • If the variable ‚active‘ is changed by the application somewhere, the HTML is re-rendered
  • The input is compared to the variable and the name of the CSS class returned

CSS Grid Layout Example – Visible Structure – Easy Tutorial

4 Items, stretched with different sizes across a Matrix 4×4 grid.

You can see the Grid structure in the CSS in this example.



.item-a {
    grid-area: itemA;
    border: 1px solid violet;
.item-b {
    grid-area: itemB;
    border: solid 1px cyan;
.item-c {
    grid-area: itemC;
    border: solid 1px yellow;
.item-d {
    grid-area: itemD;
    border: solid 1px red;

.container {
    height: 100%;
    border: solid 1px green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
            "itemA itemA itemC itemC"
            "itemA itemA itemC itemC"
            "itemA itemA itemD itemD"
            "itemA itemA itemD itemD";

HTML (in this example a React JS Grid):

return (
        <Grid className={"container"}>
            <Grid item className={"item-a"}></Grid>
            <Grid item className={"item-b"}></Grid>
            <Grid item className={"item-c"}></Grid>
            <Grid item className={"item-d"}></Grid>