Логово верстальщика

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

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

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

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

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

JavaScript сегодня отмечает 30-летие 🎂 Именно 4 декабря 1995 года миру показали язык под знакомым нам названием — JavaScript. ❌ Вот история именинника:

• У языка было три имени за пару месяцев. Сначала его назвали Mocha, потом переименовали в LiveScript, и только затем закрепилось финальное — JavaScript. • К Java он почти не имеет отношения. Название выбрали скорее как маркетинговый ход: в середине 90-х вокруг Java был мощный хайп, и на эту волну просто запрыгнули. • JS слепили всего за 10 дней. Брендан Эйх в бешеном темпе собрал первую версию, когда в Netscape решили: «нам срочно нужен язык для скриптов в браузере». • Создатель языка успел стать CEO Mozilla — и быстро лишиться должности. Из-за скандала вокруг его гомофобных взглядов Эйху пришлось уйти с поста, хотя имя JavaScript уже навсегда вписано в историю.

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

⚙️ 9 open source библиотек для вашего следующего проекта Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же. В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект. Читать...

👩‍💻 Простой калькулятор с динамическим вводом Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически. Требования: • Два текстовых поля для ввода чисел. • Выпадающий список для выбора операции. • Динамическое отображение результата при изменении любого из входных значений. Решение задачи🔽

<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 :has() — Псевдокласс, который давно ждали Преобразуйте свой CSS с помощью псевдокласса :has(), позволяющего стилизовать элементы на основе их дочерних элементов. Читать...

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

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

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

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

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

👩‍💻 Cube & Dots Loader Анимированная загрузка в виде точек и куба. Сделана на чистом CSS. Открыть код...

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

🔝 Самые интересные статьи за последние дни: • DRY-фреймворк: продолжение • Как нарисовать квадрат 3 × 3 см на веб-странице* • Скучный Интернет и как «бесполезные сайты» могут спасти от этого • Простой мини-чат на FastApi: Современный интерфейс, вебсокеты и SQLAlchemy с деплоем • Как мотивировать себя на правильные вещи

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

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

👩‍💻 Полное руководство по “this” в JavaScript Благодаря поддержке Unicode 16 расширение MBString может работать со всеми новейшими символами Emoji, а также имеет самую актуальную информацию о смене регистра и ширине символов. Читать...

👩‍💻 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; }

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

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

👩‍💻 BCMath: Новая функция bcdivmod bcdivmod может быть использован в случаях, когда необходимо получить частное и остаток от деления, и избавляет от необходимости вызывать функции bcdiv и bcmod по отдельности. Читать...

📐 Стандарты — это не бюрократия, а освобождение Кажется, что code style, правила коммитов и шаблоны PR — скучная формальность? На деле это способ сэкономить мозг. 👉 Совет: стандартизируй мелочи: от названий веток до структуры директорий. Это избавляет от принятия сотен ненужных решений и оставляет ресурсы на то, что важно — на саму логику и архитектуру.