Предзагрузка данных с помощью Tanstack Query в серверном компоненте.

➡️ @byFrontDeveloper | дать буст

Крутой трюк для автоматизации задач в VSCode 😐

Запускай сервер разработки при открытии редактора

Видео переведено нейросетью

➡️ @byFrontDeveloper | дать буст

Как эффективно отобразить 100 000 элементов в списке?

➡️ @byFrontDeveloper | дать буст

Оформите свои идеи в HTML и CSS с помощью этого генератора Flexbox и Grid Layout.

→ https://layout.bradwoods.io

➡️ @byFrontDeveloper | дать буст

Наткнулся тут на одну прикольную штуковину — react-datepicker

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

✓ С поддержкой перевода на любой язык
✓ Настраивается с помощью props
✓ Легко создавайте диапазоны дат

Код простейший: пару строк — и у вас готовый, симпатичный пикер. Документация понятная, примеров море. Обязательно попробуйте 😎

→ npm install react-datepicker

➡️ @byFrontDeveloper | дать буст

ПРЕКРАТИТЕ допускать эту ОШИБКУ на своих сайтах 😡

Вы можете уменьшить вес изображений до 90%, сохранив их внешний вид

Squoosh — ваш верный помощник в этом деле

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

➡️ @byFrontDeveloper | дать буст

Ловите лайфхак: GitHub + VS Code - быстрое редактирование кода в вашем репозитории прямо в браузере

Для этого нужно заменить в ссылке .com на .dev. Или просто нажать на клавиатуре «.».

Редактор будет абсолютно идентичен вашему редактору на локальной машине (если у вас включена синхронизация с GitHub аккаунтом): цветовая палитра, подсветка синтаксиса, плагины и т.д.

Пользуемся и делимся с теми, кто не в теме

➡️ @byFrontDeveloper | дать буст

Ищете SVG-иконки для своих проектов?

На сайте svgl.app вы найдете десятки иконок с различными вариантами экспорта и настройки

➡️ @byFrontDeveloper | дать буст

HTML атрибут translate

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

Может иметь одно из двух значений: yes или no

Очень полезно для брендов или названий компаний:

<footer>
  <p translate="no"> Company Name </p>
</footer>

➡️ @byFrontDeveloper | дать буст

Добавьте анимации на ваш сайт с одной строкой кода 😌

Это библиотека, которая буквально одной строкой добавляет анимации на ваш сайт

✓ Работает с React, Vue, Angular, Svelte...
✓ Автоматически анимирует элементы
✓ Использует CSS для лучшей производительности
✓ Нулевая настройка

Никакой сложной настройки или кучи кода — всё максимально просто и быстро

👉 Пользуйтесь: https://auto-animate.formkit.com/

➡️ @byFrontDeveloper | дать буст

Хочешь применить неоновый эффект к своим текстам?

→ Тебе нужен только HTML, чтобы добавить атрибут data-text, и CSS, чтобы стилизовать эффект.

→ Этот атрибут позволяет добавлять дополнительное содержимое к элементу, что идеально подходит для визуальных эффектов.

Пример: https://codepen.io/carmenansio/pen/XWBKLqm

➡️ @byFrontDeveloper | дать буст

Наткнулся на крутую штуку — Project Wallace

Это сервис, который анализирует качество твоего CSS-кода

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

В итоге получаешь чёткий список того, что нужно поправить, чтобы код стал чище и быстрее

👉 https://projectwallace.com/css-code-quality

➡️ @byFrontDeveloper | дать буст

Бесплатное API для определения местоположения IP-адреса

50 000 бесплатных запросов в месяц

Работает с JavaScript, Python и другими языками программирования

👉 https://ipinfo.io

➡️ @byFrontDeveloper | дать буст

Bulma — современный CSS-фреймворк на основе Flexbox.

Он не включает в себя javaScript и поэтому легко встраивается в разные проекты.

➡️ @byFrontDeveloper | дать буст