Стиснути й обрізати фото у вкладці, без відправки в хмару
HelpMyIMG стискає й обрізає фото у вкладці: близько 120 мс проти 4,2 с у хмарі, мінус 70–85% ваги, файл не їде на сервер.
Stuzhuk Lab — Chemistry of Code
Хімія коду
← Усі статті
Тег
Фронтенд
Усі статті блогу з цим тегом.
React 19.3: мініатюра фото виростає в картку і не втрачає стан
У React 19.3 мініатюра в сітці виростає у великий кадр і не скидає обраний знімок у списку.
Компілятор React: прибрали половину useMemo і лишили потрібні
У панелі на React 19 було 214 викликів useMemo і useCallback. Компілятор зняв більшу частину; два краї все одно лишилися ручними.
ONNX: від PyTorch до Runtime — формат, експорт і паритет виводу
Що таке ONNX і ONNX Runtime, як експортувати модель з PyTorch, opset і динамічні осі, чому ламається експорт CRNN/YOLO і як звірити вивід з Python перед браузером.
WebGPU + Transformers.js: нейромережі прямо в браузері
Як запускати ML у React без обов’язкового серверного GPU: WebGPU, Transformers.js, ONNX Runtime, OCR і комп’ютерний зір, запасний шлях на WASM і бюджет розміру моделі.
Скільки грошей втрачає повільний сайт: швидкість завантаження і продажі
Як зв’язати LCP, INP і воронку з виручкою: дослідження, формула втрат, калькулятор, A/B-тест і бюджет продуктивності для інтернет-магазину.
React-Redux 9.4: селектори на сигналах
В альфі React-Redux — необов’язковий useSignalSelector: перерахунок лише тих селекторів, чиї дані справді змінилися.
Offline-first у React: запис, який доживає до сервера
Як влаштувати читання і запис без мережі: TanStack Query, Dexie, черга операцій, клієнтський ідентифікатор і ключ ідемпотентності. Не кеш екрана, а доставка зміни.
Руни Svelte 5: явна реактивність замість «магії»
Svelte 5 замінив неявне оновлення інтерфейсу рунами. Що це дало розміру пакета і чим довелося заплатити.
Voodoo.js: прорив чи повернення до простого вебу?
Розбір Voodoo.js: HTML-перший без збірки, JSX у розмітці, реактивність без Virtual DOM, чесні бенчмарки і чому ідея важливіша за швидкість в епоху ШІ-кодування.
Voodoo.js зсередини: як власний інтерпретатор оживляє звичайний HTML
Розбір Voodoo.js зсередини: від DOM після HTML-розбірника браузера до лексера, дерева виразів, інтерпретатора, ефектів через Proxy і прямої запису у вузли без eval.
Voodoo.js: архітектура середовища виконання без компілятора, Virtual DOM і eval
Карта шарів Voodoo.js: обхідник, області видимості, реактивність, ціна відмови від збірки, розмір пакета, роздування можливостей і HTML як артефакт для ШІ-кодування.
Voodoo.js: реактивність і map/filter просто в звичайному HTML
HTML-перший каркас без збирача: один script, реактивна розмітка і JSX-стиль усередині звичайної сторінки.
Декларативні залежності полів у формах React
Замість спагеті з useEffect — конфіг залежностей, патерн «спостерігач» і дрібнозерниста реактивність на MobX.
htmx 4.0: запити через fetch і HTML без зайвого JavaScript
Мажор htmx 4.0: fetch замість XHR, успадкування атрибутів лише з :inherited, злиття розмітки з коробки та <hx-partial> для кількох цілей.
Svelte, вересень 2026: SvelteKit 3 RC, SvelteMap і міграція через sv
Svelte 5.57 — getOrInsert для SvelteMap; SvelteKit 3 Release Candidate; ai-tools замість mcp; задача sveltekit-3 у sv migrate.
Lovable: 400 маршрутів з Next.js на TanStack Start без одномоментного перемикання
Паралельний проксі, #shared, адаптери й агенти: lovable.dev пішов з Vercel на свій стек при 42 млн відвідувачів на місяць.
WordPress 7.0: блоки лише на PHP — без React і збірки
Прапорець autoRegister у WordPress 7.0: реєстрація блока одним PHP, автогенерація JS для редактора — і жорсткі обмеження для інтерактиву.
HTML поверх WebSockets: SPA майже без JavaScript
Патерн LiveView: сервер надсилає готовий HTML постійним каналом — без окремого API і важкого фронтенд-фреймворка.
React useLatest: свіжий стан в async-колбеках без зайвих рендерів
Хук useLatest з @reactuses/core: актуальний ref у layout-ефекті проти застарілих замикань після await, у таймерах і підписках.
TanStack Table v9: платите лише за ті можливості таблиці, які вмикаєте
Стабільний v9 за чотири роки після v8: модульні можливості, TanStack Store, до 86% менше пам’яті на мільйоні рядків і десять адаптерів фреймворків.
Віддалені функції SvelteKit, TypeScript 6 і розширення CLI
Огляд Dev.to: як типізовані серверні виклики SvelteKit і розширення CLI можуть прибрати рутину — та що перевірити до оновлення.
conic-gradient() у CSS: трикутники, промені й кругові діаграми
Функція conic-gradient() розподіляє колір навколо точки: з неї виходять сектори, промені, трикутники та інтерактивні ефекти без зайвої розмітки.
Як обмеження узагальнених типів TypeScript запобігають помилкам
Як `extends`, `keyof` та індексний доступ допомагають TypeScript знайти хибні ключі й значення до запуску застосунку.
Meta відкрила код дизайн-системи Astryx для React
Astryx поєднує React, StyleX, понад 160 компонентів, теми та шаблони — досвід Meta можна вивчати й застосовувати у власних інтерфейсах.
Фронтенд без очікування: TSGO, Oxlint, Rsbuild і React Compiler
Практичний досвід прискорення фронтенд-розробки: перевірка типів, аналіз коду, збирання, API-контракти й оптимізація React.
React: як відкладати пошук і автозбереження без зайвих запитів
Коли обирати useDebounce чи useDebounceFn у React, як уникнути застарілих замикань і безпечно керувати відкладеними діями.
Astro 7: ядро на Rust, кешування маршрутів та інструменти для ШІ
В Astro 7 компілятор і обробку Markdown перенесли на Rust, прискорили збирання та додали гнучке кешування маршрутів.
euv: UI-фреймворк на Rust і WebAssembly для браузера
Вступний гайд з euv: віртуальний DOM, реактивні сигнали, макрос html! і mount — декларативний фронтенд із типобезпекою Rust і збіркою в WASM.
Типізований Tailwind «з
Як автор перетворив Tailwind-класи на typed props і дійшов до «усвідомлених» компонентів: форми, visibleWhen, RBAC — без Controller на кожному полі.
React Router v8: нудний, але правильний реліз
React Status #479: React Router v8 як «навмисно нудний» апдейт, Rust-порт React Compiler, RN 0.86, TypeScript 7 RC і новини екосистеми React.
React 19: concurrent rendering, Actions і Suspense у продакшені
Розбір concurrent rendering у React 19: термінові та фонові оновлення, useTransition, useOptimistic і межі Suspense без блокування UI.
Як влаштований сучасний веб: від браузера до бази даних
Повний шлях HTTP-запиту — DNS, TLS, CDN, балансувальник, Nginx, backend, Redis, черги, PostgreSQL і назад у браузер. Практичний розбір для розробників і архітекторів.
Zero-JS замало: кеш SSR-HTML на edge через Cloudflare Workers
Як автор стабілізував Core Web Vitals після відмови від React: Cache API, cookie-gated HTML, відмова від Zod у браузері та рефакторинг форм на Astro.
Як проєктувати сучасну ERP-систему в 2026 році: від моноліту до платформи
Metadata Driven Architecture, рушії платформи, стек фронтенду й стратегія міграції — як будувати ERP, яка розвивається десятиліттями без переписування кожні п'ять років.
Extend UI — open-source React-компоненти для PDF, DOCX і підписів
14 MIT-компонентів від extend.ai: перегляд документів, bounding box citations, завантаження файлів і e-signature.
Vue 3: головні пастки реактивності та Composition API
ref vs reactive, втрата реактивності при деструктуризації, watchEffect і Teleport — типові помилки з Dev.to.
Еволюція архітектури вебзастосунків за останні 20 років
Від серверного рендерингу 2005 року до AI-застосунків і edge computing: як змінювалися веб-архітектури, чому старі рішення не були помилками і як обрати підхід у 2026 році.
Path aliases в TypeScript-монорепо: Astro, React і спільні типи
baseUrl, paths і project references: @shared/types замість ../../../ і тихі падіння збірки без workspace:*.
Прогалина у фронтенді, яку ШІ за вас не закриє
Рендеринг, мережа, архітектура компонентів і Core Web Vitals — те, чого туторіали з кнопками не пояснюють, а продакшен вимагає.
Еволюція форматів зображень: від BMP до AVIF — повний гід для розробників
Історія та практика: BMP, GIF, JPEG, PNG, WebP, HEIC, AVIF і JPEG XL. Як працює стиснення, що обрати у 2026 році, як віддавати зображення без просідання LCP.
JavaScript: 8 оптимізацій продуктивності, які реально працюють
Спочатку вимірювання, потім правки: debounce, ледаче завантаження, Web Workers, зменшення бандла та швидкі покращення.
Next.js майже миттєво: практичний чеклист для App Router
Server Components за замовчуванням, менше client JS, next/image, без CLS, кешування, next/script і заміри на throttled mobile.
Клієнтський puzzle solver на Web Workers: Next.js і bitboards
Static export Next.js, Web Workers для важких алгоритмів, bitboards для Block Blast, trie для word search — $0 hosting.
React.lazy і «білий екран» після деплою: як повернути користувача
Старий HTML у вкладці, новий бандл на CDN — chunk не знайдено. Глобальний listener і cache-bust за ~15 рядків.
HTML-елемент `<install>`: встановлення PWA без JavaScript
Chrome і Edge тестують декларативну кнопку встановлення вебзастосунку — простіше, ніж лише маніфест і власний скрипт.
Svelte, травень 2026: TypeScript 6, remote functions і плагіни CLI
SvelteKit 2.56 — field.as() для форм, breaking change у refresh query, experimental community plugins.
MDN перебудовує фронтенд: web components замість React-обгортки
Як MDN відмовився від SPA на React на користь Lit, server components та «островів» інтерактиву — і чому це важливо для контентних сайтів.
З Next.js на Astro: коли блог не потребує React у браузері
Розробник переніс портфоліо з Next.js 15 на Astro 6: ~230 KB JS на сторінці поста стало ~0 KB, Lighthouse 99–100.
Сучасний React-стек: Vite, Tailwind, i18next і TanStack Router
Покрокова збірка без хаосу залежностей: маршрутизація, стилі та локалізація в одному мінімальному, але готовому до продакшену каркасі.