🦕 7 HTML-привычек, которые выдают в тебе динозавра

Пора устроить генеральную уборку в твоем HTML. Мы нашли 7 устаревших приемов, которые кричат: «Я застрял в прошлом!» Разберем каждый и найдем современную замену. Готов к обновлению?

Читать...

➡️ Главные ошибки новичков-фронтендеров в HTML

Рассказываем про частые ошибки в HTML и о том, как их избежать. Добавляйте в закладки!

Читать...

👩‍💻 ISBN-10

Идентификаторы ISBN-10 состоят из десяти цифр. Первые девять символов - это цифры 0-9. Последняя цифра может быть от 0 до 9 или X, чтобы указать значение 10.

Номер ISBN-10 действителен, если остаток при делении суммы произведений цифр и их позиций на 11 равен 0.

Алгоритм:

ISBN: 1 1 1 2 2 2 3 3 3 9
Позиция: 1 2 3 4 5 6 7 8 9 10
Это действительный ISBN, потому что:
(1*1 + 1*2 + 1*3 + 2*4 + 2*5 + 2*6 + 3*7 + 3*8 + 3*9 + 9*10) % 11 = 0

Пример кода:

validISBN10("1112223339") => true
validISBN10("048665088X") => true
validISBN10("1234512345") => false
validISBN10("XXXXXXXXXX") => false
validISBN10("048665088XZ") => false

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

function validISBN10(isbn) {
if (isbn.length !== 10) {
return false;
}

let sum = 0;
for (let i = 0; i < 10; i++) {
let char = isbn[i];
let value;

if (i === 9 && char === 'X') {
value = 10;
} else if (char >= '0' && char <= '9') {
value = parseInt(char, 10);
} else {
return false;
}

sum += value * (i + 1);
}

return sum % 11 === 0;
}

👩‍💻 Полное руководство по “this” в JavaScript

Благодаря поддержке Unicode 16 расширение MBString может работать со всеми новейшими символами Emoji, а также имеет самую актуальную информацию о смене регистра и ширине символов.

Читать...

👩‍💻 Как сделать таймер на CSS

Давайте рассмотрим использование CSS в качестве альтернативы JavaScript для создания простых таймеров. Используем современные свойства CSS, такие, как @property, @keyframes, и псевдоэлементы со значениями counter().

Читать...

👩‍💻 5 непростых вопросов по JavaScript

Разберем пять непростых вопросов: о сравнениях, пустых массивах, странном try catch, стрелочной функции и коварном JSON.stringify. Сможете ответить на них правильно?

Читать...

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

• DRY-фреймворк: продолжение

• Как нарисовать квадрат 3 × 3 см на веб-странице*

• Скучный Интернет и как «бесполезные сайты» могут спасти от этого

• Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем

• Как мотивировать себя на правильные вещи

⛏ 11 инструментов для ускорения создания пользовательского интерфейса

Предлагаем подборку бесплатных инструментов для стилистического оформления пользовательских интерфейсов. Они помогут фронтенд-разработчикам и дизайнерам существенно сэкономить время и повысить производительность.

Читать...

👩‍💻 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, строгий оператор учитывает типы данных

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

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

👩‍💻 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-хитростей.

Читать...

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

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

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

Читать...

JavaScript сегодня отмечает 30-летие 🎂

Именно 4 декабря 1995 года миру показали язык под знакомым нам названием — JavaScript.

❌ Вот история именинника:

• У языка было три имени за пару месяцев.
Сначала его назвали Mocha, потом переименовали в LiveScript, и только затем закрепилось финальное — JavaScript.

• К Java он почти не имеет отношения.
Название выбрали скорее как маркетинговый ход: в середине 90-х вокруг Java был мощный хайп, и на эту волну просто запрыгнули.

• JS слепили всего за 10 дней.
Брендан Эйх в бешеном темпе собрал первую версию, когда в Netscape решили: «нам срочно нужен язык для скриптов в браузере».

• Создатель языка успел стать CEO Mozilla — и быстро лишиться должности.
Из-за скандала вокруг его гомофобных взглядов Эйху пришлось уйти с поста, хотя имя JavaScript уже навсегда вписано в историю.

🎉 Поздравляем старичка, который до сих пор двигает весь веб.

⚙️ Что такое 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 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

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

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

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

Читать...

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

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

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

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

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

Читать...

🌎 Google не разрешает сотрудникам использовать свою же недавно выпущенную IDE Antigravity

И, видимо, не зря — реддитор рассказал, что ИИ-агент Antigravity случайно удалил весь его диск, пока пытался исправить баг:

«Я просматриваю журналы с предыдущего шага и с ужасом вижу, что команда, которую я выполнил для очистки кэша проекта (rmdir), по всей видимости, ошибочно указала на корень вашего диска D:, а не на конкретную папку проекта.
Мне очень, очень жаль.»

✖️ xCode Journal

👩‍💻 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"