Frontend Developer

Изучи паттерны проектирования на JavaScript Лучший бесплатный ресурс: ✓Примеры для React, Vue, Angular, TypeScript ✓Книга на 400+ страниц с реальными примерами ✓Интерактивные упражнения и пошаговые объяснения → http://patterns.dev ➡️ @byFrontDeveloper

Это один из лучших AI-инструментов для разработчиков Позволяет визуально генерировать полноструктурированные базы данных с помощью обычных текстовых подсказок — просто опиши, что нужно, и он мгновенно всё создаст. 🔗: http://database.build ➡️ @byFrontDeveloper

Это невероятно мощный инструмент для CSS Grid Генерируй любую сетку, какую только можешь представить, всего за пару кликов — никакого ручного кода Идеально для разработчиков, ценящих эффективность 😎 > cssgridgenerator.io ➡️ @byFrontDeveloper

CSS shimmer для placeholder'а > накладываешь элемент-заглушку > отображаешь, когда :placeholder-shown > применяешь mask для рамки > background-clip для текста > анимация градиента по позиции Обожаю играться с такими штуками, а ты? 🐸 👉 Codepen ➡️ @byFrontDeveloper

Знал ли ты это про HTML? С помощью атрибута form в кнопках можно отправить любой формуляр по его id Для этого не нужен JavaScript 😨 ➡️ @byFrontDeveloper

Сегодня наткнулся на такой вот инструмент для UI-разработчиков Этот сайт позволяет генерировать пользовательские SVG-загрузчики с множеством параметров настройки: цвета, скорость, обводка, размер и многое другое > https://loaders.holasvg.com/ Ставь лайк если пригодится 😈 ➡️ @byFrontDeveloper

Этот сайт настоящая находка для веб-разработчиков Полон готовых к использованию фрагментов кода для впечатляющих UI-компонентов. Просто скопируй код и вставь в свой проект. ✊ > https://snipzy.dev/ ➡️ @byFrontDeveloper

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

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

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

Насколько крут этот трюк с GitHub Просто замени .com на chat . ai в URL любого репозитория — и ты сможешь общаться с кодом напрямую Игра меняется и теперь разбираться в проекте и навигировать по коду стало гораздо быстрее ❤️ ➡️ @byFrontDeveloper

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

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

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

Ещё кстати с помощью Gemini можно править CSS прямо в Elements и сразу сохранять изменения в исходники Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету 😎 ➡️ @byFrontDeveloper

Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini (это ИИ-моделька гугла) Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️ Работает с версии Chrome 137 ➡️ @byFrontDeveloper

Прощай, Math.random() ❤️ В JavaScript появилась новая предложенная возможность — добавить объект Random в сам язык. Он включает множество методов для генерации случайных значений Предложение только что дошло до стадии 1 в ECMAScript, но выглядит многообещающе: https://github.com/tc39/proposal-random-functions Как ты думаешь, это полезное улучшение для JavaScript? 🤔 ➡️ @byFrontDeveloper

Избегай этой ошибки с изображениями на своём сайте Свойство CSS, чтобы они не отображались растянутыми:

object-fit: contain;

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

aspect-ratio: 1/1;

и

width: 100px;

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

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

input, textarea {
  field-sizing: content;
}

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

Minecraft в браузере Он реально работает только на HTML и CSS — 0 строк JavaScript 😳 > benjaminaster.com/css-minecraft/ ➡️ @byFrontDeveloper

Совет по JavaScript Можно определить операционную систему пользователя с помощью navigator.platform Полезно для отображения UI под конкретную ОС, запуска платформенно-зависимой логики или предложения разных загрузок 🔥 ➡️ @byFrontDeveloper

В CSS подъехали обновления Теперь доступна функция if() — полноценные условные конструкции прямо в стилях. Уже работает в Chrome 137. А ещё завезли reading-flow и reading-order — можно управлять порядком таб-навигации в flex и grid без костылей > Подробнее: https://developer.chrome.com/blog/new-in-chrome-137 🍷 ➡️ @byFrontDeveloper

ИНТЕРАКТИВНОЕ и наглядное руководство по CSS Grid Хочешь легко создавать сетки для своего сайта? Эта визуальная шпаргалка поможет быстро освоить CSS Grid: → https://joshwcomeau.com/css/interactive-guide-to-grid/ 💖 ➡️ @byFrontDeveloper

Находка дня: инструмент для анализа производительности всей веб-страницы Пробегается по всем страницам сайта и эмулирует полную навигацию, как обычный пользователь. Запуск:

npx unlighthouse --site <твой-сайт>

Идеально для SPA, маркетинговых сайтов и больших проектов 💖 ➡️ @byFrontDeveloper