➡️ Руководство по Convex. Часть 1

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

Читать...

🧠 Умей держать «рабочий контекст» в памяти

Самое страшное в переключении задач — не потерянное время, а сброшенное состояние мозга. Забываешь, о чём думал, и заново восстанавливаешь цепочку.

👉 Совет: перед переключением запиши текущее состояние: что делал, что осталось, какие идеи были на подходе. Даже короткий текстовый файл спасает от "А где я вообще остановился?"

👩‍💻 Как использовать менеджер состояний NgRx для Angular-проектов

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

Читать...

👩‍💻 Что нового в Chrome 130?

В статье рассказывается о нововведениях в Chrome 130: улучшенные возможности управления окнами "picture-in-picture", вложенные объявления в CSS для сложных случаев и настройка декораций для элементов в несколько строк.

Читать...

👩‍💻 Современные тренды CSS: эволюция функций

Рабочая группа CSS выпустила новый модуль Values and Units Level 5: меньше кода, больше возможностей – звучит как мечта? Давайте вместе разберемся, как эти новшества изменят нашу работу и сделают веб красивее.

Читать...

👩‍💻 Расчёт идеального контрастного цвета для фона

Реализуйте функцию getContrastColor(hex), которая принимает цвет в HEX-формате (например, "#ffffff") и возвращает либо "black", либо "white" — в зависимости от того, какой цвет текста будет лучше читаться на этом фоне.

Используйте формулу относительной яркости по стандарту WCAG для определения контраста. Это важно для создания доступных UI, кнопок, блоков с текстом и цветовых тем.

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

function getContrastColor(hex) {
const r = parseInt(hex.substr(1, 2), 16);
const g = parseInt(hex.substr(3, 2), 16);
const b = parseInt(hex.substr(5, 2), 16);

// Вычисление яркости по формуле WCAG
const brightness = (r * 299 + g * 587 + b * 114) / 1000;

return brightness > 128 ? "black" : "white";
}

// Примеры:
console.log(getContrastColor("#ffffff")); // "black"
console.log(getContrastColor("#000000")); // "white"
console.log(getContrastColor("#3498db")); // "white"

➡️ 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 приложения.

Читать...