Заметки по Css для профессионалов

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

Трюк для повышения производительности в React: используйте useDeferredValue, чтобы обновлять значения без блокировки взаимодействия с пользователем.

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

12 простых советов по чистоте кода

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

Шпаргалка по единицам CSS

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

Улучшите свои повседневные задачи с помощью этих инструментов искусственного интеллекта ⚫️

1. Логотип - http://Logomaster.ai
2. Изображения - http://Stockimg.ai
3. Письма - http://Cohesive.so
4. Формы - http://Al.feathery.io
5. Здоровье - http://Docus.ai
6. электронная почта - http://Emailmagic.ai
7. дизайн - http://Diagram.com
8. резюме - http://ResumAl.com
9. поиск - http://Gptgo.ai
10. заметки - http://Reflect.app
11. блоги - http://Autoblogger.ai
12. отладка - http://Jam.dev/jamgpt
13. Встречи - http://Loopinhq.com
14. Резюме - http://Spoke.ai
15. Видео - http://Invideo.io

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

Предзагрузка данных с помощью 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 | дать буст