Frontend Interview - собеседования по Javascript / Html / Css

justify-content: space-between приводит к неожиданному отображению разметки Когда только появился Flexbox многие были воодушевлены свойством justify-content, которое позволяет просто расположить равномерно элементы сетки с помощью значений space-between или space-around. И конечно многие стали пользоваться этим. Но есть проблема. Когда мы используем эти значения, то не задумываемся, что количество элементов может измениться. Например, если я добавлю еще 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя, в случае space-between, а не в начале строки, как ожидает пользователь. Поэтому в этой ситуации лучше использовать margin , если нужна поддержка IE11, или column-gap для установки расстояние между элементами. Не делайте так

 .grid {
   display: flex;
   justify-content: space-between; /* or space-around */
 }

 .item {
   width: 30%;
 }

Можно сделать так .grid { display: flex; column-gap: 5%; } .item { width: 30%; }

Пользуемся лайфхаком и не показываем эйчарам. 👉 @frontendInterview

В среднем, водитель такси просыпается, когда хочет Все инструменты — в приложении Яндекс Про. Бонусы и скидки для водителей, возможность повышать свой доход с разными тарифами и опциями. Всего 3 условия, чтобы попробовать — водительское удостоверение, 3 года водительского стажа и не меньше 21 года. Узнать больше #реклама 16+ pro.yandex О рекламодателе

👉 @frontendInterview

Сыграем? 3 кадра — 3 месяца фильмов и сериалов за 0 ₽! Проверьте себя и откройте возможность провести 90 вечеров с любимыми фильмами и сериалами всего за 0 ₽! Бонусы после прохождения теста: — Кинопоиск и Яндекс Музыка на 3 месяца за 0 ₽. — Доступ к вашей подписке для трёх близких людей. Предложение ограничено до 15.05.2024. Играть #реклама 18+ kinopoisk.ru О рекламодателе

Как сделать из нативного компонента — React-компонент Иногда в своё React-приложение нужно встроить сторонний нативный компонент, который не работает с React и часто оказывается императивным. Такой компонент приходится каждый раз инициализировать, уничтожать и, главное, проверять его состояние, прежде чем вызывать его методы. В статье автор разбирает по шагам, как превратить такой компонент в декларативный React-компонент. 👉 @frontendInterview

Проблема айтишников старше джуна №1: плохая самопрезентация на собеседованиях Большинство реально сильных специалистов теряют ~20-50% от зарплаты только из-за слабой переговорной позиции. Проект «Выше вилки» фиксит этот баг. Экс-программисты Яндекса и Касперского делятся полезными фишками в переговорах, тактиками общения с рекрутёром и способами объективно оценить свои скиллы в денежном эквиваленте. На канале @above_the_range проходят как бесплатные тренинги, так и анонсы на поток «Выше вилки», где вы научитесь правильно отвечать на скользкие и неочевидные вопросы. Всё это — на примере реальных кейсов трудоустройства и без «душноты». Никакого заговора на «успешный успех». Подписывайтесь и тренируйте переговорные техники. реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941

Курс по Java-разработке с гарантией трудоустройства Если ты не найдешь работу, берем все расходы за обучение на себя. Поступи и начни карьеру разработчика уже через 9 месяцев! Обучение в Kata Academy построено по принципу win-win: — ты получаешь работу в Москве или Санкт-Петербурге с хорошей зарплатой, мы получаем процент за инвестиции в тебя; — в наших интересах научить тебя так, чтобы твоя зарплата была как можно выше; — если ты потеряешь работу, мы поможем найти новую; — мы не зависим от банков и их рассрочек — кризис не повлиял на доступность курсов. Мы не работаем на поток, для поступления нужно сделать тестовое задание. Этим ты покажешь, что действительно готов учиться и хочешь работать. Оставь заявку по ссылке! Узнать больше #реклама 18+ kata.academy О рекламодателе

Сильнейшие карьерные IT-бури ожидаются в ближайшее время — об этом говорят синоптики и HR-менеджеры Сбера! 🧑‍💻 Чтобы стать частью IT-комьюнити топовой технологичной компании и работать над масштабными проектами, выбирай вакансию мечты по ссылке. Эйчары уже ждут тебя. Ну а прогноз в видео — всего лишь наша шутка, зато твоя будущая команда абсолютно реальна 💚

Блок по центру экрана Перед вами встала задача выровнять блок по центру экрана по вертикали и горизонтали. Задача довольно простая, но тем не менее её часто задают на собеседованиях. В этом рецепте разбираются все существующие на данный момент способы решения задачи. 👉 @frontendInterview

👉 @frontendInterview

Мидл-специалист отличается от джуниор-разработчика не только опытом и уровнем владения технологиями, но и софт-скилами. На курсе Практикума вы сможете прокачать все необходимые навыки и построить новую карьеру. На курсе мы поможем вам: — освоить новые навыки и извлекать больше пользы из своих софт-скилов; — углубить знания в алгоритмах, DevOps, бэкенд‑разработке и смежных сферах; — сделать с нуля 2 проекта — до работающих приложений. Если вы не уверены, подойдёт ли вам профессия, — пройдите бесплатную часть и тест в конце. Если понравится, платите за остальную часть как удобно: в рассрочку или целиком. → Начать курс бесплатно

​Что такое CSS препроцессоры? Препроцессоры CSS - это инструменты, которые помогают нам расширить базовую функциональность CSS с помощью определенного языка сценариев. Это позволяет нам использовать сложный логический синтаксис: функции, примеси, вложения, наследование и многое другое, который будет скомпилирован в стандартный CSS. Самый популярный препроцессор - SASS (Syntactically Awesome Style Sheet). SASS может быть написан с использованием двух разных синтаксисов: SASS или SCSS. SASS синтаксис:

 $font-color: #aaaccc
 $bg-color: #eeefff

 .element
   color: $font-color
   background: $bg-color

SCSS синтаксис:

 $font-color: #aaaccc;
 $bg-color: #eeefff;

 .element {
   color: $font-color;
   background: $bg-color;
 }

Синтаксис SCSS считается более удобным и CSS-оподобным. Также среди отличий - разрешение файлов (.sass и .scss) Препроцессор LESS (Leaner Style Sheets) легко интегрируется в проекты с использованием JavaScript. Синтаксис такой же, как у SCSS, но с некоторыми отличиями:

 @font-color: #aaaccc;
 @bg-color: #eeefff;

 .element {
   color: @font-color;
   background: @bg-color;
 }

Препроцессор Stylus предлагает большую гибкость в своем синтаксисе, поддерживает нативный CSS, а также позволяет опускать скобки, двоеточия и точки с запятой. Спецсимволы для определения переменных не используются: font-color = #aaaccc; bg-color = #eeefff; .element color: font-color; background: bg-color; 👉 @frontendInterview

shorter concat [reverse longer] Даны 2 строки, a и b, верните строку вида: короче+обратная(длиннее)+короче. 👉 @frontendInterview

Кодер с улицы. Правила нарушать рекомендуется Эта книга — справочник по выживанию для начинающего разработчика. «Кодер с улицы» научит вас справляться с реальными задачами. Седат Капаноглу честно делится советами, основанными на личном опыте, а не на абстрактной теории. Вы узнаете, как адаптировать знания, полученные из книг и курсов, к повседневным рабочим задачам. Пора узнать, как использовать антипаттерны и «плохие» методы программирования. 👉 @frontendInterview

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме 16–22 апреля с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

​Как организовать переиспользование компонентов в React? Переиспользование компонентов - один из основных принципов разработки в React. Это позволяет создавать эффективный и легко поддерживаемый код. Вот некоторые методы организации переиспользования: 1. Компоненты высшего порядка (HOC): Создание компонентов высшего порядка позволяет оборачивать другие компоненты, добавляя им определенное поведение. Это полезно для изоляции логики, которую вы хотите применить к нескольким компонентам. 2. Композиция компонентов: Строить более сложные компоненты путем комбинирования более простых. Компоненты, которые представляют более общие элементы (например, кнопки, карточки и т.д.), могут быть повторно использованы и настроены в зависимости от конкретных потребностей. 3. Render Props: Создание компонентов, которые передают функцию через свойство children или другое определенное свойство. Это позволяет другим компонентам использовать эту функцию для внедрения своего контента. 4. Хуки (Hooks): С React 16.8, хуки позволили переиспользовать состояние и логику в функциональных компонентах без использования классов. Вам даже можно создавать собственные пользовательские хуки для изоляции определенной функциональности. 5. Библиотеки компонентов: Существует множество библиотек компонентов, таких как Material-UI, Ant Design, Chakra UI и другие, предоставляющие готовые компоненты для переиспользования в ваших проектах. 6. Компоненты страниц (Page Components) и компоненты макета (Layout Components): Разделение компонентов на те, которые отвечают за макет (навигация, боковая панель и т.д.) и те, которые отвечают за конкретное содержание страницы, может существенно повысить переиспользование. 7. Контейнеры и компоненты представления (Containers and Presentational Components): Разделяйте компоненты на "умные" контейнеры, которые управляют состоянием и бизнес-логикой, и "глупые" компоненты представления, которые отображают данные, переданные им из контейнеров. 👉 @frontendInterview