👩‍💻 Вычислить IP

Напишите функцию, которая получает два IPv4-адреса и возвращает количество адресов между ними (включая первый, исключая последний).

Все входные данные будут действительными IPv4-адресами в виде строк. Последний адрес всегда будет больше первого.

Пример кода:

ipsBetween("150.0.0.0", "150.0.0.1") => 1
ipsBetween("10.0.0.0", "10.0.0.50") => 50
ipsBetween("10.11.12.13", "10.11.13.0") => 243
ipsBetween("50.0.0.0", "50.1.1.1") => 65793

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

function ipsBetween(start, end) {
// Функция для преобразования IP-адреса в число
function ipToNumber(ip) {
return ip.split('.').reduce((acc, octet) => (acc << 8) + parseInt(octet, 10), 0);
}

// Преобразование начального и конечного IP-адреса в числа
const startNum = ipToNumber(start);
const endNum = ipToNumber(end);

// Возвращаем количество адресов между ними
return endNum - startNum;
}

// Примеры использования
console.log(ipsBetween("150.0.0.0", "150.0.0.1")); // => 1
console.log(ipsBetween("10.0.0.0", "10.0.0.50")); // => 50
console.log(ipsBetween("10.11.12.13", "10.11.13.0")); // => 243
console.log(ipsBetween("50.0.0.0", "50.1.1.1")); // => 65793

🔝 Эффективные способы реализации паттерна Singleton в JavaScript и TypeScript

Рассказываем о лучших подходах к созданию паттерна Singleton в JavaScript и TypeScript. Также обсудим его плюсы и возможные недостатки при использовании в проектах.

Читать...

👩‍💻 Предоставление определения типа для CSS с @property

Пишите более безопасный CSS, используя @property, позволяющий определять типы для пользовательских свойств. Узнайте, почему традиционные запасные значения могут не сработать и как функции @property повышают устойчивость определений пользовательских свойств.

Читать...

👩‍💻 Collapsible Timeline

Таймлайн с возможностью раскрывать пункты. Сделан на SVG, CSS и JavaScript.

Открыть код

😈 Разработчики dzen.ru, что с вами не так?

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

Читать...

👩‍💻 Откройте для себя весь потенциал AbortController

В этой статье я расскажу об одном из стандартных API JavaScript, о котором, вы, возможно не слышали. Это AbortController.

Читать...

👩‍💻 Тонкая настройка текстовых полей

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

Читать...

👩‍💻 Две мощные техники: CSS Reset и normalize.css

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

Читать...

👩‍💻 Использование CSS анимации, основанной на прокрутке, для индикации прогресса прокрутки на основе секций

Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль.

Читать...

👩‍💻 Новый оператор безопасного присваивания в JavaScript: ?=

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

Читать...

👩‍💻 String ends with?

Завершите решение так, чтобы оно возвращало значение true, если переданный первый аргумент (строка) заканчивается 2-м аргументом (также строкой).

Пример кода:

solution('abc', 'bc') // returns true
solution('abc', 'd') // returns false

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

function solution(str, ending) {
return ending === '' || str.slice(-ending.length) === ending;
}

// Примеры использования
console.log(solution('abc', 'bc')); // возвращает true
console.log(solution('abc', 'd')); // возвращает false
console.log(solution('abc', '')); // возвращает true

👩‍💻 7 полезных HTML-трюков для веб-разработчиков

Представляем семь HTML-приемов, которые помогут вам создавать более удобные и привлекательные сайты, улучшая взаимодействие с пользователями.

Читать...

👩‍💻 Hover Glyph Button

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

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

✔️ Практические советы по доступности, которые можно внедрить сегодня

Часто, спеша завершить проект, мы создаём элементы интерфейса, не думая о доступности. Однако небольшие изменения могут значительно улучшить опыт пользователей. Доступность — это не сложная задача, а способ сделать продукт удобным для всех, независимо от их навыков и устройств.

Читать...

👩‍💻 Создание анимации орбиты с помощью CSS переменных

Давайте анимируем CSS переменные! Это мощный способ применения CSS анимации, которая в противном случае была бы утомительной или непрактичной.

Читать...

👩‍💻 Check Done SVG Animated

Красиво анимированная галочка. Сделана на SVG и SCSS.

Открыть код

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

• Bootstrap или свое решение

• Что нас ждет в Next.js 15: обзор заявленных новинок

• Valkey: миллион RPS c напёрстком дёгтя

• Откройте для себя весь потенциал AbortController

• Посмотрим на never с разных сторон?

👩‍💻 Практические советы по доступности, которые можно применить сегодня

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

Читать...

👩‍💻 Создание навигации с «плавающим» фоном ссылок на чистом CSS

Если у вас есть аккаунт на Vercel, вы, наверное, замечали, как плавно фон ссылок в панели навигации перемещается, следуя за курсором мыши. Такого эффекта несложно добиться с помощью CSS и нескольких строчек JS. Однако, интереса ради, я решил попробовать добиться похожего эффекта на чистом CSS.

Читать...

⬇️ Бесконечная прокрутка логотипов на чистом HTML и CSS

Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции.

Читать...

👩‍💻 Анимация элемента dialog

Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete.

Читать...