DEV Community: Morokhovskyi Roman

Stop failing tech interviews, and change the game forever

Morokhovskyi Roman — Wed, 20 Aug 2025 06:42:22 +0000

My name is Roman, and I've been a backend software developer for 10 years. My main stack is JavaScript, TypeScript, NodeJS, AWS, PHP, and Postgres. I have also worked with many others, not only with these technologies. I have conducted more than 100 tech interviews, and this is my recommendation list.

Make notes

Make notes before interviews, greetings, self-presentation, and storytelling. Your speech should be concise and relevant to the vacation you applied for. Your notes can help you remember crucial keywords and strong hooks to engage interviewers.
Don't provide too many details about past projects, but ask questions to build a dialogue with interviewers instead. Try to find a contact and be unique to them as a candidate.

Numbers mean a lot

Numbers mean a lot for HR/Recruiters. They aren't really non-technical people, but they have a checklist for numbers: years of experience, a list of skills, and your CV, salary level, and notice period. They honestly don't care how good you are as a tech expert. They just validate your LinkedIn profile and collect exact numbers and information. My recommendation is to be ready for that, and if you say 2 years of experience instead of 1, they actually don't care if it's true, but your chances will be higher. And the same about skill list, you can add more than you have, even if you don't have strong expertise in this skill/technology. HR/Recruiters don't care, but if it's in their checklist, they mark it as "Yes".

Live coding

The point of a live coding session is not to write working code right away, but to learn how to find solutions. Your code may not work perfectly or may even be broken, but the main thing is that you understand it and are moving in the right direction. No one writes perfect code in real projects because there is no time/money for that, but understanding the basic principles is the key to success on live coding sessions. Think out loud and don't be afraid to ask questions and clarify the implementation details.

Record interviews

Every time you have an interview, record it on video (if possible) and note down all interesting questions, keywords, and technologies. This information is very helpful in preparing for future interviews.

It is not the cheaters who win, but those who can make a positive impression and connect with the interviewers. Present yourself as a problem solver, not just a coder.

Best regards, and follow me on 🐦 Twitter to see more content.

Good architecture is saved money

Morokhovskyi Roman — Wed, 21 Dec 2022 22:22:06 +0000

Good architecture minimizes the time for developers to read and maintain code, but to make it real, you need to invest significant time in organizing your code and correspondingly money.
To fix it:
Think of architecture in the beginning
Not violate the patterns of the organization of the code during development.

What factors should I take into account before building a new application?

Potential load

if it's an application from scratch and you don’t have an existing application that you want to rewrite or redesign, it doesn’t mean you should make it without thinking about possible difficulties when real traffic starts to grow. If it's hard to predict and calculate, make a beta version with minimal functionality, expose the app to real users, and adapt the next release based on their feedback.

Team experience

You must take into consideration the team's strengths. Don't bet on hype or only your experience. The team should be able to implement ideas into real life with the path of least resistance. The most important is an adequate estimate of the tasks. So, regardless of team experience, always follow the scrum methodology. The deadline is always within sprints.

Fallback plan

When you have only one plan, you don't have anything. If you have two plans, it means you are minimally protected. If your architecture looks theoretically sound but isn’t justified in actual practice, then your team should be ready to switch to a new solution in the early stage. And switch to the best version of the existing solution If you've gone too far.

Follow me on 🐦 Twitter if you want to see more content.

Guide to JavaScript Decorators (last proposal)

Morokhovskyi Roman — Wed, 14 Dec 2022 15:47:00 +0000

JavaScript Decorators is a powerful feature that finally reached stage 3 and is already supported by Babel.
Here you can read the official proposal https://github.com/tc39/proposal-decorators.

I want to guide you on seamlessly activating the latest decorator feature support for your application. I made a straightforward plan to dive into the decorator feature.

Predefine environment

In order to try the latest feature of decorators, you can create .babelrc file

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-static-block"],
    ["@babel/plugin-proposal-decorators", { "version": "2022-03" }],
    ["@babel/plugin-proposal-class-properties", { "loose": false }]
  ]
}

And here is the package.json, what you can take as an example:

{
  "scripts": {
    "build": "babel index.js -d dist",
    "start": "npm run build && node dist/index.js"
  },
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.5",
    "@babel/plugin-proposal-decorators": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-stage-3": "^7.8.3"
  }
}

Introduction

Probably you are already familiar with Typescript decorators, and you may see it somewhere, it looks like "@myDecorator". Declared decorators start from "@" and can be applied for classes, methods, accessors, and properties.
Here are some examples you may see before:

function myDecorator(value: string) {
  // this is the decorator factory, it sets up
  // the returned decorator function
  return function (target) {
    // this is the decorator
    // do something with 'target'
    return function(...args) {
       return target.apply(this, args)
    } 
  };
}

class User {

   @myDecorator('value')
   anyMethod() { }
}

Javascript supports natively decorators, which haven’t been part of standard ECMAScript yet but are experimental features. Experimental means it may be changed in future releases. That is what happened. Actually, the latest proposal of the decorators introduced a new syntax and more accurate and purposeful implementation.

Decorators in Typescript

Javascript has been introducing decorators since 2018. And TypeScript support decorators as well, with "experimentalDecorators" enabled option

{
  "compilerOptions": {
   ...
    "experimentalDecorators": true
  }
}

Notice
TypeScript doesn’t support the last proposal of decorators
https://github.com/microsoft/TypeScript/pull/50820

Nevertheless Typescript provides enough powerful and extended functionality around decorators:

Decorator Composition (we can wrap few times an underlying function)

class ExampleClass {
  @first()
  @second()
  method() {}
}

It is equal to:

first(second(method()))

// or the same as
const enhancedMethod = first(method());
const enhancedTwiceMethod = second(enhancedMethod())

Parameter Decorators (Unlike JS, TS decorators support decorating params)

class User {

    getRole(@inject RBACService) {
        return RBACService.getRole(this.id)
    }
}

The feature is included in the plans for Typescript version 5.0.

How do decorators work?

The decorator basically high order functions. It's a kind of wrapper around another function and enhances its functionality without modifying the underlying function.
Here example of the legacy version:

function log(target, name, descriptor) {
    const original = descriptor.value;
    if (typeof original === 'function') {
        descriptor.value = function(...args) {
            console.log(`Arguments: ${args}`);
            try {
                const result = original.apply(this, args);
                console.log(`Result: ${result}`);
                return result;
            } catch (e) {
                console.log(`Error: ${e}`);
                throw e;
            }
        }
    }
    return descriptor;
}

And the new implementation (that became stage-3 of the proposal):

function log(target, { kind, name }) {
    if (kind === 'method') {
        return function(...args) {
            console.log(`Arguments: ${args}`);
            try {
                const result = target.apply(this, args);
                console.log(`Result: ${result}`);
                return result;
            } catch (e) {
                console.log(`Error: ${e}`);
                throw e;
            }
        }
    }
}

class User {

    @log
    getName(firstName, lastName) {
        return `${firstName} ${lastName}`
    }
}

As you can see there are new options, we don't use descriptors anymore to change an object, but we got closer to metaprogramming approach. I really like how Axel Rauschmayer describes what metaprogramming is:

We don’t write code that processes user data (programming).
We write code that processes code that processes user data (metaprogramming).

Let's take a look closer at the new signature of decorators, here is the new type well described in TS (but hasn’t merged to master yet), we will use it just as an example

type Decorator = (
  value: DecoratedValue,
  context: {
    kind: string;
    name: string | symbol;
    addInitializer(initializer: () => void): void;

    // Don’t always exist:
    static: boolean;
    private: boolean;
    access: {get: () => unknown, set: (value: unknown) => void};
  }
) => void | ReplacementValue;

Kind parameter can be:
'class'
'method'
'getter'
'setter'
'accessor'
'field'
Kind property tells the decorator which kind of JavaScript construct it is applied to.
Name is the name of a method or field in a class.
addInitializer allows you to execute code after the class itself or a class element is fully defined.

Auto-accessors

The decorators' proposal introduces a new language feature: auto-accessors.
To understand what the auto-accessors feature is, let's take a look at the below example:


// New "accessor" keyword 
class User {
    accessor name = 'user';
    constructor(name) {
        this.name = name
    }  
}

// it's the same as
class User {
    #name = 'user';

    constructor(name) {
        this.name = name
    }

    get name() {
        return this.#name;
    }
    set name(value) {
        this.#name = value;
    }
}

Auto-accessor is a shorthand syntax for standard getters and setters that we get used to implementing in classes.
We can apply decorators for accessors easily with the new proposal:

function accessorDecorator({get,set}, {name, kind}) {
    if (kind === 'accessor') {
        return {
            init() {
                return 'initial value';
            },
            get() {
                const value = get.call(this);
                ...
                return value;
            },
            set(newValue) {
                const oldValue = get.call(this);
                ...
                set.call(this, newValue);
            },
        };
    }
}

class User {

    @accessorDecorator
    accessor name = 'user';

    constructor(name) {
        this.name = name
    }  
}

Fields Decorator

How can we decorate fields by legacy approach?
Here code example:

function fieldDecorator(target, name, descriptor) {
    return {
        ...descriptor,
        writable: false
        initializer: () => 'EU'
    }
}

class Customer {
    @fieldDecorator
    country = 'USA';


    getCountry() {
        return this.country
    }
}

const customer = new Customer('john')
customer.getCountry(); // 'EU' instead of USA, because of initializer
customer.country = 'DE' // TypeError: Cannot assign to read only property 'country' of object '#<Customer>'

Limitation legacy decorators:

We can't decorate private fields
it’s always hacky to decorate efficiently on accessors of fields

The new proposal is more flexible:


function readOnly(value, {kind, name}) {
    if (kind === 'field') {
        return function () {
            if (!this.readOnlyFields) {
                this.readOnlyFields = []
            }
            this.readOnlyFields.push(name)
        }
    }
    if (kind === 'class') {
        return function (...args) {
            const object = new value(...args);
            for (const readOnlyKey of object.readOnlyFields) {
                Object.defineProperty(object, readOnlyKey, { writable: false });
            }
            return object;
        }
    }
}

@readOnly
class Customer {
    @readOnly
    country;
    constructor(country) {
        this.country = country
    }

    getCountry() {
        return this.country
    }
}

const customer = new Customer();

customer.getCountry(); // 'USA'

customer.country = 'EU' // // TypeError: Cannot assign to read only property 'country' of object '#<Customer>'

As you can see, we don't have access to the property descriptor. Still, we can implement it differently, collect all the not writable fields, and set "writable: false" through the class decorator.

Conclusion

I think this is a whole new level, as developers can dive even more into the world of metaprogramming and look forward to the release of Typescript 5.0 and when the new proposal becomes part of the EcmaScript standard.

Follow me on 🐦 Twitter if you want to see more content.

Event Loop every WEB developer knows but can't explain

Morokhovskyi Roman — Sat, 03 Dec 2022 17:36:39 +0000

Event Loop is the most popular and challenging question in technical interviews. I can’t imagine a real technical interview with no questions concerning Event Loop stuff. I would like to bring more clarity on what Event Loop is and other essential components that interact with it.

A common misconception among developers is that Event Loop is part of the V8 engine.

In reality, Event Loop is part of the cross-platform I/O library libuv, and below diagram shows it clearly.

Inside the libuv module, there are a few more significant components: Event Queue and Thread pool. Keep in mind that the V8 engine is a part of Node.JS but doesn’t belong to libuv. Actually, V8 complies with JS code to machine code that computers can actually understand.

Event Queue

Event Queue is a data structure where all the events are enqueued and processed by the event loop sequentially until the queue is empty. This explanation is taken from the Reactor Pattern. Since Event Loop implements Reactor Pattern, we took Event Queue as an abstraction for better understanding but not as a specific existing component in the Node.JS ecosystem.

Event Queue in the NodeJS implementation is not a single queue where enqueued all the callbacks, it's multiple queues sorted by priority, and every callback queue can complete a specific type of operation. And these operation types in the Event Queue are actually co-called phases. Each phase has a FIFO queue of callbacks to execute:

What is Event Loop?

Event Loop is a single-threaded and infinite loop. And moreover it is a generic programming pattern.
in the official documentation of Node.JS briefly described what it is:

The event loop is what allows Node.js to perform non-blocking I/O operations — despite the fact that JavaScript is single-threaded — by offloading operations to the system kernel whenever possible.

But it’s a bit confusing and many devs don’t really understand what is hidden behind these words "perform non-blocking I/O operations"

Operations like a new upcoming HTTP request, File reading finished, or a Database connection opened is executed in the external APIs. Once they are done, the event is emitted, and Event Loop cycle picks up this event and calls the callback associated with it. Therefore Event Loop does the orchestration tasks. Orchestration means that it receives events and calls their callbacks functions, and offloads the more expensive tasks to the thread pool.

More detailed explanation

All the steps described below are in libuv

Call stack sends I/O requests (Database query, setTimeout, Networking, etc.)
Event Demultiplexer collects all the I/O requests and sends them to the hardware provided by OS (Demultiplexer implementation depends on OS)
When I/O completes, Demultiplexer emits events and handlers into Event Queue (Callback queues, each queue corresponds to a specific phase - Timers, I/O Callbacks, Check, Poll, etc.)
If the Event Queue is not empty, then Event Loop processes them in sequence until the Event queue gets empty.
Processing means executing each callback handler pushed to the queue in the main Call stack (JS V8)
During execution callbacks can be produced more I/O requests, then start from the First Step, otherwise, If there are no events in the event queue or the Event Demultiplexer has no pending requests, the program will complete

Follow me on 🐦 Twitter if you want to see more content.

How to growth as a developer faster?

Morokhovskyi Roman — Tue, 14 Jun 2022 10:17:51 +0000

Hello, I am Roman I've been working for years as a software engineer in small startups and big outsourcing companies, and the biggest challenge for developers after you get the job understand what is next?

Life is divided between before and after you get a job. Before you know exactly what to do and the goal is to be prepared for a future tech interview stage.
The most important stage to getting a job as a developer is your technical skills, understanding Software Development Life Cycle(SDLC)
The traditional way is:

take courses in web-development (Udemy)
Find a job propositions (LinkedIn)
Prepare resume
Prepare for an interview (LeetCode)
Pass the technical interview

OK, what is wrong?

I think communication is missing there! When you go through your learning path, share with others your failures and progress.
StackOverflow - ask questions, join the Intelligent community and ask more and publicly.
StackOverflow trick! If nobody answers your questions, try to "start bounty"

Instagram - not only for fun pics but to follow like-minded people, either those who just started the journey in IT or experienced gurus.

Twitter - the most powerful tool ever! Because code is just a text, and programming languages are syntax rules to write the texts. The developer's job is to learn to read, write and improve this text before the compiler transforms text into machine byte-code. And you've never found a better writer than developers because they read & write a ton of words every day. That is why microblog Twitter is the best place to share your thoughts and communicate your progress with like-minded people.
Here some realy motivated people who you can follow:
Sumit | Javascript 🤝 React,
Stas Klymenko | Full-stack Web Developer,
Francesco Ciulla, Abel,
Pratham,
Priya_garg

Communication is the best way to grow as a developer because your attitude to your job is changing and you can not just earn money but brings value to others who follow you and you can learn from experienced guys as well!

The number of followers doesn't matter, just think that if they can then you can as well! No difference whether you have some fans or you just started, communicate with others, react to tweets, support those who need it, and post value content frequently!

Follow me on 🐦 Twitter if you want to see more content.

TypeScript any or unknown?

Morokhovskyi Roman — Fri, 22 Apr 2022 09:36:06 +0000

What is the difference between 'unknown' and 'any' in TypeScript?

'unknown' is more type-safe and contributes to TypeScript control flow-based type analysis. This means you can't assign 'unknown' type to any other variable type without type checking.

Here example with unknown

function testFunc(nameOfVar: unknown) { 
    if (typeof nameOfVar == 'string') {
        const anotherStringVar: string = nameOfVar;
    }
}

Example with any

function testFunc(nameOfVar: any) { 
    const anotherStringVar: string = nameOfVar;
}

'Any' type literally could be assigned to any value.

When you should use 'unknown'?

'unknown' requires your code to be more predictable. Because you clearly assign a value if a type is definitely correct.
unknown is recommended because it provides safer typing — you have to use type assertion or narrow it to a specific type.

Can I use 'any' instead of 'unknown'?

Yes, you can but then TypeScript won't control strictly your assignments. This is a bit risky because your code can't guarantee that called or assigned variable has the correct type.

I Hope, I brought you some useful content.

Follow me on 🐦 Twitter if you want to see more content.

React 18 killer feature

Morokhovskyi Roman — Wed, 06 Apr 2022 19:37:49 +0000

Probably you already heard about the release React v18.0
I wish to introduce you to a new killer feature of the release.

Let’s take a look at this example.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

async function fetchSomething() {
  await new Promise((res, rej) => {
    setTimeout(res, 100);
  });
}

function Counter({ count, flag }) {
  useEffect(() => {
    console.log("render Counter");
  });
  return <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>;
}

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  useEffect(() => {
    console.log("render App");
  });

  function handleClick() {
    setCount((c) => c + 1);
    setFlag((f) => !f);
  }

  return (
    <div id="ttt">
      <button id="b" onClick={handleClick}>
        Next
      </button>
      <Counter count={count} flag={flag} />
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#container"));

Just one button counter. And handleClick handler set state for flag and count.

React is smart lib and intentionally doesn't render components twice, despite in the handler we update state twice. Because React batches event handlers.

But what if we a bit change handleClick function and add some async magic here

async function fetchSomething() {
  await new Promise((res, rej) => {
    setTimeout(res, 100);
  });
}

function handleClick() {
    fetchSomething().then(() => {
      setCount((c) => c + 1); // Causes a re-render
      setFlag((f) => !f); // Causes a re-render
    });
}

And if you run again the code, you most probably came across with double rendering components, useEffect tells you in the console. This is because React can't batch state changes. What is the reason? Asynchronous handlers run after the event in a callback, not during. Obviously, all async operation is non-blocking and executes after the main stack.

In React 18 this issue is solved, you just need to replace in the code ReactDOM.render to ReactDOM.createRoot

ReactDOM.createRoot(document.querySelector("#container")).render(<App />);

createRoot enables Concurrent Mode. Now your application can be more productive and doesn't trigger re-rendering after each state changes within one event handler, which is great!
This is how Automatic batching render feature works.

I Hope, I brought you some useful content.

Follow me on 🐦 Twitter if you want to see more content.

Javascript interview tricks or the devil is in the details

Morokhovskyi Roman — Wed, 06 Apr 2022 14:10:01 +0000

I passed a lot of interviews and some of them were really tired because questions might be super easy, but if you have used it but never thought about how it works, it can create difficulties.

Nullish coalescing operator

For example, you may often see such construction in your codebase

const variable = 0;
const result = variable ?? 100;
console.log(result);

The question is what will be output in your console?

The output result is: 0
Because, the double question mark operator ?? is falsy when the variable is null or undefined, in other words when it isn't defined in your program. Otherwise, it is true.

Default sort behavior

Let's assume you have such a list of numbers

const arr = [590, 5, 88, 8, 9];
const sortedArr = arr.sort();
console.log(sortedArr);

What do you think the result value is equal to?
In one of my past interview, I answered logically, that result would be
[5, 8, 9, 88, 590]
It is wrong because Javascript sort function works differently, if you don't use any callback handler, by default sorting is based on the first symbols of array items, and doesn't matter what is the next after first. So, 590 first character is 5, 88 first character is 8, and so on. Therefore the result is [5, 590, 8, 88, 9].

Prototype

What is the difference between F.Prototype and object.__ proto__?

In order to answer this question, I would ask when do we use F.Prototype?
As rule, it calls only in case you gonna create a new object from the function constructor or create a new instance from the class. Let's take a look at this example:

class B {
  methodOfClass() {}
}

// Or the same in the traditional way

function myFunctionConstructor() {}
myFunctionConstructor.prototype.methodOfClass = () => {}

Usage

const bObject = new B();
bObject.methodOfClass();

This construction is almost equal to (until you want to use a constructor in your class, but for learning purposes, it is a good example)

const object = Object.create(B.prototype);

So, let's take a look under the hood operator "new", I prepared my own implementation operator "new", to show you in the nutshell how it works

function New(constructor, ...args) {
   const obj = Object.create(constructor.prototype);
   return constructor.apply(obj, args) || obj;
}
const newObject = New(B);

Here we set the prototype for the new object literal, and call the constructor of our class by method. "apply". So, F.prototype is special property to initialize a new instance of object, therefore F.prototype is a prototype for a new object.

And object.__ proto__ helps even better explain how works operator "new". __ proto__ is an internal built object property, which is useful when you want to extend your object B with new properties from object A.
Above example with F.prototype uses object.__ proto__ as well, as a mechanism to create new instance of an object with __ proto__ based on class B.prototype.
It is truly B.prototype === newObject.__proto__

How you can get the __ proto__ of an object?
Object.getPrototypeOf(obj);

How you can set the __ proto__ of an object?
Object.setPrototypeOf(obj);

So, __ proto__ is the internal basic feature for inheritance in Javascript, and the mechanism creating objects by "new", is based on this feature as well.

Example:

const cat = {
  color: 'black'
};
const catBob = {
  name: 'Bob'
};
Object.setPrototypeOf(catBob, cat);
console.log(catBob.color);

I hope this roadmap Javascript learning and interview preparation path more clear for you. Wish you good luck in this journey!

Follow me on 🐦 Twitter if you want to see more content.