👉 @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

👉 @frontendInterview

Когда нужно использовать flexbox, а когда grid? Бывают ли исключения?

Гриды являются лучшим выбором, когда у вас есть сложные проекты, требующие вёрстки с использованием двумерной компоновки. Эта система позволяет создавать вёрстку с сложным дизайном, который легко обслуживается и требует меньше усилий при поддержке и масштабировании. Кроме того, свойство gap упрощает определение отступов между элементами и использование его для создания перекрывающихся элементов. Если вы работаете над проектом впервые и хотите создавать структуру и дизайн будущей вёрстки с помощью гридов, то эта система будет очень полезной.

Во всех остальных случаях можно смело использовать флексбоксы.

👉 @frontendInterview

Pearls of Algorithm Engineering (2023)

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

👉 @frontendInterview

IP address finder

Вам дана строка, представляющая собой адрес сайта. Вам нужно конвертировать символы строки в ASCII код и затем просуммировать значения. Полученное число нужно преобразовать по следующим правилам:
- первая часть адреса = result mod 256
- вторая часть адреса = result * 2 mod 256
- третья часть адреса = result * 3 mod 256
- четвертая часть адреса = result * 4 mod 256

Примеры:
"www.codewars.com" ---> [88, 176, 8, 96]
"www.starwiki.com" ---> [110, 220, 74, 184]

👉 @frontendInterview

Как можно расставить автоматическую нумерацию элементов, не относящихся к спискам при помощи CSS?

Свойство content со значением counter() активно применяется в случаях, когда нужно расставить автоматическую нумерацию элементов, не относящихся к спискам:
<section>
<h2>Внутренний механизм</h2>
<p>Механизм счётчика состоит из:</p>
<ul>
<li>кнопки;</li>
<li>пронумерованных кругов;</li>
<li>колеса прокрутки;</li>
</ul>
</section>

<section>
<h2>Принцип действия</h2>
<p>Принцип действия..</p>
</section>

<section>
<h2>См. также</h2>
<ul>
<li>Механический счётчик</li>
<li>Электронный счетчик импульсов</li>
</ul>
</section>

body {
counter-reset: cnt;
}

section {
counter-increment: cnt;
position: relative;
}

section h2::before {
content: counter(cnt);
position: absolute;
left: -45px;
top: -2px;
}

👉 @frontendInterview

Интенсив по верстке - собери сайт Apple

Привет! Меня зовут Виктор Рябков, я - Senior Fullstack разработчик с 6летним стажем.

В своем тг-канале (@ViktorRyabkovIT) я планирую провести интенсив по основам верстки для новичков, на котором каждый сможет собрать свой первый сайт.

План интенсива:
▪️Пройдем основы HTML, CSS и верстки
▪️Соберем ваш первый сайт - пет-проект
▪️Построим вам четкий план дальнейшего изучения фронтэнда - до уровня джуниор

Сделают ли эти 3 дня вас сразу разработчиком? Нет. Но зато вы получите практические знания и первые прикладные результаты. Так и стоит учиться

P.S. На интенсиве будет конкурс работ. За лучшую работу будет денежный приз и бесплатный доступ к полноценному курсу по фронтэнд-разработке!

👉Это бесплатно. Как минимум, стоит попробовать, согласен?

Присоединиться - ссылка

Реклама. ИП Рябков Виктор Александрович ИНН 780448416731 erid = LjN8KSaWz

👉 @frontendInterview