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
