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

🔝 Самые интересные статьи за последние дни: • CSS-классы вредны • Как узнать количество перерисовок? React Custom Hook: useRenderCount • Как добавить кэширование в ваше React приложение • Как компилировать json или история оптимизации python сервиса • Web components как альтернатива iframe на примере Angular-компонентов

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

🖥 15 сайтов для экономии времени разработчика Хотите больше времени на новые интересные задачи, решение сложных проблем или просто уходить с работы вовремя? Эти 15 сайтов помогут вам существенно ускорить процесс разработки. Читать...

👩‍💻 Toggle Pill Набор переключателей с разными стилями анимаций. Сделан на чистом CSS. Открыть код...

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

👩‍💻 Array.diff Ваша цель в этом ката — реализовать функцию разности, которая вычитает один список из другого и возвращает результат. Нужно удалить все значения из списка a, которые присутствуют в списке b, сохраняя их порядок. Пример кода: array_diff([1,2],[1]) == [2] Если значение присутствует в b, все его вхождения должны быть удалены из другого: array_diff([1,2,2,2,3],[2]) == [1,3]

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

function array_diff(a, b) { return a.filter(item => !b.includes(item)); } // Примеры использования: console.log(array_diff([1, 2], [1])); // [2] console.log(array_diff([1, 2, 2, 2, 3], [2])); // [1, 3] console.log(array_diff([1, 2, 2], [1])); // [2, 2] console.log(array_diff([1, 2, 2], [])); // [1, 2, 2] console.log(array_diff([], [1, 2])); // []

👩‍💻 Итераторы в JavaScript В этой статье мы раскроем всю мощь и многогранность итераторов JavaScript. Если вам случалось работать с коллекциями данных и задаваться вопросом, есть ли более эффективный и элегантный способ работы с ними, то вы попали по адресу. Читать...

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

🔝 Самые интересные статьи за последние дни: • Книга: «Hypermedia-разработка. htmx и Hyperview» • React Query: стейт-менеджер для любителей кэша • Как мы OpenAPI в приложениях используем (Spring Boot, Typescript) • Расширяем возможности мобильного приложения на WebView. Опыт Ozon Банк • JavaScript: структуры данных и алгоритмы. Часть 2

👩‍💻 Fancy Fading Footer Стильный футер с эффектом блюра. Сделан на чистом CSS. Открыть код...

⚙️ Создание приложения для отслеживания фильмов с помощью HTML, CSS и JavaScript Ознакомьтесь с разработкой веб-приложения MovieVerse. Эта удобная платформа позволит пользователю без труда изучать обширную коллекцию постеров к фильмам, добавляя выбранные фильмы в список просмотра. Читать...

👩‍💻 Составим слово Необходимо написать алгоритм для проверки того, может ли заданная строка s быть составлена из двух других строк, part1 и part2. Ограничение состоит в том, что символы в частях part1 и part2 должны быть в том же порядке, что и в s. Пример кода:

isMerge('xcyc', 'xc', 'yc') => true
isMerge('codewars', 'code', 'wars') => true
isMerge('More progress', 'More ess', 'pro') => false
isMerge('Making progress', 'Mak pross', 'inggre') => true

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

function isMerge(s, part1, part2) { if (s.length !== part1.length + part2.length) return false; const dp = Array(part1.length + 1).fill(true).map(() => Array(part2.length + 1).fill(true)); for (let i = 0; i <= part1.length; i++) { for (let j = 0; j <= part2.length; j++) { if (i > 0) dp[i][j] = dp[i][j] && (s[i + j - 1] === part1[i - 1] && dp[i - 1][j]); if (j > 0) dp[i][j] = dp[i][j] && (s[i + j - 1] === part2[j - 1] && dp[i][j - 1]); } } return dp[part1.length][part2.length]; } // Примеры использования console.log(isMerge('xcyc', 'xc', 'yc')); // => true console.log(isMerge('codewars', 'code', 'wars')); // => true console.log(isMerge('More progress', 'More ess', 'pro')); // => false console.log(isMerge('Making progress', 'Mak pross', 'inggre')); // => true

✔️ ТОП-10 шаблонизаторов для фронтенд-разработки Шаблонизаторы используются во фронтенд-разработке для создания компонентов, помогая разработчикам писать более чистый и удобный для поддержки код. Они избавляют от необходимости повторять один и тот же код. В этой статье мы рассмотрим десять популярных шаблонизаторов и узнаем, как с их помощью создавать простые шаблоны. Читать...

👩‍💻 Как использовать селектор :has() в CSS По своей сути селектор :has() является реляционным псевдоклассом. Это означает, что он позволяет выбрать элемент на основе его отношений с другими элементами. Читать...

👩‍💻 Не бойтесь генераторов JavaScript Все еще пренебрегаете генераторами JavaScript? И совершенно напрасно. Узнайте, как использовать эти мощные средства для управления асинхронным программированием, создания итерируемых объектов и выдачи нескольких значений. Читать...

👩‍💻 CSS Gradients Ani Анимированный градиентный фон. Сделан на SVG и CSS. Открыть код...

🔼9 главных трендов в разработке фронтенда в 2024 году Самые популярные языки, технологии, инструменты и архитектурные концепции. Читать...

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

👩‍💻 ТОП способов применять принципы SOLID в React Давайте разберем, зачем нужны принципы SOLID и как использовать их в ваших React-приложениях. Читать...

👩‍💻 Underwater Background #2 Анимированный фон страницы. Сделан на SVG и CSS. Открыть код...