👩‍💻 Интерактивный счётчик с кнопками увеличения и уменьшения

Создайте интерактивный счётчик с двумя кнопками: "Увеличить" и "Уменьшить". Счётчик должен отображать текущее значение, которое обновляется при нажатии на кнопки.

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

• По умолчанию значение счётчика равно 0.
• Кнопка "Увеличить" увеличивает значение счётчика на 1.
• Кнопка "Уменьшить" уменьшает значение счётчика на 1.
• Значение счётчика никогда не становится отрицательным.

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

<div>
<button id="decreaseButton">Уменьшить</button>
<span id="counter">0</span>
<button id="increaseButton">Увеличить</button>
</div>

const counter = document.getElementById('counter');
const decreaseButton = document.getElementById('decreaseButton');
const increaseButton = document.getElementById('increaseButton');

let count = 0;

decreaseButton.addEventListener('click', () => {
if (count > 0) {
count -= 1;
counter.textContent = count;
}
});

increaseButton.addEventListener('click', () => {
count += 1;
counter.textContent = count;
});

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

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

Читать...

👩‍💻 Multiple Glow effects Button

Анимированная кнопка с различными эффектами свечения. Сделана на CSS, Svg и JavaScript.

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

📝 Подборка вакансий для сеньоров

Frontend-разработчик (React)
• JavaScript, React, Node.js
• Уровень дохода не указан | от 3 лет

QA-инженер (frontend)
• JavaScript, TypeScript, SQL
• Уровень дохода не указан | от 2 лет

Senior Fullstack Developer (Nest / React)
• Node.js, RabbitMQ, TypeScript, MySQL, React, Redux, TypeORM, NestJS
• от 3 000 до 4 000 $ | от 6 лет

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

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

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

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

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

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

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

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

Читать...

⚙️ Что такое addEventListener в JavaScript?

addEventListener — это метод, который позволяет добавлять обработчики событий к элементам на странице.

➡️ Пример:

// Функция для обработки клика
function handleClick() {
  console.log('Кнопка нажата!');
}

// Добавляем обработчик к кнопке
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

🗣️ В этом примере метод addEventListener связывает событие клика с кнопкой, выполняя функцию handleClick. Этот подход позволяет динамически добавлять или удалять обработчики.

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

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

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

Читать...

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

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

Читать...

🕹 Игра в дедлайны

Заметил, что работаешь быстрее, когда сроки поджимают? Это не магия — это фокусировка.

👉 Совет: попробуй метод «искусственного дедлайна». Установи себе собственные сроки на задачу, которые короче официальных. Например, если дедлайн через неделю, заверши всё за три дня. Так ты освободишь время на проверку, улучшения или форс-мажоры.

🔎 Подборка зарубежных вакансий

Senior Fullstack Developer
🟢Node.js, React, Vue.js, JavaScript, TypeScript, MongoDB, Clickhouse, Elasticsearch, Webpack
🟢от 4 500 до 6 500 $ до вычета налогов | более 6 лет

Team Lead (Java Spring) - Senior Backend Developer
🟢Java, Spring Boot, PostgreSQL, Grafana, React, AWS, Docker, Auth0
🟢от 300 000 ₽ на руки | от 3 до 6 лет

Product Manager
🟢Английский язык, Unit-экономика, Product Management, Product-market fit, управление инновациями, Roadmap, стратегический менеджмент, навыки презентации, проведение презентаций, продуктовые метрики, продуктовая стратегия, анализ требований
🟢от 4 000 € на руки | от 2 лет

👩‍💻 CSS в React: сравниваем 5 подходов к стилизации

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

Читать...

👩‍💻 Модальное окно с закрытием по кнопке и фону

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

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

• При клике на кнопку "Открыть модальное окно" появляется модальное окно.
• Модальное окно закрывается при клике на кнопку "Закрыть" или на затемнённый фон.
• Фон страницы не прокручивается, пока открыто модальное окно.

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

<button id="openModal">Открыть модальное окно</button>

<div id="modal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close-button">&times;</span>
<p>Это модальное окно</p>
</div>
</div>

body.modal-open {
overflow: hidden;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background: white;
padding: 20px;
border-radius: 8px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
}

const openModalBtn = document.getElementById('openModal');
const closeModalBtn = document.getElementById('closeModal');
const modal = document.getElementById('modal');
const body = document.body;

openModalBtn.addEventListener('click', () => {
modal.style.display = 'flex';
body.classList.add('modal-open');
});

closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
if (e.target === modal) closeModal();
});

function closeModal() {
modal.style.display = 'none';
body.classList.remove('modal-open');
}

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

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

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

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

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

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

⚙️ Ultimatum — еще один форк хромиума, с претензией…

Статья анонсирует сборку браузера Chromium — Ultimatum. Браузер обходит техники трекинга, позволяет устанавливать расширения с любых сайтов и перехватывать сетевые запросы для их полной подмены.

Читать...

👩‍💻 Динамический список задач с возможностью удаления

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

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

• Пользователь вводит текст задачи в поле и нажимает кнопку "Добавить".
• Новая задача добавляется в список с кнопкой "Удалить" рядом с ней.
• При нажатии на кнопку "Удалить" задача исчезает из списка.

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

<div>
<input type="text" id="taskInput" placeholder="Введите задачу" />
<button id="addButton">Добавить</button>
</div>
<ul id="taskList"></ul>

const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

addButton.addEventListener('click', () => {
const taskText = taskInput.value.trim();
if (taskText === '') return; // Не добавляем пустые задачи

const listItem = document.createElement('li');
listItem.textContent = taskText;

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Удалить';
deleteButton.style.marginLeft = '10px';

deleteButton.addEventListener('click', () => {
taskList.removeChild(listItem);
});

listItem.appendChild(deleteButton);
taskList.appendChild(listItem);

taskInput.value = ''; // Очищаем поле ввода
});

🔎 Подборка вакансий для джунов

Junior React Developer
🟢React, HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass
🟢от 60 000 ₽ | Без опыта

Junior React Developer
🟢React, HTML, CSS, JavaScript (ES6), Git, Redux/MobX, styled-components/Less/Sass
🟢от 60 000 ₽ | 1–3 года

Web-разработчик (PHP)
🟢PHP, Git, MySQL, ООП, HTML5, 1С-Битрикс, CSS, JavaScript, Ajax, Laravel
🟢от 150 000 ₽ | 1–3 года

👩‍💻 Sphere Packing

Интерактивная сцена с шарами. Сделана на CSS и JavaScript.

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

⚙️ Что такое 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, улучшая производительность.

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

📝 Подборка вакансий для мидлов

Frontend-разработчик React / Vue.js / Nuxt.js (Middle-Senior)
🟢React, React Native, Vue.js, Nuxt.js, RESTful API, HTML, CSS, Git
🟢от 200 000 ₽ | от 2 лет

Системный аналитик на frontend и mobile в Т-Инвестиции
🟢SOAP, базы данных, REST, RabbitMQ, SQL, BPMN, системный анализ, Apache Kafka, UML, разработка решений по интеграции
🟢Уровень дохода не указан | от 3 лет

Frontend-разработчик
🟢TypeScript, Vue.js, Webpack, GraphQL
🟢до 200 000 ₽ | от 3 лет