👩‍💻 Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd

Овладейте искусством создания бесшовных и визуально привлекательных взаимодействий с перетаскиванием в React-приложениях с помощью библиотеки React Beautiful Dnd.

Читать...

👩‍💻 Будущее CSS: новейшие возможности языка декорирования

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

Читать...

👩‍💻 Хештег и точка

В этой задаче необходимо реализовать генератор хештэгов.

Условия:
— Выходная строка должна начинаться с хештега ( # )
— Во всех словах первая буква должна быть заглавной
— Если окончательный результат длиннее 140 символов, функция вернёт false
— Если ввод или результат представляет собой пустую строку, то функция должна вернуть false

Пример кода:

generateHashtag(" Hello there thanks for trying my Kata") => "#HelloThereThanksForTryingMyKata"
generateHashtag("    Hello     World   ") => "#HelloWorld"
generateHashtag("") => false

Решить задачу ⬅️

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

function generateHashtag(str) {
if (str.trim() === "") {
return false;
}

const words = str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1));
const hashtag = "#" + words.join("");

return hashtag.length <= 140 ? hashtag : false;
}

console.log(generateHashtag(" Hello there thanks for trying my Kata")); // "#HelloThereThanksForTryingMyKata"
console.log(generateHashtag(" Hello World ")); // "#HelloWorld"
console.log(generateHashtag("")); // false

👩‍💻 8 советов, которые сделают JavaScript-код чище

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

Читать...

💳 8 приложений и сайтов, за которые стоит заплатить: UX/UI edition

Предлагаем список полезных платных приложений и сайтов для UX/UI дизайнера и подробно рассматриваем их преимущества и особенности.

Читать...

👩‍💻 ООП на простых примерах

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

Читать...

👩‍💻 Scroll-Driven Dock

Настраиваемая панель инструментов. Сделана на SVG, CSS и JavaScript.

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

👩‍💻 Первые шаги в JavaScript: создание калькулятора

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

Читать...

➡️ Чистая архитектура фронтенда

Концепции и практики, такие как SOLID, KISS, DRY и DDD, помогут создавать более чистые архитектуры фронтенда. А правила создания компонентов с учетом развития бизнес-логики позволят коду оставаться ожидаемо поддерживаемым.

Читать...

⚙️ Микрофронтенд: что это такое и зачем он нужен?

В этой статье сравним разные способы организации микрофронтенда, изучим их преимущества и стратегии реализации.

Читать...

👩‍💻 Лайки, но не собаки

Вы, наверное, знаете систему «лайков» из Facebook. Люди «лайкают» публикации и рядом появляется текст. В этой задаче нужно создать текст, который должен отображаться рядом с таким элементом.

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

Пример кода:

likes([]) => 'no one likes this'
likes(['Peter']) => 'Peter likes this'
likes(['Jacob', 'Alex']) => 'Jacob and Alex like this'
likes(['Max', 'John', 'Mark']) => 'Max, John and Mark like this'
likes(['Alex', 'Jacob', 'Mark', 'Max']) =>  'Alex, Jacob and 2 others like this'

Для 4 и более имен число в строке "and 2 others" просто увеличивается

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

function likes(names) {
switch(names.length) {
case 0:
return "no one likes this";
case 1:
return `${names[0]} likes this`;
case 2:
return `${names[0]} and ${names[1]} like this`;
case 3:
return `${names[0]}, ${names[1]} and ${names[2]} like this`;
default:
return `${names[0]}, ${names[1]} and ${names.length - 2} others like this`;
}
}

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

• Способы запуска Telegram mini apps

• SOLID in React

• Секрет внутри одного миллиона чекбоксов

• Неизвестно полезный CSS. Часть 4

• Собираем данные из сотни микросервисов, или Как мы разобрали Ozon на кубики, а потом собрали заново

➡️ 50 лучших ресурсов с бесплатными HTML/CSS/JS шаблонами

50 сайтов, где можно скачать бесплатные шаблоны для HTML, CSS и JavaScript.

Читать...

👍 25 полезных HTML тегов, элементов и атрибутов, которые должен знать каждый фронтендер

В HTML есть средства для создания раскрывающихся виджетов, индикаторов прогресса и скалярных значений, переадресации на нужный URL, воспроизведения аудио/видео, сохранения форматирования кода и валидации с помощью regex.

Читать...

👩‍💻 Neumorphic Rocker Switch

Анимированный переключатель в стиле неоморфизм. Сделан на SCSS и TypeScript.

Открыть код

⚙️ 8 инструментов для разработчиков, которые нужно заценить в 2024 году

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

Читать...

👩‍💻 Sniper-CSS: как избавиться от неиспользуемых стилей

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

Читать...

👩‍💻 6 современных возможностей JavaScript, о которых не знает большинство разработчиков

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

Читать...

👩‍💻 Поиск анаграмм

Два слова являются анаграммами, если они оба содержат одни и те же буквы. Например: 'abba' и 'baab', 'abba' и 'bbaa'. Слова 'abba' и 'abbba', 'abba' и 'abca' не являются анаграммами.

Напишите функцию, которая найдет все анаграммы слова из списка. Функция будет принимать одно слово (строку) и один массив со словами (строками). Функция должна вернуть массив всех анаграмм или пустой массив, если их нет.

Пример кода:

anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']) - вернёт ['aabb', 'bbaa']

anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']) - вернёт ['carer', 'racer']

anagrams('laser', ['lazing', 'lazy',  'lacer']) - вернёт []

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

function isAnagram(word1, word2) {
return word1.split('').sort().join('') === word2.split('').sort().join('');
}

function anagrams(word, words) {
return words.filter(w => isAnagram(word, w));
}

// Test cases
console.log(anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada'])); // Output: ['aabb', 'bbaa']
console.log(anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer'])); // Output: ['carer', 'racer']
console.log(anagrams('laser', ['lazing', 'lazy', 'lacer'])); // Output: []

👩‍💻 Стек вызовов JavaScript: объяснение с помощью иллюстраций

Как выполняются функции в Javanoscript? Каков порядок их выполнения? Что такое контекст выполнения? Отвечаем на эти вопросы с иллюстрациями.

Читать...

✨ 13 библиотек для создания крутых анимаций на CSS

CSS-анимации проще в использовании и работают быстрее, чем на JavaScript. В этом материале собрали 13 полезных библиотек, которые помогут вам без заморочек создавать крутые анимационные эффекты.

Читать...