👉 @frontendInterview

​В чем преимущество использования стрелочных функций для метода в конструкторе?

Основным преимуществом использования стрелочной функции в качестве метода внутри конструктора является то, что значение this устанавливается во время создания функции и не может измениться после этого. Таким образом, когда конструктор используется для создания нового объекта, this всегда будет ссылаться на этот объект. Например, допустим, у нас есть конструктор Person, который принимает имя в качестве аргумента, имеет два метода для вывода в консоль этого имени, один в качестве обычной функции, а другой в качестве стрелочной:

 const Person = function (firstName) {
   this.firstName = firstName;
   this.sayName1 = function () {
     console.log(this.firstName);
   };
   this.sayName2 = () => {
     console.log(this.firstName);
   };
 };

 const john = new Person('John');
 const dave = new Person('Dave');

 john.sayName1(); // John
 john.sayName2(); // John

 // У обычной функции значение `this` может быть изменено, но у стрелочной функции нет
 john.sayName1.call(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
 ohn.sayName2.call(dave); // John

john.sayName1.apply(dave); // Dave (потому что 'this' сейчас ссылается на объект dave)
john.sayName2.apply(dave); // John

john.sayName1.bind(dave)(); // Dave (потому что 'this' сейчас ссылается на объект dave)
john.sayName2.bind(dave)(); // John

 var sayNameFromWindow1 = john.sayName1;
 sayNameFromWindow1(); // undefined (потому что 'this' сейчас ссылается на объект window)

 var sayNameFromWindow2 = john.sayName2;
 sayNameFromWindow2(); // John

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

👉 @frontendInterview

Код, который умещается в голове: эвристики для разработчиков

Незаменимые практические советы по написанию кода в устойчивом темпе и по управлению сложностью, из-за которой проекты часто выходят из-под контроля. В книге описываются методы и процессы, позволяющие решать ключевые вопросы: от создания чек-листов до организации командной работы, от инкапсуляции до декомпозиции, от проектирования API до модульного тестирования. Автор иллюстрирует свои выводы фрагментами кода, взятыми из готового проекта. Написанные на языке C#, они будут понятны всем, кто использует любой объектно-ориентированный язык, включая Java, C++ и TypeScript. Для более глубокого изучения материала вы можете загрузить весь код и подробные комментарии к коммитам.

👉 @frontendInterview

Log without dates

Вам дан массив событий, состоящий из строк, представляющих собой время в формате HH:MM:SS.
Все события в хронологическом порядке и не могут происходить в одну и ту же секунду.
Посчитайте, какой минимальное количество дней пройдет, когда произойдут все события.

Примеры:
Input -> ["00:00:00", "00:01:11", "02:15:59", "23:59:58", "23:59:59"]
Output -> 1

Input -> ["12:12:12"]
Output -> 1

Input -> ["12:00:00", "23:59:59", "00:00:00"]
Output -> 2

Input -> []
Output -> 0

👉 @frontendInterview

​Почему важно использовать h1–h6 и каким пользователям они приносят пользу? Зачем соблюдать иерархию заголовков?

Заголовки важно использовать по крайне мере по двум причинам — SEO и доступность.

В первом случае поисковые роботы используют заголовки <h1>–<h6>, чтобы понять структуру и смысл содержимого на странице. Это один из факторов ранжирования в поисковой выдаче. К примеру, Google может определить, когда уместно отображать страницу в ответ на запрос пользователя, и делать страницу доступной для избранных фрагментов. Избранные фрагменты — это быстрые ответы на поисковые запросы пользователей Google.

Если заглянуть в код страницы, то можно увидеть, что заголовок «Самые кассовые фильмы» обёрнут в тег <h2>. Так что правильное структурирование контента на сайте, включая теги заголовков, — это то, что помогает Google с этой задачей.

Во втором случае заголовки <h1>–<h6> делают удобной навигацию по сайту для пользователей, особенно для тех, кто пользуется скринридерами. Распространённая техника — быстро перемешаться с заголовка к заголовку для общего понимания содержимого страницы.

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

👉 @frontendInterview

🇪🇸 Лучшая страна в Европе для переезда для IT специалистов 🇪🇸

Хотите жить в спокойной стране и дружелюбной среде?
Если ваша цель получения ВНЖ в Европе, рекомендуем скорее воспользоваться шансом!

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

❗️До 7 сентября осталось 4 места на бесплатную консультацию по получению ВНЖ в Испании! Успейте записаться по ссылке
@outbox_tm

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

Почему лучше использовать em и rem вместо px с точки зрения доступности интерфейса?

Единицы em и rem — масштабируемый и гибкий способ изменения размеров шрифта на странице, в отличие от px. Если измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью em или rem, будут автоматически обновлены, чтобы сохранить их относительные значения.

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

👉 @frontendInterview