👩‍💻 Анимация элемента dialog

Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.

Читать...

⚡️ Как развернуть Supabase в облаке Timeweb Cloud

В статье расскажем, как Supabase — бесплатный аналог Google Firebase — помогает разработчикам быстро создавать приложения и сайты. Узнаете, как работать с базой данных, аутентификацией, хранением файлов и реальным временем, без необходимости управлять сервером.

Читать...

🔍 Maskito: то, что вы давно искали

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

Читать...

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

• Тримодальный характер зарплат разработчиков

• Иллюзия прогресса: почему мне не удалось дать студентам-айтишникам реальный опыт

• Из подземелья в QA: как и почему я перешёл в тестирование после 14 лет работы сисадмином в метрополитене

• Interview copilots: как кандидаты используют ChatGPT на интервью

• Моя история входа в IT: как я ломал стены своих ограничений

👩‍💻 Что, если использовать контейнерные единицы измерения для... всего

Однажды я спросил себя: а что, если использовать контейнерные единицы измерения для каждого элемента дизайна? Я задался этим вопросом, отчасти потому, что мне показалось, что ответ может быть таким: ну, тогда всё будет очень хорошо масштабироваться!

Читать...

👩‍💻 Как прослушивать несколько событий в веб-компоненте

Сегодня поговорим о том, как использовать handleEvent() для обработки нескольких типов событий.

Читать...

➡️ Руководство по 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, избегая избыточной сложности и головной боли при поддержке.

Читать...