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

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

Читать...

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

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

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

• По умолчанию значение счётчика равно 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;
});

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

• Упрощаем CSS-анимации с помощью свойств display и размеров элемента

• 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года

• Возможности поля HTML-документа, часть 2. Внедряем CSS и JS

• Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке

• Разработка Task Manager с нуля до полнофункционального продукта

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

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

Читать...

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

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

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

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

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

<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');
}

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

React junior/middle
🟢React Native, TypeScript, CSS3, адаптивная верстка, Git
🟢от 70 000 до 150 000 ₽ | 1–3 года

Junior Front-end разработчик
🟢HTML, CSS, JavaScript, CMS (WordPress, Bitrix), SEO
🟢от 50 000 до 80 000 ₽ | 1–3 года

Junior Front-end developer
🟢JavaScript, React, Redux, Git, Sass
🟢от 80 000 до 120 000 ₽ | 1–3 года

👩‍💻 Text Illumination

Сцена с анимированным появлением текста. Сделана на SVG и CSS.

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

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

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

➡️ Пример:

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

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

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

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

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

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 лет

⚙️ 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 = ''; // Очищаем поле ввода
});

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

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

Читать...

👩‍💻 Gooey SVG Filter Button

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

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

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

React Native разработчик
• React Native, TypeScript, HTML, CSS, React
• от 150 000 до 200 000 ₽ | 1–3 года

Web Разработчик / Fullstack
• PHP8, MySQL, JavaScript, Node.js, Git, Linux
• от 300 000 до 700 000 ₽ | 5+ лет

Tech Lead (Senior PHP-разработчик)
• PHP, Yii framework, Symfony, PostgreSQL, JSON, Git, ООП, Docker, CI/CD
• Уровень дохода не указан | 5+ лет

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

• Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом. Часть 2

• Циничные заметки о карьере в IT от «гейткипера»

• Язык как проект: как продакт-менеджеру учить английский

• Всероссийский рейтинг IT-брендов работодателей 2024

• Моя петиция EB-1A на грин-карту талантов, одобренная с первой попытки

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

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

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

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

Читать...

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

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

Читать...

🔨 Ломай свои решения до того, как их сломает продакшен

Ты уверен, что твоя фича работает идеально? Отлично. А что будет, если передать в неё неожиданные данные?

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

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

Full Stack Developer (Node.js, React)
🟢Node.js, React, NestJS, TypeScript, MySQL, RabbitMQ, Redis, AWS
🟢Уровень дохода не указан | 3–6 лет

Angular Developer
🟢Angular 2+, MS SQL, EF Core, OAuth 2.0, JWT, RESTful APIs, Swagger, HTML, CSS/SCSS, Bootstrap
🟢Уровень дохода не указан | 3–6 лет

Full Stack Developer
🟢Node.js, TypeScript, VueJS, React, DevOps, PostgreSQL, Redis, AWS
🟢Уровень дохода не указан | 5+ лет