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

Онлайн-магистратура с IT специальностями от Яндекса Совместно с ИТМО, МИФИ, МФТИ. Онлайн-магистратура с актуальными программами и гибким графиком обучения. Получите высокооплачиваемую IT профессию, официальный диплом и практические знания. Господдержка оплаты. Совмещение с работой! Узнать больше #реклама 16+ О рекламодателе

👩‍💻 Получение размера окна на чистом CSS Вы не поверите, но теперь в CSS можно определять свойства, выполнять математические вычисления и даже напрямую получать размер окна! В этой статье мы расскажем вам, как это делается. Читать...

👩‍💻 Распространенные алгоритмы и структуры данных в JavaScript: стеки, очереди и связные списки Рассмотрим другие (массивоподобные) структуры – стеки, очереди и связные списки. Читать...

👩‍💻 ТОП-5 вопросов и ответов по JavaScript на Stack Overflow за все время Ответы на пять вопросов, ставящих в тупик каждого второго фронтендера. Читать...

👩‍💻 Код гласных Напишите функцию с именем encode() для замены всех строчных гласных в заданной строке числами в соответствии со следующим шаблоном:

a => 1
e => 2
i => 3
o => 4
u => 5

Пример кода:

encode("hello") => "h2ll4"

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

decode("h3 th2r2") => "hi there"

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

function encode(str) { // Создаем объект для соответствия гласных и чисел const vowelsToNum = { 'a': '1', 'e': '2', 'i': '3', 'o': '4', 'u': '5' }; // Заменяем каждую гласную в строке соответствующим числом return str.replace(/[aeiou]/g, match => vowelsToNum[match]); } function decode(str) { // Создаем объект для соответствия чисел гласным const numToVowels = { '1': 'a', '2': 'e', '3': 'i', '4': 'o', '5': 'u' }; // Заменяем каждую цифру в строке соответствующей гласной return str.replace(/[1-5]/g, match => numToVowels[match]); } // Тестирование функций console.log(encode("hello")); // должно вывести "h2ll4" console.log(decode("h3 th2r2")); // должно вывести "hi there"

👩‍💻 Как структурировать API-вызовы при автоматизированном тестировании с Playwright и JavaScript Разберемся, как наилучшим образом настроить авторизацию и другие предварительные шаги, которые повторяются сразу в нескольких тестах - и при этом сохранить читаемость и ясность кода. Читать...

👩‍💻 4 крутых хука React, которые нужны каждому девелоперу Добавь в свою коллекцию 4 полезных пользовательских хука для React. Они помогут сделать код чище, масштабируемее и упростят работу над проектами. Читать...

🔝 Самые интересные статьи за последние дни: • Изнанка электронных календарей: как работает спецификация iCalendar и как создавать .ics-файлы • Книга: «Рецепты PHP. Для профессиональных разработчиков» • TypeScript клиент для Wildberries API • Настройка алиасов путей с помощью Node.js Subpath Imports в TypeScript проекте • В помощь разработчику: 6 полезных библиотек визуализации данных

В CSS появилось удобное центрирование объектов одной строкой кода через align-content В 2024 году CSS получила долгожданное обновление — свойство align-content, которое устраняет сложные обходные решения для вертикального центрирования элементов. Теперь веб-разработчики могут центровать контент всего одной строкой кода. Читать...

📈 Делай заметки во время дебага, а не после Расследуешь баг, находишь кучу деталей — а через час всё смешивается в голове и приходится начинать заново. 👉 Совет: веди короткие заметки прямо в процессе отладки: какие гипотезы проверил, какой был результат. Даже пара строчек после каждого шага помогут быстро собрать полную картину и не упустить важное.

🪄 25 CSS-трюков, которые должен знать каждый разработчик Современный веб-дизайн требует глубокого понимания возможностей CSS. Мы расскажем о 25 передовых CSS-техниках, которые помогут вам создавать стильные, функциональные и производительные веб-сайты, соответствующие последним трендам. Читать...

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

👩‍💻 Стек вызовов JavaScript: объяснение с помощью иллюстраций Как выполняются функции в Javascript? Каков порядок их выполнения? Что такое контекст выполнения? Отвечаем на эти вопросы с иллюстрациями. Читать...

📈 Подборка статей для вашей карьеры • Мои Red-Flags при устройстве в IT-компании: Как не стать гребцом. Часть 2 • Циничные заметки о карьере в IT от «гейткипера» • Язык как проект: как продакт-менеджеру учить английский • Всероссийский рейтинг IT-брендов работодателей 2024 • Моя петиция EB-1A на грин-карту талантов, одобренная с первой попытки

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

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

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

Снова радуем вас подборкой самых популярных каналов на тему IT и технологий🤖 В современном мире технологии становятся неотъемлемой частью нашей жизни. В этом посте мы расскажем о ключевых моментах, на которые стоит обратить внимание и представим коллекцию каналов, которые помогут вам оставаться в курсе последних тенденций. - Технологические достижения Технологический прогресс стремительно движется вперед. Каждый день мы становимся свидетелями новых прорывов в области IT. Следите за последними новостями и анализами, чтобы понимать, как они могут повлиять на ваш бизнес или личную жизнь. - Влияние на повседневность IT делают нашу жизнь проще и удобнее. Персонализированные приложения помогают нам управлять временем, финансами и даже здоровьем. Узнайте, как эти технологии могут улучшить качество вашей жизни и повысить вашу продуктивность. - Оптимизация бизнеса Компании по всему миру активно внедряют современные технологии для оптимизации своих процессов. Исследуйте успешные кейсы их использования в различных отраслях и узнайте, как вы можете применить эти решения в своем бизнесе. - Образование IT также меняет подход к обучению. Узнайте, как новые технологии помогают студентам и преподавателям достигать лучших результатов и как вы можете использовать их в своем обучении. - Этические вопросы С развитием технологий возникают и новые этические вопросы. Как обеспечить безопасность данных пользователей? Как избежать предвзятости алгоритмов? Обсуждение этих тем становится все более актуальным. - Будущее IT Технологии продолжают развиваться, и важно следить за новыми трендами. Ознакомьтесь с новыми возможностями и подумайте о том, как они могут изменить ваш бизнес или повседневную жизнь. Чтобы быть в курсе всех этих изменений подписывайтесь на наши каналы. Мы собрали лучшие ресурсы, которые помогут вам оставаться на передовой технологических новшеств! 👉 Подписаться на каналы Следите за новыми трендами в IT! 🌐

👩‍💻 Neumorphic Rocker Switch Анимированный переключатель в стиле неоморфизм. Сделан на SCSS и TypeScript. Открыть код

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