ИНТЕРАКТИВНОЕ и наглядное руководство по CSS Grid

Хочешь легко создавать сетки для своего сайта?

Эта визуальная шпаргалка поможет быстро освоить CSS Grid:

→ https://joshwcomeau.com/css/interactive-guide-to-grid/ 💖

➡️ @byFrontDeveloper

В CSS подъехали обновления

Теперь доступна функция if() — полноценные условные конструкции прямо в стилях. Уже работает в Chrome 137.

А ещё завезли reading-flow и reading-order — можно управлять порядком таб-навигации в flex и grid без костылей

> Подробнее: https://developer.chrome.com/blog/new-in-chrome-137 🍷

➡️ @byFrontDeveloper

Совет по JavaScript

Можно определить операционную систему пользователя с помощью navigator.platform

Полезно для отображения UI под конкретную ОС, запуска платформенно-зависимой логики или предложения разных загрузок 🔥

➡️ @byFrontDeveloper

Minecraft в браузере

Он реально работает только на HTML и CSS — 0 строк JavaScript 😳

> benjaminaster.com/css-minecraft/

➡️ @byFrontDeveloper

Автоматическое изменение размера текстовых полей всего одной строкой CSS:

input, textarea {
  field-sizing: content;
}

Браузерам срочно нужен interop по этому свойству — оно упрощает адаптивность без JS и костылей. Хочется видеть поддержку во всех браузерах. 🌻

➡️ @byFrontDeveloper

Избегай этой ошибки с изображениями на своём сайте

Свойство CSS, чтобы они не отображались растянутыми:

object-fit: contain;

Свойство object-fit управляет тем, как содержимое вписывается в заданную область

Значение contain:

> Сохраняет пропорции содержимого;
> Вписывает его целиком в контейнер;
> Может оставлять пустые области (например, поля сверху/снизу или по бокам), если пропорции изображения и контейнера не совпадают.

В совокупности с:

aspect-ratio: 1/1;

и

width: 100px;

— создаётся квадратная область 100×100 пикселей, в которую изображение вписывается без искажений ❤️

➡️ @byFrontDeveloper

Прощай, Math.random() ❤️

В JavaScript появилась новая предложенная возможность — добавить объект Random в сам язык.

Он включает множество методов для генерации случайных значений

Предложение только что дошло до стадии 1 в ECMAScript, но выглядит многообещающе: https://github.com/tc39/proposal-random-functions

Как ты думаешь, это полезное улучшение для JavaScript? 🤔

➡️ @byFrontDeveloper

Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini (это ИИ-моделька гугла)

Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит

Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️

Работает с версии Chrome 137

➡️ @byFrontDeveloper

Ещё кстати с помощью Gemini можно править CSS прямо в Elements и сразу сохранять изменения в исходники

Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету 😎

➡️ @byFrontDeveloper

Совет по HTML:

Если используешь target="_blank", помни — новая вкладка по умолчанию получает доступ к window.opener, то есть может взаимодействовать с твоей страницей. Это риск безопасности и потенциальные проблемы с производительностью.

Чтобы защититься — добавляй rel="noopener" или rel="noreferrer":

<a href="..." target="_blank" rel="noopener">

Так ты отключишь доступ к opener и обезопасишь свою страницу 💪

➡️ @byFrontDeveloper

Насколько крут этот трюк с GitHub

Просто замени .com на chat . ai в URL любого репозитория — и ты сможешь общаться с кодом напрямую

Игра меняется и теперь разбираться в проекте и навигировать по коду стало гораздо быстрее ❤️

➡️ @byFrontDeveloper

Тёмная тема без media queries в CSS

С новым методом light-dark() можно загружать разные цвета в зависимости от темы (светлой или тёмной) — без использования @media (prefers-color-scheme)

Пример:

h1 {
  color: light-dark(black, white);
}

Заголовок h1 автоматически меняет цвет в зависимости от активной темы пользователя

➡️ @byFrontDeveloper

Этот сайт настоящая находка для веб-разработчиков

Полон готовых к использованию фрагментов кода для впечатляющих UI-компонентов.

Просто скопируй код и вставь в свой проект. ✊

> https://snipzy.dev/

➡️ @byFrontDeveloper

Сегодня наткнулся на такой вот инструмент для UI-разработчиков

Этот сайт позволяет генерировать пользовательские SVG-загрузчики с множеством параметров настройки: цвета, скорость, обводка, размер и многое другое

> https://loaders.holasvg.com/

Ставь лайк если пригодится 😈

➡️ @byFrontDeveloper

Знал ли ты это про HTML?

С помощью атрибута form в кнопках можно отправить любой формуляр по его id

Для этого не нужен JavaScript 😨

➡️ @byFrontDeveloper

CSS shimmer для placeholder'а

> накладываешь элемент-заглушку
> отображаешь, когда :placeholder-shown
> применяешь mask для рамки
> background-clip для текста
> анимация градиента по позиции

Обожаю играться с такими штуками, а ты? 🐸

👉 Codepen

➡️ @byFrontDeveloper

Это невероятно мощный инструмент для CSS Grid

Генерируй любую сетку, какую только можешь представить, всего за пару кликов — никакого ручного кода

Идеально для разработчиков, ценящих эффективность 😎

> cssgridgenerator.io

➡️ @byFrontDeveloper

Это один из лучших AI-инструментов для разработчиков

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

🔗: http://database.build

➡️ @byFrontDeveloper

Изучи паттерны проектирования на JavaScript

Лучший бесплатный ресурс:

✓Примеры для React, Vue, Angular, TypeScript
✓Книга на 400+ страниц с реальными примерами
✓Интерактивные упражнения и пошаговые объяснения

→ http://patterns.dev

➡️ @byFrontDeveloper

Вау, это впечатляющая коллекция анимированных UI-компонентов с открытым исходным кодом для ваших frontend-проектов

Идеально подходит для создания чистых, современных интерфейсов

→ kokonutui.com

Ставь лайк если пост понравился ❤️

➡️ @byFrontDeveloper