Forem: Artem Turlenko

Code Quality Automation: ESLint Rules, Prettier, and Custom Linting

Artem Turlenko — Wed, 25 Jun 2025 17:45:59 +0000

As a Frontend-Backend Engineer, I've seen projects struggle with code consistency and quality. Manual code reviews can't catch everything, and style discussions waste precious development time. The solution? Robust code quality automation that works seamlessly in your workflow.

The Modern Code Quality Stack

The holy trinity of automated code quality consists of:

ESLint: Error detection and code quality rules
Prettier: Consistent code formatting
Custom Rules: Domain-specific requirements

Let's dive into setting up a production-ready system.

Advanced ESLint Configuration

Skip the basic .eslintrc.js approach. Modern projects need modular, environment-aware configurations:

// eslint.config.js (ESLint 9+ flat config)
import js from '@eslint/js';
import typescript from '@typescript-eslint/eslint-plugin';
import react from 'eslint-plugin-react';
import security from 'eslint-plugin-security';

export default [
  js.configs.recommended,

  // TypeScript files
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: '@typescript-eslint/parser',
      parserOptions: {
        project: './tsconfig.json',
      },
    },
    plugins: { '@typescript-eslint': typescript },
    rules: {
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/explicit-function-return-type': 'warn',
      '@typescript-eslint/prefer-nullish-coalescing': 'error',
    },
  },

  // React components - accessibility focus
  {
    files: ['src/components/**/*.{jsx,tsx}'],
    plugins: { react },
    rules: {
      'react/prop-types': 'off',
      'react-hooks/exhaustive-deps': 'error',
      'jsx-a11y/alt-text': 'error',
    },
  },

  // API routes - security focus
  {
    files: ['src/api/**/*.{js,ts}'],
    plugins: { security },
    rules: {
      'security/detect-object-injection': 'error',
      'no-console': 'error',
    },
  },
];

Prettier Integration Without Conflicts

The secret to ESLint-Prettier harmony is proper configuration:

// .prettierrc.js
module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'es5',
  printWidth: 80,

  overrides: [
    {
      files: '*.{ts,tsx}',
      options: {
        trailingComma: 'all',
      },
    },
  ],
};

// In your ESLint config
{
  plugins: { prettier: require('eslint-plugin-prettier') },
  extends: ['prettier'], // Disables conflicting rules
  rules: {
    'prettier/prettier': 'error',
  },
}

Building Custom ESLint Rules

Sometimes you need domain-specific rules. Here's a custom rule that enforces consistent error handling:

// rules/consistent-error-handling.js
module.exports = {
  meta: {
    type: 'problem',
    fixable: 'code',
    messages: {
      inconsistentError: 'Error "{{ errorName }}" should start with "error" or "err"',
    },
  },

  create(context) {
    return {
      CatchClause(node) {
        const param = node.param;

        if (param && param.type === 'Identifier') {
          const errorName = param.name;
          const validPatterns = ['error', 'err', 'e'];

          if (!validPatterns.some(pattern => 
            errorName.toLowerCase().startsWith(pattern))) {
            context.report({
              node: param,
              messageId: 'inconsistentError',
              data: { errorName },
              fix(fixer) {
                return fixer.replaceText(param, 'error');
              },
            });
          }
        }
      },
    };
  },
};

CI/CD Integration That Actually Works

Automate quality checks in your pipeline:

# .github/workflows/code-quality.yml
name: Code Quality

on: [push, pull_request]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'

      - run: npm ci

      - name: ESLint with SARIF
        run: |
          npx eslint . \
            --format=@microsoft/eslint-formatter-sarif \
            --output-file=eslint-results.sarif \
            --max-warnings=0

      - name: Upload to GitHub Security
        uses: github/codeql-action/upload-sarif@v2
        if: always()
        with:
          sarif_file: eslint-results.sarif

      - name: Prettier Check
        run: npx prettier --check .

Pre-commit Hooks for Instant Feedback

// package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix --max-warnings=0",
      "prettier --write"
    ],
    "*.{json,md,yml}": ["prettier --write"]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

Performance Optimization Tips

Large codebases need optimized linting:

// Fast rules (prefer these)
'prefer-const': 'error',
'no-var': 'error',
'eqeqeq': 'error',

// Expensive rules (use sparingly)
'@typescript-eslint/no-floating-promises': 'warn', // Requires type checking
'import/no-cycles': 'warn', // Can be very slow

// Use ignores for better performance
ignores: [
  'node_modules/**',
  'dist/**',
  '*.min.js',
  '**/*.d.ts', // Skip unless necessary
],

Gradual Adoption Strategy

Introduce new rules progressively:

const LINT_PHASE = process.env.LINT_PHASE || 'introduction';

const ruleLevel = {
  introduction: 'warn',  // Week 1-2: Show warnings
  enforcement: 'error',  // Week 3-4: Block new violations
  strict: 'error',       // Week 5+: Fix all violations
}[LINT_PHASE];

export default [{
  rules: {
    'prefer-const': ruleLevel,
    'complexity': [ruleLevel, { max: 15 }],
  },
}];

The Bottom Line

Effective code quality automation isn't about having the most rules—it's about having the right rules that:

Catch real problems before they reach production
Enforce team standards without slowing development
Scale with your codebase and team size
Integrate seamlessly into your workflow

Start with a solid ESLint + Prettier foundation, add context-aware rules for different parts of your application, and gradually introduce custom rules for your specific domain needs.

Your future self (and your teammates) will thank you when code reviews focus on logic and architecture instead of style discussions.

What's your biggest code quality challenge? Share your experience in the comments below! 👇

Unit Testing with Jest – From Zero‑Config to Production Ready

Artem Turlenko — Tue, 20 May 2025 08:11:02 +0000

Jest is a fast, delightful JavaScript testing framework created at Meta. It can run out‑of‑the‑box, but real‑world projects (React, TypeScript, CSS modules, etc.) need extra setup. This guide covers both the quick start and the advanced configuration you’ll meet in production.

Why Jest?

Feature	Benefit
Zero config (plain JS projects)	Start testing instantly.
Parallel runner	Tests run in isolated workers for speed + safety.
Snapshots	Track changes to large objects / UI trees over time.
Rich mocking	Mock functions, modules, timers, even `fetch`.
Watch mode & coverage	TDD‑friendly feedback loops.

Installing Jest

npm i --save-dev jest           # or:  yarn add -D jest

Add a script:

"scripts": {
  "test": "jest"
}

Tip: Running npx jest --init scaffolds a starter jest.config.js.

Your First Test

Code under test `sum.js`

function sum(a, b) {
  return a + b;
}
module.exports = sum;

Test file `sum.test.js`

const sum = require('./sum');

// 👉 each test lives inside test()/it()
// 👉 expect() assertions use matchers, e.g. toBe()

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

Run:

npm test   # → PASS  sum.test.js

Testing Asynchronous Code (with Fake Timers)

Real timers slow suites and can flake on CI. Replace them with Jest’s simulated clock.

async function (uses a timer)

// fetchData.js
function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => resolve('peanut butter'), 100); // heavy in real time
  });
}
module.exports = fetchData;

test with fake timers

const fetchData = require('./fetchData');

jest.useFakeTimers();               // 1️⃣ switch to mocked timers

test('resolves to peanut butter', async () => {
  const promise = fetchData();      // 2️⃣ schedule timer
  jest.runAllTimers();             // 3️⃣ jump 100 ms instantly
  await expect(promise).resolves.toBe('peanut butter');
});

Snapshot Testing

Great for React/Vue UI or large JSON configs.

import renderer from 'react-test-renderer';
import Button from './Button';

test('renders button UI', () => {
  const tree = renderer.create(<Button label="Save" />).toJSON();
  expect(tree).toMatchSnapshot();
});

First run saves a snapshot file; later runs fail if output changes (update with u).

Mock Functions & Modules

// user.js
action = cb => cb('John');
module.exports = action;

const action = require('./user');

test('callback called with John', () => {
  const mockCb = jest.fn();
  action(mockCb);
  expect(mockCb).toHaveBeenCalledWith('John');
});

Need to stub axios network calls?

jest.mock('axios');

Advanced Jest Configuration (real‑world projects)

When you add TypeScript, JSX, CSS modules, or path aliases, Jest must learn how to understand those imports.

`jest.config.js`

/** @type {import('jest').Config} */
module.exports = {
  testEnvironment: 'jsdom',          // React front‑end; use 'node' for back‑end
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],

  // ︎🔶 Transform files (babel or ts-jest)
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',    // transpile TypeScript
    '^.+\\.(js|jsx)$': 'babel-jest', // if using custom Babel
  },

  // ︎🔶 Stub non‑JS imports (CSS/SVG/img)
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',   // path alias example
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    '\\.(svg|png|jpg)$': '<rootDir>/__mocks__/fileMock.js',
  },

  // ︎🔶 Coverage collection
  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
};

Transformers

Babel: babel-jest handles JSX/ESNext.
TypeScript: ts-jest compiles TS on the fly.

Install:

npm i -D babel-jest @babel/preset-env ts-jest typescript

Add .babelrc and tsconfig.json as usual.

CSS & Asset Mocks

// __mocks__/fileMock.js
module.exports = 'test-file-stub';

CSS modules resolved to a proxy that returns class names.

Global Setup

// jest.setup.js
import '@testing-library/jest-dom/extend-expect';

Watch Mode & Coverage

npm test -- --watch     # rerun only affected tests
npm test -- --coverage  # generate LCOV + text summary

Conclusion

Jest shines from hello‑world samples to enterprise TypeScript monorepos. Start simple, then layer in transformers and mocks as your stack grows. Don’t forget best practices: fake timers for async code, snapshot judiciously, and keep tests isolated and fast.

For more detailed information and advanced configurations, refer to the official Jest documentation: Jest Getting Started.

Happy testing! 🚀

Mastering Async/Await in JavaScript

Artem Turlenko — Mon, 12 May 2025 07:51:58 +0000

Async/Await simplifies asynchronous JavaScript, providing clear syntax for handling promises. It allows writing asynchronous code that appears synchronous, making it easier to read and maintain.

What is Async/Await?

Async Functions: Declared with the async keyword, they always return a promise. If the function returns a value, the promise is resolved with that value; if the function throws an error, the promise is rejected with that error.
Await: The await keyword is used inside an async function to pause its execution until the awaited promise is resolved or rejected.

Basic Syntax

Defining an Async Function

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

Error Handling

Use try-catch blocks for error handling:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

Async Function Behavior

Return Value: An async function always returns a promise. If a non-promise value is returned, it is automatically wrapped in a resolved promise.

  async function foo() {
    return 1;
  }

  foo().then(value => console.log(value)); // Logs: 1

Execution Flow: The body of an async function can be thought of as being split by await expressions. Code before the first await runs synchronously, and the rest runs asynchronously.

  async function foo() {
    console.log('Start');
    await Promise.resolve();
    console.log('End');
  }

  foo();
  console.log('After foo');
  // Output:
  // Start
  // After foo
  // End

Async/Await vs Promises

Readability: Async/Await offers a cleaner, synchronous-style syntax.
Error Handling: Easier with try-catch compared to .catch().
Debugging: Simpler to step through code.

Promise style:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

Parallel Execution with Async/Await

Use Promise.all() to run async operations concurrently:

async function fetchMultipleUrls(urls) {
  const promises = urls.map(url => fetch(url).then(res => res.json()));
  const results = await Promise.all(promises);
  console.log(results);
}

Common Pitfalls

Blocking Behavior: Misusing await can unintentionally serialize tasks that should run concurrently.

  // Serial execution
  const result1 = await fetch(url1);
  const result2 = await fetch(url2);

  // Parallel execution
  const [result1, result2] = await Promise.all([fetch(url1), fetch(url2)]);

Unhandled Errors: Forgetting to use try-catch can lead to unhandled promise rejections.

Best Practices

Always handle errors gracefully with try-catch.
Use descriptive function names to clearly indicate async behavior.
Limit the use of await to tasks that truly need sequential execution.
Leverage Promise.all for parallel operations.

Advanced Patterns

Async IIFE (Immediately Invoked Function Expression)

Useful for top-level await-like behavior:

(async () => {
  const data = await fetchData();
  console.log(data);
})();

Async Iterators

Handle streams or sequential asynchronous tasks elegantly:

async function* asyncGenerator() {
  yield await fetchData();
  yield await fetchOtherData();
}

(async () => {
  for await (const data of asyncGenerator()) {
    console.log(data);
  }
})();

Conclusion

Async/Await is a powerful JavaScript feature, dramatically simplifying asynchronous code management. Mastering its use enables clearer, maintainable, and more robust asynchronous JavaScript applications.

Have you leveraged Async/Await effectively in your projects? Share your experiences and tips below! 🚀

Geolocation API: Real-world Usage

Artem Turlenko — Fri, 09 May 2025 08:25:28 +0000

JavaScript's Geolocation API enables websites and apps to access the user's geographical location. It is widely used in applications like mapping services, location-based search, and personalized experiences.

How the Geolocation API Works

The API retrieves the user's location via GPS, IP address, Wi-Fi networks, or cell towers, depending on the device and browser capabilities.

Simple Usage

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, handleError);
} else {
  console.error("Geolocation not supported by this browser.");
}

function showPosition(position) {
  console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
}

function handleError(error) {
  console.error(`Error (${error.code}): ${error.message}`);
}

Continuous Location Updates

For apps needing real-time updates (e.g., navigation):

const watchId = navigator.geolocation.watchPosition(
  position => {
    console.log(position.coords);
  },
  handleError,
  { enableHighAccuracy: true, maximumAge: 0 }
);

// To stop updates
navigator.geolocation.clearWatch(watchId);

Accuracy Options

enableHighAccuracy: Requests the best possible accuracy (uses GPS if available).
maximumAge: How long a cached position can be used (in milliseconds).
timeout: Maximum time (milliseconds) to wait for a position.

Real-World Use Cases

1. Localized Search Results

Display search results based on proximity:

navigator.geolocation.getCurrentPosition(position => {
  fetch(`/search?lat=${position.coords.latitude}&lng=${position.coords.longitude}`)
    .then(response => response.json())
    .then(data => console.log(data));
});

2. Mapping & Navigation

Integrate user locations with mapping services like Google Maps or Leaflet:

navigator.geolocation.getCurrentPosition(position => {
  const { latitude, longitude } = position.coords;
  initMap(latitude, longitude);
});

3. Geo-tagging Content

Automatically tag user-generated content with location metadata.

Handling Privacy and Permissions

Always ask for consent before accessing location data:

Clearly inform users why their location is needed.
Allow easy opt-out and clearly communicate privacy practices.

navigator.permissions.query({ name: 'geolocation' }).then(permissionStatus => {
  console.log('geolocation permission state:', permissionStatus.state);
});

Security and Privacy Considerations

Location data is sensitive; handle it securely.
Clearly communicate what you do with collected location data.
Ensure compliance with local laws (e.g., GDPR in Europe).

Best Practices

Minimize battery drain: Only enable high accuracy when essential.
Handle errors gracefully, providing fallbacks when location can't be retrieved.
Respect privacy by requesting location data responsibly.
Cache location data to reduce unnecessary API calls and enhance performance.

Limitations and Considerations

Accuracy varies greatly by device and environment.
Privacy settings and browser compatibility can restrict API availability.
Indoor locations may provide inaccurate results.
Performance may degrade with continuous high-accuracy requests.

Browser Compatibility

Most modern browsers support the Geolocation API fully.
Always test across multiple browsers and devices to ensure consistent behavior.

Conclusion

JavaScript's Geolocation API provides powerful capabilities for creating interactive, personalized user experiences. Understanding its proper usage, privacy, and security implications ensures effective and responsible integration into your projects.

Have you implemented location-aware features using the Geolocation API? Share your experiences below! 🚀

Exploring JavaScript Maps and Sets

Artem Turlenko — Wed, 07 May 2025 11:41:33 +0000

Maps and Sets, introduced in ES6, provide powerful and optimized ways to handle collections of data. They overcome limitations of traditional JavaScript objects and arrays.

JavaScript Map

A Map stores key-value pairs and maintains insertion order. Keys can be any data type.

Creating & Using Maps

const map = new Map();

map.set('name', 'Alice');
map.set(123, 'ID number');
map.set(true, 'boolean key');

console.log(map.get('name')); // Alice

Iterating Over Maps

for (let [key, value] of map) {
  console.log(`${key} = ${value}`);
}

Useful Methods

map.set(key, value) – Adds or updates an entry.
map.get(key) – Retrieves a value by key.
map.has(key) – Checks existence.
map.delete(key) – Removes an entry.
map.clear() – Removes all entries.

JavaScript Set

A Set stores unique values of any type, eliminating duplicates automatically.

Creating & Using Sets

const set = new Set();

set.add(1);
set.add(5);
set.add(5); // duplicate, ignored

console.log(set.has(5)); // true

Iterating Over Sets

set.forEach(value => console.log(value));

Useful Methods

set.add(value) – Adds a new element.
set.delete(value) – Removes an element.
set.has(value) – Checks for existence.
set.clear() – Clears all elements.

Practical Use-Cases

Maps

Associating metadata with objects.
Complex keys (objects, arrays, etc.).
Efficiently handling large datasets.

Sets

Removing duplicates from arrays.
Storing unique values (IDs, permissions).
Quickly checking membership.

const array = [1, 2, 2, 3, 4];
const uniqueArray = [...new Set(array)]; // [1, 2, 3, 4]

Performance Considerations

Maps and Sets offer predictable performance.
Key lookups are faster compared to object property access when keys vary.
Better memory efficiency in certain scenarios compared to plain objects or arrays.

WeakMaps & WeakSets

WeakMap and WeakSet hold "weak" references, allowing garbage collection if there are no other references to the object.

const wm = new WeakMap();
let obj = {};
wm.set(obj, 'data');

obj = null; // obj can now be garbage collected

Differences from Map and Set:

Only objects as keys.
Not iterable.
Useful for caching and private data.

Best Practices

Use Maps for complex keys and better iteration.
Use Sets for uniqueness constraints.
Leverage WeakMap and WeakSet for caching and memory-sensitive applications.

Conclusion

Maps and Sets greatly enhance JavaScript’s data handling capabilities. Mastering their use helps you write efficient, readable, and maintainable code.

Have you used Maps or Sets creatively in your projects? Share your ideas below! 🚀

Advanced JavaScript Animation Techniques

Artem Turlenko — Mon, 05 May 2025 09:10:40 +0000

Smooth, performant animations elevate user experience. This guide covers modern, advanced techniques for creating high‑performance animations with JavaScript, CSS, and Web APIs.

1. Choose the Right Tool

CSS Transitions & Keyframes – Hardware‑accelerated, great for simple UI effects.
Web Animations API (WAAPI) – Native, timeline‑based control in JS.
requestAnimationFrame (rAF) – Low‑level control, syncs to display refresh.
GSAP, Motion One, Anime.js – High‑level libraries with performance optimizations.

2. requestAnimationFrame Power

requestAnimationFrame schedules a callback before the next paint, ensuring 60 fps.

let last = 0;
function tick(time) {
  const delta = time - last;
  last = time;
  update(delta); // your animation logic
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

Tip: Reuse rAF loops instead of many independent ones to reduce overhead.

3. Web Animations API (WAAPI)

const box = document.querySelector('.box');
box.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(300px)' }
], {
  duration: 1000,
  easing: 'cubic-bezier(.4,0,.2,1)',
  fill: 'forwards'
});

Timeline control: play(), pause(), reverse(), onfinish handlers.
Combine with AnimationTimeline for sequencing.

4. Spring Physics & Inertia

Libraries like GSAP and Motion One implement spring‑based easing.

import { spring, animate } from 'motion';

animate('.card', { y: 0, opacity: 1 }, { easing: spring({ stiffness: 200, damping: 12 }) });

Benefits: Natural motion, automatic duration calculation.

5. FLIP Technique (First, Last, Invert, Play)

Efficiently animates layout changes:

function flip(element, newRect) {
  const first = element.getBoundingClientRect();
  // apply layout change here
  const last = newRect || element.getBoundingClientRect();
  const invertX = first.left - last.left;
  const invertY = first.top - last.top;
  element.style.transform = `translate(${invertX}px, ${invertY}px)`;
  element.style.transition = 'transform 300ms ease';
  requestAnimationFrame(() => (element.style.transform = ''));
}

6. Offloading Work to Web Workers

For heavy timelines (e.g., particle systems), move calculations to a Worker and post transforms back to the main thread.

7. GPU Powered Graphics

WebGL / Three.js – 3D or particle effects.
Canvas 2D – Custom rendering loops.
CSS Houdini – Paint & Layout Worklets for custom effects.

8. Performance Tips

Prefer transform & opacity for changes (avoids reflow).
Limit layers—too many will-change hints hurt memory.
Batch DOM reads then writes (avoid layout thrashing).
Use prefers-reduced-motion media query to respect user settings.

@media (prefers-reduced-motion: reduce) {
  .animated { animation: none !important; }
}

9. Sequencing & Timelines

GSAP Timeline or WAAPI groupEffect help choreograph complex chains.

const tl = gsap.timeline({ defaults: { duration: 0.4 } });
tl.from('.hero', { y: 100, opacity: 0 })
  .from('.cta', { scale: 0, opacity: 0 }, '-=0.2');

10. Measuring & Debugging

Chrome DevTools Performance panel – detect dropped frames.
performance.now() for micro‑benchmarking.
Firefox DevTools paints flashing.

Conclusion

Advanced animation in JavaScript blends physics, timelines, and performance strategy. By mastering these techniques, you can craft fluid, delightful experiences without compromising speed.

Which animation technique are you eager to try? Share below! 🚀

ES Modules and CommonJS Modules Explained

Artem Turlenko — Fri, 02 May 2025 06:59:22 +0000

JavaScript offers two main module systems—ES Modules (ESM) and CommonJS (CJS). Understanding their differences and usage helps you write clean, modular, and maintainable code.

1. CommonJS Modules (CJS)

CommonJS is widely used in Node.js environments. It loads modules synchronously and uses module.exports and require().

Defining & Using CommonJS Modules

math.js:

module.exports.add = (a, b) => a + b;

app.js:

const math = require('./math');
console.log(math.add(2, 3)); // 5

Characteristics:

Synchronous loading
Widely adopted in Node.js
Does not support tree shaking natively

2. ES Modules (ESM)

Introduced in ES6, ESM provides native support for modules in JavaScript with static analysis and tree shaking capabilities.

Defining & Using ES Modules

math.js:

export const add = (a, b) => a + b;

app.js:

import { add } from './math.js';
console.log(add(2, 3)); // 5

Characteristics:

Asynchronous loading
Static analysis and tree shaking
Supported natively by modern browsers and Node.js (with .mjs extension or type="module")

3. Differences between ESM and CJS

Feature	CommonJS	ES Modules
Loading	Synchronous	Asynchronous
Syntax	`require()`/`module.exports`	`import`/`export`
Tree shaking	Limited	Supported
Dynamic Imports	Not native	Native via `import()`
Node.js support	Native	Native (since v14 fully stable)
Browser support	No (requires bundling)	Yes (modern browsers)

4. Dynamic Imports

ES Modules support dynamic imports, which can improve performance by loading modules on-demand:

button.addEventListener('click', async () => {
  const module = await import('./math.js');
  console.log(module.add(5, 10));
});

5. Interoperability Between ESM and CJS

When using both module types together:

From CommonJS to ESM:

// CommonJS module requiring an ESM module (Node.js)
(async () => {
  const math = await import('./math.mjs');
  console.log(math.add(2, 3));
})();

From ESM to CommonJS:

// ES module importing CommonJS
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const fs = require('fs');

6. When to Choose Which?

CommonJS:
- Legacy projects
- Immediate compatibility with older Node.js versions
ES Modules:
- New projects
- Modern JavaScript practices
- Front-end projects without transpilation or bundlers

7. Best Practices

Prefer ESM in modern projects for better optimization and future-proofing.
Clearly distinguish modules (.mjs for ESM in Node.js or specify "type": "module" in package.json).
Use dynamic imports to enhance application performance.

8. Conclusion

Both CommonJS and ES Modules have distinct strengths. Understanding their differences and interoperability allows you to make informed choices that best fit your project's needs.

Have you transitioned from CommonJS to ES Modules? Share your experiences and tips below! 🚀

WebSockets: Real‑Time Communication Made Easy

Artem Turlenko — Wed, 30 Apr 2025 07:25:03 +0000

WebSockets provide full‑duplex, low‑latency communication between the browser and a server over a single TCP connection. Unlike HTTP, which is request/response‑based, WebSockets keep the connection open, enabling real‑time data exchange for chats, live dashboards, multiplayer games, and more.

1. How WebSockets Work

Handshake – A client sends an HTTP Upgrade request to switch protocols.
Upgrade – The server responds with 101 Switching Protocols if it accepts.
Full‑Duplex Channel – Both sides can now send data frames at any time until the connection closes.

Client —— HTTP Upgrade ——> Server
Client <—— 101 Switching —— Server
Client ⇄⇄⇄  WebSocket Frames  ⇄⇄⇄  Server

2. Creating a WebSocket in the Browser

const socket = new WebSocket('wss://echo.websocket.org');

socket.addEventListener('open', () => {
  console.log('Connected');
  socket.send('Hello WebSocket');
});

socket.addEventListener('message', event => {
  console.log('Message from server:', event.data);
});

socket.addEventListener('close', () => console.log('Disconnected'));

ws:// – Unencrypted
wss:// – Encrypted via TLS (recommended)

3. Building a Node.js WebSocket Server (ws Library)

npm i ws

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', msg => ws.send(`Echo: ${msg}`));
});

4. Handling Binary Data

WebSockets support text and binary frames. Use ArrayBuffer, Blob, or TypedArray.

socket.binaryType = 'arraybuffer';

socket.onmessage = e => {
  const view = new Uint8Array(e.data);
  // process binary data
};

5. Common Use Cases

Chat & Collaboration (Slack‑like apps)
Live Dashboards (financial tickers, IoT telemetry)
Gaming (multiplayer state sync)
Live Notifications & Feeds

6. Best Practices & Pitfalls

Ping/Pong Heartbeats – Detect dead connections.
Back‑pressure Handling – Monitor bufferedAmount to avoid memory bloat.
Reconnect Logic – Exponential backoff when the socket closes unexpectedly.
Authentication – Use tokens (e.g., JWT) during the handshake or subprotocols.
Security – Always prefer wss://; validate incoming frames on the server.

function connect() {
  const ws = new WebSocket('wss://example.com');
  let retry = 0;

  ws.onclose = () => {
    const delay = Math.min(1000 * 2 ** retry++, 16000);
    setTimeout(connect, delay);
  };
}

7. Alternatives & Comparisons

Feature	WebSocket	SSE (EventSource)	HTTP Polling
Direction	Bidirectional	Server→Client	Client→Server
Binary Support	Yes	No	No
Overhead	Low	Low	High
Browser Support	Excellent	Good	Universal

8. Conclusion

WebSockets enable efficient, real‑time communication across the web stack. Whether you’re building a chat app or streaming sensor data, mastering the WebSocket API and its best practices will help you deliver seamless live experiences.

Have you built with WebSockets? Share tips and stories below! 🚀

JavaScript Execution Context Explained

Artem Turlenko — Tue, 29 Apr 2025 09:15:23 +0000

Understanding the execution context is fundamental to grasping how JavaScript code runs. It dictates variable scope, this binding, and how the JavaScript engine manages memory and control flow.

1. What Is an Execution Context?

An execution context is an abstract environment where JavaScript code is evaluated and executed. Each context provides its own scope chain, variable environment, and value of this.

Types of Execution Contexts

Global Execution Context (GEC) – Created once when the script loads.
Function Execution Context (FEC) – Created each time a function is invoked.
Eval Execution Context – Rare; created by the eval() function.

Call Stack: Execution contexts are pushed onto and popped off the call stack following LIFO order.

2. Phases of an Execution Context

Every execution context goes through two phases:

Creation Phase
- Creates the Variable Environment (hoists variables & function declarations).
- Establishes the scope chain.
- Sets the value of this.
Execution Phase
- Executes code line by line.
- Assigns variable values and executes functions.

function greet() {
  console.log(message); // undefined (hoisted)
  var message = 'Hello World';
  console.log(message); // Hello World
}

greet();

3. Variable & Lexical Environments

Variable Environment: Stores variable and function declarations.
Lexical Environment: Similar to Variable Environment but used in ES6 for let and const.

var a = 1;
let b = 2;

a is stored in the Variable Environment.
b is stored in the Lexical Environment.

4. `this` Binding Rules

this depends on how a function is invoked:

Global Context – this is the global object (window in browsers).
Method Call – this is the object owning the method.
Constructor Call – this is the newly created object.
Arrow Functions – this is lexically inherited.

const obj = {
  value: 42,
  getValue() {
    return this.value; // obj.value
  }
};

5. Example: Nested Function Calls

function outer() {
  var outerVar = 'outer';

  function inner() {
    var innerVar = 'inner';
    console.log(outerVar); // access parent scope
  }

  inner();
}

outer();

Two FECs are created: one for outer, one for inner, each with its own scope chain.

6. Common Pitfalls

Hoisting Confusion – Variables declared with var are hoisted but initialized as undefined.
this Misbinding – Losing context in callbacks; use arrow functions or bind().
Memory Leaks – Unintended references in closures can prevent garbage collection.

7. Best Practices

Use let and const to minimize hoisting-related bugs.
Keep functions small and focused to reduce deep call stacks.
Be explicit with this— use arrow functions or .bind() when needed.

8. Visualizing the Call Stack (Demo)

function a() { b(); }
function b() { c(); }
function c() { console.trace(); }

a();

Running this prints the call stack, illustrating context nesting.

9. Conclusion

Mastering execution contexts clarifies hoisting, scope, and this—helping you debug and write efficient JavaScript. Understanding the call stack and context lifecycle is key to becoming an advanced JavaScript developer.

Have questions or tips about execution contexts? Share them below! 🚀

Working with JavaScript Symbols: A Practical Guide

Artem Turlenko — Mon, 28 Apr 2025 05:38:10 +0000

ES6 introduced Symbols as a new primitive type designed to create unique, immutable identifiers. Symbols help avoid property name collisions, enable fine‑grained meta‑programming, and power many built‑in JavaScript protocols.

1. Creating Symbols

const sym1 = Symbol(); // anonymous symbol
const sym2 = Symbol('description'); // optional description for debugging

Key Point: Every Symbol() call returns a unique value—even if the descriptions match.

Symbol('id') === Symbol('id'); // false

2. Using Symbols as Object Keys

Symbols are frequently used to define non‑colliding property keys:

const ID = Symbol('id');

const user = {
  [ID]: 123,
  name: 'Alice'
};

console.log(user[ID]); // 123

Property Enumeration

Symbol‑ keyed properties are non‑enumerable by default:

console.log(Object.keys(user)); // ['name']
console.log(Object.getOwnPropertyNames(user)); // ['name']
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]

3. Global Symbol Registry

Symbol.for() checks a global registry—returning the same symbol for the same key:

const s1 = Symbol.for('config');
const s2 = Symbol.for('config');
console.log(s1 === s2); // true

Use Symbol.keyFor() to retrieve the key:

Symbol.keyFor(s1); // 'config'

When to use: Share identifiers across modules (e.g., feature flags).

4. Well‑Known Symbols & Meta‑Programming

JavaScript defines built‑in symbols that customize language behavior:

Symbol	Purpose
`Symbol.iterator`	Makes objects iterable (`for…of`)
`Symbol.toStringTag`	Custom `Object.prototype.toString` label
`Symbol.asyncIterator`	Supports `for await…of`
`Symbol.toPrimitive`	Custom object → primitive conversion
`Symbol.hasInstance`	Custom `instanceof` behavior

Example: Making an Object Iterable

const range = {
  start: 1,
  end: 3,
  [Symbol.iterator]() {
    let current = this.start;
    return {
      next: () => ({
        value: current,
        done: current++ > this.end
      })
    };
  }
};

for (const n of range) {
  console.log(n); // 1, 2, 3
}

5. Best Practices

Encapsulation: Use symbols for “private‑ish” properties to prevent accidental access.
Avoid Overuse: Symbols add complexity—use when collisions are likely or meta‑programming is required.
Global Registry Caution: Symbol.for() is handy but can leak global state; document shared keys carefully.
Interop Awareness: JSON.stringify skips symbol properties. Provide fallbacks if serializing data.

6. Common Pitfalls

Serialization: Symbols vanish in JSON—use string keys for data that must persist.
Debugging: Symbol descriptions help, but devtools may still show Symbol()—name your symbols!
Equality Confusion: Two symbols with identical descriptions are never equal.

7. Conclusion

Symbols are a powerful addition to JavaScript, offering unique keys and hooks into the language’s meta‑programming capabilities. Use them judiciously to prevent property collisions, create pseudo‑private fields, and extend built‑in behaviors.

Have you leveraged Symbols in creative ways? Share your experiences below! 🚀

🔍 Inside the V8 JavaScript Engine: A Comprehensive Exploration

Artem Turlenko — Fri, 25 Apr 2025 08:42:34 +0000

V8 is Google's open-source high-performance JavaScript and WebAssembly engine, written in C++. It powers Chrome, Node.js, and other platforms by compiling JavaScript directly into machine code for faster execution.

🧱 Core Architecture of V8

1. Parser

The parser reads JavaScript source code and converts it into an Abstract Syntax Tree (AST), representing the grammatical structure of the code. This AST serves as the foundation for subsequent compilation stages.

2. Ignition (Interpreter)

Ignition is V8's interpreter that transforms the AST into bytecode. This bytecode is a low-level representation of the code, enabling efficient execution without immediate compilation to machine code.

3. TurboFan (Optimizing Compiler)

TurboFan compiles frequently executed bytecode into optimized machine code. It employs advanced optimization techniques, such as inlining and dead code elimination, to enhance performance.

4. Garbage Collector

V8's garbage collector manages memory allocation and reclamation. It uses a generational approach:

Young Generation: Handles short-lived objects with frequent minor collections.
Old Generation: Manages long-lived objects with less frequent major collections.

This strategy minimizes pause times and improves overall performance.

🔄 Execution Pipeline

Parsing: JavaScript source code → AST
Bytecode Generation: AST → Bytecode via Ignition
Execution: Bytecode interpreted by Ignition
Optimization: Hot functions (frequently executed) are identified and compiled into optimized machine code by TurboFan.
Deoptimization: If assumptions made during optimization are invalidated, V8 can deoptimize and revert to interpreting bytecode.

⚙️ Optimization Techniques

Hidden Classes

V8 uses hidden classes to optimize property access. When objects share the same structure, they can share the same hidden class, enabling faster property lookups.

Inline Caching

Inline caching stores information about previous property accesses, allowing V8 to optimize repeated property lookups by avoiding redundant computations.

Just-In-Time (JIT) Compilation

V8 employs JIT compilation to convert bytecode into machine code at runtime, balancing the trade-off between compilation time and execution speed.

🧪 Profiling and Debugging Tools

Chrome DevTools: Provides a suite of tools for debugging, profiling, and analyzing JavaScript performance in the browser.
Node.js Profiler: Helps identify performance bottlenecks in server-side applications.
V8 Inspector Protocol: Allows for debugging and profiling of V8-based applications through a standardized protocol.

🛠️ Best Practices for Optimizing JavaScript in V8

1. Use Consistent Object Shapes

When objects always have the same properties in the same order, V8 can reuse hidden classes efficiently.

function createUser(name, age) {
  return {
    name: name,
    age: age,
    isAdmin: false
  };
}

const user1 = createUser('Alice', 30);
const user2 = createUser('Bob', 25);

2. Avoid Adding Properties Dynamically

Changing the structure of objects at runtime leads to new hidden classes and deoptimization.

❌ Bad:

const user = {};
user.name = 'Alice';
user.age = 30;

✅ Good:

const user = {
  name: 'Alice',
  age: 30
};

3. Use Dense Arrays Over Sparse Arrays

Sparse arrays (arrays with missing indices) degrade performance.

❌ Sparse Array:

const arr = [];
arr[100] = 'value';

✅ Dense Array:

const arr = Array(101).fill(null);
arr[100] = 'value';

4. Use Typed Arrays for Numeric Computations

Typed arrays are more memory-efficient and faster for numeric-heavy tasks.

const buffer = new ArrayBuffer(16);
const int32View = new Int32Array(buffer);
int32View[0] = 42;
console.log(int32View[0]); // 42

5. Minimize Use of try-catch in Hot Paths

try-catch blocks disable some optimizations in V8. Move error handling out of performance-critical code.

function parseJSONSafe(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    return null;
  }
}

Better pattern:

function isValidJSON(str) {
  return str.startsWith('{') || str.startsWith('[');
}

if (isValidJSON(str)) {
  const data = JSON.parse(str);
  // Process data
}

6. Reuse Functions Instead of Creating Them Inside Loops

Creating functions inside loops increases memory allocation and reduces optimization potential.

❌ Bad:

for (let i = 0; i < 1000; i++) {
  setTimeout(() => console.log(i), 1000);
}

✅ Good:

function log(i) {
  console.log(i);
}

for (let i = 0; i < 1000; i++) {
  setTimeout(log, 1000, i);
}

📚 Further Reading

🚀 Conclusion

By understanding the V8 engine's internals and applying best practices tailored for its optimization strategies, developers can build faster, more efficient JavaScript applications. Use profiling tools and maintain consistent code patterns to take full advantage of V8’s performance capabilities.

Prototypal Inheritance in JavaScript

Artem Turlenko — Thu, 24 Apr 2025 08:28:35 +0000

Prototypal inheritance is a core feature of JavaScript, distinguishing it from classical inheritance found in languages like Java and C++. Understanding how it works is crucial for mastering JavaScript fundamentals.

What is Prototypal Inheritance?

In prototypal inheritance, objects inherit properties and methods directly from other objects. JavaScript objects have a hidden internal property called [[Prototype]] that points to their prototype object.

Understanding the Prototype Chain

Every JavaScript object has a prototype. When accessing properties or methods, JavaScript searches the object itself, and if not found, it moves up the prototype chain until it finds the requested property or reaches null.

const animal = {
  speak() {
    console.log('Animal speaking');
  }
};

const dog = Object.create(animal);
dog.bark = function() {
  console.log('Woof!');
};

// Using inherited method
dog.speak(); // Animal speaking

Setting Prototypes with Constructor Functions

Constructor functions simplify creating multiple objects with the same prototype:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound.

Modern JavaScript Classes

ES6 introduced class syntax as a more readable alternative, though it still uses prototypal inheritance internally:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} speaks.`);
  }
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log('Woof!');
  }
}

const myDog = new Dog('Buddy');
myDog.speak();
// Buddy speaks.
// Woof!

[[Prototype]] vs proto vs .prototype

[[Prototype]]: Internal property of an object used by JavaScript engines to link objects together in the prototype chain.
proto: Deprecated accessor property that allows reading and setting the prototype of an object. Avoid using it in modern code due to performance and security implications.

const obj = {};
console.log(obj.__proto__); // Points to Object.prototype

.prototype: A property on constructor functions used when creating new instances with the new keyword. It specifies the prototype for objects created by that constructor.

function Car(model) {
  this.model = model;
}

Car.prototype.drive = function() {
  console.log(`${this.model} is driving.`);
};

const myCar = new Car('Tesla');
myCar.drive(); // Tesla is driving.

Benefits of Prototypal Inheritance

Memory efficiency: Shared methods save memory compared to classical inheritance.
Dynamic flexibility: Easily modify objects at runtime.
Simplicity: Clear and straightforward inheritance structure.

Common Pitfalls

Modifying prototypes can affect all instances: Be cautious when altering prototypes dynamically.
Deep prototype chains can affect performance: Keep chains concise and shallow when possible.

Best Practices

Prefer class syntax for readability while remembering underlying prototype mechanisms.
Avoid extending built-in objects unless necessary.
Clearly document the prototype structure of complex object hierarchies.

Conclusion

Understanding prototypal inheritance empowers you to write more efficient and maintainable JavaScript code. Embracing its unique strengths can significantly enhance your JavaScript programming skills.

Have you utilized prototypal inheritance creatively in your JavaScript projects? Share your experiences below! 🚀

Forem: Artem Turlenko

Code Quality Automation: ESLint Rules, Prettier, and Custom Linting

The Modern Code Quality Stack

Advanced ESLint Configuration

Prettier Integration Without Conflicts

Building Custom ESLint Rules

CI/CD Integration That Actually Works

Pre-commit Hooks for Instant Feedback

Performance Optimization Tips

Gradual Adoption Strategy

The Bottom Line

Unit Testing with Jest – From Zero‑Config to Production Ready

Why Jest?

Installing Jest

Your First Test

Code under test sum.js

Test file sum.test.js

Testing Asynchronous Code (with Fake Timers)

async function (uses a timer)

test with fake timers

Snapshot Testing

Mock Functions & Modules

Advanced Jest Configuration (real‑world projects)

jest.config.js

Transformers

CSS & Asset Mocks

Global Setup

Watch Mode & Coverage

Conclusion

Mastering Async/Await in JavaScript

What is Async/Await?

Basic Syntax

Defining an Async Function

Error Handling

Async Function Behavior

Async/Await vs Promises

Parallel Execution with Async/Await

Common Pitfalls

Best Practices

Advanced Patterns

Async IIFE (Immediately Invoked Function Expression)

Async Iterators

Conclusion

Geolocation API: Real-world Usage

How the Geolocation API Works

Simple Usage

Continuous Location Updates

Accuracy Options

Real-World Use Cases

1. Localized Search Results

2. Mapping & Navigation

3. Geo-tagging Content

Handling Privacy and Permissions

Security and Privacy Considerations

Best Practices

Limitations and Considerations

Browser Compatibility

Conclusion

Exploring JavaScript Maps and Sets

JavaScript Map

Creating & Using Maps

Iterating Over Maps

Useful Methods

JavaScript Set

Creating & Using Sets

Iterating Over Sets

Useful Methods

Practical Use-Cases

Maps

Sets

Performance Considerations

WeakMaps & WeakSets

Differences from Map and Set:

Best Practices

Conclusion

Advanced JavaScript Animation Techniques

1. Choose the Right Tool

2. requestAnimationFrame Power

3. Web Animations API (WAAPI)

4. Spring Physics & Inertia

Code under test `sum.js`

Test file `sum.test.js`

`jest.config.js`

4. `this` Binding Rules