Colonel Oleksii

2025 Safari is low 60 FPS browser still - so what?

While AI industry is booming around the world of May 2025, Apple still cannot figure out how to make their products high-performant as competitors do. Safari performance issues, unfortunately, gives me a vibe of Internet Explorer from old days - Microsoft wasted years to support slow and ugly IE. IE

TypeScript autocomplete with arbitrary strings allowed

Here is a TypeScript trick to keep IDE intellisense suggestions for known options but still allow arbitrary strings to be provided without any compiler errors. As the main screenshot of this article shows, the solutions is as simple as that: type Color = 'red' | 'blue' | 'other' | (string & {}); let color: Color

Auto dark mode images with CSS

CSS-only: Automatic Dark Mode for Images ⭐️ Just two CSS properties can adapt a light image for Dark Mode. In Tailwind, it takes only two classes: invert hue-rotate-180 (open in playground) 1️⃣ The invert filter turns white into black but distorts other colors. 2️⃣ However, hue-rotate shifts the hues to approximate

Type safe monkey patching with TypeScript

How to wrap any function without using any types to keep your code as strict as possible. Our goal is to have a universal solution so it should: wrap function with zero or more argumentspreserve types of original function (infer arguments and return type)should work under strict compiler options

How to round numbers in JavaScript properly

JavaScript as many other programming languages has real difficulties when it comes to rounding numbers on edge cases for floating numbers. TL;DR;Proper, elegant solution to round numbers in JavaScript using Number.EPSILON (MDN link) correction 🤓: const round = (num = 0, fractions = 0) => { const k = Math.pow(10, fractions)

React component with traits

Trait means behaviour or some way of appearance if we talk about UI. For example a duck has traits to walk, swim, fly and others. Similarly, components in our programs have their own behaviour. Imagine component button withConfirmationDialog behaviour (trait) or a menu tab withBadgeCounter appearance (trait). Composition over inheritanceTo

Meta programming with TypeScript

First, developers write programs. Then, they write code (programs) which produce programs (code) based on other code (programs) - this is meta programming. The simplest example of meta programming in JavaScript I can think of is Object.keys - iterate through any object's keys and do something with them. This

utils

Universal identity type function

As per nowadays trends, TypeScript is a smart language which can understand types of static code without explicit indication of type thanks to its type inference ability. Type inference is really one of the best thing about this language, I use it every day I write a code. And strongly

How to fix npm packages

Web development is full of external dependencies and frontend developers and NodeJs developers are especially depend on node_modules which we know are the heaviest objects in the universe. node_modules are heaviest objects in the universeRecently I faced with a critical issue with one of my code packages -

webgl

WebGL shader renderer for awesome animations

Nowadays, WebGL is a popular technology for developing engaging frontend web apps. I see more and more global companies like Stripe use WebGL to create awesome animations on their landing pages. Stripe landing with WebGL backgroundThis background mesh gradient is smoothly animated ☝️ (visit https://stripe.com/ to see it in

utils

Make enum and literal compatible

In TypeScript, enum can be represented in multiple forms: Numeric enums ("default")String enums (where key represents a literal string)Heterogeneous enums (mix of numbers and strings, some of them are computed in runtime)Among these multiple forms I believe string enums are the most used in web apps development

utils

Extract route params type (via Template Literal Types)

TypeScript 4.1 introduced an awesome concept of template literal types which allows us to parse literal types and extract their parts as types for further manipulations. The most prominent use case of this approach for frontend is to get types of parameters from URL path. ExtractRouteParams typetype ExtractRouteParams<

Narrow types use cases

TypeScript union types represent multiple types at the same time. It is convenient to group types into unions to explain they share something in common, they have common purpose (think of redux reducer which receives an action object of many different shapes). For TypeScript there is an awesome technique called

utils

Handle async errors without nesting try / catch

Concept of async / await keywords made code much more readable and maintainable in comparison of callback hell but still we need to handle errors for async operations. Usual try / catch blocks will make a code nested, create new closure making variables created inside inaccessible outside of try / catch. To avoid