Миграция vk.com на SPA и обновление frontend-архитектуры ВКонтакте

Команда ВКонтакте перевела ключевые разделы vk.com на SPA, включая ленту, профили, сообщества, мессенджер, клипы и маркет.

Интересный кейс миграции большого highload frontend-продукта: первая отрисовка страницы ускорилась на 25%, а переходы между разделами — в 3,5 раза. Интерфейс теперь сначала показывает каркас страницы, а затем догружает контент. Параллельно ускорились инженерные процессы: деплой фронтенда сократился до 20 секунд, а релизы происходят 6–8 раз в сутки.

Подробнее — в статье: https://habr.com/ru/companies/vk/news/1043220/

Читать полностью…

Почему нативная рандомизация в CSS это большой шаг вперед

CSS долго был детерминированным и не умел настоящую случайность, поэтому разработчики обходились паттернами, селекторами и генерацией на препроцессорах или на сервере. Новые нативные функции для random в CSS упрощают создание естественных вариаций и делают их частью самого стека, а не хаком.

https://css-tricks.com/the-importance-of-native-randomness-in-css/

Читать полностью…

Реактивное программирование простыми словами

Реактивность строится из состояний, экшенов, реакций и инвариантов, а среда рантайма пересчитывает зависимости и обновляет приложение через каскад. Разберем push и pull подходы, а также как рантайм детектит изменения через polling, события и связи.

https://habr.com/ru/articles/1033088/

Читать полностью…

Миграция на TypeScript 6.0 и адаптация tsconfig

Обновление до TS 6.0 с разбором ключевых изменений и практическими шагами, как привести tsconfig в порядок, чтобы компиляция стала предсказуемой и без сюрпризов.

https://www.sitepoint.com/typescript-60-migration-what-changed-and-how-to-adapt-your-tsconfig/

Читать полностью…

5 лучших альтернатив DataForSEO на 2026 год

Подборка без воды для GEO, AEO и SERM: сравнение топ сервисов вроде SE Ranking, Bright Data и SerpAPI с фокусом на то, что важно для фронтенд команд при интеграции и работе с данными.

https://www.sitepoint.com/5-best-data-for-seo-alternatives-a-senior-expert-breakdown

Читать полностью…

OpenSkills CLI для Anthropic skills во всех AI coding агентах

Один CLI инструмент переносит skills систему Anthropic в любые агенты, которые умеют читать AGENTS.md, включая Claude Code, Cursor, Windsurf, Aider и Codex. Ускоряет настройку контекста и делает поведение агента предсказуемым.

https://github.com/numman-ali/openskills

Читать полностью…

Jest 30.4.0 сильный релиз для тестирования JavaScript

Jest 30.4.0 улучшает поддержку ESM, добавляет акценты вокруг Temporal и лучше работает с React 19, чтобы тесты были стабильнее и ближе к реальному окружению.

https://github.com/jestjs/jest/releases/tag/v30.4.0

Читать полностью…

Современный шаблон админки на React TypeScript и shadcn ui

Готовый лендинг и админский интерфейс с React, TypeScript, Vite, Next.js, Tailwind и shadcn ui v3, который удобно форкать и быстро адаптировать под свой продукт.

https://github.com/shadcnstore/shadcn-dashboard-landing-template

Читать полностью…

Почему я больше не цепляю все подряд в JavaScript

Часто цепочки ухудшают читаемость и мешают вставлять промежуточное логирование, а ясные имена переменных и явные шаги делают код проще для отладки и поддержки.

https://allthingssmitty.com/2026/04/20/why-i-dont-chain-everything-in-javascript-anymore/

Читать полностью…

Build-time микрофронтенды, или как упростить поддержку витрин

Build-time микрофронтенды через npm-пакеты помогают собрать разные фичи в единое приложение на этапе сборки, сохраняя SSR и SEO без переезда на новый фреймворк.

https://habr.com/ru/companies/ru_mts/articles/1034374/

Читать полностью…

Таймауты сессии как скрытый барьер доступности в аутентификации

Таймауты сессии часто ломают UX для пользователей с ограниченными возможностями и тех, кто не успевает завершить действия. Разбираем, как проектировать продление сессии, предупреждения и безопасные сценарии повторного входа без потери доступности.

https://www.smashingmagazine.com/2026/04/session-timeouts-accessibility-barrier-authentication-design/

Читать полностью…

Конец эпохи responsive images: value auto для sizes

Атрибут sizes с auto делает разметку адаптивных изображений заметно проще и убирает главный источник боли при подборе значений, а пользователи получают более незаметную и потенциально более быструю загрузку.

https://piccalil.li/blog/the-end-of-responsive-images/

Читать полностью…

GemShell: превращаем HTML5 игры в нативные приложения

Портируйте HTML5 игры в нативные без потерь. Подходит для фронтенд разработчиков, которые хотят выпускать web проекты как полноценные приложения.

https://gemshell.dev

Читать полностью…

33 ключевых концепта JavaScript для глубокого понимания

Пошаговый гайд по JavaScript core с примерами, диаграммами и проверками знаний: от scope и closures до event loop, async и DOM. Подходит для прокачки знаний и подготовки к интервью, плюс есть удобная документации.

https://33jsconcepts.com/

Читать полностью…

WebSocket и SSE просто для собеседований и не только

Разбираем, чем отличаются двусторонний WebSocket и однонаправленный SSE, как устроены их рукопожатия и как правильно открывать соединения в браузере. Коротко разложено по событиям, отправке данных и обработке обрывов, чтобы уверенно отвечать на вопросы на интервью.

https://habr.com/ru/articles/1021414/

Читать полностью…

React Server Components в TanStack Start

React Server Components выполняются только на сервере, могут быть async и напрямую ходить в API и базу, при этом в браузер уходит только готовая разметка без кода компонентов. Это радикально уменьшает клиентские бандлы и подходит для больших деревьев с минимумом интерактива, а интерактивность подключается через client components.

https://frontendmasters.com/blog/react-server-components-in-tanstack/

Читать полностью…

Техсобес для frontend: как ловить вранье, проверять реальную практику и не попасть в ловушки с ИИ

Техсобеседования ломаются на вранье в резюме, дословных ответах из документации и задачах, которые не отражают реальную работу, поэтому нужны практичные сценарии вроде рефакторинга и поиска багов. Отдельно разбираем, как оценивать AI assisted навыки без превращения интервью в проверку генерации кода.

https://habr.com/ru/companies/alfa/articles/1030322/

Читать полностью…

День сурка frontend-разработчика

Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.

Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.

И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂

А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.

Реклама, erid: 2W5zFJG9hjF ИП Галактионов Тихон Витальевич, ИНН 771618975809

Читать полностью…

Как добавить schema markup на современный сайт с JSON-LD без SEO плагинов

Schema.org разметка в JSON-LD позволяет улучшить понимание страницы поисковиками без зависимости от плагинов. Разберем практичный подход к генерации и встраиванию структурированных данных в фронтенд, чтобы разметка оставалась актуальной при изменениях контента.

https://www.sitepoint.com/how-to-add-schema-markup-to-modern-websites-using-json-ld-without-seo-plugins

Читать полностью…

MDXEditor как удобный редактор Markdown и MDX для React

MDXEditor это open source React компонент для редактирования Markdown в стиле Google Docs и Notion с поддержкой contentEditable, подсветкой кода через CodeMirror и настройкой языков блоков. Можно гибко управлять выводом в markdown включая маркеры списков и символы для выделения, чтобы форматирование совпадало с вашим пайплайном.

https://mdxeditor.dev/

Читать полностью…

Wakaru: разбор минифицированных JavaScript бандлов на модули

Инструмент принимает минифицированный бандл и возвращает читаемую структуру модулей, помогая восстановить код, провести reverse engineering или аудит безопасности. Можно использовать онлайн, чтобы быстро понять, что внутри сборки.

https://github.com/pionxzh/wakaru

Читать полностью…

Массивы, объекты и теперь composites

Composites решают боль с сравнением объектов и использованием их как ключей: две структуры с одинаковыми данными считаются равными даже при разном порядке ключей. Это практичный шаг в сторону более надежной работы с составными значениями в JavaScript.

https://frontendmasters.com/blog/arrays-objects-now-composites/

Читать полностью…

Проверьте, готов ли ваш сайт для AI агентов

Сканируйте сайт по 5 категориям: discoverability, доступность контента, контроль доступа для ботов, обнаружение протоколов вроде MCP и OAuth, а также агентская коммерция. Начните с быстрых улучшений: корректный robots.txt с правилами для AI, sitemap директивы и полезные discovery заголовки или метаданные на главной.

https://isitagentready.com/

Читать полностью…

Почему я больше не цепляю все подряд в JavaScript

Часто цепочки ухудшают читаемость и мешают вставлять промежуточное логирование, а ясные имена переменных и явные шаги делают код проще для отладки и поддержки.

https://frontendmasters.com/blog/why-i-dont-chain-everything-in-javascript-anymore/

Читать полностью…

От ASCII-арт до Markdown и Typst: как современные форматы делают документацию в Git удобной для людей и IDE

Markdown остаётся стандартом для инженерной документации, потому что исходник читается без рендера, а структура хранится рядом с кодом. Разбираются причины роста Markdown, зачем нужен Typst и как внедрять просмотр сложных форматов на вебе через WebAssembly.

https://habr.com/ru/companies/sberbank/articles/1024454/

Читать полностью…

Как измерить рост производительности команды от внедрения ИИ. Бесплатный урок курса «Руководитель команд в ИТ»

ИИ внедряют почти все, но далеко не все понимают, стал ли от этого процесс лучше. Команда может активнее пользоваться новыми инструментами, а расходы на лицензии могут расти, но главный вопрос остаётся открытым: действительно ли выросла производительность, сократилось ли время работы и появился ли экономический эффект.

На открытом уроке 3 июня в 20:00 разберём, как руководителю команды подходить к внедрению ИИ не на уровне ощущений, а через измеримые показатели. Поговорим об условиях успешного внедрения, способах оценки производительности команды, поиске эффекта именно от ИИ, а не от случайных факторов, и расчёте экономической эффективности. Отдельно обсудим, какие требования стоит выполнить до внедрения, чтобы потом не гадать, помог ИИ или просто добавил ещё один слой инструментов.

Урок не для тех, кто внедряет ИИ «потому что все так делают», не готов считать эффект и хочет заменить управленческие решения покупкой новых лицензий.

👉 Записаться: https://otus.pw/EVZS/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Читать полностью…

Диапазоны медиа-запросов CSS

Range queries в CSS 4 делают адаптивные стили читаемыми и предсказуемыми: вместо ловушек с одинаковыми breakpoints используйте выражения вида 300px <= width <= 500px и ускоряйте отладку ваших макетов.

https://ishadeed.com/article/range-syntax/

Читать полностью…

Как собрать кубик Рубика в браузере на чистом Canvas

Пошаговый туториал по созданию 3D кубика на Canvas без Three.js: от проекции и вращения граней до перехода к полноценной интерактивной симуляции, которую можно крутить прямо в браузере.

https://habr.com/ru/companies/ruvds/articles/1035748

Читать полностью…

Компонентная библиотека под ваш проект

Доступные компоненты для Astro и Tailwind CSS, которые добавляются через CLI и остаются под вашим контролем. Быстрый старт с npx bearnie init и дальнейшая настройка, расширение и сборка своей библиотеки.

https://bearnie.dev/

Читать полностью…

Внутри нового фронтенда MDN

Пересобрали фронтенд MDN: упростили дизайн и переработали кодовую базу, чтобы уменьшить технический долг и улучшить поддержку интерактивных элементов без тяжелой клиентской логики. Разбираем архитектуру сборки из Markdown в JSON и SSR, а также причины отказа от React-обертки и проблем с CSS и поддерживаемостью.

https://developer.mozilla.org/en-US/blog/mdn-front-end-deep-dive/

Читать полностью…