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

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

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

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

Законы 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