Логово верстальщика

👩‍💻 Проблема с new URL(), и как URL.parse() её решает Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна. Читать...

🔄 Пиши код так, чтобы его можно было выкинуть Рано или поздно что-то придётся переписать с нуля. И если твой код слишком связан с другими частями — это боль. 👉 Совет: минимизируй зависимости. Чем легче удалить или заменить модуль, тем меньше боли при масштабных изменениях.

👩‍💻 Создание CLI-приложения с Laravel и Docker Хотя Laravel традиционно используется для создания веб-приложений, некоторые приложения нуждаются в надёжных командах CLI, запускаемых через Docker в продакшн-среде. Узнайте, как настроить образ Docker для запуска Artisan CLI, благодаря чему вы получите основу для распределения CLI-приложений на PHP. Читать...

👩‍💻 CI/CD для начинающих: деплой React-приложения без боли В статье показан процесс развертывания React-приложения на сервере: от упаковки кода в CI/CD до отправки его в прод. Всё на примере простого to-do приложения. Читать...

👩‍💻 Создание веб-компонента с нуля Сегодня я решил, что мы создадим HTML веб-компонент с нуля. Давайте создадим компонент, показывающий и скрывающий текст при переключении кнопки. Читать...

👩‍💻 Cards with inverted border-radius Карточки товаров с интересным решением для кнопки. Сделаны на SCSS. Открыть код...

👩‍💻 Использование async и defer для управления скриптами В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать. Читать...

👩‍💻 Масштабируемый CSS с архитектурой ITCSS Статья рассказывает об архитектуре Inverted Triangle CSS, которая помогает масштабировать и поддерживать крупные CSS проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами. Читать...

Дима Билан на Yandex Ecom Open Air 8 августа Море инсайтов для бизнеса, музыкальный open-air, лекции и нетворкинг. Участие бесплатно! Зарегистрироваться #реклама 18+ ecomfest.ru О рекламодателе

❓ Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js. Читать...

👩‍💻 Profile Card UI Стильная карточка-портфолио с анимированными кнопками. Сделан на Svg, SCSS и JavaScript. Открыть код...

⚙️ Как работает свойство z-index в CSS? z-index управляет тем, как элементы накладываются друг на друга в трёхмерном пространстве веб-страницы. Элементы с большим значением z-index будут отображаться поверх тех, у которых значение меньше. ➡️ В этом примере элемент с z-index: 2 будет отображаться поверх элемента с z-index: 1:

.element1 {
  position: relative;
  z-index: 1;
}

.element2 {
  position: relative;
  z-index: 2;
}

🗣 Важно помнить, что свойство z-index работает только с элементами, у которых установлено позиционирование (position: relative, absolute, fixed или sticky).

🖥 Подробнее тут

⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации Если ты хочешь стать настоящим мастером API, тебе нужно знать о паттерне BFF. В этой статье рассказываем, как создавать управляемую архитектуру с использованием BFF, избегая избыточной сложности и головной боли при поддержке. Читать...

👩‍💻 React и FormData Узнайте о новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript. Читать...

📏 Код ревью — это не поиск багов Многие воспринимают ревью как проверку на ошибки. Но баги должны ловить тесты. 👉 Совет: смотри глубже: архитектура, читаемость, надёжность, устойчивость к изменениям. Ревью — это фильтр качества, а не только страховка от опечаток.

➡️ Пара шаблонов кастомизированных элементов Handlebars для Apache Superset Apache Superset — популярный инструмент для визуализации данных с открытым кодом. Но при его использовании можно столкнуться с ограничениями. В статье обсуждается, как с помощью шаблонов Handlebars и Jinja решать эти проблемы, включая интеграцию web-верстки в дашборды и обход ограничений системы. Читать...

👩‍💻 Автоматическая караоке-система на основе React и Vercel Подробное пошаговое руководство по созданию бессерверного приложения для того, чтобы повеселиться в хорошей компании. Читать...

👩‍💻 8 неэффективных практик JavaScript, которых лучше избегать Отказавшись от неэффективных практик программирования на JavaScript, вы всегда будете писать удобный и легко читаемый код. Это сэкономит вам и вашей команде много времени и обеспечит долгую жизнь вашим продуктам. Читать...

👩‍💻 Как работает свойство object-fit в CSS? Свойство object-fit позволяет управлять масштабированием содержимого (например, изображений или видео) внутри контейнера, не искажая его соотношение сторон. Это особенно полезно при создании адаптивных и аккуратных галерей. ➡️ В этом примере изображение заполняет контейнер, сохраняя пропорции, благодаря значению cover:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

🗣 Свойство object-fit помогает контролировать отображение изображений в контейнерах, не растягивая и не искажая их.

➡️ 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript. Читать...