Считаешь себя экспертом в IT? Участвуй в «Цифровом марафоне» от Сбера и «Школы 21» и будь на код впереди! Миллион рублей уже ждёт тебя.

В этом масштабном конкурсе ты будешь соревноваться со специалистами по всей России. Тройка лучших поделит в финале в Москве призовой фонд в 1,8 миллионов рублей.

Но сначала нужно пройти онлайн-игру, тестирование и цифровой диктант. Начнёшь с «разминки» и покажешь свои аналитические и мягкие навыки. Далее — ответь на вопросы теста согласно своему уровню подготовки. Прослушай на диктанте техническое задание и напиши код решения.

Поспеши: 20 апреля — твой последний шанс нажать на кнопку «Хочу участвовать». Переходи на сайт и регистрируйся прямо сейчас!

Плавное раскрытие выпадающего меню

Иногда встречается задача: создать выпадающее меню, которое будет плавно раскрываться. В этом рецепте будет решение на чистом CSS. Вся магия кроется в единицах измерения lh. Будем менять высоту строки, тем самым добившись эффекта плавного раскрытия меню.

👉 @frontendInterview

Как выжить на первом испытательном сроке в IT и не только

В этой статье руководитель подразделения разработки программных продуктов рассказывает о том, как успешно пройти свой первый испытательный срок, что нужно делать обязательно и чего лучше не делать.
Советы из этой статьи актуальны для любой IT-шной профессии, но часть рекомендаций будет с уклоном в сторону разработки.

👉 @frontendInterview

Типичная стыковка фронта с бэком

👉 @frontendInterview

​Как организовать переиспользование компонентов в 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

Кодер с улицы. Правила нарушать рекомендуется

Эта книга — справочник по выживанию для начинающего разработчика.

«Кодер с улицы» научит вас справляться с реальными задачами. Седат Капаноглу честно делится советами, основанными на личном опыте, а не на абстрактной теории. Вы узнаете, как адаптировать знания, полученные из книг и курсов, к повседневным рабочим задачам. Пора узнать, как использовать антипаттерны и «плохие» методы программирования.

👉 @frontendInterview

shorter concat [reverse longer]

Даны 2 строки, a и b, верните строку вида:
короче+обратная(длиннее)+короче.

👉 @frontendInterview

​Что такое 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

👉 @frontendInterview

Блок по центру экрана

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

👉 @frontendInterview

Проблема айтишников старше джуна №1: плохая самопрезентация на собеседованиях

Большинство реально сильных специалистов теряют ~20-50% от зарплаты только из-за слабой переговорной позиции.

Проект «Выше вилки» фиксит этот баг.

Экс-программисты Яндекса и Касперского делятся полезными фишками в переговорах, тактиками общения с рекрутёром и способами объективно оценить свои скиллы в денежном эквиваленте.

На канале @above_the_range проходят как бесплатные тренинги, так и анонсы на поток «Выше вилки», где вы научитесь правильно отвечать на скользкие и неочевидные вопросы.

Всё это — на примере реальных кейсов трудоустройства и без «душноты».

Никакого заговора на «успешный успех». Подписывайтесь и тренируйте переговорные техники.

реклама. рекламодатель ИП Шишков Илья Иванович ИНН: 575206903941

Как сделать из нативного компонента — React-компонент

Иногда в своё React-приложение нужно встроить сторонний нативный компонент, который не работает с React и часто оказывается императивным.

Такой компонент приходится каждый раз инициализировать, уничтожать и, главное, проверять его состояние, прежде чем вызывать его методы.

В статье автор разбирает по шагам, как превратить такой компонент в декларативный React-компонент.

👉 @frontendInterview

👉 @frontendInterview

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

👉 @frontendInterview

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%;
}