🛡 Парольная защита статичной HTML-страницы на JS

Как защитить веб-страницы паролем без серверной поддержки? Инструменты StatiCrypt и Portable Secret помогут зашифровать HTML с использованием AES-256. Статические страницы остаются безопасными даже на публичном хостинге.

Читать...

👩‍💻 Таймер обратного отсчёта

Создайте простую страницу с таймером обратного отсчёта. Пользователь вводит количество секунд, нажимает кнопку "Старт", и таймер начинает обратный отсчёт до нуля. После окончания таймера на экране отображается сообщение "Время вышло!".

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

<input type="number" id="timeInput" placeholder="Введите секунды">
<button id="startButton">Старт</button>
<div id="timer">0</div>

const input = document.getElementById('timeInput');
const button = document.getElementById('startButton');
const timerDisplay = document.getElementById('timer');
let timerId;

button.addEventListener('click', () => {
const seconds = parseInt(input.value, 10);
if (isNaN(seconds) || seconds <= 0) {
timerDisplay.textContent = 'Введите корректное число!';
return;
}

clearInterval(timerId);
let remainingTime = seconds;

timerDisplay.textContent = remainingTime;
timerId = setInterval(() => {
remainingTime -= 1;
if (remainingTime <= 0) {
clearInterval(timerId);
timerDisplay.textContent = 'Время вышло!';
} else {
timerDisplay.textContent = remainingTime;
}
}, 1000);
});

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

Frontend-разработчик junior +
🟢JavaScript, Vue 2, Vuex, Vite, HTML, CSS, SCSS, Git
🟢от 50 000 до 70 000 ₽ | 1–3 года опыта

Frontend-разработчик (Vue.js)
🟢JavaScript, Vue.js, Nuxt.js, Vuex, Pinia, CSS, HTML5, SASS, RESTful API, Git
🟢от 100 000 до 130 000 ₽ | 1–3 года опыта

Junior React Developer
🟢JavaScript, React, HTML, CSS3, GitHub, Redux, Less, Sass
🟢от 60 000 ₽ | Без опыта

👩‍💻 Cube & Dots Loader

Анимированная загрузка в виде точек и куба. Сделана на чистом CSS.

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

⚙️ В чем разница между == и === в JavaScript?

В JavaScript операторы == и === используются для сравнения, но ведут себя по-разному. == выполняет нестрогое сравнение, при котором JavaScript может преобразовать типы данных для сопоставления значений. В отличие от него, === выполняет строгое сравнение, проверяя как значение, так и тип данных, без приведения типов.

➡️ Пример:

console.log(5 == '5');   // true, так как '5' преобразуется к числу
console.log(5 === '5');  // false, так как разные типы данных

console.log(null == undefined);  // true, при нестрогом сравнении они считаются равными
console.log(null === undefined); // false, строгий оператор учитывает типы данных

🗣️ Использование === рекомендуется для избегания ошибок, связанных с преобразованием типов. Это помогает сделать код более предсказуемым и читаемым.

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

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

Наставник на онлайн-курс "Frontend-разработчик"
• Angular, HTML, CSS, JavaScript, Node.js, Webpack, JQuery, TypeScript
• от 25 000 ₽ на руки | 1–3 года

React разработчик
• React, Redux, TypeScript, Material-UI, Webpack
• Уровень дохода не указан | 1–3 года

Middle React Developer
• React, Next.js, TypeScript, Effector, TailwindCSS, WebSockets, Семантическая и валидная верстка
• от 150 000 ₽ на руки | 1–3 года

👩‍💻 CSS :has() — Псевдокласс, который давно ждали

Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов.

Читать...

👩‍💻 Простой калькулятор с динамическим вводом

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

Требования:

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

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

<div>
<input type="number" id="num1" placeholder="Введите первое число">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="Введите второе число">
</div>
<div>
<h3>Результат: <span id="result">0</span></h3>
</div>

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operation = document.getElementById('operation');
const result = document.getElementById('result');

function calculate() {
const value1 = parseFloat(num1.value) || 0;
const value2 = parseFloat(num2.value) || 0;

let res = 0;
switch (operation.value) {
case 'add':
res = value1 + value2;
break;
case 'subtract':
res = value1 - value2;
break;
case 'multiply':
res = value1 * value2;
break;
case 'divide':
res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)';
break;
}

result.textContent = res;
}

[num1, num2, operation].forEach(element => {
element.addEventListener('input', calculate);
});

⚙️ Кнопки с несколькими состояниями

Как правило, кнопки либо нажаты, либо нет. Но при условии, что обеспечена доступность, можно сделать группу радиокнопок внешне похожей на кнопку с несколькими состояниями с помощью CSS-хитростей.

Читать...

Привет! 👋
Мы нашли канал, на котором каждый день публикуются увлекательные и полезные материалы, которые вы так долго искали! 😎

Здесь вы найдёте:
• рецепты кода
• мемы
• интересные статьи и факты
• викторины
• макеты
• иконки
• полезные ссылки
И это еще не всё! Здесь много интересного!

Да-да! Всё в 1 канале!
Подписывайся скорее пока доступ не пропал! 🧑‍💻

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

Fullstack TypeScript Developer [Senior]
• TypeScript, Node.js, React, SQL, Kubernetes, Docker
• Уровень дохода не указан | Более 6 лет

Fullstack Web Разработчик
• HTML, CSS, JavaScript, Laravel, Vue.js, Nuxt.js, React, TypeScript, MySQL, Redis
• от 3 000 $ на руки | 3–6 лет

Senior FullStack-разработчик
• PHP, Laravel, Vue.js, Redis, MySQL, JavaScript
• Уровень дохода не указан | 3–6 лет

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

• Как сделать резюме, которое дойдёт до работодателя. Фильтры ATS в 2025 году

• Ошибайся смело: жизненные уроки из мира machine learning

• Как учиться во взрослом возрасте: 7 советов, проверенных на практике

• Нейросети, чат-бот и диджитал-адаптация: цифровые инструменты внутрикома

• Долгосрочная стабильность vs. карьерная мобильность

⚙️ 9 open source библиотек для вашего следующего проекта

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

В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект.

Читать...

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

AbortController — это API, который позволяет отменять асинхронные операции, такие как запросы fetch. Это полезно для предотвращения утечек ресурсов и отмены операций, которые больше не нужны.

➡️ Пример:

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

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

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

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

Senior Front-End (React) разработчик
🟢React.js, Redux, TypeScript, CSS, REST API, Flux
🟢от 4 000 до 5 000 $ до вычета налогов | Более 6 лет

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

Руководитель группы разработки (Team lead)
🟢PHP, Node.js, Laravel, Docker, Kubernetes, MySQL, Redis, Backend, Frontend
🟢от 200 000 ₽ на руки | Более 6 лет

🤔 Разбираемся с цветами: пространства, иллюзии и квантование

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

Читать...

🎯 Ставь цели на день через "3 приоритета"

Начал день с длинного списка задач, а к вечеру понял, что толком ничего не сделал? Это классический перегруз.

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

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

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

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

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

👩‍💻 Реализация интерактивной карты

Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию.

Читать...

👩‍💻 Remove anchor from URL

Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#).

Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"

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

function removeUrlAnchor(url) {
return url.split('#')[0];
}

// Примеры использования
console.log(removeUrlAnchor("www.codewars.com#about")); // "www.codewars.com"
console.log(removeUrlAnchor("www.codewars.com?page=1")); // "www.codewars.com?page=1"