Простой способ изменения числового представления упорядоченного списка в CSS: на заметку фронтенд-разработчику


➡️ @tips_frontend

Как устроена асинхронность в JavaScript: гайд для фронтенд-разработчика

⏩ Что такое Event loop и очередь событий?
⏩ При чём здесь Web API?
⏩ Как работают промисы и async/await?

🔜 Читать

➡️ @tips_frontend

HTML-элемент <meter> в действии: на заметку фронтенд-разработчику

➡️ @tips_frontend

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

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

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

▶️ Смотреть

➡️ @tips_frontend

React + структуры данных = суперкод: 7 примеров для практики

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

🔜 Читать статью

➡️ @tips_frontend

Простой способ сортировки без учета регистра в JavaScript: на заметку фронтенд-разработчику

➡️ @tips_frontend

Знаете ли вы, что мы можем разместить кнопку отправки формы за пределами формы?

В большинстве случаев кнопка отправки находится внутри тега <form>, но иногда, из-за особенностей макета или других причин, её можно разместить снаружи. Просто используйте атрибуты form и id.

➡️ @tips_frontend

🔥 Awesome React — поддерживаемый список ресурсов, относящихся к экосистеме React.

Начав свою историю как коллекция из нескольких сотен пунктов, с тех пор её сократили до менее чем 200 за счет удаления всех устаревших проектов и сосредоточения внимания на самом главном.

🔜 Awesome React Components — еще одна отличная коллекция для добавления в закладки.

➡️ @tips_frontend

Что нужно знать о современном CSS: на заметку фронтенд-разработчику

Подборка современных дополнений к CSS: container queries, nesting, scroll-driven animations, view transitions, :has() и многие другие.

🔜 Читать

➡️ @tips_frontend

Знаете ли вы, почему мы не можем создавать новые инстансы из стрелочной функции в JavaScript? 👆

➡️ @tips_frontend

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

➡️ @tips_frontend

Простой кейс реализации паузы/старта видео в зависимости от состояния видимости страницы

🔜 Поиграть можно здесь

➡️ @tips_frontend

Не нужно ждать изменений от backend API. Мы можем легко переопределить ответ на любой запрос локально, чтобы продолжить работу с помощью Dev Tools

➡️ @tips_frontend

Адаптивные SVG на практике

Расширьте свои знания о работе с SVG, чтобы получить масштабируемый и адаптивный интерфейс.

▶️ Читать

➡️ @tips_frontend

🔄 Создание полосатого индикатора выполнения на CSS без использования какой-либо сторонней библиотеки: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Простой и правильный способ отображения таймера с помощью tabular-nums: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Простой способ добавить кастомные проверки форм с помощью JavaScript-метода setCustomValidity(): на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend

Мы не можем изменить цвет внешней SVG-иконки с помощью свойств fill/storke, но есть способ сделать это с помощью CSS mask

➡️ @tips_frontend

Использовать новые функции CSS и применять резервные стили в неподдерживаемых браузерах можно с помощью правила supports. То же самое можно сделать и в JavaScript

➡️ @tips_frontend

В Chrome Dev Tools мы можем сохранить любой элемент или объект в качестве глобальной переменной, что может быть очень удобно при отладке или быстром анализе данных

➡️ @tips_frontend