🚫💻 Топ-10 ошибок эволюции интернета: что бы разработчики удалили из современного веба

Сегодняшний интернет — это не только мемы и котики, но и автозапуск видео, всплывающие окна, перегруженный JavaScript, странные архитектурные решения прошлого.

В статье разбираем:

➡️ Какие элементы веба вызывают наибольшую боль у разработчиков

➡️ Почему соцсети, реклама и куки заслуживают изгнания

➡️ Как ошибки типа referer и злоупотребление WordPress превратились в технический долг

➡️ Что бы изменили в JavaScript, если бы можно было откатить всё назад

➡️ Идеи для нового, более логичного и безопасного интернета

Мечты о «перезапуске» веба с чистого листа — это не фантастика, а повод задуматься: а не пора ли нам пересмотреть старые решения?

🔗 Читаем статью по ссылке

🐸 Библиотека фронтендера

🔍 Инструмент недели: Lighthouse — карманный инспектор сайта

Если бы у сайтов был техосмотр — Lighthouse был бы тем самым инспектором с линейкой и скептическим выражением лица. Но вместо «у вас тормоза» он говорит «у вас LCP 4.5 сек».

Зачем нужен:

📍 Проверка производительности:

замеряет, насколько быстро твой сайт появляется, становится интерактивным и не убивает пользователя скелетонами на 10 секунд.

📍 SEO и доступность:

проверяет базовые требования поисковой оптимизации: наличие заголовков, мета-описания, канонических ссылок, индексации и пр.

📍 PWA-анализ:

для прогрессивных веб-приложений Lighthouse проводит полный аудит, включая работу оффлайн, наличие manifest.json и service worker.

📍 Профиль UX как на ладони:

проверяет безопасность, использование современных API, корректность HTTPS, ошибки в консоли и другие важные аспекты качества веб-приложения.

Как использовать:

1️⃣ Открываем сайт в Chrome, жмём F12 → вкладка Lighthouse

2️⃣ Настраиваем параметры: мобильный/десктоп, какие категории проверять

3️⃣ Жмём «Generate report» и наблюдаем, как твоё творение превращается в 4 цветных кружка

А если хочется как профи:

• Устанавливаем Lighthouse CLI:

npm install -g lighthouse

• И запускаем тест прямо из терминала:

lighthouse https://example.com --view

• Можно даже засунуть это в CI и отгонять плохие коммиты до релиза.

📍 Полезные материалы:

— Lighthouse Docs от Google
— Сравнение Lighthouse и PageSpeed Insights

🐸 Библиотека фронтендера

#буст

У кого не так, счастливые вы люди.. 😳

🐸 Библиотека фронтендера

#развлекалово

🐏 Апрельские выпуски подкаста PodRocket

1️⃣ Put your database in the browser – с Ben Holmes

Бен Холмс из Warp рассказывает о local-first веб-приложениях — идее, где база данных живёт прямо в браузере.

➡️ Обсуждаются преимущества подхода (низкая задержка, автономность, скорость), технологии вроде SQLite в браузере, WebAssembly, IndexedDB, CRDTs и его собственный движок SimpleSyncEngine.

2️⃣ Ghostty – с Mitchell Hashimoto

Создатель HashiCorp представляет Ghostty — новый терминал, переосмысляющий классический UX.

➡️ Под капотом — libghosty, архитектура кроссплатформенная, с фичами вроде quake-style dropdown, ускоренной рендерингом и расширяемостью. Ghostty подаётся как терминал для современных текстовых интерфейсов.

3️⃣ Vite, frontend tooling & the future – с Evan You

Эван Ю (создатель Vue и Vite) обсуждает эволюцию фронтенд-инструментов: от Vite к VitePlus — новой унифицированной сборочной системе.

➡️ Поднимаются темы Nitro, мульти-рантайм, влияние ИИ и стремление упростить девелоперские пайплайны.

🐸 Библиотека фронтендера

#буст

🦔 Лучшие материалы по фронтенду в одной подборке

Собрали топовые материалы, которые наши подписчики сохраняют чаще всего.

Эту подборку мы будем регулярно пополнять, поэтому сохраняйте тонну пользы, чтобы не потерять!

1. Как оживить веб-страницу: находки от автора курса по анимации

2. Робин Лорд создал интерактивную браузерную игру для изучения HTML и CSS

3. Селекторы CSS на практике

4. Визуализация JavaScript: Event Loop, Task Queue и Microtask Queue

5. Одна React-задача, демонстрирующая ключевые навыки на собеседовании

6. CSS-селектор, о котором вы могли не знать

7. React пора сдать в музей: почему популярный фреймворк устарел и чем его заменить

🌸 WebGPU — графический апгрейд вашего фронтенда

Видели где-то упоминание WebGPU и думали: «Это вообще нужно?» Давайте разберёмся вместе — без скучных теорий, только самое важное и реальные кейсы.

Почему все говорят про WebGPU:

🐁WebGPU даёт браузеру почти тот же уровень доступа к GPU, что и нативным приложениям. Забудьте про огрехи WebGL — теперь можно рендерить сложные 3D-сцены, запускать ML-задачи и серьёзные физические симуляции прямо на клиенте.

Основные понятия, которые пригодятся

🔷 Буферы и шейдеры: поначалу звучит страшно, но на деле это просто набор инструкций для GPU.

🔷 Пайплайны и команды: полный контроль над каждым этапом рендеринга — никакой «чёрной магии».

С чего начать:

➡️ Библиотеки-обёртки:

— wgpu для Rust-энтузиастов

— Babylon.js с экспериментальной поддержкой WebGPU

— Трио Three.js + WebGPU-рендерер

➡️ Песочницы: запускайте примеры прямо в CodeSandbox или в официальных демках GPUWeb.

Реальные кейсы использования:

🔷 Интерактивные 3D-карты и инфографика

🔷 ML-инференс в браузере — без прокаченного бэкенда

🔷 Прототипы игр с плавной физикой и анимациями

Что вы уже пробовали на WebGPU? ✏️ Пишите в комментариях, скидывайте репозитории и гифки — давайте вместе поднимем уровень фронтенда!

P.S. Если хотите задать вопрос, заполните нашу гугл-форму. Это займет 5 минут.

🐸 Библиотека фронтендера

#междусобойчик

📌 Команда дня: npx browserslist

Когда твой код вроде работает, но только у тебя — пора вспомнить про browserslist. Эта команда показывает, на каких браузерах действительно должен работать твой проект. Зависит от настроек в package.json или .browserslistrc.

📍 Пример:

npx browserslist

📍 Результат:

chrome 123
edge 120
firefox 124
safari 17.3
ios_saf 17.3

▶️Зачем это нужно:

• Чтобы не поддерживать браузеры, которыми даже твоя бабушка уже не пользуется.

• Чтобы знать, под кого оптимизировать CSS и JS.

• Чтобы не гадать, почему :has() не работает.

▶️Фишка:

Скомбинируй с @babel/preset-env и autoprefixer, и твой билд будет настолько адаптивным, что захочется распечатать его и повесить на стену.

🐸 Библиотека фронтендера

#буст

💃 Как языки программирования выглядят в стиле Гибли

Мы не могли пройти мимо нашумевшего тренда и попросили ИИ перенести наш любимый язык программирования во вселенную Миядзаки.

Как вам образ? Расскажите в комментариях ↓

😜 Еще больше персонажей из мира айти в стиле Гибли — в нашем канале @proglib

🚀 Автоматическая оптимизация React-приложений

21 апреля 2025 года команда React представила релиз-кандидат (RC) React Compiler — инструмента, который автоматически внедряет мемоизацию в вашем коде, улучшая производительность без необходимости ручного использования useMemo, useCallback или React.memo .

Что нового:

➡️ Авто-мемоизация: React Compiler сам определяет, где нужна мемоизация, и внедряет её без вашего участия — меньше лишних ререндеров, больше производительности.

➡️ Объединение ESLint-плагинов: react-compiler теперь встроен в react-hooks (с версии 6.0.0-rc.1) — настройка проще, подсказки умнее.

➡️ Поддержка современных сборщиков: добавлена экспериментальная поддержка swc, что позволяет использовать компилятор без Babel.

⚠️ На что обратить внимание:

— Работает с React 17+, но для версий до 19 нужно подключить react-compiler-runtime и указать минимальную версию в настройках.

— Если код нарушает правила React (например, ref в рендере), компилятор просто пропускает такие места.

— Некоторые проверки (например, ref-in-render) временно отключены, чтобы избежать ложных срабатываний.

🔗 Инструкция как использовать

🐸 Библиотека фронтендера

#свежак

😄😜

🐸 Библиотека фронтендера

#развлекалово

🤩 Темная тема в приложениях: забота о пользователях или дань моде

В 2025 году отсутствие темной темы — это как прийти на собеседование в пижаме: вроде можно, но все сделают вид, что ты — ошибка природы.

➡️ Почему все так обожают темную тему:

😗 Меньше убивает глаза ночью. Особенно когда третью бессонную ночь ищешь баг, который был в одной строке.

😗 Бережет батарейку. OLED-дисплеи в экстазе. Правда, процессор твой уже треснул от количества рендеров, но кого это волнует?

😗 Выглядит «умно и технологично». В тёмной теме даже TODO-приложение кажется серьезным проектом.

➡️ Почему темная тема — это часто просто маркетинговая пыль в глаза:

➖ Контент сливается в черную кашу. Когда серый текст на черном фоне видишь только под микроскопом и с молитвой.

➖ Поддерживать две темы — это в дважды больше багов. Пару переключений темы — и твой «идеальный» UI начинает вести себя как шизофреник.

➖ Не всегда нужна. Есть приложения, где светлая тема объективно удобнее, но кто будет спорить с модой?

❓ И тут резонный вопрос:

Темная тема — это действительно забота о пользователе, или просто ещё одна галочка в бесконечном списке «фич ради фич»?

🐸 Библиотека фронтендера

#междусобойчик

📣 Дайджест материалов за неделю

🔘 Как устранить FOUC

🔘 Инструмент недели: Lighthouse — карманный инспектор сайта

🔘 Апрельские выпуски подкаста PodRocket

🔘 Команда дня: npx browserlist

🔘 React Compiler RC: автоматическая оптимизация React-приложений

🐸Библиотека фронтендера

#свежак

😳 Топ-вакансий для фронтендеров за неделю

Middle Frontend-разработчик (Angular) — удаленно (Москва)

Dev Team Lead — 350 000 —‍ 450 000 ₽, удаленно (Москва)

Senior Frontend Developer — офис/гибрид (Москва)

Frontend-разработчик — 180 000 —‍ 240 000 ₽, офис/гибрид (Екатеринбург/Новокузнецк)

TypeScript Developer — 3 500 —‍ 5 000 €, удаленно (Литва)

➡️ Еще больше топовых вакансий — в нашем канале Javascript jobs

🐸 Библиотека фронтендера

#свежак

⚡ Новые фреймворки и мета-фреймворки

➡️ Solid.js — легковесный фреймворк без виртуального DOM, обеспечивающий высокую производительность за счет тонкой реактивности и минимального размера бандла.

➡️ Qwik — фреймворк, ориентированный на мгновенную загрузку страниц, с поддержкой серверного рендеринга и оптимизированной гидратацией.

➡️ Analog — новый фреймворк, сочетающий преимущества серверного рендеринга и статической генерации, с акцентом на производительность и простоту использования.

➡️ React Router v7 — переименованный Remix, теперь объединяет возможности серверного рендеринга и клиентского маршрутизатора, предлагая более гибкую архитектуру.

🐸 Библиотека фронтендера

#свежак

🎮 Код из книги: реализация автозаполнения с использованием RxJS

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

Решение с использованием RxJS из книги:

import { fromEvent } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const searchInput = document.getElementById('search');

const search$ = fromEvent(searchInput, 'input').pipe(
debounceTime(300), // задержка перед отправкой запроса
distinctUntilChanged(), // отправка запроса только при изменении текста
switchMap(event => ajax.getJSON(`/api/search?q=${event.target.value}`)) // отмена предыдущего запроса при новом вводе
);

search$.subscribe(results => {
// обновление UI с результатами поиска
const resultsContainer = document.getElementById('results');
resultsContainer.innerHTML = results.map(item => `<div>${item}</div>`).join('');
});


Преимущества:

— Снижается количество запросов к серверу, что уменьшает нагрузку на сервер и повышает производительность приложения.
— Плавная и быстрая реакция интерфейса на ввод пользователя.
— Эффективное управление асинхронными операциями с использованием RxJS.

➡️ Еще больше полезных книг — в нашем канале @progbook

🐸 Библиотека фронтендера

#буст

🚀 Redis представляет LangCache и Vector Sets — инструменты для ускорения AI-приложений

Redis, который мы все привыкли видеть как «быстрый кэш для бэка«» внезапно делает шаг в сторону AI — и это может пригодиться и нам, фронтендерам.

Недавно они выкатили два новых инструмента:

🔴 LangCache

Это умное семантическое кэширование — Redis сам понимает, что кэшировать, чтобы запросы к LLM (типа ChatGPT) летали быстрее.
Представьте: вы делаете чат с ИИ, и Redis помогает не гонять одинаковые вопросы по 100 раз, а отвечает из памяти, как будто сам ChatGPT запомнил всё.

🔴 Vector Sets

Теперь Redis может хранить и искать вектора — например, эмбеддинги от нейросетей. Это открывает дорогу к реализации умного поиска или рекомендаций прямо у себя, без тяжёлых внешних API.

А что фронту:

➡️ Быстрее и дешевле LLM-интеграции. Теперь можно кэшировать ответы от ИИ — это снижает задержки и экономит токены.

➡️ Интеллектуальные фичи — «похожие товары», «что-то на эту тему», и даже поиск по смыслу — становятся реальными без сложных бэков.

➡️ Всё это уже можно подключить через Node.js или edge-фреймворки типа Next.js / Remix.

🔗 Читать подробнее

🐸 Библиотека фронтендера

#свежак

🧩 Как сгенерировать нужный кусок кода за секунды: промпт для ChatGPT

Мелкие, но регулярные задачи вроде хуков, адаптивных блоков или забытого fetch с таймаутом съедают часы. Вместо бесконечного гуглинга — спроси у ИИ.

Один из наиболее практичных промптов из блога Requestly помогает именно с этим:

🔴 PROMPT:

Generate a code snippet for [specific task]

Например:

“Generate a code snippet for a custom React hook that syncs state with localStorage”

Чем полезен этот промпт:

1️⃣ Код появляется за пару секунд — без лишнего гуглинга.

2️⃣ ChatGPT объясняет, как и почему всё работает.

3️⃣ Подходит под любой стек — от React до Tailwind.

🐸 Библиотека фронтендера

#буст