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

⚙️ PHP 8.4: exit/die изменены из языковых конструкций в функции Ключевое слово exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода. Читать...

👩‍💻 Ошибки при работе с tailwindcss Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения. Читать...

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

👩‍💻 Адаптивный блок с равными колонками Создайте адаптивный блок, который содержит три колонки одинаковой ширины. На больших экранах (от 1024px) колонки должны располагаться в один ряд, на планшетах (от 768px до 1023px) — в два ряда по две и одну, а на мобильных устройствах (до 767px) — каждая колонка должна занимать всю ширину. Ожидаемое поведение: • На больших экранах: три колонки в один ряд. • На планшетах: две колонки в первом ряду, одна во втором. • На мобильных: каждая колонка занимает всю ширину. Решение задачи🔽

<div class="container"> <div class="column">Колонка 1</div> <div class="column">Колонка 2</div> <div class="column">Колонка 3</div> </div> .container { display: flex; flex-wrap: wrap; gap: 16px; /* Отступы между колонками */ margin: 0 auto; max-width: 1200px; } .column { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border-radius: 8px; flex: 1 1 calc(33.333% - 16px); /* Для больших экранов */ box-sizing: border-box; } /* Планшеты: две колонки в первом ряду */ @media (max-width: 1023px) { .column { flex: 1 1 calc(50% - 16px); } } /* Мобильные устройства: одна колонка в строке */ @media (max-width: 767px) { .column { flex: 1 1 100%; } }

👩‍💻 Всё ли ты знаешь о работе с асинхронностью? Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину. Читать...

👩‍💻 CSS Веерное раскрытие с grid и @property Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию. Читать...

👩‍💻 Сравнение способов отрисовки спрайтов в canvas Статья описывает исследование различных методов отрисовки изображений в HTML5 Canvas для браузерных игр с мультиплеером. Автор делится находками по оптимизации производительности, основанными на проекте для курсовой. Читать...

👩‍💻 Создание адаптивного круга с текстом по центру Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px. Ожидаемое поведение: • Круглый элемент с текстом по центру. • Размер круга меняется в зависимости от ширины экрана. Решение задачи🔽

<div class="circle">Текст</div> .circle { display: flex; align-items: center; justify-content: center; background-color: #4CAF50; color: white; border-radius: 50%; text-align: center; font-size: 1.2em; } /* Размер для больших экранов */ @media (min-width: 1024px) { .circle { width: 200px; height: 200px; } } /* Размер для планшетов */ @media (min-width: 768px) and (max-width: 1023px) { .circle { width: 150px; height: 150px; } } /* Размер для мобильных устройств */ @media (max-width: 767px) { .circle { width: 100px; height: 100px; } }

Станьте разработчиком нейро-сотрудников на Python и зарабатывайте от 150.000р в месяц 🔥🔥🔥 Мы научим вас создавать топовых нейро-сотрудников на базе GPT-4 Omni, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тысяч ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тысяч ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате Что будет на интенсиве? 🧬 Теория: как создаются нейро-сотрудники с GPT-4o на Python 🧬 Практика: мы создадим нейро-консультанта, нейро-HR, нейро-маркетолога и др. Ведущий интенсива - Senior AI разработчик нейросетей и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайший четверг!

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино Застряли в замкнутом круге "клавитура-мышка", из-за которого устаете и теряете время при написании кода? Представляем вашему вниманию полезные шорткаты VS Code, которые избавят от этих проблем. Читать...

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации. Читать...

Хочу поделиться интересной находкой. Коллега запилил проект Hack Frontend — платформу для подготовки к фронтенд-собеседованиям. Я посмотрел, что там есть, и там действительно много полезного для тех, кто хочет прокачаться перед интервью. Вот ссылка: https://www.hackfrontend.com

👩‍💻 Проблема с 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 проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами. Читать...