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

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

➡️ 50 лучших ресурсов с бесплатными HTML/CSS/JS шаблонами 50 сайтов, где можно скачать бесплатные шаблоны для HTML, CSS и JavaScript. Читать...

🔝 Самые интересные статьи за последние дни: • Способы запуска Telegram mini apps • SOLID in React • Секрет внутри одного миллиона чекбоксов • Неизвестно полезный CSS. Часть 4 • Собираем данные из сотни микросервисов, или Как мы разобрали Ozon на кубики, а потом собрали заново

👩‍💻 Лайки, но не собаки Вы, наверное, знаете систему «лайков» из 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`; } }

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

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

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

👩‍💻 Scroll-Driven Dock Настраиваемая панель инструментов. Сделана на SVG, CSS и JavaScript. Открыть код...

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

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

👩‍💻 8 советов, которые сделают JavaScript-код чище Проблемный код, даже если он более или менее работает, требует больших затрат на поддержку. Отточить навыки создания чистого кода, хорошо читаемого и легко поддерживаемого, помогут 8 простых советов. Читать...

👩‍💻 Хештег и точка В этой задаче необходимо реализовать генератор хештэгов. Условия: — Выходная строка должна начинаться с хештега ( # ) — Во всех словах первая буква должна быть заглавной — Если окончательный результат длиннее 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

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

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

🔝 Самые интересные статьи за последние дни: • Ваш плеер работает неправильно, или Как мы учили свой движок выбирать наилучшее качество видео • V8. Работа со строкам. Пополняем словарный запас • Как построить мост между JavaScript и C++ через WASM, или гайд для самых маленьких • Как понять, что сайт был загружен из кэша • Сериализация сущностей с помощью декораторов на TypeScript

👩‍💻 Firefly Button Кнопка с анимированным эффектом при наведении. Сделана на CSS, SVG и JavaScript. Открыть код...

👩‍💻 Как правильно оптимизировать изображения в HTML Сегодня у нас куча разных экранов и разрешений, так что нет смысла всем пользователям показывать одно и то же изображение. Читать...

‼️Тест по React JS от OTUS — Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене! 👉ПРОЙТИ ТЕСТ - https://otus.pw/4lW7/ Курс доступен в рассрочку. ❇️ Пройдите тест и получите: ✔️ Живое общение с экспертами ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «React.js Developer» Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

👩‍💻 JavaScript однострочники, которые сэкономят кучу времени Эти короткие, но мощные строчки кода поднимут твои навыки JavaScript на новый уровень и ускорят работу в разы. Читать...

👩‍💻 Операторы равенства == и === в JavaScript В JavaScript есть два разных оператора равенства: == и ===. Они оба используются для сравнения значений, но между ними есть различие. Читать...