Как упростить тестирование?

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

Часто лень — это следствие неудобства. Если писать тесты неудобно, то и охоту их писать быстро отобьёт.

Мы можем использовать разные стратегии для того, чтобы сделать тестирование удобнее:
- использовать чистые функции и писать слабо-сцепленный код;
- делать тесты независимыми друг от друга и окружения;
- чётко описывать предусловия и ожидания от теста, следовать ПВП,
- тестировать только свой код;
- использовать более удобные инструменты тестирования;
- вести общее хранилище фиктивных данных и моков.

👉 @frontendInterview

👉 @frontendInterview

JavaScript теперь в телеграм!

JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!

:in-range, :out-of-range

Эти псевдоклассы используются для стилизации полей ввода, поддерживающих атрибуты min и max:

:in-range для полей, в которых введённое значение попадает в диапазон от min до max;
:out-of-range для полей, в которых введённое значение не попадает в диапазон от min до max.

Пример
<input class="with-range" type="number" min="10" max="20" step="1">

.with-range {
border: 1px solid black;
}

.with-range:in-range {
border-color: green;
background-color: rgb(0 255 0 / 20%);
}

.with-range:out-of-range {
border-color: red;
background-color: rgb(255 0 0 / 20%);
}

👉 @frontendInterview

👉 @frontendInterview

Атрибут novalidate

Атрибут отключает нативную валидацию формы со стороны браузера.

<form novalidate>...</form>

Каждое поле формы, которое заполняет пользователь, может иметь чётко указанный тип и правила ввода. В момент, когда пользователь отправляет форму, браузер проверяет правильность заполненных данных, блокируя отправку в случае ошибки и показывая подсказку там, где она была допущена.

Например, поля с атрибутом required должны быть обязательно заполнены, и браузер укажет, если пользователь вдруг какое-нибудь из них пропустил.

Атрибут novalidate говорит браузеру не проверять поля и не препятствовать отправке формы, так как иногда подобное поведение бывает нежелательным. К примеру, форма проверяется при помощи JavaScript, и нужно избежать конфликтов с браузерной валидацией. В том числе, и убрать всплывающие подсказки, чтобы показать вместо них свои, кастомные.

👉 @frontendInterview

📚Теперь JavaScript можно легко выучить по гайдам в картинках.

Первый канал с гайдами по JavaScript — @guides_js

👉 @frontendInterview

👉 @frontendInterview

Deadline. Роман об управлении проектами

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

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

Dot Calculator

Создайте калькулятор, в котором вместо цифр точки. Одна точка соответствует единице.

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

Примеры:
"..... + ..............."
result: "...................."

"..... - ..."
result: ".."

"..... - ."
result: "...."

"..... * ..."
result: "..............."

👉 @frontendInterview

Расскажите про switch в JS.

Управляющая конструкция switch позволяет выполнять различные блоки кода, в зависимости от значения переменной.
Похож на if...else, но решает более узкую задачу.

Как пишется
В круглых скобках указывается переменная, значение которой сравнивается. В фигурных скобках с помощью ключевого слова case указываются возможные значения и код, который нужно выполнить.

Пример приветствия пользователя в зависимости от статуса:
switch (membershipStatus) {
case "vip":
// выполнится, если в переменной membershipStatus хранится строка "vip"
console.log("Приветствуем вас, ваше великолепие!")
console.log("рады вас видеть!")
break
case "diamond":
console.log("Здравствуйте, бриллиантовый клиент!")
break
case "gold":
console.log("Привет, золотой мой!")
break
default:
// выполнится, если ни один другой случай не сработал
console.log("Прив")
break
}

👉 @frontendInterview

👉 @frontendInterview

Селектор потомка

Цепочка перечисленных через пробел селекторов обозначает вложенность от родительских элементов к потомку. Это позволяет управлять стилями вложенных элементов.

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

Пример
Скажем, цвет текста в абзацах карточки новостей должен отличаться от текста на всей странице. При этом все остальные стили для абзацев одинаковые.

Стили текста для всей страницы:
.text {
color: #ffffff;
line-height: 1.4;
}

Стили для текста, вложенного в блок .news-card:
.news-card .text {
color: #000000;
}

👉 @frontendInterview

​Подход «Pixel Perfect»

Pixel Perfect — это подход в вёрстке, когда итоговый результат максимально точно, пиксель в пиксель, совпадает с дизайнерским макетом. Для этого макет сайта сохраняется как обычная картинка, после чего эта картинка накладывается поверх свёрстанного сайта при помощи специальных инструментов, например, браузерных расширений.

Есть несколько способов, как можно найти визуальные отличия.

1. Сравнение скриншота и макета. Можно сделать скриншот сайта и загрузить в графический редактор, после чего сравнить скриншот и исходный макет в режиме наложения. Это удобно для дизайнеров. Но весьма неудобно для разработчика, потому что после каждого минимального изменения придётся делать новый скриншот и заменять им старый.

2. Добавление картинки макета на страницу. Можно сохранить макет картинкой, добавить её в документ с помощью тега <img> и разместить в центре страницы. После чего можно изменить прозрачность картинки с помощью opacity, и отличия сразу будут видны.

3. Браузерные расширения. У предыдущего способа есть важный недостаток — нужно на каждую страницу сначала добавить картинку, затем написать для неё стили, а в конце не забыть её удалить. Браузерные расширения, такие как PerfectPixel, берут эту рутину на себя.

👉 @frontendInterview