Типичный Веб Разработчик

​​Как прижать футер к низу страницы с помощью CSS? Рассмотрим универсальный способ. Он не требует абсолютного позиционирования, вычислений с помощью функции calc() и работает во всех современных браузерах. Данный способ основан на CSS Flexbox и методе flex-grow. Таким образом центральный main элемент растет, занимает все свободное пространство и раздвигает соседние элементы header и footer. Дока по flex-grow: https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow

Как добавить изображению зеркальный эффект с помощью CSS? Что если можно переиспользовать одно изображение <img> несколько раз, например, если это изображение имеет зеркальную копию? Можно открыть графический редактор и сделать еще одну копию этого изображения, а можно использовать одну картинку, просто повернув её с помощью CSS. Для примера давай возьмем кнопки слайдера для перехода к следующему слайду (next) и возврату к предыдущему (prev). Используем одну картинку next-arrow.png для кнопки next-button, и просто зеркально разворачиваем эту картинку для кнопки prev-button. Типичный Веб Разработчик

Используем React.memo для оптимизации приложения. Если обернуть React компонент в memo, то получим мемоизированную версию этого компонента. Основная фишка мемоизации в том, что при обновлении родителя, момоизированный дочерний компонент не обновляется. На практике это позволяет отключить лишние обновления тяжелых компонентов. У нас есть два элемента input. При вводе текста обновляем состояния name и address. Также у нас есть дочерний компонент Hello, который мы обернули в memo, и передали name в виде пропсов. Если вводим адрес, то обновляется только родительский компонент, а если вводим имя, то обновляется и родительский и дочерний Hello компонент. Таким образом можем исключить лишние обновления дочерних компонентов. Это не значит что нужно мемоизировать все компоненты. Это лишь означает, что у нас есть инструмент, позволяющий оптимизировать работу тяжёлых компонентов. Типичный Веб Разработчик

Свойства по умолчанию или React Default Props Мы не хотим видеть undefined в разметке, или ошибки в консоли, даже если, по каким либо причинам, компонент не получил пропсы от своего родителя. Данная задача решается разными способами. Один из самых популярных - это установить резервные значения через defaultProps. Таким образом мы гарантируем корректную работу компонента, и в случае отсутствия значения, получим дефолтное значение. В примере видим значения по умолчанию - name, age и position. Если компонент Person не получит пропсы от родителя, то получим значения из объекта defaulProps. Типичный Веб Разработчик

Как управлять высотой текстового элемента textarea в ReactJS? В этом видео определим как рассчитать высоту текстового блока, чтобы он менял высоту в зависимости от количества введенного текста. - YouTube | Дзен - Github Pet project - Demo Типичный веб разработчик

Как вписать изображение <img> в контейнер? В идеальных условиях разработчик просто берет картинку и она всегда точно встает в вёрстку. Но в реальности все не так. Как правило, картинки всегда имеют разные пропорции сторон. Существует множество "костылей" чтобы вписать изображение, например с помощью flex-box или position + transform, или, например, background-image: <style> .card { width: 100px; height: 100px; background-image: url("logo.png"); background-size: contain; background-position 50% 50%; } </style> <div class="card"></div> Таким образом, независимо от пропорций картинки, она всегда красиво вписывается в контейнер. В современной верстке рекомендуется использовать object-fit object-position, они определяют размер и положение изображения внутри контейнера. Например, вписать картинку можно следующим образом: <style> .card { width: 100px; height: 100px; } .logo { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; } </style> <div class="card"> <img class="logo" src="./images/logo.png"> </div> Object-fit object-position - поддерживается всеми современными браузерами, для очень старых есть полифил. Документация - https://html5book.ru/svoystva-object-fit-i-object-position/ Типичный Веб Разработчик

Используем Хук useRef для хранения переменных. Мы привыкли использовать useRef как ссылку на DOM элемент. Обычно это выглядит примерно так: const buttonRef = useRef(null); return <button ref={buttonRef}>Button text</button> Таким образом можем получить размер элемента, установить фокус и так далее. Другой вариант использования useRef - хранение любых данных, например переменной: const someRef = useRef(5); console.log(someRef.current) // 5 Хук возвращает объект со свойством current, в котором хранится наша переменная. Данная переменная не будет создаваться каждый раз при обновлении компонента, и её изменение также не приведет к обновлению компонента. Получаем переменную, которая остается неизменной пока мы сами не решим изменить её. Документация React useRef Типичный веб разработчик

Как подключить и стилизовать React-dropdown компонент? Подключаем и стилизуем очень легкий и простой в использовании Dropdown компонент. Разбираем все пропсы и события. Видеоинструкция прилагается. - YouTube | Дзен - Github Pet project - React-dropdown npm

Что такое CSS em и для чего они нужны? Самая понятная и простая единица измерения в CSS это пиксель px. Сколько не меняй размеры окон или блоков, пиксель всегда остается пикселем. А что если нам нужно задать размер шрифта или отступы относительно родителя. В таких случаях используют относительные единицы em: .parent { font-size: 20px; } h1 { font-size: 2em; } p { font-size: 0.75em; } <div class="parent"> Родительский компонент с размером шрифта 20px <h1>Заголовок с размером шрифта 40px</h1> <p>Текст с размером шрифта 15px</p> </div> Таким образом при изменении шрифта родительского блока, шрифты внутренних элементов масштабируются сами. Это позволяет один раз создать иерархию внутренних элементов, и при адаптации стилей, например, под экран ноутбука или смартфона, управлять только размером шрифта родителя. Типичный Веб Разработчик

Создаем игру головоломку Пятнашки на ReactJS. Веб разработка это не только скучная верстка, валидация форм или работа с API. Давай отвлечемся от всего этого и создадим простую и очень увлекательную игру Пятнашки. Видео с пошаговым созданием игры и исходный код прилагаются. Ссылки: - Youtube | Дзен | VK Видео | RuTube - Github Pet Progect - Demo - играть онлайн Типичный Веб Разработчик

Как эффективно перемешать элементы массива? Сортировка массива не представляет особой сложности, а что если нужно перемешать все элементы в массиве? Есть простое решение: array = array.sort(() => Math.random() - 0.5) но при таком подходе перемешивание работает плохо и часть элементов остается на своих местах. Есть хорошее решение - это алгоритм тасования Фишера - Йетса. Работает он так - идем по массиву в обратном порядке и меняем местами каждый элемент со случайным элементом перед ним. Данный алгоритм отлично перемешивает элементы в массиве, и с точки зрения производительности работает быстрее, так как не выполняет сортировку. Типичный Веб Разработчик

Как использовать React useEffect на 100%? Рассмотрим 3 фишки React useEffect. Оказывается, здесь есть неочевидные решения, которые помогут лучше понять функциональный подход в работе с ReactJS. Ссылки: Видео Дока React useEffect Типичный Веб Разработчик