Container Queries в действии

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

HTML, используемый в этом примере:

<button class='responsive-button'>
  <img src='cart.png' alt='...'>
  <span class='text'>ADD TO CART</span>
</button>

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

➡️ @byFrontDeveloper | #tips

Паттерны проектирования jаvascript

Автор: Ди Франческо Уго
Год издания: 2025

⬇️ Скачать книгу

➡️ @byFrontDeveloper | #книги

Тестирование React-приложений на практике

Запись 5-часового воркшопа о TDD и тестировании React приложений, в рамках которого Александр Беспоясов написал конвертер валют и покрыл его тестами. Вы узнаете, как:

⏩ Выделять и тестировать бизнес-логику
⏩ Разделять код на модули так, чтобы их было удобно тестировать
⏩ Применять разные стратегии моков, готовить стабы и тестовые данные
⏩ Тестировать сайд-эффекты и React-хуки
⏩ Работать с асинхронными функциями и тестировать их
⏩ Подключать сторонние библиотеки через адаптеры для удобного тестирования

📺 Cсылка на курс: YouTube

➡️ @byFrontDeveloper | #курсы

🈳 Отличный источник после изучения официальной документации по React

Основные темы включают:
🟡Frameworks & Build Tools
🟡 Project Standards for High-Quality Code
🟡 Ecosystem
🟡 Accessibility & Semantics
🟡 Styling & UI Libraries
🟡 Proficiency with the Hooks API
🟡 State Management in React Applications
🟡 React Performance & Optimization

⛓Ссылка: тут

➡️ @byFrontDeveloper | #ресурсы

Огромное руководство по стилю JavaScript 👩‍💻

Сохраняй и делись с друзьями!

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

kaggle — сайт, на котором собраны бесплатные курсы по программированию для начинающих. Среди направлений: Python, машинное обучение, SQL.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Основы web-дизайна. Методика проектирования

Автор: Нагаева И. А.
Год издания: 2021

⬇️ Скачать книгу

➡️ @byFrontDeveloper | #книги

Курс TypeScript

В данном видеокурсе мы с вами рассмотрим возможности языка строгой типизации - TypeScript. Разберём его основные фишки и ключевые отличия от JavaScript. Изучим такие понятия, как перечисления (Enum), интерфейсы, пространства имён. И в дополнение, рассмотрим набор нативных утилит, которые предоставляет сам язык.

📺 Cсылка на курс: YouTube

➡️ @byFrontDeveloper | #курсы

7 способов скрыть элемент с помощью CSS: на заметку фронтенд-разработчику

➡️ @byFrontDeveloper | #ресурсы

Образовательный сайт для обучения и практики SQL-запросов, предлагающий задачи и проверки в реальном времени. 🔥

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Простая шпаргалка по поисковой оптимизации для веб-разработчика

➡️ @byFrontDeveloper | #ресурсы

Типы данных JavaScript под капотом: гайд для фронтенд-разработчика

📖 Читать: ссылка

➡️ @byFrontDeveloper | #cтатьи

Шпаргалка по React 19 от Kent C Dodds, создателя Epic React

Это отчасти шпаргалка, отчасти краткое напоминание о некоторых новых возможностях React 19 с простыми примерами кода.

➡️ @byFrontDeveloper | #ресурсы

У меня для вас реально превосходная вещь!

Библиотека на JavaScript для генерации PDF-документов 👩‍💻

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

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Лучше уже не будет!

JavaScript-библиотека для создания анимаций. Она предоставляет мощные и гибкие инструменты для анимации HTML, SVG, CSS и объектов JavaScript.

Пример использования:

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  duration: 800
});

Этот код создаёт анимацию, в которой элемент div перемещается на 250px вправо и поворачивается на один полный оборот.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

Полное руководство по Web Push API

📖 Читать: ссылка

➡️ @byFrontDeveloper | #cтатьи

Современный учебник JavaScript 👩‍💻

Перед вами один из самых популярных и подробных русскоязычных ресурсов для изучения JS, как для новичков, так и для тех, кто хочет углубить свои знания.

⛓ Ссылка: тык

➡️ @byFrontDeveloper | #ресурсы

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

.search {
    animation: shrink;
    animation-timeline: scroll();
    animation-range: 0 calc(var(--header-height) * 0.5);
}
@keyframes shrink {
    to { width: calc(100% - var(--button-size)); }
}

Переменная --header-height используется для определения высоты контейнера заголовка. Вы можете использовать это для animation-range, применяемого в различных анимациях прокрутки 

В качестве другого примера, вы можете анимировать появление тени (box-shadow) на заголовке, как только поиск зафиксирован 

header {
      animation: shadow;
      animation-timeline: scroll();
      animation-range:
          var(--header-height)
          calc(var(--header-height) * 1.5);
}
@keyframes shadow {
    to { box-shadow: 0 5px 10px hsl(0 0% 0%); }
}

Все это работает на основе scroll() в animation-timeline, который подключается к прокрутке страницы. И затем используя --header-height в различных animation-range 

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

<a href="#">Back to top</a>

CSS :focus-within используется для активации плавной прокрутки только для этого взаимодействия.

html:focus-within {
    scroll-behavior: smooth;
}

➡️ @byFrontDeveloper | #ресурсы

Нашел классную штуку для фронтендеров — BigDevSoon

Это платформа с 100 челленджами для прокачки навыков. Здесь есть задачи на любой вкус: от верстки до сложных штук с JavaScript, анимациями и прочими веб-фишками.

Что круто:
⏩Разные уровни сложности — подойдет и новичкам, и профи.
⏩Фокус на практику, а не сухую теорию.
⏩Реальные задачи, которые развивают навыки, применимые в реальной работе.

➡️ @byFrontDeveloper | #ресурсы

Мало кто по-настоящему понимает Event Loop в JavaScript 🧑‍💻

Этот ресурс объясняет его пошагово и наглядно.

Вставь свой код, и он покажет, как всё выполняется:

🔜 https://vault-developer.github.io/event-loop-explorer/

➡️ @byFrontDeveloper | #ресурсы

Пожалуй самый большой список из 1000 вопросов для собеседования по JavaScript! 🔥

Он создан для разработчиков, которые готовятся к техническим интервью, а также для тех, кто хочет улучшить свои знания JavaScript

Кратко что внутри:

🟡Современные фичи ES6+
🟡Вопросы по DOM и BOM
🟡Связь JavaScript с браузером
🟡Вопросы по фреймворкам и библиотекам (React, Angular, Vue)
🟡Асинхронное программирование
и тд.

*️⃣Репозиторий постоянно обновляется, поэтому это отличный ресурс для изучения и подготовки к интервью.

🔜 https://github.com/sudheerj/javascript-interview-questions?tab=readme-ov-file

➡️ @byFrontDeveloper | #ресурсы