➡️ Пара шаблонов кастомизированных элементов Handlebars для Apache Superset

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

Читать...

📏 Код ревью — это не поиск багов

Многие воспринимают ревью как проверку на ошибки. Но баги должны ловить тесты.

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

👩‍💻 React и FormData

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

Читать...

⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации

Если ты хочешь стать настоящим мастером API, тебе нужно знать о паттерне BFF. В этой статье рассказываем, как создавать управляемую архитектуру с использованием BFF, избегая избыточной сложности и головной боли при поддержке.

Читать...

⚙️ Как работает свойство 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).

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

👩‍💻 Profile Card UI

Стильная карточка-портфолио с анимированными кнопками. Сделан на Svg, SCSS и JavaScript.

Открыть код...

❓ Как быстро разобраться в Next.js 14: 5 советов опытного фронтендера

Делимся пятью советами, которые помогут быстро разобраться в тонкостях работы с изображениями, переменными окружения, кэшированием и управлением компонентами в Next.js.

Читать...

👩‍💻 Масштабируемый CSS с архитектурой ITCSS

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

Читать...

👩‍💻 Использование async и defer для управления скриптами

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

Читать...

👩‍💻 Cards with inverted border-radius

Карточки товаров с интересным решением для кнопки. Сделаны на SCSS.

Открыть код...

👩‍💻 Создание веб-компонента с нуля

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

Читать...

👩‍💻 CI/CD для начинающих: деплой React-приложения без боли

В статье показан процесс развертывания React-приложения на сервере: от упаковки кода в CI/CD до отправки его в прод. Всё на примере простого to-do приложения.

Читать...

👩‍💻 Создание CLI-приложения с Laravel и Docker

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

Читать...

🔄 Пиши код так, чтобы его можно было выкинуть

Рано или поздно что-то придётся переписать с нуля. И если твой код слишком связан с другими частями — это боль.

👉 Совет: минимизируй зависимости. Чем легче удалить или заменить модуль, тем меньше боли при масштабных изменениях.

👩‍💻 Проблема с new URL(), и как URL.parse() её решает

Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна.

Читать...

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание

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

Читать...

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино

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

Читать...

👩‍💻 Создание адаптивного круга с текстом по центру

Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 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;
}
}

👩‍💻 Сравнение способов отрисовки спрайтов в canvas

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

Читать...

👩‍💻 CSS Веерное раскрытие с grid и @property

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

Читать...