Недооцененные возможности CSS grid: подробное руководство с множеством интерактивных демонстраций

Свежий взгляд на CSS grid template areas и на то, как сегодня использовать весь их потенциал.

👉 Читать

➡️ @tips_frontend

Set в JavaScript: теперь с новыми суперспособностями

Узнайте о грядущих обновлениях Set в JavaScript, включая новые методы union, intersection, difference и другие. Подробный обзор и примеры использования.

😒 Читать статью

➡️ @tips_frontend

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

➡️ @tips_frontend

🔫 VS Code на стероидах: 15 полезных расширений для фронтендера

Мы отобрали 15 плагинов, которые покрывают все аспекты современной веб-разработки: от работы с HTML до интеграции с Figma и Docker.

⛓ Читать статью

➡️ @tips_frontend

👩‍💻 React 19: краткий обзор новых фич от Vercel

Изучите React 19 и узнайте, как начать использовать библиотеку уже сегодня.

👉 Читать

➡️ @tips_frontend

🕺 25 полезных HTML тегов, элементов и атрибутов, которые должен знать каждый фронтендер

В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.

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

➡️ @tips_frontend

Простой способ отладки/разработки стилей для различных состояний элементов с помощью Dev Tools: на заметку фронтенд-разработчику

➡️ @tips_frontend

Анимации на CSS: 13 библиотек для креативных решений

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

🔗 Читать статью

➡️ @tips_frontend

Понимание компилятора React

Новый экспериментальный инструмент от команды React автоматизирует настройку производительности. Но стоит ли вам его использовать и как он работает «под капотом»? Рассказывает Tony Alicea, преподаватель курсов на Udemy и Pluralsight.

👉 Читать

➡️ @tips_frontend

Коллекция современных руководств по производительности веб-сайтов

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

👉 Читать

➡️ @tips_frontend

Источники вдохновения для UI/UX-дизайнеров и фронтендеров: 50 полезных ресурсов

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

• Websitevice – новая, часто обновляемая галерея с широким спектром примеров веб-дизайна. Удобная фильтрация по категориям.
• One Page Love – коллекция высококачественных одностраничных сайтов и лендингов.
• Landingfolio – большая коллекция красивых лендингов, оптимизированных для маркетинга.
• Lapa Ninja – тщательно отобранные примеры веб-дизайна с полными скриншотами страниц.
• Godly – обширная галерея с анимированными превью сайтов, мобильных и десктопных приложений.
• Siteinspire – объемная коллекция лучших веб-дизайнов с удобной сортировкой.
• Maxibestof – огромная подборка примеров, курируемая опытным дизайнером.
• InspoVault – фокусируется на качестве, а не количестве примеров, в основном в минималистичном и креативном стилях.
• Landing Gallery – специализируется на эффектных лендингах.
• SEE + SAW – галерея с динамичными видеопревью сайтов.


➡️ @tips_frontend

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

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

➡️ @tips_frontend

Простой кейс создания закругленных углов в CSS

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

➡️ @tips_frontend

Простой способ визуализации списка данных с помощью console.table(): на заметку фронтенд-разработчику

➡️ @tips_frontend

⏪7 инструментов для повышения производительности веб-приложений ⏩

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

📕 Читать статью

➡️ @tips_frontend

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

➡️ @tips_frontend

Отложенная загрузка некритических модулей для повышения производительности загрузки страниц в действии: на заметку фронтенд-разработчику

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

➡️ @tips_frontend

Как избежать булевых значений в сигнатуре функции JavaScript

Сложно не согласиться с автором, ведь options object или enums почти всегда являются лучшим выбором.

⏩ Читать статью

➡️ @tips_frontend

Мини-гайд по добавлению изображения с помощью HTML

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

И ответ — да! HTML имеет много опций и достаточно мощен, чтобы справиться с этой задачей. В статье рассказано о том, что следует учитывать при добавлении изображения с помощью HTML.

⏩ Читать

➡️ @tips_frontend

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

⏩ Используйте field-sizing: content, чтобы текстовая область автоматически изменяла размер в соответствии с ее содержимым.
⏩ Используйте единицы измерения lh, чтобы установить высоту в вычисленных единицах высоты строки шрифта.

➡️ @tips_frontend