Проблема айтишников старше джуна №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%;
}

Законы UX-дизайна

Рассмотрены законы UX-дизайна, основанные на психологии поведения пользователей, которые дизайнеры могут использовать на практике для создания интуитивно понятных, ориентированных на человека продуктов и услуг.
Описаны законы Якоба (о привычном интерфейсе), Фиттса (о времени достижения цели), Хика (о времени, необходимом для принятия решения), Миллера (о кратковременной памяти пользователя), Постела (о балансе консервативного и либерального), Теслера (о степени сложности системы) и эффект фон Ресторффа (о самом запоминающемся объекте). Обсуждается правило «на пике и в конце», связанное с особенностью выработки суждений. Также рассмотрен эффект восприятия эстетически приятного дизайна как наиболее удобного в использовании.

👉 @frontendInterview

Mutate My Strings

Вам даны две строки. Преобразуйте первую строку во вторую по одной букве, верните каждый промежуточный результат.

Пример:
stringOne = 'bubble gum';
stringTwo = 'turtle ham';

Result:
bubble gum
tubble gum
turble gum
turtle gum
turtle hum
turtle ham

👉 @frontendInterview

image-set()

CSS-функция image-set() позволяет перечислить несколько фоновых изображений с условиями, по которым браузер решит, какое из них наиболее подходящее для загрузки в данный момент.

Похож по принципу работы на тег <picture>
div {
background-image: image-set(
url("[email protected]") type("image/webp") 1x,
url("[email protected]") type("image/webp") 2x,
url("[email protected]") type("image/png") 1x,
url("[email protected]") type("image/png") 2x
);
}

На сайт могут заходить с разных устройств. У многих дисплеи с повышенной плотностью пикселей и им нужно показывать картинку хорошего качества. А на телефонах лучше показывать небольшие файлы ради ускорения загрузки страницы. Нужно как-то давать разным клиентам разные версии изображений. Раньше для этого использовали медиавыражения, а теперь есть простые и удобные решения, которые позволяют через запятую указать все версии изображений. Конечно, есть тег <picture>, но если изображение декоративное, будет правильнее установить его как фон элемента

👉 @frontendInterview

Счётчик символов в поле ввода

Нередко разработчик хочет знать число символов, которые пользователь вводит. Например, так можно сообщать количество доступных знаков.
В этом рецепте создается такой счетчик без лишней нагрузки браузера (и человека).

👉 @frontendInterview

🔥 Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. Каждый вопрос имеет уровень сложности, короткий и полный ответ, а также ссылки на ресурсы для изучения.

Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков.

«Коллеги, пришлите сроки!» — повторял джун-аналитик в течение месяца…

Если коллеги вас не слышат, игнорируют ваши просьбы — вот кое-что, что вам поможет. Один джун-аналитик столкнулся с такой проблемой, а потом поборол.

Небольшие лайфхаки собраны в короткой статье:

👉 @frontendInterview

Джун вливается в рабочий процесс.

👉 @frontendInterview

CSS Функция local() экономит трафик пользователя

При оптимизации скорости загрузки страницы, кроме изображений, ещё значительным пунктом являются шрифты. Поскольку они весят много. И каково было моё удивление, когда я узнал о существовании функции local().


В чём суть. С помощью функции мы можем проверить, установлен ли нестандартный шрифт на устройстве пользователя. Если установлен, то не загружать его по сети. Для этого её нужно использовать при объявлении правила @font-face. Например, я подключаю шрифт Cherry Bomb One.

 @font-face {
   font-family: 'Cherry Bomb One';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: local("CherryBombOne Regular"),
        local("CherryBombOne-Regular"),    
        url("CherryBombOne-Regular.woff2") format('woff2');
 }

В этом случае браузеры загрузят его только когда шрифт CherryBombOne Regular не установлен на устройстве пользователя. Очень простой трюк, но суперполезный.

👉 @frontendInterview

Современный учебник jаvascript в 3 книгах

Часть 1. Язык jаvascript
Часть 2. Браузер. Документ, события, интерфейсы
Часть 3. Дополнительные статьи

Автор: Илья Кантор

С помощью этого учебника вы можете изучить jаvascript, начиная с нуля и заканчивая продвинутыми концепциями вроде ООП. Мы будем использовать браузер в качестве окружения, но основное внимание будет уделяться именно самому языку jаvascript. Давайте посмотрим, что такого особенного в jаvascript, чего можно достичь с его помощью, и какие другие технологии хорошо с ним работают.

👉 @frontendInterview