Frontend Developer

Ленивая загрузка встраиваемых элементов (например, YouTube-видео) Внешние встраиваемые элементы (YouTube, кнопки Facebook и т.п.), которые находятся за пределами видимой области экрана, могут тормозить загрузку страницы. Чтобы этого избежать, можно добавить атрибут loading="lazy" в тег <iframe>. Тогда содержимое будет подгружаться только когда попадёт в область видимости. Пример:

<iframe
  src="https://youtube.com/embed/i70mF7HXS0A"
  width="560"
  height="315"
  loading="lazy">
</iframe>

С декабря 2023 года loading="lazy" для <iframe> поддерживается всеми современными браузерами. Для старых браузеров можно использовать библиотеку lazysizes, чтобы реализовать такую же отложенную загрузку. ➡️ @byFrontDeveloper

Наконец-то это добралось до HTML и CSS Теперь можно стилизовать элементы <select> Без библиотек и зависимостей. На видео показано, как это сделать в несколько строк кода ➡️ @byFrontDeveloper

Большое обновление для CSS-разработчиков Теперь можно проверять совместимость через Can I Use прямо в терминале с помощью caniuse-cli. Не нужно открывать браузер, и оно работает офлайн без интернета. Если вдруг не в курсе, Can I Use это основной инструмент для проверки поддержки CSS, HTML и JavaScript в браузерах. - проверки совместимости прямо из терминала - работает офлайн, без подключения к интернету - ускоряет разработку и отладку Больше никакого переключения вкладок ✏️ Установить можно отсюда : https://github.com/bramus/caniuse-cli ➡️ @byFrontDeveloper

15 публичных API для фронтенд-проекта - OpenWeatherMap API - Genderize .io - Open Food Facts - Slack API - PayPal API - Trello API - NASA API - GitHub API - Stripe API - Reddit API - Twilio API - Shopify API - OneDrive API - Dropbox API - VirusTotal API ➡️ @byFrontDeveloper

У тебя есть клиент, который не платит? Этот скрипт каждый день снижает прозрачность сайта, пока он совсем не исчезнет 😂 ➡️ @byFrontDeveloper

Это реально крутой инструмент для CSS-разработчиков Найдите сотни стильных CSS-паттернов и фонов, полностью бесплатных. Просто скопируйте код и сразу используйте в своих проектах. Идеально для: - создания ярких hero-секций - разработки современных дашбордов и приложений - улучшения портфолио с акцентом на дизайн С этим ваши проекты реально будут выделяться :) Источник: patterncraft.fun ➡️ @byFrontDeveloper

Создайте компанию или продукт быстрее с помощью этого Шаблон со всем, что нужно ✓ Аутентификация пользователей и дашборд ✓ Платежи с Stripe + PostgreSQL ✓ React и Next.js Открытый исходный код - https://github.com/nextjs/saas-starter Ставь лайк, если имба 😳 ➡️ @byFrontDeveloper

Вау, отличная подборка чисто CSS-переключателей Можно посмотреть кучу креативных вариантов, скопировать код и сразу использовать в своих веб-проектах. Подходит для: - кнопок переключения темы - переключателей в настройках - интерактивных UI-компонентов Источник : themedevhub.com/tools/css-switch-collection Надеюсь, будет полезно. 🌼 ➡️ @byFrontDeveloper

5 сайтов которые должен знать каждый веб-разработчик - http://reactplay.io— учи React через практические проекты - http://warp.dev — альтернатива Claude Code - http://sevalla.com — фуллстек хостинг для Python, JavaScript, PHP, Go - http://uiverse.io — бесплатные компоненты на Tailwind CSS - http://animista.net — генератор CSS-анимаций с визуализацией ➡️ @byFrontDeveloper

Безумный трюк в VS Code, о котором 99% юзеров даже не догадываются 👀 Можно спокойно менять местами элементы боковой панели и терминала просто перетащив их мышкой Мелочь, а кастомизация VS Code сразу выходит на новый уровень :) ➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Функции в CSS! Уже доступны в Chrome 139

/* Функции в CSS */

/* Возвращает полупрозрачный цвет */
@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

/* Используем нашу функцию --opacity */
div {
  background: --opacity(blue, 80%);
}

/* Также можно использовать с кастомными свойствами */
.article {
  border-color: --opacity(
    var(--color-primary),
    var(--semi-transparent)
  );
}

Теперь можно создавать собственные функции прямо в CSS, передавать в них параметры и использовать вместе с custom properties Вот хорошая статья с примерами использования: 5 полезных CSS-функций с использованием нового правила @function ➡️ @byFrontDeveloper

Chrome добавил ИИ в DevTools Пишешь промпт → он сразу меняет твой сайт и выдаёт код. Веб-разработка вышла на новый уровень Огромное спасибо команде ChromiumDev за то, что сделали это возможным ➡️ @byFrontDeveloper

Совет по Chrome Dev Tools Недавно я нашёл новый способ разбирать, как на сайтах реализованы разные крутые CSS-эффекты. Для этого можно использовать функцию "Ask AI" прямо в Chrome Dev Tools. Просто инспектируешь нужный элемент, чтобы подтянуть его в контекст, и начинаешь задавать вопросы, чтобы понять, как всё устроено. ➡️ @byFrontDeveloper

Совет по HTML Можно использовать теги <details> и <summary>, если нужно сделать на странице сворачиваемый блок с контентом Тег <details> создаёт контейнер для скрытого содержимого, а <summary> добавляет кликабельный заголовок, по которому этот контент можно показать или скрыть ➡️ @byFrontDeveloper

Удалёнщик собирается в офис первый раз за год ➡️ @byFrontDeveloper

Это наглядная шпаргалка по основным командам Git с примерами - от начальной настройки и создания репозитория до работы с ветками, отмены изменений, синхронизации с удалённым репо и использования Git Flow. Кидай в закладки 😎 ➡️ @byFrontDeveloper

Поставил себе одно расширение в VS Code и залип Реально выручает - Генерит дерево проекта в один клик - Можно выгрузить в JSON SVG Markdown или ASCII - Иконки включаются или отключаются по вкусу Чертовски удобно для ревью доков и вики 🔥 ➡️ @byFrontDeveloper

Здесь собрано больше 1400 открытых API, которые можно использовать для реальных проектов и прокачки своих скиллов. Сохрани себе на потом 👍 https://publicapis.dev/ ➡️ @byFrontDeveloper

Совет по CSS Возможно, ты не знал об этом псевдоклассе в CSS. Псевдокласс :out-of-range выбирает элементы <input>, значение которых выходит за пределы, указанные в атрибутах min и max ➡️ @byFrontDeveloper