👩‍💻 Топ библиотеки React 2024 года

В этом руководстве представлены самые популярные библиотеки React 2024 года. Они помогают настраивать и оформлять приложения, управлять состоянием, получать данные, выполнять маршрутизацию и аутентификацию. С их помощью вы сможете создавать полноценные мобильные и веб-приложения.

Читать...

💡 SEO для разработчиков: что нужно знать программистам в 2024 году

Технические основы СЕО для программистов: что нужно знать о мета-тегах, микроразметке, UX/UI, карте сайта, коде 404, подзаголовках.

Читать...

🖥 Как эффективно оптимизировать большой объем данных во фронтенде

Оптимизация производительности является ключевым аспектом разработки веб-приложений, особенно когда речь идет о работе с большими объемами данных. Именно такая задача была поставлена перед фронтенд-разработчиками IT Test. Рассказываем, как оптимизировать код и найти баланс между производительностью и читаемостью.

Читать...

👩‍💻 Two to One

Возьмите 2 строки s1 и s2, включающие только буквы от a до z. Верните новую отсортированную строку, максимально длинную, содержащую различные буквы - каждая из которых берется только один раз - исходящие из s1 или s2.

Пример кода:

a = "xyaabbbccccdefww"
b = "xxxxyyyyabklmopq"
longest(a, b) -> "abcdefklmopqwxy"

a = "abcdefghijklmnopqrstuvwxyz"
longest(a, a) -> "abcdefghijklmnopqrstuvwxyz"

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

function longest(s1, s2) {
// Объединяем строки
let combined = s1 + s2;

// Преобразуем строку в массив, используя Set для удаления дубликатов
let uniqueChars = [...new Set(combined)];

// Сортируем массив
uniqueChars.sort();

// Преобразуем обратно в строку и возвращаем результат
return uniqueChars.join('');
}

// Примеры использования
let a = "xyaabbbccccdefww";
let b = "xxxxyyyyabklmopq";
console.log(longest(a, b)); // "abcdefklmopqwxy"

a = "abcdefghijklmnopqrstuvwxyz";
console.log(longest(a, a)); // "abcdefghijklmnopqrstuvwxyz"

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

• React: одна любопытная особенность порталов

• Формат описания идентификатора зависимости в JS DI

• Думаете, вы всё знаете о box shadows?

• PHP функции и способы их применения

• Все, что вы хотели знать про иерархию инжекторов в Angular

❓ Почему стоит задуматься о разработке статических сайтов

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

Читать...

👩‍💻 Обзор 10 приемов JavaScript для эффективного программирования

Пополни знания JavaScript 10 эффективными приемами и начни использовать его возможности по максимуму.

Читать...

👩‍💻 Fancy wipe

Стильный текст с анимированным появлением. Сделан на чистом CSS.

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

🖥 В чем разница между UI и UX. Детальное сравнение

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

Читать...

👾 10 игр для изучения JavaScript

В этой статье вы найдете десятку интересных игр для изучения JavaScript. Попробуйте их, ведь учиться, играя, куда легче!

Читать...

👩‍💻 5 маленьких, но полезных библиотек React

Несколько библиотек React, которые мы рассмотрели в этой статье, довольно полезные и при том маленькие и простые в использовании.

Читать...

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

• DRY-фреймворк: как сократить HTML-код и писать только на CSS

• Ультимативный ресурс по программированию: сборник бесплатных чит-листов по программированию

• Atomic CSS Deep Dive

• Создание кастомного интерактивного одностраничного минисайта с ИИ без платных сервисов

• Polling vs Websockets (с примерами на React хуках)

👩‍💻 Refs в React: от доступа к DOM до императивного API

React достаточно удобный инструмент для создания веб-приложений. Еще больше его возможности расширяют рефы (Ref или Reference), действующие как ссылки на элементы кода React и упрощающие решение нестандартных задач.

Читать...

➡️ Tailwind CSS: как разработать продвинутую пользовательскую анимацию

Анимация с Tailwind CSS обеспечивает отличный пользовательский опыт. Ознакомьтесь с примерами, демонстрирующими различные эффекты анимации, такие как вращение, подпрыгивание, пульсация, переворачивание и покачивание.

Читать...

👩‍💻 Exes and Ohs

Проверьте, содержит ли строка одинаковое количество "x" и "o". Метод должен возвращать логическое значение и быть нечувствительным к регистру. Строка может содержать любой символ.

Пример кода:

XO("ooxx") => true
XO("xooxx") => false
XO("ooxXm") => true
XO("zpzpzpp") => true // when no 'x' and 'o' is present should return true
XO("zzoo") => false

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

function XO(str) {
// Преобразуем строку в нижний регистр
str = str.toLowerCase();

// Подсчитываем количество 'x' и 'o'
let xCount = 0;
let oCount = 0;

for (let char of str) {
if (char === 'x') xCount++;
if (char === 'o') oCount++;
}

// Сравниваем количество 'x' и 'o'
return xCount === oCount;
}

// Примеры использования
console.log(XO("ooxx")); // true
console.log(XO("xooxx")); // false
console.log(XO("ooxXm")); // true
console.log(XO("zpzpzpp")); // true
console.log(XO("zzoo")); // false

⚙️ 7 HTML-трюков, которые вам нужно знать

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

Читать...

🖥 Генераторы CSS-кода: самая полная коллекция

Коллекция генераторов CSS-кода для разнообразных элементов дизайна UI (фоны, градиенты, кнопки, разделители, тени, фильтры изображений).

Читать...

👩‍💻 Что такое замыкания в JavaScript?

В этой статье мы рассмотрим замыкания в JavaScript. Вы познакомитесь с определением замыкания и разберетесь в его работе на примере.

Читать...

👩‍💻 CSS-only Custom range slider

Интересный слайдер с динамичным отображением. Сделан на чистом CSS.

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

👩‍💻 VS Code на максималках: 15 крутых расширений для фронтендера

Собрали для вас 15 плагинов, которые облегчат жизнь веб-разработчику. Тут всё: от работы с HTML до интеграции с Figma и Docker.

Читать...

👩‍💻 Which are in?

Данные два массива строк a1 и a2 возвращают отсортированный массив r в лексикографическом порядке строк a1, которые являются подстроками строк a2.

Пример кода:

a1 = ["arp", "live", "strong"]
a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

вернет ["arp", "live", "strong"]

a1 = ["tarp", "mice", "bull"]
a2 = ["lively", "alive", "harp", "sharp", "armstrong"]

вернет []

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

function inArray(array1, array2) {
return array1.filter(str1 =>
array2.some(str2 => str2.includes(str1))
).sort();
}

// Примеры использования:
let a1 = ["arp", "live", "strong"];
let a2 = ["lively", "alive", "harp", "sharp", "armstrong"];
console.log(inArray(a1, a2)); // вернет ["arp", "live", "strong"]

a1 = ["tarp", "mice", "bull"];
a2 = ["lively", "alive", "harp", "sharp", "armstrong"];
console.log(inArray(a1, a2)); // вернет []