👩‍💻 Idea Form

Анимированная форма для ввода с появлением при нажатии. Сделана на SCSS и TypeScript.

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

👩‍💻 Переходите на сторону light-dark()

Статья раскрывает современные CSS-функции для создания адаптивного темного режима, заменяющие традиционные медиа-запросы. Рассматриваются подходы, упрощающие настройку цветовых схем под предпочтения пользователя.

Читать...

👩‍💻 Решение головоломки судоку на JavaScript с помощью хэш-карт и рекурсий

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

Читать...

👩‍💻 Улучшение производительности с делегированием событий

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

Читать...

👩‍💻 TypeScript в деталях: настраиваем tsconfig.json правильно

Один файл, который может изменить все: полное руководство по tsconfig.json. Разбираем каждый параметр и его влияние на разработку, сборку и поддержку TypeScript-проектов.

Читать...

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

• Как ручному тестировщику стать автоматизатором?

• Сколько времени тратить на работу?

• Найм дизайнеров глазами лида

• Software Architect vs Solution Architect

• От юношеской мечты до реализации, верхом на депрессии

📊 10 методов SEO-оптимизации JavaScript, которые должен знать каждый фронтендер

Веб-приложения часто используют JavaScript для динамического создания контента и удобного взаимодействия с пользователем. Но поисковые роботы не всегда могут правильно прочитать и проиндексировать такой контент – в итоге сайт теряет посетителей. На помощь придут 10 способов SEO-оптимизации для JavaScript.

Читать...

👩‍💻 Паттерны для эффективного манипулирования DOM с ванильным JavaScript

В руководстве рассматриваются такие шаблоны работы с DOM на JavaScript, как выбор правильного querySelector, кэширование элементов и улучшение обработки событий.

Читать...

🪞 Читай свой код через день

Когда пишешь, всё кажется логичным. Но стоит отойти — и через сутки видишь хаос.

👉 Совет: откладывай код на ночь. Утром перечитай свежим взглядом — часто сам найдёшь то, что коллеги заметили бы на ревью. Это маленький хак для самопроверки.

🧨 Работа с куки-файлами хуже сапёрного дела

Статья разбирает особенности работы с HTTP-куки и неожиданные проблемы, которые могут возникнуть при их использовании. Рассматривается пример с сериализацией JSON, казалось бы, безобидный, но вызывающий интересные нюансы в обработке браузерами и серверами.

Читать...

👩‍💻 Шаблон “Декоратор” в разработке на TypeScript

Овладейте полезным инструментом TS-разработчика - шаблоном проектирования "Декоратор". Он позволяет динамически расширять функциональность объектов, не усложняя читаемость кода.

Читать...

👩‍💻 5 HTML-атрибутов для улучшения пользовательского опыта и SEO

Разбираем мощные, но часто игнорируемые атрибуты HTML, способные значительно улучшить пользовательский опыт и SEO вашего сайта. От многоязычности до удобства заполнения форм – все, что нужно современному разработчику

Читать...

👩‍💻 Реализация кнопки с таймером блокировки

Создайте кнопку, которая становится недоступной (disabled) на 5 секунд после каждого нажатия. Отображайте обратный отсчёт времени на кнопке, чтобы пользователь видел, когда её можно будет нажать снова.

Ожидаемое поведение:

• При нажатии на кнопку она становится недоступной.
• На кнопке отображается обратный отсчёт времени: 5... 4... 3....
• Через 5 секунд кнопка снова становится активной и текст возвращается в исходное состояние.

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

<button id="timer-button">Нажми меня</button>


#timer-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

#timer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}


const button = document.getElementById('timer-button');

button.addEventListener('click', () => {
let countdown = 5;

// Деактивируем кнопку и запускаем таймер
button.disabled = true;
const interval = setInterval(() => {
button.textContent = `Ждите... ${countdown}`;
countdown--;

if (countdown < 0) {
clearInterval(interval);
button.disabled = false;
button.textContent = 'Нажми меня';
}
}, 1000);
});

👩‍💻 Обзор наследования в JavaScript

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

Читать...

⚙️ Предзагрузка отзывчивых изображений

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

Читать...

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver

Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition.

Читать...

🔝 Самые интересные статьи за последние дни:

• OAuth 2.0, OpenID Connect и SSO для самых маленьких

• 250 000 товаров и миллионы характеристик: как мы скрестили Битрикс с Symfony и MongoDB

• JavaScript-фреймворки и библиотеки, на которые стоит обратить внимание в 2025 году

• Onlyoffice и Р7 офис: макросы на Javanoscript (туториал)

• Призываю переименовать Layers в Feature-Sliced Design методологии

👩‍💻 Как реализовать наследование в JavaScript: 7 способов

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

Читать...

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов

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

Читать...

➡️ Выкинь свой RoadMap: что на самом деле нужно знать начинающему фронтендеру

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

Читать...

⚙️ Что такое Intersection Observer в JavaScript и зачем он используется?

Intersection Observer — это API, которое позволяет отслеживать, когда элемент появляется или исчезает из области видимости (viewport). Он полезен для ленивой загрузки изображений, бесконечной прокрутки и анимаций при прокрутке.

➡️ Пример:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент видим:', entry.target);
    }
  });
});

// Наблюдаемый элемент
const target = document.querySelector('.observe-me');
observer.observe(target);

🗣️ В этом примере Intersection Observer отслеживает элемент .observe-me и выполняет код, когда элемент появляется в области видимости. Это позволяет избежать постоянного использования события scroll, улучшая производительность.

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