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

🔝 Самые интересные статьи за последние дни: • Упрощаем 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 добавляет мягкую тень с чётким смещением и прозрачностью. Это свойство отлично подходит для выделения элементов интерфейса.

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

👩‍💻 On-Scroll Fire Transition Красивая анимация горения страницы при скролле. Сделана на CSS и JavaScript. Открыть код...

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 30 январяв 19:00 по мск. Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

🔎 Подборка вакансий для джунов Junior React Разработчик 🟢HTML, CSS, JavaScript, React, Redux, TypeScript, Docker, Webpack 🟢от 60 000 до 90 000 ₽ | 1–3 года Frontend-разработчик (удалённо) 🟢HTML5, CSS3, JavaScript, React, Vue.js, Tailwind CSS, Git, Webpack, Sass, Less, Figma 🟢от 50 000 до 80 000 ₽ | 1–3 года Разработчик (Frontend developer / Vue.js) junior+ 🟢Vue.js, JavaScript, HTML/CSS, Git, GraphQL, SPA, TypeScript 🟢от 120 000 ₽ | 1–3 года