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

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

👋 AI-фишки, которые стоит попробовать

Генерация кода, тестов, рефакторинг и документация — всё в одном репозитории.

➡️ Awesome AI for Programmers — must-have закладка для разработчика.

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

#буст

⚡️ Svelte под капотом

Подборка статей для быстрого понимания, чем Svelte отличается и где он выигрывает:

⭐️ Svelte, Astro, Qwik & Solid: обзор фреймворков

➡️ Обзор топ-фреймворков 2025 года. Почему Svelte остаётся одним из самых лёгких и быстрых.

⭐️ Миграция на Svelte 5 и новый CLI

➡️ Переход без боли, автоматические codemods и новый интерфейс.

⭐️ Обновления Svelte/SvelteKit

➡️ Асинхронные компоненты, Remote Functions и runes с приростом производительности.

⭐️ Svelte 4 vs Qwik

➡️ Технический разбор: компиляция (Svelte) vs Resumability (Qwik), плюсы и минусы.

⭐️ Svelte против React

➡️ Простое сравнение: чем отличается подход Svelte без виртуального DOM от React.

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

#свежак

🧩 Скрытый баг в списке

{items.map((item, index) => (
  <input
    key={index}
    defaultValue={item.name}
  />
))}

На тесте замечено:

— При удалении элемента данные «съезжают» — значения в инпутах не совпадают с item.name.

— Иногда при редактировании одного поля меняется значение в другом.

❓ В чём настоящая проблема? Отвечайте правильным эмодзи 👋

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

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

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

Frontend-разработчик — от 250 000 ₽, гибрид (Москва)

Middle React Developer — удаленно

JavaScript Developer — гибрид (Москва)

Frontend-разработчик (TypeScript) — от 150 000 до 200 000 ₽, офис (Санкт-Петербург)

Junior Frontend Developer (React) — от 160 000 ₽, офис/гибрид (Москва/Санкт-Петербург)

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

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

#свежак

⚛️ Шпаргалка по ключевым фичам React

В гайде собраны основные примеры: server components, useOptimistic, работа с формами, ошибки, контекст и многое другое.

🔥 Удобный способ быстро освежить в памяти ключевые фичи без перелопачивания доков.

Ниже — полная шпаргалка с примерами, которую удобно держать под рукой 📌

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

#буст

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

#буст

👀 Как находить layout thrashing и фиксить

Иногда интерфейс начинает лагать: скролл рвётся, анимации дергаются. Причина часто в layout thrashing — код заставляет браузер многократно пересчитывать разметку.

Что это:

const h = el.offsetHeight; // пересчёт
el.style.height = (h + 10) + "px"; // новый пересчёт

💡 Если такое внутри scroll/resize или цикла → интерфейс задыхается.

Как найти:

➡️ DevTools → Performance: красные "Layout".

➡️ Console: Forced reflow warnings.

➡️ Rendering → Layout Shift Regions подсветят проблемные зоны.

Как исправить:

— Кэшировать значения layout;

— Использовать requestAnimationFrame;

— Обновлять классы пачкой, а не inline-стили;

— Для крупных проектов — fastdom (разделяет read/write).

📌 В 30% случаев «необъяснимые» лаги во фронте — это forced reflow.

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

#буст

Скинь тому самому другу 😁

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

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

❌ Генератор моков для API

Не всегда есть готовый бэкенд, а верстать и тестировать надо. Для этого можно использовать промпт:

You are a mock API generator.
Given an API schema (OpenAPI or JSON example), create realistic mock data.
– Include edge cases (empty, very long strings, invalid values).
– Output JSON arrays I can plug into MSW/Mock Service Worker.

💡 На выходе — готовые данные для разработки и отладки. Причём не только «идеальные», но и граничные кейсы: пустые строки, слишком длинные значения, некорректные типы.

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

#буст

📌 Сборник алгоритмов на JavaScript

В этом репозитории собраны решения на все случаи: от базовых задач со строками и массивами до продвинутых алгоритмов сортировки и поиска.

➡️ Ресурс подойдёт для практики, подготовки к собеседованиям или как удобная шпаргалка по ключевым алгоритмам.

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

#буст

🔵 Фишка инструмента: Astro

Astro — фреймворк для сайтов «content-first», который по умолчанию отправляет в браузер только HTML, почти без JavaScript. Главная фишка — скорость: страницы загружаются мгновенно, а JS подключается только там, где он реально нужен.

Чем полезен:

— Поддержка компонентов React, Vue, Svelte и даже Solid в одном проекте

— Удобен для блогов, документации и маркетинговых страниц

— Большая экосистема плагинов (Markdown, Tailwind, CMS)

💡 Пример:

Весь сайт статичный, но компонент Counter подгружает JS только для себя:

<Counter client:load />

Итог: страница летает, а лишнего кода в бандле нет.

🔗 Ссылка на GitHub

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

#буст

📚 FrontendBooks — канал с лучшими книгами по FrontEnd технологиям!

1️⃣ JavaScript
2️⃣ React
3️⃣ Angular и Vue
4️⃣ HTML и CSS

Подпишитесь и скачивайте книги: @frontendbook

Реклама. Киренкина Марина Дмитриевна, ИНН 345702417736. Erid 2VtzqwJF3ej