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

#pixel_pause

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

🥳 Как сделать action-кнопки доступными всем

Кнопки действий часто прячут до наведения курсора: так карточки и списки выглядят чище. Но если действие важно, оно не должно зависеть только от hover.

❗️ Проблема простая: пользователь с клавиатурой может не увидеть кнопку, а на тачскрине навести курсор вообще нечем.

Что сделать:

⏺ для клавиатуры показывать кнопки через :focus-within, когда фокус попадает внутрь карточки

⏺ для тач-устройств использовать @media (hover: none) и сразу делать действия видимыми

📍 Навигация: [Вакансии]

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

#readme #css

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

🔥 4 привычки кодеров

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

но, я собрал 4 привычки адептов «чистого кода», (которые обычно все практикуют) 🤡

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

• Упарывание в сложную архитектуру
Сеньоры на ютубе обещают золотые горы, если внедрить микросервисы куда угодно. Итог: получаешь красивый overengineering-проект для мамы и 0 запущенных продуктов в срок, пока конкуренты клепают MVP на коленке.

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

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

Проблема в том, что ни один из этих путей не дает самого главного - скорости и проверки гипотез. Реальному рынку плевать на твой идеальный код за 3 дня. Бизнес предпочтет код от ИИ-агента за 5 минут, который уже завтра начнет приносить деньги.

Хочешь обкатанный на нас лично и 100х учениках метод, как перестать кодить руками и начать делегировать задачи автономным системам?

👉 Заходи сюда, но у нас осталось всего 4 места, набор идет до завтрашнего дня.

P. S. Если интересно еще что-нибудь почитать от меня, то заходите в «Азбуку Айтишника», там я рассказываю об айти-базе, также у меня там есть бесплатный гайд на 15 глав по ии-агентам

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

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

Разработчик интерфейсов — ~ 345 000 ₽, гибрид (Москва)

Frontend разработчик — до 140 000 ₽, удаленно (Самара)

Frontend разработчик — от 300 000 ₽ , удаленно (Минск)

➡️ Больше офферов в канале: @jsdevjob

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

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

😺 Физика для веб-игр и интерактивных 3D-сцен

Появился Crashcat — физический движок на чистом JavaScript для игр, симуляций и креативных веб-проектов.

Что умеет:

— rigid body simulation
— столкновения для convex shapes, triangle mesh и custom shapes
— constraints, motors и springs
— continuous collision detection для быстрых объектов
— collision filtering, sensors и события физики
— worker-friendly подход для тяжёлых симуляций
— интеграция с Three.js, Babylon.js, PlayCanvas или своим движком

✔️ Отдельный плюс — движок сделан с упором на tree shaking: можно подключать только нужные shapes и constraints, чтобы не тащить лишнее в бандл.

Подойдёт, если хочется добавить в веб не просто анимации, а полноценное физическое поведение: падающие объекты, столкновения, триггер-зоны, персонажей, транспорт или интерактивные 3D-сцены.

🔗 Ссылка на GitHub

⚡️ Кстати, на курс по ИИ-агентам осталось всего 4 места. Набор закрывается 30 апреля. Регистрация здесь 🔗

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

#stack #js #webgl

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

📎 5 неочевидных кейсов destructuring, которые приводят к багам

Destructuring используют везде: в React, API-ответах, хуках и обычных функциях. На базовом уровне всё просто, но в деталях часто прячутся ошибки.

6️⃣ Destructuring от undefined

const { name } = user;

Если user === undefined, код упадёт.

Безопаснее:

const { name } = user ?? {};

2️⃣ Default value не работает с null

const { name = 'Guest' } = user;

Значение по умолчанию сработает только для undefined. Если name === null, останется null.

3️⃣ Глубокий destructuring может сломаться

const { profile: { avatar } } = user;

Если profile отсутствует, будет ошибка.

Безопаснее:

const { profile: { avatar } = {} } = user;

4️⃣ Переименование — это не типизация

const { id: number } = user;

Это не означает, что id имеет тип number. Так создаётся новая переменная с именем number.

5️⃣ Rest забирает только оставшиеся поля

const { id, ...rest } = user;

В rest уже не будет id. Это часто приводит к неожиданному поведению при передаче props:

<Component {...rest} />

💡 Кстати, если смотрите не только в сторону фронтенда, но и в сторону новых прикладных навыков — на курс по ИИ-агентам осталось 4 места. Набор закрывается 30 апреля. Успеть на обучение 🔗

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

#hotfix

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

Отправь тому самому коллеге 🥰

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

#pixel_pause

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

💡 SVG filters: как устроены эффекты под капотом

SVG <filter> долго считались чем-то сложным и «дизайнерским». На практике это мощный инструмент, который даёт точный контроль над эффектами на уровне пикселей.

В этом гайде разобрали базу, с которой можно начать:

— как подключать SVG-фильтры
— как они применяются через CSS
— что такое filter region и почему обрезаются эффекты
— как работают примитивы (fe*) и цепочки эффектов
— важные нюансы (цветовые пространства, единицы измерения и т.д.)

Подходит, если хотите выйти за рамки blur() и drop-shadow() и начать делать нестандартные эффекты.

📌 Все примеры и полный разбор — по ссылке в статье 🔗

📍 Навигация: [Вакансии]

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

#read_watch

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

😊😊

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

#pixel_pause

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

🖥 Как на самом деле работает JavaScript под капотом

JavaScript — это не только язык. Всё, что связано с таймерами, файлами и асинхронностью, реализуется на уровне runtime.

Внутри карточек разобрали:

— чем отличается JS-движок от runtime
— как запускается код
— откуда берутся console.log и таймеры
— как устроен event loop
— как работает асинхронность через I/O

Это помогает понять, как именно исполняется код и откуда берётся поведение, к которому вы привыкли.

Все примеры и полный разбор — по ссылке в статье 🔗

📍 Навигация: [Вакансии]

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

#under_hood #js

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

🖥 Git 2.54: что нового в релизе

🔵 Проще править историю

Появилась команда git history (экспериментальная)

🔜 Позволяет:

— быстро поменять сообщение коммита
— разделить один коммит на два

Без перегруженного rebase -i и лишних шагов.

🔵 Хуки теперь можно хранить в конфиге

Раньше:

— копировать скрипты в каждый репозиторий
— или городить менеджеры

Теперь:

— описываете хуки прямо в .gitconfig
— можно подключать линтеры, проверки, сканеры

🔜 удобно для команд и пет-проектов

🔵 Меньше тормозов при работе с репо

Git начал эффективнее обслуживать репозиторий:

— оптимизирует pack-файлы
— снижает нагрузку без полного gc

🔜 заметно на больших проектах

🔵 Мелкие, но полезные улучшения

— git add -p стал удобнее
— git log -L теперь лучше ищет изменения
— retry при 429 Too Many Requests
— удобнее работа с трейлерами (--trailer)

🔗 Ссылка на блог

📍 Навигация: [Вакансии]

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

#release_digest

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

🤔 Вопрос с собеседования

Почему браузер перед запросом иногда отправляет OPTIONS?

👇 Правильный ответ (нажми, чтобы прочитать):

Это preflight-запрос в рамках CORS. Браузер сначала проверяет, разрешён ли запрос — и только потом отправляет основной.

🔴 Когда это происходит:

Если запрос «не простой»:
— есть Authorization или другие кастомные заголовки
— нестандартный Content-Type (например application/json)
— метод вроде PUT, PATCH, DELETE

🔴 Что важно понимать:

— это делает браузер автоматически
— сначала идёт OPTIONS, потом основной запрос
— если сервер не ответил правильно → запрос не уйдёт вообще

💡 Каждый запрос превращается в два, отсюда лишняя нагрузка и задержки.

👍 — знал/а
🔥 — стало понятнее

💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

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

#career_merge

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

Джуны могут спать спокойно 😂

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

#pixel_pause

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

😀 Как экономить трафик на API-запросах

Частая проблема — пользователь меняет фильтр или вводит новый запрос, а старые fetch всё ещё летят на сервер.

В итоге:

— Лишняя нагрузка на бэкенд
— Дублирующийся трафик
— Мешанина в результатах

🔵 Решение: отменяйте старые запросы через AbortController.

const c = new AbortController();
fetch('/search?q=cat', { signal: c.signal });

// отмена
c.abort();

Работает и в axios (v1.2+), и во всех современных браузерах.

📍 Навигация: [Вакансии]

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

#hotfix

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

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

Программист React.js — 70 000 - 220 000 р, удаленно (Переславль-Залесский)

Стажер Vue-developer — от 55 000 ₽, удаленно

Frontend-программист (nuxt/vue.js) — удаленно (Москва)

➡️ Больше офферов в канале: @jsdevjob

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

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

⌨️ Учиться кодить прямо в VS Code

Stanza — расширение для VS Code, которое переносит уроки по программированию прямо в редактор: теория, задания и обратная связь остаются в одном рабочем окне.

Что внутри:

— курсы по React, JavaScript, Python, PHP и другим темам
— структурированные уроки
— практические задания по коду
— мгновенная проверка решений
— доступ не только через VS Code, но и на других платформах

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

Расширение — по ссылке 🔗

📍 Навигация: [Вакансии]

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

#stack

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

🛠 Chrome DevTools из терминала

DevTools можно использовать не только через UI, но и как набор CLI-команд.

🔵 В карточках — как управлять страницами, эмулировать сеть и CPU, смотреть консоль и запросы, запускать Lighthouse и снимать performance-трейсы.

Полезно для отладки, аудитов и повторяемых проверок без лишних кликов.

↖️ Источник

📍 Навигация: [Вакансии]

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

#under_hood

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

🌍 Intl API: меньше библиотек, больше возможностей браузера

Даты, валюты, проценты, списки и сортировку часто форматируют через отдельные зависимости. Хотя во многих случаях это уже умеет встроенный Intl.

🔵 В статье разбирают, как с его помощью:

— красиво выводить даты и время
— форматировать цены, числа и единицы измерения
— показывать «вчера», «через 3 дня», «2 часа 5 минут»
— собирать списки в естественном виде
— правильно работать с plural forms
— сортировать строки с учётом локали

Intl полезен не только для мультиязычных сайтов. Даже в одном языке формат даты, валюты и чисел может отличаться по странам.

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

📍 Навигация: [Вакансии]

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

#read_watch

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

💡 Chrome DevTools: проверка без локальных шрифтов

Иногда интерфейс выглядит нормально только потому, что нужный шрифт уже установлен у вас локально. Опция Disable local fonts во вкладке Rendering отключает такие локальные совпадения.

Что это дает на практике:

— проверка, подключается ли web-font вообще
— понимание, какой шрифт используется по факту
— выявление проблем в @font-face и fallback-цепочке
— поиск визуальных расхождений между средами

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

📍 Навигация: [Вакансии]

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

#readme

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

🗓️ Уже через пару часов стартует вебинар!

Тема:

Как эффективно управлять контекстным окном LLM в мультиагентных системах и не сливать бюджет на токены

Ждем вас сегодня в 19:00 по московскому времени. Не пропустите начало, будет много практики!

👉 Успей занять место

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

💡 Простой способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools

📍 Навигация: [Вакансии]

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

#readme #css

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

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

#code_challenge

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

📁 React без лишней теории

Короткий конспект по React на 100+ страниц:

— компоненты, props, state
— формы, lifecycle, роутинг
— AJAX, производительность
— Redux, HOC, SSR, TypeScript

Это не учебник, а выжимка практики и решений из Stack Overflow.

⚡️ А если хотите параллельно зайти в новую прикладную тему — сейчас открыт набор на курс по ИИ-агентам. Набор закрывается 30 апреля, осталось 4 места. 👉 Занять место по ссылке

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

#readme #react

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

🔥 База по ИИ-агентам от научного сотрудника Сколтеха и НИУ ВШЭ

Знакомьтесь, Екатерина Трофимова. Кандидат компьютерных наук, ресерчер в Центре ИИ Сколтеха и лаборатории LAMBDA. Она объединяет глубокую академическую экспертизу и практику: знает, как ИИ-системы устроены «под капотом» и как встроить их в реальные проекты (в т.ч. для Т-банка).

Мы попросили Екатерину собрать список мастхев материалов для тех, кто хочет проектировать агентов в проде. Сохраняйте список.

🛠 Стек и фреймворки:

DSPy — алгоритмическая оптимизация промптов (вместо ручного подбора слов).

Semantic Kernel и LangMem — инструменты для управления сессионной и долгосрочной памятью.

MCP (Model Context Protocol) — новый стандарт от Anthropic для подключения агентов к вашим БД и локальным файлам.

📖 Документация, которую нужно знать:

Anthropic Prompt Caching — как кэшировать контекст и радикально резать косты на API.

OpenAI Agents SDK / Cookbook — лучшие практики работы с памятью.

Augment — платформа для оптимизации работы ИИ-агентов и контроля токенов.

🔬 Хардкорные статьи и препринты (на выходные):

Lost in the Middle — почему LLM «слепнут» на длинных текстах и забывают середину контекста.

How Do Coding Agents Spend Your Money? — куда улетает бюджет при работе автономных кодинг-агентов.

MemGPT — архитектура операционной системы для LLM с иллюзией бесконечной памяти.

InjecAgent / AgentSentry — всё о безопасности и защите агентов от инъекций в промпты.

Екатерина Трофимова — один из ключевых экспертов нашего курса AgentOps. На своих лекциях она детально разбирает, как проектировать инструменты для агентов, как агент принимает решения о вызове инструментов и какие ограничения возникают в реальном проде

🎁 Акция в честь старта продаж!

Прямо сейчас при покупке Инженерного трека вы получаете полный доступ к материалам курса «Разработка ИИ-агентов» в подарок.

👉 Забрать 2 курса по цене 1 и начать обучение

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

💡 Шпаргалка по REST API для начинающих

Шесть фундаментальных принципов, которые служат строительными блоками архитектуры REST API:

6️⃣ Клиент-серверная архитектура
2️⃣ Взаимодействие без сохранения состояния
3️⃣ Возможность кэширования
4️⃣ Многоуровневая система
5️⃣ Поддержка кода по требованию
6️⃣ Унифицированный интерфейс

📍 Навигация: [Вакансии]

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

#readme

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

💬 Откуда вы берете полезный IT-контент

Интересуют источники, где не только новости, но и практика, разборы и реальные кейсы.

Напишите в комментариях:

— 1–2 канала / автора
— где читаете (TG / Habr / блог / X / GitHub)
— тематика (React, JS, perf, архитектура, CSS и т.д.)

Формат:
@ник — платформа, тема

Соберём список каналов, которые не хочется мьютить 💔

📍 Навигация: [Вакансии]

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

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

🔗 JavaScript: от кода к системной разработке

Внутри:

— архитектура и организация кода
— тестирование: модульное и интеграционное
— отладка и типичные ошибки
— сборка, CI/CD и автоматизация
— подходы к разработке, которые экономят время на дистанции

📍 Навигация: [Вакансии]

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

#readme #javascript

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

🧩 React под рукой: вся база в одной шпаргалке

Что внутри:

— JSX и структура React-элементов
— компоненты: props, children, условный рендеринг
— списки, memo и Context
— все ключевые хуки: от useState до useMemo
— class components и lifecycle (на случай легаси)
— error boundaries и обработка ошибок

Подойдёт новичкам как карта React и тем, кто уже работает и хочет быстрее ориентироваться.

📍 Навигация: [Вакансии]

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

#cheat_sheet #react

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

💻 JavaScript с нуля: понятный вход в разработку

Нашли хороший курс для новичков во фронтенде.

Что внутри:

🔜 синтаксис, переменные, типы данных
🔜 функции, условия, циклы
🔜 работа со строками и базовой логикой

Как устроено обучение:

— всё прямо в браузере: редактор, консоль, тесты
— теория сразу закрепляется задачами
— можно посмотреть решения и разобрать ошибки
— AI подсказывает по ходу, если возникают вопросы

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

🔗 Курс по ссылке

📍 Навигация: [Вакансии]

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

#stack

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

😱 Почему одни анимации «живые», а другие — нет

Один из ключевых приёмов — Squash & Stretch. Объект слегка «деформируется» в движении — и интерфейс начинает ощущаться физическим.

Где это работает:

— SVG-иконки (стрелки, кнопки)
— hover-эффекты
— микровзаимодействия

💡 Лайфхаки:

— не просто увеличивайте элемент → слегка «сужайте» при растяжении
— держите амплитуду в районе 25–50%
— spring-анимации выглядят естественнее
— учитывайте prefers-reduced-motion

⚙️ Минимальный пример (CSS)

<button class="btn">
  <svg viewBox="0 0 24 24" class="arrow">
    <path class="shaft" d="M 5,12 h 14" />
    <path class="tip" d="M 12,5 l 7,7 l -7,7" />
  </svg>
</button>
@media (prefers-reduced-motion: no-preference) {
  .shaft, .tip {
    transition: d 300ms;
  }

  .btn:hover .shaft {
    d: path("M 5,12 h 17"); /* растягиваем */
  }

  .btn:hover .tip {
    d: path("M 15,7 l 7,5 l -7,5"); /* «сужаем» наконечник */
  }
}

❌ в Safari это не работает.

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

📍 Навигация: [Вакансии]

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

#readme

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