Mr Frontender

React - это библиотека JavaScript для создания компонентов пользовательского интерфейса. Экосистема React действительно огромна, что, в конечном итоге, делает ее одной из лучших библиотек во всей фронтенд разработке. Почему React? 1️⃣Переиспользуемые компоненты 2️⃣Быстрый рендер компонентов благодаря виртуальному DOM 3️⃣Огромная экосистема Типичное приложение React содержит множество компонентов. Они переиспользуемые и могут взаимодействовать друг с другом. Что такое компонент? Компонент - это простая...

Начинающие и опытные разработчики зачастую допускают одни и те же ошибки при написание CSS. Сегодня, мы рассмотрим, как можно оптимизировать CSS код. 1. Не перезаписывайте padding или margin Разработчики часто устанавливают padding или margin для всех элементов, а затем сбрасывают их для первого или последнего элемента. Однако, зачем использовать два правила, когда вы можете обойтись одним. Гораздо проще установить поля и отступы для всех необходимых элементов сразу. Используйте один из следующих...

В этой статье я расскажу об основных концепциях JavaScript, которые необходимо изучить каждому начинающему разработчику. 1. События JavaScript - это язык, который функционирует с помощью событий. Обычно какое-то действие или событие от пользователя инициирует выполнение скрипта. Разработчик создаёт обработчик событий, который будет выполняться при срабатывании определенного события, например, нажатие на кнопку, наведение курсора и т.д. Существует множество событий DOM, которые необходимо изучить начинающему разработчику...

Разработчики, которые приходят на React с шаблонных языков, таких как Handlebars, часто удивляются, что JSX не имеет встроенного условного синтаксиса. По-сути, JSX - это просто JavaScript, и сегодня я расскажу о 5 способах использования JS для условного рендера в React компонентах. 1️⃣ Переменные для компонентов Мы можем записать JSX-компонент в переменную и затем отрисовать эту переменную. Можно использовать 'if-else' или 'switch'. Изначально, я в основном использовал данный способ для условного рендеринга, потому что мне нравилось, что он сохранял JSX более "чистым"...

Адаптивный веб-дизайн (далее АВД) - это не какая-то программа или фреймворк. Можно сказать, что это комбинация различных концепций, с помощью которых мы стараемся сделать так, чтобы наша веб-страница хорошо выглядела на всех устройствах. Самое замечательное, что вы можете достичь АВД, используя только HTML и CSS ⚡ 1️⃣ Первое и самое главное, чтобы сделать АВД - это использовать тег <meta> viewport. Данный тег заставляет страницу следовать ширине экрана устройства. 2️⃣ Второй важный момент, который...

Создание с нуля небольших проектов - это лучший способ изучить фронтенд-разработку. Итак, вот 5 идей, которые вы можете использовать и, на их базе, создавать проекты с помощью ванильного JavaScript или вашего любимого фреймворка. 1. Приложение для списка дел (Todo List) Есть причина, по которой этот проект является классическим. Он учит вас многим основам, таким как работа с массивами, обработка пользовательского ввода и отображение информации на экране. Сосредоточьтесь на основных функциях, таких как добавление элементов и пометка их как выполненные, возможно, с помощью анимации...

Всем тем, кто работает со стилями в CSS, будет очень полезна данная подборка из 5 CSS генераторов! 1️⃣ Gradient Animator CSS генератор для создания красивых анимированных градиентов 🎨 🔗 gradient-animator.com 2️⃣ CSS Accordion Slider Generator Полностью адаптивный CSS аккордеон 🔗 accordionslider.com 3️⃣ Image carousel Адаптивный слайдер для изображений 🔗 imageslidermaker...

Сегодня мы рассмотри 7 HTML тегов, которые упростят вам процесс веб-разработки. 1️⃣ <wbr> Тег <wbr> (Возможность разрыва слова) указывает, где в тексте можно было бы добавить разрыв строки. Данный тег предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки. 2️⃣ <bdi> Тег HTML Bidirectional Isolate (<bdi>) используется для изоляции двунаправленного текста, например текста, в котором одновременно содержатся разные языки, читающиеся слева направо и справа налево...