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

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

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

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

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

<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 офис: макросы на Javanoscript (туториал)

• Призываю переименовать 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 лет

🗓 Как написать Google Calendar на коленке? Обзор FullCallendar

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

Читать...

👩‍💻 Валидация формы с обратной связью

Создайте форму с одним полем ввода для имени и кнопкой "Отправить". При отправке формы выполните следующие условия:

1. Если поле пустое, отобразите сообщение об ошибке под полем.
2. Если поле заполнено, отобразите сообщение "Форма успешно отправлена!".
3. Сообщение об ошибке исчезает при вводе текста.

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

<form id="myForm">
<input type="text" id="nameInput" placeholder="Введите имя" />
<button type="submit">Отправить</button>
<p id="error" style="color: red; display: none;">Поле не должно быть пустым</p>
</form>
<p id="success" style="color: green; display: none;">Форма успешно отправлена!</p>

const form = document.getElementById('myForm');
const nameInput = document.getElementById('nameInput');
const error = document.getElementById('error');
const success = document.getElementById('success');

form.addEventListener('submit', (e) => {
e.preventDefault();
if (nameInput.value.trim() === '') {
error.style.display = 'block';
success.style.display = 'none';
} else {
error.style.display = 'none';
success.style.display = 'block';
nameInput.value = '';
}
});

nameInput.addEventListener('input', () => {
if (nameInput.value.trim() !== '') {
error.style.display = 'none';
}
});

🤔 Народный браузер — каким он мог бы быть?

Статья раскрывает идеи и обсуждения, связанные с развитием сборки Хромиума Ultimatum. Автор стремится понять реальные запросы пользователей и обсудить востребованные функции.

Читать...

👩‍💻 Playbook CSS scroll animation w/ subgrid

Сцена с интересной реализацией анимированного скролла. Сделана на Svg, CSS и JavaScript.

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

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

Frontend-разработчик React (middle+/senior)
• JavaScript, React, TypeScript, Node.js, CI/CD (GitLab), Unit-тестирование
• Уровень дохода не указан | от 3 лет

FullStack разработчик
• React, TypeScript, JavaScript, HTML, CSS, Node.js, API, Git
• Уровень дохода не указан | от 3 лет

Senior Frontend Developer VUE.js
• JavaScript, Vue.js, TypeScript, адаптивная верстка, дизайн мобильных приложений, Figma, Nuxt.js, веб-разработка
• от 3 000 до 4 000 $ | от 5 лет

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

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

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

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

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

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

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

Throttle — это техника ограничения частоты вызова функции до определённого интервала времени. Это полезно для обработки часто происходящих событий, таких как прокрутка или изменение размеров окна, не перегружая производительность.

➡️ Пример:

function throttle(func, delay) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log('Прокрутка страницы');
}, 1000);

window.addEventListener('scroll', handleScroll);

🗣️ В этом примере функция handleScroll вызывается не чаще одного раза в секунду, даже если пользователь прокручивает страницу интенсивно. Throttle помогает оптимизировать производительность и уменьшить количество вызовов функции.

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

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

Frontend Teсh Lead
🟢React 16, HTML5, CSS3, PostCSS, JSON, Git
🟢Уровень дохода не указан | от 5 лет

Lead Frontend Developer
🟢React, TypeScript, HTML5, CSS3, Python, Node.js, SQL
🟢от 5 000 до 8 000 $ до вычета налогов | от 5 лет

Frontend Tech Lead
🟢JavaScript, Vue.js, TypeScript, Webpack, микрофронтенд-архитектура
🟢Уровень дохода не указан | от 5 лет

Lead Frontend-разработчик
🟢HTML, CSS, JavaScript (ES6), React 16, React Router, Redux, Redux Saga, TypeScript, Webpack, React Native, PWA, Jest, Git
🟢от 300 000 ₽ на руки | от 6 лет

➡️ Разбираем стандарты нейминга на примерах

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

Читать...

🔗 Технический долг? Закрывай его по «принципу кафе»

Технический долг копится, как грязная посуда в раковине. Кажется, что решишь его «когда-нибудь», но это «когда-нибудь» не наступает.

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

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

Frontend Developer
🟢React, JavaScript, HTML, CSS
🟢Уровень дохода не указан | 3–6 лет

Senior Frontend Developer (Vue.JS)
🟢Vue3, TypeScript, Git
🟢Уровень дохода не указан | Более 6 лет

Senior Frontend Engineer
🟢React, Redux, Redux-Saga, TypeScript, MUI, Electron, Node.js
🟢Уровень дохода не указан | Более 6 лет

Senior Next.js Developer
🟢Next.js, React.js, TypeScript, Elasticsearch, Azure, Kubernetes, Terraform
🟢от 2 500 до 5 000 $ до вычета налогов | Более 6 лет

➡️ Frontend в 2025 году: тренды, которые изменят разработку

В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.

Читать...

👩‍💻 Переключение видимости пароля

Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (type="password") и видимым (type="text") состоянием.

Требования:

• Кнопка переключает тип поля ввода пароля между "password" и "text".
• Текст кнопки меняется в зависимости от текущего состояния видимости пароля.

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

<input type="password" id="password" placeholder="Введите пароль">
<button id="toggleBtn">Показать</button>

const password = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
const isHidden = password.type === 'password';
password.type = isHidden ? 'text' : 'password';
toggleBtn.textContent = isHidden ? 'Скрыть' : 'Показать';
});