Особенно после трех дней выходных 🌟

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

#pixel_pause

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

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

#code_challenge

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

🔗 transform вместо left/top: анимации без лагов

Если двигать элемент через left или top, браузер пересчитывает раскладку страницы:

.element {
  position: absolute;
  left: 0;
  transition: left .3s;
}

.element:hover {
  left: 100px;
}

Такой подход может вызвать layout → paint → composite и просадить FPS.

✅ Лучше двигать через transform:

.element {
  transition: transform .3s;
}

.element:hover {
  transform: translateX(100px);
}

transform обычно не ломает layout и чаще уходит на этап composite, поэтому анимация получается плавнее.

🔜 Что это даёт:

— меньше перерисовок
— выше FPS
— плавнее UI на слабых устройствах

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

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

#readme #css

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

❓ Почему TypeScript забывает проверенный тип

Type guard и assertion function помогают TypeScript понять тип данных из неизвестного источника: например, после JSON.parse() или ответа API. Разница — в области действия.

🟡 Обычный type guard сужает тип только внутри условия:

function isUser(value: unknown): value is User {
  return typeof value === "object" && value !== null && "name" in value;
}

if (isUser(data)) {
  data.name; // data: User
}

data; // снова исходный тип

🟡 А assertion function работает иначе:

function assertIsUser(value: unknown): asserts value is User {
  if (typeof value !== "object" || value === null || !("name" in value)) {
    throw new Error("Expected User");
  }
}

assertIsUser(data);

data.name; // data: User

💡 Если assertion function не выбросила ошибку, TypeScript считает значение проверенным дальше по текущей области видимости.

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

🔗 Источник

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

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

#under_hood

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

🥳 Фронтенд-неделя: Firefox, Git, TypeScript и AI-агенты

В новом выпуске собрали темы, которые уже влияют на рабочий стек разработчика: от браузерных API и Git до редакторов с AI-агентами.

Внутри:

🆚 что нового в Firefox 150
🆚 зачем смотреть на Git 2.54
🆚 как Zed запускает параллельных агентов
🆚 что меняется в TypeScript 7.0 Beta
🆚 почему снова обсуждают адаптивные картинки
🆚 что значит Temporal в Node.js по умолчанию

🔗 Ссылка

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

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

#read_watch

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

🧩 git fetch vs git pull: в чём разница

git fetch просто забирает свежие изменения с удалённого репозитория и обновляет ссылки на remote-ветки. Локальная ветка и ваши текущие изменения при этом не трогаются.

git fetch

А git pull делает больше: сначала выполняет fetch, а затем сразу применяет изменения к текущей ветке — обычно через merge, иногда через rebase, если так настроено.

git pull

📌 Коротко:

— fetch — посмотреть, что изменилось
— pull — забрать и сразу влить в свою ветку

Если хотите сначала оценить изменения без риска получить конфликты — используйте git fetch.

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

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

#readme

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

⌨️ Учиться кодить прямо в 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 и начать обучение

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

🧩 components / hooks / utils — структура, которая стареет первой

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

🔴 В карточках разобрали идею Vertical Codebase: когда код группируют не по типу файла, а по смыслу — вокруг фич, доменов и зон ответственности.

В оригинальной статье больше нюансов: про shared-код, публичные интерфейсы модулей, границы между вертикалями и монорепы 🔗

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

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

#under_hood

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

🦾 Почему ваши AI-продукты на базе LLM ломаются (и как это чинить)?

Выкатили ИИ-фичу в прод, а она галлюцинирует, падает или выдает мусор? Приглашаем на открытый вебинар, где разберем реальную боль внедрения LLM-агентов и научимся делать так, чтобы «всё работало».

🗓️ Когда: 7 мая в 19:00 МСК
⏱️ Формат: 60 минут мяса + 30 минут ответов на ваши вопросы

🧑🏻‍💻 Кто вещает: Эмиль Сатаев — Backend Platform Developer (8+ лет в разработке). Человек, который своими руками внедряет LLM и агентные системы в реальные коммерческие сервисы.

🎁 Главный бонус для онлайна:
Только участникам прямого эфира подарим уникальный промокод на скидку 10.000 ₽ на большой курс AgentOps.

👉 Занять место на вебинаре

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

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

#pixel_pause

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

🪩 alg0 dev — визуализатор алгоритмов

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

— Big O, рекурсия, two pointers, sliding window
— stack, queue, linked list, hash table, heap
— сортировки: quick, merge, heap, radix и другие
— поиск: binary, linear, jump, interpolation
— графы: BFS, DFS, Dijkstra, Prim, topological sort
— DP: Fibonacci, Knapsack, LCS
— backtracking: Sudoku, N-Queens, maze pathfinding

🔗 Ссылка

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

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

#stack

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

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

Как пробросить ref в кастомный React-компонент?

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

Зависит от версии React.

В React 18 и ниже ref в кастомный функциональный компонент пробрасывают через forwardRef:

const Input = React.forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});

В React 19+ ref можно принимать как обычный prop:

function Input({ ref, ...props }) {
return <input ref={ref} {...props} />;
}

🔜 Идеальный короткий ответ:

Раньше для проброса ref использовали forwardRef, потому что ref не попадал в props. В React 19 ref можно передавать как обычный prop, но в проектах на React 18 и ниже всё ещё нужен forwardRef.

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

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

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

#career_merge

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

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

#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

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