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

🔎 Подборка вакансий для джунов React junior/middle 🟢React Native, TypeScript, CSS3, адаптивная верстка, Git 🟢от 70 000 до 150 000 ₽ | 1–3 года Junior Front-end разработчик 🟢HTML, CSS, JavaScript, CMS (WordPress, Bitrix), SEO 🟢от 50 000 до 80 000 ₽ | 1–3 года Junior Front-end developer 🟢JavaScript, React, Redux, Git, Sass 🟢от 80 000 до 120 000 ₽ | 1–3 года

👩‍💻 Модальное окно с закрытием по кнопке и фону Создайте модальное окно, которое открывается при клике на кнопку и закрывается при клике на кнопку закрытия или на фон вокруг модального окна. Ожидаемое поведение: • При клике на кнопку "Открыть модальное окно" появляется модальное окно. • Модальное окно закрывается при клике на кнопку "Закрыть" или на затемнённый фон. • Фон страницы не прокручивается, пока открыто модальное окно. Решение задачи🔽

<button id="openModal">Открыть модальное окно</button> <div id="modal" class="modal"> <div class="modal-content"> <span id="closeModal" class="close-button">&times;</span> <p>Это модальное окно</p> </div> </div> body.modal-open { overflow: hidden; } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .modal-content { background: white; padding: 20px; border-radius: 8px; position: relative; } .close-button { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; } const openModalBtn = document.getElementById('openModal'); const closeModalBtn = document.getElementById('closeModal'); const modal = document.getElementById('modal'); const body = document.body; openModalBtn.addEventListener('click', () => { modal.style.display = 'flex'; body.classList.add('modal-open'); }); closeModalBtn.addEventListener('click', closeModal); modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); function closeModal() { modal.style.display = 'none'; body.classList.remove('modal-open'); }

👩‍💻 Как реализовать наследование в JavaScript: 7 способов Исчерпывающий гайд по всем существующим способам организации наследования в JavaScript. Разберем сильные и слабые стороны каждого подхода и научимся выбирать оптимальный метод для твоих задач. Читать...

🔝 Самые интересные статьи за последние дни: • Упрощаем CSS-анимации с помощью свойств display и размеров элемента • 5 полезных фреймворков и библиотек для начинающего фронтенд-разработчика на конец 2024 года • Возможности поля HTML-документа, часть 2. Внедряем CSS и JS • Ошибки, которые я совершил, пытаясь быть «слишком правильным» в разработке • Разработка Task Manager с нуля до полнофункционального продукта

👩‍💻 Интерактивный счётчик с кнопками увеличения и уменьшения Создайте интерактивный счётчик с двумя кнопками: "Увеличить" и "Уменьшить". Счётчик должен отображать текущее значение, которое обновляется при нажатии на кнопки. Ожидаемое поведение: • По умолчанию значение счётчика равно 0. • Кнопка "Увеличить" увеличивает значение счётчика на 1. • Кнопка "Уменьшить" уменьшает значение счётчика на 1. • Значение счётчика никогда не становится отрицательным. Решение задачи🔽

<div> <button id="decreaseButton">Уменьшить</button> <span id="counter">0</span> <button id="increaseButton">Увеличить</button> </div> const counter = document.getElementById('counter'); const decreaseButton = document.getElementById('decreaseButton'); const increaseButton = document.getElementById('increaseButton'); let count = 0; decreaseButton.addEventListener('click', () => { if (count > 0) { count -= 1; counter.textContent = count; } }); increaseButton.addEventListener('click', () => { count += 1; counter.textContent = count; });

👩‍💻 Настройка одного набора цветов для светлого и тёмного режимов CSS переменные можно использовать, чтобы сделать цвета темнее, когда они отображаются на светлом фоне, и светлее, когда они отображаются на тёмном, что делает их более яркими в обоих случаях. Читать...

🔎 Подборка зарубежных вакансий Frontend Developer (React Native) 🟢React Native, JavaScript, TypeScript 🟢Уровень дохода не указан | 3–6 лет Lead React Native Developer 🟢React Native, TypeScript, CI/CD 🟢Уровень дохода не указан | 5+ лет PHP разработчик 🟢PHP, Laravel, REST API, SOAP, MySQL, October CMS, Docker 🟢Уровень дохода не указан | 1–3 года

⚙️ Хочу прожарки на MVP своего проекта, который задеплоил буквально пару дней назад Hack Frontend — платформа для подготовки к собеседованию по фронтенду. Обещает базу знаний, задачи и интерактивную подготовку. Но насколько она удобна и полезна? В статье — критика, фидбэк и предложения. Читать...

👩‍💻 Эксперимент: Автоматическое включение View Transitions с MutationObserver Вместо того чтобы добавлять document.startViewTransition в различные места JS, используйте MutationObserver, следящий за мутациями DOM. В обратном вызове Observer'а отмените исходную мутацию и примените её снова, но на этот раз обернув во View Transition. Читать...

⚙️ Что такое свойство aspect-ratio в CSS и как оно используется? aspect-ratio — это свойство CSS, которое задаёт соотношение ширины к высоте элемента. Оно упрощает создание адаптивных контейнеров, таких как видео, изображения или карточки. ➡️ Пример:

<div class="box"></div>

<style>
  .box {
    width: 300px;
    aspect-ratio: 16 / 9; /* Соотношение сторон 16:9 */
    background: lightblue;
  }
</style>

🗣️ В этом примере элемент .box сохраняет соотношение сторон 16:9 независимо от ширины. Это свойство полезно для создания адаптивных сеток и медиа-контейнеров.

🖥 Подробнее тут

⚙️ Безопасное взаимодействие с API: от ошибок к стабильности В статье разбираются причины распространённых ошибок JavaScript, связанных с несоответствием данных, и предлагаются три ключевых решения: создание API-слоя, использование Backend-for-Frontend (BFF) и валидация данных через Zod для повышения стабильности. Читать...

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

📈 Подборка статей для вашей карьеры • Почему любая оценка IT-шников обречена на провал? • Карьерный рост из senior: кто такой staff-инженер? • «Так и знала, что вы — бывший двоечник!» Самые глупые ошибки моей компьютерной молодости • Что лучше — оценка рекрутера или подбрасывание монетки? • Мотивационные стили в обучении: почему вам (возможно) не нужны цели или общение с одногруппниками

📝 Подборка вакансий для сеньоров Senior Fullstack Developer • React, Vue.js, TypeScript, Node.js, MongoDB, Webpack • от 3 800 до 6 500 $ | 3+ лет Fullstack PHP-разработчик • PHP, Laravel, MySQL, Vue.js, Apache, Linux • от 2 200 до 2 800 $ | 2+ года JavaScript Fullstack программист (разработчик) • Node.js, React, Redux, PostgreSQL, Redis, RabbitMQ, MongoDB • от 250 000 до 400 000 ₽ | 3+ года

👩‍💻 Fancy Glowing Button Крутая кнопка с RGB подсветкой и эффектом при наведении. Сделана на чистом CSS. Открыть код...

⚙️ Предзагрузка отзывчивых изображений Статья объясняет, как правильно предзагружать отзывчивые изображения, чтобы ускорить загрузку страниц. Рассматривается взаимодействие предзагрузки с решениями браузера для выбора изображений под устройство. Читать...

👩‍💻 Проверка сбалансированных скобок Напишите функцию, которая принимает строку, содержащую различные типы скобок ((), {}, []), и проверяет, являются ли они сбалансированными. Строка считается сбалансированной, если каждая открывающая скобка имеет соответствующую закрывающую в правильном порядке. Пример: Для строки "{[()]}" функция должна вернуть true, а для строки "{[(])}" — false. Решение задачи🔽

function isBalanced(str) { const stack = []; const pairs = { ')': '(', '}': '{', ']': '[' }; for (let char of str) { if (['(', '{', '['].includes(char)) { stack.push(char); } else if ([')', '}', ']'].includes(char)) { if (stack.pop() !== pairs[char]) return false; } } return stack.length === 0; } // Пример использования console.log(isBalanced("{[()]}")); // true console.log(isBalanced("{[(])}")); // false

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

📝 Подборка вакансий для мидлов Frontend Developer (брокерский бизнес) • HTML, CSS, JavaScript, React, Redux, TypeScript, Webpack, Babel, REST API • Уровень дохода не указан | 3+ года Frontend-разработчик (React, Redux, TypeScript) • React, Redux, TypeScript, LESS, SCSS, Ant Design, REST API • от 120 000 ₽ | 1–3 года Middle Frontend Developer Vue (Back-office) • Vue3, JavaScript, TypeScript, Webpack, Pinia, Element Plus, Figma • Уровень дохода не указан | 3+ года

⚙️ Что такое box-shadow в CSS и как оно работает? box-shadow — это свойство CSS, которое добавляет тень к элементу. Оно позволяет задавать смещение, размытие, размер растушёвки и цвет тени. ➡️ Пример:

<div class="box">Я с тенью</div>

<style>
  .box {
    width: 200px;
    height: 100px;
    background: lightblue;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* Смещение и размытие тени */
  }
</style>

🗣️ В этом примере box-shadow добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

🖥 Подробнее тут