➡️ 6 полезных фронтенд-приемов, о которых вы, возможно, не знаете

Небольшая подборка малоизвестных техник для HTML, CSS и JavaScript.

Читать...

👩‍💻 8 неэффективных практик JavaScript, которых лучше избегать

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

Читать...

👩‍💻 Автоматическая караоке-система на основе React и Vercel

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

Читать...

👩‍💻 Автоматическое определение направления флекса по размеру контейнера

Реализуйте функцию autoFlexDirection(container, threshold = 600), которая динамически меняет направление флекса (row или column) у заданного контейнера в зависимости от его ширины.

Если ширина контейнера меньше threshold пикселей — флекс-направление должно быть column, иначе — row.

Изменение должно происходить в реальном времени при ресайзе окна, без перезагрузки страницы и без использования CSS-медиа-запросов

Решение задачи🔽

function autoFlexDirection(container, threshold = 600) {
function updateFlex() {
const width = container.offsetWidth;
container.style.flexDirection = width < threshold ? 'column' : 'row';
}

// Вызываем при старте
updateFlex();

// Обновляем при каждом ресайзе окна
window.addEventListener('resize', updateFlex);

// Для случаев, когда контейнер сам меняет размер (не окно)
const observer = new ResizeObserver(updateFlex);
observer.observe(container);
}

// Пример использования:
const container = document.querySelector('.flex-container');
autoFlexDirection(container, 700);

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

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

Читать...

📈 Подборка статей для вашей карьеры

• «Сбер» режет косты

• Все, пора увольняться: что я поняла после работы в токсичных командах

• Чем Cloud-инженер отличается от DevOps-инженера и что между ними общего

• Правда или вымысел? Разоблачаем мифы о профессии технического писателя

• 5 видов усталости в IT… и не только

👩‍💻 React и FormData

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

Читать...

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

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

Читать...

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

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

Читать...

📦 Изолируй хаос

Большинство багов рождаются в точках пересечения: сервисы, зависимости, сторонние API.

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

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

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

Читать...

👩‍💻 Создание адаптивной сетки с переменными CSS

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

➡️ Пример: Создайте сетку с тремя колонками для больших экранов, двумя колонками для средних и одной колонкой для мобильных.

Решение задачи🔽

:root {
--column-gap: 20px;
--row-gap: 20px;
--column-count: 3;
}

.container {
display: grid;
grid-template-columns: repeat(var(--column-count), 1fr);
gap: var(--row-gap) var(--column-gap);
}

@media (max-width: 768px) {
:root {
--column-count: 2;
}
}

@media (max-width: 480px) {
:root {
--column-count: 1;
}
}

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

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

Читать...

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

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

Читать...

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

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

Читать...

👩‍💻 В чем разница между em и rem в CSS?

В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования.

➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

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

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

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

Читать...

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

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

Читать...

👩‍💻 Face Toggle

Интересный дизайн переключателя. Сделаны на SCSS и JavaScript.

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

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

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

Читать...